/* ═══════════════════════════════════════════════════════════════════
   HELIOS · «La Última Noche» · main.css · build 2
   Solo se ANIMAN transform/opacity. Glows horneados. overflow-x solo
   en html/body. Nada de transform en ancestros de #persistent/.pin.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Switzer';src:url('../fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --bg:#07080D;--bg2:#0A0C14;--ink-dark:#1A0E00;
  --gold:#FFB23E;--gold-2:#FFD89A;--gold-deep:#E08A1E;
  --corona:#6D4AFF;--corona-2:#9C7BFF;--green:#3EC46D;--red:#E5484D;
  --txt:#F3F5F9;--dim:#B4BDCE;--faint:#8B97AC;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
  --accent:#FFB23E;--accent-rgb:255,178,62;
  --glass-fill:linear-gradient(180deg,rgba(26,30,42,.66),rgba(13,16,24,.78));
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.07);
  --edge:0 0 0 1px rgba(var(--accent-rgb),.42);
  --halo:0 0 9px rgba(var(--accent-rgb),.16);
  --font:'Switzer',system-ui,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--slow:cubic-bezier(.22,1,.36,1);
  --nav-h:56px;--band-c:14px;--band-x:16px;   /* banda inferior retirada: solo un pequeño respiro abajo */
  --ease-out-brand:cubic-bezier(.22,1,.36,1);--ease-in-brand:cubic-bezier(.3,0,.2,1);  /* curvas de la rueda AHK */
  --warm:0;--vhpx:100vh;
}
@media(max-width:700px){:root{--band-x:12px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);line-height:1.55;
  overscroll-behavior-y:contain;
  padding-bottom:calc(var(--band-c) + env(safe-area-inset-bottom));
}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:
  radial-gradient(900px 600px at 80% -10%,rgba(109,74,255,.10),transparent 60%),
  radial-gradient(700px 500px at 15% 10%,rgba(64,86,140,.12),transparent 55%),var(--bg)}
body::after{opacity:var(--warm);background:
  radial-gradient(1100px 760px at 50% 108%,rgba(255,178,62,.34),transparent 62%),
  radial-gradient(800px 540px at 78% 90%,rgba(255,216,154,.18),transparent 60%),
  linear-gradient(180deg,#0B0A10 0%,#241B10 55%,#4A3413 100%)}
a{color:inherit}
img,svg{display:block}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;z-index:300;background:var(--gold);color:var(--ink-dark);padding:10px 16px;border-radius:8px;font-weight:600}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.dim{color:var(--dim)}

h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.06}
h2{font-size:clamp(30px,5.4vw,56px);margin-bottom:14px}
.h2-sub{color:var(--gold)}
.display{display:block;font-size:clamp(40px,8.4vw,124px);letter-spacing:-.03em}
.display-2{font-size:clamp(40px,8vw,110px);letter-spacing:-.03em}
.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.lead{color:var(--dim);font-size:clamp(16px,2.1vw,20px);max-width:48ch}
.subclaim{color:var(--faint);font-size:14px}
.claim-line{font-size:clamp(17px,2.2vw,22px);margin:18px 0 6px;max-width:46ch}
.dim-note{display:block;font-size:.62em;font-weight:400;color:var(--faint);margin-top:6px}  /* el rider honesto pegado a la promesa */
.payoff{color:var(--dim);font-size:15px;margin-top:10px}
.payoff strong{color:var(--gold)}
.microcopy{color:var(--faint);font-size:13px;margin-top:10px}
.spine{font-size:clamp(16px,2.1vw,21px);color:var(--dim);margin:-4px 0 14px}
.spine strong{color:var(--txt)}

.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-weight:700;font-size:15px;min-height:46px;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;box-shadow:0 8px 26px rgba(255,178,62,.28),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s var(--ease)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--txt);border-radius:999px;min-height:42px;padding:9px 18px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.cta-inline{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.5)}

.glass{background:var(--glass-fill);border-radius:14px;box-shadow:var(--glass-sheen),0 14px 40px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.glass-dark{background:linear-gradient(180deg,rgba(13,16,24,.92),rgba(8,10,16,.96));border-radius:18px;box-shadow:var(--glass-sheen),0 18px 50px rgba(0,0,0,.5),var(--edge),var(--halo)}

/* ════ banner IG ════ */
#iab{position:sticky;top:0;z-index:210;display:flex;align-items:center;gap:10px;justify-content:center;max-height:44px;padding:8px 12px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-size:13px;font-weight:600;text-align:center}
#iab button{background:#241500;color:var(--gold-2);border:0;border-radius:999px;width:28px;height:28px;font:inherit;cursor:pointer;flex:0 0 auto}
html:not(.in-ig) #iab{display:none}

/* ════ persistentes ════ */
#persistent{position:relative;z-index:200}
#nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 0 16px;background:rgba(7,8,13,.9);border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;gap:1px;font-weight:800;font-size:19px;letter-spacing:.05em;text-decoration:none}
.wordmark .sunO{width:.82em;height:.82em;margin:0 .03em;position:relative;top:.04em}
.brand{text-decoration:none}
.clock{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:999px;color:var(--gold-2);padding:7px 14px;font:inherit;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;min-height:36px}
.clock.fundador{color:var(--user-c,var(--gold-2))}
.btn-nav{min-height:40px;padding:9px 18px;font-size:14px}
.cta-short{display:none}
@media(max-width:480px){.cta-long{display:none}.cta-short{display:inline}.wordmark{font-size:17px}}

#constellation{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:190}
#constellation a{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);display:block;transition:background .25s,box-shadow .25s}
#constellation a.on{background:var(--gold);box-shadow:0 0 8px rgba(var(--accent-rgb),.7)}
@media(pointer:coarse){#constellation{right:auto;left:0;top:var(--nav-h);transform:none;flex-direction:row;width:100%;height:2px;gap:0;pointer-events:none}
  #constellation a{flex:1;height:2px;border-radius:0;background:rgba(255,255,255,.08)}
  #constellation a.on{background:var(--gold);box-shadow:none}
  #constellation a.past{background:rgba(var(--accent-rgb),.35)}}

#tl-band{position:fixed;left:0;right:0;bottom:0;z-index:205;height:calc(var(--band-x) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(180deg,rgba(10,12,18,.94),rgba(7,8,13,.98));border-top:1px solid var(--line-2);transition:transform .2s var(--ease),opacity .25s}
#tl-band.collapsed{transform:translateY(calc(var(--band-x) - var(--band-c)))}
html:not(.motion-ok) #tl-band{transition:none}
#tl-band::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
#tl-chip{position:absolute;left:10px;top:-22px;height:22px;padding:0 10px;background:rgba(10,12,18,.94);border:1px solid var(--line-2);border-bottom:0;border-radius:8px 8px 0 0;color:var(--gold-2);font:inherit;font-size:10px;font-weight:700;letter-spacing:.12em;cursor:pointer}
#tl-tracks{position:absolute;inset:6px 86px 6px 10px;display:flex;flex-direction:column;gap:2px}
#tl-band.collapsed #tl-tracks{inset:5px 86px auto 10px;height:calc(var(--band-c) - 10px)}
.tl-row{position:relative;flex:1;background:rgba(255,255,255,.025);border-radius:2px;min-height:3px}
.tl-clip{position:absolute;top:0;bottom:0;border-radius:2px;opacity:.95}
.tl-clip.video{background:#3E5871}.tl-clip.audio{background:#2E5B45}
.tl-clip.adj{background:linear-gradient(180deg,rgba(255,178,62,.85),rgba(224,138,30,.75))}
.tl-clip.title{background:linear-gradient(180deg,rgba(156,123,255,.85),rgba(109,74,255,.7))}
.tl-clip.sfx{background:linear-gradient(180deg,rgba(62,196,109,.9),rgba(34,140,72,.8))}
.tl-clip.nested{background:repeating-linear-gradient(45deg,#2A2E3A 0 5px,#202430 5px 10px);box-shadow:0 0 0 1px #3A4150 inset}
.tl-clip .red-layer{position:absolute;inset:0;border-radius:2px;background:var(--red);opacity:0;transition:opacity .25s}
.tl-clip.off .red-layer{opacity:1}
.tl-clip.user{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.8)}
.tl-clip.safe{box-shadow:0 0 0 1px var(--green)}
/* tiradores de trim: franja fina en cada borde, agarrables siempre (opacity:0 ≠ display:none), visibles al hover/selección */
.tl-clip .tlx-trim{position:absolute;top:0;bottom:0;width:8px;z-index:4;cursor:ew-resize;opacity:0;transition:opacity .12s}
.tl-clip .tlx-trim.l{left:0}.tl-clip .tlx-trim.r{right:0}
.tl-clip:hover .tlx-trim,.tl-clip.sel .tlx-trim,.tl-clip.trimming .tlx-trim{opacity:1}
.tl-clip .tlx-trim::before{content:"";position:absolute;top:24%;bottom:24%;width:2px;border-radius:2px;background:rgba(255,255,255,.9);box-shadow:0 0 4px rgba(0,0,0,.55)}
.tl-clip .tlx-trim.l::before{left:2px}.tl-clip .tlx-trim.r::before{right:2px}
.tl-clip.trimming{z-index:6;box-shadow:0 0 0 1px var(--gold),0 0 12px rgba(var(--accent-rgb),.5)}
html.touch .tlx-trim{display:none}
body.trimming,body.trimming .tl-clip{cursor:ew-resize}
body.trimming{user-select:none;-webkit-user-select:none}
.tl-playhead{position:absolute;top:0;bottom:0;width:1.5px;background:var(--gold-2);left:34%}
html.motion-full .tl-playhead{animation:phBlink 1.2s steps(2) infinite}
@keyframes phBlink{50%{opacity:.25}}
#tl-counter{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;color:var(--gold);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
#tl-band.collapsed #tl-counter{top:calc(var(--band-c)/2)}
#tl-label{position:absolute;right:10px;top:-30px;background:rgba(10,12,18,.94);border:1px solid var(--line-2);border-radius:8px;color:var(--dim);font-size:12px;padding:4px 10px}
#tl-band.gold{border-top-color:rgba(var(--accent-rgb),.5)}
body.kb-open #tl-band,body.kb-open #dock{display:none}

#dock{position:fixed;right:16px;bottom:calc(var(--band-c) + env(safe-area-inset-bottom) + 12px);z-index:206;display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:999px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 30px rgba(255,178,62,.4)}
#dock.mini{width:48px;height:48px;padding:0;justify-content:center;font-size:18px;overflow:hidden}
@media(pointer:fine){#dock{display:none!important}}

#sheet{position:fixed;inset:0;z-index:240}
#sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
#sheet-panel{position:absolute;left:0;right:0;bottom:0;background:#0C0F17;border-radius:18px 18px 0 0;border-top:1px solid var(--line-2);padding:14px 14px calc(14px + env(safe-area-inset-bottom));max-height:70vh;max-height:70svh;overflow-y:auto}
#sheet-panel a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;text-decoration:none;color:var(--txt);font-size:15px}
#sheet-panel a:active{background:rgba(255,255,255,.06)}
#sheet-panel a .sh-h{color:var(--gold-2);font-variant-numeric:tabular-nums;font-weight:600}
#sheet-panel a.sh-cta{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-weight:700;justify-content:center;margin-top:8px}

/* ════ mundo parallax (viaje) ════ */
#world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;will-change:opacity;contain:layout paint}
#world .wl{position:absolute;left:0;right:0;top:-30vh;height:170vh;will-change:transform}
#world .wfield{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;background:#fff}
#world .wneb{position:absolute;border-radius:50%;opacity:.24}
/* capa de MOOD por estación: resplandor que vira de color+posición al bajar (JS interpola las vars por escena) */
#mood{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62vmax 54vmax at var(--mx,76%) var(--my,10%),rgba(var(--ma,255,178,62),.20),transparent 66%),
    radial-gradient(54vmax 54vmax at calc(100% - var(--mx,76%)) calc(100% - var(--my,10%)),rgba(var(--mb,156,123,255),.14),transparent 70%)}

/* ════ ESTACIONES v2 · layout 2-columnas + multi-vídeo + estantería (guiño interactivo) ════ */
.st2{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
@media(max-width:900px){.st2{grid-template-columns:1fr;gap:24px;text-align:center}}
.st2 .eyebrow{margin-bottom:16px}
.st2 h2{font-size:clamp(30px,4.6vw,54px);line-height:1.04;margin-bottom:18px}
.st-lead{color:var(--dim);font-size:clamp(15px,1.7vw,18px);line-height:1.66;max-width:47ch}
.st-lead strong{color:var(--txt)}
@media(max-width:900px){.st-lead{margin-inline:auto}}
.st-shelf{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
@media(max-width:900px){.st-shelf{justify-content:center}}
.st-chip{position:relative;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px;background:var(--glass-fill,rgba(20,24,34,.6));border:1px solid var(--line-2);color:var(--txt);font:inherit;cursor:pointer;
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),border-color .55s cubic-bezier(.22,1,.36,1),opacity .55s cubic-bezier(.22,1,.36,1)}
.st-chip-ic{font-size:19px;color:var(--gold);line-height:1;filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.4))}
.st-chip-lb{font-weight:600;font-size:14px}
.st-shelf:hover .st-chip{opacity:.48}
.st-shelf .st-chip:hover{opacity:1;transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 26px rgba(var(--accent-rgb),.26)}
.st-media{display:flex;flex-direction:column;gap:14px}
.st-vid{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#10141d,#0a0c12);border:1px solid var(--line-2);
  transition:border-color .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.st-vid-lb{position:absolute;left:13px;top:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);z-index:2}
.st-vid-cap{position:absolute;left:13px;right:13px;bottom:12px;font-size:12.5px;color:var(--dim);line-height:1.45;z-index:2}
.st-vid-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,178,62,.13);border:1px solid rgba(var(--accent-rgb),.5)}
.st-vid-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--gold)}
.st-vid::before{content:"grabación de pantalla · próximamente";position:absolute;left:0;right:0;top:56%;text-align:center;color:var(--faint);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
html[lang="en"] .st-vid::before{content:"screen recording · coming soon"}   /* i18n del placeholder (el CSS es compartido con /en) */
.st-vid.hot{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(var(--accent-rgb),.22);transform:translateY(-3px)}
/* ════ TU LIBRERÍA · torre de copy + LA RUEDA CAMARERA debajo (izq) · vídeo real (der) ════ */
/* torre: headline y notas conmutan por categoría (altura reservada → sin reflow) */
.hp-headlines{position:relative;min-height:2.1em;margin-bottom:16px}
.hp-hl{display:none;margin:0}
.hp-hl.is-on{display:block}
.hp-notes{position:relative;min-height:64px;margin-top:18px}
.hp-note{display:none}
.hp-note.is-on{display:block}
.hp-kicker{display:block;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:11px;letter-spacing:.03em;color:var(--gold);margin-bottom:9px}
.hp-note p{color:var(--dim);font-size:15px;line-height:1.6}
.hp-note p code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--gold-2);background:rgba(255,178,62,.08);padding:1px 6px;border-radius:5px}
.hp-meta{display:block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--gold-2)}
@media(max-width:900px){.hp-note{text-align:center}}
/* pestañas de categoría (bajo el lead, en la columna de copy; le ceden el mando al usuario) */
.lib-cats{display:flex;gap:8px;margin-top:18px}
@media(max-width:900px){.lib-cats{justify-content:center}}
.hp-tab{font:inherit;font-weight:600;font-size:13px;color:var(--dim);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:7px 15px;cursor:pointer;transition:color .35s var(--ease-out-brand),border-color .35s var(--ease-out-brand),background .35s var(--ease-out-brand)}
.hp-tab:hover{color:var(--txt);border-color:rgba(var(--accent-rgb),.4)}
.hp-tab.is-on{color:var(--gold-2);border-color:rgba(var(--accent-rgb),.55);background:rgba(255,178,62,.07)}
/* LA RUEDA CAMARERA · viñeta bajo el copy: SOLO la rueda (canvas), grano estático, aire para halo/ghost */
.lib-vignette{position:relative;width:min(320px,82%);aspect-ratio:1;margin:24px 0 0}
@media(max-width:900px){.lib-vignette{margin:22px auto 0}}
.lib-vignette canvas{display:block;width:100%;height:100%}
.lib-vignette::after{content:"";position:absolute;inset:4%;pointer-events:none;border-radius:50%;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* el marco del vídeo real (derecha) hace un micro-pulso sincronizado al cambiar de categoría */
#libreria .st-media{display:block}
.st-vid.lib-pulse{animation:libVidPulse .9s var(--ease-out-brand)}
@keyframes libVidPulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}30%{box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.55),0 0 26px rgba(var(--accent-rgb),.2)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
/* torre: la headline/nota entran con una subida suave (revelado, no crossfade) */
.hp-hl.is-on{animation:hpRise .55s var(--ease-out-brand)}
.hp-note.is-on{animation:hpRise .62s var(--ease-out-brand)}
@keyframes hpRise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
/* ════ BUSCAR · EL FINDER VIVO (guiño bajo el copy; la rueda solo vela como sello) ════ */
.bus-vignette{position:relative;margin-top:22px;max-width:440px}
@media(max-width:900px){.bus-vignette{margin-left:auto;margin-right:auto;text-align:left}}
.bus-finder{background:linear-gradient(180deg,#10141d,#0a0c12);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}
.bus-field{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.bus-lupa{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.bus-q{font-family:ui-monospace,Consolas,monospace;font-size:15px;color:var(--txt);white-space:pre}
.bus-caret{width:1.5px;height:18px;background:var(--gold-2);box-shadow:0 0 6px rgba(var(--accent-rgb),.6)}
html.motion-full .bus-caret{animation:busCaret 1.1s steps(2) infinite}
@keyframes busCaret{50%{opacity:0}}
.bus-seal{margin-left:auto;width:13px;height:13px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 45% 38%,#FFE9C2,var(--gold) 55%,var(--gold-deep));box-shadow:0 0 10px rgba(var(--accent-rgb),.55)}
html.motion-full .bus-seal{animation:busSeal 5.5s ease-in-out infinite}
@keyframes busSeal{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.bus-speed{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--gold-2);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s var(--ease-out-brand)}
.bus-speed.on{opacity:1}
.bus-rows{display:flex;flex-direction:column;gap:5px;padding:10px 12px;min-height:158px}
.bus-row{display:grid;grid-template-columns:20px 1fr auto 84px;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--line);opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease-out-brand),opacity .4s var(--ease-out-brand),background .4s var(--ease-out-brand),border-color .4s var(--ease-out-brand),transform .45s var(--ease-out-brand)}
.bus-row.in{opacity:1;clip-path:inset(0 0 0 0)}
.bus-row.out{opacity:0;clip-path:inset(0 0 0 100%);transition-duration:.28s}
.bus-row.is-hot{background:rgba(255,255,255,.05);border-color:rgba(var(--accent-rgb),.42);transform:translateX(3px)}
.bus-row svg{width:15px;height:15px;fill:none;stroke:var(--gold-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;justify-self:center}
.bus-name{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bus-meta{font-size:10.5px;color:var(--faint);white-space:nowrap}
.bus-wf{width:84px;height:22px;display:block;justify-self:end}
.bus-foot{padding:9px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.bus-foot b{color:var(--gold-2);font-variant-numeric:tabular-nums;font-weight:700}
.bus-strip{position:relative;height:34px;margin-top:12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden}
.bus-clip{position:absolute;top:5px;bottom:5px;border-radius:4px;background:linear-gradient(180deg,#3a4761,#28324a)}
.bus-clip.s1{left:6%;width:22%}.bus-clip.s2{left:64%;width:24%}
.bus-clip.drop{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));box-shadow:0 0 0 1px rgba(var(--accent-rgb),.6),0 4px 12px rgba(var(--accent-rgb),.3);animation:hpSnap .6s var(--ease-out-brand)}
@keyframes hpSnap{0%{transform:translateY(-7px) scaleX(.72);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.bus-ph{position:absolute;top:0;bottom:0;width:1.5px;background:var(--gold-2);box-shadow:0 0 6px rgba(var(--accent-rgb),.6);left:34%;transition:left .8s var(--ease-out-brand)}
.bus-ghost{position:absolute;left:0;top:0;z-index:5;pointer-events:none;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--txt);background:rgba(20,24,34,.95);border:1px solid rgba(var(--accent-rgb),.55);border-radius:6px;padding:3px 8px;white-space:nowrap;box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 14px rgba(var(--accent-rgb),.25);opacity:0;transition:opacity .25s var(--ease-out-brand)}
.bus-ghost.on{opacity:1}
.bus-flash{position:absolute;z-index:4;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.4),transparent 65%);opacity:0;pointer-events:none}
.bus-flash.go{animation:busFlash .7s var(--ease-out-brand)}
@keyframes busFlash{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
/* ════ DESANIDAR · guiño en dos actos (rueda contextual → splice → explosión) ════ */
.unnest-vignette{margin-top:22px;max-width:460px}
@media(max-width:900px){.unnest-vignette{margin-left:auto;margin-right:auto}}
.un-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:900px){.un-actions{justify-content:center}}
svg.u2-lock{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:4px}
.min-gold{color:var(--gold-2);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ════ PROYECTO · la rueda vela (sello-sol) + mención de Recopilar ════ */
.sun-seal{width:15px;height:15px;flex:0 0 auto;border-radius:50%;align-self:center;background:radial-gradient(circle at 45% 38%,#FFE9C2,var(--gold) 55%,var(--gold-deep));box-shadow:0 0 12px rgba(var(--accent-rgb),.55)}
html.motion-full .sun-seal{animation:busSeal 5.5s ease-in-out infinite}
.coda-mention{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px;max-width:52ch}
.coda-mention strong{color:var(--dim)}
#proyecto .e7-grid{padding:0;max-width:none}
/* ════ WIDGET VINCULAR MEDIOS · mini-réplica del panel (altura CONSTANTE entre estados) ════ */
.vmc{background:linear-gradient(180deg,#12151d,#0b0d13);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 26px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;font-size:13px}
.vmc-head{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.vmc-chain svg{width:60px;height:24px;fill:none;stroke-width:2;stroke-linecap:round}
.vmc-chain .vc-l{stroke:#e74c3c}
.vmc-chain .vc-r{stroke:var(--gold)}
.vmc-chain .vc-dash{stroke:#5d6575;stroke-dasharray:3 4}
html.motion-full .vmc-chain .vc-dash{animation:vcDash 1.1s linear infinite}
@keyframes vcDash{to{stroke-dashoffset:-14}}
.vmc.linked .vmc-chain .vc-l{stroke:var(--gold);transition:stroke .6s var(--ease-out-brand)}
.vmc.linked .vmc-chain .vc-dash{stroke:var(--gold);stroke-dasharray:none;transition:stroke .6s var(--ease-out-brand)}
.vmc.linked .vmc-chain{filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.5))}
.vmc-title{display:block;font-weight:700;font-size:13.5px;color:var(--txt)}
.vmc-desc{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.vmc-bin{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:14px 15px;min-height:132px;align-content:start}
.vclip{position:relative;height:26px;border-radius:5px;display:flex;align-items:center;padding:0 6px;overflow:hidden;background:rgba(231,76,60,.12);box-shadow:inset 0 0 0 1px rgba(231,76,60,.4);transition:background .35s var(--ease-out-brand),box-shadow .35s var(--ease-out-brand),transform .35s var(--ease-out-brand)}
.vclip .vc-name{font-family:ui-monospace,Consolas,monospace;font-size:8.5px;color:#e3a9a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vclip .vc-dot{position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:#e74c3c}
.vclip.ext .vc-dot{background:#e8b42e}
.vclip.ping{background:rgba(231,76,60,.22)}
.vclip.ok{background:rgba(62,196,109,.14);box-shadow:inset 0 0 0 1px rgba(62,196,109,.5)}
.vclip.ok .vc-name{color:#8fdcab}
.vclip.ok .vc-dot{background:#3ec46d}
.vclip.pop{animation:vcPop .34s var(--ease-out-brand)}
@keyframes vcPop{0%{transform:scale(1)}42%{transform:scale(1.14)}100%{transform:scale(1)}}
.vmc-strip{min-height:40px;padding:0 15px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.vmc-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.vmc-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--gold-2),var(--gold));width:0;transition:width .3s linear}
.vmc-bar.tri i{background:linear-gradient(90deg,#3ec46d 0 87.5%,#e74c3c 87.5% 100%)}
.vmc-bar.indet i{width:20%!important;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
html.motion-full .vmc-bar.indet i{animation:vcIndet 1.1s ease-in-out infinite}
@keyframes vcIndet{0%{left:-20%}100%{left:100%}}
.vmc-msg{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;min-height:1.3em}
.vmc-msg b{color:var(--gold-2);font-weight:700}
.vmc-ribbon{margin:0 15px;padding:8px 11px;border-radius:8px;background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.28);font-size:11.5px;color:#e3a9a3}
.vmc-ribbon.ok{background:rgba(62,196,109,.08);border-color:rgba(62,196,109,.3);color:#8fdcab}
.vmc-chips{display:flex;gap:8px;flex-wrap:wrap;padding:2px 15px 0}
.vmc-fchip{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line-2);cursor:pointer;font-size:11.5px;color:var(--dim);transition:border-color .25s var(--ease-out-brand),background .25s var(--ease-out-brand),color .25s var(--ease-out-brand)}
.vmc-fchip:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--txt)}
.vmc-fchip svg{width:14px;height:14px;fill:none;stroke:var(--gold-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.vmc-fchip .vf-path{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--txt)}
.vmc-fchip .vf-tag{font-size:10px;color:var(--faint)}
.vmc-fchip.bad{border-color:rgba(231,76,60,.4);animation:vcShake .4s}
@keyframes vcShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.vmc-actions{display:flex;gap:9px;flex-wrap:wrap;padding:12px 15px;min-height:60px;align-items:center}
.vmc-btn{font:inherit;font-weight:600;font-size:12.5px;border-radius:9px;padding:9px 15px;cursor:pointer;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--dim);transition:all .2s var(--ease-out-brand)}
.vmc-btn:hover{color:var(--txt);border-color:rgba(var(--accent-rgb),.4)}
.vmc-btn.primary{color:#20150a;background:linear-gradient(180deg,#ffd489,var(--gold));border-color:transparent;box-shadow:0 6px 18px rgba(var(--accent-rgb),.28)}
.vmc-btn.primary:hover{color:#20150a;filter:brightness(1.05)}
.vmc-btn.ghost{opacity:.75}
.vmc-btn.auto-press{animation:vcAutoPress .5s var(--ease-out-brand)}
@keyframes vcAutoPress{0%,100%{box-shadow:0 6px 18px rgba(var(--accent-rgb),.28)}50%{box-shadow:0 6px 18px rgba(var(--accent-rgb),.28),0 0 0 6px rgba(var(--accent-rgb),.22)}}
.vmc-rider{padding:9px 15px;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint);margin:0}
@media(max-width:480px){.vmc-bin{grid-template-columns:repeat(8,1fr);gap:3px}.vclip{height:22px;padding:0 3px}.vclip .vc-name{display:none}}
/* ════ PORTADA · el gesto literal bajo la tag ════ */
.portada-gesto{color:var(--dim);font-size:clamp(15px,1.9vw,19px);margin-top:14px;max-width:34ch}
.portada-gesto::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:2px;background:radial-gradient(circle at 45% 38%,#FFE9C2,var(--gold) 60%,var(--gold-deep));box-shadow:0 0 8px rgba(var(--accent-rgb),.6)}
@media(max-width:880px){.portada-gesto{margin-inline:auto}}
/* ════ ACCESO · suma estática + honeypot ════ */
.sum-line{color:var(--dim);font-size:14.5px;margin-bottom:14px}
.sum-line strong{color:var(--gold-2)}
.hp-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
/* la .st2 conserva su ancho máximo aunque el deck aplique --fit a los hijos de escena (gana en especificidad) */
#stage > .scene > .st2{max-width:1120px}

/* ════ escenas ════ */
main{position:relative;z-index:1}
.scene{position:relative;padding:calc(var(--nav-h) + 28px) 0 56px}
.stage{max-width:1080px;margin:0 auto;padding:0 22px}
.stage.center{text-align:center}
@media(max-width:380px){.stage{padding:0 16px}}
.pin-wrap{padding:0;height:calc(var(--pin,2) * 100svh)}
@supports not (height:100svh){.pin-wrap{height:calc(var(--pin,2) * var(--vhpx))}}
.pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 16px) 0 calc(var(--band-c) + 16px)}
@supports not (height:100svh){.pin{min-height:var(--vhpx)}}
.pin>.stage{width:100%}

/* ── E1 · hero con la rueda-sol ── */
#e1{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden;overflow:clip}
.stage-e1{position:relative;width:100%}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;text-align:center}}
#claim .line{display:block;background:linear-gradient(96deg,#fff 10%,var(--gold-2) 70%,var(--gold));-webkit-background-clip:text;background-clip:text;color:var(--gold-2);-webkit-text-fill-color:transparent}
html.motion-ok #claim .line{opacity:0;transform:translateY(28px);animation:lineIn .7s var(--slow) forwards}
html.motion-ok #claim .line:nth-child(2){animation-delay:.18s}
@keyframes lineIn{to{opacity:1;transform:none}}
.sub{margin:18px 0 22px;color:var(--dim);font-size:clamp(15px,2vw,19px);max-width:44ch}
@media(max-width:880px){.sub{margin-inline:auto}}
.hint{color:var(--faint);font-size:14px;display:flex;align-items:center;gap:8px}
@media(max-width:880px){.hint{justify-content:center}}
html.motion-full .hint-arrow{display:inline-block;animation:bob 2.2s var(--slow) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.return-link{margin-top:12px;font-size:13px}
.return-link a{color:var(--faint);text-decoration:underline;text-underline-offset:3px}
/* la rueda asoma como un sol en el horizonte */
.hero-vis{position:relative;perspective:1100px;display:flex;justify-content:center}
.sun-crest{position:relative;width:min(430px,82vw);aspect-ratio:1;overflow:visible;transform-style:preserve-3d;transition:transform .25s var(--ease);will-change:transform}
html:not(.motion-ok) .sun-crest{transition:none}
.sun-crest canvas{width:100%;height:100%;position:absolute;left:0;top:0;display:block}
.sun-halo{position:absolute;left:50%;top:46%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,178,62,.30),rgba(109,74,255,.08) 55%,transparent 72%);pointer-events:none}
html.motion-full .hw-breath{transform-box:fill-box;transform-origin:center;animation:breath 5.5s var(--slow) infinite}
@keyframes breath{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.12);opacity:1}}
html.motion-ok .hw-sector{opacity:0;transform-box:fill-box;transform-origin:center;animation:secIn .8s var(--slow) forwards;animation-delay:calc(.25s + var(--i) * .09s)}
@keyframes secIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.horizon-glow{position:absolute;left:-8%;right:-8%;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 26px 5px rgba(var(--accent-rgb),.4)}
.stars{position:absolute;inset:-40px -22px;z-index:0;pointer-events:none;background-image:
  radial-gradient(1.5px 1.5px at 12% 20%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(1px 1px at 80% 12%,rgba(255,255,255,.3),transparent 60%),
  radial-gradient(1.2px 1.2px at 60% 45%,rgba(255,216,154,.3),transparent 60%),
  radial-gradient(1px 1px at 30% 70%,rgba(255,255,255,.22),transparent 60%),
  radial-gradient(1.4px 1.4px at 92% 60%,rgba(156,123,255,.3),transparent 60%)}

/* ── E2 · el caos → previa de audio INTERACTIVA ── */
.cold-windows{position:relative;height:60px;margin-bottom:4px}
.cwin{position:absolute;top:calc((var(--d) - 1) * 15px);left:calc((var(--d) - 1) * 11%);background:#10141D;border:1px solid #283042;border-radius:8px;color:#7C8AA4;font-size:13px;padding:7px 14px;transform:translateY(calc(var(--p,0) * (var(--d) * -12px)))}
.finder{max-width:560px;margin:20px 0 8px;padding:14px;font-size:14px}
.finder-head{display:flex;align-items:center;gap:8px;color:var(--gold-2);font-weight:600;padding:2px 2px 10px;border-bottom:1px solid var(--line)}
.finder-hint{margin-left:auto;color:var(--faint);font-weight:400;font-size:12.5px}
.finder-rows{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.frow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid transparent;border-radius:10px;padding:9px 12px;color:var(--txt);font:inherit;font-size:14px;cursor:pointer;text-align:left;width:100%;transition:border-color .15s,background .15s}
.frow:hover,.frow.playing{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.06)}
.f-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wv{display:inline-flex;align-items:center;gap:2px;height:18px}
.wv i{width:2.5px;height:30%;border-radius:2px;background:var(--gold-deep);opacity:.55}
.frow:hover .wv i,.frow.playing .wv i{opacity:1;background:var(--gold)}
html.motion-full .frow:hover .wv i,html.motion-full .frow.playing .wv i{animation:wvb .55s ease-in-out infinite alternate;animation-delay:calc(var(--j,0) * .05s)}
@keyframes wvb{from{transform:scaleY(.5)}to{transform:scaleY(2.4)}}
.ramp{margin-top:28px;font-size:clamp(16px,2.1vw,20px);max-width:48ch}

.check-chip{position:fixed;z-index:230;background:rgba(10,12,18,.95);border:1px solid rgba(var(--accent-rgb),.6);color:var(--gold);font-weight:700;font-size:14px;border-radius:999px;padding:6px 14px;pointer-events:none;box-shadow:var(--halo)}

/* ── E4 · demo ── */
/* #stacks es ahora una escena normal (la demo jugable se mudó a #juega); su contenedor es .stk-wrap */
.stk-wrap,.juega-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
#stacks h2{font-size:clamp(26px,4.6vw,44px)}
#lienzo{position:relative;height:min(64vh,500px);height:min(64svh,500px);margin-top:8px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(max-height:620px){#lienzo{height:56vh;height:56svh}}
@media(pointer:coarse){#lienzo{height:min(58vh,440px);height:min(58svh,440px)}}
#lienzo.locked{touch-action:none}
#lienzo.dropping{cursor:grabbing}
#lienzo-invite{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:5;text-align:center;pointer-events:none;background:rgba(7,8,13,.78);border:1px solid var(--line-2);border-radius:14px;padding:14px 22px;transition:opacity .3s}
#lienzo-invite.done,#lienzo.playing #lienzo-invite{opacity:0}
#lienzo-invite p{font-size:15px;font-weight:600;color:var(--txt)}
.invite-note{color:var(--faint);font-weight:400;font-size:13px}
.invite-touch{display:none}
html.touch .invite-desktop{display:none}
html.touch .invite-touch{display:block}
#reader-chip{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:12;background:rgba(10,12,18,.95);border:1px solid rgba(var(--accent-rgb),.55);color:var(--gold-2);font-size:15px;font-weight:700;border-radius:999px;padding:6px 16px;pointer-events:none}
#snd{position:absolute;right:10px;top:10px;z-index:6;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;display:grid;place-items:center}
#snd[aria-pressed="true"]{border-color:var(--gold);box-shadow:var(--halo);color:var(--gold-2)}
#snd svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#snd .snd-on{display:none}
#snd.on .snd-on{display:block}
#snd.on .snd-off{display:none}
/* STACKS · cabecera 2-col (copy izq · vídeos reales der); la demo jugable queda intacta a ancho completo */
#stacks .stk-head{padding:0;margin:0 auto 16px;align-items:center}
#stacks .stk-head h2{font-size:clamp(26px,3.8vw,44px);margin-bottom:12px}
.stk-note{color:var(--dim);font-size:15px;line-height:1.6;margin-top:2px;max-width:56ch}
.stk-note strong{color:var(--txt)}
#stacks .stk-vids{display:grid;grid-template-columns:1fr;gap:12px;align-content:center}
@media(max-width:900px){#stacks .stk-vids{grid-template-columns:1fr;max-width:420px;margin:0 auto}.stk-note{margin-left:auto;margin-right:auto}}
#stacks .st-vid .st-vid-cap{font-size:11.5px}
#stacks .st-vid::before{font-size:9px;top:58%}
#stacks .st-vid .st-vid-play{width:38px;height:38px}
/* ── anatomía de los 3 stacks (tarjetas) ── */
.stk-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media(max-width:760px){.stk-tres{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
.stk-card{background:var(--panel,#0e1118);border:1px solid var(--line-2);border-radius:13px;padding:15px 16px;box-shadow:0 14px 34px rgba(0,0,0,.34)}
.stk-card-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.stk-glyph{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.stk-card-h b{font-size:14.5px;color:var(--txt);font-weight:700}
.stk-pc{margin-left:auto;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.stk-mini{display:flex;flex-direction:column;gap:3px;padding:7px;border-radius:8px;background:#131620;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.stk-row{position:relative;height:13px;border-radius:3px;background:rgba(255,255,255,.03)}
.stk-row.is-a{height:11px}
.stk-mini .mp{position:absolute;top:1px;bottom:1px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.mp.video{background:#3D5A75}.mp.title{background:#6A5A8C}.mp.sfx,.mp.audio{background:#2D5E50}.mp.adj{background:#7A5E2E}
.stk-cap{margin:11px 0 0;font-size:12.5px;color:var(--dim);line-height:1.4}
.stk-fwd{margin-top:16px;text-align:center;font-size:13.5px;color:var(--faint)}
/* Rediseño Stacks (canvas fusión): el bloque .stk-tres de arriba queda superseded -> purgar en limpieza */
.stk-anim{position:relative;height:clamp(300px,40vw,360px);max-width:1120px;margin:12px auto 0;border-radius:16px;border:1px solid var(--line-2);overflow:hidden;background:radial-gradient(130% 130% at 50% 40%,#151a25,#0a0d14 72%);box-shadow:0 16px 40px rgba(0,0,0,.42)}
.stk-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ── estación JUEGA (cabecera + brutos + hitos + rider) ── */
.juega-head{text-align:center;margin-bottom:6px}
.juega-head h2{font-size:clamp(22px,3.2vw,34px);margin-bottom:4px}
.juega-lead{max-width:64ch;margin:0 auto;color:var(--dim)}
.juega-foot{margin-top:8px;text-align:center}
.juega-hitos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.hito{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--dim);border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;transition:color .4s var(--ease-out-brand),border-color .4s var(--ease-out-brand),background .4s var(--ease-out-brand)}
.hito svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.hito.done{color:#20150a;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:transparent;box-shadow:0 0 10px rgba(var(--accent-rgb),.35)}
.hito.done svg{opacity:1}
.hito.aside{opacity:.7;border-style:dashed}
.hito-sep{width:1px;height:16px;background:var(--line-2);margin:0 3px}
.hito-count{font-size:11px;color:var(--gold-2);font-variant-numeric:tabular-nums;font-weight:700;margin-right:4px}
.juega-rider{max-width:70ch;margin:12px auto 0;text-align:center;font-size:11px;line-height:1.5}
#juega .micro-cta{text-align:center;margin-top:10px}
/* ── MÓVIL/táctil · la demo interactiva (editor NLE + rueda de precisión) no se conduce con un dedo →
      se sustituye por el VÍDEO REAL de uso (mismo componente «Uso real»). Señal = pointer:coarse,
      la misma que ya usan #dock/#constellation. El editor sigue en el DOM (oculto), no se toca en desktop. ── */
#juega-video{display:none;max-width:560px;margin:12px auto 0}
@media(pointer:coarse){#juega #pgm-row,#juega #lienzo,#juega .juega-foot{display:none}#juega-video{display:block}}
/* MONITOR DE PROGRAMA (como Premiere) — compacto para no estrangular el --fit */
/* ═══ fila del editor: [ Proyecto | Monitor | Controles | Chuleta ] — como Premiere ═══ */
#pgm-row{display:flex;gap:11px;align-items:stretch;justify-content:center;flex-wrap:nowrap;width:100%;max-width:min(98%,1160px);height:250px;margin:0 auto 10px}
#pgm-row>*{min-height:0}   /* nowrap + min-height:0 → stretch limita cada panel a la altura de la fila (210) y scrollean por dentro */
/* — monitor de programa (compositor por capas) — */
#pgm{flex:0 0 420px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#0a0c12;border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.5)}
#pgm-head{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:#12151d;border-bottom:1px solid var(--line);flex:0 0 auto}
.pgm-lb{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#pgm-tc{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#3FA2FF;font-variant-numeric:tabular-nums}
#pgm-screen{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}
.pgm-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;transition:filter .28s var(--ease-out-brand),transform .4s var(--ease-out-brand)}
#pgm.empty #pgm-screen::after{content:"Sin vídeo bajo el cabezal";position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:11px;letter-spacing:.03em}
html[lang="en"] #pgm.empty #pgm-screen::after{content:"No video under the playhead"}
/* — panel Proyecto (izquierda) — */
#proj{flex:0 0 190px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#0a0c12;border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.proj-head{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#12151d;border-bottom:1px solid var(--line);font-size:11px;color:var(--dim);flex:0 0 auto}
.proj-head b{color:var(--gold);font-weight:700}
.proj-dot{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9C2,#FFB23E 60%,#E08A1E);box-shadow:0 0 6px rgba(var(--accent-rgb),.7)}
.proj-scroll{flex:1;min-height:0;overflow-y:auto;padding:5px 6px 10px}
.proj-cat{margin-top:6px}
.proj-cat-h{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:2px 4px}
.pc-ic{color:var(--gold-2)}
.pc-n{margin-left:auto;font-weight:600}
.proj-items{display:flex;flex-direction:column;gap:3px}
.proj-item{display:flex;align-items:center;gap:7px;width:100%;padding:3px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid transparent;cursor:grab;text-align:left;font:inherit;transition:background .15s,border-color .15s}
.proj-item:hover{background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.35)}
.proj-item:active{cursor:grabbing}
.proj-thumb{flex:0 0 auto;width:36px;height:22px;border-radius:3px;overflow:hidden;background:#05070c;display:grid;place-items:center}
.pt-img{width:100%;height:100%;object-fit:cover;display:block}
.pt-aud{color:var(--gold);display:grid;place-items:center}.pt-aud svg{width:16px;height:16px;display:block}.pt-aud.sfx{color:#EC6A9C}
.proj-meta{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.proj-name{font-size:11px;color:#DDE3EE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-tag{font-size:8.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
/* — controles de efectos — */
#fxc{flex:0 1 212px;min-width:158px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#0a0c12;border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.fxc-head{padding:6px 12px;background:#12151d;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;color:var(--dim);letter-spacing:.02em;flex:0 0 auto}
.fxc-body{flex:1;min-height:0;overflow-y:auto;padding:11px 12px;font-size:11.5px;color:#C7CEDA;display:flex;flex-direction:column;gap:8px}
#fxc.empty .fxc-body{justify-content:center}
.fxc-hint{color:var(--faint);font-size:10.5px;line-height:1.55;margin:0}
.fxc-multi{color:var(--gold-2);font-weight:600;margin:0}
.fxc-clip{color:#fff;font-weight:600;margin:0}
.fxc-none{color:var(--faint);font-size:10.5px;line-height:1.55;margin:0}
.fxc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.fxc-list li{display:flex;align-items:center;gap:7px;color:#E4C98A;font-weight:500}
.fxc-n{flex:0 0 auto;width:16px;height:16px;border-radius:4px;background:rgba(var(--accent-rgb),.16);color:var(--gold);font-size:9.5px;font-weight:700;display:grid;place-items:center}
.fxc-lb{flex:1;min-width:0}
.fxc-x{flex:0 0 auto;width:18px;height:18px;border-radius:4px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--faint);font-size:13px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.fxc-x:hover{color:#fff;border-color:var(--red);background:rgba(229,72,77,.18)}
.fxc-clear{margin-top:2px;padding:6px 8px;border-radius:6px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--dim);font:inherit;font-size:10.5px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.fxc-clear:hover{color:#fff;border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.1)}
/* — chuleta / leyenda (estilo distinto a propósito: nota con filo punteado y chips de tecla) — */
#legend{flex:0 1 202px;min-width:162px;display:flex;flex-direction:column;border-radius:10px;overflow:visible;background:linear-gradient(180deg,rgba(255,178,62,.08),rgba(255,178,62,.02));border:1px dashed rgba(var(--accent-rgb),.42);box-shadow:0 10px 26px rgba(0,0,0,.35)}
#legend .lg-head{border-radius:10px 10px 0 0}
.lg-head{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px dashed rgba(var(--accent-rgb),.3);font-size:11px;font-weight:700;color:var(--gold);flex:0 0 auto}
.lg-pin{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
.lg-title{flex:1}
.lg-q{position:relative;width:18px;height:18px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.5);background:transparent;color:var(--gold);font-size:11px;font-weight:700;cursor:help;display:grid;place-items:center;flex:0 0 auto}
.lg-tip{position:absolute;top:122%;right:0;width:212px;padding:9px 11px;background:#0b0e16;border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.6);font-size:10.5px;font-weight:400;line-height:1.5;color:var(--dim);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s;z-index:10;text-align:left;letter-spacing:0;pointer-events:none}
.lg-q:hover .lg-tip,.lg-q:focus-within .lg-tip{opacity:1;visibility:visible;transform:translateY(0)}
.lg-list{list-style:none;margin:0;padding:8px 10px;overflow-y:auto;min-height:0;flex:1;display:flex;flex-direction:column;gap:6px}
.lg-list li{display:flex;align-items:flex-start;gap:7px;font-size:10.5px;color:var(--dim);line-height:1.35}
.lg-list b{color:#E9EDF4;font-weight:600}
.lg-k{flex:0 0 auto;min-width:54px;text-align:center}
.lg-k.is-kbd{font-family:ui-monospace,Consolas,monospace;font-size:9.5px;color:var(--gold);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);border-radius:4px;padding:2px 4px}
.lg-k.is-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-2);padding-top:2px}
.lg-t{flex:1}
@media(max-width:760px){#pgm-row{height:auto;flex-wrap:wrap}#proj,#pgm,#fxc,#legend{flex:1 1 100%;min-width:0}#pgm{min-height:184px}#proj .proj-scroll{max-height:220px}}
/* ── teasers de la galaxia: microtextos que asoman por DETRÁS del editor cada 20s ── */
#stage #juega > .teaser-layer{position:absolute;inset:0;z-index:0;transform:none;pointer-events:none;overflow:visible}
#stage #juega .juega-wrap{position:relative;z-index:1}
.tz{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:'Switzer',system-ui,sans-serif;font-weight:700;font-size:clamp(15px,1.55vw,24px);letter-spacing:.01em;background:linear-gradient(92deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:var(--gold);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 16px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(var(--accent-rgb),.4));opacity:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.tz:active{cursor:grabbing}
.tz.go{animation:tzFloat 10s ease-in-out forwards}
@keyframes tzFloat{0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) rotate(0) scale(.92)}15%{opacity:.92}78%{opacity:.92}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0)) scale(1.04)}}
html:not(.motion-ok) .tz.go{animation:none;opacity:.9}
#stage-tl{position:absolute;left:10px;right:10px;bottom:12px;top:64px;display:flex;flex-direction:column;gap:5px}
#stage-tl.flash{animation:stFlash .5s}
@keyframes stFlash{30%{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.8),0 0 40px rgba(var(--accent-rgb),.4)}}
#stage-tl .tl-row{background:rgba(255,255,255,.035);border-radius:4px}
#stage-tl .tl-clip{border-radius:4px;font-size:10px;color:#DFE5F0;display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap}
/* la capa de la rueda tapa la timeline (z8) → SOLO captura punteros cuando la rueda está ABIERTA;
   cerrada = pe:none para que los clics lleguen a los clips/tiradores (selección, drag, trim) y al invoke-btn */
#wheel-layer{position:absolute;inset:0;z-index:8;pointer-events:none}
#lienzo.wheel-open #wheel-layer{pointer-events:auto}
#press-ring{position:absolute;z-index:9;width:54px;height:54px;border-radius:50%;border:2.5px solid rgba(var(--accent-rgb),.9);transform:translate(-50%,-50%) scale(.6);opacity:0}
#press-ring.arming{opacity:1;transition:transform .35s linear;transform:translate(-50%,-50%) scale(1)}
#invoke-btn{position:absolute;left:10px;top:10px;z-index:6;font-size:13px;min-height:38px;padding:7px 14px}
.post-action{margin-top:12px;font-size:15px;color:var(--gold-2);font-weight:600}
/* la rueda */
.dw{position:absolute;width:min(330px,84vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(.62);opacity:0;transition:transform .18s var(--slow),opacity .15s;z-index:10}
.dw.open{transform:translate(-50%,-50%) scale(1);opacity:1}
html:not(.motion-ok) .dw{transition:none}
.dw svg{width:100%;height:100%;overflow:visible}
.dw-sec{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .16s var(--ease)}
.dw-sec.hot{transform:translate(var(--px,0),var(--py,0)) scale(1.03)}
.dw-sec:hover{transform:translate(var(--px,0),var(--py,0)) scale(1.03)}
.dw-sec.dimmed:hover{transform:none}
.dw-sec .secfill{fill:rgba(16,19,28,.66);stroke:rgba(var(--accent-rgb),.45);stroke-width:1.4;transition:fill .15s,stroke .15s}
.dw-sec.hot .secfill,.dw-sec:hover .secfill{fill:rgba(var(--accent-rgb),.14);stroke:rgba(var(--accent-rgb),.95)}
.dw-sec.dimmed{opacity:.32;pointer-events:none}
.dw-sec text{font-family:'Montserrat',var(--font);font-size:12.5px;font-weight:600;fill:var(--txt);text-anchor:middle;pointer-events:none}
.dw-sec .glyph{color:var(--gold);pointer-events:none}
.dw-sec.hot .glyph{color:var(--gold-2)}
.dw-hub{cursor:pointer}
.dw-cap{position:absolute;z-index:14;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-weight:800;font-size:12px;border-radius:9px;padding:8px 13px;box-shadow:0 8px 26px rgba(255,178,62,.45);transform:translate(-50%,-50%);pointer-events:none}
.dw-cap.grabbed{box-shadow:0 14px 38px rgba(255,178,62,.6);transform:translate(-50%,-50%) scale(1.06)}
html.motion-ok .dw-cap.fly{transition:left .5s var(--slow),top .5s var(--slow)}
.subchips{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:13;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94%}
.chipb{background:rgba(10,12,18,.94)!important}
.chipb .wv{margin-left:8px}
.chipb .wv i{width:2px;background:var(--gold)}

/* ── HZ · viaje horizontal (Stacks → la anidada) ── */
.hz .pin{overflow:hidden;overflow:clip;align-items:center}
.hz-rail{position:absolute;top:calc(var(--nav-h) + 18px);left:22px;right:22px;display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;z-index:3}
.hz-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.6) calc(var(--tp,0) * 100%),var(--line) calc(var(--tp,0) * 100%))}
.hz-track{display:flex;gap:10vw;width:max-content;transform:translateX(calc(var(--tp,0) * var(--hzshift,0px)));will-change:transform}
html:not(.motion-full) .hz-track{transform:none;flex-direction:column;width:auto;gap:60px;padding:0 22px!important}
.hz-panel{width:min(86vw,640px);flex:0 0 auto}
.badge-gold{display:inline-block;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:4px 12px;margin-bottom:14px}

/* ══ SECCIÓN DE PRECIOS · Acceso Fundador (portada del mockup aprobado) ══ */
.px-head{text-align:center; margin-bottom:24px}
.px-eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); padding:6px 14px; border-radius:999px; border:1px solid rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.06)}
.px-h2{font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.06; margin:16px auto 10px; max-width:20ch; text-wrap:balance}
.px-h2 em{font-style:normal; color:var(--gold)}
.px-sub{color:var(--dim); font-size:clamp(15px,1.9vw,17px); max-width:52ch; margin:0 auto}
.px-sub b{color:var(--txt)}
.inc{margin:28px 0 12px; padding:22px 24px 20px; border-radius:18px; background:linear-gradient(180deg,rgba(20,24,34,.6),rgba(11,13,20,.72)); box-shadow:var(--glass-sheen),0 0 0 1px var(--line)}
.inc-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.inc-h b{font-size:16px; font-weight:800} .inc-h span{font-size:13px; color:var(--gold-2); font-weight:700}
.inc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 22px}
@media(max-width:760px){.inc-grid{grid-template-columns:1fr}}
.feat{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start}
.feat svg{margin-top:2px; color:var(--gold)}
.feat b{font-weight:700; font-size:14px} .feat i{display:block; font-style:normal; color:var(--faint); font-size:12.5px; margin-top:1px}
.inc-foot{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dim); text-align:center}
.inc-foot b{color:var(--gold-2)}
.proof{text-align:center; margin:14px 0 22px; font-size:13.5px; color:var(--faint)} .proof b{color:var(--txt)}
.plans{display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:14px; align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr; max-width:420px; margin:0 auto}}
.plan{position:relative; display:flex; flex-direction:column; padding:24px 22px; border-radius:20px; background:linear-gradient(180deg,rgba(18,22,32,.62),rgba(10,12,19,.8)); box-shadow:var(--glass-sheen),0 14px 40px rgba(0,0,0,.4),0 0 0 1px var(--line); transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.plan:hover{transform:translateY(-3px)}
.plan.decoy{opacity:.9}
.plan.hero{background:linear-gradient(180deg,rgba(30,26,16,.72),rgba(13,12,15,.86)); transform:translateY(-8px); box-shadow:var(--glass-sheen),0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(var(--accent-rgb),.55),0 0 30px rgba(var(--accent-rgb),.13)}
.plan.hero:hover{transform:translateY(-12px)}
@media(max-width:900px){.plan.hero{transform:none} .plan.hero:hover{transform:translateY(-3px)}}
.plan.founder{background:linear-gradient(180deg,rgba(24,20,34,.72),rgba(12,11,18,.86)); box-shadow:var(--glass-sheen),0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(156,123,255,.42),0 0 26px rgba(109,74,255,.12)}
.plan .badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 13px; border-radius:999px; white-space:nowrap}
.badge.best{color:#241500; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 4px 14px rgba(var(--accent-rgb),.4)}
.badge.scarce{color:#fff; background:linear-gradient(180deg,var(--corona-2),var(--corona)); box-shadow:0 4px 14px rgba(109,74,255,.4)}
.p-name{font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--txt)}
.p-job{font-size:12.5px; color:var(--faint); margin:3px 0 16px; min-height:32px}
.plan.hero .p-name{color:var(--gold-2)} .plan.founder .p-name{color:var(--corona-2)}
.p-price{display:flex; align-items:flex-end; gap:8px; line-height:.9}
.p-now{font-size:clamp(2.2rem,5vw,2.9rem); font-weight:800; letter-spacing:-.03em}
.p-per{color:var(--faint); font-size:14px; font-weight:600; padding-bottom:7px}
.p-anchor{display:flex; align-items:center; gap:9px; margin:9px 0 2px; min-height:20px; flex-wrap:wrap}
.p-old{color:var(--faint); text-decoration:line-through; text-decoration-color:var(--red); font-size:15px; font-weight:600}
.p-tagpr{font-size:11.5px; font-weight:800; color:var(--green); background:rgba(62,196,109,.12); border:1px solid rgba(62,196,109,.3); padding:2px 8px; border-radius:999px}
.p-sub{font-size:12.5px; color:var(--dim); margin-top:4px} .p-sub b{color:var(--txt)}
.p-day{font-size:12px; color:var(--gold-2); margin-top:6px; font-weight:600}
.p-delta{margin:16px 0 0; padding-top:15px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; flex:1}
.p-delta .d{display:grid; grid-template-columns:17px 1fr; gap:9px; font-size:13px; color:var(--dim); align-items:start}
.p-delta .d svg{margin-top:2px; color:var(--gold)} .plan.founder .p-delta .d svg{color:var(--corona-2)}
.p-delta .d b{color:var(--txt); font-weight:700} .p-cloud{font-weight:800; color:var(--txt)}
.d-head{font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-2); margin-bottom:2px}
.plan.founder .d-head{color:var(--corona-2)}
.scarce-box{margin-top:14px}
.scarce-lbl{display:flex; justify-content:space-between; font-size:11.5px; color:var(--corona-2); font-weight:700; margin-bottom:6px}
.scarce-bar{height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden}
.scarce-bar i{display:block; height:100%; width:63%; border-radius:999px; background:linear-gradient(90deg,var(--corona),var(--corona-2)); box-shadow:0 0 10px rgba(109,74,255,.5)}
.p-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; width:100%; min-height:48px; padding:12px 18px; border-radius:999px; font-weight:800; font-size:14.5px; cursor:pointer; text-decoration:none; border:0; transition:transform .15s var(--ease)}
.p-cta.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#241500; box-shadow:0 8px 24px rgba(var(--accent-rgb),.28),inset 0 1px 0 rgba(255,255,255,.4)}
.p-cta.ghost{background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--txt)}
.p-cta.violet{background:linear-gradient(180deg,var(--corona-2),var(--corona)); color:#fff; box-shadow:0 8px 24px rgba(109,74,255,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.p-cta:hover{transform:translateY(-2px)}
.p-guar{margin:10px 0 0; text-align:center; font-size:11.5px; color:var(--faint)} .p-guar b{color:var(--dim)}
.tnum{font-variant-numeric:tabular-nums}
.px-urgency{margin:26px auto 0; text-align:center; font-size:13.5px; color:var(--gold-2); font-weight:600; max-width:52ch} .px-urgency b{color:var(--txt)}
.cmp{max-width:780px; margin:24px auto 0; border-radius:14px; background:linear-gradient(180deg,rgba(18,22,32,.5),rgba(10,12,19,.6)); box-shadow:0 0 0 1px var(--line)}
.cmp>summary{list-style:none; cursor:pointer; padding:14px 20px; font-size:13.5px; font-weight:700; color:var(--dim); display:flex; align-items:center; gap:9px}
.cmp>summary::-webkit-details-marker{display:none}
.cmp>summary::before{content:"▸"; color:var(--gold); transition:transform .2s var(--ease)}
.cmp[open]>summary::before{transform:rotate(90deg)}
.cmp-wrap{overflow-x:auto; padding:0 12px 14px}
.cmp table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:480px}
.cmp th,.cmp td{padding:9px 10px; text-align:center; border-top:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left; color:var(--dim)}
.cmp thead th{color:var(--faint); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.cmp thead th.hl{color:var(--gold)}
.cmp td b{color:var(--txt)} .cmp .yes{color:var(--green); font-weight:800} .cmp .no{color:var(--faint)}
/* ── Variante COMPACTA: teaser que cabe en una pantalla del deck (#acceso) ── */
.px-head-lite{margin-bottom:16px}
.px-head-lite .px-h2{margin:12px auto 8px; font-size:clamp(1.5rem,3.4vw,2.2rem)}
.px-head-lite .px-sub{font-size:14.5px; max-width:48ch}
.plans-lite{gap:12px; align-items:stretch}
.plans-lite .plan{padding:18px 17px 16px}
.plans-lite .plan.hero{transform:translateY(-6px)}
@media(max-width:900px){.plans-lite .plan.hero{transform:none}}
.plans-lite .p-price{margin-top:2px}
.plans-lite .p-now{font-size:clamp(1.9rem,4vw,2.4rem)}
.p-perks{list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; flex:1}
.p-perks li{position:relative; padding-left:20px; font-size:13px; color:var(--dim); line-height:1.35}
.p-perks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:900; font-size:12px}
.plan.founder .p-perks li::before{color:var(--corona-2)}
.p-perks li b{color:var(--txt); font-weight:700}
.p-foot{margin:13px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); text-align:center}
.plan.hero .p-foot{color:var(--gold-2); font-weight:600} .plan.founder .p-foot{color:var(--corona-2); font-weight:600}
.px-mini{margin:18px auto 2px; text-align:center; font-size:13px; color:var(--dim); max-width:58ch}
.px-mini b{color:var(--txt)}
.px-mini-urg{display:block; margin-top:6px; color:var(--gold-2); font-weight:600}
.btn-founder-cta{display:flex; width:fit-content; max-width:100%; margin-inline:auto; text-align:center}
.badges{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.badges .b{background:var(--glass-fill);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--txt);box-shadow:0 0 0 1px var(--line)}
.monitor{margin:16px 0 8px;padding:10px;max-width:500px}
.video-slot{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;background:#0A0D14;border-radius:10px;color:var(--faint);font-size:14px;border:1px dashed rgba(255,255,255,.14)}
.micro-cta{margin-top:14px;font-size:15px}

/* anidada (rejugable) */
.unnest-demo{position:relative;max-width:560px;height:64px;margin:20px 0 10px}
.nested-block{position:absolute;inset:8px 0;display:flex;align-items:center;gap:8px;justify-content:center;border-radius:8px;background:repeating-linear-gradient(45deg,#23262F 0 7px,#1B1E26 7px 14px);border:1px solid #3A4150;color:#9AA4B8;font-size:12px;font-weight:700;letter-spacing:.1em;transition:opacity .4s,transform .4s}
.unnest-clips{position:absolute;inset:8px 0;display:flex;gap:4%}
.uclip{flex:1;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:12px;opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease),transform .45s var(--slow)}
.uclip.c1{background:linear-gradient(180deg,rgba(255,178,62,.65),rgba(255,178,62,.3));box-shadow:0 0 0 1px var(--gold)}
.uclip.c2{background:linear-gradient(180deg,rgba(156,123,255,.6),rgba(156,123,255,.28));box-shadow:0 0 0 1px var(--corona-2)}
.uclip.c3{background:linear-gradient(180deg,rgba(62,196,109,.6),rgba(62,196,109,.28));box-shadow:0 0 0 1px var(--green)}
.fxb{background:rgba(0,0,0,.4);border-radius:4px;font-size:9px;font-weight:800;padding:2px 5px;color:var(--gold-2)}
html.motion-ok #anidada.boom .nested-block{opacity:0;transform:scale(1.05)}
#anidada.boom .uclip{opacity:1;transform:none}
#anidada.boom .uclip.c2{transition-delay:.12s}
#anidada.boom .uclip.c3{transition-delay:.24s}
html:not(.motion-ok) #anidada .nested-block{opacity:0}
html:not(.motion-ok) #anidada .uclip{opacity:1;transform:none}
#unnest-replay{font-size:13px;min-height:36px;padding:6px 14px}

/* ── E7 · la madrugada (portal de entrada) ── */
html.motion-ok #proyecto .pin.portal{clip-path:circle(calc((0.06 + min(var(--p,0) * 9, 1.5)) * 100%) at 50% 46%)}
#proyecto .stage{display:flex;flex-direction:column;gap:26px}
.h-hour{color:var(--red)}
.big-counter{display:flex;align-items:baseline;gap:14px;margin:4px 0}
#off-count{font-size:clamp(72px,17vw,170px);font-weight:800;letter-spacing:-.04em;color:var(--red);font-variant-numeric:tabular-nums;line-height:1;contain:layout paint;min-width:2ch}
#off-count.zero{color:var(--green)}
.bc-label{color:var(--dim);font-size:clamp(14px,2vw,18px)}
.e7-coda{opacity:calc(clamp(0,(var(--p,0) - .55) * 4,1));transform:translateY(calc((1 - clamp(0,(var(--p,0) - .55) * 4,1)) * 24px))}
html:not(.motion-ok) .e7-coda{opacity:1;transform:none}
.coda-bridge{font-size:clamp(16px,2.2vw,21px);max-width:46ch}
.rb-label{margin:12px 0 6px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--gold-2);font-variant-numeric:tabular-nums}
.render-bar{position:relative;height:34px;max-width:560px;overflow:hidden}
.rb-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transform:scaleX(var(--rb,0));transform-origin:left}
#celebrate{position:relative;height:0}
.cglyph{position:absolute;bottom:0;color:var(--gold);opacity:0}
html.motion-ok .cglyph{animation:cg 1.1s var(--slow) forwards}
@keyframes cg{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}

/* ── amanecer: tinta MUY oscura + relieve para legibilidad sobre oro ── */
.dawn{--txt:#1A0E00;--dim:#4A3A20;--faint:#6B5435;color:var(--txt)}
.dawn h2,.dawn .display-2{color:#1A0E00;text-shadow:0 1px 0 rgba(255,240,210,.45)}
.dawn .lead,.dawn p{text-shadow:0 1px 0 rgba(255,240,210,.3)}
#e8 .stage{padding-top:8vh}
.beat{height:34vh;height:34svh}
.total-line{font-size:clamp(20px,3.4vw,34px);font-weight:600}
.total-line strong{font-variant-numeric:tabular-nums}
.stakes{color:var(--dim);font-size:15px;margin-top:6px}
.turn{font-size:clamp(24px,4.4vw,44px);font-weight:800;letter-spacing:-.02em;margin-top:10vh;max-width:18ch}
#e8 .stage.center .turn{margin-inline:auto}
.brand-line{margin-top:18px;font-weight:600;letter-spacing:.04em}

/* ── E9 acceso ── */
#acceso{padding-top:40px}
.founder-card{max-width:660px;margin:0 auto;padding:34px 28px;--txt:#F3F5F9;--dim:#B4BDCE;--faint:#8B97AC;color:var(--txt)}
.founder-card h2{font-size:clamp(26px,4.6vw,42px);color:var(--txt);text-shadow:none}
.founder-card p,.founder-card .lead{text-shadow:none}
.launch-line{color:var(--dim);margin:8px 0 18px}
.launch-line strong{color:var(--gold)}
.offer{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.offer li{position:relative;padding-left:22px;color:var(--dim);font-size:15px;text-shadow:none}
.offer li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 7px var(--gold)}
.offer li strong{color:var(--txt)}
.colorpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cp-label{font-size:14px;color:var(--dim);flex-basis:100%;text-shadow:none}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;padding:0}
.swatch.on{border-color:#fff;transform:scale(1.12)}
.lead-form input[type=email]{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line-2);border-radius:999px;padding:14px 18px;color:var(--txt);font:inherit;font-size:15px;outline:none;margin-bottom:10px}
.lead-form input[type=email]:focus-visible{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.4);outline:none}
.lead-form .btn-gold{width:100%}
.form-note{margin-top:10px;font-size:13px;color:var(--faint);text-align:center;text-shadow:none}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:13px;color:var(--dim);cursor:pointer;line-height:1.5;text-shadow:none}
.consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--gold);flex:0 0 auto}
.consent a{color:var(--gold)}
.ok-state{text-align:center}
.ok-title{font-size:clamp(22px,3.6vw,30px);font-weight:800;color:var(--user-c,var(--gold));margin-bottom:10px}
.ok-btns{display:flex;gap:10px;justify-content:center;margin:14px 0 6px;flex-wrap:wrap}
.ok-small{font-size:13px;color:var(--faint);text-shadow:none}

/* ── E10 postdata ── */
.postdata .stage{width:min(880px,100%)}   /* ancho DEFINIDO (no shrink-to-fit) → las columnas de la FAQ no se ensanchan al abrir un acordeón */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;align-items:start;margin:20px 0 30px}
@media(max-width:760px){.faq{grid-template-columns:1fr}}
.faq details{background:rgba(10,12,18,.78);border:1px solid var(--line);border-radius:13px;overflow:hidden;color:#F3F5F9;text-shadow:none}
.faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:700;font-size:18px;display:inline-block;transition:transform .25s var(--ease,cubic-bezier(.2,.7,.2,1))}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 18px 16px;color:#B4BDCE;font-size:14.5px}
html.motion-ok .faq details[open] .ans{animation:faqReveal .26s var(--ease-out-brand,cubic-bezier(.2,.7,.2,1))}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.founders{background:rgba(10,12,18,.78);border:1px solid var(--line);border-radius:13px;padding:18px;color:#B4BDCE;font-size:15px;margin-bottom:30px;text-shadow:none}
.founders strong{color:#F3F5F9}
.lead-form-inline{background:rgba(10,12,18,.85);border:1px solid rgba(var(--accent-rgb),.3);border-radius:16px;padding:20px;--txt:#F3F5F9;--dim:#B4BDCE;--faint:#8B97AC;color:var(--txt);text-shadow:none}
.pd-line{margin-bottom:12px;color:#F3F5F9;text-shadow:none}
.pd-row{display:flex;gap:8px;flex-wrap:wrap}
.pd-row input{flex:1;min-width:200px;margin-bottom:0!important}
.pd-row .btn-gold{width:auto}
footer{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;margin-top:44px;padding-top:24px;border-top:1px solid rgba(26,14,0,.25);color:#4A3A20;font-size:13px}
.postdata footer a{color:inherit}
.wm-small{font-size:15px;color:#1A0E00}

/* nav: grupo derecho + enlace Mi cuenta */
.nav-right{display:flex;align-items:center;gap:14px}
.acct-nav{color:var(--dim);text-decoration:none;font-size:14px;font-weight:600;padding:6px 2px;transition:color .18s;white-space:nowrap}
.acct-nav:hover{color:var(--gold)}
@media(max-width:480px){.nav-right{gap:10px}}

/* footer-mapa (4 columnas) sobre la sección clara */
.foot-map{gap:24px!important}
.fm-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:44px;text-align:left}
.fm-col{display:flex;flex-direction:column;gap:8px;min-width:118px}
.fm-col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:#1A0E00;font-weight:800;margin:0 0 3px}
.fm-col a{color:#4A3A20;text-decoration:none;font-size:14px;transition:color .16s}
.fm-col a:hover{color:var(--gold-deep)}
.fm-adobe{max-width:620px;font-size:11.5px;line-height:1.6;color:#6B5435;margin:8px auto 0}
.fm-base{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:13px;margin-top:4px}
@media(max-width:520px){.fm-cols{gap:28px 34px}}

.check-spot{scroll-margin-top:40svh}
html:not(.motion-ok) .check-chip{transition:none}
html:not(.motion-ok) #claim .line{opacity:1;transform:none}
html:not(.motion-ok) .hw-sector{opacity:1;animation:none}

/* ═══════════ BUILD 3 · la demo, en serio ═══════════ */
/* backdrop: al abrir la rueda, el escenario se apaga y ella manda */
.dw::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,rgba(4,5,9,.78) 30%,rgba(4,5,9,.35) 55%,transparent 72%);z-index:-1}
#lienzo.wheel-open #stage-tl{opacity:.5;transition:opacity .2s}
#stage-tl{transition:opacity .2s}
/* anillo principal apartado mientras hay sub-rueda */
.dw g.away{opacity:.08;pointer-events:none;transition:opacity .18s}
.dw g{transition:opacity .18s}
/* sub-sectores: entran en abanico */
.dw-subring .dw-sec.sub{transform-box:fill-box;transform-origin:center}
html.motion-ok .dw-subring .dw-sec.sub{opacity:0;animation:subIn .28s var(--slow) forwards;animation-delay:calc(var(--d,0) * .06s)}
@keyframes subIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.hub-label{font:600 11px Montserrat,sans-serif;fill:#8B97AC;text-anchor:middle;pointer-events:none}
/* EFECTOS: barrido dorado sobre la selección */
.fx-sweep{position:absolute;top:0;bottom:0;width:90px;left:-100px;z-index:7;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35) 45%,rgba(255,232,190,.7) 50%,rgba(var(--accent-rgb),.35) 55%,transparent)}
html.motion-ok .fx-sweep{animation:sweepX .75s var(--ease) forwards}
@keyframes sweepX{to{transform:translateX(calc(100cqw + 220px))}}
#stage-tl{container-type:inline-size}
.fx-toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);z-index:13;background:rgba(10,12,18,.95);border:1px solid rgba(var(--accent-rgb),.6);color:var(--gold-2);font-size:14px;font-weight:700;border-radius:999px;padding:8px 18px;opacity:0;transition:opacity .25s,transform .25s var(--slow);pointer-events:none}
.fx-toast.in{opacity:1;transform:translate(-50%,0)}
/* clips con efecto aplicado */
.tl-clip.fxd{box-shadow:0 0 0 1px var(--gold),0 0 12px rgba(var(--accent-rgb),.45)}
#stage-tl .tl-clip.fxd::after{content:"✦";margin-left:4px;color:var(--gold-2);font-size:9px}
/* guía de drop */
.drop-guide{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);box-shadow:0 0 10px rgba(var(--accent-rgb),.8);z-index:6;pointer-events:none}
#lienzo.drop-sfx #stage-tl .tl-row[data-track="A2"]{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.06)}
#lienzo.dropping #stage-tl{opacity:1}
/* onda expansiva */
.shock{position:absolute;z-index:12;width:24px;height:24px;border-radius:50%;border:2px solid rgba(var(--accent-rgb),.9);transform:translate(-50%,-50%) scale(.4);opacity:1;pointer-events:none}
html.motion-ok .shock{animation:shockw .6s var(--ease) forwards}
@keyframes shockw{to{transform:translate(-50%,-50%) scale(5);opacity:0}}
/* ═══ desanidar 2.0: secuencia narrada ═══ */
.unnest2{max-width:560px;margin:20px 0 10px}
.u2-track{position:relative;height:54px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid var(--line)}
.u2-nested{position:absolute;inset:5px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:7px;background:repeating-linear-gradient(45deg,#23262F 0 7px,#1B1E26 7px 14px);border:1px solid #3A4150;color:#9AA4B8;font-size:12px;font-weight:700;letter-spacing:.1em;overflow:hidden;transition:opacity .4s,transform .45s var(--ease);transform-origin:center}
html.motion-ok .unnest2.s1 .u2-nested{animation:u2shake .45s var(--ease)}
@keyframes u2shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.u2-scan{position:absolute;top:0;bottom:0;left:0;width:4px;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 14px rgba(var(--accent-rgb),.9);opacity:0}
html.motion-ok .unnest2.s2 .u2-scan{opacity:1;animation:u2scan .8s linear forwards}
@keyframes u2scan{from{transform:translateX(0)}to{transform:translateX(540px)}}
.unnest2.s3 .u2-nested{opacity:0;transform:scaleY(.08)}
.u2-clip{position:absolute;top:5px;bottom:5px;width:29%;left:var(--fx);border-radius:7px;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:12px;opacity:0;transform:translateX(calc(35% - var(--fx))) scale(.7)}
.unnest2.s3 .u2-clip{opacity:1;transform:none;transition:transform .5s var(--slow),opacity .35s}
.unnest2.s3 .u2-clip.c2{transition-delay:.12s}
.unnest2.s3 .u2-clip.c3{transition-delay:.24s}
.u2-clip.c1{background:linear-gradient(180deg,rgba(255,178,62,.65),rgba(255,178,62,.3));box-shadow:0 0 0 1px var(--gold)}
.u2-clip.c2{background:linear-gradient(180deg,rgba(156,123,255,.6),rgba(156,123,255,.28));box-shadow:0 0 0 1px var(--corona-2)}
.u2-clip.c3{background:linear-gradient(180deg,rgba(62,196,109,.6),rgba(62,196,109,.28));box-shadow:0 0 0 1px var(--green)}
.u2-status{margin-top:10px;font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums;min-height:1.5em}
.unnest2.s3 .u2-status{color:var(--gold-2)}
html:not(.motion-ok) .unnest2 .u2-nested{opacity:0}
html:not(.motion-ok) .unnest2 .u2-clip{opacity:1;transform:none}
#unnest-replay{font-size:13px;min-height:36px;padding:6px 14px;margin-top:4px}

/* ═══════════════════════════════════════════════════════════════
   BUILD 4 · LA PIEL PREMIERE (checklist del cazador de fidelidad)
   Regla nº1: dentro del timeline NO existe el dorado, ni hover,
   ni esquinas redondeadas, ni gradientes. Plano, recto, Premiere.
   ═══════════════════════════════════════════════════════════════ */

/* ── el chrome del timeline (lo monta TLX alrededor de #stage-tl) ── */
#tlx{position:absolute;left:10px;right:10px;top:64px;bottom:12px;display:grid;grid-template-columns:90px 1fr;grid-template-rows:24px 1fr;background:#161616;box-shadow:0 0 0 1px #000;user-select:none;-webkit-user-select:none;cursor:default}
#tlx-corner{grid-area:1/1;background:#1D1D1D;border-right:1px solid #000;border-bottom:1px solid #000;display:flex;align-items:center;gap:5px;padding:0 6px}
#tlx-tc{font-size:10.5px;font-weight:600;color:#3FA2FF;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* botón de transporte (Play/Pausa) — glifos SVG propios, junto al timecode (el juguete no tiene monitor de programa) */
#tlx-play{flex:0 0 auto;width:19px;height:19px;padding:0;border:0;border-radius:4px;background:#2A2E38;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#B9C1D0;cursor:pointer;display:grid;place-items:center;transition:background .18s var(--ease-out-brand),color .18s var(--ease-out-brand),box-shadow .18s var(--ease-out-brand)}
#tlx-play:hover{color:#fff;background:#333844}
#tlx-play svg{width:13px;height:13px;fill:currentColor;display:block}
#tlx-play .svg-pause,#tlx-play svg:nth-child(2){display:none}
#tlx-play.on{color:#20150a;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 10px rgba(var(--accent-rgb),.4)}
#tlx-play.on svg:nth-child(1){display:none}
#tlx-play.on svg:nth-child(2){display:block}
#tlx-play:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* VIDA: el clip bajo el cabezal se ILUMINA; un SFX cruzado da un flash de impacto */
#stage-tl .tl-clip.playing{filter:brightness(1.22) saturate(1.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 12px rgba(var(--accent-rgb),.28);z-index:3;transition:filter .1s linear,box-shadow .1s linear}
#stage-tl .tl-clip.hit{animation:sfxHit .3s var(--ease-out-brand)}
@keyframes sfxHit{0%{transform:scaleY(1)}38%{transform:scaleY(1.16)}100%{transform:scaleY(1)}}
#stage-tl .tl-clip.clip-out{animation:clipOut .15s var(--ease-in-brand) forwards;transform-origin:left center}
@keyframes clipOut{to{transform:scaleX(.2);opacity:0}}
/* el cabezal brilla mientras se reproduce; la invitación se aparta */
#lienzo.is-playing .tl-playhead{box-shadow:0 0 10px 1px rgba(var(--accent-rgb),.55)}
#lienzo.is-playing #lienzo-invite{opacity:0;transition:opacity .3s var(--ease-out-brand)}
@media(max-width:600px){#tlx{grid-template-columns:78px 1fr}#tlx-play{width:17px;height:17px}#tlx-tc{font-size:9.5px}}
#tlx-ruler{grid-area:1/2;position:relative;background:#1D1D1D;border-bottom:1px solid #000;cursor:ew-resize;touch-action:manipulation}
#tlx-ticks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#tlx-ticks i{position:absolute;bottom:0;width:1px}
#tlx-ticks i.tk-m{height:4px;background:#3A3A3A}
#tlx-ticks i.tk-M{height:7px;background:#4A4A4A}
#tlx-ticks b{position:absolute;bottom:7px;margin-left:3px;font-size:10px;font-weight:400;color:#8A8A8A;font-variant-numeric:tabular-nums;white-space:nowrap}
#tlx-ph-head{position:absolute;top:5px;width:11px;height:18px;margin-left:-5.5px;background:#2D8CEB;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);z-index:4}
#tlx-ph-head::before{content:"";position:absolute;left:-7px;top:-5px;width:25px;height:28px} /* zona de agarre */
@media(pointer:coarse){#tlx-ph-head::before{left:-17px;width:45px}}
#tlx-heads{grid-area:2/1;background:#232323;border-right:1px solid #000;display:flex;flex-direction:column}
.tlx-head{display:flex;align-items:center;gap:5px;padding:0 5px;border-bottom:1px solid #0E0E0E}
.tlx-head.is-video{height:46px}
.tlx-head.is-audio{height:38px}
.tlx-head[data-track="A1"]{margin-top:8px;position:relative}
.tlx-head[data-track="A1"]::before{content:"";position:absolute;left:-1px;right:-1px;top:-9px;height:8px;background:#141414;border-top:1px solid #000;border-bottom:1px solid #000}
.th-target{width:16px;height:14px;background:#303030;box-shadow:0 0 0 1px #3A3A3A;flex:0 0 auto}
.th-target.on{background:#4A5566}
.th-name{font-size:11px;font-weight:600;color:#C8C8C8}
.th-ic,.th-eye{margin-left:auto;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:#909090;width:19px;height:16px;border-radius:3px}
.th-eye svg{width:13px;height:13px;display:block}
.th-eye .eye-off{display:none}
.th-eye:hover{color:#ddd;background:rgba(255,255,255,.06)}
.tlx-head.trk-hidden .th-eye{color:#E5484D}
.tlx-head.trk-hidden .th-eye .eye-on{display:none}.tlx-head.trk-hidden .th-eye .eye-off{display:flex}
.th-ms{margin-left:auto;width:15px;height:14px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#909090;box-shadow:0 0 0 1px #3A3A3A;background:#2A2A2A;border:0;border-radius:3px;cursor:pointer;font-family:inherit}
.th-ms + .th-ms{margin-left:3px}
.th-ms:hover{color:#ddd;box-shadow:0 0 0 1px #555}
.th-m.on{color:#fff;background:#8A2A2A;box-shadow:0 0 0 1px #C0453D}
.th-s.on{color:#111;background:var(--gold);box-shadow:0 0 0 1px var(--gold-2)}
/* pista de vídeo oculta (ojo apagado): sus clips atenuados en el timeline */
#stage-tl .tl-row.trk-hidden .tl-clip{opacity:.3;filter:grayscale(.65)}
/* onda de audio dentro del clip (picos alineados al beat) */
.tl-clip .tl-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.tl-clip .tl-wave rect{fill:rgba(206,255,224,.5)}
.tl-clip.sfx .tl-wave rect{fill:rgba(255,224,178,.55)}
#tlx-rows-slot{grid-area:2/2;position:relative;background:#131313;overflow:hidden}

/* ── las pistas (el #stage-tl vive ahora dentro del slot) ── */
#stage-tl{position:relative!important;inset:auto!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;display:flex;flex-direction:column;gap:0;container-type:inline-size}
#stage-tl .tl-row{flex:none;border-radius:0;background:#202020;border-bottom:1px solid #0E0E0E}
#stage-tl .tl-row.is-video{height:46px}
#stage-tl .tl-row.is-audio{height:38px}
#stage-tl .tl-row[data-track="A1"]{margin-top:8px;position:relative}
#stage-tl .tl-row[data-track="A1"]::before{content:"";position:absolute;left:0;right:0;top:-9px;height:8px;background:#141414;border-top:1px solid #000;border-bottom:1px solid #000;pointer-events:none}

/* ── clips: PLANOS, 90°, paleta Premiere, juntura de 1px, CERO hover ── */
#stage-tl .tl-clip,#tl-tracks .tl-clip{border-radius:0;opacity:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);cursor:default}
.tl-clip.video{background:#3D5A75}
.tl-clip.audio,.tl-clip.sfx{background:#2D5E50}
.tl-clip.title{background:#6A5A8C}
.tl-clip.adj{background:#7A5E2E}
.tl-clip.nested{background:#2E6B46;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)} /* SÓLIDA, jamás rayada */
#stage-tl .tl-clip{display:block;padding:0;overflow:hidden;font-size:10px;color:#E8E8E8;white-space:nowrap}
#stage-tl .tl-clip .clip-name{display:block;padding:2px 0 0 4px;font-size:10px;line-height:1.2;pointer-events:none}
#stage-tl .tl-clip:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* waveform espejada y ESTÁTICA en clips de audio */
#stage-tl .tl-clip.audio::after,#stage-tl .tl-clip.sfx::after{content:"";position:absolute;left:2px;right:2px;top:46%;bottom:14%;pointer-events:none;opacity:.8;
  background:repeating-linear-gradient(90deg,#6FAE9C 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 28%,#000 72%,transparent 100%)}
/* selección Premiere: aclarado FUERTE + borde blanco nítido, texto oscuro, cero glow */
.tl-clip.sel.video{background:#8FA9C2}
.tl-clip.sel.audio,.tl-clip.sel.sfx{background:#79B3A0}
.tl-clip.sel.title{background:#A99BC9}
.tl-clip.sel.adj{background:#C7A86B}
.tl-clip.sel.nested{background:#74A98B}
.tl-clip.sel{box-shadow:inset 0 0 0 1.5px #FFF!important;color:#14181F}
#stage-tl .tl-clip.sel .clip-name{color:#14181F}
/* overrides de los estilos de marca viejos: el dorado NO entra en los clips */
#stage-tl .tl-clip.user{box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
#stage-tl .tl-clip.user.sel{box-shadow:inset 0 0 0 1.5px #FFF!important}
#stage-tl .tl-clip.safe{box-shadow:inset 0 0 0 1px #3EC46D}
.tl-clip.fxd{box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
#stage-tl .tl-clip.fxd::after{content:none}
/* badge fx de Premiere: cuadradito púrpura arriba-izquierda */
#stage-tl .tl-clip.fxd::before{content:"fx";position:absolute;left:2px;top:2px;width:12px;height:11px;background:#7A52C7;color:#fff;font:italic 700 7px/11px serif;text-align:center;border-radius:2px;z-index:2}
html.motion-ok #stage-tl .tl-clip.fxd::before{animation:fxPop .12s var(--ease)}
@keyframes fxPop{from{transform:scale(.5)}to{transform:scale(1)}}
#stage-tl .tl-clip.fxd .clip-name{padding-left:17px}
/* playhead: AZUL, 1.5px, sin parpadeo, por encima de los clips, sin robar clics */
#stage-tl .tl-playhead,#tl-tracks .tl-playhead{width:1.5px;background:#2D8CEB;animation:none!important;pointer-events:none;z-index:5}

/* ── ghost del drag: nodo único, transform-only, cuantizado a fila ── */
.tlx-ghost{position:absolute;left:0;top:0;z-index:7;opacity:.55;pointer-events:none;will-change:transform;box-shadow:0 0 0 1px #FFF,0 4px 12px rgba(0,0,0,.55);overflow:hidden;font-size:10px;color:#E8E8E8}
.tlx-ghost.video{background:#3D5A75}.tlx-ghost.audio,.tlx-ghost.sfx{background:#2D5E50}
.tlx-ghost.title{background:#6A5A8C}.tlx-ghost.adj{background:#7A5E2E}.tlx-ghost.nested{background:#2E6B46}
.tlx-ghost .clip-name{display:block;padding:2px 0 0 4px;pointer-events:none}
.tlx-ghost .ghost-x{display:none;position:absolute;right:3px;top:2px;color:#fff;font-size:10px;font-weight:700}
.tlx-ghost.invalid{box-shadow:0 0 0 1px #E5484D,0 4px 12px rgba(0,0,0,.55)}
.tlx-ghost.invalid::after{content:"";position:absolute;inset:0;background:rgba(229,72,77,.45)}
.tlx-ghost.invalid .ghost-x{display:block;z-index:2}
html.touch .tlx-ghost{transform-origin:center;scale:1.02}
/* ghost de COLOCACIÓN de stack: vive DENTRO de su .tl-row (left:% como un clip) → llena la fila y sigue al ratón */
.tlx-ghost.placing{top:0;bottom:0;height:auto;opacity:.72;box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.9),0 4px 14px rgba(0,0,0,.5)}
html.motion-ok .tlx-ghost.placing{animation:ghostPulse 1.15s ease-in-out infinite}
@keyframes ghostPulse{50%{opacity:.48}}
body.placing,body.placing #lienzo,body.placing #stage-tl,body.placing .tl-clip{cursor:copy}
body.placing{user-select:none;-webkit-user-select:none}
.tl-clip.drag-src{opacity:.85}
body.dragging{user-select:none;-webkit-user-select:none}
/* cursor Helios sobre la timeline: los clips/filas heredan el del #stage-tl (fijado por JS); la cuchilla lo cambia */
#stage-tl .tl-clip{cursor:inherit}
body.razor #stage-tl .tlx-trim{cursor:inherit}
/* holograma de la CUCHILLA: dónde caería el corte (más brillante y blanco cuando imanta a un borde) */
.tlx-razor-line{position:absolute;width:2px;margin-left:-1px;z-index:8;pointer-events:none;background:linear-gradient(180deg,rgba(255,178,62,.95),rgba(255,178,62,.45));box-shadow:0 0 9px rgba(var(--accent-rgb),.75);border-radius:1px}
.tlx-razor-line::before{content:"";position:absolute;left:-3px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px rgba(var(--accent-rgb),.85)}
html.motion-ok .tlx-razor-line{animation:razPulse 1.1s ease-in-out infinite}
@keyframes razPulse{50%{box-shadow:0 0 14px rgba(var(--accent-rgb),.95)}}
.tlx-razor-line.snapped{background:linear-gradient(180deg,#fff,var(--gold));box-shadow:0 0 14px rgba(var(--accent-rgb),1),0 0 0 1px rgba(255,255,255,.55)}
.tlx-razor-line.snapped::before{background:#fff;box-shadow:0 0 12px rgba(var(--accent-rgb),1)}
/* rectángulo de selección (marquee holográfico) */
.tlx-marquee{position:absolute;z-index:7;pointer-events:none;border:1px solid rgba(var(--accent-rgb),.9);border-radius:2px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.06));box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28),0 0 18px rgba(var(--accent-rgb),.4) inset}
html.motion-ok .tlx-marquee{animation:mqPulse 1.3s ease-in-out infinite}
@keyframes mqPulse{50%{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5),0 0 26px rgba(var(--accent-rgb),.55) inset}}
/* línea de snap: 1.5px blanca con cuñas, SOLO durante el enganche */
.tlx-snapline{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-0.75px;background:rgba(255,255,255,.9);z-index:6;pointer-events:none}
.tlx-snapline::before,.tlx-snapline::after{content:"";position:absolute;left:-4.25px;border-left:5px solid transparent;border-right:5px solid transparent}
.tlx-snapline::before{top:0;border-top:5px solid #fff}
.tlx-snapline::after{bottom:0;border-bottom:5px solid #fff}
/* toast del timeline */
.tlx-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);z-index:14;background:rgba(10,12,18,.95);border:1px solid var(--line-2);color:var(--txt);font-size:13px;border-radius:999px;padding:7px 16px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.tlx-toast.in{opacity:1;transform:translate(-50%,0)}
/* la banda fija inferior hereda la paleta plana (coherencia banda↔escenario) */
#tl-tracks .tl-clip{border-radius:0}
#tl-tracks .tl-clip.user{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
/* la mini-banda conserva su verde 'safe' de la historia */
#tl-tracks .tl-clip.safe{box-shadow:0 0 0 1px #3EC46D}

/* ═══════════════════════════════════════════════════════════════
   PASADA 1 · LA RUEDA PREMIUM — curvas redondeadas (geometría),
   cristal, filo neón que brilla, pop 3D al hover, apertura con peso.
   ADN del plugin: nada de picos; color solo en filos y halos.
   ═══════════════════════════════════════════════════════════════ */

/* ── rueda-sol del HERO ── */
.hw-halo{opacity:.9}
html.motion-ok .hw-halo{transform-box:fill-box;transform-origin:center;animation:breath 6.5s var(--slow) infinite}
.hw-sector .hw-glow{fill:none;stroke:rgba(var(--accent-rgb),.20);stroke-width:6;stroke-linejoin:round;filter:blur(5px);transition:stroke .2s var(--ease)}
.hw-sector .hw-fill{stroke:rgba(var(--accent-rgb),.55);stroke-width:1.25;stroke-linejoin:round;transition:stroke .2s var(--ease)}
.hw-sector.off{opacity:.55}
.hw-sector.off .hw-glow{stroke:rgba(255,255,255,0)}
.hw-sector.off .hw-fill{stroke:rgba(255,255,255,.14)}
.hw-ic{font-size:17px;text-anchor:middle;fill:var(--gold-2);pointer-events:none}
.hw-label{font:600 13px Montserrat,var(--font);fill:#EAF0F8;text-anchor:middle;letter-spacing:.01em;pointer-events:none}
.hw-sector.off .hw-ic{fill:#8693A8}.hw-sector.off .hw-label{fill:#9AA6BB}
.hw-hub{pointer-events:none}
@media(pointer:fine){
  .hw-sector{transform-box:fill-box;transform-origin:center;transition:transform .22s var(--slow),filter .22s var(--ease)}
  .hw-sector:not(.off):hover{filter:drop-shadow(0 4px 14px rgba(var(--accent-rgb),.45))}
  .hw-sector:not(.off):hover .hw-glow{stroke:rgba(var(--accent-rgb),.5)}
  .hw-sector:not(.off):hover .hw-fill{stroke:rgba(var(--accent-rgb),.95)}
  .hw-sector:not(.off):hover .hw-ic{fill:var(--gold)}
}

/* ── rueda de la DEMO (#lienzo) ── */
.dw{transition:transform .26s cubic-bezier(.34,1.45,.5,1),opacity .18s var(--ease)}
html:not(.motion-ok) .dw{transition:none}
.dw-sec{transform-box:fill-box;transform-origin:center;transition:transform .18s cubic-bezier(.34,1.5,.5,1),filter .18s var(--ease)}
.dw-sec .secglow{fill:none;stroke:rgba(var(--accent-rgb),0);stroke-width:9;stroke-linejoin:round;filter:blur(6px);transition:stroke .18s var(--ease)}
.dw-sec .secfill{stroke:rgba(var(--accent-rgb),.5);stroke-width:1.3;stroke-linejoin:round;transition:stroke .16s var(--ease)}
.dw-sec.hot .secfill,.dw-sec:hover:not(.dimmed) .secfill{fill:url(#dwglass);stroke:rgba(var(--accent-rgb),1)}
.dw-sec.hot .secglow,.dw-sec:hover:not(.dimmed) .secglow{stroke:rgba(var(--accent-rgb),.6)}
.dw-sec.hot,.dw-sec:hover:not(.dimmed){transform:translate(var(--px,0),var(--py,0)) scale(1.055);filter:drop-shadow(0 6px 15px rgba(var(--accent-rgb),.5))}
.dw-sec.dimmed:hover{transform:none;filter:none}
.dw-sec text{font-family:'Montserrat',var(--font);font-size:13px;font-weight:600;fill:#EAF0F8}
html.motion-ok .dw-breath{transform-box:fill-box;transform-origin:center;animation:breath 5.5s var(--slow) infinite}
.dw-subring .dw-sec.sub .secfill{stroke-width:1.3;stroke-linejoin:round}
.dw{width:min(240px,58vw)}

/* ═══════════════════════════════════════════════════════════════
   PASADA 2 · TIMELINE PREMIUM — curvas + cristal Helios, legible.
   (revierte el "Premiere plano 90°" de la build 4 hacia el ADN del
   plugin: clips redondeados con sheen, panel de cristal, filos suaves.)
   ═══════════════════════════════════════════════════════════════ */
#tlx{border-radius:14px;background:linear-gradient(180deg,#15171F,#0E1016);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 16px 44px rgba(0,0,0,.5),0 0 0 1px rgba(var(--accent-rgb),.05);overflow:hidden}
#tlx-corner{background:linear-gradient(180deg,#1C1F29,#14161D);border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
#tlx-ruler{background:linear-gradient(180deg,#1C1F29,#15171F);border-bottom:1px solid rgba(255,255,255,.05)}
#tlx-heads{background:linear-gradient(180deg,#1A1D26,#15171D);border-right:1px solid rgba(255,255,255,.05)}
#tlx-rows-slot{background:#0D0F15}
#stage-tl .tl-row{background:rgba(255,255,255,.016);border-bottom:1px solid rgba(255,255,255,.035)}
.tlx-head{border-bottom:1px solid rgba(255,255,255,.035)}
.th-name{color:#C9D1DF}.th-target.on{background:#5566AA}
#tlx-ticks i.tk-M{background:#5A6070}#tlx-ticks i.tk-m{background:#3A3F4C}
/* clips: CURVAS + cristal + sheen, sin perder legibilidad */
#stage-tl .tl-clip,#tl-tracks .tl-clip{border-radius:5px}
#tl-tracks .tl-clip{border-radius:3px}
#stage-tl .tl-clip{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.28)}
.tl-clip.video{background:linear-gradient(180deg,#4C6D8C,#34506B)}
.tl-clip.audio,.tl-clip.sfx{background:linear-gradient(180deg,#3A7466,#235247)}
.tl-clip.title{background:linear-gradient(180deg,#806DA8,#594A7C)}
.tl-clip.adj{background:linear-gradient(180deg,#9C7639,#6E5226)}
.tl-clip.nested{background:linear-gradient(180deg,#3C835C,#236B43)}
#stage-tl .tl-clip .clip-name{padding:3px 0 0 6px;color:#ECF1F8;text-shadow:0 1px 1px rgba(0,0,0,.45)}
/* selección: brillo + borde claro, redondeado */
.tl-clip.sel{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 1px rgba(0,0,0,.3),0 2px 9px rgba(0,0,0,.4)!important;color:#14181F}
/* tus clips llevan el filo del acento (son TUYOS) */
#stage-tl .tl-clip.user{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(var(--accent-rgb),.85),0 1px 4px rgba(0,0,0,.3)}
#stage-tl .tl-clip.user.sel{box-shadow:inset 0 0 0 1.5px #fff!important;color:#14181F}
#stage-tl .tl-clip.safe{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px var(--green),0 0 9px rgba(62,196,109,.3)}
.tl-clip.fxd{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 11px rgba(var(--accent-rgb),.28)!important}
#stage-tl .tl-clip.fxd::before{border-radius:3px}
/* ghost del drag, redondeado y con cristal */
.tlx-ghost{border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px #fff,0 6px 16px rgba(0,0,0,.5)}
.tlx-ghost.video{background:linear-gradient(180deg,#4C6D8C,#34506B)}
.tlx-ghost.audio,.tlx-ghost.sfx{background:linear-gradient(180deg,#3A7466,#235247)}
.tlx-ghost.title{background:linear-gradient(180deg,#806DA8,#594A7C)}.tlx-ghost.adj{background:linear-gradient(180deg,#9C7639,#6E5226)}.tlx-ghost.nested{background:linear-gradient(180deg,#3C835C,#236B43)}
/* playhead azul con cabeza un punto redondeada + snapline con glow suave */
#tlx-ph-head{border-radius:3px 3px 0 0}
.tlx-snapline{box-shadow:0 0 8px rgba(255,255,255,.5)}

/* ═══════════════════════════════════════════════════════════════
   PASADA 3 · SOLTAR DE VERDAD — cae donde lo sueltas, con impacto.
   ═══════════════════════════════════════════════════════════════ */
.boom-flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--bx,50%) var(--by,55%),rgba(255,226,172,.62),rgba(255,178,62,.22) 38%,transparent 68%)}
html.motion-ok .boom-flash{animation:boomFlash .44s var(--ease) forwards}
@keyframes boomFlash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
#tlx.shake{animation:tlxShake .32s var(--ease)}
@keyframes tlxShake{0%,100%{transform:translateX(0)}18%{transform:translateX(-5px)}36%{transform:translateX(5px)}54%{transform:translateX(-3px)}72%{transform:translateX(2px)}}
html.motion-ok #stage-tl .tl-clip.drop-in{animation:dropIn .46s cubic-bezier(.34,1.5,.5,1)}
@keyframes dropIn{0%{transform:translateY(-30px) scale(1.1);opacity:0}55%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.shock.big{width:34px;height:34px;border-color:rgba(255,226,172,.85)}
html.motion-ok .shock.big{animation:shockwBig .72s var(--ease) forwards}
@keyframes shockwBig{to{transform:translate(-50%,-50%) scale(7.5);opacity:0}}

/* ═══════════════════════════════════════════════════════════════
   PASADA 6a · LEGIBILIDAD (100% zoom) + PÁGINA VIVA AL HOVER.
   ═══════════════════════════════════════════════════════════════ */
/* — legibilidad: subir los suelos de tamaño, nada enano — */
.lead{font-size:clamp(17px,2.2vw,21px)}
.sub{font-size:clamp(16.5px,2.15vw,20px)}
.payoff{font-size:16px}
.claim-line{font-size:clamp(18px,2.35vw,23px)}
.spine{font-size:clamp(17px,2.2vw,22px)}
.hint{font-size:14.5px}
.microcopy{font-size:13.5px}
h2{font-size:clamp(33px,5.7vw,60px)}
.faq summary{font-size:15.5px}.faq .ans{font-size:15px}
.offer li{font-size:15.5px}.launch-line{font-size:16px}
.lead-form input[type=email]{font-size:16px}
#reader-chip{font-size:15.5px}.post-action{font-size:15.5px}
.bc-label{font-size:clamp(15px,2vw,19px)}
#lienzo-invite p{font-size:15.5px}

/* — hover vivo: todo lo interactivo responde — */
.btn-gold{position:relative;overflow:hidden;transition:transform .16s var(--ease),box-shadow .2s var(--ease)}
.btn-gold:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 14px 36px rgba(255,178,62,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:active{transform:translateY(0) scale(.99)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);transform:translateX(-130%)}
html.motion-ok .btn-gold:hover::after{animation:btnSheen .6s var(--ease)}
@keyframes btnSheen{to{transform:translateX(130%)}}
.btn-ghost{transition:border-color .15s,color .15s,box-shadow .22s var(--ease),transform .15s var(--ease)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--gold),0 8px 20px rgba(var(--accent-rgb),.22)}
.cta-inline{border-bottom:0;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;transition:background-size .26s var(--ease),color .2s}
.cta-inline:hover{background-size:100% 1.5px;color:var(--gold-2)}
.clock{transition:border-color .2s,box-shadow .2s,transform .15s}
.clock:hover{border-color:var(--gold);box-shadow:var(--halo);transform:translateY(-1px)}
.wordmark .sunO{transition:filter .25s}
.brand:hover .sunO{filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.8))}
.faq summary{transition:color .18s}.faq summary:hover{color:var(--gold)}
.faq details{transition:border-color .2s,background .2s}.faq details:hover{border-color:rgba(var(--accent-rgb),.3)}
.swatch{transition:transform .16s var(--slow),box-shadow .2s}
.swatch:hover{transform:scale(1.2);box-shadow:0 0 12px rgba(var(--accent-rgb),.4)}
.return-link a,.offer a,.ok-small,footer a{transition:color .18s}
.return-link a:hover,.postdata footer a:hover,.founders a:hover{color:var(--gold)}
.cwin{transition:transform .25s var(--ease),border-color .2s,color .2s}
.cwin:hover{border-color:rgba(var(--accent-rgb),.4);color:#AEB9CD}
/* los titulares brillan al pasar el ratón (anticipo del efecto por-letra) */
@media(pointer:fine){
  h2,.display-2{transition:filter .25s var(--ease)}
  h2:hover,.display-2:hover{filter:drop-shadow(0 2px 16px rgba(var(--accent-rgb),.28))}
  #claim:hover .line{filter:drop-shadow(0 0 20px rgba(var(--accent-rgb),.32))}
  #claim .line{transition:filter .3s var(--ease)}
}
/* — efecto por-letra: se mueven gracioso y se tiñen al pasar el ratón — */
.alive .word{display:inline-block;white-space:nowrap}
.alive .ltr{display:inline-block;transition:transform .2s cubic-bezier(.34,1.6,.5,1),color .2s,text-shadow .2s}
@media(pointer:fine){
  .alive .ltr:hover{transform:translateY(-.16em) rotate(-6deg);color:var(--accent)}
  .dawn .alive .ltr:hover{color:inherit;text-shadow:0 0 12px rgba(255,205,130,.65)}
  .founder-card .alive .ltr:hover,.lead-form-inline .alive .ltr:hover{color:var(--gold);text-shadow:none}
}
html:not(.motion-ok) .alive .ltr{transition:none}

/* ═══════════════════════════════════════════════════════════════
   PASADA 4 · RUEDA CONTEXTUAL — la misma rueda, montable en escenas.
   ═══════════════════════════════════════════════════════════════ */
.ctx-host{position:relative;max-width:560px;min-height:236px;overflow:hidden;border-radius:16px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.ctx-host>.finder,.ctx-host>.unnest2{margin:0}
.ctx-wheel{z-index:14}
.ctx-invoke{align-self:flex-start;transition:opacity .2s var(--ease),border-color .15s,color .15s,box-shadow .22s var(--ease),transform .15s}
.ctx-host.ctx-open .ctx-invoke{opacity:.2;pointer-events:none}
.ctx-host.ctx-open>.finder,.ctx-host.ctx-open>.unnest2{filter:saturate(.7) brightness(.9);transition:filter .2s}

/* ═══════════════════════════════════════════════════════════════
   PASADA 5 · HERO MÁS IMPONENTE + JUGABLE (la demo, ya en el seg. 0)
   ═══════════════════════════════════════════════════════════════ */
.sub-benefit{margin:-4px 0 16px;font-size:clamp(16px,2.15vw,20px);color:var(--txt);max-width:46ch}
.sub-benefit strong{color:var(--gold)}
@media(max-width:880px){.sub-benefit{margin-inline:auto}}
.sun-crest{width:min(500px,88vw)}
.sun-halo{width:88%;background:radial-gradient(circle,rgba(255,178,62,.42),rgba(109,74,255,.12) 52%,transparent 72%)}
.horizon-glow{box-shadow:0 0 36px 7px rgba(var(--accent-rgb),.5)}
/* teaser al tocar un sector del hero */
.hw-sector.fired .hw-fill{stroke:var(--gold-2)}
.hw-sector.fired .hw-glow{stroke:rgba(var(--accent-rgb),.8)}
.hw-sector.fired{filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.75))}
.hw-hub{transform-box:fill-box;transform-origin:center}
html.motion-ok .hw-hub.flaring{animation:hubFlare .6s var(--ease)}
@keyframes hubFlare{0%,100%{transform:scale(1);filter:none}45%{transform:scale(1.14);filter:drop-shadow(0 0 20px rgba(var(--accent-rgb),.85))}}
.hw-ripple{fill:none;stroke:rgba(255,224,170,.85);stroke-width:2.5;transform-box:fill-box;transform-origin:center}
html.motion-ok .hw-ripple{animation:hwRipple .74s var(--ease) forwards}
@keyframes hwRipple{from{transform:scale(.32);opacity:.95}to{transform:scale(2.6);opacity:0}}
/* invitación "Tócala" sobre la rueda */
.hero-invite{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;background:rgba(10,12,18,.82);border:1px solid rgba(var(--accent-rgb),.55);color:var(--gold-2);font-size:13px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:6px 14px;pointer-events:none;box-shadow:var(--halo);white-space:nowrap}
@media(pointer:fine){.hero-invite::after{content:" — clic"}html[lang="en"] .hero-invite::after{content:" — click"}}
html.motion-ok .hero-invite{animation:invitePulse 2.4s var(--slow) infinite}
@keyframes invitePulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
.hero-invite.gone{opacity:0;transition:opacity .3s;animation:none}
/* aviso del teaser bajo el copy */
.hero-tease{margin-top:14px;font-size:15.5px;color:var(--gold-2);font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--slow)}
.hero-tease.show{opacity:1;transform:none}
.hero-tease a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════════
   PASADA 7 · COPY FUNCIONAL — escaparate «La rueda, entera» (8 poderes)
   ═══════════════════════════════════════════════════════════════ */
.arsenal-intro{margin-bottom:22px;color:#4A3A20;text-shadow:0 1px 0 rgba(255,240,210,.3)}
.arsenal{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 38px}
@media(max-width:620px){.arsenal{grid-template-columns:1fr}}
.arsenal li{background:rgba(10,12,18,.82);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-shadow:none;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.arsenal li:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.ars-ic{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;font-size:18px;color:var(--gold-2);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.32);border-radius:10px;margin-bottom:11px}
.arsenal li:hover .ars-ic{background:rgba(var(--accent-rgb),.2);box-shadow:0 0 14px rgba(var(--accent-rgb),.3)}
.arsenal h3{font-size:17px;font-weight:800;color:#F3F5F9;margin-bottom:5px;letter-spacing:-.01em;text-shadow:none}
.arsenal p{font-size:14.5px;color:#B4BDCE;line-height:1.5;text-shadow:none}

/* ═══════════════════════════════════════════════════════════════
   P4+ · RUEDA CONTEXTUAL en Stacks y media-offline
   ═══════════════════════════════════════════════════════════════ */
.stack-host{min-height:236px}
.stack-stage{position:relative;width:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.stack-cap{position:absolute;top:4px;left:50%;transform:translateX(-50%) scale(.6);opacity:0;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-weight:800;font-size:13px;border-radius:10px;padding:8px 16px;box-shadow:0 10px 30px rgba(255,178,62,.5);pointer-events:none;white-space:nowrap}
html.motion-ok .stack-cap.burst{animation:capBurst .72s var(--ease)}
@keyframes capBurst{0%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.5)}34%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.08)}68%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.4)}}
.stack-host .badges{justify-content:center;margin:0}
.stack-host .badges .b{transition:box-shadow .25s var(--ease),color .25s,transform .25s var(--slow)}
.stack-host .badges .b.lit{box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(var(--accent-rgb),.45);color:var(--gold-2)}
html.motion-ok .stack-host .badges .b.lit{animation:badgePop .4s var(--ease)}
@keyframes badgePop{40%{transform:translateY(-5px) scale(1.06)}}
/* host compacto (solo disparador, sin demo grande) */
.ctx-compact{min-height:168px;align-items:flex-start;justify-content:center}
.ctx-prompt{color:var(--dim);font-size:15px;font-weight:600;max-width:32ch}

/* ═══════════════════════════════════════════════════════════════
   FASE 1 · PORTADA — HELIOS gigante, declarativa (antes de la historia)
   ═══════════════════════════════════════════════════════════════ */
.portada-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0}
@media(max-width:880px){.portada-copy{align-items:center;text-align:center}}
.portada-copy .eyebrow{margin-bottom:14px}
.brand-giant{font-weight:800;line-height:.9;letter-spacing:-.04em;margin:0}
.bg-word{display:inline-flex;align-items:center;font-size:clamp(60px,13.5vw,156px);
  background:linear-gradient(150deg,#fff 6%,var(--gold-2) 52%,var(--gold) 96%);
  -webkit-background-clip:text;background-clip:text;color:var(--gold-2);-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(var(--accent-rgb),.25))}
.bg-o{width:.76em;height:.76em;margin:0 .02em;position:relative;top:.05em;filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.5))}
.portada-tag{color:var(--dim);font-size:clamp(17px,2.4vw,24px);margin-top:12px;max-width:30ch}
@media(max-width:880px){.portada-tag{margin-inline:auto}}
.hook{color:var(--txt);font-size:clamp(20px,2.8vw,30px);font-weight:700;margin-top:28px;letter-spacing:-.01em;max-width:24ch}
@media(max-width:880px){.hook{margin-inline:auto}}
.enter-cta{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--gold);font-weight:700;font-size:16px;text-decoration:none;border:1px solid rgba(var(--accent-rgb),.42);border-radius:999px;padding:12px 22px;transition:border-color .2s,box-shadow .2s,transform .15s var(--ease)}
.enter-cta:hover{border-color:var(--gold);box-shadow:var(--halo);transform:translateY(-2px)}
.enter-arr{display:inline-block;font-size:18px}
html.motion-ok .enter-arr{animation:bob 1.8s var(--slow) infinite}
.portada-copy .return-link{margin-top:18px}
/* persistente: en la portada AÚN no hay historia → sin reloj ni banda */
#clock{transition:opacity .3s var(--ease)}
html.on-portada #clock{opacity:0;pointer-events:none}
html.on-portada #tl-band{opacity:0;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   FASE 1 · POLISH del hero — títulos vivos, rueda 3D bestia,
   efectos por sector, mensajes rotatorios, tease grande, épico de bajada
   ═══════════════════════════════════════════════════════════════ */
/* título HELIOS: cada letra su gradiente y reacciona al hover; la O viva */
.bg-word{background:none}
.bg-ltr{display:inline-block;background:linear-gradient(155deg,#fff 4%,var(--gold-2) 50%,var(--gold) 96%);-webkit-background-clip:text;background-clip:text;color:var(--gold-2);-webkit-text-fill-color:transparent;transition:transform .24s cubic-bezier(.34,1.7,.5,1),filter .24s}
@media(pointer:fine){
  .bg-ltr:hover{transform:translateY(-.09em) rotate(-6deg) scale(1.08);filter:drop-shadow(0 8px 22px rgba(var(--accent-rgb),.55))}
  .brand-giant:hover .bg-ltr{filter:drop-shadow(0 4px 16px rgba(var(--accent-rgb),.4))}
}
html.motion-ok .bg-o{animation:oPulse 4.5s var(--slow) infinite;transform-origin:center}
@keyframes oPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(pointer:fine){html.motion-ok .brand-giant:hover .bg-o{animation:oFlare .9s var(--ease)}}
@keyframes oFlare{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.3) rotate(200deg);filter:drop-shadow(0 0 30px rgba(var(--accent-rgb),.95))}100%{transform:scale(1) rotate(360deg)}}

/* rueda del hero: 3D del hover MUCHO más espectacular */
.hero-vis{perspective:760px}
@media(pointer:fine){
  .hw-sector:not(.off){transition:transform .2s cubic-bezier(.34,1.5,.5,1),filter .2s var(--ease)}
  .hw-sector:not(.off):hover{transform:translate(var(--px,0),var(--py,0)) scale(1.13);filter:drop-shadow(0 6px 22px rgba(var(--accent-rgb),.6)) brightness(1.15)}
  .hw-sector:not(.off):hover .hw-glow{stroke:rgba(var(--accent-rgb),.72);stroke-width:8}
  .hw-sector:not(.off):hover .hw-fill{stroke:var(--gold-2);stroke-width:1.8}
  .hw-sector:not(.off):hover .hw-ic{fill:#fff}
}

/* mensajes rotatorios sobre la rueda */
.wheel-msg{position:absolute;left:50%;top:5%;transform:translateX(-50%);z-index:6;background:rgba(10,12,18,.88);border:1px solid rgba(var(--accent-rgb),.55);color:var(--gold-2);font-size:13.5px;font-weight:700;border-radius:999px;padding:5px 15px;white-space:nowrap;box-shadow:var(--halo),0 6px 18px rgba(0,0,0,.4);opacity:0;pointer-events:none}
html.motion-ok .wheel-msg.in{animation:msgInOut 2.3s var(--ease)}
@keyframes msgInOut{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.85)}14%,78%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.92)}}

/* tease tras el clic: más grande, con badge */
.hero-tease{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:18px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--slow)}
@media(max-width:880px){.hero-tease{align-items:center;text-align:center}}
.hero-tease.show{opacity:1;transform:none}
.ht-badge{display:inline-block;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241500;font-weight:800;font-size:clamp(15px,2vw,19px);border-radius:10px;padding:7px 15px;box-shadow:0 8px 24px rgba(255,178,62,.4)}
.ht-rest{color:var(--gold-2);font-size:15.5px;font-weight:600}
.ht-rest a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* el "épico" de bajada */
.epic-down{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(26px,5vh,60px) auto 0;text-decoration:none;width:max-content}
.ed-word{font-size:clamp(15px,1.9vw,21px);font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2)}
/* cue de bajada con ADN propio: una regla de timeline vertical y un mini-playhead que la recorre
   (una pasada cada ~6 s, curva de marca) — fuera el shimmer+chevrones de catálogo */
.ed-rail{position:relative;width:14px;height:34px;background:
  repeating-linear-gradient(180deg,var(--line-2) 0 1px,transparent 1px 8px);border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.ed-ph{position:absolute;left:-2px;right:-2px;top:0;height:2px;background:var(--gold-2);box-shadow:0 0 8px rgba(var(--accent-rgb),.7);opacity:0}
html.motion-ok .ed-ph{animation:edPh 6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes edPh{0%,58%{top:0;opacity:0}60%{opacity:1}82%{top:calc(100% - 2px);opacity:1}88%,100%{top:calc(100% - 2px);opacity:0}}
.epic-down:hover .ed-word{filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.7))}
.epic-down:hover .ed-ph{opacity:1}

/* ── efectos PERSONALIZADOS por sector (capa #hero-fx) ── */
.hero-fx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
.hfx{position:absolute;left:50%;top:42%;pointer-events:none;will-change:transform,opacity}
.hfx-flash{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,172,.7),rgba(255,178,62,.2) 45%,transparent 68%);animation:hfxFlash .5s var(--ease) forwards}
@keyframes hfxFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
.hfx-bar{width:96px;height:15px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.4);animation:hfxBar .85s var(--ease) forwards}
.hfx-bar.bar-a{--dy:-18px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.hfx-bar.bar-b{--dy:2px;background:linear-gradient(90deg,#B79BFF,var(--corona-2));animation-delay:.1s}
.hfx-bar.bar-c{--dy:22px;background:linear-gradient(90deg,#6EE7A8,var(--green));animation-delay:.2s}
@keyframes hfxBar{0%{opacity:0;transform:translate(-50%,calc(-50% - 60px)) scaleX(.3)}45%,80%{opacity:1;transform:translate(-50%,calc(-50% + var(--dy))) scaleX(1)}100%{opacity:0;transform:translate(-50%,calc(-50% + var(--dy))) scaleX(1)}}
.hfx-spark{font-size:20px;color:var(--gold-2);transform:translate(-50%,-50%);animation:hfxSpark .8s var(--ease) forwards}
@keyframes hfxSpark{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-130px) scale(1.1)}}
.hfx-sweep{width:280px;height:280px;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.8);animation:hfxRing .7s var(--ease) forwards}
.hfx-ring{width:60px;height:60px;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.85);animation:hfxRing .8s var(--ease) forwards}
@keyframes hfxRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
.hfx-colorwave{width:80px;height:80px;border-radius:50%;border:4px solid;border-color:#FFB23E #9C7BFF #22D3EE #EC4899;animation:hfxRing .85s var(--ease) forwards,hfxSpin .85s linear forwards}
@keyframes hfxSpin{to{rotate:360deg}}
.hfx-dot{width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px currentColor;animation:hfxDot .8s var(--ease) forwards}
@keyframes hfxDot{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-110px)}}
.hfx-piece{width:42px;height:42px;border-radius:8px;background:repeating-linear-gradient(45deg,#2A2E3A 0 6px,#1B1E26 6px 12px);box-shadow:inset 0 0 0 1px #3A4150;animation:hfxPiece .85s var(--ease) forwards}
.hfx-piece.pc-a{--tx:-95px;--ty:-42px}.hfx-piece.pc-b{--tx:0px;--ty:64px}.hfx-piece.pc-c{--tx:95px;--ty:-42px}
@keyframes hfxPiece{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(120deg)}}

/* ═══════════════════════════════════════════════════════════════
   FASE 2 (inicio) · PORTADA PINEADA — se va al bajar (sin scroll
   vertical), entras por un PORTAL dorado visible. Tuneable con tu ojo.
   ═══════════════════════════════════════════════════════════════ */
#e1.pin-wrap{min-height:0;display:block;padding:0;overflow:hidden;overflow:clip}
.pin-portada{overflow:hidden;overflow:clip}
/* la portada recede + se funde según --p → desaparece EN EL SITIO, sin scroll vertical */
.stage-e1{position:relative;z-index:1;transform-origin:50% 50%;transform:scale(var(--fit,1))}
html:not(.motion-ok) .stage-e1{transform:none;opacity:1}
/* portal dorado VISIBLE que se abre al descender (entras en el círculo) */
.enter-portal{display:none}   /* retirado: el viaje de escena ya gestiona la salida de la portada (antes: agujero negro raro) */

/* ═══════════════════════════════════════════════════════════════
   DECK FIJO — escenario pineado, bloques apilados en el MISMO sitio.
   El scroll SOLO cruza-funde qué bloque está. La página NUNCA se mueve
   en vertical: el siguiente aparece donde estaba el anterior.
   ═══════════════════════════════════════════════════════════════ */
html,body{height:100%;overflow:hidden}               /* DECK VIRTUAL: la página NUNCA scrollea — sin barra, sin sticky, sin restauración */
body{padding-bottom:0}
#main,#deck{position:relative;width:100%;height:100%}
#stage{position:fixed;inset:0;overflow:hidden;overflow:clip;z-index:1} /* pinneado al viewport REAL: inmune a svh/zoom/altura-JS */
#stage > .scene{
  position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;
  padding:calc(var(--nav-h) + 8px) 14px calc(var(--band-x) + 10px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  opacity:var(--in,0);will-change:opacity;transition:none}
#stage > #e1{--in:1}                                /* portada visible antes del JS (sin flash) */
/* neutralizar pins/sticky internos: el deck YA es el escenario fijo */
#stage .pin-wrap{height:auto!important}
#stage > #e1,#stage > #proyecto{height:100%!important;min-height:0!important}
#stage .pin{position:static!important;min-height:0!important;height:100%!important;width:100%;padding:0;display:flex;align-items:center;justify-content:center;overflow:visible}
/* #juega es una escena NORMAL (se centra + escala por --fit como libreria); el drag sobrevive por usar rects de pantalla */
#stage #e8 .stage,#stage #acceso .stage,#stage #e10 .stage{padding-top:0;padding-bottom:0}
#stage > #e10{align-items:flex-start}   /* FAQ: contenido anclado ARRIBA → al abrir acordeones crece hacia abajo, no se pierde por arriba */
/* cada bloque se ESCALA para caber (sin scroll interno); centrado */
#stage > .scene > *{transform:scale(var(--fit,1));transform-origin:center center;flex:0 0 auto;max-width:100%}
/* la portada conserva su recede por --p; el fundido lo hace el --in del deck */
#stage #e1 .stage-e1{opacity:1}
/* la constelación marca el bloque activo (ya existe); el dock/banda siguen fijos */
/* sutil profundidad al entrar/salir → sensación de "travelling" SIN mover la página */
#stage > .scene:not(#e1){transform:scale(calc(0.955 + var(--in,0) * 0.045))}
html:not(.motion-ok) #stage > .scene{transform:none}
/* portada: el fit va al CONTENIDO del hero (.stage-e1, ya integrado en su transform), NO al pin con sus huecos */
#stage > #e1 > *{transform:none}
#stage > #e1{padding-bottom:14px}             /* la banda está oculta en la portada → recupera ese espacio */

/* ── arreglos de la revisión adversarial ── */
/* cierre (registro/FAQ/legal): se ESCALA para caber en una pantalla (sin scroll interno que atrape) */
#stage > #acceso,#stage > #e10{padding-top:calc(var(--nav-h) + 14px);padding-bottom:calc(var(--band-x) + 14px)}
/* demo (juega): el lienzo con altura acotada (el drag usa rects de pantalla, sobrevive al --fit) */
#stage #juega #lienzo{height:min(46vh,410px);height:min(46svh,410px)}
/* ruedas contextuales: el halo no se recorta */
.ctx-host{overflow:visible}
.ctx-wheel.dw::before{inset:-26%}
/* amanecer (#e8): respaldo de legibilidad por si el oro tarda en el cruce */
#stage #e8 .display-2,#stage #e8 h2,#stage #e8 .turn{text-shadow:0 1px 0 rgba(255,240,210,.6),0 0 20px rgba(255,178,62,.4)}

/* ═══════════════════════════════════════════════════════════════════
   BUILD 5 · escenas-CAPACIDAD (capacidades protagonistas, noche = hilo fino)
   Reveals SOLO bajo html.motion-ok → sin JS/reduce-motion todo se ve igual.
   ═══════════════════════════════════════════════════════════════════ */
/* kicker numerado sobre el h2 de cada capacidad */
.cap-kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);opacity:.9;margin-bottom:12px}

/* ── BUSCAR · flagship ── */
.finder-big{font-size:15px;padding:18px}
.finder-field{display:flex;align-items:center;gap:9px;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:11px}
.finder-ic{opacity:.7;font-size:15px}
.finder-q{color:var(--gold-2);font-weight:600;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:15px}
.caret{width:2px;height:1.05em;background:var(--gold);display:inline-block;margin-left:-4px}
html.motion-ok .caret{animation:caretBlink 1.05s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.finder-speed{margin-left:auto;font-size:12px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.finder-speed.flash{animation:speedFlash .32s var(--ease)}
@keyframes speedFlash{0%{transform:scale(1.22);color:var(--gold)}100%{transform:scale(1);color:var(--green)}}
.finder-big .finder-rows{margin-top:13px}
.finder-big .frow{padding:11px 14px;cursor:default}
.f-ic{flex:0 0 auto;font-size:15px;opacity:.85}
.f-meta{flex:0 0 auto;color:var(--faint);font-size:12px;margin-left:8px}
.finder-meta{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}
.finder-meta strong{color:var(--gold-2);font-variant-numeric:tabular-nums}
html.motion-ok #buscar-rows .res{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
html.motion-ok #buscar-rows .res.in{opacity:1;transform:none}

/* ── EFECTOS · a la selección de golpe ── */
.fx-stage{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:10px;min-height:120px}
.fx-clip{flex:0 0 auto;min-width:86px;padding:14px 18px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--dim);font-weight:600;text-align:center;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.fx-clip.lit{color:#241500;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:var(--gold);box-shadow:0 0 22px rgba(var(--accent-rgb),.4);transform:translateY(-2px)}
.fx-clip.lit::after{content:" ✦"}
.fx-chips{flex-basis:100%;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fx-chips span{font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.4);color:var(--gold-2)}
html.motion-ok .fx-chips:not(.show){opacity:0;transform:translateY(6px)}

/* ── ASSETS · listos para soltar ── */
.asset-stage{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:12px;padding:8px;max-width:380px;margin:0 auto}
.asset-tile{padding:20px 14px;border-radius:12px;border:1px solid var(--line-2);font-weight:700;font-size:14px;text-align:center;color:var(--txt);position:relative;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.asset-tile[data-t="negro"]{background:#000}
.asset-tile[data-t="barras"]{background:linear-gradient(90deg,#c8c8c8 0 14%,#c8c800 0 28%,#00c8c8 0 42%,#00c800 0 56%,#c800c8 0 70%,#c80000 0 84%,#0000c8 0 100%);color:#fff}
.asset-tile[data-t="ajuste"]{background:linear-gradient(135deg,rgba(var(--accent-rgb),.28),rgba(109,74,255,.22))}
.asset-tile[data-t="mate"]{background:#141720;background:repeating-conic-gradient(#1c1f29 0 25%,#0d0f16 0 50%) 0/22px 22px}
html.motion-ok .asset-tile{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .42s var(--ease),transform .42s var(--ease)}
html.motion-ok .asset-tile.in{opacity:1;transform:none}

/* ═══ LA HUCHA DE LA NOCHE · el contador se abre en su desglose auditable ═══ */
#tl-counter{cursor:pointer;border-radius:8px}
#tl-counter:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ledger{position:absolute;bottom:calc(100% + 10px);right:8px;z-index:5;width:min(320px,92vw);
  background:linear-gradient(180deg,rgba(13,16,24,.98),rgba(8,10,16,.99));border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:16px;padding:14px 14px 12px;box-shadow:0 18px 50px rgba(0,0,0,.62),var(--halo);
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;pointer-events:none;
  transition:opacity .2s var(--ease),transform .24s var(--slow)}
.ledger.open{opacity:1;transform:none;pointer-events:auto}
html:not(.motion-ok) .ledger{transition:none}
.ledger::after{content:"";position:absolute;bottom:-7px;right:24px;width:12px;height:12px;
  background:linear-gradient(135deg,rgba(13,16,24,.99),rgba(8,10,16,.99));
  border-right:1px solid rgba(var(--accent-rgb),.35);border-bottom:1px solid rgba(var(--accent-rgb),.35);transform:rotate(45deg)}
.ledger-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ledger-title{font-weight:700;font-size:13px;color:var(--gold-2)}
.ledger-seal{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#241500;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-radius:999px;padding:3px 9px;white-space:nowrap}
.ledger-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:6px}
.ledger-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
html.motion-ok .ledger-bar i{transition:width .5s var(--slow)}
.ledger-tot{font-size:12px;color:var(--faint);margin-bottom:10px}
.ledger-tot strong{color:var(--gold);font-size:15px;font-variant-numeric:tabular-nums}
.ledger-rows{display:flex;flex-direction:column;gap:3px;max-height:min(46vh,320px);max-height:min(46svh,320px);overflow-y:auto;overscroll-behavior:contain}
.lrow{display:flex;align-items:center;gap:11px;min-height:44px;padding:7px 10px;border-radius:10px;
  background:transparent;border:1px solid transparent;color:var(--dim);font:inherit;font-size:14px;cursor:pointer;
  text-align:left;width:100%;opacity:.45;transition:opacity .2s,background .15s,border-color .15s}
.lrow .lic{flex:0 0 auto;width:22px;text-align:center;font-size:15px;color:var(--faint)}
.lrow .lname{flex:1}
.lrow .lmin{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--faint)}
.lrow .lmin small{font-weight:400;font-size:11px;opacity:.7}
.lrow.lit{opacity:1;color:var(--txt)}
.lrow.lit .lic{color:var(--accent)}
.lrow.lit .lmin{color:var(--gold)}
.lrow:hover,.lrow:focus-visible{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.3);outline:none}
.ledger-foot{margin:9px 0 0;font-size:11px;color:var(--faint);text-align:center}
#constellation a.led-hi{background:var(--accent);box-shadow:0 0 11px rgba(var(--accent-rgb),.8);transform:scale(1.9)}

/* ── ola de color al confirmar tu acento (lavado a pantalla completa) ── */
.colorwave{position:fixed;inset:0;z-index:215;pointer-events:none;
  background:radial-gradient(circle at 50% 58%,var(--cw),transparent 60%);
  opacity:0;transform:scale(.3);transform-origin:50% 58%;animation:colorWash .72s var(--slow) forwards}
@keyframes colorWash{0%{opacity:0;transform:scale(.3)}28%{opacity:.5}100%{opacity:0;transform:scale(1.85)}}
html:not(.motion-ok) .colorwave{display:none}

/* ═══ PERF · congelar animaciones de escenas FUERA DE PANTALLA ═══
   Bajo el render por SOFTWARE de Lighthouse/PSI (CPU sin GPU) una animación CSS perpetua invisible se
   sigue rasterizando cada frame → la página nunca queda "quieta" → el trazado se alarga y el TBT dispara.
   main.js marca .hl-still en cada escena cuando su --in cae a ~0. Cero cambio visible (no está en pantalla). */
.scene.hl-still,
.scene.hl-still *,
.scene.hl-still *::before,
.scene.hl-still *::after,
.scene.hl-still::before,
.scene.hl-still::after{animation-play-state:paused !important}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTACIÓN «NUBE + TEAMS» (#nube) — panel vivo recreado + tiempo real.
   Prefijos cl-* (nube) / tm-* (teams). Acento único oro; violeta = color de
   persona (Kenji); verde = estado. Solo transform/opacity animan; glows horneados.
   Iconos = SVG (sin emoji → misma métrica en toda máquina).
   ═══════════════════════════════════════════════════════════════════════════ */
#nube{--violet:#9C7BFF;--violet-rgb:156,123,255;--cyan:#22D3EE;--mag:#EC4899;
  --cl-line2:rgba(255,255,255,.055);--cl-ob:cubic-bezier(.34,1.56,.64,1);
  --cl-panel:linear-gradient(180deg,#12151d,#0b0d13)}
#nube .cl-stage{display:flex;flex-direction:column;gap:16px;width:100%;max-width:880px;margin:0 auto}
#nube h2{font-size:clamp(24px,3.2vw,38px);line-height:1.12}   /* estacion mas compacta: titular menor que el resto */
#nube .st-lead{max-width:42ch;font-size:14.5px}
.cl-diffs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cl-diff{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--dim);
  padding:6px 11px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.cl-diff b{color:var(--gold-2);font-weight:700}
.cl-diff svg{width:13px;height:13px;color:var(--gold-2);flex:0 0 13px}
/* lockup de marca de las dos herramientas (Cloud + Teams) con glow dorado horneado */
.cl-brands{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
.cl-brand{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--dim)}
.cl-brand b{color:var(--gold);font-weight:800}
.cl-brand-ic{width:32px;height:32px;flex:0 0 32px;filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.5))}
.cl-brand-ic svg{width:100%;height:100%;display:block}
/* panel vivo */
.cl-live{position:relative;border-radius:18px;border:1px solid var(--line);background:var(--cl-panel);
  box-shadow:0 20px 60px rgba(0,0,0,.5);padding:14px;overflow:hidden}
/* MAPA ESTELAR (guino simple; el CSS cl- y tm- de abajo queda superseded/muerto -> purgar en limpieza) */
.cl-map{position:relative;height:clamp(300px,42vw,352px);border-radius:14px;overflow:hidden;background:radial-gradient(130% 130% at 50% 46%,#141a27,#080b12 72%);border:1px solid var(--cl-line2)}
.cl-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.cl-hud{position:absolute;top:12px;right:14px;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--faint);z-index:4}
.cl-hud i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}
html.motion-ok .cl-hud i{animation:clPulse 2s var(--ease) infinite}
.cl-hud b{color:var(--dim);font-variant-numeric:tabular-nums;transition:color .3s}
.cl-hud b.bump{color:var(--gold)}
.cl-sun-c{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:72px;height:72px;z-index:3;pointer-events:none;transition:transform .3s var(--cl-ob),filter .3s}
.cl-sun-c svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 13px rgba(var(--accent-rgb),.55))}
.cl-live.flare .cl-sun-c{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.9))}
.cl-topbar{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.cl-live-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--gold-2);
  padding:5px 11px;border-radius:20px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.24)}
.cl-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
html.motion-ok .cl-live-dot{animation:clPulse 2s var(--ease) infinite}
@keyframes clPulse{0%,100%{opacity:.5}50%{opacity:1}}
.cl-status{font-size:12.5px;color:var(--faint);transition:color .3s}
.cl-status b{color:var(--dim);font-weight:600}
.cl-replay{margin-left:auto;height:30px;padding:0 12px;border-radius:9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);transition:.15s var(--ease)}
.cl-replay:hover{color:var(--txt);border-color:rgba(var(--accent-rgb),.4)}
.cl-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:13px;position:relative}
.cl-panel{background:linear-gradient(180deg,#12151d,#0d1017);border:1px solid var(--cl-line2);border-radius:13px;padding:12px}
.cl-ph{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.cl-ph svg{width:14px;height:14px;opacity:.8;color:var(--gold)}
.cl-crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);margin-bottom:12px;flex-wrap:wrap}
.cl-crumb .sep{color:var(--faint)}.cl-crumb .cur{color:var(--txt);font-weight:600}
.cl-tree{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.cl-node{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px;font-size:13px;color:var(--dim);border:1px solid transparent}
.cl-node .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gold);display:inline-flex;align-items:center;justify-content:center}
.cl-node .ic svg{width:15px;height:15px}
.cl-node.root{color:var(--txt);font-weight:600}
html.motion-ok .cl-node.pop{animation:clNodePop .5s var(--cl-ob)}
@keyframes clNodePop{0%{transform:scale(1)}40%{transform:scale(1.05);border-color:rgba(var(--accent-rgb),.5)}100%{transform:scale(1)}}
.cl-node .diamond{width:12px;height:12px;color:var(--violet);margin-left:auto;display:inline-flex;align-items:center;justify-content:center}
.cl-node .diamond svg{width:11px;height:11px}
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cl-card{position:relative;height:96px;border-radius:11px;border:1px solid var(--cl-line2);overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.02),transparent)}
.cl-card .thumb{position:absolute;inset:0 0 38px 0;display:grid;place-items:center;color:var(--faint)}
.cl-card .thumb svg{width:26px;height:26px}
.cl-card .nubebadge{position:absolute;top:6px;right:7px;width:14px;height:14px;color:var(--gold-2);display:inline-flex}
.cl-card .nubebadge svg{width:14px;height:14px}
.cl-card .dur{position:absolute;top:6px;left:7px;font-size:10px;font-weight:600;color:var(--txt);background:rgba(0,0,0,.5);padding:2px 5px;border-radius:6px;font-variant-numeric:tabular-nums}
.cl-card .meta{position:absolute;left:0;right:0;bottom:0;padding:7px 8px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.cl-card .nm{font-size:11px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-card .sub{font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-slot{position:relative;height:96px}
.cl-slot .layer{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.cl-slot .skel{border-radius:11px;border:1px solid var(--cl-line2);overflow:hidden;background:#0e1118}
.cl-slot .skel .shimmer{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(var(--accent-rgb),.09) 50%,transparent 70%);background-size:200% 100%}
html.motion-ok .cl-slot.show-skel .skel .shimmer{animation:clShim 1.1s linear infinite}
@keyframes clShim{to{background-position:-200% 0}}
.cl-slot .skel .bar{position:absolute;background:rgba(255,255,255,.05);border-radius:5px}
.cl-slot.show-skel .skel{opacity:1}.cl-slot.show-card .card{opacity:1}
html.motion-ok .cl-slot .card.settle{animation:clSettle .5s var(--cl-ob)}
@keyframes clSettle{0%{transform:scale(1.04)}100%{transform:scale(1)}}
.cl-flash{position:absolute;inset:0;border-radius:11px;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.7),0 0 26px rgba(var(--accent-rgb),.5);opacity:0}
html.motion-ok .cl-slot.flash .cl-flash{animation:clFlash .7s var(--ease)}
@keyframes clFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.cl-toast{position:absolute;left:8px;bottom:8px;z-index:5;font-size:10.5px;font-weight:600;color:var(--gold-2);background:rgba(0,0,0,.62);border:1px solid rgba(var(--accent-rgb),.3);padding:3px 8px;border-radius:7px;opacity:0}
html.motion-ok .cl-slot.toast .cl-toast{animation:clToast 2s var(--ease)}
@keyframes clToast{0%{opacity:0;transform:translateY(4px)}15%,70%{opacity:1;transform:none}100%{opacity:0}}
.cl-xfer{margin-top:10px;border-top:1px solid var(--cl-line2);padding-top:9px}
.cl-xfer-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:9px}
.cl-xfer-h .sun{display:inline-flex;color:var(--gold)}.cl-xfer-h .sun svg{width:14px;height:14px}
.cl-space{height:6px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:5px}
.cl-space i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(.34);border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:transform .5s var(--ease)}
.cl-space-txt{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;margin-bottom:10px}
.cl-row{display:flex;align-items:center;gap:9px;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s}
.cl-row.on{opacity:1;max-height:40px}
.cl-row .dir{width:20px;height:20px;flex:0 0 20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.28)}
.cl-row .dir svg{width:12px;height:12px}
.cl-row.done .dir{color:var(--green);background:rgba(62,196,109,.12);border-color:rgba(62,196,109,.3)}
.cl-row .rnm{font-size:12px;color:var(--txt);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row .rmini{width:56px;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;flex:0 0 56px}
.cl-row .rmini i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:transform .1s linear}
.cl-row .rst{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto;width:98px;text-align:right}
.cl-row.done .rst{color:var(--green);font-weight:600}
.cl-mach{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--faint);opacity:.35;transition:opacity .5s}
.cl-mach.on{opacity:1;color:var(--dim)}.cl-mach .chk{color:var(--green)}
.cl-mach svg{width:14px;height:14px;opacity:.75}
.cl-mk{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--faint);opacity:.55}
.cl-mk .soon{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
/* TEAMS */
.tm-teams{display:flex;flex-direction:column;gap:12px}
.tm-bubble{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.24);font-size:12.5px;color:var(--dim)}
.tm-bubble .ic{display:inline-flex;color:var(--gold)}.tm-bubble .ic svg{width:15px;height:15px}
.tm-badge{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:11px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#241300;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 3px 10px rgba(var(--accent-rgb),.4);transform:scale(0);transition:transform .3s var(--cl-ob);font-variant-numeric:tabular-nums}
.tm-badge.on{transform:scale(1)}
.tm-list{background:linear-gradient(180deg,#12151d,#0d1017);border:1px solid var(--cl-line2);border-radius:14px;padding:10px;flex:1}
.tm-list-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:9px}
.tm-list-h .ic{display:inline-flex;color:var(--faint)}.tm-list-h .ic svg{width:14px;height:14px}
.tm-conv{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:9px}
.tm-conv+.tm-conv{border-top:1px solid var(--cl-line2)}
.tm-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#0b0d13}
.tm-cmain{flex:1;min-width:0}
.tm-nm{font-size:13px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px}
.tm-nm .alias{font-size:10.5px;font-weight:500;color:var(--faint)}
.tm-pv{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-time{font-size:10.5px;color:var(--faint);flex:0 0 auto}
.tm-conv.kenji{transition:background .3s}.tm-conv.kenji.hot{background:rgba(var(--violet-rgb),.08)}
.tm-tz{font-size:10px;color:var(--violet);opacity:0;transition:opacity .3s}.tm-conv.kenji.hot .tm-tz{opacity:1}
.tm-msg{opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s}.tm-msg.on{opacity:1;max-height:60px;margin-top:4px}
.tm-sender{font-size:10.5px;font-weight:700;color:var(--violet);margin:0 0 2px}
.tm-mtext{display:inline-block;font-size:12px;color:var(--txt);background:rgba(var(--violet-rgb),.1);border:1px solid rgba(var(--violet-rgb),.24);padding:6px 10px;border-radius:10px 10px 10px 3px}
.tm-code{display:flex;align-items:center;gap:8px;margin-top:2px}
.tm-code input{flex:1;height:34px;border-radius:9px;border:1px solid var(--line);background:#0a0c12;color:var(--txt);font:inherit;font-size:12.5px;padding:0 11px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tm-code .add{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tm-hint{font-size:10.5px;color:var(--faint);margin-top:6px}
/* HILO / PAQUETE */
.cl-wire{position:absolute;inset:0;pointer-events:none;z-index:4}
.cl-wire path{fill:none;stroke:rgba(var(--accent-rgb),0);stroke-width:1.5;stroke-dasharray:4 5;transition:stroke .4s}
.cl-live.wire-on .cl-wire path{stroke:rgba(var(--accent-rgb),.28)}
html.motion-ok .cl-live.wire-on .cl-wire path{animation:clDash 1s linear infinite}
@keyframes clDash{to{stroke-dashoffset:-18}}
.cl-packet{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;z-index:6;opacity:0;pointer-events:none;background:radial-gradient(circle at 40% 40%,var(--gold-2),var(--gold));box-shadow:0 0 14px 3px rgba(var(--accent-rgb),.6)}
.cl-packet.on{opacity:1}
/* remate cadena + marketplace */
.cl-chain{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid var(--cl-line2)}
.cl-chain-avs{display:flex;align-items:center}
.cl-chain-avs .ca{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:11px;color:#0b0d13;margin-left:-8px;border:2px solid #0d1017}
.cl-chain-avs .ca:first-child{margin-left:0}
.cl-chain-line{flex:0 0 40px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .6s var(--slow),box-shadow .6s}
.cl-live.linked .cl-chain-line{background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 12px rgba(var(--accent-rgb),.5)}
.cl-chain-txt{font-size:12.5px;color:var(--faint);transition:color .5s}.cl-live.linked .cl-chain-txt{color:var(--dim)}
.cl-chain-txt b{color:var(--gold-2);font-weight:600}
.cl-live .microcopy{margin-top:9px}
/* Movil: el panel vivo se apila y se hace altisimo → como #juega, se oculta y la cabecera+video llevan la escena. */
@media(max-width:860px){#nube .cl-live{display:none}.cl-stage{gap:0}}