/* ============================================================
   4REVOLUCIONES — styles.css
   Cine neobrutalista 100% CSS. Sin imágenes, solo código.
   ============================================================ */

:root{
  --ink:#0d0d0d;
  --paper:#f2eee4;
  --yellow:#ffd100;
  --pink:#ff3d81;
  --cyan:#00e0ff;
  --lime:#c3ff00;
  --orange:#ff6b1a;
  --red:#ff2d2d;
  --bw:4px;
  --sh:8px 8px 0 var(--ink);
  --font-d:'Archivo Black','Arial Black',system-ui,sans-serif;
  --font-m:'Space Mono','Courier New',monospace;
  --accent-sv:#ffd100;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);
  font-family:var(--font-m);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* ============ PLAYER / STAGE ============ */

#player{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:
    repeating-linear-gradient(45deg,#1a1a1a 0 22px,#0d0d0d 22px 44px);
}
#stage-wrap{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr;
  place-items:center;
  position:relative;
  padding:10px;
}
#stage{
  position:relative;
  width:min(100%,calc((100vh - 96px)*16/9));
  height:min(100%,calc((100vw - 20px)*9/16));
  background:var(--ink);
  border:var(--bw) solid var(--ink);
  box-shadow:0 0 0 4px var(--paper), 10px 10px 0 var(--ink);
  overflow:hidden;
  cursor:crosshair;
}

/* ============ SCENES ============ */

.scene{position:absolute;inset:0;display:none;overflow:hidden}
.scene.active{display:block}
.scene.exit .wrap, .scene.exit .coldword{animation:exitZoom .5s cubic-bezier(.7,0,.3,1) forwards}

.bg{position:absolute;inset:0}
.bg-yellow{background:var(--yellow)}
.bg-pink{background:var(--pink)}
.bg-cyan{background:var(--cyan)}
.bg-lime{background:var(--lime)}
.bg-orange{background:var(--orange)}
.bg-ink{background:var(--ink)}
.bg-paper{background:var(--paper)}

.bg-grid{
  background-image:
    linear-gradient(var(--ink) 2px,transparent 2px),
    linear-gradient(90deg,var(--ink) 2px,transparent 2px);
  background-size:46px 46px;
  opacity:.10;
}
.bg-grid-strong{
  background-image:
    linear-gradient(var(--ink) 3px,transparent 3px),
    linear-gradient(90deg,var(--ink) 3px,transparent 3px);
  background-size:40px 40px;
  opacity:.14;
}
.bg-grid-inv{
  background-image:
    linear-gradient(var(--paper) 2px,transparent 2px),
    linear-gradient(90deg,var(--paper) 2px,transparent 2px);
  background-size:46px 46px;
  opacity:.07;
}
.bg-stripes{background:repeating-linear-gradient(115deg,transparent 0 70px,rgba(0,0,0,.28) 70px 110px)}
.bg-stripes.orange{background-color:var(--orange)}
.bg-stripes.cyan{background-color:var(--cyan)}
.bg-stripes.lime{background-color:var(--lime)}
.bg-stripes.pink{background-color:var(--pink)}

.ghost{
  position:absolute;right:-2%;bottom:-9%;
  font-family:var(--font-d);font-size:min(30vw,340px);
  line-height:1;color:transparent;
  -webkit-text-stroke:3px rgba(13,13,13,.14);
  pointer-events:none;white-space:nowrap;
}
.ghost-w{-webkit-text-stroke-color:rgba(242,238,228,.14)}

/* escenas "pantalla" (wrap centrado) */
.wrap{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.4vh,26px);padding:30px 6% 70px;text-align:center;
}
.wrap.wide{gap:clamp(12px,2.8vh,30px)}

/* animación de entrada por elemento (stagger con --i) */
.seq{animation:seqIn .55s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--i)*.12s)}
.slam{animation:slamIn .7s cubic-bezier(.16,1.3,.3,1) both;animation-delay:calc(var(--i)*.1s)}
.blow{animation:blowIn .8s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i)*.12s)}
.light *{color:var(--paper)}

/* ============ COLD OPEN ============ */

.coldword{
  font-family:var(--font-d);
  font-size:clamp(3rem,11vw,10rem);
  letter-spacing:-.02em;color:var(--ink);
  animation:coldIn .5s steps(6) both, shake .16s linear 2;
  animation-delay:calc(var(--i)*.15s),calc(var(--i)*.15s + .3s);
}
.substamp{
  font-family:var(--font-m);font-weight:700;
  font-size:clamp(.8rem,2vw,1.3rem);
  border:3px solid var(--ink);background:var(--paper);
  padding:.4em .9em;box-shadow:5px 5px 0 var(--ink);
  animation:seqIn .5s ease both;animation-delay:calc(var(--i)*.15s);
}

/* ============ TÍTULO ============ */

.logo-box{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:center;filter:url(#none)}
.logo-4{
  font-family:var(--font-d);font-size:clamp(5rem,15vw,13rem);line-height:.9;
  color:var(--yellow);background:var(--ink);
  border:6px solid var(--yellow);box-shadow:14px 14px 0 var(--yellow);
  padding:.05em .18em;
}
.logo-rev{
  font-family:var(--font-d);font-size:clamp(3rem,8.5vw,7.5rem);line-height:1;
  color:var(--paper);text-shadow:6px 6px 0 var(--pink);
}
.logo-iso{
  font-family:var(--font-m);font-weight:700;font-size:clamp(.7rem,1.6vw,1rem);
  color:var(--yellow);border:3px solid var(--yellow);padding:.3em .6em;
  align-self:center;letter-spacing:.2em;animation:isoBlink 1.6s steps(2) infinite;
}
.title-sub{
  font-family:var(--font-d);font-size:clamp(1rem,2.9vw,2.1rem);color:var(--paper);
  max-width:16em;line-height:1.25;min-height:1.3em;
  border-left:8px solid var(--pink);padding-left:.7em;text-align:left;
}
.title-sub::after{content:"▊";color:var(--lime);animation:caretBlink .7s steps(1) infinite}
.stamp{
  font-family:var(--font-m);font-weight:700;font-size:clamp(.65rem,1.5vw,.95rem);
  color:var(--ink);background:var(--yellow);border:4px solid var(--ink);
  padding:.55em 1.1em;box-shadow:var(--sh);
  transform:rotate(-2deg);line-height:1.5;
}
.stamp b{text-decoration:underline;text-decoration-thickness:3px}

/* ============ CAPÍTULOS / PUERTAS ============ */

.kicker{
  font-family:var(--font-m);font-weight:700;letter-spacing:.35em;
  font-size:clamp(.8rem,2vw,1.3rem);color:var(--ink);background:var(--yellow);
  border:4px solid var(--ink);box-shadow:var(--sh);padding:.45em 1.1em;transform:rotate(-1.5deg);
}
.chapter-title{
  font-family:var(--font-d);text-transform:uppercase;
  font-size:clamp(2.4rem,8.5vw,7.5rem);line-height:.95;color:var(--paper);
  text-shadow:8px 8px 0 rgba(242,238,228,.18);
}
.accent.orange{color:var(--orange)}
.accent.cyan{color:var(--cyan)}
.accent.lime{color:var(--lime)}
.accent.pink{color:var(--pink)}
.sticker{
  font-family:var(--font-d);font-size:clamp(1rem,3vw,2rem);color:var(--paper);
  border:4px solid var(--paper);background:var(--ink);
  padding:.3em .8em;transform:rotate(2deg);
}
.sticker.cyan-s{color:var(--cyan);border-color:var(--cyan);box-shadow:6px 6px 0 var(--cyan)}
.sticker.lime-s{color:var(--ink);border-color:var(--lime);background:var(--lime);box-shadow:6px 6px 0 var(--lime)}
.sticker.pink-s{color:var(--pink);border-color:var(--pink);box-shadow:6px 6px 0 var(--pink)}

/* vapor en puerta cap1 */
.steam-puffs{position:absolute;bottom:22%;left:14%;pointer-events:none}
.puff{
  position:absolute;bottom:0;width:46px;height:46px;border-radius:50%;
  background:var(--paper);opacity:.85;
  animation:puff 2.4s ease-out infinite;animation-delay:var(--d);
}
.puff::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:6px solid var(--paper);opacity:.5}
@keyframes puff{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  15%{opacity:.85}
  100%{transform:translate(var(--x),-120px) scale(2.1);opacity:0}
}

/* bombilla puerta cap2 */
.bulb-big{height:clamp(70px,16vh,150px);animation:bulbFlicker 2.2s steps(2) infinite}
.rays line{stroke:var(--paper);stroke-width:6;animation:rayPulse 1.1s ease-in-out infinite alternate}
@keyframes bulbFlicker{0%,90%,100%{opacity:1}92%{opacity:.25}94%{opacity:1}97%{opacity:.45}}

/* chip puerta cap3 */
.chip-big{height:clamp(70px,16vh,150px)}
.pin{animation:pinBlink 1s steps(1) infinite}
.blink-b{animation-delay:.33s}.blink-c{animation-delay:.66s}
@keyframes pinBlink{50%{opacity:.15}}

/* cerebro puerta cap4 */
.brain-big{height:clamp(70px,15vh,140px)}
.brain-pulse{animation:brainPulse 1.6s ease-in-out infinite alternate;transform-origin:center}
.syn line{stroke-dasharray:4 8;animation:sspin 2.4s linear infinite}
@keyframes brainPulse{to{transform:scale(1.15);opacity:.5}}
@keyframes sspin{to{stroke-dashoffset:-48}}

/* ============ MARQUESINA ============ */

.mq{
  position:absolute;left:0;right:0;bottom:3px;z-index:4;
  height:44px;background:var(--paper);border-top:4px solid var(--ink);
  overflow:hidden;display:flex;align-items:center;
}
.mq-track{
  display:flex;white-space:nowrap;
  font-family:var(--font-m);font-weight:700;font-size:.85rem;letter-spacing:.12em;
  animation:mq 16s linear infinite;
}
.mq-track span{padding-right:2em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ ESCENAS DE CONTENIDO ============ */

.sc-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:center}
.sc-head h3{
  font-family:var(--font-d);text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,3.4rem);letter-spacing:-.01em;line-height:1;
  border-bottom:6px solid var(--ink);padding-bottom:.12em;
}
.sc-head.light h3{border-color:var(--paper);color:var(--paper)}
.tag{
  font-family:var(--font-m);font-weight:700;font-size:clamp(.65rem,1.4vw,.9rem);
  background:var(--ink);color:var(--paper);border:3px solid var(--ink);
  padding:.35em .7em;transform:rotate(-2deg);white-space:nowrap;
}
.sc-head.light .tag{background:var(--paper);color:var(--ink)}

.cols{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(14px,3vw,42px);align-items:center;width:100%;max-width:1080px;
}
@media (max-width:820px){.cols{grid-template-columns:1fr}}

.art{border:5px solid var(--ink);background:var(--paper);box-shadow:var(--sh);padding:12px}
.art svg{width:100%;height:auto;display:block}
.art-cap{
  font-family:var(--font-m);font-weight:700;font-size:clamp(.6rem,1.2vw,.82rem);
  margin-top:10px;padding-top:8px;border-top:3px dashed var(--ink);letter-spacing:.04em;
}
.paper-cap{color:var(--paper);border-color:var(--paper)}

.stack{display:flex;flex-direction:column;gap:clamp(8px,1.8vh,16px);min-width:0}

.card{
  position:relative;text-align:left;
  background:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  padding:.9em 1em .9em .9em;display:flex;gap:14px;align-items:flex-start;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.card p{font-size:clamp(.72rem,1.55vw,1rem);line-height:1.45;color:var(--ink)}
.card b{background:var(--yellow);padding:0 .2em;border:2px solid var(--ink)}
.yr{
  flex:0 0 auto;align-self:center;
  font-family:var(--font-d);font-size:clamp(.62rem,1.5vw,.95rem);
  background:var(--paper);border:3px solid var(--ink);
  padding:.28em .45em;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);text-align:center;max-width:92px;line-height:1.15;
}

.stat-box{
  text-align:center;background:var(--yellow);border:5px solid var(--ink);
  box-shadow:var(--sh);padding:14px 20px;
}
.stat-box.ink{background:var(--ink);border-color:var(--paper);box-shadow:8px 8px 0 var(--paper)}
.stat-box.ink label,.stat-box.ink .cnt{color:var(--paper)}
.cnt{
  font-family:var(--font-d);font-size:clamp(2.2rem,6.5vw,4.6rem);line-height:1;
  display:block;color:var(--ink);
}
.stat-box label{
  display:block;font-family:var(--font-m);font-weight:700;
  font-size:clamp(.6rem,1.3vw,.85rem);letter-spacing:.06em;margin-top:6px;
}
.stat-box i{font-style:normal;opacity:.65}

.grid3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,26px);
  width:100%;max-width:1080px;
}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.stat-line{
  display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap;
  background:var(--yellow);border:5px solid var(--ink);box-shadow:var(--sh);padding:10px 22px;max-width:1080px;
}
.stat-line .cnt{font-size:clamp(1.6rem,4vw,3rem)}
.stat-line label{font-family:var(--font-m);font-weight:700;font-size:clamp(.62rem,1.3vw,.88rem);letter-spacing:.05em;text-align:left;max-width:34em}

/* ============ SVG ANIMACIONES ============ */

.shuttle{animation:shuttle 2.4s ease-in-out infinite alternate}
.shuttle.d2{animation-delay:.3s}.shuttle.d3{animation-delay:.6s}.shuttle.d4{animation-delay:.9s}
.shuttle.d5{animation-delay:1.2s}.shuttle.d6{animation-delay:1.5s}
@keyframes shuttle{from{transform:translateX(-235px)}to{transform:translateX(0)}}
.cloth{animation:clothGrow 1.2s ease-out both}
@keyframes clothGrow{from{opacity:0}to{opacity:.85}}

.piston-rod{animation:piston 1.1s ease-in-out infinite alternate;transform-box:view-box}
@keyframes piston{from{transform:translateX(-10px)}to{transform:translateX(24px)}}
.flywheel{animation:spin 2.2s linear infinite;transform-origin:230px 100px;transform-box:view-box}
.valve{animation:piston 1.1s ease-in-out infinite alternate;transform-box:view-box;animation-delay:.3s}
.steam circle{animation:steamUp 1.3s ease-out infinite;transform-box:view-box}
.steam circle:nth-child(1){animation-delay:0s}.steam circle:nth-child(2){animation-delay:.4s}
.steam circle:nth-child(3){animation-delay:.8s}.steam circle:nth-child(4){animation-delay:1.1s}
@keyframes steamUp{from{transform:translateY(6px) scale(.8);opacity:.9}to{transform:translateY(-16px) scale(1.35);opacity:0}}

.wheel{animation:spin 1.6s linear infinite;transform-origin:center;transform-box:view-box}
.wheel:nth-of-type(2){animation-duration:1.6s}
.train-smoke circle{animation:steamUp 1.4s ease-out infinite;transform-box:view-box}
.train-smoke circle:nth-child(1){animation-delay:0s}.train-smoke circle:nth-child(2){animation-delay:.45s}
.train-smoke circle:nth-child(3){animation-delay:.9s}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rotate{to{transform:rotate(360deg)}}

.belt{animation:beltMove 1s linear infinite}
@keyframes beltMove{from{background-position:0 0}to{background-position:34px 0}}
.car{animation:carDrive 6s linear infinite}
@keyframes carDrive{from{transform:translateX(-90px)}to{transform:translateX(140px)}}
.arm{animation:armBob 1.4s steps(4) infinite;transform-box:view-box}
.arm.d2{animation-delay:.7s}
@keyframes armBob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

.telegraph-key{animation:keyTap .9s steps(2) infinite;transform-box:view-box}
@keyframes keyTap{50%{transform:translateY(8px)}}
.morseblink{animation:pinBlink .7s steps(1) infinite}
.morseblink.d2{animation-delay:.25s}.morseblink.d3{animation-delay:.5s}.morseblink.d4{animation-delay:.15s}
.dotsrow rect{animation:pinBlink .6s steps(1) infinite}
.dotsrow rect:nth-child(2){animation-duration:1s;animation-delay:.1s}
.dotsrow rect:nth-child(3){animation-delay:.3s}
.dotsrow rect:nth-child(4){animation-duration:1s;animation-delay:.2s}
.dotsrow rect:nth-child(5){animation-delay:.4s}

.bars rect{animation:barGrow 1s cubic-bezier(.2,.9,.3,1) both;transform-box:view-box;transform-origin:bottom}
.bars rect:nth-child(1){animation-delay:.1s}.bars rect:nth-child(2){animation-delay:.3s}
.bars rect:nth-child(3){animation-delay:.5s}.bars rect:nth-child(4){animation-delay:.7s}
.bars rect:nth-child(5){animation-delay:.9s}.bars rect:nth-child(6){animation-delay:1.1s}
@keyframes barGrow{from{transform:scaleY(0)}}

.robot-arm{animation:armWork 2.2s ease-in-out infinite alternate;transform-box:view-box}
.robot-arm line:nth-child(3){animation:armWork2 2.2s ease-in-out infinite alternate;transform-box:view-box;transform-origin:150px 40px}
@keyframes armWork{from{transform:translateY(0)}to{transform:translateY(6px)}}
@keyframes armWork2{from{transform:rotate(0deg)}to{transform:rotate(38deg)}}
.grip{animation:gripOpen 2.2s ease-in-out infinite alternate;transform-box:view-box}
@keyframes gripOpen{from{transform:scaleX(1)}to{transform:scaleX(.72)}}
.robot-base .robot-arm{}

.nnlines line{stroke-dasharray:5 7;animation:sspin 3s linear infinite}
.brain-big .syn line{stroke-dasharray:3 6;animation:sspin 2s linear infinite}
.iotlines line{animation:sspin 2.8s linear infinite}
.iot circle{animation:brainPulse 1.3s ease-in-out infinite alternate}
.iot circle:nth-child(2){animation-delay:.2s}.iot circle:nth-child(3){animation-delay:.4s}
.iot circle:nth-child(4){animation-delay:.6s}.iot circle:nth-child(5){animation-delay:.8s}
.iot circle:nth-child(6){animation-delay:.3s}.iot circle:nth-child(7){animation-delay:.5s}

/* ============ TERMINAL (ch3 internet) ============ */

.terminal{
  width:100%;min-height:200px;background:#0a0a0a;color:var(--lime);
  border:5px solid var(--lime);box-shadow:10px 10px 0 var(--lime);
  font-family:var(--font-m);padding:0;text-align:left;
}
.term-bar{
  background:var(--lime);color:var(--ink);font-weight:700;font-size:.72rem;
  padding:7px 10px;border-bottom:3px solid var(--ink);letter-spacing:.08em;
}
.term-dot{display:inline-block;width:12px;height:12px;background:var(--ink);margin-right:6px;vertical-align:middle}
.term-dot.red-dot{background:var(--red)}
.term-line{padding:18px 16px 6px;font-weight:700;font-size:clamp(.85rem,1.8vw,1.15rem);line-height:1.8}
.big-lo{font-family:var(--font-d);font-size:clamp(2.2rem,6vw,3.6rem);color:var(--lime)}
.caret{animation:caretBlink .6s steps(1) infinite;color:var(--lime)}
.term-note{
  padding:4px 16px 16px;font-size:clamp(.6rem,1.3vw,.82rem);
  color:var(--lime);opacity:.75;letter-spacing:.08em;
}

/* ============ RECAP / TIMELINE ============ */

.timeline{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,20px);
  width:100%;max-width:1120px;
}
@media (max-width:860px){.timeline{grid-template-columns:repeat(2,1fr)}}
.tl-block{
  text-align:center;background:var(--paper);border:5px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);padding:16px 10px 14px;position:relative;
  animation:tlPulse 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*.5s);
}
.tl-block:nth-child(1){animation-delay:0s}.tl-block:nth-child(2){animation-delay:1.6s}
.tl-block:nth-child(3){animation-delay:3.2s}.tl-block:nth-child(4){animation-delay:4.8s}
@keyframes tlPulse{to{transform:translateY(-8px)}}
.tl-bar{height:14px;border:3px solid var(--ink);border-radius:0;margin-bottom:12px}
.orange-tl .tl-bar{background:var(--orange)}
.cyan-tl .tl-bar{background:var(--cyan)}
.lime-tl .tl-bar{background:var(--lime)}
.pink-tl .tl-bar{background:var(--pink)}
.tl-block .tl-yr{font-family:var(--font-m);font-weight:700;font-size:clamp(.6rem,1.2vw,.8rem);display:block}
.tl-block b{font-family:var(--font-d);font-size:clamp(1rem,2.6vw,1.9rem);display:block;margin:4px 0 2px;text-transform:uppercase}
.tl-block i{font-style:normal;font-family:var(--font-m);font-size:clamp(.58rem,1.1vw,.78rem);font-weight:700;opacity:.7}
.timeline-arrow{
  font-family:var(--font-d);font-size:clamp(1.3rem,3.6vw,2.8rem);color:var(--yellow);
  animation:caretBlink 1.4s steps(2) infinite;
}

/* ============ FIN ============ */

.the-end{
  position:relative;font-family:var(--font-d);font-size:clamp(4rem,14vw,12rem);
  line-height:1;color:var(--ink);letter-spacing:-.02em;
  text-shadow:8px 8px 0 var(--paper);
}
.the-end .glitch{
  position:absolute;inset:0;color:var(--pink);opacity:0;pointer-events:none;
}
.the-end:hover .glitch{
  animation:glitchShake .5s steps(3) infinite;opacity:1;
}
.credits{
  font-family:var(--font-m);font-weight:700;font-size:clamp(.7rem,1.7vw,1.05rem);
  display:flex;flex-direction:column;gap:7px;color:var(--ink);
  border:4px solid var(--ink);background:var(--paper);box-shadow:var(--sh);padding:16px 24px;
}
.credits b{background:var(--ink);color:var(--yellow);padding:.1em .4em;font-size:.85em}
.endnote{
  font-family:var(--font-d);letter-spacing:.15em;font-size:clamp(.8rem,1.9vw,1.2rem);
  animation:caretBlink 1.8s steps(2) infinite;
}

/* ============ CONFETI (título) ============ */

.confetti-zone{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.conf{
  position:absolute;top:-30px;width:14px;height:14px;
  border:3px solid var(--ink);opacity:0;
  animation:confFall linear forwards;
}
@keyframes confFall{
  0%{transform:translateY(-30px) rotate(0);opacity:1}
  90%{opacity:1}
  100%{transform:translateY(105vh) rotate(720deg);opacity:0}
}

/* ============ HUD / WIPE / OVERLAYS ============ */

#hud-top{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:8px 14px;pointer-events:none;
  font-family:var(--font-m);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  color:var(--paper);text-shadow:2px 2px 0 var(--ink);
}
.rec{display:flex;align-items:center;gap:7px;color:var(--red)}
.rec i{
  width:11px;height:11px;border-radius:50%;background:var(--red);
  animation:recBlink 1s steps(1) infinite;box-shadow:2px 2px 0 var(--ink);
}
@keyframes recBlink{50%{opacity:.15}}
#hud-top .branding{letter-spacing:.22em;opacity:.85}
.timecode{margin-left:auto;background:var(--ink);border:2px solid var(--paper);padding:3px 8px;box-shadow:3px 3px 0 var(--paper)}

#wipe{
  position:absolute;inset:0;z-index:40;background:var(--ink);
  transform:translateY(102%);pointer-events:none;
  transition:transform .22s cubic-bezier(.7,0,.3,1);
}
#wipe.cover{transform:translateY(0);transition-duration:.2s}

#noise{
  position:absolute;inset:0;z-index:18;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;background-size:140px 140px;
  animation:noiseJitter .5s steps(4) infinite;
}
@keyframes noiseJitter{0%{transform:translate(0,0)}25%{transform:translate(-2px,2px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}100%{transform:translate(1px,1px)}}

#scan{
  position:absolute;inset:0;z-index:17;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55;
}
#vignette{
  position:absolute;inset:0;z-index:16;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.42) 100%);
}

#fx{position:absolute;inset:0;z-index:2;pointer-events:none}

/* ============ CONTROLS ============ */

#controls{
  flex:0 0 auto;background:var(--paper);
  border-top:6px solid var(--ink);
  display:flex;align-items:center;gap:18px;
  padding:10px 16px;flex-wrap:wrap;
  box-shadow:0 -6px 0 rgba(255,255,255,.06);
}
.ctl-btns{display:flex;gap:8px}
.ctl-btn{
  font-family:var(--font-d);font-size:.85rem;letter-spacing:.05em;
  background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:9px 14px;cursor:pointer;line-height:1;
  transition:transform .08s ease,box-shadow .08s ease;
}
.ctl-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.ctl-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.ctl-btn.primary{background:var(--yellow)}
.ctl-btn.playing{background:var(--ink);color:var(--yellow)}

.ctl-progress{flex:1;min-width:220px;display:flex;align-items:center;gap:12px}
.progress{
  position:relative;flex:1;height:26px;
  border:4px solid var(--ink);background:var(--paper);
  cursor:pointer;display:flex;
}
.era-chunk{height:100%;border-right:2px solid var(--ink)}
.era-o{background:var(--orange)}.era-c{background:var(--cyan)}
.era-l{background:var(--lime)}.era-p{background:var(--pink)}
.knob{
  position:absolute;top:-5px;left:0;width:14px;height:28px;
  background:var(--ink);border:3px solid var(--yellow);
  transform:translateX(-4px);pointer-events:none;
  box-shadow:3px 3px 0 var(--ink);
}
.chips{display:flex;gap:6px}
.chip{
  font-family:var(--font-d);font-size:.75rem;border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);padding:6px 10px;cursor:pointer;background:var(--paper);
  transition:transform .08s ease;
}
.chip:hover{transform:translate(-1px,-1px)}
.chip:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.chip-o{background:var(--orange)}.chip-c{background:var(--cyan)}
.chip-l{background:var(--lime)}.chip-p{background:var(--pink)}
.ctl-note{
  font-family:var(--font-m);font-size:.62rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink);opacity:.7;white-space:nowrap;
}

/* ============ GATE (portada de reproducción) ============ */

#gate{
  position:fixed;inset:0;z-index:100;
  background:
    repeating-linear-gradient(115deg,var(--yellow) 0 90px,var(--pink) 90px 180px,var(--cyan) 180px 270px,var(--lime) 270px 360px);
  display:grid;place-items:center;padding:20px;
  transition:opacity .45s ease,transform .45s ease;
}
#gate.hidden{opacity:0;transform:scale(1.06);pointer-events:none}
.gate-inner{
  background:var(--paper);border:8px solid var(--ink);box-shadow:16px 16px 0 var(--ink);
  padding:clamp(24px,5vh,54px) clamp(24px,5vw,70px);
  text-align:center;max-width:820px;width:100%;
  transform:rotate(-.6deg);
}
.gate-logo{
  font-family:var(--font-d);font-size:clamp(3rem,9vw,7rem);line-height:1;
  color:var(--yellow);background:var(--ink);border:5px solid var(--yellow);
  box-shadow:10px 10px 0 var(--yellow);display:inline-block;padding:.08em .25em;
  margin-bottom:22px;
}
.gate-title{
  font-family:var(--font-d);text-transform:uppercase;
  font-size:clamp(1.3rem,3.6vw,2.6rem);line-height:1.1;margin-bottom:14px;
}
.gate-sub{font-family:var(--font-m);font-weight:700;font-size:clamp(.75rem,1.7vw,1rem);margin-bottom:8px}
.gate-audio{font-family:var(--font-m);font-size:clamp(.7rem,1.5vw,.9rem);margin-bottom:22px}
.gate-audio b{background:var(--yellow);border:2px solid var(--ink);padding:.1em .3em}
.btn-start{
  font-family:var(--font-d);font-size:clamp(1rem,2.6vw,1.7rem);text-transform:uppercase;
  background:var(--pink);color:var(--paper);border:5px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);padding:16px 34px;cursor:pointer;
  animation:startPulse 1.3s ease-in-out infinite alternate;
}
@keyframes startPulse{to{transform:translateY(-5px) rotate(-1deg)}}
.btn-start:hover{background:var(--yellow);color:var(--ink)}
.gate-hint{
  font-family:var(--font-m);font-size:.62rem;font-weight:700;letter-spacing:.08em;
  margin-top:18px;opacity:.75;
}

/* ============ KEYFRAMES BASE ============ */

@keyframes seqIn{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes slamIn{
  0%{opacity:0;transform:scale(2.6) rotate(-4deg)}
  60%{opacity:1;transform:scale(.96) rotate(1deg)}
  100%{opacity:1;transform:none}
}
@keyframes blowIn{
  0%{opacity:0;transform:translateX(-40px) rotate(-2deg);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes coldIn{
  0%{opacity:0;transform:scale(3) translateY(-20%);letter-spacing:.4em}
  100%{opacity:1;transform:none;letter-spacing:-.02em}
}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-5px,2px)}
  50%{transform:translate(4px,-3px)}
  75%{transform:translate(-3px,-2px)}
}
@keyframes exitZoom{
  to{opacity:0;transform:scale(1.14) translateY(-12px);filter:blur(4px)}
}
@keyframes caretBlink{50%{opacity:0}}
@keyframes isoBlink{50%{background:var(--pink);color:var(--paper)}}
@keyframes rayPulse{from{transform:scale(1);opacity:.6}to{transform:scale(1.3);opacity:1}}
@keyframes glitchShake{
  0%{transform:translate(2px,-2px);clip-path:inset(0 0 55% 0)}
  25%{transform:translate(-3px,1px);clip-path:inset(30% 0 30% 0)}
  50%{transform:translate(3px,2px);clip-path:inset(60% 0 5% 0)}
  75%{transform:translate(-2px,-2px);clip-path:inset(15% 0 70% 0)}
  100%{transform:translate(2px,1px);clip-path:inset(0 0 0 0)}
}