/* =========================================================
   Las 4 Revoluciones Industriales · estilo neobrutalista
   Lienzo fijo de 1920×1080 escalado a la ventana.
   ========================================================= */
:root{
  --ink:#121212; --paper:#FFF3E0; --white:#fff;
  --c1:#FF6B1A; --c2:#FFCF1A; --c3:#2ED3F5; --c4:#FF4FA0; --lime:#B6FF3B;
  --fd:'Archivo Black','Arial Black',Impact,sans-serif;
  --fb:'Space Grotesk',system-ui,sans-serif;
  --fm:'Space Mono',ui-monospace,Menlo,monospace;
  --beat:0;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:#0b0b0b;font-family:var(--fb);color:var(--ink)}

/* ---------- Escenario ---------- */
#viewport{position:fixed;inset:0;overflow:hidden;background:#0b0b0b}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--paper);cursor:pointer}
#camera,.scene,.kb,#wipes,#flash,#fade,#grain,#vignette,#hud{position:absolute;inset:0}
.scene{overflow:hidden}
#wipes,#flash,#fade,#grain,#vignette,#hud{pointer-events:none}
#flash{background:#fff;opacity:0}
#fade{background:#000;opacity:0}
#grain{opacity:.1;mix-blend-mode:multiply;background-size:256px 256px}
#vignette{background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.26) 100%)}

/* ---------- Componentes ---------- */
.grid-bg{background-color:var(--paper);
  background-image:linear-gradient(rgba(18,18,18,.08) 2px,transparent 2px),linear-gradient(90deg,rgba(18,18,18,.08) 2px,transparent 2px);
  background-size:80px 80px}
.dots-bg{background-color:var(--paper);background-image:radial-gradient(rgba(18,18,18,.2) 2.5px,transparent 3.2px);background-size:36px 36px}
.box{background:#fff;border:6px solid var(--ink);box-shadow:16px 16px 0 var(--ink)}
.tag{display:inline-block;font:700 30px/1 var(--fm);padding:14px 22px;border:5px solid var(--ink);background:#fff;
  box-shadow:7px 7px 0 var(--ink);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.tag.dark{background:var(--ink);color:#fff}
.tag.c{background:var(--c)}
.sticker{display:inline-block;font:700 30px/1 var(--fb);padding:14px 26px;border:5px solid var(--ink);border-radius:999px;
  box-shadow:6px 6px 0 var(--ink);background:#fff;rotate:var(--r,0deg);white-space:nowrap}
.ln{display:block}
.w,.ch{display:inline-block}
.w{white-space:nowrap}
.type.typing::after{content:'▌';margin-left:2px}
.stripes{position:absolute;inset:-200px;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 40px,transparent 40px 80px)}

/* ---------- Intro ---------- */
.blk{position:absolute;border:6px solid var(--ink);box-shadow:14px 14px 0 var(--ink);overflow:hidden}
.blk b{position:absolute;right:26px;bottom:-24px;font:220px/1 var(--fd);color:transparent;-webkit-text-stroke:5px var(--ink)}
.ititle{position:absolute;left:250px;top:280px;width:1420px;padding:40px 70px 50px}
.ititle h1{font:146px/.98 var(--fd);margin-top:22px;letter-spacing:-.01em}
.ititle .tag{font-size:40px}
.isub{position:absolute;top:780px;left:0;right:0;text-align:center}
.isub .tag{font-size:40px;padding:16px 28px;min-width:200px}
.istk{position:absolute;left:1440px;top:220px;--r:8deg;background:var(--lime);font-size:36px}
.iyears{position:absolute;top:890px;left:0;right:0;display:flex;justify-content:center;gap:26px}
.iyears .tag{font-size:34px}
.marquee{position:absolute;left:-40px;right:-40px;top:985px;height:96px;background:var(--ink);rotate:-1.2deg;overflow:hidden;border-top:6px solid var(--ink)}
.mq{white-space:nowrap;font:46px/96px var(--fd);color:var(--c2);display:inline-block}

/* ---------- Portadilla de capítulo ---------- */
.card{background:var(--c)}
.numeral{position:absolute;left:90px;top:140px;font:600px/.85 var(--fd);color:#fff;-webkit-text-stroke:14px var(--ink);
  paint-order:stroke fill;text-shadow:24px 24px 0 var(--ink)}
.card-info{position:absolute;left:850px;top:250px;width:1000px}
.card-info .tag.dark{font-size:34px}
.ctitle{font:92px/1 var(--fd);margin:38px 0 44px}
.ctitle .ln{overflow:hidden;padding:0 .04em .06em;margin-bottom:-.02em}
.card-info .row{display:flex;gap:26px;flex-wrap:wrap}
.card-info .row .tag{font-size:32px}

/* ---------- Plano A: concepto ---------- */
.illus{position:absolute;left:110px;top:170px;width:860px;height:660px;background:var(--c)}
.illus > svg{width:100%;height:100%;display:block}
.badge{position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;background:#fff;border:6px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.badge svg{width:100%;height:100%;display:block}
.badge text{font:700 21px var(--fm);fill:var(--ink)}
.badge .bnum{font:64px var(--fd)}
.txt{position:absolute;left:1070px;top:170px;width:780px}
.head{font:60px/1.04 var(--fd);margin:34px 0 30px}
.body{font:500 29px/1.4 var(--fb);background:#fff;border:5px solid var(--ink);padding:22px 28px;box-shadow:10px 10px 0 var(--ink)}
.stickers{display:flex;flex-wrap:wrap;gap:20px 18px;margin-top:38px}
.sp{transform-box:fill-box;transform-origin:center}
.svgd{font-family:var(--fd)}
.svgm{font-family:var(--fm);font-weight:700}

/* ---------- Plano B: hitos ---------- */
.sb-head{position:absolute;left:110px;top:150px;display:flex;align-items:center;gap:30px}
.sb-head h3{font:54px/1 var(--fd)}
.mile{position:absolute;top:270px;width:390px;height:370px;display:flex;flex-direction:column}
.mile .yr{font:92px/1 var(--fd);background:var(--c);border-bottom:6px solid var(--ink);padding:22px 24px 16px}
.mile .mt{font:700 34px/1.1 var(--fb);padding:20px 24px 10px}
.mile .md{font:500 25px/1.36 var(--fb);padding:0 24px}
.conn{position:absolute;top:646px;width:6px;height:50px;background:var(--ink);transform-origin:top}
.tl-line{position:absolute;left:110px;top:696px;width:1700px;height:10px;background:var(--ink);transform-origin:left center}
.tdot{position:absolute;top:683px;width:36px;height:36px;border-radius:50%;background:var(--c);border:6px solid var(--ink)}
.fact{position:absolute;left:110px;top:750px;width:1700px;height:165px;display:flex;align-items:center;gap:36px;padding:0 40px;background:var(--ink);color:#fff;box-shadow:16px 16px 0 var(--c)}
.fact .tag{font-size:34px;color:var(--ink)}
.fact .ft{font:46px/1.05 var(--fd);color:var(--c);text-transform:uppercase}
.fact .fd{font:500 29px/1.3 var(--fb);margin-top:8px;min-height:38px}

/* ---------- HUD ---------- */
.brand{position:absolute;left:40px;top:30px;font-size:20px;padding:12px 18px;display:flex;align-items:center;gap:14px}
.beat-dot{display:inline-block;width:16px;height:16px;background:var(--c4);border:3px solid var(--ink);scale:calc(.7 + var(--beat)*.6)}
.chips{position:absolute;right:46px;top:26px;display:flex;gap:16px}
.chip{width:78px;height:64px;border:5px solid var(--ink);background:#fff;font:32px/54px var(--fd);text-align:center;box-shadow:6px 6px 0 var(--ink);transition:background .25s,translate .25s,box-shadow .25s,color .25s}
.chip.done{background:var(--ink);color:#fff}
.chip.on{background:var(--c);translate:0 -4px;box-shadow:8px 10px 0 var(--ink)}
.tlhud{position:absolute;left:110px;top:998px;width:1700px;height:50px;border:5px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--ink)}
.tlfill{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--c1) 0 25%,var(--c2) 25% 50%,var(--c3) 50% 75%,var(--c4) 75% 100%);background-size:1690px 100%}
.tk{position:absolute;top:0;bottom:0;border-left:4px solid var(--ink)}
.tk:first-of-type{border-left:0}
.tk span{position:absolute;left:10px;top:0;font:700 19px/40px var(--fm)}
.tk.end{border-left:0}
.tk.end span{left:auto;right:10px}
.pin{position:absolute;top:-12px;bottom:-12px;width:0;border-left:6px solid var(--ink);margin-left:-3px}
.pyear{position:absolute;bottom:calc(100% + 8px);left:0;transform:translateX(-50%) scale(calc(1 + var(--beat)*.07));
  font:34px/1 var(--fd);background:var(--ink);color:#fff;padding:10px 16px;border:4px solid var(--ink);box-shadow:5px 5px 0 rgba(0,0,0,.25)}

/* ---------- Cortinillas ---------- */
.wipe{position:absolute;inset:0}
.wipe i{position:absolute;left:-2%;width:104%;height:25.5%;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}

/* ---------- Cierre ---------- */
.oa-head{position:absolute;left:110px;top:120px;display:flex;align-items:center;gap:30px}
.oa-head h3{font:54px/1 var(--fd)}
.ocol{position:absolute;top:230px;width:390px;height:540px;padding:26px 28px;display:flex;flex-direction:column}
.ocol .on{font:170px/.9 var(--fd);color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:10px 10px 0 var(--ink)}
.ocol .oy{align-self:flex-start;font-size:26px;padding:10px 16px;margin:auto 0 20px}
.ocol .ok{font:38px/1.05 var(--fd);margin-bottom:12px}
.ocol .od{font:600 25px/1.3 var(--fb)}
.gap{position:absolute;top:812px;width:0;display:flex;justify-content:center}
.gap .tag{font-size:26px;background:var(--lime)}
.ofoot{position:absolute;top:900px;left:0;right:0;text-align:center}
.ofoot span{position:relative;display:inline-block;font:50px/1 var(--fd)}
.ofoot .ul{position:absolute;left:-10px;right:-10px;bottom:-6px;height:20px;background:var(--c2);z-index:-1;transform-origin:left center}
.outroB{background:var(--c)}
.ob-q{position:absolute;top:200px;left:0;right:0;text-align:center;font:196px/1 var(--fd);color:#fff;-webkit-text-stroke:12px var(--ink);
  paint-order:stroke fill;text-shadow:18px 18px 0 var(--ink)}
.ob-tag{position:absolute;top:520px;left:0;right:0;text-align:center}
.ob-tag .tag{font-size:44px;padding:18px 30px}
.ob-txt{position:absolute;top:650px;left:260px;right:260px;min-height:200px;padding:34px 44px;font:700 48px/1.25 var(--fb);text-align:center}
.endc{background:var(--ink)}
.fin{position:absolute;top:150px;left:0;right:0;text-align:center;font:400px/1 var(--fd);color:var(--paper)}
.cred{position:absolute;top:700px;left:0;right:0;text-align:center;color:var(--paper);font:700 30px/1.3 var(--fm)}
.cred > div{display:block}
.cred-b{font:56px/1.1 var(--fd)!important;color:var(--c2);margin:16px 0}

/* ---------- Interfaz del reproductor ---------- */
#ui{position:fixed;inset:0;pointer-events:none;font-family:var(--fb)}
#ui.idle{cursor:none}
#bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);pointer-events:auto;transition:opacity .3s,transform .3s}
#ui.idle #bar{opacity:0;transform:translateY(24px)}
#bar button{font:700 18px var(--fb);min-width:46px;height:40px;border:3px solid var(--ink);background:var(--c2);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
#bar button:active{translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}
#time{font:700 15px var(--fm);min-width:118px;text-align:center}
#scrub{position:relative;flex:1;height:30px;border:3px solid var(--ink);cursor:pointer;touch-action:none}
#sfill{position:absolute;left:0;top:0;bottom:0;background:rgba(18,18,18,.35);pointer-events:none}
#shead{position:absolute;top:-8px;bottom:-8px;width:8px;margin-left:-4px;background:var(--ink);pointer-events:none}
#marks{position:absolute;inset:0;pointer-events:none}
.mark{position:absolute;top:0;bottom:0;border-left:3px solid var(--ink);font:700 12px/24px var(--fm);padding-left:4px}
#splash{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.5);pointer-events:auto;padding:16px}
.sp-card{background:var(--paper);border:6px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:34px 40px;max-width:640px;text-align:center}
.sp-k{display:inline-block;font:700 14px var(--fm);text-transform:uppercase;background:var(--ink);color:#fff;padding:6px 10px}
.sp-card h1{font:clamp(30px,5vw,48px)/1.02 var(--fd);margin:16px 0 10px}
.sp-d{font:500 17px/1.4 var(--fb);margin-bottom:22px}
#bigplay{font:26px var(--fd);padding:16px 34px;background:var(--c4);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);cursor:pointer}
#bigplay:not(:disabled):hover{translate:-2px -2px;box-shadow:10px 10px 0 var(--ink)}
#bigplay:disabled{opacity:.55;cursor:progress}
#status{font:700 14px var(--fm);margin-top:18px}
.sp-hint{font:500 13px/1.4 var(--fb);margin-top:10px;opacity:.75}