/* =============================================================
   Sky Baseball TV — Landing
   Built on the Purakura Play design system, adapted for web.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* surfaces */
  --bg-0:#191C26; --bg-1:#20242F; --bg-2:#272C38; --bg-3:#313747;
  /* hairlines */
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.16);
  /* ink */
  --ink-0:#F4F8FA; --ink-1:#E8EEF1; --ink-2:#8A98A4; --ink-3:#56646E; --ink-4:#2E3942;
  /* brand turquoise */
  --turq:#E6B800; --turq-2:#C99F0A; --turq-3:#A8850A;
  --accent:#F5CA0F; --accent-soft:rgba(245,202,15,.12); --accent-line:rgba(245,202,15,.40);
  --turq-glow:rgba(245,202,15,.45); --turq-glow-soft:rgba(245,202,15,.15);
  --accent-glow:rgba(245,202,15,.40); --accent-glow-soft:rgba(245,202,15,.25);
  /* secondary */
  --red:#FF4D5E; --live:#FF2D45; --amber:#FFB23F; --gold:#E8C46B;
  --purple:#3D297A; --purple-2:#311F63;
  /* fonts */
  --font-display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --font-ui:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Inter',ui-sans-serif,system-ui,sans-serif;
  /* radii */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-3xl:24px; --r-pill:999px;
  /* shadows */
  --shadow-card:0 8px 24px rgba(0,0,0,.40);
  --shadow-cta:0 8px 24px rgba(245,202,15,.25);
  --shadow-modal:0 32px 80px rgba(0,0,0,.60);
  --shadow-text:0 2px 12px rgba(0,0,0,.50);
  /* gradients */
  --grad-brand:linear-gradient(135deg,#F5CA0F,#FF4D5E);
  --grad-topnav:linear-gradient(180deg,rgba(25,28,38,.95) 0%,rgba(25,28,38,.6) 60%,transparent 100%);
  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg-0); color:var(--ink-1);
  font-family:var(--font-ui); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--accent); color:var(--purple);}

/* film grain over whole page */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink-0); margin:0; letter-spacing:-.02em; line-height:1.08;}
h1{font-weight:800; letter-spacing:-.04em;}
.kicker{
  font-family:var(--font-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); font-weight:700; display:inline-flex; align-items:center; gap:8px;
}
.kicker .star{color:var(--accent);}
.meta{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--ink-2); text-transform:uppercase;}
.muted{color:var(--ink-2);}
.lead{font-size:19px; line-height:1.6; color:var(--ink-2);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-pill); border:none; cursor:pointer;
  font-family:var(--font-ui); font-weight:700; font-size:16px; white-space:nowrap;
  transition:transform .2s var(--ease-out), background .2s, box-shadow .2s, border-color .2s;
}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--accent); color:var(--purple); box-shadow:var(--shadow-cta); font-style:italic;}
.btn-primary:hover{transform:translateY(-2px); background:var(--purple); color:var(--accent);}
.btn-primary:active{background:var(--purple-2); color:var(--accent); transform:translateY(0);}
.btn-secondary{background:rgba(255,255,255,.06); color:var(--ink-0); border:1px solid var(--line-2);}
.btn-secondary:hover{background:rgba(255,255,255,.12); border-color:var(--line-strong);}
.btn-ghost{background:transparent; color:var(--ink-1); border:1px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--accent-line); color:var(--ink-0);}
.btn-lg{padding:18px 36px; font-size:18px;}
.btn-block{display:flex; width:100%;}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; transition:background .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(25,28,38,.82); backdrop-filter:blur(14px); border-bottom-color:var(--line); padding:12px 32px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none; position:relative;
  background:radial-gradient(120% 120% at 30% 20%, var(--accent) 0%, var(--turq) 55%, var(--turq-3) 100%);
  box-shadow:0 0 18px var(--turq-glow); display:grid; place-items:center;
}
.brand-mark::before{ /* baseball seams */
  content:""; position:absolute; inset:0; border-radius:11px;
  background:
    radial-gradient(circle at 50% -40%, transparent 67%, rgba(26,22,6,.55) 68%, transparent 71%),
    radial-gradient(circle at 50% 140%, transparent 67%, rgba(26,22,6,.55) 68%, transparent 71%);
}
.brand-mark svg{width:20px; height:20px; color:var(--purple); position:relative; z-index:1;}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:#fff; line-height:1; display:inline-flex; align-items:center; gap:6px;}
.brand-name .bb-pill{background:var(--accent); color:var(--purple); padding:3px 8px 2px; border-radius:5px; font-style:italic; font-weight:800; letter-spacing:0; box-shadow:0 0 14px var(--accent-glow-soft);}
.brand-name .plus{color:var(--ink-2); font-weight:600; font-size:13px; font-style:italic; letter-spacing:.02em;}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--ink-2); padding:9px 14px; border-radius:var(--r-md);
  transition:color .2s, background .2s; white-space:nowrap;
}
.nav-links a:hover{color:var(--ink-0); background:rgba(255,255,255,.05);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-actions .btn{padding:11px 22px; font-size:14.5px;}
.nav-mac{display:none;}
.menu-btn{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r-md); width:44px; height:44px; color:var(--ink-0); cursor:pointer;}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; padding:140px 0 80px; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg::after{content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(25,28,38,.92) 0%, rgba(25,28,38,.55) 45%, transparent 75%),
  linear-gradient(180deg, transparent 40%, var(--bg-0) 96%);}
.hero .wrap{position:relative; z-index:2; width:100%;}
.hero-inner{max-width:760px;}
.hero h1{font-size:clamp(44px,7vw,86px); margin:22px 0 0;}
.hero h1 .accent{
  background:linear-gradient(120deg,var(--accent),var(--turq)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{font-size:clamp(17px,1.6vw,21px); color:var(--ink-1); max-width:620px; margin:24px 0 0; line-height:1.6;}
.hero-sub b{color:var(--ink-0); font-weight:700;}
.hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hero-trust{display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap;}
.hero-trust .item{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2);}
.hero-trust .item svg{width:18px; height:18px; color:var(--accent); flex:none;}
.live-pill{
  display:inline-flex; align-items:center; gap:7px; background:var(--live); color:#fff;
  padding:5px 12px 5px 11px; border-radius:var(--r-xs); font-family:var(--font-display);
  font-weight:700; font-size:12.5px; letter-spacing:.08em;
}
.live-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* floating glass stat tiles in hero */
.hero-floats{position:absolute; right:6%; top:50%; transform:translateY(-50%); z-index:2; display:grid; gap:16px; width:300px;}
.float-card{
  background:rgba(15,20,23,.55); backdrop-filter:blur(12px); border:1px solid var(--line-2);
  border-radius:var(--r-2xl); padding:20px 22px; box-shadow:var(--shadow-card);
}
.float-card .meta{font-size:11.5px; margin-bottom:8px;}
.float-card .big{font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--ink-0); letter-spacing:-.03em; line-height:1;}
.float-card .big .u{color:var(--accent); font-size:22px;}
.float-card .sub{font-size:13px; color:var(--ink-2); margin-top:4px;}

/* ---------- section frame ---------- */
section.block{padding:90px 0; position:relative;}
.sec-head{max-width:680px; margin-bottom:48px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head h2{font-size:clamp(30px,3.6vw,46px); margin-top:14px;}
.sec-head p{margin-top:16px;}

/* ---------- value props ---------- */
.props{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.prop{
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl); padding:30px;
  transition:border-color .25s, transform .25s, background .25s;
}
.prop:hover{border-color:var(--accent-line); transform:translateY(-4px); background:var(--bg-2);}
.prop .ic{width:52px; height:52px; border-radius:var(--r-lg); background:var(--accent-soft); display:grid; place-items:center; margin-bottom:20px;}
.prop .ic svg{width:26px; height:26px; color:var(--accent);}
.prop h3{font-size:21px; margin-bottom:10px;}
.prop p{font-size:15px; color:var(--ink-2); margin:0; line-height:1.6;}

/* ---------- content type bento ---------- */
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.bento .cell{
  position:relative; border-radius:var(--r-2xl); overflow:hidden; min-height:300px;
  border:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; transition:transform .3s var(--ease-out), border-color .3s;
}
.bento .cell:hover{transform:translateY(-6px); border-color:var(--accent-line);}
.bento .cell .art{position:absolute; inset:0; z-index:0; transition:transform .5s var(--ease-out);}
.bento .cell:hover .art{transform:scale(1.06);}
.bento .cell .art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,28,38,.1) 0%, rgba(25,28,38,.55) 55%, rgba(25,28,38,.95) 100%);}
.bento .cell .body{position:relative; z-index:1;}
.bento .cell .kicker{margin-bottom:10px;}
.bento .cell h3{font-size:24px;}
.bento .cell p{font-size:14px; color:var(--ink-1); margin:8px 0 0; line-height:1.5;}
.bento .cell.wide{grid-column:span 2;}

/* ---------- counters ---------- */
.counters{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center;}
.counter{padding:34px 18px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl);}
.counter .num{font-family:var(--font-display); font-weight:800; font-size:clamp(38px,4.4vw,58px); color:var(--ink-0); letter-spacing:-.04em; line-height:1;}
.counter .num .plus{color:var(--accent);}
.counter .lbl{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-top:12px;}

/* ---------- pricing ---------- */
.price-tabs{display:inline-flex; gap:6px; padding:6px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-pill); margin:0 auto 14px; }
.price-tab{
  appearance:none; background:none; border:none; cursor:pointer; padding:12px 28px; border-radius:var(--r-pill);
  font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--ink-2); transition:color .2s, background .2s;
}
.price-tab.active{background:var(--accent); color:var(--purple); box-shadow:var(--shadow-cta);}
.price-note{text-align:center; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; margin-bottom:40px;}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.plan{
  position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl);
  padding:30px 26px; display:flex; flex-direction:column; transition:border-color .25s, transform .25s, background .25s;
}
.plan:hover{border-color:var(--line-strong); transform:translateY(-4px);}
.plan.featured{border-color:var(--accent); background:linear-gradient(180deg, rgba(245,202,15,.12), var(--bg-1) 42%); box-shadow:0 18px 50px rgba(245,202,15,.14); transform:translateY(-12px); z-index:1;}
.plan.featured:hover{transform:translateY(-16px); border-color:var(--accent);}
.plan.featured .price .amt{color:var(--accent);}
.plan.featured::before{
  content:"MÁS POPULAR"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--purple); font-family:var(--font-mono); font-weight:700; font-size:11px;
  letter-spacing:.12em; padding:5px 14px; border-radius:var(--r-pill); white-space:nowrap; box-shadow:0 4px 14px var(--accent-glow-soft);
}
.plan .dur{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);}
.plan .save{
  display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--gold); background:rgba(232,196,107,.1); border:1px solid rgba(232,196,107,.25); padding:3px 10px; border-radius:var(--r-pill);
}
.plan .save.muted{color:var(--ink-3); background:transparent; border-color:transparent; padding-left:0;}
.plan .price{margin:20px 0 4px; display:flex; align-items:baseline; gap:6px;}
.plan .price .amt{font-family:var(--font-display); font-weight:800; font-size:46px; color:var(--ink-0); letter-spacing:-.04em; line-height:1;}
.plan .price .cur{font-family:var(--font-mono); font-size:14px; color:var(--ink-2); letter-spacing:.08em;}
.plan .permo{font-size:13.5px; color:var(--ink-3); margin-bottom:22px;}
.plan ul{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px;}
.plan li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-1); line-height:1.4;}
.plan li svg{width:17px; height:17px; color:var(--accent); flex:none; margin-top:2px;}
.plan .btn{margin-top:auto;}

/* ---------- sports logos ---------- */
.sports-band{background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.logo-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px;}
.sport-logo{height:84px; min-width:128px; padding:0 26px; background:#fff; border:2px solid var(--accent); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px var(--accent-glow-soft); transition:transform .25s var(--ease-out), box-shadow .25s;}
.sport-logo:hover{transform:translateY(-4px); box-shadow:0 0 30px var(--accent-glow);}
.sport-logo img{height:50px; width:auto; object-fit:contain;}

/* ---------- trial band ---------- */
.trial{position:relative; border-radius:var(--r-3xl); overflow:hidden; border:1px solid var(--line-2); padding:60px;}
.trial .art{position:absolute; inset:0; z-index:0;}
.trial .art::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(25,28,38,.92), rgba(25,28,38,.55));}
.trial .body{position:relative; z-index:1; max-width:560px;}
.trial h2{font-size:clamp(28px,3.4vw,42px); margin:14px 0 14px;}
.trial p{color:var(--ink-1); margin:0 0 28px; font-size:17px;}
.countdown{font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; color:var(--amber); text-transform:uppercase; margin-top:18px;}

/* ---------- why grid ---------- */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.why .item{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; transition:background .25s, border-color .25s;}
.why .item:hover{background:var(--bg-2); border-color:var(--line-strong);}
.why .item .ic{width:44px; height:44px; border-radius:var(--r-md); background:var(--accent-soft); display:grid; place-items:center; margin-bottom:16px;}
.why .item .ic svg{width:22px; height:22px; color:var(--accent);}
.why .item h4{font-size:18px; margin-bottom:8px;}
.why .item p{font-size:14px; color:var(--ink-2); margin:0; line-height:1.55;}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto; display:grid; gap:12px;}
.faq-item{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .25s;}
.faq-item.open{border-color:var(--accent-line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--ink-0);
  font-family:var(--font-display); font-weight:600; font-size:18px; padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-q .chev{width:22px; height:22px; color:var(--accent); flex:none; transition:transform .3s var(--ease-out);}
.faq-item.open .chev{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease-out);}
.faq-a .inner{padding:0 24px 22px; color:var(--ink-2); font-size:15.5px; line-height:1.65;}

/* ---------- testimonials ---------- */
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.testi{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl); padding:28px;}
.testi .stars{color:var(--amber); font-size:15px; letter-spacing:2px; margin-bottom:14px;}
.testi p{font-size:15px; color:var(--ink-1); line-height:1.6; margin:0 0 20px;}
.testi .who{display:flex; align-items:center; gap:12px;}
.testi .av{width:42px; height:42px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#1A1606; font-size:16px;}
.testi .who .n{font-weight:600; font-size:14.5px; color:var(--ink-0);}
.testi .who .m{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase;}

/* ---------- newsletter ---------- */
.news{text-align:center; max-width:560px; margin:0 auto;}
.news form{display:flex; gap:12px; margin-top:28px;}
.news input{
  flex:1; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:15px 22px; color:var(--ink-0); font-family:var(--font-ui); font-size:15px;
}
.news input:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft);}
.news input::placeholder{color:var(--ink-3);}

/* ---------- footer ---------- */
footer{background:#121419; border-top:1px solid var(--line); padding:60px 0 40px;}
.foot-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.foot-links{display:flex; gap:48px; flex-wrap:wrap;}
.foot-col h5{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px;}
.foot-col a{display:block; font-size:14.5px; color:var(--ink-2); padding:5px 0; transition:color .2s;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px;}

/* whatsapp float */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:200; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 8px 28px rgba(37,211,102,.4);
  transition:transform .2s var(--ease-out);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px; height:30px; color:#fff;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-floats{display:none;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento .cell.wide{grid-column:span 2;}
}
/* nav collapses to hamburger earlier so links never cramp/wrap */
@media (max-width:1024px){
  .nav-links, .nav-actions .btn{display:none;}
  .menu-btn{display:grid; place-items:center;}
}
@media (max-width:880px){
  .props,.why,.testis{grid-template-columns:1fr;}
  .counters{grid-template-columns:repeat(2,1fr);}
  .plans{grid-template-columns:repeat(2,1fr);}
  .plan.featured::before{font-size:10px;}
  section.block{padding:64px 0;}
  .trial{padding:40px 28px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .bento{grid-template-columns:1fr;}
  .bento .cell.wide{grid-column:span 1;}
  .counters,.plans{grid-template-columns:1fr;}
  .news form{flex-direction:column;}
  .news input{text-align:center;}
}

/* mobile menu sheet */
.mobile-sheet{
  position:fixed; inset:0; z-index:150; background:rgba(25,28,38,.97); backdrop-filter:blur(10px);
  display:none; flex-direction:column; padding:28px; gap:6px;
}
.mobile-sheet.open{display:flex;}
.mobile-sheet .close{align-self:flex-end; background:none; border:1px solid var(--line-2); border-radius:var(--r-md); width:44px; height:44px; color:var(--ink-0); font-size:22px; cursor:pointer;}
.mobile-sheet a{font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink-1); padding:14px 4px; border-bottom:1px solid var(--line);}
.mobile-sheet .btn{margin-top:22px;}

/* =============================================================
   INNER PAGES — header band, prose, contact, channels
   ============================================================= */
.page-top{padding-top:96px;}
.page-hero{
  position:relative; border-radius:var(--r-3xl); overflow:hidden; margin:18px 0 56px;
  border:1px solid var(--line); background:
    radial-gradient(120% 140% at 50% -40%, rgba(245,202,15,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  padding:64px 40px; text-align:center;
}
.page-hero .kicker{justify-content:center; margin-bottom:14px;}
.page-hero h1{font-size:clamp(32px,4.6vw,56px); color:var(--accent); letter-spacing:-.03em;}
.page-hero p{margin:18px auto 0; max-width:620px; color:var(--ink-2); font-size:17px;}

/* prose / legal */
.prose{max-width:840px; margin:0 auto 80px;}
.prose .updated{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:36px;}
.prose h2{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--accent); letter-spacing:-.02em; margin:42px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p{font-size:16px; line-height:1.75; color:var(--ink-1); margin:0 0 18px;}
.prose p.muted{color:var(--ink-2);}
.prose ul{margin:0 0 20px; padding:0; list-style:none; display:grid; gap:11px;}
.prose li{display:flex; align-items:flex-start; gap:11px; font-size:16px; line-height:1.6; color:var(--ink-1);}
.prose li svg{width:18px; height:18px; color:var(--accent); flex:none; margin-top:4px;}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.prose strong{color:var(--ink-0);}

/* contact */
.contact-wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:start; margin-bottom:80px;}
.contact-info h2{font-size:clamp(26px,3vw,40px); color:var(--ink-0); margin-bottom:18px;}
.contact-info p{color:var(--ink-2); font-size:16.5px; line-height:1.7; margin:0 0 28px;}
.contact-chan{display:grid; gap:14px;}
.contact-chan a{display:flex; align-items:center; gap:16px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); padding:18px 20px; transition:border-color .25s, background .25s;}
.contact-chan a:hover{border-color:var(--accent-line); background:var(--bg-2);}
.contact-chan .ic{width:46px; height:46px; border-radius:var(--r-lg); background:var(--accent-soft); display:grid; place-items:center; flex:none;}
.contact-chan .ic svg{width:24px; height:24px; color:var(--accent);}
.contact-chan .t{font-weight:600; color:var(--ink-0); font-size:15.5px;}
.contact-chan .s{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); text-transform:uppercase; margin-top:3px;}
.contact-form{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-3xl); padding:36px;}
.field{margin-bottom:20px;}
.field label{display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:9px;}
.field input, .field textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:14px 16px; color:var(--ink-0); font-family:var(--font-ui); font-size:15.5px; resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft);}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3);}

/* channels list */
.chan-search{position:relative; max-width:520px; margin:0 auto 48px;}
.chan-search input{
  width:100%; background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:16px 22px 16px 52px; color:var(--ink-0); font-family:var(--font-ui); font-size:15.5px;
}
.chan-search input:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft);}
.chan-search svg{position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--ink-3);}
.region{margin-bottom:48px;}
.region-head{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.region-head h2{font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);}
.region-head .rule{flex:1; height:1px; background:var(--line);}
.region-head .ct{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.06em;}
.chan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.chan-cell{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 20px; font-size:15px; color:var(--ink-1); transition:border-color .2s, background .2s, transform .2s;
}
.chan-cell:hover{border-color:var(--accent-line); background:var(--bg-2); transform:translateX(3px);}
.chan-cell .tag{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3);}
.chan-cell.live .tag{color:var(--live);}
.chan-empty{text-align:center; color:var(--ink-3); padding:40px; font-family:var(--font-mono); letter-spacing:.06em;}

@media (max-width:880px){
  .contact-wrap{grid-template-columns:1fr;}
  .chan-grid{grid-template-columns:repeat(2,1fr);}
  .page-hero{padding:48px 24px;}
}
@media (max-width:560px){
  .chan-grid{grid-template-columns:1fr;}
}

/* =============================================================
   ACCOUNT — auth, dashboard shell, orders, trial countdown
   ============================================================= */
/* auth card (login / register / lost password) */
.auth-wrap{max-width:460px; margin:0 auto 90px;}
.auth-card{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-3xl); padding:40px;}
.auth-card h2{font-size:26px; color:var(--ink-0); margin-bottom:8px;}
.auth-card .sub{color:var(--ink-2); font-size:15px; margin:0 0 28px;}
.auth-foot{margin-top:22px; text-align:center; font-size:14px; color:var(--ink-2);}
.auth-foot a{color:var(--accent); text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}
.auth-row{display:flex; justify-content:space-between; align-items:center; margin:-6px 0 22px;}
.auth-row label{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer;}
.auth-tabs{display:flex; gap:6px; padding:5px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); margin-bottom:26px;}
.auth-tab{flex:1; appearance:none; background:none; border:none; cursor:pointer; padding:11px; border-radius:var(--r-pill); font-family:var(--font-ui); font-weight:600; font-size:14.5px; color:var(--ink-2); transition:.2s;}
.auth-tab.active{background:var(--accent); color:var(--purple);}

/* dashboard shell */
.account-shell{display:grid; grid-template-columns:256px 1fr; gap:26px; margin-bottom:80px; align-items:start;}
.account-side{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl); padding:12px; position:sticky; top:96px;}
.account-side .who{display:flex; align-items:center; gap:13px; padding:16px; border-bottom:1px solid var(--line); margin-bottom:10px;}
.account-side .av{width:46px; height:46px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#1A1606; font-size:18px; flex:none;}
.account-side .who .n{font-weight:700; color:var(--ink-0); font-size:15px; line-height:1.2;}
.account-side .who .m{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; margin-top:3px;}
.account-nav{display:grid; gap:3px;}
.account-nav a{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-md); color:var(--ink-2); font-size:14.5px; font-weight:500; transition:background .2s, color .2s;}
.account-nav a svg{width:19px; height:19px; flex:none;}
.account-nav a:hover{background:rgba(255,255,255,.04); color:var(--ink-0);}
.account-nav a.active{background:var(--accent-soft); color:var(--accent);}
.account-nav a.danger{color:var(--ink-3);}
.account-nav a.danger:hover{color:var(--red);}

.acc-card{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl); padding:28px; margin-bottom:18px;}
.acc-card h3{font-size:20px; color:var(--ink-0); margin-bottom:6px;}
.acc-greet{font-size:clamp(24px,3vw,34px); color:var(--ink-0); margin-bottom:8px;}
.acc-greet b{color:var(--accent);}
.acc-sub{color:var(--ink-2); margin:0 0 26px; font-size:15.5px;}

.sub-card{position:relative; overflow:hidden; border:1px solid var(--accent-line); background:linear-gradient(180deg, rgba(245,202,15,.07), var(--bg-1) 45%);}
.sub-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.sub-plan{font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--ink-0); letter-spacing:-.02em;}
.sub-meta{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase; margin-top:8px;}
.badge-active{display:inline-flex; align-items:center; gap:7px; background:rgba(245,202,15,.12); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; padding:6px 13px; border-radius:var(--r-pill);}
.badge-active::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent);}
.sub-progress{margin-top:22px;}
.sub-progress .bar{height:8px; background:var(--bg-3); border-radius:var(--r-pill); overflow:hidden;}
.sub-progress .fill{height:100%; background:var(--accent); box-shadow:0 0 14px var(--accent-glow-soft); border-radius:var(--r-pill);}
.sub-progress .lbls{display:flex; justify-content:space-between; margin-top:9px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase;}

.acc-quick{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.acc-quick a{display:flex; flex-direction:column; gap:10px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px; transition:border-color .2s, background .2s, transform .2s;}
.acc-quick a:hover{border-color:var(--accent-line); background:var(--bg-2); transform:translateY(-3px);}
.acc-quick .ic{width:42px; height:42px; border-radius:var(--r-md); background:var(--accent-soft); display:grid; place-items:center;}
.acc-quick .ic svg{width:22px; height:22px; color:var(--accent);}
.acc-quick .t{font-weight:600; color:var(--ink-0); font-size:15px;}
.acc-quick .d{font-size:13px; color:var(--ink-2);}

/* orders table */
.orders{width:100%; border-collapse:collapse;}
.orders th{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:0 16px 14px; font-weight:500;}
.orders td{padding:18px 16px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-1); vertical-align:middle;}
.orders tr:hover td{background:rgba(255,255,255,.02);}
.orders .onum{font-family:var(--font-mono); color:var(--ink-0); font-weight:500;}
.ostat{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); font-weight:700;}
.ostat.done{background:rgba(245,202,15,.12); color:var(--accent); border:1px solid var(--accent-line);}
.ostat.proc{background:rgba(255,178,63,.12); color:var(--amber); border:1px solid rgba(255,178,63,.3);}
.ostat.cancel{background:rgba(138,152,164,.12); color:var(--ink-2); border:1px solid var(--line-2);}
.olink{color:var(--accent); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; text-decoration:none;}
.olink:hover{text-decoration:underline;}
.orders-empty{text-align:center; padding:50px 20px; color:var(--ink-3);}

/* trial */
.trial-hero{position:relative; border-radius:var(--r-3xl); overflow:hidden; border:1px solid var(--line-2); padding:54px 44px; margin-bottom:30px;}
.trial-hero .art{position:absolute; inset:0; z-index:0;}
.trial-hero .art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,28,38,.78), rgba(25,28,38,.92));}
.trial-hero .body{position:relative; z-index:1; text-align:center; max-width:620px; margin:0 auto;}
.trial-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:start; margin-bottom:80px;}
.trial-feats{display:grid; gap:12px;}
.trial-feats .f{display:flex; align-items:center; gap:13px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; font-size:15px; color:var(--ink-1);}
.trial-feats .f svg{width:20px; height:20px; color:var(--accent); flex:none;}
.countdown-box{text-align:center; background:var(--bg-2); border:1px solid var(--accent-line); border-radius:var(--r-2xl); padding:24px; margin-top:24px;}
.countdown-box .lbl{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:10px;}
.countdown-box .clock{font-family:var(--font-mono); font-weight:700; font-size:40px; color:var(--ink-0); letter-spacing:.04em;}

@media (max-width:880px){
  .account-shell{grid-template-columns:1fr;}
  .account-side{position:static;}
  .account-nav{grid-template-columns:repeat(2,1fr); display:grid;}
  .acc-quick{grid-template-columns:1fr;}
  .trial-grid{grid-template-columns:1fr;}
}

/* =============================================================
   HOME ADD-ONS — steps, payments, compare, agenda, ppv, devices,
   cookie banner, sticky mobile CTA, social-proof toast
   ============================================================= */
/* cómo funciona — 3 pasos */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.step{position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-2xl); padding:32px; transition:border-color .25s, transform .25s;}
.step:hover{border-color:var(--accent-line); transform:translateY(-4px);}
.step .num{font-family:var(--font-display); font-weight:800; font-size:18px; width:46px; height:46px; border-radius:50%; background:var(--accent); color:var(--purple); display:grid; place-items:center; margin-bottom:20px; box-shadow:0 0 18px var(--accent-glow-soft);}
.step h3{font-size:20px; margin-bottom:9px;}
.step p{font-size:14.5px; color:var(--ink-2); margin:0; line-height:1.6;}

/* payment methods + trust */
.paytrust{display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:34px;}
.pay-methods{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.pay-chip{height:50px; min-width:72px; padding:0 18px; border-radius:var(--r-md); background:#fff; border:1.5px solid var(--accent-line); display:flex; align-items:center; justify-content:center; transition:border-color .2s;}
.pay-chip:hover{border-color:var(--accent);}
.pay-chip img{height:26px; width:auto; display:block;}
.pay-chip.txt{font-family:var(--font-display); font-weight:800; font-size:15px; font-style:italic; color:var(--purple);}
.trust-badges{display:flex; gap:26px; flex-wrap:wrap; justify-content:center;}
.trust-badge{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2);}
.trust-badge svg{width:20px; height:20px; color:var(--accent); flex:none;}

/* compare table */
.compare-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-2xl); background:var(--bg-1);}
.compare{width:100%; border-collapse:collapse; min-width:560px;}
.compare th, .compare td{padding:18px 22px; text-align:left; border-top:1px solid var(--line);}
.compare thead th{background:var(--bg-2); font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink-0); border-top:none;}
.compare thead th.col-fam{color:var(--accent);}
.compare thead th small{display:block; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; margin-top:4px;}
.compare td.feat{color:var(--ink-1); font-weight:500; font-size:15px;}
.compare td.val{text-align:center; font-size:15px; color:var(--ink-1);}
.compare td.val .yes{color:var(--accent);}
.compare td.val .no{color:var(--ink-3);}
.compare tr:hover td{background:rgba(255,255,255,.02);}

/* agenda — partidos de hoy */
.agenda{display:grid; gap:10px; max-width:860px; margin:0 auto;}
.match{display:flex; align-items:center; gap:18px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 20px; transition:border-color .2s, background .2s;}
.match:hover{border-color:var(--accent-line); background:var(--bg-2);}
.match .time{font-family:var(--font-mono); font-size:14px; color:var(--ink-1); width:78px; flex:none; letter-spacing:.04em;}
.match .vs{flex:1; min-width:0;}
.match .vs .teams{font-weight:600; color:var(--ink-0); font-size:15.5px;}
.match .vs .league{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; margin-top:3px;}
.match .right{flex:none;}

/* ppv events */
.ppv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ppv-card{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-2xl); padding:0; background:linear-gradient(180deg, rgba(245,202,15,.05), var(--bg-1) 45%);}
.ppv-flyer{display:block; width:100%; aspect-ratio:16/9; border-bottom:1px solid var(--line);}
.ppv-body{padding:24px;}
.ppv-card .tag{display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--amber); text-transform:uppercase; margin-bottom:12px;}
.ppv-card .ev{font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--ink-0); margin-bottom:6px; letter-spacing:-.02em; line-height:1.1;}
.ppv-card .dt{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); text-transform:uppercase; margin-bottom:20px;}
.ppv-cd{display:flex; gap:8px;}
.ppv-cd .u{flex:1; text-align:center; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 4px;}
.ppv-cd .u .n{font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--accent); letter-spacing:-.02em;}
.ppv-cd .u .l{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; margin-top:3px;}

/* devices strip */
.devices{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.device{display:flex; flex-direction:column; align-items:center; gap:12px; width:128px; padding:24px 10px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); transition:border-color .2s, background .2s, transform .2s;}
.device:hover{border-color:var(--accent-line); background:var(--bg-2); transform:translateY(-3px);}
.device svg{width:34px; height:34px; color:var(--accent);}
.device .l{font-size:13px; color:var(--ink-1); font-weight:500; text-align:center;}

/* cookie banner */
.cookie{position:fixed; z-index:300; left:20px; bottom:20px; max-width:420px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-2xl); padding:20px 22px; box-shadow:var(--shadow-modal); display:none; flex-direction:column; gap:14px;}
.cookie.show{display:flex;}
.cookie p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55;}
.cookie p a{color:var(--accent); text-decoration:none;}
.cookie .row{display:flex; gap:10px;}
.cookie .btn{padding:11px 20px; font-size:14px;}

/* sticky mobile CTA */
.sticky-cta{position:fixed; z-index:280; left:0; right:0; bottom:0; display:none; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; background:rgba(15,20,23,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line-2);}
.sticky-cta .pf{font-size:12.5px; color:var(--ink-2); line-height:1.2;}
.sticky-cta .pf b{display:block; color:var(--ink-0); font-family:var(--font-display); font-size:19px; letter-spacing:-.02em;}
.sticky-cta .btn{padding:13px 26px;}

/* social-proof toast */
.toast{position:fixed; z-index:270; left:20px; bottom:20px; display:flex; align-items:center; gap:13px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:13px 20px 13px 13px; box-shadow:var(--shadow-card); max-width:330px; transform:translateY(160%); opacity:0; transition:transform .5s var(--ease-out), opacity .5s;}
.toast.show{transform:none; opacity:1;}
.toast .av{width:42px; height:42px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#1A1606; flex:none; font-size:16px;}
.toast .t{font-size:13.5px; color:var(--ink-1); line-height:1.35;}
.toast .t b{color:var(--ink-0);}
.toast .s{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; margin-top:4px;}

@media (max-width:880px){
  .steps,.ppv-grid{grid-template-columns:1fr;}
  .wa-float{bottom:82px;}
  .cookie{left:12px; right:12px; bottom:82px; max-width:none;}
  .toast{display:none;}
}

/* stable digits now that mono is a proportional font */
.countdown-box .clock, .promo-bar .cd, .ppv-cd .n, #liveBoard .time, #agenda .time{font-variant-numeric:tabular-nums;}

/* language toggle */
.lang-btn{display:inline-flex; align-items:center; background:rgba(255,255,255,.06); border:1px solid var(--line-2); border-radius:var(--r-pill); overflow:hidden; cursor:pointer; padding:0; font-family:var(--font-ui);}
.lang-btn span{padding:7px 11px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-3); transition:.2s;}
.lang-btn span.on{background:var(--accent); color:var(--purple);}
@media (max-width:1024px){ .lang-btn{display:none;} }

/* =============================================================
   WAVE 2 — team logos, promo bar, trending poster rail
   ============================================================= */
.match .tlogo{width:20px; height:20px; object-fit:contain; vertical-align:middle;}
.match .llogo{width:28px; height:28px; object-fit:contain; flex:none; background:rgba(255,255,255,.06); border-radius:6px; padding:3px;}
.match .vs{flex:1; min-width:0;}
.match .teams{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; color:var(--ink-0); font-size:15.5px;}
.match .vsx{color:var(--ink-3); font-weight:400;}
.match .live-now{color:var(--live); font-weight:700; display:inline-flex; align-items:center; gap:6px; letter-spacing:.04em;}
.match .live-now::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); animation:blink 1.6s infinite;}
.match .livescore{font-family:var(--font-display); font-weight:800; color:var(--ink-0); font-size:17px; letter-spacing:.01em; padding:0 4px; font-variant-numeric:tabular-nums;}
.match-cta{display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--purple); font-family:var(--font-ui); font-weight:800; font-style:italic; font-size:13px; padding:9px 18px; border-radius:var(--r-pill); white-space:nowrap; transition:background .2s, color .2s, transform .2s; box-shadow:0 6px 18px var(--accent-glow-soft);}
.match-cta:hover{background:var(--purple); color:var(--accent); transform:translateY(-1px);}

/* promo bar */
.promo-bar{position:fixed; top:0; left:0; right:0; z-index:120; min-height:40px; display:flex; align-items:center; justify-content:center; gap:14px; background:linear-gradient(90deg, var(--accent), #FFDA3D); color:var(--purple); font-family:var(--font-ui); font-weight:700; font-size:13.5px; padding:8px 44px;}
.promo-bar .code{font-family:var(--font-mono); font-weight:700; background:rgba(25,28,38,.16); padding:3px 9px; border-radius:var(--r-sm); letter-spacing:.06em;}
.promo-bar .cd{font-family:var(--font-mono); font-weight:700; letter-spacing:.04em; min-width:74px; text-align:center;}
.promo-bar .x{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--purple); font-size:20px; cursor:pointer; line-height:1; opacity:.65;}
.promo-bar .x:hover{opacity:1;}
body.has-promo .nav{top:40px;}
body.has-promo .page-top{padding-top:138px;}
@media (max-width:640px){ .promo-bar{font-size:12px; gap:9px; padding:7px 40px;} .promo-bar .promo-long{display:none;} }

/* trending poster rail */
.trend{position:relative;}
.trend-rail{display:flex; gap:14px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--bg-3) transparent;}
.trend-rail::-webkit-scrollbar{height:8px;}
.trend-rail::-webkit-scrollbar-thumb{background:var(--bg-3); border-radius:99px;}
.poster{flex:none; width:180px; scroll-snap-align:start; cursor:pointer;}
.poster .img{width:180px; height:264px; border-radius:var(--r-xl); overflow:hidden; background:var(--bg-2); border:1px solid var(--line); position:relative; transition:transform .25s var(--ease-out), border-color .25s;}
.poster:hover .img{transform:translateY(-6px); border-color:var(--accent-line);}
.poster .img img{width:100%; height:100%; object-fit:cover; display:block;}
.poster .tt{margin-top:11px; font-size:14px; color:var(--ink-0); font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.poster .gg{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.poster .badge{position:absolute; top:8px; left:8px; background:rgba(25,28,38,.82); backdrop-filter:blur(6px); border:1px solid var(--line-2); color:var(--accent); font-family:var(--font-mono); font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); letter-spacing:.06em;}
.rail-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px;}
.rail-nav{display:flex; gap:8px; flex:none;}
.rail-btn{width:40px; height:40px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line-2); color:var(--ink-1); cursor:pointer; display:grid; place-items:center; transition:.2s;}
.rail-btn:hover{border-color:var(--accent-line); color:var(--accent);}
.rail-btn svg{width:20px; height:20px;}
.rail-skel{flex:none; width:180px; height:264px; border-radius:var(--r-xl); background:linear-gradient(100deg, var(--bg-1) 30%, var(--bg-2) 50%, var(--bg-1) 70%); background-size:200% 100%; animation:skel 1.4s infinite;}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* =============================================================
   WAVE 3 — app showcase, channels strip
   ============================================================= */
.app-wrap{position:relative; max-width:1000px; margin:0 auto;}
.screen{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line-2); background:var(--bg-0); aspect-ratio:16/9; box-shadow:0 40px 100px rgba(0,0,0,.55);}
.screen-nav{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:clamp(12px,2.2vw,26px); padding:clamp(12px,1.8vw,20px) clamp(16px,2.6vw,30px); z-index:3; background:linear-gradient(180deg, rgba(10,12,16,.9), transparent);}
.screen-nav .lg{font-family:var(--font-display); font-weight:800; color:#fff; font-size:clamp(12px,1.5vw,17px); letter-spacing:-.02em;}
.screen-nav .lg b{color:var(--accent); font-style:italic;}
.screen-nav .nv{display:flex; gap:clamp(10px,1.8vw,22px); margin-left:8px;}
.screen-nav .nv span{font-size:clamp(10px,1.2vw,14px); color:rgba(255,255,255,.65);}
.screen-nav .nv span.act{color:var(--accent);}
.screen-hero{position:absolute; inset:0; background-size:cover; background-position:center;}
.screen-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,10,14,.92), rgba(8,10,14,.3) 65%, transparent), linear-gradient(0deg, var(--bg-0), transparent 60%);}
.screen-info{position:absolute; left:clamp(18px,3vw,34px); top:30%; z-index:2; max-width:56%;}
.screen-info .live-pill{font-size:clamp(9px,1vw,12px);}
.screen-info h4{font-family:var(--font-display); font-weight:800; font-size:clamp(16px,3.2vw,34px); color:#fff; margin:12px 0 0; letter-spacing:-.03em; line-height:1.05; text-shadow:0 2px 12px rgba(0,0,0,.5);}
.screen-info .meta2{font-size:clamp(9px,1.1vw,13px); color:rgba(255,255,255,.7); margin-top:8px; font-family:var(--font-mono); letter-spacing:.04em;}
.screen-info .btns{display:flex; gap:10px; margin-top:clamp(10px,1.6vw,18px);}
.screen-info .pb{display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:var(--purple); font-weight:800; font-style:italic; font-size:clamp(10px,1.2vw,14px); padding:clamp(6px,1vw,11px) clamp(12px,1.8vw,22px); border-radius:var(--r-pill);}
.screen-info .pb svg{width:clamp(11px,1.3vw,16px); height:clamp(11px,1.3vw,16px);}
.screen-info .sb{display:inline-flex; align-items:center; background:rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:clamp(10px,1.2vw,14px); padding:clamp(6px,1vw,11px) clamp(12px,1.6vw,18px); border-radius:var(--r-pill); backdrop-filter:blur(6px);}
.screen-rail{position:absolute; left:0; right:0; bottom:0; display:flex; gap:clamp(7px,1.1vw,13px); padding:0 clamp(18px,3vw,34px) clamp(14px,2vw,22px); z-index:2;}
.screen-rail .p{flex:none; width:clamp(56px,9vw,104px); aspect-ratio:2/3; border-radius:8px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(0,0,0,.4);}
.app-feats{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; margin-top:36px;}
.app-feats .f{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-2);}
.app-feats .f svg{width:19px; height:19px; color:var(--accent);}

/* channels strip */
.channels-strip{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:42px;}
.channels-strip img{height:30px; width:auto; object-fit:contain; opacity:.78; transition:opacity .2s, transform .2s;}
.channels-strip img:hover{opacity:1; transform:translateY(-3px);}
@media (max-width:560px){ .channels-strip{gap:28px;} .channels-strip img{height:24px;} }

/* world cup banner */
.wc-banner-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(245,202,15,.10), rgba(61,41,122,.18));}
.wc-banner{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; padding:15px 32px; color:var(--ink-0); font-weight:600; font-size:15px; text-align:center;}
.wc-banner strong{color:var(--accent);}
.wc-banner .wc-b-cta{color:var(--accent); font-weight:800; font-style:italic; white-space:nowrap;}
.wc-banner:hover .wc-b-cta{text-decoration:underline;}