/* ═══════════════════════════════════════════════════════════════════════
   JOKER 3×5 — Pop Arcade Cabinet
   Sistema BYQ « Positive Studio ». Tomado tal cual: la escala de display
   condensado, la píldora de 50 px a 52 px de alto, el hombro de 60 px con
   que los paneles oscuros se recortan sobre el lienzo, la marquesina de
   20 s lineales, la entrada fade-rise de 600 ms con curva (.22,.61,.36,1),
   el contenedor de 1400 px y el ritmo de sección de 120 px.
   Adaptado: paleta e imprenta las fija el pliego (cobalto, chicle, amarillo,
   cian; Impact y Century Gothic). Todo el arte es CSS: no hay archivos.
   Prohibido por el pliego y ausente aquí: elementos de los otros nueve.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --cobalto:#1647D8; --chicle:#FF4FA3; --amarillo:#FFD84D; --cian:#35DDFF;
  --tinta:#0B1338; --tinta-alta:#16225A; --hueso:#F3F1FF;
  --tinta-30:rgba(11,19,56,.30); --tinta-12:rgba(11,19,56,.12);
  --hueso-70:rgba(243,241,255,.70); --hueso-30:rgba(243,241,255,.30);
  --display:Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --cuerpo:"Century Gothic","Apple Gothic",Futura,"Trebuchet MS",sans-serif;
  --t-caption:16px; --t-body-sm:18px; --t-body:20px; --t-body-lg:24px;
  --t-subtitle:32px; --t-h-sm:40px; --t-h:52px; --t-h-lg:80px; --t-display:120px;
  --s-8:8px;--s-16:16px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;
  --s-56:56px;--s-64:64px;--s-80:80px;--s-100:100px;--s-120:120px;
  --pagina:1400px;
  --r-tarjeta:32px; --r-pildora:80px; --r-pequeno:16px; --r-circulo:9999px;
  --r-medio:24px; --r-panel:60px; --r-boton:50px;
  --d-marquesina:20000ms; --d-subida:600ms; --e-subida:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--hueso);color:var(--tinta);
  font-family:var(--cuerpo);font-size:var(--t-body);line-height:1.5;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--chicle);outline-offset:3px}
.marco{width:100%;max-width:var(--pagina);margin:0 auto;padding-inline:24px}
@media(max-width:479px){.marco{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.02em;
  text-transform:uppercase;line-height:1}
h2{font-size:var(--t-h)}
@media(max-width:767px){h2{font-size:var(--t-h-sm)}}
h3{font-size:var(--t-h-sm)}
p{margin:0 0 var(--s-24);max-width:70ch}
p:last-child{margin-bottom:0}
.seccion{padding-block:var(--s-120)}
@media(max-width:767px){.seccion{padding-block:var(--s-80)}}
.revelar{opacity:0;transform:translateY(18px);
  transition:opacity var(--d-subida) var(--e-subida),transform var(--d-subida) var(--e-subida)}
.revelar.visto{opacity:1;transform:none}
html:not(.js-on) .revelar{opacity:1;transform:none}
.suave{color:rgba(11,19,56,.72)}
.enlace{position:relative;text-decoration:none;background-image:linear-gradient(var(--tinta-30),var(--tinta-30));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px}
.enlace:hover{background-image:linear-gradient(var(--cobalto),var(--cobalto))}

/* CTA: píldora de 50 px y 52 px de alto, rótulo en display. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;
  padding-inline:32px;border-radius:var(--r-boton);border:0;cursor:pointer;
  background:var(--chicle);color:#fff;font-family:var(--display);font-size:22px;
  letter-spacing:.4px;text-transform:uppercase;text-decoration:none;
  transition:background .2s ease,transform .2s ease}
.cta:hover{background:var(--cobalto);transform:translateY(-2px)}
.cta.alt{background:var(--amarillo);color:var(--tinta)}
.cta.alt:hover{background:var(--cian);color:var(--tinta)}
.chevron{width:8px;height:8px;border-right:2.5px solid currentColor;
  border-top:2.5px solid currentColor;transform:rotate(45deg)}
.aviso{display:inline-block;font-family:var(--cuerpo);font-size:14px;font-weight:700;
  letter-spacing:.02em;background:var(--amarillo);color:var(--tinta);
  border-radius:var(--r-pildora);padding:8px 16px}
.divulgacion{font-size:15px;line-height:1.5;color:rgba(11,19,56,.68);max-width:80ch;margin:0}

/* ═══ BLOQUE 2.0 — Marquesina del gabinete ════════════════════════════ */
.marquesina{background:var(--tinta);border-block:4px solid var(--amarillo);overflow:hidden}
.marquesina .pista{display:flex;width:max-content;gap:48px;padding-block:14px;
  animation:desfile var(--d-marquesina) linear infinite}
.marquesina:hover .pista{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.marquesina .pista{animation:none}}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.marquesina b{font-family:var(--display);font-size:26px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hueso);white-space:nowrap}
.marquesina i{width:12px;height:12px;border-radius:var(--r-circulo);background:var(--cian);
  align-self:center;flex:none;font-style:normal}

/* ═══ BLOQUE 3.0 — El gabinete como primera pantalla ══════════════════ */
.gabinete-zona{padding-block:var(--s-64) var(--s-100);
  background:radial-gradient(circle at 50% 0%,rgba(53,221,255,.20),transparent 62%)}
.gabinete{max-width:900px;margin-inline:auto;background:var(--tinta);
  border-radius:var(--r-panel) var(--r-panel) var(--r-medio) var(--r-medio);
  padding:var(--s-48) var(--s-40) var(--s-40);color:var(--hueso);
  box-shadow:0 30px 60px -20px rgba(11,19,56,.45)}
@media(max-width:479px){.gabinete{padding:var(--s-24)}}
.gabinete .rotulo{font-family:var(--display);font-size:20px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amarillo);text-align:center;margin-bottom:var(--s-16)}
.gabinete h1{font-size:var(--t-display);line-height:.94;text-align:center;color:var(--hueso)}
@media(max-width:991px){.gabinete h1{font-size:72px}}
@media(max-width:479px){.gabinete h1{font-size:44px}}
.gabinete .lead{margin:var(--s-24) auto 0;max-width:56ch;text-align:center;
  font-size:var(--t-body-lg);line-height:1.4;color:var(--hueso-70)}
/* Panel de botones del gabinete: aquí vive el CTA, nunca fuera. */
.panel-botones{margin-top:var(--s-40);background:var(--tinta-alta);
  border-radius:var(--r-medio);padding:var(--s-24);display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:var(--s-16)}

/* ═══ BLOQUE 4.0 — Scoreboard dentro del autómata ═════════════════════ */
.scoreboard{margin-top:var(--s-32);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;
  background:var(--hueso-30);border-radius:var(--r-pequeno);overflow:hidden}
.scoreboard div{background:var(--tinta-alta);padding:var(--s-16);text-align:center}
.scoreboard dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hueso-70);margin-bottom:6px}
.scoreboard dd{margin:0;font-family:var(--display);font-size:28px;color:var(--amarillo)}

/* ═══ BLOQUE 5.0 — Pantalla física 3×5 ════════════════════════════════ */
.pantalla{margin-top:var(--s-32);background:#050A22;border:6px solid var(--cobalto);
  border-radius:var(--r-pequeno);padding:var(--s-24)}
.rodillos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rodillo{display:grid;grid-template-rows:repeat(5,1fr);gap:8px}
.celda{aspect-ratio:1;border-radius:10px;background:var(--tinta-alta);
  display:grid;place-items:center;font-family:var(--display);font-size:26px;
  color:var(--hueso);border:2px solid rgba(243,241,255,.10)}
.celda.moneda{background:var(--amarillo);color:var(--tinta);border-color:var(--amarillo)}
.celda.joker{background:var(--chicle);color:#fff;border-color:var(--chicle)}
.pantalla .pieta{margin-top:var(--s-16);font-size:14px;color:var(--hueso-70);text-align:center}

/* ═══ BLOQUE 6.0 — Mapa de las 11 líneas ══════════════════════════════ */
.lineas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-24)}
.linea{background:#fff;border-radius:var(--r-medio);padding:var(--s-16);
  box-shadow:0 1px 0 rgba(20,20,20,.04)}
.linea .n{font-family:var(--display);font-size:20px;color:var(--cobalto);
  letter-spacing:.06em;margin-bottom:10px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mini i{aspect-ratio:1;border-radius:4px;background:var(--tinta-12);display:block}
.mini i.on{background:var(--chicle)}
.linea p{margin:10px 0 0;font-size:14px;line-height:1.4;color:rgba(11,19,56,.66)}

/* ═══ BLOQUE 7.0 — Historieta Hold the Spin ═══════════════════════════ */
.tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-24)}
.vineta{background:var(--tinta);color:var(--hueso);border-radius:var(--r-tarjeta);
  padding:var(--s-32);display:flex;flex-direction:column;gap:var(--s-16)}
.vineta .paso{font-family:var(--display);font-size:52px;line-height:1;color:var(--cian)}
.vineta h3{font-size:26px;color:var(--hueso)}
.vineta p{font-size:16px;line-height:1.5;color:var(--hueso-70);margin:0}

/* ═══ BLOQUE 8.0 y 9.0 — Cabina demo y pupitre de mandos ══════════════ */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-40)}
@media(max-width:991px){.dos-col{grid-template-columns:1fr}}
.tarjeta{background:#fff;border-radius:var(--r-tarjeta);padding:var(--s-48);
  box-shadow:0 1px 0 rgba(20,20,20,.04)}
@media(max-width:479px){.tarjeta{padding:var(--s-24)}}
.tarjeta.oscura{background:var(--tinta);color:var(--hueso)}
.tarjeta.oscura p{color:var(--hueso-70)}
.mandos{list-style:none;margin:var(--s-24) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.mandos li{border:2px solid var(--tinta-12);border-radius:var(--r-pildora);
  padding:10px 18px;font-size:15px}
.mandos li b{font-family:var(--display);letter-spacing:.04em}
.mandos li.pendiente{border-style:dashed;color:rgba(11,19,56,.6)}

/* ═══ BLOQUE 10.0 — Pack de calcomanías ═══════════════════════════════ */
.stickers{display:flex;flex-wrap:wrap;gap:var(--s-24)}
.sticker{width:var(--ancho,150px);background:var(--amarillo);border-radius:var(--r-medio);
  padding:var(--s-24) var(--s-16);text-align:center;
  transform:rotate(var(--giro,0deg));box-shadow:0 12px 24px -12px rgba(11,19,56,.4)}
@media(max-width:479px){.sticker{width:calc(50% - 12px);transform:none}}
@media (prefers-reduced-motion:reduce){.sticker{transform:none}}
.sticker.bonus{background:var(--cian)}
.sticker .glifo{font-family:var(--display);font-size:44px;line-height:1;color:var(--tinta)}
.sticker .nombre{margin-top:10px;font-size:14px;font-weight:700;color:var(--tinta)}
.sticker .clase{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(11,19,56,.62)}

/* ═══ BLOQUE 11.0 — Termómetro de RTP ═════════════════════════════════ */
.termometro{display:flex;flex-direction:column;gap:var(--s-16)}
.grado{display:grid;grid-template-columns:80px 1fr auto;gap:var(--s-16);align-items:center}
.grado .valor{font-family:var(--display);font-size:30px;color:var(--cobalto)}
.grado .barra{height:16px;border-radius:var(--r-pildora);background:var(--tinta-12);
  overflow:hidden}
.grado .barra i{display:block;height:100%;border-radius:var(--r-pildora);
  background:linear-gradient(90deg,var(--cian),var(--chicle));width:var(--pct,0%)}
.grado .nota{font-size:14px;color:rgba(11,19,56,.66);white-space:nowrap}
@media(max-width:479px){.grado{grid-template-columns:64px 1fr}.grado .nota{grid-column:1/-1}}

/* ═══ BLOQUE 12.0 — Tablero del máximo ════════════════════════════════ */
.maximo{background:var(--cobalto);color:#fff;border-radius:var(--r-panel) var(--r-panel) var(--r-medio) var(--r-medio);
  padding:var(--s-64) var(--s-48);text-align:center}
@media(max-width:479px){.maximo{padding:var(--s-32) var(--s-24)}}
.maximo .cifra{font-family:var(--display);font-size:var(--t-h-lg);line-height:1;
  color:var(--amarillo)}
@media(max-width:479px){.maximo .cifra{font-size:52px}}
.maximo p{color:rgba(255,255,255,.82);margin-inline:auto}

/* ═══ BLOQUES 13.0–17.0 — Bloques de texto en tarjetas ════════════════ */
.lista-limpia{list-style:none;margin:var(--s-24) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--s-16)}
.lista-limpia li{padding-left:var(--s-24);position:relative;font-size:17px;line-height:1.5}
.lista-limpia li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;
  border-radius:var(--r-circulo);background:var(--chicle)}
.veredicto{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-tarjeta);
  overflow:hidden;border:3px solid var(--tinta)}
@media(max-width:767px){.veredicto{grid-template-columns:1fr}}
.veredicto .lado{padding:var(--s-40)}
@media(max-width:479px){.veredicto .lado{padding:var(--s-24)}}
.veredicto .lado:first-child{background:#fff;border-right:3px solid var(--tinta)}
@media(max-width:767px){.veredicto .lado:first-child{border-right:0;border-bottom:3px solid var(--tinta)}}
.veredicto .lado:last-child{background:var(--tinta);color:var(--hueso)}
.veredicto .lado:last-child li{color:var(--hueso-70)}
.veredicto .lado:last-child li::before{background:var(--cian)}
.fuentes dl{display:grid;grid-template-columns:auto 1fr;gap:10px var(--s-24);margin:var(--s-24) 0 0}
.fuentes dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(11,19,56,.55)}
.fuentes dd{margin:0;font-size:16px}

/* ═══ BLOQUE 18.0 — Pantalla de pausa ═════════════════════════════════ */
.pausa{background:var(--tinta);color:var(--hueso);
  border-radius:var(--r-panel) var(--r-panel) 0 0}
.pausa h2{color:var(--amarillo)}
.pausa p{color:var(--hueso-70)}
.pausa .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-24);margin-top:var(--s-40)}
.pausa .rejilla div{background:var(--tinta-alta);border-radius:var(--r-medio);padding:var(--s-24)}
.pausa .rejilla b{display:block;font-family:var(--display);font-size:24px;color:var(--cian);
  margin-bottom:8px}
.pausa .rejilla span{font-size:15px;line-height:1.5;color:var(--hueso-70)}

/* ═══ BLOQUE 19.0 — Mapa de niveles ═══════════════════════════════════ */
.niveles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-24)}
.nivel{background:#fff;border-radius:var(--r-tarjeta);padding:var(--s-32);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;
  border:3px solid transparent;transition:border-color .2s ease,transform .2s ease}
.nivel:hover{border-color:var(--chicle);transform:translateY(-3px)}
.nivel .num{font-family:var(--display);font-size:20px;color:var(--cobalto);letter-spacing:.1em}
.nivel h3{font-size:24px}
.nivel p{font-size:15px;line-height:1.45;color:rgba(11,19,56,.66);margin:0}

/* ═══ BLOQUE 21.0 — FAQ en globos de diálogo ══════════════════════════ */
.globos{display:flex;flex-direction:column;gap:var(--s-16)}
.globo{background:#fff;border-radius:var(--r-tarjeta);border:3px solid var(--tinta);
  overflow:hidden}
.globo .cabeza{display:flex;align-items:center;gap:var(--s-16);width:100%;
  padding:var(--s-24) var(--s-32);background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left}
@media(max-width:479px){.globo .cabeza{padding:var(--s-16)}}
.globo .cabeza .p{font-family:var(--display);font-size:24px;text-transform:uppercase;
  letter-spacing:.02em}
.globo .mas{margin-left:auto;position:relative;width:28px;height:28px;flex:none}
.globo .mas i{position:absolute;background:var(--chicle);border-radius:2px}
.globo .mas i:first-child{width:22px;height:4px;top:12px;left:3px}
.globo .mas i:last-child{width:4px;height:22px;left:12px;top:3px;transition:transform .3s ease}
.globo .cabeza[aria-expanded="true"] .mas i:last-child{transform:rotate(90deg)}
.globo .cuerpo{max-height:0;overflow:hidden;transition:max-height .3s ease}
.globo .cuerpo.abierto{max-height:520px}
.globo .cuerpo .dentro{padding:0 var(--s-32) var(--s-32)}
@media(max-width:479px){.globo .cuerpo .dentro{padding:0 var(--s-16) var(--s-24)}}

/* ═══ BLOQUE 22.0 — Tablero de salida y pie ═══════════════════════════ */
.salida{text-align:center}
.salida .lead{max-width:58ch;margin-inline:auto}
.pie-sitio{background:var(--tinta);color:var(--hueso);padding-block:var(--s-80)}
.pie-cols{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-64)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-32)}}
.pie-marca{font-family:var(--display);font-size:var(--t-h-sm);color:var(--amarillo);
  text-transform:uppercase;letter-spacing:.03em}
.pie-nota{margin-top:12px;font-size:16px;color:var(--hueso-70)}
.pie-sitio nav{display:flex;flex-wrap:wrap;gap:12px var(--s-32)}
.pie-sitio nav a{font-size:16px;color:var(--hueso-70);text-decoration:none}
.pie-sitio nav a:hover{color:var(--amarillo)}
.legal{margin-top:var(--s-24);font-size:14px;line-height:1.6;color:rgba(243,241,255,.55);
  max-width:92ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}