/* ============================================================
   HeroHud — "Wow" page (hero-hud-wow-template.php)
   Ported from the standalone wow.html concept. Tokens kept at
   :root/[data-theme] scope on purpose: the hex values coincide
   with herohud.css's overlapping token names (both source from
   skins/sunset.py), so redeclaring them here is a no-op in sunset
   and a few-point cosmetic nudge in light — cheaper than rescoping
   ~600 lines under a wrapper class for no visible gain.
   Nav/theme/lang toggle markup was NOT ported — this page reuses
   the real header.php nav + herohud.js (data-theme / data-lang).
   ============================================================ */
:root{
  --bg:#221a24; --night:#171219;
  --surface:#2b212e; --surface2:#372a3b; --hover:#3f3043;
  --bd:#473649; --outline:#19121b;
  --text:#f2e9e4; --soft:#bfa9bb;
  --coral:#ff7e67; --coral-deep:#e05c45;
  --amber:#ffb347; --rose:#e85d8a; --green:#7ec488; --sky:#6fc3df; --select:#523047;
  --head:#ffb347;                 /* color de títulos (se oscurece en light) */
  --nav-grad:linear-gradient(180deg,rgba(23,18,25,.88),rgba(23,18,25,0));
  --sky-grad:linear-gradient(180deg,#4a2a14 0%,#3d2210 16%,#2e1c1c 38%,#221a24 68%,#221a24 100%);
  --dusk-layer:#171219;           /* capa que "anochece" con el scroll */
  --stars-on:1;
  --disp:'Bricolage Grotesque','Archivo',sans-serif;
  --body:'Archivo','Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
  --dusk:0;                       /* 0 golden hour … 1 noche (JS) */
  --scroll:0;                     /* px de scroll (JS, parallax) */
  /* mocks del soft — SIEMPRE oscuros (decisión theme 2026-07-05) */
  --mk-bg:#221a24; --mk-surface:#2b212e; --mk-surface2:#372a3b;
  --mk-bd:#473649; --mk-text:#f2e9e4; --mk-soft:#bfa9bb;
}
html[data-theme="light"]{
  --bg:#faf3ea; --night:#f3e2cc;
  --surface:#fff9f1; --surface2:#f3e7d9; --hover:#eddcc9;
  --bd:#e2d2c1; --outline:#cdb9a4;
  --text:#2b212e; --soft:#7d6a80;
  --select:#f0d9c8;
  --head:#b96f1e;
  --nav-grad:linear-gradient(180deg,rgba(250,243,234,.92),rgba(250,243,234,0));
  --sky-grad:linear-gradient(180deg,#ffe3b8 0%,#ffd9ad 14%,#fbe7cd 42%,#faf3ea 70%,#faf3ea 100%);
  --dusk-layer:#f9e9d6;
  --stars-on:0;
}
#hero-hud-wow-page{color:var(--text);background:var(--bg);line-height:1.6;transition:color .4s,background .4s}
/* NO overflow-x aquí: html/body ya lo tienen (herohud.css) — declararlo en
   este wrapper fuerza overflow-y:auto (regla CSS de "overflow forcing"),
   convirtiéndolo en su propio contenedor de scroll y rompiendo el
   position:sticky de las secciones .pin (dependen del scroll del viewport). */
#hero-hud-wow-page ::selection{background:var(--select);color:var(--text)}

/* ---------- Cielo que anochece + estrellas (parallax capa 0/1) ---------- */
#sky{position:fixed;inset:0;z-index:-3;background:var(--sky-grad);transition:background .5s}
#sky::after{content:"";position:absolute;inset:0;background:var(--dusk-layer);
  opacity:var(--dusk);transition:background .5s}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none;
  opacity:calc(var(--dusk) * .9 * var(--stars-on));
  transform:translateY(calc(var(--scroll) * -0.03px));
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(242,233,228,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%,  rgba(242,233,228,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 30%, rgba(255,179,71,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 12%, rgba(242,233,228,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 26%, rgba(111,195,223,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 9%,  rgba(242,233,228,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 55%,  rgba(242,233,228,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 48%, rgba(242,233,228,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 62%, rgba(232,93,138,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 78%, rgba(242,233,228,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 84%, rgba(255,126,103,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 91%, rgba(242,233,228,.55) 50%, transparent 51%)}
/* capa 2 de parallax: glows lejanos que suben más lento que el contenido */
#haze{position:fixed;inset:0;z-index:-1;pointer-events:none;
  transform:translateY(calc(var(--scroll) * -0.08px))}
#haze i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.24;display:block}
#haze .g1{width:540px;height:340px;left:-10%;top:60vh;background:radial-gradient(closest-side,var(--coral),transparent 72%)}
#haze .g2{width:460px;height:300px;right:-8%;top:150vh;background:radial-gradient(closest-side,var(--amber),transparent 72%)}
#haze .g3{width:520px;height:340px;left:6%;top:290vh;background:radial-gradient(closest-side,var(--rose),transparent 72%)}
#haze .g4{width:480px;height:320px;right:0;top:430vh;background:radial-gradient(closest-side,var(--sky),transparent 72%)}

/* ---------- i18n (misma clave que el toggle real: data-lang, ES/EN) ---------- */
html[data-lang="ES"] #hero-hud-wow-page .en{display:none!important}
html[data-lang="EN"] #hero-hud-wow-page .es{display:none!important}

/* ---------- dots de progreso ---------- */
#dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:12px}
#dots a{width:8px;height:8px;border-radius:50%;background:var(--bd);display:block;transition:.3s}
#dots a.on{background:var(--coral);box-shadow:0 0 10px rgba(255,126,103,.7);transform:scale(1.4)}
@media(max-width:900px){#dots{display:none}}

/* ============================================================
   LAYOUT + COREOGRAFÍA
   .pin  = sección con scroll-pinning: mide N·vh, el escenario
           (.stage) queda pegado y el contenido se arma con --p (0→1).
   .deepin = entrada "desde la profundidad" (one-shot, IO): nace
           enorme y desenfocada (cerca de la cámara) y se asienta.
   ============================================================ */
#hero-hud-wow-page section{position:relative}
#hero-hud-wow-page .stage{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:110px 6vw;position:relative}
#hero-hud-wow-page section.pin{--p:1}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  #hero-hud-wow-page section.pin{--p:0}
  #hero-hud-wow-page #hud.pin{height:260vh} #hero-hud-wow-page #replayer.pin{height:340vh} #hero-hud-wow-page #analysis.pin{height:300vh}
  #hero-hud-wow-page .pin .stage{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden;
    padding-top:80px;padding-bottom:30px}
}
#hero-hud-wow-page .split{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:center;
  max-width:1280px;width:100%}
#hero-hud-wow-page .split.flip .media{order:2}#hero-hud-wow-page .split.flip .copy{order:1}
@media(max-width:900px){
  #hero-hud-wow-page .split,#hero-hud-wow-page .split.flip{grid-template-columns:1fr}
  #hero-hud-wow-page .split.flip .media{order:1}#hero-hud-wow-page .split.flip .copy{order:2}
  #hero-hud-wow-page .stage{padding:90px 6vw}
}
#hero-hud-wow-page .kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--coral);margin-bottom:14px;display:flex;align-items:center;gap:12px}
#hero-hud-wow-page .kicker::before{content:"";width:34px;height:1px;background:var(--coral);display:inline-block}
#hero-hud-wow-page .copy h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.4vw,50px);
  line-height:1.04;color:var(--head);margin-bottom:20px}
#hero-hud-wow-page .copy p{color:var(--soft);font-size:clamp(15px,1.15vw,17px);max-width:52ch;margin-bottom:14px}
#hero-hud-wow-page .copy p strong{color:var(--text);font-weight:600}
#hero-hud-wow-page .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#hero-hud-wow-page .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text);background:var(--surface2);border:1px solid var(--bd);
  border-radius:14px;padding:5px 12px}
#hero-hud-wow-page .tag.g{color:var(--green);border-color:rgba(126,196,136,.45)}
#hero-hud-wow-page .tag.s{color:var(--sky);border-color:rgba(111,195,223,.45)}
#hero-hud-wow-page .tag.a{color:var(--amber);border-color:rgba(255,179,71,.45)}
html[data-theme="light"] #hero-hud-wow-page .tag.g{color:#3f7d4a}
html[data-theme="light"] #hero-hud-wow-page .tag.s{color:#25708c}
html[data-theme="light"] #hero-hud-wow-page .tag.a{color:#a3641a}

/* copy dentro de secciones pinned: entra temprano con --p */
#hero-hud-wow-page .pin .copy{--ck:clamp(0,calc((var(--p) - .04) / .20),1);
  opacity:var(--ck);transform:translateX(calc((1 - var(--ck)) * -40px))}

/* entrada desde la profundidad (one-shot) */
#hero-hud-wow-page .deepin{opacity:0;transform:scale(1.75) translateY(6vh);filter:blur(10px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter 1s}
#hero-hud-wow-page .deepin.in{opacity:1;transform:none;filter:none}
#hero-hud-wow-page .deepin.d1{transition-delay:.12s}#hero-hud-wow-page .deepin.d2{transition-delay:.24s}
#hero-hud-wow-page .rise{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.2,.7,.2,1)}
#hero-hud-wow-page .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  #hero-hud-wow-page .deepin,#hero-hud-wow-page .rise{opacity:1!important;transform:none!important;filter:none!important;transition:none}
}

/* ============================================================
   HERO
   ============================================================ */
#hero-hud-wow-page #hero .stage{flex-direction:column;text-align:center;padding-top:150px;overflow:hidden;min-height:100vh}
#hero-hud-wow-page .hero-glow{position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);height:520px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,126,103,.22),rgba(255,179,71,.10) 45%,transparent 70%);
  filter:blur(10px);pointer-events:none;animation:hh-wow-breathe 7s ease-in-out infinite}
@keyframes hh-wow-breathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
#hero-hud-wow-page .hero-sub{font-family:var(--mono);font-size:13px;letter-spacing:.32em;color:var(--coral);
  text-transform:uppercase;margin-bottom:22px}
/* logo de marca (branding_herohud.png: blanco sobre transparente;
   en light se invierte, mismo truco que docs.html) */
#hero-hud-wow-page .brand-h1{line-height:0}
#hero-hud-wow-page .brand-h1 img{width:min(620px,86vw);max-width:100%;display:block;margin:0 auto;
  filter:drop-shadow(0 8px 40px rgba(255,126,103,.35))}
html[data-theme="light"] #hero-hud-wow-page .brand-h1 img{filter:invert(1) drop-shadow(0 8px 40px rgba(224,92,69,.30))}
#hero-hud-wow-page .hero-tag{color:var(--soft);font-size:clamp(16px,1.6vw,20px);margin:26px auto 30px;max-width:56ch}
#hero-hud-wow-page .hero-tag b{color:var(--text)}
#hero-hud-wow-page .hero-docs{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--soft);
  text-decoration:none;border-bottom:1px solid var(--bd);padding-bottom:2px;transition:.2s}
#hero-hud-wow-page .hero-docs:hover{color:var(--text);border-bottom-color:var(--coral)}
/* ---------- barra de título: Windows, NO macOS ----------
   El soft corre solo en Windows; los tres semáforos redondos de macOS
   daban una pista visual falsa. Controles reales (─ ☐ ✕) dibujados con
   bordes, alineados a la derecha como en Win10/11. Compartido por TODAS
   las ventanas mock (hero live, análisis, archive, notas, skins). */
#hero-hud-wow-page .win-bar{display:flex;align-items:center;gap:9px;padding-bottom:12px}
#hero-hud-wow-page .win-ico{width:13px;height:13px;flex:none;border-radius:3px;
  background:linear-gradient(150deg,var(--coral),var(--coral-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#hero-hud-wow-page .win-bar .win-title,#hero-hud-wow-page .win-bar span{font-family:var(--mono);font-size:11px;
  color:var(--mk-soft);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero-hud-wow-page .wctl{margin-left:auto;display:flex;align-items:center;flex:none;gap:0}
#hero-hud-wow-page .wctl i{width:26px;height:18px;position:relative;display:block}
#hero-hud-wow-page .wctl i::before,#hero-hud-wow-page .wctl i::after{content:"";position:absolute;
  left:50%;top:50%;background:var(--mk-soft)}
#hero-hud-wow-page .wctl .mn::before{width:9px;height:1px;transform:translate(-50%,-50%)}
#hero-hud-wow-page .wctl .mx::before{width:8px;height:8px;background:none;border:1px solid var(--mk-soft);
  transform:translate(-50%,-50%)}
#hero-hud-wow-page .wctl .cl::before{width:10px;height:1px;transform:translate(-50%,-50%) rotate(45deg)}
#hero-hud-wow-page .wctl .cl::after{width:10px;height:1px;transform:translate(-50%,-50%) rotate(-45deg)}
#hero-hud-wow-page .wctl .cl{border-radius:0 3px 0 0}

/* ---------- HERO: ventana LIVE completa ----------
   Antes era un gráfico suelto sin contexto. Ahora es la pantalla que el
   usuario reconoce al abrir el programa: tabs, panel de sesión, mesas
   activas, gráfico con área y últimas manos. */
#hero-hud-wow-page .hero-live{margin:52px auto 0;width:min(940px,94vw);background:var(--mk-surface);
  border:1px solid var(--mk-bd);border-radius:12px;overflow:hidden;text-align:left;
  box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 70px rgba(255,126,103,.07)}
#hero-hud-wow-page .hero-live .win-bar{padding:10px 14px;background:var(--mk-surface2);
  border-bottom:1px solid var(--mk-bd)}
#hero-hud-wow-page .live-tabs{display:flex;align-items:flex-end;gap:3px;padding:9px 12px 0;background:var(--mk-bg)}
#hero-hud-wow-page .live-tab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--mk-soft);background:var(--mk-surface2);border:1px solid var(--mk-bd);border-bottom:none;
  border-radius:6px 6px 0 0;padding:6px 18px}
#hero-hud-wow-page .live-tab.on{color:#ffb347;background:var(--mk-surface)}
#hero-hud-wow-page .live-gear{margin-left:auto;color:var(--mk-soft);font-size:13px;padding-bottom:6px}
#hero-hud-wow-page .live-body{display:flex;background:var(--mk-surface);border-top:1px solid var(--mk-bd)}
#hero-hud-wow-page .live-side{width:190px;flex:none;border-right:1px solid var(--mk-bd);padding:13px 14px}
#hero-hud-wow-page .live-side h4{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:#ffb347;margin-bottom:9px}
#hero-hud-wow-page .live-side .lv-h2{margin-top:16px}
#hero-hud-wow-page .lv-row{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;
  color:var(--mk-soft);padding:4px 0}
#hero-hud-wow-page .lv-row b{color:#f2e9e4;font-weight:700}
#hero-hud-wow-page .lv-row b.up{color:#7ec488}
#hero-hud-wow-page .lv-tbl{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  color:var(--mk-soft);padding:3px 0}
#hero-hud-wow-page .lv-live{width:6px;height:6px;border-radius:50%;background:#7ec488;flex:none;
  box-shadow:0 0 0 0 rgba(126,196,136,.6);animation:hh-wow-pulse 2.4s ease-out infinite}
@keyframes hh-wow-pulse{0%{box-shadow:0 0 0 0 rgba(126,196,136,.55)}70%,100%{box-shadow:0 0 0 7px rgba(126,196,136,0)}}
#hero-hud-wow-page .lv-btn{margin-top:14px;width:100%;font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.07em;background:#3d2e35;color:#ffcabc;border:1px solid #5c4046;border-radius:3px;padding:7px 0;
  border-bottom:3px solid #2a1f24}
#hero-hud-wow-page .live-main{flex:1;min-width:0;padding:12px 14px 8px;display:flex;flex-direction:column}
#hero-hud-wow-page .lv-chart-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mk-soft);margin-bottom:6px}
#hero-hud-wow-page .lv-scale{color:#ffb347}
#hero-hud-wow-page .live-main svg{width:100%;height:150px;display:block}
#hero-hud-wow-page .lv-grid{stroke:var(--mk-bd);stroke-width:1;stroke-dasharray:4 6}
#hero-hud-wow-page .lv-fill{fill:url(#lvGrad);opacity:0;transition:opacity 1.2s 1.4s}
#hero-hud-wow-page .in .lv-fill{opacity:.9}
#hero-hud-wow-page .lv-hands{display:flex;flex-direction:column;gap:1px;margin-top:8px;
  border-top:1px solid var(--mk-bd);padding-top:8px}
#hero-hud-wow-page .lv-hand{display:flex;gap:14px;font-family:var(--mono);font-size:10.5px;color:var(--mk-soft);
  padding:2px 0}
#hero-hud-wow-page .lv-hand b{margin-left:auto;font-weight:700}
#hero-hud-wow-page .live-status{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;
  color:var(--mk-soft);padding:8px 14px;background:var(--mk-surface2);border-top:1px solid var(--mk-bd)}
#hero-hud-wow-page .live-status .dot{width:7px;height:7px;border-radius:50%;background:#7ec488;flex:none}
#hero-hud-wow-page .lv-ver{margin-left:auto;opacity:.65}
#hero-hud-wow-page .line-net,#hero-hud-wow-page .line-ev{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:1200}
#hero-hud-wow-page .line-net{stroke:#7ec488;filter:drop-shadow(0 0 6px rgba(126,196,136,.5))}
#hero-hud-wow-page .line-ev{stroke:var(--coral);stroke-width:1.8;opacity:.85}
#hero-hud-wow-page .in .line-net{animation:hh-wow-draw 2.6s .3s cubic-bezier(.4,0,.2,1) forwards}
#hero-hud-wow-page .in .line-ev{animation:hh-wow-draw 2.6s .55s cubic-bezier(.4,0,.2,1) forwards}
@keyframes hh-wow-draw{to{stroke-dashoffset:0}}
#hero-hud-wow-page .chart-legend{display:flex;gap:18px;padding:8px 2px 4px;font-family:var(--mono);font-size:11px;color:var(--mk-soft)}
#hero-hud-wow-page .chart-legend i{display:inline-block;width:16px;height:2px;margin-right:6px;vertical-align:middle;border-radius:2px}
#hero-hud-wow-page .chart-legend .n i{background:#7ec488}#hero-hud-wow-page .chart-legend .e i{background:var(--coral)}

/* ---------- fichas flotantes (realistas) ----------
   PATRÓN outer/-inner OBLIGATORIO: .chip = posición + parallax (--scroll),
   .chip-inner = bob. Con ambos transforms en el mismo elemento la animación
   gana y el parallax de las "near" no se aplicaba nunca.
   Anatomía: muescas de canto (repeating-conic-gradient) sobre el cuerpo,
   disco interior con anillo crema, brillo especular y sombra de contacto. */
#hero-hud-wow-page .chip{position:absolute;width:62px;height:62px;pointer-events:none;
  transform:translateY(calc(var(--scroll) * -.28px))}
#hero-hud-wow-page .chip.far{transform:translateY(calc(var(--scroll) * -.10px));opacity:.6;filter:blur(1.2px)}
#hero-hud-wow-page .chip-inner{position:absolute;inset:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--outline);
  background:
    repeating-conic-gradient(from 8deg,rgba(242,233,228,.92) 0deg 13deg,transparent 13deg 45deg),
    radial-gradient(circle at 34% 26%,var(--c-lite),var(--c-dark) 76%);
  box-shadow:0 14px 30px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4),
    inset 0 -4px 8px rgba(0,0,0,.45),inset 0 3px 7px rgba(255,255,255,.28);
  animation:hh-wow-bob 6s ease-in-out infinite}
#hero-hud-wow-page .chip.far .chip-inner{animation-duration:8.5s}
#hero-hud-wow-page .chip-inner::before{content:"";position:absolute;inset:8px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 36% 28%,var(--c-lite),var(--c-dark) 88%);
  box-shadow:inset 0 0 0 1.5px rgba(242,233,228,.5),inset 0 0 11px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.35)}
#hero-hud-wow-page .chip-inner .shine{position:absolute;inset:0;border-radius:50%;z-index:3;
  background:linear-gradient(145deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 30%,transparent 52%)}
#hero-hud-wow-page .chip-inner b{position:relative;z-index:2;font-family:var(--mono);font-weight:700;
  font-size:14px;color:#fdf6f2;text-shadow:0 1px 2px rgba(0,0,0,.65)}
/* denominaciones con los colores del chip set del soft */
#hero-hud-wow-page .chip.c1{top:22%;left:9%;--c-lite:#ff9d8a;--c-dark:#c9402c}
#hero-hud-wow-page .chip.c2{top:16%;right:11%;width:50px;height:50px;--c-lite:#ffc873;--c-dark:#c1761f}
#hero-hud-wow-page .chip.c3{bottom:26%;left:16%;width:46px;height:46px;--c-lite:#8fd4ea;--c-dark:#2f7c99}
#hero-hud-wow-page .chip.c4{bottom:20%;right:15%;--c-lite:#9ad4a3;--c-dark:#3d7a48}
#hero-hud-wow-page .chip.c2 .chip-inner b,#hero-hud-wow-page .chip.c3 .chip-inner b{font-size:12px}
@keyframes hh-wow-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){#hero-hud-wow-page .chip-inner{animation:none}}
#hero-hud-wow-page .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--soft);
  text-transform:uppercase;animation:hh-wow-hint 2.2s ease-in-out infinite}
@keyframes hh-wow-hint{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}

/* ============================================================
   HUD EN VIVO — mesa + HUD (pinned: la mesa llega desde la
   profundidad, los HUD boxes "aterrizan" de a uno desde la cámara)
   ============================================================ */
#hero-hud-wow-page #hud{--tz:clamp(0,calc(var(--p) / .28),1)}
#hero-hud-wow-page .table-wrap{position:relative;aspect-ratio:1.5;max-width:640px;margin:0 auto;width:100%;
  opacity:var(--tz);
  transform:scale(calc(2.3 - 1.3 * var(--tz))) translateY(calc((1 - var(--tz)) * 9vh));
  filter:blur(calc((1 - var(--tz)) * 9px))}
#hero-hud-wow-page .felt{position:absolute;inset:9% 5%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,#43303f,#332638 65%,#2b212e);
  border:10px solid #19121b;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.5),0 0 60px rgba(255,126,103,.05)}
#hero-hud-wow-page .felt::after{content:"";position:absolute;inset:14%;border-radius:50%;
  border:1px solid rgba(255,179,71,.14)}
#hero-hud-wow-page .hudbox{position:absolute;min-width:118px;background:rgba(55,42,59,.94);
  border:1px solid var(--mk-bd);border-radius:7px;padding:7px 10px;
  font-family:var(--mono);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#hero-hud-wow-page .hudbox .nick{font-size:10px;color:var(--sky);letter-spacing:.04em;margin-bottom:2px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#hero-hud-wow-page .hudbox .big{font-size:17px;font-weight:700;color:#f2e9e4}
#hero-hud-wow-page .hudbox .big em{font-style:normal;color:#ffb347}
#hero-hud-wow-page .hudbox .row2{font-size:9.5px;color:var(--mk-soft);margin-top:2px;letter-spacing:.02em}
#hero-hud-wow-page .hudbox.hero-box{border-color:rgba(255,126,103,.65);
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(255,126,103,.35)}
#hero-hud-wow-page .hudbox.hero-box .nick{color:var(--coral)}
/* aterrizaje secuencial: cada box define su ventana de --p */
#hero-hud-wow-page .hudbox{opacity:var(--hk,1);
  transform:translate(var(--hx,0),0) scale(calc(2.1 - 1.1 * var(--hk,1)))}
#hero-hud-wow-page .h1b{--hk:clamp(0,calc((var(--p) - .32)/.10),1);top:-2%;left:50%;--hx:-50%}
#hero-hud-wow-page .h2b{--hk:clamp(0,calc((var(--p) - .41)/.10),1);top:16%;right:-2%}
#hero-hud-wow-page .h3b{--hk:clamp(0,calc((var(--p) - .50)/.10),1);bottom:16%;right:-2%}
#hero-hud-wow-page .h4b{--hk:clamp(0,calc((var(--p) - .59)/.10),1);bottom:-2%;left:50%;--hx:-50%}
#hero-hud-wow-page .h5b{--hk:clamp(0,calc((var(--p) - .68)/.10),1);bottom:16%;left:-2%}
#hero-hud-wow-page .h6b{--hk:clamp(0,calc((var(--p) - .77)/.10),1);top:16%;left:-2%}
@media(max-width:600px){#hero-hud-wow-page .hudbox{min-width:92px;padding:5px 7px}#hero-hud-wow-page .hudbox .big{font-size:14px}}
#hero-hud-wow-page .pot-label{position:absolute;top:44%;left:50%;
  font-family:var(--mono);font-size:12px;color:#ffb347;letter-spacing:.1em;
  --pk:clamp(0,calc((var(--p) - .86)/.08),1);opacity:var(--pk);
  transform:translate(-50%,-50%) scale(calc(1.8 - .8 * var(--pk)))}
#hero-hud-wow-page .dealer-d{position:absolute;top:56%;left:34%;width:22px;height:22px;border-radius:50%;
  background:#ffb347;color:#19121b;font-family:var(--mono);font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.4);
  --dk:clamp(0,calc((var(--p) - .90)/.08),1);opacity:var(--dk);
  transform:scale(calc(2 - var(--dk)))}
#hero-hud-wow-page .gear-chip{position:absolute;bottom:-9%;right:2%;display:flex;gap:6px;
  background:rgba(34,26,36,.92);border:1px solid var(--mk-bd);border-radius:16px;padding:5px 12px;
  font-size:12px;color:var(--mk-soft);font-family:var(--mono);
  --gk:clamp(0,calc((var(--p) - .93)/.07),1);opacity:var(--gk)}

/* ============================================================
   STATS — muro de celdas HUD con tooltip fiel ES/EN
   ============================================================ */
#hero-hud-wow-page #stats .inner{max-width:1120px;width:100%;text-align:center}
#hero-hud-wow-page #stats h2,#hero-hud-wow-page #skins h2{font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,3.6vw,52px);color:var(--head);line-height:1.04}
#hero-hud-wow-page #stats .lead,#hero-hud-wow-page #skins .lead{color:var(--soft);max-width:60ch;margin:16px auto 0}
#hero-hud-wow-page .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;margin-top:44px}
#hero-hud-wow-page .stat-card{background:var(--mk-surface);border:1px solid var(--mk-bd);border-radius:8px;
  padding:13px 8px;cursor:default;position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  opacity:0;transform:translateY(24px)}
#hero-hud-wow-page .in .stat-card{opacity:1;transform:none;
  transition:opacity .5s var(--sd,0s),transform .5s var(--sd,0s),box-shadow .2s,border-color .2s}
#hero-hud-wow-page .stat-card:hover,#hero-hud-wow-page .stat-card:focus-visible{transform:translateY(-3px)!important;
  border-color:rgba(255,126,103,.55);box-shadow:0 0 16px rgba(255,126,103,.25);outline:none}
#hero-hud-wow-page .stat-card .name{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--mk-soft);
  letter-spacing:.08em;text-transform:uppercase}
#hero-hud-wow-page .stat-card .val{font-family:var(--mono);font-size:21px;font-weight:700;color:#ffb347;margin-top:4px}
#hero-hud-wow-page .stats-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
#hero-hud-wow-page .stats-hint{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--soft);letter-spacing:.08em}
/* tooltip flotante único (lo posiciona JS, clampeado al viewport) */
#tip{position:fixed;z-index:80;max-width:340px;background:var(--mk-surface2);
  border:1px solid var(--coral-deep);border-radius:8px;padding:12px 14px;text-align:left;
  box-shadow:0 18px 50px rgba(0,0,0,.55);pointer-events:none;opacity:0;
  transform:translateY(6px);transition:opacity .18s,transform .18s}
#tip.on{opacity:1;transform:none}
#tip .t-name{font-family:var(--mono);font-size:12px;font-weight:700;color:#ffb347;
  letter-spacing:.06em;display:block;margin-bottom:6px}
#tip p{font-size:12.5px;line-height:1.55;color:#f2e9e4;margin:0}

/* ============================================================
   POPUPS — popup posicional de fábrica (VPIP/PFR/3Bet) + pestañas
   ============================================================ */
#hero-hud-wow-page .popup-mock{position:relative;max-width:520px;margin:0 auto;width:100%}
#hero-hud-wow-page .popup-panel{background:var(--mk-surface);border:1px solid var(--mk-bd);border-radius:10px;
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(255,126,103,.06)}
#hero-hud-wow-page .popup-head{background:var(--mk-surface2);padding:9px 14px;font-family:var(--mono);
  font-size:12px;color:#ffb347;letter-spacing:.08em;border-bottom:1px solid var(--mk-bd);
  display:flex;justify-content:space-between;align-items:center}
#hero-hud-wow-page .popup-head .x{color:var(--mk-soft);font-size:13px}
#hero-hud-wow-page .popup-tabs{display:flex;gap:5px;padding:8px 12px 0;background:var(--mk-surface)}
#hero-hud-wow-page .ptab{font-family:var(--mono);font-size:10.5px;color:var(--mk-soft);border:1px solid var(--mk-bd);
  border-radius:12px;padding:3px 12px}
#hero-hud-wow-page .ptab.on{color:#ffb347;border-color:rgba(255,179,71,.55)}
#hero-hud-wow-page .pgrid{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
#hero-hud-wow-page .pgrid th{color:var(--mk-soft);font-weight:600;font-size:10px;letter-spacing:.1em;
  padding:8px 10px;border-bottom:1px solid var(--mk-bd);text-align:center}
#hero-hud-wow-page .pgrid td{padding:8px 10px;text-align:center;border-bottom:1px solid rgba(71,54,73,.4);color:#f2e9e4}
#hero-hud-wow-page .pgrid td:first-child{color:var(--sky);text-align:left;font-weight:600}
#hero-hud-wow-page .pgrid .hi{color:var(--coral);font-weight:700}
#hero-hud-wow-page .pgrid .ok{color:#7ec488}
#hero-hud-wow-page .pgrid tr{opacity:0;transform:translateX(-14px);transition:.5s}
#hero-hud-wow-page .in .pgrid tr{opacity:1;transform:none}
#hero-hud-wow-page .in .pgrid tr:nth-child(1){transition-delay:.15s}#hero-hud-wow-page .in .pgrid tr:nth-child(2){transition-delay:.25s}
#hero-hud-wow-page .in .pgrid tr:nth-child(3){transition-delay:.35s}#hero-hud-wow-page .in .pgrid tr:nth-child(4){transition-delay:.45s}
#hero-hud-wow-page .in .pgrid tr:nth-child(5){transition-delay:.55s}#hero-hud-wow-page .in .pgrid tr:nth-child(6){transition-delay:.65s}

/* ============================================================
   REPLAYER — pinned. Ventana fiel: mesa "Realista" (riel gris
   biselado + racetrack + fieltro radial), letterbox 1.6, set
   "cash" (fajos con faja de color), controles PREV/n·m/NEXT,
   panel lateral de manos con header lila.
   ============================================================ */
#hero-hud-wow-page #replayer{--rz:clamp(0,calc(var(--p) / .24),1)}
#hero-hud-wow-page .rep-window{max-width:720px;margin:0 auto;width:100%;
  background:#1d161f;border:1px solid var(--mk-bd);border-radius:12px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 70px rgba(255,126,103,.06);
  opacity:var(--rz);
  transform:scale(calc(2.4 - 1.4 * var(--rz))) translateY(calc((1 - var(--rz)) * 8vh));
  filter:blur(calc((1 - var(--rz)) * 9px))}
#hero-hud-wow-page .rep-body{display:flex}
#hero-hud-wow-page .rep-main{flex:1;min-width:0}
#hero-hud-wow-page .rep-stage{position:relative;aspect-ratio:1.6;background:#151017;overflow:hidden}
/* mesa Realista */
#hero-hud-wow-page .r-table{position:absolute;inset:11% 7%;border-radius:50%;
  background:linear-gradient(180deg,#9ea1a8 0%,#60636b 45%,#24262c 100%);
  box-shadow:0 22px 46px rgba(0,0,0,.6)}
#hero-hud-wow-page .r-table::before{content:"";position:absolute;inset:1.6%;border-radius:50%;
  border:1px solid rgba(255,255,255,.16)}
#hero-hud-wow-page .r-felt{position:absolute;inset:7%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,#37684f,#28503e 70%,#16352c 100%);
  border:3px solid rgba(0,0,0,.72);
  box-shadow:inset 0 0 46px rgba(0,0,0,.5)}
/* cartas */
#hero-hud-wow-page .card{position:absolute;width:44px;height:62px;border-radius:6px;background:#f2e9e4;
  font-family:var(--mono);font-weight:700;font-size:16px;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.45);padding:5px 0 0 6px;
  opacity:var(--k,1);
  transform:translateY(calc((1 - var(--k,1)) * -70px)) scale(calc(1 + (1 - var(--k,1)) * 1.3)) rotate(calc((1 - var(--k,1)) * -10deg))}
#hero-hud-wow-page .card small{display:block;font-size:14px;margin-top:1px}
#hero-hud-wow-page .card.red{color:#c73e3e}#hero-hud-wow-page .card.blk{color:#221a24}
#hero-hud-wow-page .bc1{--k:clamp(0,calc((var(--p) - .40)/.05),1);top:30%;left:23%}
#hero-hud-wow-page .bc2{--k:clamp(0,calc((var(--p) - .45)/.05),1);top:30%;left:33.5%}
#hero-hud-wow-page .bc3{--k:clamp(0,calc((var(--p) - .50)/.05),1);top:30%;left:44%}
#hero-hud-wow-page .bc4{--k:clamp(0,calc((var(--p) - .58)/.05),1);top:30%;left:54.5%}
#hero-hud-wow-page .bc5{--k:clamp(0,calc((var(--p) - .68)/.05),1);top:30%;left:65%}
#hero-hud-wow-page .hole{bottom:7%;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 16px rgba(255,126,103,.35)}
#hero-hud-wow-page .hc1{--k:clamp(0,calc((var(--p) - .30)/.05),1);left:42%}
#hero-hud-wow-page .hc2{--k:clamp(0,calc((var(--p) - .34)/.05),1);left:50%;bottom:6.4%;transform-origin:bottom left}
/* fajos del set cash: papel #e9ecdc, tinta #3c6b4f, faja por denominación */
#hero-hud-wow-page .bundle{position:absolute;width:58px;height:30px;border-radius:3px;
  background:linear-gradient(135deg,#eff1e3,#dde1cc);
  border:1px solid #3c6b4f;
  box-shadow:0 2px 0 #cfd4bb,0 4px 0 #c6cbb2,0 5px 0 #cfd4bb,0 8px 14px rgba(0,0,0,.5)}
#hero-hud-wow-page .bundle::before{content:"";position:absolute;inset:3px;border:1px solid rgba(60,107,79,.55);border-radius:1px}
#hero-hud-wow-page .bundle .band{position:absolute;top:-1px;bottom:-6px;left:14%;width:10px;
  border-left:1px solid rgba(0,0,0,.28);border-right:1px solid rgba(0,0,0,.28)}
#hero-hud-wow-page .bundle .oval{position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  background:#f4f6ea;border:1px solid #3c6b4f;border-radius:50%;
  font-family:var(--mono);font-weight:700;font-size:11px;padding:1px 9px}
#hero-hud-wow-page .bundle.b25 .band{background:#46b079}#hero-hud-wow-page .bundle.b25 .oval{color:#2e7550}
#hero-hud-wow-page .bundle.b100 .band{background:#3a3d46}#hero-hud-wow-page .bundle.b100 .oval{color:#2a2c33}
#hero-hud-wow-page .bundle.b50 .band{background:#e0a93a}#hero-hud-wow-page .bundle.b50 .oval{color:#9c7222}
/* vuelo de los fajos al bote (desde asientos hacia el centro) */
#hero-hud-wow-page .fly1{--k:clamp(0,calc((var(--p) - .74)/.07),1);top:52%;left:38%;
  opacity:var(--k);
  transform:translate(calc((1 - var(--k)) * -150px),calc((1 - var(--k)) * 60px)) rotate(calc(-8deg + (1 - var(--k)) * -20deg))}
#hero-hud-wow-page .fly2{--k:clamp(0,calc((var(--p) - .79)/.07),1);top:55%;left:46%;
  opacity:var(--k);
  transform:translate(calc((1 - var(--k)) * 170px),calc((1 - var(--k)) * -70px)) rotate(calc(6deg + (1 - var(--k)) * 24deg))}
#hero-hud-wow-page .fly3{--k:clamp(0,calc((var(--p) - .84)/.06),1);top:50%;left:52%;
  opacity:var(--k);
  transform:translate(calc((1 - var(--k)) * 40px),calc((1 - var(--k)) * -120px)) rotate(calc(-3deg + (1 - var(--k)) * 14deg))}
#hero-hud-wow-page .rep-pot{position:absolute;top:46%;left:50%;font-family:var(--mono);font-size:12px;
  color:#ffb347;letter-spacing:.08em;
  --k:clamp(0,calc((var(--p) - .76)/.08),1);opacity:var(--k);transform:translate(-50%,-50%)}
#hero-hud-wow-page .rep-eq{position:absolute;top:9%;right:5%;font-family:var(--mono);font-size:11px;
  background:rgba(23,18,25,.85);border:1px solid rgba(126,196,136,.45);color:#7ec488;
  padding:5px 10px;border-radius:6px;
  --k:clamp(0,calc((var(--p) - .90)/.07),1);opacity:var(--k);
  transform:scale(calc(1.7 - .7 * var(--k)))}
#hero-hud-wow-page .rep-dealer{position:absolute;bottom:26%;left:31%;width:20px;height:20px;border-radius:50%;
  background:#f2e9e4;color:#221a24;font-family:var(--mono);font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.5)}
/* mini HUDs anclados a asientos (fracción del rect del fieltro) */
#hero-hud-wow-page .rhud{position:absolute;font-family:var(--mono);font-size:9.5px;color:#f2e9e4;
  background:rgba(34,26,36,.9);border:1px solid var(--mk-bd);border-radius:5px;
  padding:3px 7px;white-space:nowrap;
  --k:clamp(0,calc((var(--p) - .22)/.08),1);opacity:var(--k)}
#hero-hud-wow-page .rhud b{color:#ffb347;font-weight:700}
#hero-hud-wow-page .rh1{top:6%;left:38%}#hero-hud-wow-page .rh2{top:26%;right:3%}#hero-hud-wow-page .rh3{bottom:20%;right:5%}
#hero-hud-wow-page .rh4{bottom:2%;left:24%}#hero-hud-wow-page .rh5{top:26%;left:3%}
/* barra de controles del replayer (estilo real: pushable duro) */
#hero-hud-wow-page .rep-controls{display:flex;justify-content:center;align-items:center;gap:12px;
  padding:12px;background:#241b26;border-top:1px solid var(--mk-bd)}
#hero-hud-wow-page .rbtn{font-family:var(--mono);font-weight:800;font-size:12px;letter-spacing:.04em;
  background:#372a3b;color:#f2e9e4;border:2px solid #19121b;
  border-bottom:4px solid #19121b;border-right:4px solid #19121b;
  padding:6px 18px;cursor:pointer;transition:.1s}
#hero-hud-wow-page .rbtn:hover{margin-top:2px;margin-left:2px;border-bottom-width:2px;border-right-width:2px}
#hero-hud-wow-page .rbtn:active{margin-top:4px;margin-left:4px;border-bottom-width:0;border-right-width:0}
#hero-hud-wow-page .rep-step{font-family:var(--mono);font-weight:700;font-size:14px;color:#e85d8a;
  background:#2b212e;border:1px solid #372a3b;border-radius:6px;padding:7px 16px;min-width:76px;text-align:center}
/* panel lateral de manos (header lila real #2e2a40) */
#hero-hud-wow-page .rep-side{width:168px;flex:none;background:#171219;border-left:1px solid var(--mk-bd);
  display:flex;flex-direction:column}
#hero-hud-wow-page .rep-side-head{background:#2e2a40;font-family:var(--mono);font-size:10px;color:#bfa9bb;
  padding:6px 10px;letter-spacing:.04em;white-space:nowrap;overflow:hidden}
#hero-hud-wow-page .rep-side-row{font-family:var(--mono);font-size:10px;color:#bfa9bb;padding:6px 10px;
  border-bottom:1px solid rgba(71,54,73,.35);display:flex;justify-content:space-between;gap:6px}
#hero-hud-wow-page .rep-side-row.on{background:#2b212e;color:#f2e9e4}
#hero-hud-wow-page .rep-side-row .w{color:#7ec488}#hero-hud-wow-page .rep-side-row .l{color:#ff7e67}
/* (móvil: .rep-side ya no se oculta — reflow en el bloque RESPONSIVE final) */

/* ============================================================
   ANÁLISIS — pinned. Ventana fiel: filtros reales a la izquierda,
   sub-pestañas Stats|Manos, secciones colapsables y benchmarks.
   ============================================================ */
#hero-hud-wow-page #analysis{--az:clamp(0,calc(var(--p) / .26),1)}
#hero-hud-wow-page .an-window{max-width:760px;margin:0 auto;width:100%;font-family:var(--mono);font-size:11.5px;
  background:var(--mk-surface);border:1px solid var(--mk-bd);border-radius:12px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 60px rgba(255,126,103,.05);
  opacity:var(--az);
  transform:scale(calc(2.3 - 1.3 * var(--az))) translateY(calc((1 - var(--az)) * 8vh));
  filter:blur(calc((1 - var(--az)) * 9px))}
#hero-hud-wow-page .an-window .win-bar{padding:10px 14px;background:var(--mk-surface2);border-bottom:1px solid var(--mk-bd)}
/* Sin altura fija y SIN scroll interno: la ventana mide lo que mide su panel
   más alto, porque los paneles se apilan en la misma celda de grid (.an-panes).
   Así no salta al cambiar de pestaña ni al avanzar la demo, y no aparece la
   barra de scroll que la hacía ver como el widget utilitario del theme clásico. */
#hero-hud-wow-page .an-body{display:flex}
#hero-hud-wow-page .an-filters{width:194px;flex:none;border-right:1px solid var(--mk-bd);padding:12px 12px 14px;
  display:flex;flex-direction:column;gap:8px}
#hero-hud-wow-page .an-frow{display:flex;justify-content:space-between;align-items:center;gap:8px;
  opacity:var(--fk,1);transform:translateX(calc((1 - var(--fk,1)) * -26px))}
#hero-hud-wow-page .an-frow label{color:var(--mk-soft);font-size:10.5px}
#hero-hud-wow-page .an-frow .sel{background:var(--mk-bg);border:1px solid var(--mk-bd);border-radius:6px;
  color:#f2e9e4;font-size:10.5px;padding:3px 8px;min-width:92px;display:flex;
  justify-content:space-between;gap:6px}
#hero-hud-wow-page .an-frow .sel i{color:var(--mk-soft);font-style:normal}
#hero-hud-wow-page .an-f1{--fk:clamp(0,calc((var(--p) - .30)/.06),1)}
#hero-hud-wow-page .an-f2{--fk:clamp(0,calc((var(--p) - .34)/.06),1)}
#hero-hud-wow-page .an-f3{--fk:clamp(0,calc((var(--p) - .38)/.06),1)}
#hero-hud-wow-page .an-f4{--fk:clamp(0,calc((var(--p) - .42)/.06),1)}
#hero-hud-wow-page .an-f5{--fk:clamp(0,calc((var(--p) - .46)/.06),1)}
#hero-hud-wow-page .an-f6{--fk:clamp(0,calc((var(--p) - .50)/.06),1)}
#hero-hud-wow-page .an-apply{margin-top:6px;font-family:var(--mono);font-weight:700;font-size:11px;
  background:#3d2e35;color:#ffc2b3;border:1px solid #5c4046;border-radius:3px;padding:5px 10px;
  --fk:clamp(0,calc((var(--p) - .54)/.07),1);opacity:var(--fk)}
#hero-hud-wow-page .an-compare{font-family:var(--mono);font-size:10px;color:var(--mk-soft);
  --fk:clamp(0,calc((var(--p) - .58)/.07),1);opacity:var(--fk)}
#hero-hud-wow-page .an-results{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
#hero-hud-wow-page .an-tabs{display:flex;gap:2px;padding:9px 12px 0;flex:none}
#hero-hud-wow-page .an-tab{padding:5px 16px;font-size:10.5px;color:var(--mk-soft);background:var(--mk-surface2);
  border:1px solid var(--mk-bd);border-bottom:none;border-radius:6px 6px 0 0}
#hero-hud-wow-page .an-tab.on{color:#ffb347;background:var(--mk-surface)}
#hero-hud-wow-page .an-sec{border-top:1px solid var(--mk-bd)}
#hero-hud-wow-page .an-sec-h{display:flex;justify-content:space-between;padding:8px 12px 4px;
  color:#ffb347;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
#hero-hud-wow-page .an-sec-h .grip{color:var(--mk-soft);letter-spacing:0}
#hero-hud-wow-page .an-table{width:100%;border-collapse:collapse}
#hero-hud-wow-page .an-table th{text-align:left;color:var(--mk-soft);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border-bottom:1px solid var(--mk-bd);font-weight:600}
#hero-hud-wow-page .an-table th+th,#hero-hud-wow-page .an-table td+td{text-align:right}
#hero-hud-wow-page .an-table td{padding:6px 12px;border-bottom:1px solid rgba(71,54,73,.35);color:#f2e9e4}
#hero-hud-wow-page .an-table tr{opacity:var(--rk,1);transform:translateY(calc((1 - var(--rk,1)) * 12px))}
#hero-hud-wow-page .an-r1{--rk:clamp(0,calc((var(--p) - .40)/.07),1)}
#hero-hud-wow-page .an-r2{--rk:clamp(0,calc((var(--p) - .46)/.07),1)}
#hero-hud-wow-page .an-r3{--rk:clamp(0,calc((var(--p) - .52)/.07),1)}
#hero-hud-wow-page .an-r4{--rk:clamp(0,calc((var(--p) - .58)/.07),1)}
#hero-hud-wow-page .an-r5{--rk:clamp(0,calc((var(--p) - .64)/.07),1)}
#hero-hud-wow-page .an-r6{--rk:clamp(0,calc((var(--p) - .70)/.07),1)}
#hero-hud-wow-page .up{color:#7ec488}#hero-hud-wow-page .dn{color:#ff7e67}
#hero-hud-wow-page .bdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:8px;
  vertical-align:1px;
  --bk:clamp(0,calc((var(--p) - .74)/.10),1);opacity:var(--bk);
  transform:scale(calc(2.2 - 1.2 * var(--bk)))}
#hero-hud-wow-page .bdot.in{background:#7ec488}#hero-hud-wow-page .bdot.under{background:#ffb347}#hero-hud-wow-page .bdot.over{background:#e05c45}
#hero-hud-wow-page .an-collapsed{--rk:clamp(0,calc((var(--p) - .80)/.10),1);opacity:var(--rk)}
#hero-hud-wow-page .an-collapsed .an-sec-h{color:var(--mk-soft)}
/* ---------- paneles conmutables de la ventana de Análisis ---------- */
/* TODOS los paneles ocupan la MISMA celda de grid: el contenedor mide siempre
   lo que mide el más alto y la altura de la ventana queda clavada. El cambio de
   panel es por visibility, no por display, para que el que está oculto siga
   reservando su espacio. */
#hero-hud-wow-page .an-panes{display:grid;flex:1;min-height:0;align-items:start}
#hero-hud-wow-page .an-pane{grid-area:1/1;visibility:hidden}
#hero-hud-wow-page .an-pane.on{visibility:visible}
#hero-hud-wow-page .an-tab{cursor:pointer}

/* ---------- escena "Comparar" ----------
   CALCO de _build_compare_panel() / _refresh_compare_chips() / _repopulate()
   de analysis_tab.py: fila de chips de sujeto, barra de acciones, hint, y
   tablas _StatSection con UNA COLUMNA POR SUJETO (tinte por columna).
   "Por posicion" NO sigue columnas=sujetos: son N bloques apilados
   (decision cerrada 2026-07-10).
   Dirigida por data-step (initWowCompare en wow.js), NO por el scrub --p:
   asi se comporta igual en escritorio, movil y con reduced-motion. */

/* colores de sujeto = AVATAR_PALETTE de replayer.py */
#hero-hud-wow-page .cmp-chip.s1,#hero-hud-wow-page .cmp-table .h1,
#hero-hud-wow-page .cmp-pos-block.b1{--sub:#6366f1}
#hero-hud-wow-page .cmp-chip.s2,#hero-hud-wow-page .cmp-table .h2,
#hero-hud-wow-page .cmp-pos-block.b2{--sub:#ec4899}
#hero-hud-wow-page .cmp-chip.s3,#hero-hud-wow-page .cmp-table .h3,
#hero-hud-wow-page .cmp-pos-block.b3{--sub:#22c55e}

/* --- fila de chips (QFrame#compareChip, alto fijo 24, margenes 8/0/3/0) --- */
#hero-hud-wow-page .cmp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  min-height:38px;padding:7px 12px;border-bottom:1px solid var(--mk-bd)}
#hero-hud-wow-page .cmp-chip{display:inline-flex;align-items:center;gap:3px;height:24px;
  padding:0 3px 0 8px;border-radius:12px;background:var(--mk-bg);
  border:1px solid var(--mk-bd);font-size:10.5px;color:#f2e9e4;white-space:nowrap;
  opacity:0;transform:translateY(-5px) scale(.94);
  transition:opacity .34s,transform .34s}
#hero-hud-wow-page #anCompare:not([data-step="0"]) .cmp-chip{opacity:1;transform:none}
#hero-hud-wow-page #anCompare:not([data-step="0"]) .cmp-chip.s2{transition-delay:.1s}
#hero-hud-wow-page #anCompare:not([data-step="0"]) .cmp-chip.s3{transition-delay:.2s}
#hero-hud-wow-page .cmp-chip .sw{width:10px;height:10px;flex:none;border-radius:2px;
  background:var(--sub)}
/* icono de formato: _make_format_icon("both" / "tournament" / "cash", 13) */
#hero-hud-wow-page .cmp-chip .fmt{width:13px;height:13px;flex:none;border-radius:50%;
  border:1px solid var(--mk-soft);opacity:.75}
#hero-hud-wow-page .cmp-chip .fmt.t{border-radius:2px}
#hero-hud-wow-page .cmp-chip b{font-weight:600;max-width:120px;overflow:hidden;
  text-overflow:ellipsis}
#hero-hud-wow-page .cmp-chip u{width:16px;height:16px;flex:none;display:flex;
  align-items:center;justify-content:center;border-radius:50%;text-decoration:none;
  color:var(--mk-soft);font-size:9px}
/* paso 0: sin sujetos -> solo el hint */
#hero-hud-wow-page #anCompare[data-step="0"] .cmp-chips{min-height:38px}

/* --- barra de acciones --- */
#hero-hud-wow-page .cmp-actions{display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-bottom:1px solid var(--mk-bd)}
#hero-hud-wow-page .cmp-run{font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:#ffcabc;background:#3d2e35;border:1px solid #5c4046;border-bottom:2px solid #2a1f24;
  border-radius:3px;padding:4px 11px;transition:.15s}
#hero-hud-wow-page #anCompare[data-step="0"] .cmp-run{opacity:.45}
#hero-hud-wow-page #anCompare[data-step="2"] .cmp-run{transform:translateY(1px);
  border-bottom-width:1px;background:#4a3740}
#hero-hud-wow-page .cmp-busy{flex:none;width:78px;height:5px;border-radius:3px;
  background:var(--mk-bg);border:1px solid var(--mk-bd);overflow:hidden;opacity:0;
  transition:opacity .3s}
#hero-hud-wow-page .cmp-busy i{display:block;width:38%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#e09a2b,#ffc873)}
#hero-hud-wow-page .cmp-stop{flex:none;font-size:9px;color:var(--mk-soft);opacity:0;
  transition:opacity .3s}
#hero-hud-wow-page #anCompare[data-step="2"] .cmp-busy,
#hero-hud-wow-page #anCompare[data-step="2"] .cmp-stop{opacity:1}
#hero-hud-wow-page #anCompare[data-step="2"] .cmp-busy i{animation:hh-cmp-busy 1.1s ease-in-out infinite}
@keyframes hh-cmp-busy{0%{transform:translateX(-105%)}100%{transform:translateX(275%)}}
@media(prefers-reduced-motion:reduce){#hero-hud-wow-page .cmp-busy i{animation:none}}
#hero-hud-wow-page .cmp-grow{flex:1}
#hero-hud-wow-page .cmp-view,#hero-hud-wow-page .cmp-gear{flex:none;font-size:10px;
  color:var(--mk-soft)}

/* --- hint (mismo texto que el QLabel de ayuda del panel) --- */
/* superpuesto sobre el área de resultados vacía (placeholder de estado vacío):
   así no suma alto propio y el panel mide igual en todos los pasos */
#hero-hud-wow-page .cmp-hint{position:absolute;left:0;right:0;top:96px;margin:0;padding:0 28px;
  font-size:10.5px;line-height:1.5;color:var(--mk-soft);text-align:center;
  opacity:0;transition:opacity .3s}
#hero-hud-wow-page #anCompare[data-step="0"] .cmp-hint{opacity:1}

/* --- area de resultados --- */
#hero-hud-wow-page #anCompare{display:flex;flex-direction:column;position:relative}
#hero-hud-wow-page .cmp-chips,#hero-hud-wow-page .cmp-actions{flex:none}
/* el área de resultados reserva su alto SIEMPRE (visibility, no display): de otro
   modo la ventana crecía de golpe al llegar al paso 3 y volvía a saltar. */
#hero-hud-wow-page .cmp-scroll{visibility:hidden}
#hero-hud-wow-page #anCompare[data-step="3"] .cmp-scroll,
#hero-hud-wow-page #anCompare[data-step="4"] .cmp-scroll{visibility:visible}
#hero-hud-wow-page .cmp-sec+.cmp-sec{border-top:1px solid var(--mk-bd)}
#hero-hud-wow-page .cmp-sec.an-collapsed{--rk:1;opacity:1}
#hero-hud-wow-page .cmp-sec.an-collapsed .an-sec-h{color:var(--mk-soft)}

#hero-hud-wow-page .cmp-table{width:100%;border-collapse:collapse;table-layout:fixed}
#hero-hud-wow-page .cmp-table th{color:var(--mk-soft);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;padding:6px 10px;text-align:center;
  border-bottom:1px solid var(--mk-bd);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#hero-hud-wow-page .cmp-table th:first-child{text-align:left;width:34%}
#hero-hud-wow-page .cmp-table .h1,#hero-hud-wow-page .cmp-table .h2,
#hero-hud-wow-page .cmp-table .h3{color:var(--sub)}
#hero-hud-wow-page .cmp-table td{padding:5px 10px;font-size:11px;color:#f2e9e4;
  text-align:center;font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(71,54,73,.32)}
#hero-hud-wow-page .cmp-table td:first-child{text-align:left;font-weight:600}
/* tinte por columna = item.setBackground(col_colors[col]) */
#hero-hud-wow-page .cmp-table .c1{background:rgba(99,102,241,.11)}
#hero-hud-wow-page .cmp-table .c2{background:rgba(236,72,153,.11)}
#hero-hud-wow-page .cmp-table .c3{background:rgba(34,197,94,.11)}
/* el .bdot general se pilota con --p (scrub); aca va a paso fijo */
#hero-hud-wow-page .cmp-table .bdot{opacity:1;transform:none;margin-left:0;
  margin-right:5px;vertical-align:0}

/* --- "Por posicion": N bloques apilados, uno por sujeto --- */
#hero-hud-wow-page .cmp-pos{border-top:1px solid var(--mk-bd);padding:0 0 10px;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
#hero-hud-wow-page #anCompare[data-step="4"] .cmp-pos{opacity:1;transform:none}
#hero-hud-wow-page .cmp-pos-title{padding:8px 12px 6px;color:#ffb347;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase}
#hero-hud-wow-page .cmp-pos-block{display:flex;align-items:center;gap:10px;
  padding:5px 12px;border-left:2px solid var(--sub)}
#hero-hud-wow-page .cmp-pos-h{display:inline-flex;align-items:center;gap:6px;flex:none;
  width:118px;font-size:10.5px;color:#f2e9e4;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#hero-hud-wow-page .cmp-pos-h .sw{width:10px;height:10px;flex:none;border-radius:2px;
  background:var(--sub)}
#hero-hud-wow-page .cmp-pos-cells{display:flex;flex:1;min-width:0;gap:6px;flex-wrap:wrap}
#hero-hud-wow-page .cmp-pos-cells em{flex:1;min-width:52px;font-style:normal;
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 4px;
  border:1px solid var(--mk-bd);border-radius:5px;background:var(--mk-bg);
  font-size:9px;color:var(--mk-soft);letter-spacing:.06em}
#hero-hud-wow-page .cmp-pos-cells em b{font-size:11px;color:#f2e9e4;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ---------- barra de control de la demo ---------- */
#hero-hud-wow-page .an-demo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:760px;margin:14px auto 0;width:100%}
#hero-hud-wow-page .an-play{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#ffcabc;background:#3d2e35;border:1px solid #5c4046;border-bottom:3px solid #2a1f24;
  border-radius:4px;padding:7px 14px;transition:.15s}
#hero-hud-wow-page .an-play:hover{background:#4a3740;transform:translateY(-1px)}
#hero-hud-wow-page .an-play:active{transform:translateY(1px);border-bottom-width:1px}
#hero-hud-wow-page .an-play .ico{width:0;height:0;border-style:solid;
  border-width:5px 0 5px 8px;border-color:transparent transparent transparent #ffcabc}
#hero-hud-wow-page .an-play.playing .ico{width:8px;height:10px;border:none;
  background:linear-gradient(90deg,#ffcabc 0 3px,transparent 3px 5px,#ffcabc 5px 8px)}
#hero-hud-wow-page .an-steps{display:flex;gap:7px;flex:none}
#hero-hud-wow-page .an-steps button{width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--bd);border:none;transition:.25s}
#hero-hud-wow-page .an-steps button.on{background:var(--coral);transform:scale(1.35);
  box-shadow:0 0 9px rgba(255,126,103,.6)}
#hero-hud-wow-page .an-caption{flex:1;min-width:180px;margin:0;font-family:var(--mono);font-size:11px;
  line-height:1.5;color:var(--soft)}
#hero-hud-wow-page .an-caption b{color:var(--text);font-weight:600}

/* (móvil: .an-filters ya no se oculta — reflow en el bloque RESPONSIVE final) */

/* ============================================================
   ARCHIVE / NOTAS (ventanas densas, entrada desde profundidad)
   ============================================================ */
#hero-hud-wow-page .window{background:var(--mk-surface);border:1px solid var(--mk-bd);border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 70px rgba(255,126,103,.05);overflow:hidden}
#hero-hud-wow-page .window .win-bar{padding:10px 14px;background:var(--mk-surface2);border-bottom:1px solid var(--mk-bd)}
#hero-hud-wow-page .dense{font-family:var(--mono);font-size:11.5px}
#hero-hud-wow-page .dense table{width:100%;border-collapse:collapse}
#hero-hud-wow-page .dense th{text-align:left;color:var(--mk-soft);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 12px;border-bottom:1px solid var(--mk-bd)}
#hero-hud-wow-page .dense td{padding:7px 12px;border-bottom:1px solid rgba(71,54,73,.35);color:#f2e9e4}
#hero-hud-wow-page .mini-tabs{display:flex;gap:2px;padding:8px 12px 0}
#hero-hud-wow-page .mini-tab{padding:5px 14px;font-size:10.5px;color:var(--mk-soft);background:var(--mk-surface2);
  border:1px solid var(--mk-bd);border-bottom:none;border-radius:6px 6px 0 0}
#hero-hud-wow-page .mini-tab.on{color:#ffb347;background:var(--mk-surface)}
#hero-hud-wow-page .notes-mock{max-width:480px;margin:0 auto;width:100%}
#hero-hud-wow-page .note-row{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid rgba(71,54,73,.4);font-family:var(--mono);font-size:12.5px}
#hero-hud-wow-page .note-dot{width:10px;height:10px;border-radius:3px;flex:none}
#hero-hud-wow-page .note-dot.r{background:#e05c45}#hero-hud-wow-page .note-dot.y{background:#ffb347}#hero-hud-wow-page .note-dot.g{background:#7ec488}
#hero-hud-wow-page .note-nick{color:var(--sky);font-weight:600;min-width:96px}
#hero-hud-wow-page .note-txt{color:var(--mk-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero-hud-wow-page .sync-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:11px;color:var(--sky);
  border:1px solid rgba(111,195,223,.4);border-radius:16px;padding:6px 14px}
#hero-hud-wow-page .sync-badge svg{width:14px;height:14px}
#hero-hud-wow-page .typing{overflow:hidden;white-space:nowrap;border-right:2px solid var(--coral);max-width:0}
#hero-hud-wow-page .in .typing{animation:hh-wow-type 2.2s steps(34) .6s forwards,hh-wow-blink 1s step-end infinite}
@keyframes hh-wow-type{to{max-width:100%}}
@keyframes hh-wow-blink{50%{border-color:transparent}}

/* ============================================================
   SKINS — panel que muta (idea aprobada v1)
   ============================================================ */
#hero-hud-wow-page #skins .inner{max-width:1000px;width:100%;text-align:center}
/* Pantallazo de la ventana principal (vista LIVE) que cambia de piel.
   Una sola estructura; cada skin define sus tokens --a-* (paletas exactas
   de skins/sunset.py, ink.py y hero1.py). */
#hero-hud-wow-page .skin-stage{margin:40px auto 0;max-width:720px;position:relative}
#hero-hud-wow-page .app{background:var(--a-bg);border:var(--a-bw) solid var(--a-bd);border-radius:var(--a-rad);
  box-shadow:var(--a-shadow);text-align:left;overflow:hidden;font-family:var(--a-font)}
#hero-hud-wow-page .app,#hero-hud-wow-page .app *{transition:background-color .7s,color .7s,border-color .7s,box-shadow .7s,stroke .7s}
#hero-hud-wow-page .app-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--a-surface2);border-bottom:var(--a-bw) solid var(--a-bd)}
/* controles Windows dentro del mock de skins: siguen los tokens --a-* de
   cada piel, no la paleta sunset fija */
#hero-hud-wow-page .app-bar .win-ico{background:var(--a-accent);border-radius:calc(var(--a-rad) / 2)}
#hero-hud-wow-page .app-bar .wctl{margin-left:10px}
#hero-hud-wow-page .app-bar .wctl i::before,#hero-hud-wow-page .app-bar .wctl i::after{background:var(--a-soft)}
#hero-hud-wow-page .app-bar .wctl .mx::before{background:none;border-color:var(--a-soft)}
#hero-hud-wow-page .app-bar span{font-size:11px;color:var(--a-soft);margin-left:8px;letter-spacing:.06em;font-family:var(--a-num)}
#hero-hud-wow-page .app-bar .gear{margin-left:auto;color:var(--a-soft);font-size:13px}
#hero-hud-wow-page .app-tabs{display:flex;gap:3px;padding:9px 12px 0;background:var(--a-bg)}
#hero-hud-wow-page .app-tab{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--a-soft);
  background:var(--a-surface2);border:var(--a-bw) solid var(--a-bd);border-bottom:none;
  border-radius:var(--a-rad) var(--a-rad) 0 0;padding:6px 17px}
#hero-hud-wow-page .app-tab.on{color:var(--a-accent);background:var(--a-surface)}
#hero-hud-wow-page .app-body{display:flex;background:var(--a-surface);border-top:var(--a-bw) solid var(--a-bd)}
#hero-hud-wow-page .app-side{width:172px;flex:none;border-right:var(--a-bw) solid var(--a-bd);padding:12px 14px}
#hero-hud-wow-page .app-side h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-title);margin-bottom:8px}
#hero-hud-wow-page .side-row{display:flex;justify-content:space-between;font-size:11px;color:var(--a-soft);
  padding:4px 0;font-family:var(--a-num)}
#hero-hud-wow-page .side-row b{color:var(--a-text);font-weight:700}
#hero-hud-wow-page .side-row b.up{color:var(--a-green)}
#hero-hud-wow-page .hud-btn{margin-top:12px;width:100%;font-family:var(--a-num);font-weight:700;font-size:11px;
  letter-spacing:.06em;background:var(--a-btn);color:var(--a-btn-text);
  border:var(--a-bw) solid var(--a-bd);border-radius:calc(var(--a-rad) / 2);padding:6px 0}
#hero-hud-wow-page .app-main{flex:1;min-width:0;padding:12px 14px 6px}
#hero-hud-wow-page .app-main svg{width:100%;height:auto;display:block}
#hero-hud-wow-page .app-net{fill:none;stroke:var(--a-green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#hero-hud-wow-page .app-ev{fill:none;stroke:var(--a-ev);stroke-width:1.7;opacity:.85}
#hero-hud-wow-page .app-grid{stroke:var(--a-bd);stroke-width:1}
#hero-hud-wow-page .app-legend{display:flex;gap:16px;padding:8px 2px 4px;font-size:10px;color:var(--a-soft);font-family:var(--a-num)}
#hero-hud-wow-page .app-legend i{display:inline-block;width:14px;height:2px;margin-right:5px;vertical-align:middle}
#hero-hud-wow-page .app-legend .n i{background:var(--a-green)}#hero-hud-wow-page .app-legend .e i{background:var(--a-ev)}
#hero-hud-wow-page .app-status{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--a-soft);
  font-family:var(--a-num);padding:7px 14px;background:var(--a-surface2);
  border-top:var(--a-bw) solid var(--a-bd)}
#hero-hud-wow-page .app-status .dot{width:7px;height:7px;border-radius:50%;background:var(--a-green)}
/* (móvil: .app-side ya no se oculta — reflow en el bloque RESPONSIVE final) */
/* — sunset (skins/sunset.py) — */
#hero-hud-wow-page .skin-stage[data-skin="sunset"] .app{
  --a-bg:#221a24;--a-surface:#2b212e;--a-surface2:#372a3b;--a-bd:#473649;
  --a-text:#f2e9e4;--a-soft:#bfa9bb;--a-title:#ffb347;--a-accent:#ff7e67;
  --a-green:#7ec488;--a-ev:#ff7e67;--a-rad:6px;--a-bw:1px;
  --a-font:var(--body);--a-num:var(--mono);
  --a-btn:#3d2e35;--a-btn-text:#ffcabc;
  --a-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(255,126,103,.12)}
/* — ink (skins/ink.py: papel, tinta, monospace, bordes duros) — */
#hero-hud-wow-page .skin-stage[data-skin="ink"] .app{
  --a-bg:#ffffff;--a-surface:#f4f1ea;--a-surface2:#ece7d8;--a-bd:#0a0a0a;
  --a-text:#0a0a0a;--a-soft:#2a2a2a;--a-title:#0a0a0a;--a-accent:#0a0a0a;
  --a-green:#22c55e;--a-ev:#7c3aed;--a-rad:0px;--a-bw:2px;
  --a-font:'Courier New','Consolas',monospace;--a-num:'Courier New',monospace;
  --a-btn:#f4f1ea;--a-btn-text:#0a0a0a;
  --a-shadow:8px 8px 0 #0a0a0a}
/* — hero (hero1.py: zinc oscuro + índigo) — */
#hero-hud-wow-page .skin-stage[data-skin="hero"] .app{
  --a-bg:#121212;--a-surface:#1e1e1e;--a-surface2:#27272a;--a-bd:#333333;
  --a-text:#e0e0e0;--a-soft:#a1a1aa;--a-title:#a78bfa;--a-accent:#6366f1;
  --a-green:#22c55e;--a-ev:#6366f1;--a-rad:6px;--a-bw:1px;
  --a-font:var(--body);--a-num:var(--mono);
  --a-btn:#4f46e5;--a-btn-text:#ffffff;
  --a-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(99,102,241,.14)}
#hero-hud-wow-page .skin-pills{display:flex;justify-content:center;gap:10px;margin-top:26px}
#hero-hud-wow-page .skin-pill{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:8px 20px;border-radius:20px;cursor:pointer;
  background:var(--surface2);color:var(--soft);border:1px solid var(--bd);transition:.2s}
#hero-hud-wow-page .skin-pill.on{color:var(--text);border-color:var(--coral);box-shadow:0 0 14px rgba(255,126,103,.3)}

/* ============================================================
   CTA FINAL
   ============================================================ */
#hero-hud-wow-page #end .stage{flex-direction:column;text-align:center;min-height:90vh}
#hero-hud-wow-page #end h2{font-family:var(--disp);font-weight:800;font-size:clamp(36px,5.4vw,80px);
  line-height:1.02;color:var(--head);margin-bottom:18px}
#hero-hud-wow-page #end p{color:var(--soft);max-width:52ch;margin:0 auto 38px;font-size:17px}
#hero-hud-wow-page .cta{display:inline-block;font-family:var(--disp);font-weight:800;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,var(--coral),var(--coral-deep));
  border-radius:8px;padding:16px 42px;border-bottom:4px solid #8a3526;
  box-shadow:0 10px 40px rgba(255,126,103,.35);transition:.15s}
#hero-hud-wow-page .cta:hover{transform:translateY(-2px);box-shadow:0 14px 50px rgba(255,126,103,.5)}
#hero-hud-wow-page .cta:active{transform:translateY(1px);border-bottom-width:2px}
#hero-hud-wow-page .footnote{margin-top:70px;font-family:var(--mono);font-size:11px;color:var(--soft);
  letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* ============================================================
   RESPONSIVE — pasada consolidada
   Criterio: en pantallas chicas el contenido se REACOMODA, no se
   oculta. Antes .an-filters / .rep-side / .app-side se apagaban con
   display:none y los mocks quedaban mutilados (mostraban media
   ventana y el copy prometía funciones invisibles).
   NO se toca el mecanismo de pin: el scrub ya está desactivado
   <901px por diseño y el pin de escritorio está confirmado en vivo
   (CHANGELOG 2026-07-10-b). Acá solo hay layout y entradas.
   ============================================================ */
@media(max-width:900px){
  /* la entrada "desde la profundidad" nace en scale(1.75) + blur(10px):
     en pantallas angostas eso se desborda del viewport y se ve como un
     salto. Se atenúa, no se elimina. */
  /* :not(.in) es OBLIGATORIO — el selector lleva ID (1,1,0) y le ganaría a
     .deepin.in (0,2,0), dejando el mock borroso y escalado para siempre. */
  #hero-hud-wow-page .deepin:not(.in){transform:scale(1.14) translateY(3vh);filter:blur(4px)}
  #hero-hud-wow-page .stage{overflow-x:clip}
}
@media(max-width:760px){
  /* HERO — la ventana LIVE apila panel y gráfico */
  #hero-hud-wow-page .live-body{flex-direction:column}
  #hero-hud-wow-page .live-side{width:auto;border-right:none;border-bottom:1px solid var(--mk-bd);
    display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px;align-items:center}
  #hero-hud-wow-page .live-side h4{grid-column:1/-1;margin-bottom:4px}
  #hero-hud-wow-page .live-side .lv-h2{margin-top:10px}
  #hero-hud-wow-page .lv-btn{grid-column:1/-1}
  #hero-hud-wow-page .live-main svg{height:130px}
  #hero-hud-wow-page .live-tab{padding:6px 12px;font-size:10px}
  /* las fichas achican y se apartan del texto */
  #hero-hud-wow-page .chip{width:44px;height:44px}
  #hero-hud-wow-page .chip.c2,#hero-hud-wow-page .chip.c3{width:36px;height:36px}
  #hero-hud-wow-page .chip-inner b{font-size:11px}
  #hero-hud-wow-page .chip.c1{left:2%}#hero-hud-wow-page .chip.c2{right:3%}
  #hero-hud-wow-page .chip.c3{left:4%}#hero-hud-wow-page .chip.c4{right:4%}
}
@media(max-width:680px){
  /* ANÁLISIS — los filtros pasan de columna lateral a fila superior */
  #hero-hud-wow-page .an-body{flex-direction:column;min-height:0}
  #hero-hud-wow-page .an-filters{width:auto;flex-direction:row;flex-wrap:wrap;gap:7px 10px;
    border-right:none;border-bottom:1px solid var(--mk-bd)}
  #hero-hud-wow-page .an-frow{flex:1 1 45%;min-width:0}
  #hero-hud-wow-page .an-frow .sel{min-width:0;flex:1}
  #hero-hud-wow-page .an-apply,#hero-hud-wow-page .an-compare{flex:1 1 100%;margin-top:2px;text-align:center}
  /* REPLAYER — el historial pasa de barra lateral a tira horizontal */
  #hero-hud-wow-page .rep-body{flex-direction:column}
  #hero-hud-wow-page .rep-side{width:auto;flex-direction:row;overflow-x:auto;border-left:none;
    border-top:1px solid var(--mk-bd);-webkit-overflow-scrolling:touch}
  #hero-hud-wow-page .rep-side-head{display:none}
  #hero-hud-wow-page .rep-side-row{flex:none;flex-direction:column;gap:2px;border-bottom:none;
    border-right:1px solid rgba(71,54,73,.35);white-space:nowrap}
}
@media(max-width:600px){
  /* SKINS — el panel de sesión pasa a fila de cifras */
  #hero-hud-wow-page .app-body{flex-direction:column}
  #hero-hud-wow-page .app-side{width:auto;border-right:none;
    border-bottom:var(--a-bw) solid var(--a-bd);
    display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px;align-items:center}
  #hero-hud-wow-page .app-side h4{grid-column:1/-1}
  #hero-hud-wow-page .hud-btn{grid-column:1/-1}
  /* COMPARAR — chips que envuelven y tabla compacta */
  #hero-hud-wow-page .cmp-chips{padding:7px 9px}
  #hero-hud-wow-page .cmp-chip b{max-width:78px}
  #hero-hud-wow-page .cmp-actions{flex-wrap:wrap;gap:6px;padding:8px 9px}
  #hero-hud-wow-page .cmp-grow{flex:1 1 100%;height:0}
  #hero-hud-wow-page .cmp-table th,#hero-hud-wow-page .cmp-table td{padding:5px 6px;
    font-size:10px}
  #hero-hud-wow-page .cmp-table th:first-child{width:30%}
  #hero-hud-wow-page .cmp-table .bdot{margin-right:3px}
  #hero-hud-wow-page .cmp-pos-block{flex-direction:column;align-items:flex-start;gap:5px}
  #hero-hud-wow-page .cmp-pos-h{width:auto}
  #hero-hud-wow-page .an-demo{gap:10px}
  #hero-hud-wow-page .an-caption{flex:1 1 100%;min-width:0}
}