/* Estructura de la página: fondo, barra superior, hero, cinta y paneles */

/* Fondo con resplandores */
.glow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.22;animation:drift 22s ease-in-out infinite alternate}
.glow i:nth-child(1){background:var(--royals);top:-18vmax;left:-10vmax}
.glow i:nth-child(2){background:var(--playboys);top:-12vmax;right:-16vmax;animation-delay:-6s}
.glow i:nth-child(3){background:var(--maquina);bottom:-26vmax;left:20vmax;opacity:.13;animation-delay:-12s}
@keyframes drift{to{transform:translate(6vmax,5vmax) scale(1.12)}}

/* Barra superior */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:12px;background:linear-gradient(var(--bg) 55%,transparent)}
.topbar .wrap{display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font:800 14px/1 var(--f-display);letter-spacing:.02em;white-space:nowrap}
.logo .mark{width:34px;height:34px;border-radius:10px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;transform:rotate(-8deg)}
.logo .mark span{background:var(--c)}
.tabs{margin-left:auto;display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow-x:auto;max-width:100%;scrollbar-width:none}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:0;background:none;padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.tab .live{width:7px;height:7px;border-radius:50%;background:var(--playboys);box-shadow:0 0 0 3px color-mix(in srgb,var(--playboys) 30%,transparent);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.35}}

/* Hero */
.hero{padding-block:40px 36px}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--stroke2);font:500 12px/1 var(--f-mono);color:var(--muted);letter-spacing:.04em}
.pill .dots{display:flex;gap:3px}.pill .dots i{width:7px;height:7px;border-radius:50%;background:var(--c)}
h1{font:800 clamp(48px,8.4vw,108px)/.92 var(--f-display);letter-spacing:-.045em;margin:22px 0 0;text-wrap:balance}
h1 .grad{background:linear-gradient(95deg,var(--royals) 0%,var(--playboys) 38%,var(--gold) 68%,var(--maquina) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 8s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.lede{max-width:48ch;margin:20px 0 0;color:var(--muted);font-size:17px}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r);padding:18px 20px;display:grid;align-content:space-between;gap:20px;min-height:120px;position:relative;overflow:hidden}
.stat b{font:700 44px/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat small{font:500 12px/1.2 var(--f-body);color:var(--muted)}
.stat.hl{background:linear-gradient(140deg,var(--gold),var(--gold2));color:var(--gold-ink);border:0}
.stat.hl small{color:color-mix(in srgb,var(--gold-ink) 70%,transparent)}
.stat .spark{position:absolute;right:14px;top:14px;display:flex;gap:3px;align-items:end;height:26px}
.stat .spark i{width:5px;border-radius:2px;background:var(--c)}

/* Cinta de categorías */
.ticker{overflow:hidden;border-block:1px solid var(--stroke);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex;width:max-content;animation:tick 45s linear infinite}
.ticker span{font:700 15px/1 var(--f-display);letter-spacing:-.01em;padding:16px 22px;white-space:nowrap;display:flex;align-items:center;gap:22px;color:var(--muted)}
.ticker span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Paneles de cada pestaña */
main{padding-block:44px 140px}
section[role="tabpanel"]{display:grid;gap:24px}
section[role="tabpanel"]:not([hidden]) > *{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
section[role="tabpanel"] > *:nth-child(2){animation-delay:.04s}
section[role="tabpanel"] > *:nth-child(3){animation-delay:.08s}
@keyframes rise{from{transform:translateY(12px)}}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.kicker{font:500 12px/1 var(--f-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
h2{font:700 clamp(30px,4.4vw,48px)/1 var(--f-display);letter-spacing:-.04em;margin:10px 0 0;text-wrap:balance}
.sec-head p{margin:12px 0 0;color:var(--muted);max-width:62ch;font-size:16px}
.note{font:500 12px/1.45 var(--f-mono);color:var(--muted);border:1px dashed var(--stroke2);padding:10px 14px;border-radius:var(--r-sm);max-width:340px}