/* Batalla de Palabras · estilo de la web (lo copia legal/generar.mjs a web/estilo.css). Colores y letra: GUIA-VISUAL.md */
@font-face { font-family: "Lilita One"; src: url(lilita-one.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url(nunito-800.ttf) format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  color-scheme: dark;
  --cielo: #1E5BB8; --cielo-oscuro: #0E3A7A; --noche: #0B2A5E; --panel: #2A6AD0; --panel-2: #1F55B4;
  --tinta: #1B2A4A; --oro: #FFC93C; --oro-claro: #FFE27A; --oro-borde: #C98A00;
  --verde: #5BC236; --verde-labio: #3B8A1F; --rojo: #E8433A; --rojo-labio: #A82820;
  --texto: #F0F6FF; --juego: "Lilita One", "Arial Black", system-ui, sans-serif;
  --cuerpo: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1160px; --radio: 22px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; min-height: 100vh; color: var(--texto); background: var(--noche); font: 800 17px/1.55 var(--cuerpo); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--oro-claro); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 8px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--oro); color: var(--tinta); padding: 10px 16px; border-radius: 12px; border: 3px solid var(--tinta); text-decoration: none; }
.salto:focus { top: 10px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

/* Letra de juego: blanca u oro, contorno tinta y sombra dura */
.juego, h1, h2, h3.juego { font-family: var(--juego); font-weight: 400; letter-spacing: .3px; }
.contorno { -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 0 4px 0 var(--tinta); }
.contorno-fino { -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tinta); }

/* ---------- Cabecera ---------- */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(11, 42, 94, .92); border-bottom: 3px solid var(--tinta); transition: box-shadow .2s; }
@supports (backdrop-filter: blur(8px)) { .barra { background: rgba(11, 42, 94, .8); backdrop-filter: blur(8px); } }
.barra.con-sombra { box-shadow: 0 6px 0 rgba(10, 22, 50, .35); }
.barra-dentro { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px; min-height: 64px; display: flex; align-items: center; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-family: var(--juego); font-size: 20px; line-height: 1.05; margin-right: auto; }
.marca img { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--tinta); }
.marca span { text-shadow: 0 2px 0 var(--tinta), 1px 0 0 var(--tinta), -1px 0 0 var(--tinta), 0 -1px 0 var(--tinta); }
.menu-grande { display: none; gap: 4px; align-items: center; }
.menu-grande a, .menu-movil a { color: var(--texto); text-decoration: none; font-weight: 800; font-size: 15px; padding: 10px 12px; border-radius: 12px; }
.menu-grande a:hover, .menu-movil a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.menu-grande a[aria-current], .menu-movil a[aria-current] { color: var(--oro); }
.menu-movil { position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--panel); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg { width: 24px; height: 24px; }
.menu-movil[open] summary { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.menu-movil nav { position: absolute; right: 0; top: 58px; width: min(290px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 10px; background: var(--panel-2); border: 3px solid var(--tinta); border-radius: 18px; box-shadow: 0 8px 0 var(--tinta); }
.menu-movil nav a { padding: 12px 14px; font-size: 16px; }
@media (min-width: 900px) { .menu-grande { display: flex; } .menu-movil { display: none; } }

/* ---------- Botones 3D ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border-radius: 18px; border: 3px solid var(--tinta);
  font-family: var(--juego); font-size: 20px; color: #fff; text-decoration: none; text-shadow: 0 2px 0 var(--tinta), 1px 0 0 var(--tinta), -1px 0 0 var(--tinta), 0 -1px 0 var(--tinta);
  background: linear-gradient(#7BD94F, var(--verde)); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 6px 0 var(--verde-labio), 0 9px 0 var(--tinta); transition: transform .12s, box-shadow .12s; }
.boton:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 8px 0 var(--verde-labio), 0 11px 0 var(--tinta); }
.boton:active { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 1px 0 var(--verde-labio), 0 3px 0 var(--tinta); }
.boton.azul { background: linear-gradient(#4C8EF0, #2E6FD8); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 #1A4A9E, 0 9px 0 var(--tinta); }
.boton.oro { color: var(--tinta); text-shadow: 0 1px 0 rgba(255,255,255,.5); background: linear-gradient(#FFE27A, #F2A900); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 6px 0 var(--oro-borde), 0 9px 0 var(--tinta); }
.boton.pequeno { font-size: 17px; min-height: 44px; padding: 6px 16px; }

/* Insignias de tienda propias (aún sin enlace) */
.tiendas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tienda { display: flex; align-items: center; gap: 12px; min-width: 228px; padding: 10px 18px 10px 14px; border-radius: 16px; background: #10203F; border: 3px solid var(--oro); box-shadow: 0 0 0 3px var(--tinta), 0 7px 0 3px var(--tinta); text-align: left; position: relative; }
.tienda svg { width: 34px; height: 34px; flex: none; }
.tienda small { display: block; font-size: 12px; letter-spacing: .8px; color: var(--oro-claro); line-height: 1.1; }
.tienda b { display: block; font-family: var(--juego); font-weight: 400; font-size: 23px; color: #fff; line-height: 1.1; }
.nota-tiendas { margin: 18px 0 0; font-size: 15px; }

/* ---------- Héroe ---------- */
.heroe { position: relative; overflow: hidden; min-height: calc(100svh - 64px); display: flex; align-items: center; text-align: center;
  background: radial-gradient(120% 80% at 50% 35%, #3B86E8 0%, var(--cielo) 40%, var(--cielo-oscuro) 100%); padding: 22px 0 96px; }
.rayos { position: absolute; left: 50%; top: 40%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.075) 0deg 8deg, transparent 8deg 20deg); animation: girar 90s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.heroe .dentro { position: relative; z-index: 1; width: 100%; }
.heroe h1 { margin: 0 auto; width: min(440px, 82vw); }
.heroe h1 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 0 rgba(10, 25, 60, .45)); animation: entrar-logo .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes entrar-logo { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lema { font-family: var(--juego); font-size: clamp(22px, 5.4vw, 34px); line-height: 1.15; color: #fff; margin: 14px auto 0; max-width: 760px; }
.lema b { color: var(--oro); font-weight: 400; }
.heroe .tiendas { margin-top: 26px; }
.flotan { position: absolute; inset: 0; pointer-events: none; }
.flota { position: absolute; animation: flotar 6s ease-in-out infinite; }
.flota svg { width: 100%; height: 100%; display: block; }
@keyframes flotar { 50% { transform: translateY(-14px) rotate(6deg); } }
.bajar { position: relative; z-index: 2; margin: 22px auto 0; width: max-content; color: #fff; text-decoration: none; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; }
.bajar svg { width: 28px; height: 28px; animation: rebotar 1.6s ease-in-out infinite; }
@keyframes rebotar { 50% { transform: translateY(6px); } }

/* Choque de palabras */
.choque { position: relative; height: 262px; margin: 6px auto 0; max-width: 680px; }
.choque .pregunta { position: absolute; left: 0; right: 0; top: 0; margin: 0; font-size: 19px; color: #fff; }
.palabra { position: absolute; left: 50%; display: inline-block; padding: 6px; border-radius: 26px; background: linear-gradient(#FFE27A, #F2A900); border: 3px solid var(--tinta); box-shadow: 0 6px 0 var(--tinta); white-space: nowrap; }
.palabra span { display: block; padding: 6px 26px 8px; border-radius: 19px; border: 3px solid var(--tinta); font-family: var(--juego); font-size: clamp(30px, 8.4vw, 50px); line-height: 1.1; color: #fff;
  -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 0 4px 0 var(--tinta); background: linear-gradient(var(--c1), var(--c2)); box-shadow: inset 0 4px 0 rgba(255,255,255,.3); }
.palabra.a { top: 34px; transform: translateX(-56%) rotate(-4deg); }
.palabra.b { top: 172px; transform: translateX(-44%) rotate(3deg); }
.vs { position: absolute; left: 50%; top: 104px; width: 80px; height: 80px; margin-left: -40px; z-index: 2; }
.vs svg { width: 100%; height: 100%; overflow: visible; }
.chispas { position: absolute; left: 50%; top: 144px; width: 0; height: 0; z-index: 1; }
.chispas i { position: absolute; width: 10px; height: 10px; margin: -5px; background: var(--oro); border: 2px solid var(--tinta); border-radius: 3px; opacity: 0; }
.js .choque.juega .palabra.a { animation: llega-izq .55s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .choque.juega .palabra.b { animation: llega-der .55s cubic-bezier(.2, 1.3, .4, 1) .08s both; }
.js .choque.juega .vs { animation: cae-vs .5s cubic-bezier(.2, 1.6, .4, 1) .5s both; }
.js .choque.juega .chispas i { animation: chispa .7s ease-out .55s both; }
@keyframes llega-izq { from { transform: translateX(-160%) rotate(-14deg); opacity: 0; } 70% { transform: translateX(-52%) rotate(-2deg); opacity: 1; } }
@keyframes llega-der { from { transform: translateX(80%) rotate(14deg); opacity: 0; } 70% { transform: translateX(-48%) rotate(5deg); opacity: 1; } }
@keyframes cae-vs { from { transform: scale(2.6) rotate(-20deg); opacity: 0; } }
@keyframes chispa { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(200deg); } }

/* Ola que separa franjas */
.ola { position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; width: 100%; display: block; }
.franja { position: relative; padding: 72px 0 120px; overflow: hidden; overflow: clip; }
.franja.sin-ola { padding-bottom: 72px; }

/* Colores de franja (todas cumplen AA con su texto) */
.f-cielo { background: linear-gradient(180deg, var(--cielo) 0%, #164C9E 100%); }
.f-noche { background: linear-gradient(180deg, var(--cielo-oscuro), var(--noche)); }
.f-oro { background: linear-gradient(180deg, #FFD45C 0%, #FFB82E 100%); color: var(--tinta); }
.f-oro a { color: #0B2A5E; }
.f-verde a:not(.boton), .hoja .resumen a { color: #fff; text-decoration-thickness: 2px; }
.f-rojo { background: linear-gradient(180deg, #C8302A 0%, #93201A 100%); }
.f-morado { background: linear-gradient(180deg, #7A3FD6 0%, #4A1F8F 100%); }
.f-naranja { background: linear-gradient(180deg, #F7A23B 0%, #EE8A2A 100%); color: var(--tinta); }
.f-verde { background: linear-gradient(180deg, #2E7D18 0%, #1F5E0E 100%); }
.franja.rayitos::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 22px, transparent 22px 54px); }
.franja > .dentro { position: relative; z-index: 1; }

/* Titulares */
.etiqueta { display: inline-block; font-family: var(--juego); font-size: 15px; letter-spacing: 1.4px; padding: 4px 14px 5px; border-radius: 999px; background: var(--tinta); color: var(--oro); margin: 0 0 12px; }
h2 { font-size: clamp(34px, 8.5vw, 60px); line-height: 1.02; margin: 0 0 14px; color: #fff; -webkit-text-stroke: 7px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--tinta); }
h2 em { font-style: normal; color: var(--oro); }
.f-oro h2 em, .f-naranja h2 em { color: #fff; }
.entrada { font-size: 19px; max-width: 34ch; margin: 0 0 18px; }
.centro { text-align: center; }
.centro .entrada { margin-left: auto; margin-right: auto; max-width: 46ch; }

/* Bloque alterno: móvil + texto */
.alterno { display: grid; gap: 34px; align-items: center; }
.alterno .texto { text-align: center; }
.alterno .entrada { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .alterno { grid-template-columns: 1fr 1fr; gap: 64px; }
  .alterno .texto { text-align: left; }
  .alterno .entrada { margin-left: 0; }
  .alterno.al-reves .escena { order: 2; }
}
.puntos-clave { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (min-width: 900px) { .puntos-clave { justify-content: flex-start; } }
.puntos-clave li { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(10, 25, 60, .55); border: 2px solid var(--tinta); color: #fff; font-size: 15px; }
.f-oro .puntos-clave li, .f-naranja .puntos-clave li { background: var(--tinta); }
.puntos-clave svg { width: 26px; height: 26px; flex: none; }

/* Escena con el móvil y adornos */
.escena { position: relative; display: flex; justify-content: center; padding: 10px 0; }
.movil { position: relative; width: min(290px, 74vw); aspect-ratio: 9 / 16; border-radius: 40px; border: 10px solid var(--tinta); background: var(--tinta); box-shadow: 0 14px 0 rgba(10, 22, 50, .35); overflow: hidden; z-index: 1; }
.movil picture, .movil img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }
.escena .halo { position: absolute; width: 120%; max-width: 460px; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); }
.escena .adorno { position: absolute; z-index: 2; filter: drop-shadow(0 5px 0 rgba(10, 22, 50, .35)); }
.escena .adorno svg { width: 100%; height: 100%; display: block; }
.ficha-mini { position: absolute; z-index: 2; padding: 4px; border-radius: 16px; background: linear-gradient(#FFE27A, #F2A900); border: 3px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); }
.ficha-mini span { display: block; padding: 2px 14px 4px; border-radius: 11px; border: 2px solid var(--tinta); font-family: var(--juego); font-size: 24px; color: #fff; -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tinta); background: linear-gradient(var(--c1), var(--c2)); white-space: nowrap; }
.cifra-flotante { position: absolute; z-index: 2; font-family: var(--juego); font-size: 34px; color: var(--oro); -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 0 4px 0 var(--tinta); white-space: nowrap; }
.cifra-flotante.roja { color: #FF8A80; }

/* Rejilla de características */
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); text-align: left; margin-top: 34px; }
.carta { position: relative; padding: 22px 20px 20px; border-radius: var(--radio); background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 3px solid var(--tinta); box-shadow: inset 0 3px 0 rgba(255,255,255,.22), 0 7px 0 var(--tinta); }
.carta .icono { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 20px; background: rgba(10, 25, 60, .45); border: 3px solid var(--tinta); margin-bottom: 12px; }
.carta .icono svg { width: 52px; height: 52px; }
.carta h3 { font-family: var(--juego); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0 0 6px; color: var(--oro); -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tinta); }
.carta p { margin: 0; color: var(--texto); }
@media (max-width: 639px) {
  .carta { display: grid; grid-template-columns: 64px 1fr; gap: 2px 14px; align-items: start; padding: 16px; }
  .carta .icono { grid-row: span 2; width: 64px; height: 64px; margin: 0; }
  .carta .icono svg { width: 44px; height: 44px; }
  .carta h3 { font-size: 23px; }
}

/* Pasos */
.pasos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: paso; }
.paso { position: relative; padding: 46px 20px 20px; margin-top: 28px; border-radius: var(--radio); background: #fff; color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 0 7px 0 var(--tinta); text-align: center; }
.paso::before { counter-increment: paso; content: counter(paso); position: absolute; left: 50%; top: -32px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--juego); font-size: 36px; color: #fff; -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; background: linear-gradient(#FFE27A, #F2A900); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta); }
.paso h3 { font-family: var(--juego); font-weight: 400; font-size: 25px; line-height: 1.1; margin: 0 0 6px; color: var(--cielo-oscuro); }
.paso p { margin: 0; }
.paso svg.dibujo { width: 58px; height: 58px; display: block; margin: 0 auto 8px; }

/* Galería */
.galeria { position: relative; margin-top: 30px; }
.carril { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px max(16px, calc((100vw - var(--ancho)) / 2 + 16px)) 26px; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; }
.carril:focus-visible { outline-offset: -3px; }
.carril figure { flex: none; margin: 0; scroll-snap-align: center; text-align: center; }
.carril .movil { width: 230px; border-width: 8px; border-radius: 34px; }
.carril .movil img { border-radius: 26px; }
.carril figcaption { margin-top: 14px; font-family: var(--juego); font-size: 19px; color: #fff; }
.flechas { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }
.flechas button { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--tinta); background: linear-gradient(#4C8EF0, #2E6FD8); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 5px 0 var(--tinta); }
.flechas button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tinta); }
.flechas svg { width: 24px; height: 24px; }
.no-js .flechas { display: none; }

/* Divisiones */
.divisiones { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px 10px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .divisiones { grid-template-columns: repeat(5, 1fr); } }
.divisiones li { text-align: center; }
.divisiones svg { width: 100%; max-width: 180px; height: auto; display: block; margin: 0 auto; overflow: visible; filter: drop-shadow(0 5px 0 rgba(27, 42, 74, .45)); transition: transform .2s; }
.divisiones li:hover svg { transform: translateY(-6px) scale(1.04); }
.divisiones b { display: block; font-family: var(--juego); font-weight: 400; font-size: 18px; color: #fff; -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; text-shadow: 0 2px 0 var(--tinta); margin-top: 6px; }
.divisiones small { display: block; font-size: 13px; }
.medallas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 42px 0 0; padding: 0; list-style: none; }
.medallas svg { width: 86px; height: 86px; filter: drop-shadow(0 5px 0 rgba(27, 42, 74, .45)); }

/* Contador de palabras */
.cifra-enorme { font-family: var(--juego); font-size: clamp(64px, 19vw, 168px); line-height: 1; color: var(--oro); margin: 8px 0 4px; -webkit-text-stroke: 10px var(--tinta); paint-order: stroke fill; text-shadow: 0 8px 0 var(--tinta); font-variant-numeric: tabular-nums; }
.fuentes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 30px 0 26px; text-align: left; }
.fuente { padding: 16px 18px; border-radius: 18px; background: rgba(9, 28, 66, .92); border: 3px solid var(--tinta); }
.fuente b { display: block; font-family: var(--juego); font-weight: 400; font-size: 22px; color: #fff; }
.fuente p { margin: 4px 0 0; font-size: 15px; }
.lluvia { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lluvia span { position: absolute; font-family: var(--juego); color: rgba(255,255,255,.07); font-size: 30px; white-space: nowrap; }
.botones { display: flex; flex-wrap: wrap; gap: 16px 18px; justify-content: center; }

/* Llamada final */
.final .escudo-final { width: 180px; height: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 8px 0 rgba(10, 25, 60, .45)); }
.contacto { margin-top: 30px; font-size: 18px; }

/* ---------- Pie ---------- */
.pie { background: #081F47; border-top: 4px solid var(--tinta); color: var(--texto); font-size: 15px; }
.pie-dentro { max-width: var(--ancho); margin: 0 auto; padding: 40px 16px 28px; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pie-dentro { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.pie h2 { font-size: 20px; margin: 0 0 10px; -webkit-text-stroke: 0; text-shadow: none; color: var(--oro); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie ul a { display: inline-block; padding: 6px 0; color: var(--texto); text-decoration: none; }
.pie ul a:hover { color: var(--oro); text-decoration: underline; }
.pie .marca { margin: 0 0 10px; }
.pie p { margin: 0 0 8px; }
.pie-final { border-top: 2px solid rgba(255,255,255,.12); max-width: var(--ancho); margin: 0 auto; padding: 16px 16px 30px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }

/* ---------- Páginas de texto (legales, palabras, 404) ---------- */
.cabecera-pagina { position: relative; overflow: hidden; padding: 34px 0 86px; text-align: center; background: radial-gradient(110% 120% at 50% 0%, #3B86E8 0%, var(--cielo) 45%, var(--cielo-oscuro) 100%); }
.cabecera-pagina .rayos { top: 0; animation-duration: 140s; }
.cabecera-pagina .dentro { position: relative; z-index: 1; }
.cabecera-pagina img { width: 92px; height: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 5px 0 rgba(10, 25, 60, .45)); }
.cabecera-pagina p { margin: 0; font-family: var(--juego); font-size: 20px; color: #fff; }
.lectura { position: relative; z-index: 1; max-width: 820px; margin: -58px auto 56px; padding: 0 16px; }
.hoja { background: linear-gradient(180deg, #164C9E 0%, #12407F 260px, #10397A 100%); border: 3px solid var(--tinta); border-radius: 26px; box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 8px 0 var(--tinta); padding: 22px 18px 30px; }
@media (max-width: 639px) { .hoja .resumen { padding: 4px 14px 10px; } .hoja ul, .hoja ol { padding-left: 20px; } }
@media (min-width: 640px) { .hoja { padding: 34px 44px 44px; } }
.hoja h1 { color: var(--oro); font-size: clamp(32px, 7vw, 46px); line-height: 1.08; margin: 4px 0 6px; -webkit-text-stroke: 6px var(--tinta); paint-order: stroke fill; text-shadow: 0 4px 0 var(--tinta); }
.hoja h2 { font-size: clamp(23px, 5vw, 28px); line-height: 1.2; margin: 34px 0 8px; padding-top: 18px; border-top: 2px dashed rgba(255,255,255,.18); -webkit-text-stroke: 4px var(--tinta); text-shadow: 0 3px 0 var(--tinta); }
.hoja h3 { color: var(--oro-claro); font-size: 18px; margin: 20px 0 4px; }
.hoja p, .hoja li { font: 600 17.5px/1.7 var(--cuerpo); }
.hoja ul, .hoja ol { padding-left: 24px; margin: 6px 0 12px; }
.hoja li { margin: 6px 0; }
.hoja li::marker { color: var(--oro); }
.hoja strong { color: #fff; font-weight: 900; }
.hoja mark { background: var(--oro); color: var(--tinta); border-radius: 4px; padding: 0 4px; font-weight: 800; }
.hoja .fecha { display: inline-block; font-size: 14px; margin: 0 0 18px; padding: 3px 12px; border-radius: 999px; background: rgba(10, 25, 60, .5); }
.hoja .resumen { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 3px solid var(--tinta); border-radius: 20px; padding: 6px 20px 12px; margin: 14px 0; box-shadow: inset 0 3px 0 rgba(255,255,255,.2), 0 6px 0 var(--tinta); }
.hoja .resumen h2 { border: 0; margin-top: 12px; padding-top: 0; color: var(--oro); }
.hoja a { word-break: break-word; }
.volver { margin-top: 26px; text-align: center; }

/* ---------- Aparecer al hacer scroll (solo con JS y sin «reducir movimiento») ---------- */
.js .revela { opacity: 0; transform: translateY(34px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2, 1.2, .4, 1); }
.js .revela.visto { opacity: 1; transform: none; }
.js .revela.retardo-1 { transition-delay: .08s; } .js .revela.retardo-2 { transition-delay: .16s; } .js .revela.retardo-3 { transition-delay: .24s; }

@media (min-width: 900px) {
  .heroe h1 { width: 470px; }
  .palabra.a { transform: translateX(-64%) rotate(-4deg); }
  .palabra.b { transform: translateX(-36%) rotate(3deg); }
  @keyframes llega-izq { from { transform: translateX(-200%) rotate(-14deg); opacity: 0; } 70% { transform: translateX(-60%) rotate(-2deg); opacity: 1; } }
  @keyframes llega-der { from { transform: translateX(110%) rotate(14deg); opacity: 0; } 70% { transform: translateX(-40%) rotate(5deg); opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revela { opacity: 1; transform: none; }
}
@media print {
  .barra, .pie, .cabecera-pagina .rayos { display: none; }
  body, .hoja { background: #fff; color: #000; box-shadow: none; }
  .hoja h1, .hoja h2 { color: #000; -webkit-text-stroke: 0; text-shadow: none; }
}