:root{--ink:#070C1A;--amber:#FFB300;--blue:#3E8BFF;--green:#39E09B}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden;font-family:'Inter Tight','Inter',system-ui,sans-serif;color:#fff}
#screen{position:fixed;inset:0;background:#000}
/* relación 16:9 centrada (carta para pantalla 1920x1080) */
#stage{position:absolute;inset:0}
.layer{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.layer.show{opacity:1}
.cap{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden}
.media{position:absolute;inset:0}
.media video,.media{width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.media.soft video,.media.soft{filter:brightness(.45) saturate(1.05)}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,26,.85) 30%,rgba(7,12,26,.35) 65%,rgba(7,12,26,.1))}
.scrim.soft{background:linear-gradient(0deg,rgba(7,12,26,.7),rgba(7,12,26,.15))}
.content{position:relative;z-index:2;padding:0 7vw;max-width:80%}
.content.center{max-width:90%;text-align:center;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.glow{position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 10%,rgba(255,255,255,.10),transparent 60%)}
.demo{position:absolute;left:7vw;top:7vh;z-index:3;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:4px 11px}

/* tipografías grandes legibles a distancia */
.brand{font-weight:900;font-size:clamp(50px,9vw,140px);line-height:.95;color:var(--fg)}
.brand.big{font-size:clamp(60px,11vw,170px)}
.title{font-weight:900;font-size:clamp(34px,5.5vw,84px);line-height:1.02;color:var(--fg)}
.title.big{font-size:clamp(40px,6vw,92px);max-width:20ch}
.sub{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(18px,2.4vw,38px);color:var(--fg);opacity:.92;margin-top:18px;max-width:24ch}
.content.center .sub{margin-left:auto;margin-right:auto}
.sub.big{font-weight:500;font-size:clamp(22px,3vw,46px);max-width:22ch}
.kic{font-weight:800;font-size:clamp(20px,2.6vw,40px);color:var(--ac)}

/* trivia */
.trivia .content{max-width:84%}
.q{font-weight:800;font-size:clamp(26px,3.6vw,56px);margin:14px 0 22px;color:var(--fg);max-width:22ch}
.opts{display:flex;flex-direction:column;gap:12px;max-width:18ch}
.opt{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(16px,2vw,30px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 20px;color:var(--fg)}
.opt b{color:var(--ac);margin-right:10px}
.opt.correct{animation:correctReveal 0s linear 4s forwards}
@keyframes correctReveal{to{background:rgba(57,224,155,.18);border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}}
.note{font-family:'Inter',sans-serif;font-size:clamp(13px,1.3vw,20px);color:var(--fg);opacity:.6;margin-top:22px}

/* weather */
.wrow{display:flex;align-items:baseline;gap:26px;margin:16px 0}
.temp{font-weight:900;font-size:clamp(60px,11vw,150px);color:var(--fg);line-height:.9}
.wcity{font-weight:700;font-size:clamp(24px,3vw,48px);color:var(--ac)}
.wpills{display:flex;gap:14px;flex-wrap:wrap}
.wpill{font-family:'Inter',sans-serif;font-size:clamp(14px,1.5vw,24px);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:8px 18px;color:var(--fg)}

/* tip */
.tipicon{font-size:clamp(40px,6vw,90px);margin-bottom:14px}

/* split */
.splitwrap{position:absolute;inset:0;display:flex;z-index:1}
.half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hbrand{font-weight:900;font-size:clamp(36px,6vw,90px)}
.hnote{font-family:'Inter',sans-serif;font-size:clamp(14px,1.6vw,26px);opacity:.85;margin-top:8px}
.splitsub{position:absolute;left:0;right:0;bottom:11%;text-align:center;z-index:3;font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(16px,2vw,32px);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}

/* closing */
.closebrand{font-weight:900;font-size:clamp(40px,7vw,110px);color:var(--ac);margin-top:24px;letter-spacing:-.02em}
.answer{font-family:'Inter',sans-serif;font-size:clamp(13px,1.4vw,22px);color:var(--fg);opacity:.7;margin-top:18px;border-top:1px solid rgba(255,255,255,.15);padding-top:14px}

/* HUD: identificador PRT + chip categoría + barra tiempo + reloj */
.hud{position:fixed;inset:0;pointer-events:none;z-index:50}
.prtid{position:absolute;right:2.5vw;top:2.5vh;font-weight:900;font-size:clamp(14px,1.5vw,22px);letter-spacing:-.02em;color:#fff;opacity:.92;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.prtid b{color:var(--amber)}
.chip{position:absolute;left:2.5vw;bottom:4.2vh;font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(11px,1.1vw,16px);letter-spacing:.16em;text-transform:uppercase;color:#06101f;background:#fff;border-radius:30px;padding:7px 16px}
.chip.k-pub{background:var(--amber);color:#06101f}
.chip.k-entret{background:var(--green);color:#06101f}
.chip.k-util{background:var(--blue);color:#fff}
.chip.k-servicio{background:#fff;color:#06101f}
.chip.k-cierre{background:#fff;color:#06101f}
.idx{position:absolute;right:2.5vw;bottom:4.4vh;font-family:'Space Grotesk',monospace;font-size:clamp(11px,1.1vw,15px);color:rgba(255,255,255,.6)}
.clock{position:absolute;left:2.5vw;top:2.5vh;font-family:'Space Grotesk',monospace;font-size:clamp(12px,1.3vw,18px);color:rgba(255,255,255,.7)}
.timebar{position:fixed;left:0;bottom:0;height:6px;width:100%;background:rgba(255,255,255,.10);z-index:60}
#bar{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--blue))}

/* animaciones de entrada */
.anim-up{opacity:0;transform:translateY(24px);animation:up .6s cubic-bezier(.2,.8,.2,1) forwards}
.anim-zoom{opacity:0;transform:scale(.9);animation:zoom .6s cubic-bezier(.2,.8,.2,1) forwards}
.anim-left{animation:fromL .6s cubic-bezier(.2,.8,.2,1)}
.anim-right{animation:fromR .6s cubic-bezier(.2,.8,.2,1)}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}
@keyframes up{to{opacity:1;transform:none}}
@keyframes zoom{to{opacity:1;transform:none}}
@keyframes fromL{from{transform:translateX(-30px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fromR{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}