/* ── Estilo de la portada ──
   La app va con estilos en línea porque es un fichero suelto de React; la
   portada es HTML servido por PHP y aquí una hoja de estilos es lo natural: se
   escribe una vez, la cachea el navegador y admite media queries de verdad, sin
   tener que preguntarle el ancho a JavaScript.

   Los colores son los MISMOS de la app, y por eso están arriba y con nombre.
   La paleta vive en tres sitios —la app, los SVG de assets/ y esto—, así que al
   tocar un color hay que tocar los tres; hay una prueba que compara estos
   valores con los de la app para que no se queden en dos azules parecidos. */

/* ── La paleta ──
   No está escrita aquí: el build la inyecta en esta línea desde el objeto
   PALETA de src/aprende-japones.jsx, que es donde viven los colores de Hanasuka.
   La portada y la app son dos programas y una sola marca, y dos listas de
   colores acaban siendo dos violetas parecidos.

   Así que aquí abajo solo se USAN: var(--violeta), var(--violeta)… Para ver los
   valores, mirar PALETA; para cambiarlos, cambiarlos allí.
   Si esta marca desaparece, el build se planta en vez de publicar una portada
   sin color. */
:root {
/* Generado desde PALETA, en src/aprende-japones.jsx. No editar aquí. */
  --violeta: #5B2EFC;
  --violeta-hondo: #4A1BC9;
  --turquesa: #007A79;
  --turquesa-hondo: #00615F;
  --frambuesa: #D1007A;
  --violeta-claro: #C49DFF;
  --turquesa-claro: #2ECCCC;
  --frambuesa-claro: #FF89BA;
  --papel: #F7F5FB;
  --papel-hondo: #EFECF7;
  --tinta: #2C2A33;
  --niebla: #E4E0F0;
  --gris: #524E63;
  --gris-claro: #857F96;
  --oscuro: #2C2A33;
  --oscuro-tinta: #EAE6F5;
  --oscuro-apagado: #A79FC0;
  --oscuro-linea: rgba(255,255,255,.10);
  --oscuro-activo: rgba(255,255,255,.10);
  --violeta-lavado: #F1E2FF;
  --turquesa-lavado: #C7F7F6;
  --frambuesa-lavado: #FFE1EE;
  --error-lavado: #F9E4E2;
  --error: #C3352B;
  --error-claro: #FF7A8A;
  --escala-1: #7454FF;
  --escala-1-claro: #EFE7FF;
  --escala-2: #5B2EFC;
  --escala-2-claro: #DACAFF;
  --escala-3: #4A1BC9;
  --escala-3-claro: #C3ABFA;
  --escala-4: #37129B;
  --escala-4-claro: #AE94E6;
  --escala-5: #25086A;
  --escala-5-claro: #9E85D2;
  --sombra: 0 1px 4px rgba(34,28,51,.08);
  --sombra-alta: 0 6px 22px rgba(34,28,51,.16), 0 1px 2px rgba(34,28,51,.10);
  --sombra-alta: 0 6px 22px rgba(34,28,51,.16), 0 1px 2px rgba(34,28,51,.10);

  /* Lo que mide la barra flotante con su aire: 12 arriba, 60 de pastilla y 12
     abajo. El hero reserva esto para que su primera línea no le quede debajo —la
     barra va con `fixed` y no ocupa hueco en el flujo, así que este número es lo
     único que lo sabe—. Si la pastilla engorda, sube con ella. */
  --barra: 84px;
  --radio: 16px;
  --ancho: 1080px;
}

/* ── Tipografía ──
   Zen Kaku Gothic New (SIL OFL 1.1), servida desde assets/ y no desde el CDN de
   Google, por lo mismo que en la app: pedírsela a Google le entrega la IP de
   cualquiera que abra la página y habría que declararlo en la privacidad.

   Son los MISMOS ocho ficheros que carga la app —dos por grosor, repartidos por
   unicode-range— y no una copia: assets/ cuelga de la raíz del sitio y lo
   comparten los dos. Quien llega a la app desde aquí ya la tiene en la caché.

   El latín pesa 8-12 KB y lo carga todo el mundo; el japonés pesa ~320 KB y el
   navegador solo se lo baja cuando hay kana o kanji en pantalla, que en esta
   página son cuatro caracteres. Los rangos son disjuntos a propósito: si se
   solaparan y ganase la cara equivocada, el japonés se pintaría con la letra
   del sistema.

   Si cambian aquí, cambian también en la app: hay una prueba que lo compara. */
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fuente/zen-400-lat.woff2) format('woff2');
  unicode-range: U+0-2FFF, U+3100-33FF, U+4DC0-4DFF, U+A000-F8FF, U+FB00-FEFF, U+FFF0-FFFF, U+10000-10FFFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fuente/zen-400-jp.woff2) format('woff2');
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fuente/zen-500-lat.woff2) format('woff2');
  unicode-range: U+0-2FFF, U+3100-33FF, U+4DC0-4DFF, U+A000-F8FF, U+FB00-FEFF, U+FFF0-FFFF, U+10000-10FFFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fuente/zen-500-jp.woff2) format('woff2');
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fuente/zen-700-lat.woff2) format('woff2');
  unicode-range: U+0-2FFF, U+3100-33FF, U+4DC0-4DFF, U+A000-F8FF, U+FB00-FEFF, U+FFF0-FFFF, U+10000-10FFFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fuente/zen-700-jp.woff2) format('woff2');
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(assets/fuente/zen-900-lat.woff2) format('woff2');
  unicode-range: U+0-2FFF, U+3100-33FF, U+4DC0-4DFF, U+A000-F8FF, U+FB00-FEFF, U+FFF0-FFFF, U+10000-10FFFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(assets/fuente/zen-900-jp.woff2) format('woff2');
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

/* ── Base ── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* La misma red contra el desplazamiento horizontal que en la app, y por el
   mismo motivo se usa clip y no hidden: hidden convierte el body en contenedor
   de scroll y rompe el position:sticky de la barra de arriba. */
html, body { overflow-x: clip; max-width: 100%; }

/* Quien ha pedido al sistema que no le muevan las cosas, no se las movemos:
   ni el desplazamiento suave ni las transiciones. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Zen Kaku Gothic New', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--violeta); }

/* Un icono ocupa lo que la letra que lo acompaña y se apoya en la misma línea
   de base, como en la app. */
.ic { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; flex: none; }

/* El foco tiene que verse: se navega con teclado más de lo que parece. */
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; border-radius: 6px; }

/* Enlace para saltarse la navegación. Escondido hasta que recibe el foco: es
   para quien va con teclado o lector de pantalla, y estorbaría a los demás. */
.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: var(--violeta); color: #fff; padding: 10px 16px;
  border-radius: 10px; font-weight: 700; text-decoration: none;
}
.saltar:focus { left: 8px; }

.env { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 18px; }

/* ── Barra de arriba ──
   Flota: una pastilla blanca con sombra, separada de los bordes, por encima de
   todo lo demás. Sobre el violeta del hero se recorta sola, y cuando se llega a
   las secciones claras la sombra la sigue despegando del fondo.

   Va con `fixed` y no con `sticky` a propósito. Con sticky ocuparía su hueco en
   el flujo y el violeta del hero empezaría DEBAJO de ella, que es justo lo que
   no se quiere: la gracia es que la pastilla se vea encima del color. Fixed la
   saca del flujo, y a cambio el hero tiene que reservar su altura arriba —eso
   es `--barra`, y es el único acoplamiento que hay entre las dos—.

   (El pie sí tiene prohibido el fixed, y por un motivo distinto: taparía
   contenido de forma permanente. Una barra de navegación de 60px que además se
   usa para navegar es otra cosa.) */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 12px 18px 0;
  pointer-events: none;          /* el hueco de alrededor no intercepta clics */
}
.barra .env {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  /* La pastilla no puede crecer más que la ventana: sin esto, con el menú de
     secciones puesto y la ventana justa, se salía por la derecha y «Entrar»
     acababa fuera de la pantalla. */
  min-width: 0; max-width: min(var(--ancho), 100%);
  min-height: 58px; padding: 0 10px 0 16px;
  background: #fff;
  border: 1px solid var(--niebla);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
}

.marca { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: inherit; font-weight: 900; }
.marca img { width: 34px; height: 34px; display: block; }
.marca .jp { font-weight: 900; color: var(--frambuesa); font-size: 15px; }

.menu { display: none; align-items: center; gap: 4px; }
.empuje { flex: 1; }
.menu a { color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 700; padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.menu a:hover { color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--violeta-lavado); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 12px; padding: 13px 22px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
/* Turquesa y no violeta: el violeta es la marca y la navegación, y si además
   fuera el botón no habría manera de distinguir «esto te lleva» de «esto hace».
   Con texto blanco encima da 5,1:1; los tres colores de la casa van con blanco
   y nunca con tinta, que sobre ellos no llega. */
.btn-1 { background: var(--turquesa); color: #fff; }
.btn-2 { background: #fff; color: var(--violeta); border: 1px solid var(--niebla); }
.btn-s { padding: 9px 16px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn-1:hover { background: var(--turquesa-hondo); }
  .donacion .btn-1:hover { background: var(--frambuesa); filter: brightness(.9); }
  .hero .btn-1:hover { background: var(--violeta-lavado); }
  .hero .btn-2:hover { background: rgba(255, 255, 255, .14); }
  .btn-2:hover { background: var(--papel-hondo); }
}

/* Selector de idioma. Solo existe si hay más de un idioma traducido: un mando
   para elegir entre una sola cosa sobra, que es la misma regla por la que la
   app no pinta un nivel del JLPT sin contenido. */
.idiomas { position: relative; }
.idiomas summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  color: var(--gris); font-size: 15px; font-weight: 700; padding: 8px 10px; border-radius: 10px;
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 172px;
  background: #fff; border: 1px solid var(--niebla); border-radius: 14px; box-shadow: 0 8px 24px rgba(34, 28, 51, .14);
}
.idiomas li a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--tinta); font-size: 15px; }
.idiomas li a[aria-current] { font-weight: 900; color: var(--violeta); }
@media (hover: hover) and (pointer: fine) { .idiomas li a:hover { background: var(--papel); } }

/* ── Secciones ── */
section { padding: 56px 0; }
section.blanca { background: #fff; border-top: 1px solid var(--niebla); border-bottom: 1px solid var(--niebla); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 14px; }
h1 { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: 27px; font-weight: 900; letter-spacing: -.01em; }
h3 { font-size: 18px; font-weight: 900; }
p { margin: 0 0 16px; }
.entradilla { color: var(--tinta); font-size: 18px; max-width: 62ch; }

/* ── El hero ──
   Sobre el violeta de la marca, que es el mismo de la baldosa del icono. Aquí
   no valen los colores de papel: el texto va en blanco (6,5:1) y el apoyo en el
   violeta lavado (5,3:1). Nada de otro violeta encima: con esta paleta, un
   violeta sobre otro violeta da 1:1 y desaparece.

   Las cifras no van en tarjetas blancas: sobre un fondo de color, cuatro cajas
   blancas parecen pegatinas. Van sueltas, separadas por una línea fina. */
.hero {
  background: var(--violeta); color: #fff;
  /* El violeta empieza arriba del todo, DEBAJO de la barra flotante: la gracia
     es que la pastilla blanca se recorte sobre el color. Por eso el relleno de
     arriba es la altura de la barra más el aire que quiera el texto. */
  padding: calc(var(--barra) + 38px) 0 56px;
}
/* Las páginas que no son la portada llevan el mismo hero, pero sin las cifras
   debajo: sin ellas el bloque de color se queda enorme y vacío. */
.hero-corto { padding-bottom: 34px; }
.hero .kanji { font-size: 15px; font-weight: 700; color: var(--turquesa-claro); letter-spacing: .12em; margin: 0 0 12px; }
.hero h1 { max-width: 16ch; color: #fff; }
.hero .lead { font-size: 19px; color: var(--violeta-lavado); max-width: 60ch; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }
/* El botón que entra se invierte: blanco con el violeta escrito, 6,5:1 por los
   dos lados. Un violeta sobre el violeta del hero daría 1:1 y no existiría. */
.hero .btn-1 { background: #fff; color: var(--violeta); }
/* Y el secundario no es una caja blanca: sobre un fondo de color, un contorno
   pesa lo justo para ser el segundo y no competir con el primero. */
.hero .btn-2 { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55); }
/* Cuánta gente hay ahora. Va entre el botón y la nota, y con el mismo peso
   visual que la nota: es un dato de apoyo, no un titular. El punto es un punto y
   no un icono de Font Awesome porque no dibuja ninguna cosa —no hay «icono de
   estar conectado»—, solo marca que aquí hay algo vivo. Va con aria-hidden: un
   lector de pantalla ya lee el número y la frase entera, y «punto» sobra. */
.hero .ahora { display: flex; align-items: center; gap: 9px; color: var(--violeta-lavado); font-size: 15px; margin: 0 0 14px; }
.hero .ahora b { color: #fff; font-weight: 900; }
.hero .ahora .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--turquesa-claro); flex: none; }
.hero .nota { display: flex; align-items: flex-start; gap: 9px; color: var(--violeta-lavado); font-size: 15px; max-width: 54ch; }
.hero .nota .ic { color: var(--turquesa-claro); margin-top: .35em; }

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 36px; }
.cifras div { padding: 14px 16px; border-left: 1px solid rgba(255, 255, 255, .22); }
.cifras b { display: block; font-size: 30px; font-weight: 900; color: #fff; line-height: 1.1; }
.cifras span { color: var(--violeta-lavado); font-size: 14px; }

/* ── Rejillas ── */
.rejilla { display: grid; gap: 16px; }
.rejilla-2 { grid-template-columns: 1fr; }
.rejilla-3 { grid-template-columns: 1fr; }

.tarjeta {
  background: #fff; border: 1px solid var(--niebla); border-radius: var(--radio);
  padding: 20px; box-shadow: var(--sombra);
}
.tarjeta .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tarjeta .cab .ic { color: var(--violeta); font-size: 20px; }
.tarjeta .cifra { display: inline-block; font-size: 13px; font-weight: 700; color: var(--frambuesa); margin-bottom: 8px; }
.tarjeta p { margin: 0; color: var(--tinta); font-size: 15.5px; }

/* Listas con marca propia: la palomita en verde y la cruz en gris, porque «lo
   que no hay» tampoco es un error. */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; font-size: 16px; }
.lista .ic { margin-top: .3em; }
.tarjeta.si .cab .ic { color: var(--turquesa); }
.tarjeta.no .cab .ic { color: var(--gris-claro); }
.lista.si .ic { color: var(--turquesa); }
.lista.no .ic { color: var(--gris-claro); }

/* ── Pasos ── */
.pasos { counter-reset: paso; display: grid; gap: 14px; }
.paso { display: flex; gap: 15px; }
.paso .n {
  counter-increment: paso; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--violeta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
}
.paso .n::before { content: counter(paso); }
.paso h3 { margin-bottom: 4px; }
.paso p { margin: 0; color: var(--tinta); font-size: 15.5px; }

/* ── Privacidad: bloque oscuro ──
   En oscuro a propósito, como el menú de la app: separa lo que es una promesa
   de lo que es un catálogo, y la vista se para aquí. */
.oscura { background: var(--oscuro); color: var(--oscuro-tinta); border: none; }
.oscura h2 { color: #fff; }
.oscura .entradilla { color: var(--oscuro-apagado); }
.oscura .tarjeta { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); box-shadow: none; }
.oscura .tarjeta h3 { color: #fff; }
.oscura .tarjeta p { color: var(--oscuro-apagado); }
.oscura .tarjeta .cab .ic { color: var(--violeta-claro); }

/* ── Donación ── */
.donacion { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.donacion .frase { font-size: 17px; color: var(--tinta); margin: 0; max-width: 56ch; }
/* El botón de donar no es del color de los botones: donar no es «hacer algo
   dentro de Hanasuka», es otra cosa, y en frambuesa se distingue de un vistazo.
   Con blanco encima da 5,3:1, igual que el turquesa. */
.donacion .btn-1 { background: var(--frambuesa); }

/* ── Página a dos columnas ──
   El texto sobre el violeta a la izquierda y una tarjeta blanca a la derecha,
   encima del color. Es la misma disposición que la pantalla de acceso de la app:
   las dos páginas piden lo mismo —rellenar algo para seguir— y que se vean igual
   es lo que hace que pasar de una a otra no parezca otro sitio.

   En el móvil no hay dos columnas: se apila, con el texto primero. Una tarjeta
   de formulario antes de haber leído para qué es no la rellena nadie. */
.hero-doble { padding-bottom: 46px; }
.doble { display: grid; gap: 28px; align-items: start; }
.doble-texto h1 { font-size: 34px; max-width: 18ch; }
.tarjeta-form { padding: 22px; }

.lista-hero { margin-top: 26px; }
.lista-hero li { color: var(--violeta-lavado); font-size: 14.5px; line-height: 1.55; margin-bottom: 13px; }
.lista-hero strong { color: #fff; }
.lista-hero .ic { color: #fff; margin-top: .3em; }

/* ── Formulario ──
   El de contacto, y el único de toda la portada. Sin una línea de JavaScript: se
   envía como se enviaban los formularios antes de que existiera nada, y quien lo
   recibe (api/contacto.php) contesta con una redirección de vuelta.

   Los campos se ven de lejos que son campos —fondo blanco, borde de 2px y el
   violeta al enfocarlos—: un campo que parece un trozo de fondo se deja sin
   rellenar. Y el foco no se quita nunca, que es lo que hace que esto se pueda
   rellenar entero con el tabulador. */
.env-estrecho { max-width: 720px; }

.formulario { display: grid; gap: 18px; margin-top: 4px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 14.5px; font-weight: 900; }
.campo .pista { font-size: 13px; color: var(--gris); line-height: 1.45; }
.formulario input[type="text"],
.formulario input[type="email"],
.formulario select,
.formulario textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--tinta);
  background: #fff; border: 2px solid var(--niebla); border-radius: 12px;
  padding: 12px 14px; line-height: 1.5;
}
/* 16px y no menos en los campos: por debajo de eso, Safari en el iPhone hace
   zoom al enfocarlos y deja la página torcida. */
.formulario textarea { resize: vertical; min-height: 150px; }
.formulario select { appearance: none; cursor: pointer;
  /* La flecha, dibujada con un degradado en vez de una imagen: aquí no se pide
     nada a ningún dominio de fuera, ni siquiera un SVG suelto. */
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: none; border-color: var(--violeta);
}
.fila { display: grid; gap: 18px; }

.acepta { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.acepta input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--violeta); cursor: pointer; }

.formulario .btn { justify-self: start; }

/* El cebo para robots. Fuera de la pantalla y no con display:none: hay robots
   que se saltan lo que está oculto del todo, y así cae alguno más. Quien navega
   con teclado no lo pisa porque lleva tabindex="-1". */
.cebo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── El aviso de después de enviar ── */
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radio); padding: 14px 16px; margin: 0 0 22px;
  font-size: 15px; line-height: 1.55; font-weight: 700;
}
.aviso .ic { margin-top: .25em; flex: none; }
.aviso-ok { background: var(--turquesa-lavado); color: var(--turquesa); }
.aviso-mal { background: var(--error-lavado); color: var(--error); }

/* ── Preguntas ── */
.faq { max-width: 78ch; }
.faq details { background: #fff; border: 1px solid var(--niebla); border-radius: var(--radio); margin-bottom: 10px; box-shadow: var(--sombra); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--violeta); transition: transform .18s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq .r { padding: 0 18px 18px; margin: 0; color: var(--tinta); font-size: 16px; }

/* ── El último empujón ── */
.final { text-align: center; }
.final h2 { font-size: 30px; }
.final p { color: var(--tinta); max-width: 52ch; margin: 0 auto 22px; }

/* ── Pie ──
   Todo del mismo gris y sin un solo color de marca, igual que el de la app: el
   pie no compite con el contenido, está ahí para quien lo busca.
   Y es el ÚNICO sitio donde el gris hace de texto. En el resto de la página el
   cuerpo va en tinta: media página en gris lavanda se lee apagada, y lo que se
   está contando aquí no es letra pequeña. El gris se reserva para lo que de
   verdad es secundario. */
footer { background: var(--papel); border-top: 1px solid var(--niebla); padding: 30px 0 40px; color: var(--gris); font-size: 14.5px; }
footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 14px; }
footer a { color: var(--gris); text-decoration: none; }
footer a .ic { color: var(--frambuesa); }
footer a:hover { text-decoration: underline; }
footer .creditos { max-width: 74ch; font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
footer .firma { margin: 0; }

/* ── A partir de la tableta ──
   El diseño base es el del teléfono y esto solo añade, nunca rediseña: es la
   misma regla que sigue la app. */
@media (min-width: 700px) {
  body { font-size: 17.5px; }
  h1 { font-size: 46px; }
  h2 { font-size: 32px; }
  section { padding: 72px 0; }
  /* El de arriba sigue siendo la altura de la barra: si se pusiera un número
     suelto aquí, el texto se volvería a meter debajo de la pastilla en cuanto
     la ventana pasara de 700px. Pasó. */
  .hero { padding: calc(var(--barra) + 48px) 0 74px; }
  .hero-corto { padding-bottom: 44px; }
  .hero-doble { padding-bottom: 62px; }
  .doble-texto h1 { font-size: 40px; }
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .cifras div:first-child { border-left: none; }
  .rejilla-2 { grid-template-columns: 1fr 1fr; gap: 22px; }
  .fila { grid-template-columns: 1fr 1fr; }
  .rejilla-3 { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: 1fr 1fr; gap: 22px 26px; }
  .donacion { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
  .doble { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Los destinos aparecen tarde: son seis, y con menos sitio la pastilla se
   quedaba sin aire y «Entrar» se salía por la derecha. */
@media (min-width: 1240px) {
  .menu { display: flex; }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 52px; }
}