@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;800&family=Space+Mono:wght@700&display=swap");
:root{--page:#000;--bg:#0a0a0a;--fg:#f4f1e8;--mut:#8f8b7e;--card:#131313;--card2:#0a0a0a;--line:#2b2b2b;--acc:#ffd400;--acc2:#ff5a1f;--acc3:#f4f1e8;--onacc:#000;--c1:#ffd400;--c2:#ff5a1f;--c3:#fff;--ok:#ffd400;--warn:#ff5a1f;
--fh:'Anton',sans-serif;--fb:'Archivo',sans-serif;--fn:'Space Mono',monospace;--r:0;--rc:0;--rc2:0;--rd:0;--rt:0;--rt2:0;--rth:0;--bw:2px;--tt:uppercase;--h2w:400;--h2:68px;--h3:15px;--h3w:400;--ls:.01em;--ls3:.08em;--sn:26px;--rw:14px;--cap:butt;--bh:250px;--tabbg:#000;
--bshade:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 35%,rgba(0,0,0,.9))}
body{font-size:16px}
/* fotos siempre en blanco y negro; el color lo ponen las franjas */
.band,.th,.strip i,.plancard,.hero{background-color:#2a2a28;background-blend-mode:luminosity}
.band{filter:contrast(1.12);padding-bottom:26px}
.band:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,var(--acc) 0 12px,#000 12px 24px);background-size:34px 34px;animation:slide 1.4s linear infinite}
@keyframes slide{to{background-position:34px 0}}
.band h2{font-size:78px;line-height:.86;-webkit-text-stroke:0}
.band .bsub{font-family:var(--fn);color:var(--acc);letter-spacing:.2em;text-transform:uppercase;font-size:11px}
.stat{padding-bottom:4px}
/* tarjetas ordenadas: etiqueta amarilla + contenido */
.card{background:var(--card);border:2px solid var(--line);padding:16px 14px 14px;margin-bottom:12px}
.card h3{display:inline-block;background:var(--acc);color:#000;padding:4px 10px 3px;margin:-16px 0 14px -14px;font-size:16px}
.card.plancard{padding:16px 14px;border:0}
.btn{box-shadow:4px 4px 0 var(--acc2);font-size:17px;letter-spacing:.06em;padding:13px 20px}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.big-btn{box-shadow:4px 4px 0 var(--acc2)}.big-btn.done{box-shadow:none;border-width:2px}
.chip{font-family:var(--fh);font-size:15px;letter-spacing:.06em;padding:8px 14px}
.chip.on,.emo.on{box-shadow:3px 3px 0 var(--acc2);transform:none}
.emo b{font-size:22px}.emo{border-width:2px}
.tabbar{left:0;right:0;bottom:0;border-width:3px 0 0;border-color:var(--acc);padding:4px 6px 12px;gap:4px}
.tab{border:2px solid transparent}.tab.on{background:var(--acc)}
.tab span{font-family:var(--fh);font-size:14px;font-weight:400;letter-spacing:.1em}
.srow .inp{font-family:var(--fn);font-size:18px;padding:8px 4px;border-width:2px}
.chk{border-width:2px}.srow.ok .chk{transform:none;box-shadow:3px 3px 0 var(--acc2)}
.th{width:60px;height:60px;border:2px solid var(--line)}
.big1 b{font-size:92px;font-family:var(--fh);letter-spacing:.01em}
.timer{border-radius:0;box-shadow:5px 5px 0 var(--acc2)}
.pr{font-size:50px;text-shadow:4px 4px 0 var(--acc2)}
/* portada: cartel con franja, letras huecas que se llenan, plan que tiembla */
.hero{position:relative;margin:-18px -16px 12px;height:600px;background-image:var(--hi);background-size:cover;background-position:50% 18%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;filter:contrast(1.12)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 25%,transparent 38%,rgba(0,0,0,.94) 78%)}
.hero>*{position:relative}
.hero .stripe{position:absolute;top:0;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,var(--acc) 0 14px,#000 14px 28px);background-size:40px 40px;animation:slide 1.2s linear infinite}
.hero .k{position:absolute;top:30px;left:16px;right:16px;display:flex;justify-content:space-between;font-family:var(--fn);font-size:11px;color:var(--acc);letter-spacing:.18em;text-transform:uppercase}
.hero .k span:last-child{color:#fff}
.hero h1{font-family:var(--fh);font-weight:400;line-height:.84;text-transform:uppercase;padding:0 16px 14px}
.hero h1 span{display:block;font-size:112px;color:transparent;-webkit-text-stroke:2px var(--fg);transition:.3s}
.hero h1 span:hover{color:var(--acc);-webkit-text-stroke-color:var(--acc)}
.hero h1 b{display:block;color:var(--acc);font-size:var(--ps,118px);animation:shake 3.2s infinite}
@keyframes shake{0%,92%,100%{transform:none}94%{transform:translateX(-4px) skewX(-4deg)}96%{transform:translateX(5px) skewX(3deg)}}
.hero .mq{overflow:hidden;white-space:nowrap;background:var(--acc);color:#000;font-family:var(--fh);font-size:16px;letter-spacing:.06em;padding:5px 0}
.hero .mq span{display:inline-block;animation:mq 18s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.hero .row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#000;border-top:2px solid var(--line)}
.hero .row div{padding:11px 12px;border-right:2px solid var(--line)}.hero .row div:last-child{border:0}
.hero .row b{display:block;font-family:var(--fn);font-size:23px;color:var(--acc);line-height:1.1}
.hero .row small{color:#bdb9ab;font-size:10px;text-transform:uppercase}