/*
Theme Name: Marca IPTV
Theme URI: https://marcaiptv.example
Author: Safae
Author URI: https://marcaiptv.example
Description: Sports-newspaper style IPTV theme — bold red on white, condensed headlines, live ticker, news-card grid, fixtures and pricing. Inspired by the Spanish sports-press look.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marcaiptv
*/

:root{
  --red:        #e3000f;
  --red-dark:   #b80009;
  --ink:        #15171a;
  --ink-2:      #23262b;
  --bg:         #ffffff;
  --bg-2:       #f2f3f5;
  --bg-3:       #e7e9ec;
  --line:       #dcdfe3;
  --text:       #15171a;
  --muted:      #6b7177;
  --green:      #1aa34a;

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body:    'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img{ max-width:100%; display:block; }
body{
  background:var(--bg-2);
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
a,button,.btn,.card,.fx-watch,.pcb-plan{ -webkit-tap-highlight-color:transparent; }
.container{ max-width:1240px; margin:0 auto; padding:0 16px; }

/* ─── TOP UTILITY BAR ─── */
.topbar{ background:var(--ink); color:#cfd2d6; font-size:12px; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:34px; }
.topbar-links{ display:flex; gap:18px; }
.topbar-links a{ color:#cfd2d6; transition:color .15s; }
.topbar-links a:hover{ color:#fff; }
.topbar-date{ font-family:var(--display); letter-spacing:.5px; text-transform:uppercase; color:#9aa0a6; }

/* ─── HEADER ─── */
.site-head{ background:var(--bg); border-bottom:3px solid var(--red); position:sticky; top:0; z-index:100; }
.head-inner{ display:flex; align-items:center; gap:24px; height:64px; }
.logo{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:34px; line-height:1; letter-spacing:-1px; text-transform:uppercase; color:var(--red); }
.logo .iptv{ background:var(--ink); color:#fff; font-size:18px; padding:3px 7px; letter-spacing:1px; }
.main-nav{ display:flex; gap:2px; margin-left:auto; }
.main-nav a{ font-family:var(--display); font-weight:500; font-size:17px; text-transform:uppercase; letter-spacing:.5px; padding:8px 12px; color:var(--ink); border-bottom:3px solid transparent; transition:all .15s; }
.main-nav a:hover{ color:var(--red); border-color:var(--red); }
.head-cta{ background:var(--red); color:#fff; font-family:var(--display); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.5px; padding:9px 16px; transition:background .15s; }
.head-cta:hover{ background:var(--red-dark); }
.nav-toggle{ display:none; flex-direction:column; gap:4px; width:42px; height:38px; padding:9px; background:var(--ink); border:none; cursor:pointer; margin-left:auto; }
.nav-toggle span{ height:2px; background:#fff; transition:.25s; }
.site-head.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-head.open .nav-toggle span:nth-child(2){ opacity:0; }
.site-head.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ─── ÚLTIMA HORA TICKER ─── */
.ticker{ background:var(--red); color:#fff; display:flex; align-items:stretch; overflow:hidden; }
.ticker-label{ background:var(--ink); font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:1px; text-transform:uppercase; padding:9px 16px; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.ticker-label .dot{ width:8px; height:8px; background:#fff; border-radius:50%; animation:blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.3; } }
.ticker-track-wrap{ overflow:hidden; flex:1; }
.ticker-track{ display:flex; gap:40px; white-space:nowrap; padding:9px 0 9px 24px; animation:scroll 38s linear infinite; font-family:var(--display); font-size:15px; letter-spacing:.5px; text-transform:uppercase; }
.ticker-track span::before{ content:'›'; margin-right:10px; opacity:.7; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ─── SECTION TITLE ─── */
.sec-title{ display:flex; align-items:center; gap:12px; margin:30px 0 16px; }
.sec-title h2{ font-family:var(--display); font-weight:700; font-size:26px; text-transform:uppercase; letter-spacing:.3px; color:var(--ink); }
.sec-title::before{ content:''; width:6px; height:26px; background:var(--red); }
.sec-title .more{ margin-left:auto; font-family:var(--display); font-size:14px; text-transform:uppercase; color:var(--red); border-bottom:2px solid var(--red); }

/* ─── HERO ─── */
.hero{ padding:22px 0; }
.hero-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.lead{ position:relative; background:var(--ink); color:#fff; overflow:hidden; min-height:420px; display:flex; align-items:flex-end; }
.lead img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.lead-body{ position:relative; z-index:2; padding:30px; }
.tag{ display:inline-block; background:var(--red); color:#fff; font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; margin-bottom:12px; }
.tag.live::before{ content:'● '; }
.lead h1{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4.6vw,56px); line-height:1; text-transform:uppercase; letter-spacing:-.5px; }
.lead p{ font-size:16px; color:#dfe2e6; margin-top:12px; max-width:640px; }
.lead-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

.side-list{ display:flex; flex-direction:column; }
.side-item{ display:grid; grid-template-columns:104px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); background:var(--bg); }
.side-item:first-child{ padding-top:0; }
.side-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.side-thumb img{ width:100%; height:100%; object-fit:cover; }
.side-item h3{ font-family:var(--display); font-weight:600; font-size:18px; line-height:1.05; text-transform:uppercase; }
.side-item .tag-txt{ color:var(--red); font-family:var(--display); font-size:12px; letter-spacing:.5px; text-transform:uppercase; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.5px; padding:12px 20px; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.btn-red{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-red:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn-ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--ink); }
.btn-dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-dark:hover{ background:#000; }

/* glowing free trial */
.btn-trial{ background:var(--red); color:#fff; border-color:#fff; position:relative; overflow:hidden; animation:glow 2.2s ease-in-out infinite; }
.btn-trial:hover{ background:#fff; color:var(--red); }
@keyframes glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(227,0,15,.5); } 50%{ box-shadow:0 0 22px 5px rgba(227,0,15,.55); } }

/* ─── NEWS / CHANNELS GRID ─── */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card{ background:var(--bg); border:1px solid var(--line); transition:transform .15s, box-shadow .15s; }
.card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.10); }
.card-img{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); position:relative; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-tag{ position:absolute; top:10px; left:10px; background:var(--red); color:#fff; font-family:var(--display); font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; }
.card-body{ padding:14px; }
.card-body h3{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1.04; text-transform:uppercase; margin-bottom:6px; }
.card-body p{ font-size:13.5px; color:var(--muted); }

/* ─── FIXTURES (partidos) ─── */
.fixtures{ background:var(--bg); border:1px solid var(--line); }
.fixtures-head{ background:var(--ink); color:#fff; font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.fixtures-head .live-dot{ width:9px; height:9px; background:var(--red); border-radius:50%; animation:blink 1s infinite; }
.fixture{ display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fixture:last-child{ border-bottom:none; }
.fx-time{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--red); display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.fx-score{ font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); }
.fx-teams{ font-family:var(--display); font-weight:500; font-size:17px; text-transform:uppercase; }
.fx-comp{ font-size:12px; color:var(--muted); }
.fx-status{ display:inline-block; font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.5px; text-transform:uppercase; padding:1px 8px; margin-left:8px; vertical-align:middle; }
.fx-status.scheduled{ background:var(--bg-3); color:var(--ink); }
.fx-status.live{ background:var(--red); color:#fff; }
.fx-status.live::before{ content:'●'; margin-right:5px; animation:blink 1s infinite; }
.fx-status.finished{ background:var(--ink); color:#fff; }
.fx-status.other{ background:#e08600; color:#fff; }
.fx-watch{ font-family:var(--display); font-size:13px; text-transform:uppercase; background:var(--red); color:#fff; padding:6px 12px; }
.fx-watch:hover{ background:var(--red-dark); }

/* ─── PRICING ─── */
.pricing{ background:var(--ink); color:#fff; padding:46px 0; }
.pricing .sec-title h2{ color:#fff; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.plan{ background:var(--ink-2); border:2px solid #33373d; padding:28px 24px; position:relative; display:flex; flex-direction:column; }
.plan.feat{ border-color:var(--red); }
.plan .ptag{ position:absolute; top:-13px; left:24px; background:var(--red); color:#fff; font-family:var(--display); font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:4px 12px; }
.plan h3{ font-family:var(--display); font-weight:600; font-size:24px; text-transform:uppercase; }
.plan .price{ font-family:var(--display); font-weight:700; font-size:58px; line-height:.9; margin:8px 0 2px; }
.plan .price sup{ font-size:24px; }
.plan .per{ color:#9aa0a6; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.plan ul{ list-style:none; margin:18px 0; flex:1; }
.plan li{ padding:8px 0 8px 24px; position:relative; font-size:14px; border-top:1px solid #33373d; color:#dfe2e6; }
.plan li::before{ content:'✓'; position:absolute; left:0; color:var(--red); font-weight:700; }
.plan.feat li::before{ color:#fff; }
.plan .btn{ width:100%; justify-content:center; }
.pricing-trial{ text-align:center; margin-top:26px; }
.pricing-trial .note{ display:block; margin-top:12px; color:#9aa0a6; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }

/* ─── BAND ─── */
.band{ background:var(--red); color:#fff; padding:30px 0; }
.band .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.band h2{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,40px); text-transform:uppercase; line-height:1; }
.band p{ opacity:.92; margin-top:4px; }

/* ─── FOOTER ─── */
.site-footer{ background:var(--ink); color:#9aa0a6; padding:46px 0 26px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:30px; border-bottom:1px solid #2a2e34; }
.foot-grid h4{ font-family:var(--display); font-weight:600; font-size:16px; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.foot-logo{ font-family:var(--display); font-weight:700; font-size:30px; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.foot-grid ul{ list-style:none; }
.foot-grid li{ margin-bottom:9px; }
.foot-grid a:hover{ color:#fff; }
.foot-bottom{ padding-top:20px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.foot-disclaimer{ font-size:12px; max-width:900px; margin-top:14px; line-height:1.6; }

/* ─── WHATSAPP FLOAT ─── */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:96; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.3); animation:wapulse 2.4s infinite; }
.wa-float svg{ width:30px; height:30px; fill:currentColor; }
@keyframes wapulse{ 0%,100%{ box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow:0 6px 18px rgba(0,0,0,.3), 0 0 0 13px rgba(37,211,102,0); } }

/* ─── REVEAL ─── */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s, transform .6s; }
.reveal.in{ opacity:1; transform:none; }

/* ─── BLOG ─── */
.post-wrap{ max-width:760px; margin:24px auto; background:var(--bg); border:1px solid var(--line); padding:34px; }
.post-wrap h1{ font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,46px); text-transform:uppercase; line-height:1; margin-bottom:10px; }
.post-meta{ color:var(--muted); font-size:13px; text-transform:uppercase; font-family:var(--display); letter-spacing:.5px; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--red); }
.post-content{ font-size:16px; line-height:1.7; }
.post-content h2{ font-family:var(--display); font-size:28px; text-transform:uppercase; margin:26px 0 10px; }
.post-content p{ margin-bottom:14px; }
.post-content a{ color:var(--red); text-decoration:underline; }
.post-content ul,.post-content ol{ margin:0 0 14px 22px; }
.post-content li{ margin-bottom:6px; }
.post-table{ overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); -webkit-overflow-scrolling:touch; }
.post-table table{ width:100%; border-collapse:collapse; min-width:380px; }
.post-table th,.post-table td{ padding:10px 12px; text-align:left; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; }
.post-table th{ background:var(--ink); color:#fff; font-family:var(--display); text-transform:uppercase; }
.post-table td:first-child{ font-weight:700; background:var(--bg-2); }

/* In-article IPTV price box */
.post-cta-box{ background:var(--ink); color:#fff; padding:26px; margin:30px 0; border-left:6px solid var(--red); }
.pcb-kicker{ font-family:var(--display); font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:#ff5a64; }
.post-cta-box h3{ font-family:var(--display); font-weight:700; font-size:26px; text-transform:uppercase; color:#fff; margin:6px 0 8px; }
.post-cta-box p{ color:#cfd2d6; font-size:15px; margin-bottom:16px; }
.post-cta-box strong{ color:#fff; }
.pcb-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.post-cta-box .pcb-plan{ display:flex; flex-direction:column; align-items:center; gap:2px; border:2px solid #33373d; padding:16px 10px; color:#fff; text-decoration:none; position:relative; transition:all .15s; }
.post-cta-box .pcb-plan:hover{ border-color:var(--red); transform:translateY(-3px); }
.post-cta-box .pcb-plan.feat{ border-color:var(--red); background:#23262b; }
.post-cta-box .pcb-plan b{ font-family:var(--display); font-size:18px; text-transform:uppercase; }
.post-cta-box .pcb-plan span{ font-family:var(--display); font-weight:700; font-size:34px; color:#ff5a64; line-height:1; }
.post-cta-box .pcb-plan i{ font-size:11px; color:#9aa0a6; text-transform:uppercase; letter-spacing:.5px; font-style:normal; }
.post-cta-box .pcb-plan em{ position:absolute; top:-12px; background:var(--red); color:#fff; font-family:var(--display); font-size:11px; padding:2px 8px; text-transform:uppercase; font-style:normal; }
.post-cta-box .pcb-trial{ display:inline-block; background:var(--red); color:#fff; border:2px solid #fff; font-family:var(--display); font-size:18px; text-transform:uppercase; letter-spacing:.5px; padding:12px 22px; text-decoration:none; animation:glow 2.2s ease-in-out infinite; }
.post-cta-box .pcb-trial:hover{ background:#fff; color:var(--red); }
@media(max-width:560px){ .pcb-plans{ grid-template-columns:1fr; } }

/* Blog cover */
.post-cover{ margin:0 -34px 22px; border-bottom:3px solid var(--red); }
.post-cover img{ width:100%; display:block; }
.card .card-cover img{ width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; border-bottom:1px solid var(--line); }

/* ─── RESPONSIVE ─── */
@media(max-width:980px){
  .main-nav, .head-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--bg); border-bottom:3px solid var(--red); padding:6px 16px 14px; }
  .site-head.open .main-nav{ display:flex; }
  .main-nav a{ border-bottom:1px solid var(--line); padding:12px 0; }
  .hero-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:repeat(3,1fr); }
  .plans{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:680px){
  .topbar-links{ display:none; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .fixture{ grid-template-columns:54px 1fr; }
  .fx-watch{ grid-column:2; justify-self:start; margin-top:4px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .post-wrap{ padding:20px; margin:14px auto; }
  .post-cover{ margin:0 -20px 18px; }
  .post-cta-box{ padding:20px; }
  .lead-body{ padding:22px; }
}
@media(max-width:460px){
  .card-grid{ grid-template-columns:1fr; }
  .lead{ min-height:340px; }
  .foot-grid{ grid-template-columns:1fr; }
  .pcb-plans{ grid-template-columns:1fr; }
  .head-inner{ height:56px; }
  .logo{ font-size:28px; }
}
/* iOS safe-area for sticky header & topbar edges */
@supports(padding:max(0px)){
  .topbar .container, .head-inner{ padding-left:0; padding-right:0; }
}
@supports(padding:max(0px)){
  .wa-float{ bottom:max(18px,env(safe-area-inset-bottom)); right:max(18px,env(safe-area-inset-right)); }
  .container{ padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
}
input,select,textarea{ font-size:16px; }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } }