/* Web de El Mando Perdido (spec 069). Colores de la marca; nada de recursos de fuera. */
@font-face { font-family: "Fredoka"; src: url("/estaticos/fuentes/fredoka-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/estaticos/fuentes/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --amarillo: #FFC93C;
  --rojo: #D62828;
  --oscuro: #1E1D1B;
  --tinta: #1B1F3B;
  --crema: #FFF8E7;
  --blanco: #FFFFFF;
  --turquesa: #12C2C4;
  --rosa: #E83F6F;
  --morado: #3B1F5C;
  --morado-claro: #F3ECFA;
  /* Lo que cambia con el tema y con el zapeo */
  --fondo: var(--crema);
  --texto: var(--tinta);
  --acento: var(--rojo);
  --acento-texto: var(--blanco);
  --tarjeta: var(--blanco);
  --cielo: #2C3E57;
}
.tema-juego { --fondo: var(--morado-claro); --acento: var(--morado); --cielo: #2A1B45; }

/* Zapeo: cada «canal» es la paleta de una era del juego */
body[data-canal="1"] { --fondo: #E9F7F7; --acento: #0B6E70; --cielo: #0F3D4A; }
body[data-canal="2"] { --fondo: #FDEEF2; --acento: #A3173F; --cielo: #4A1027; }
body[data-canal="3"] { --fondo: #F2F2F2; --acento: #333333; --cielo: #111111; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1.0625rem/1.6 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--acento); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
h1, h2, h3 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.6rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--amarillo); color: var(--oscuro); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; }

/* Cabecera con la azotea de la torre (igual que las redes) */
.cabecera { position: relative; color: var(--blanco); background: var(--cielo); overflow: hidden; }
.cabecera__fondo { position: absolute; inset: 0; background: var(--cielo) url("/estaticos/img/cabecera-azotea-movil.webp") center bottom / cover no-repeat; }
@media (min-width: 760px) { .cabecera__fondo { background-image: url("/estaticos/img/cabecera-azotea.webp"); } }
.menu { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; max-width: 72rem; margin: 0 auto; }
.menu__marca { display: flex; align-items: center; gap: .6rem; }
.menu__marca a { color: var(--amarillo); font-family: "Fredoka", sans-serif; font-size: 1.15rem; text-decoration: none; text-shadow: 2px 2px 0 var(--rojo); }
.menu__tele { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; line-height: 0; }
.menu__logo { width: 48px; height: 48px; }
.menu__enlaces { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.menu__enlaces a { color: var(--blanco); font-weight: 600; text-decoration: none; padding: .5rem .25rem; display: inline-block; }
.menu__enlaces a[aria-current] { border-bottom: 3px solid var(--amarillo); }
.portada { position: relative; text-align: center; padding: 1.5rem 1rem 12rem; max-width: 46rem; margin: 0 auto; }
@media (min-width: 760px) { .portada { padding-bottom: 20rem; } }
.portada--corta { padding: 1rem 1rem 9rem; }
@media (min-width: 760px) { .portada--corta { padding-bottom: 15rem; } }
.titulo-estudio { font-size: clamp(2.3rem, 9vw, 4.2rem); margin: .4rem 0; color: var(--amarillo); text-shadow: 4px 4px 0 var(--rojo); -webkit-text-stroke: 2px var(--oscuro); paint-order: stroke fill; letter-spacing: .02em; }
.titulo-pagina { font-size: clamp(1.9rem, 7vw, 3rem); margin: .3rem 0; color: var(--amarillo); text-shadow: 3px 3px 0 var(--rojo); -webkit-text-stroke: 1.5px var(--oscuro); paint-order: stroke fill; }
.lema { font-size: 1.25rem; font-weight: 700; margin: .3rem 0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sublema { margin: .2rem 0; color: var(--amarillo); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.portada__logo { width: 160px; height: 160px; }

/* Contenido */
.contenido { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.contenido p, .contenido li { max-width: 40rem; }
.tarjeta { background: var(--tarjeta); border: 3px solid var(--oscuro); border-radius: 14px; box-shadow: 6px 6px 0 var(--oscuro); padding: 1.25rem; margin: 1.5rem 0; }
.juego { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 640px) { .juego { grid-template-columns: 220px 1fr; } }
.juego img { border-radius: 10px; max-width: 200px; margin: 0 auto; display: block; }
.boton { display: inline-block; background: var(--acento); color: var(--acento-texto); font-family: "Fredoka", sans-serif; font-size: 1.1rem; text-decoration: none; border: 3px solid var(--oscuro); border-radius: 999px; padding: .6rem 1.3rem; box-shadow: 3px 3px 0 var(--oscuro); margin: .3rem .4rem .3rem 0; }
.boton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--oscuro); }
.boton--apagado { background: #DADADA; color: var(--oscuro); }
.aviso { background: var(--amarillo); color: var(--oscuro); border: 3px solid var(--oscuro); border-radius: 10px; padding: .75rem 1rem; font-weight: 600; }
.figura { margin: 1.5rem 0; }
.figura img { border: 3px solid var(--oscuro); border-radius: 12px; display: block; margin: 0 auto; }
.redes { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .5rem 0; }
.redes a { display: inline-block; background: var(--oscuro); color: var(--amarillo); text-decoration: none; font-weight: 700; border-radius: 999px; padding: .45rem 1rem; }
.redes a:hover { background: var(--rojo); color: var(--blanco); }
.siguenos { text-align: center; }
.siguenos .redes { justify-content: center; }

/* Pie */
.pie { background: var(--oscuro); color: #F4F1EA; padding: 2rem 1rem; text-align: center; }
.pie a { color: var(--amarillo); }
.pie__titulo { font-family: "Fredoka", sans-serif; font-size: 1.3rem; color: var(--amarillo); margin: 0; }
.pie__redes .redes { justify-content: center; }
.pie__redes .redes a { background: #34322F; }
.pie__enlaces { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin: 1rem 0; }
.pie__enlaces a { display: inline-block; padding: .3rem 0; }
.pie__nota { font-size: .9rem; margin: .3rem 0; }

/* Carta de ajuste (404) */
.carta { display: grid; grid-template-columns: repeat(7, 1fr); height: 160px; border: 4px solid var(--oscuro); border-radius: 18px; overflow: hidden; margin: 1rem 0; }
.carta span:nth-child(1) { background: #C0C0C0; } .carta span:nth-child(2) { background: #C0C000; }
.carta span:nth-child(3) { background: #00C0C0; } .carta span:nth-child(4) { background: #00C000; }
.carta span:nth-child(5) { background: #C000C0; } .carta span:nth-child(6) { background: #C00000; }
.carta span:nth-child(7) { background: #0000C0; }
.sin-senal { font-family: "Fredoka", sans-serif; font-size: 2.4rem; text-align: center; margin: .5rem 0; }

/* Teletexto */
.teletexto { background: #000; color: #FFF; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 1rem; border-radius: 8px; }
.teletexto h2, .teletexto h3 { font-family: inherit; color: #FFFF00; }
.teletexto a { color: #00FFFF; }

/* Zapeo: nieve de 0,3 s y aviso del canal */
.nieve { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .85;
  background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #000 1px 3px), repeating-radial-gradient(circle at 73% 61%, #888 0 1px, transparent 1px 2px);
  animation: nieve .1s steps(3) infinite; }
@keyframes nieve { 0% { background-position: 0 0, 0 0; } 50% { background-position: 7px 3px, -5px 9px; } 100% { background-position: -4px 8px, 6px -2px; } }
.canal { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--oscuro); color: var(--amarillo); font-family: "Fredoka", sans-serif; border-radius: 999px; padding: .5rem 1rem; margin: 0; max-width: calc(100% - 2rem); text-align: center; z-index: 60; }
.canal:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .nieve { display: none; } .boton:active { transform: none; } }