/* ── 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(--marca), var(--marca)… 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-catalan.jsx. No editar aquí. */
  --marca: #006DC5;
  --marca-hondo: #005093;
  --accion: #057D4D;
  --accion-hondo: #07633C;
  --marcha: #AF5105;
  --marca-claro: #77AFEF;
  --accion-claro: #5EBE8B;
  --marcha-claro: #FFB892;
  --papel: #F4F8FC;
  --papel-hondo: #E8EFF7;
  --tinta: #1E2B3B;
  --niebla: #D7E2EE;
  --gris: #515D6D;
  --gris-claro: #7C8692;
  --oscuro: #172538;
  --oscuro-tinta: #E3EAF3;
  --oscuro-apagado: #A3B1C3;
  --oscuro-linea: rgba(255,255,255,.10);
  --oscuro-activo: rgba(255,255,255,.10);
  --marca-lavado: #E3F2FF;
  --accion-lavado: #DEF8E7;
  --marcha-lavado: #FFEBDF;
  --error: #C72C45;
  --error-claro: #F0858A;
  --error-lavado: #FFEAEA;
  --escala-1: #0576D3;
  --escala-1-claro: #D8E9FD;
  --escala-2: #0163B4;
  --escala-2-claro: #C1D7F2;
  --escala-3: #005297;
  --escala-3-claro: #AAC7E7;
  --escala-4: #014178;
  --escala-4-claro: #94B7DE;
  --sombra: 0 1px 4px rgba(20,28,45,.08);
  --sombra-alta: 0 6px 22px rgba(20,28,45,.16), 0 1px 2px rgba(20,28,45,.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;
  /* ── Dónde caen los dibujos de fondo ──
     El asanoha, el torii y la flor comparten esta medida, y por eso sus bordes
     derechos quedan en la misma vertical. Antes cada uno llevaba la suya —uno
     40px por fuera de la columna, otro 30, la flor 20 por dentro— y se notaba:
     tres cosas casi alineadas se leen peor que tres claramente distintas.
     Y va por DENTRO del contenedor, no por fuera: colgados del borde de la
     ventana se despegaban del texto en cuanto la pantalla crecía, que es el
     mismo error que ya se corrigió con el monte del hero. */
  --dibujo-x: max(16px, calc(50% - var(--ancho) / 2 + 28px));
}

/* ── 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);
  /* La letra es de cada app (--letra, en su estilo-app.css): la de la
     portada es la misma que la de su app. */
  font-family: var(--letra, 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(--marca); }

/* 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(--marca); 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(--marca); 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; }

/* Lo que NO se encoge en la barra: la marca, el selector y el botón. Si se
   encogen, su texto se parte y la pastilla pasa de 58 a 69 píxeles de alto —que
   es exactamente lo que hacía en francés—. Lo que cede es el menú, que es lo
   único que puede desaparecer sin dejar a nadie sin salida. */
.barra .idiomas, .barra .secciones, .barra .btn { flex: none; }
.menu { display: none; align-items: center; gap: 2px; min-width: 0; }
.empuje { flex: 1; }
.menu a { color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 700; padding: 8px 9px; border-radius: 10px; white-space: nowrap; }
.menu a:hover { color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--marca-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;
  /* Una etiqueta de botón no se parte en dos líneas. Con siete idiomas esto
     dejó de ser teoría: «Se connecter» y «Anmelden» son bastante más largos que
     «Entrar», y al encogerse partían la pastilla de arriba en dos pisos. */
  white-space: nowrap;
}
/* 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(--accion); color: #fff; }
.btn-2 { background: #fff; color: var(--marca); border: 1px solid var(--niebla); }
.btn-s { padding: 9px 16px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn-1:hover { background: var(--accion-hondo); }
  .donacion .btn-1:hover { background: var(--marcha); filter: brightness(.9); }
  .hero .btn-1:hover { background: var(--marca-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; }
/* ── Lo que se esconde de la vista y no del oído ──
   Dos textos de la barra sobran en pantalla cuando no hay sitio, pero no pueden
   desaparecer del todo: sin ellos quedan un mando sin nombre que anunciar y un
   enlace que solo es una imagen. Así que se sacan del flujo en vez de borrarse.

   · La palabra «Idioma» cabe solo cuando cabe el menú entero. Son unos sesenta
     píxeles, que es justo lo que le faltaba al alemán y al francés a 390.
   · El nombre escrito de la marca, en las pantallas estrechas: ahí el botón de
     entrar se salía. El corte está donde está por medición y no a ojo — con
     «Se connecter» y «Anmelden», que son los dos botones más largos de los
     siete idiomas, a 360 no cabía—. Queda el icono, que es la marca de verdad y
     lleva el glifo como trazado; el nombre está en el hero, tres dedos más
     abajo. */
@media (max-width: 1239px) {
  .etiqueta-idioma {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 399px) {
  .marca > span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.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(--marca); }
@media (hover: hover) and (pointer: fine) { .idiomas li a:hover { background: var(--papel); } }

/* ── El menú plegado ──
   La otra forma de la misma lista de destinos. El menú plano solo cabe a partir
   de 1240px; por debajo desaparecía entero y con él «Contacto» y las páginas de
   temas, que no son anclas de esta página sino páginas de verdad — o sea,
   destinos a los que no se llegaba de ninguna forma.
   Es un <details>, como el selector de idiomas: lo abre y lo cierra el
   navegador, así que la portada sigue sin una línea de JavaScript. Y comparte
   con él la caja desplegable, que es la misma pieza con otra lista dentro. */
.secciones { position: relative; }
.secciones 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;
}
.secciones summary::-webkit-details-marker { display: none; }
/* La caja cuelga del borde IZQUIERDO de la hamburguesa, al revés que la de los
   idiomas: la hamburguesa va pegada a la marca, a la izquierda, y colgada del
   borde derecho la caja se abría hacia fuera de la pantalla y se comía media
   lista en el móvil. */
.secciones ul {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 196px;
  background: #fff; border: 1px solid var(--niebla); border-radius: 14px; box-shadow: 0 8px 24px rgba(34, 28, 51, .14);
}
.secciones li a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--tinta); font-size: 15px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .secciones li a:hover { background: var(--papel); } }
/* El nombre del mando va escrito pero NO a la vista, y aquí sin media query: el
   plegado solo existe por debajo de 1240px, que es justo donde no sobra ni un
   píxel — y su rótulo es una frase entera («Secciones de esta página»), no una
   palabra. Se saca del flujo en vez de borrarlo, el mismo truco que «Idioma»:
   un <summary> con solo un dibujo dentro no tiene nombre que anunciarle a quien
   no lo ve. Queda la hamburguesa, que es el icono que ya usa la app para esto
   mismo. */
.etiqueta-secciones {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── 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(--marca); 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 { position: relative; overflow: hidden; }
.hero > .env { position: relative; z-index: 1; }
.partido-color { position: relative; overflow: hidden; }
.partido-color > .partido-dentro { position: relative; z-index: 1; }
/* ── La neblina de la falda ──
   Las cuatro cifras caían encima de la nieve y el «500» se perdía en blanco
   sobre blanco. Bajar más la opacidad del monte no era la solución: entonces no
   se veía el monte. Lo que hay aquí es un degradado del violeta del hero que
   sube desde abajo y se come la montaña justo donde empieza el texto.
   Funciona porque el fondo del hero es plano: el degradado acaba exactamente en
   el mismo color, así que no se ve una banda — se ve bruma en la falda, que
   además es lo que hace una montaña de verdad a esa hora.
   Va en un ::before del propio bloque de cifras y no en el hero, para que suba y
   baje con ellas si el texto cambia de alto en otro idioma. El z-index negativo
   lo mete detrás de las cifras pero por delante del monte: las dos cosas viven
   dentro de .env, que ya está por encima del dibujo. */
.hero .cifras { position: relative; }
.hero .cifras::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -6%; right: -40%; bottom: -70px; top: -26px;
  background: linear-gradient(to bottom, transparent, var(--marca) 72%);
}
.hero .kanji { font-size: 15px; font-weight: 700; color: var(--accion-claro); letter-spacing: .12em; margin: 0 0 12px; }
.hero h1 { max-width: 16ch; color: #fff; }
.hero .lead { font-size: 19px; color: var(--marca-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(--marca); }
/* 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(--marca-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(--accion-claro); flex: none; }
.hero .nota { display: flex; align-items: flex-start; gap: 9px; color: var(--marca-lavado); font-size: 15px; max-width: 54ch; }
.hero .nota .ic { color: var(--accion-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(--marca-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(--marca); font-size: 20px; }
.tarjeta .cifra { display: inline-block; font-size: 13px; font-weight: 700; color: var(--marcha); 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(--accion); }
.tarjeta.no .cab .ic { color: var(--gris-claro); }
.lista.si .ic { color: var(--accion); }
.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(--marca); 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(--marca-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(--marcha); }

/* ── Pantalla partida en dos ──
   El violeta ocupa la mitad izquierda entera y el formulario la derecha entera,
   a sangre. No es una columna de contenido con dos huecos dentro: eso dejaba el
   formulario tan ancho que parecía un cuestionario, con campos de medio metro.
   Aquí cada mitad acota su contenido y lo alinea contra la juntura del centro,
   que es lo que las hace parecer dos páginas puestas una al lado de la otra.

   En el móvil no hay dos mitades: se apila, con el violeta arriba. Un formulario
   antes de haber leído para qué es no lo rellena nadie. */
.partido { display: grid; }
.partido-lado { display: flex; padding: calc(var(--barra) + 30px) 18px 40px; }
.partido-color { background: var(--marca); color: #fff; }
.partido-papel { background: #fff; padding-top: 34px; }
/* El contenido de cada mitad, acotado. Sin este tope, en una pantalla ancha los
   campos crecerían hasta ocupar media pantalla y no habría forma de leerlos de
   una pasada. */
.partido-dentro { width: 100%; max-width: 460px; }
.partido h1 { font-size: 32px; max-width: 15ch; color: #fff; }
.partido .lead { font-size: 17px; color: var(--marca-lavado); }

.lista-hero { margin-top: 24px; }
.lista-hero li { color: var(--marca-lavado); font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.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: 15px; 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: 11px 13px; line-height: 1.45;
}
/* 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: 130px; }
.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(--marca);
}
.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(--marca); 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; }

/* ── La atribución de reCAPTCHA ──
   Sus condiciones dejan esconder el distintivo flotante —una pastilla fija en
   una esquina de la pantalla, que aquí taparía contenido y no pega con nada— a
   cambio de decirlo en el propio formulario con sus dos enlaces. Una cosa sin la
   otra no vale: si se quita este párrafo, hay que devolver el distintivo. */
.grecaptcha-badge { visibility: hidden; }
.pista-captcha { font-size: 12px; color: var(--gris); line-height: 1.5; margin: -6px 0 0; max-width: 46ch; }
.pista-captcha a { color: inherit; }

/* ── 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(--accion-lavado); color: var(--accion); }
.aviso-mal { background: var(--error-lavado); color: var(--error); }

/* ── Textos legales y página del autor ──
   Los mismos bloques que pinta la app, con el mismo aspecto: es el mismo
   documento y no puede leerse de dos maneras según por dónde se llegue. Cada
   apartado en su tarjeta, que es lo que hace legible un texto largo — un muro de
   cuatro mil palabras sin cortes no lo lee nadie. */
.legal { display: grid; gap: 14px; }
.legal-bloque { padding: 20px 22px; }
.legal-bloque h2 { font-size: 17px; color: var(--marca); margin: 0 0 12px; }
.legal-bloque p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.legal-bloque p:last-child { margin-bottom: 0; }
.legal-lista { margin: 0 0 12px; padding-left: 20px; }
.legal-lista li { font-size: 15px; line-height: 1.6; margin: 0 0 7px; }

.legal-nota {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--marca-lavado); border-left: 4px solid var(--marca);
  border-radius: 0 12px 12px 0; padding: 10px 14px; font-size: 14px !important; line-height: 1.6;
}
.legal-nota .ic { color: var(--marca); margin-top: .3em; flex: none; }
.legal-enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

/* La tabla se arrastra dentro de su propia caja: con tres columnas de texto
   largo, en un móvil no cabe de otra manera, y sin este envoltorio sería la
   página entera la que se desplazaría a lo ancho. */
.legal-tabla { overflow-x: auto; margin: 0 0 12px; }
.legal-tabla table { min-width: 380px; width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: 12px; overflow: hidden; border: 2px solid var(--niebla); }
.legal-tabla th { background: var(--marca); color: #fff; padding: 8px 10px; font-size: 13.5px; text-align: left; }
.legal-tabla td { padding: 8px 10px; font-size: 14px; line-height: 1.5; border-top: 1px solid var(--niebla); vertical-align: top; }
.legal-tabla td:first-child { font-weight: 700; }

.legal-fecha { font-size: 13px; color: var(--gris); margin: 4px 0 0; }

/* La salida a la web del autor: una tarjeta que se pulsa, con el borde de la
   marca para que se vea que lleva fuera. */
.legal-fuera { display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  text-decoration: none; color: var(--tinta); border: 2px solid var(--marca); }
.legal-fuera .ic { color: var(--marca); font-size: 18px; flex: none; }
.legal-fuera strong { display: block; font-size: 15.5px; color: var(--marca); }
.legal-fuera span span { display: block; font-size: 13.5px; color: var(--gris); line-height: 1.45; }

/* ── 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(--marca); 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; position: relative; overflow: hidden; }
.final > .env { position: relative; z-index: 1; }
.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(--marcha); }
footer a:hover { text-decoration: underline; }
footer .firma { margin: 0; }
footer { position: relative; overflow: hidden; }
footer > .env { position: relative; z-index: 1; }

/* ── El aviso de cookies ──
   Solo sale si la app mide con Google Analytics (partes/cartel-cookies.php). Es
   lo último de la página y va pegado al borde de abajo mientras se lee: sticky
   y no fixed, así no tapa el pie al llegar al final ni obliga a reservarle un
   hueco que no se sabe cuánto mide en cada idioma. Blanco sobre el papel, con
   la sombra alta de lo que flota, y los dos botones del mismo color: rechazar
   no puede verse menos que aceptar. */
.cartel-cookies {
  position: sticky; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--niebla); box-shadow: var(--sombra-alta);
  padding-block: 16px;
}
.cartel-cookies .env { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cartel-cookies-texto { flex: 1 1 420px; min-width: 0; }
.cartel-cookies h2 { font-size: 17px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.cartel-cookies h2 .ic { color: var(--marca); }
.cartel-cookies p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--gris); }
.cartel-cookies a { color: var(--marca); font-weight: 700; }
.cartel-cookies .cartel-cookies-ahora { margin-top: 6px; color: var(--tinta); font-weight: 700; }
.cartel-cookies-botones { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 320px; }
.cartel-cookies-botones .btn { flex: 1 1 0; }
/* En el móvil los botones bajan debajo del texto y ocupan el ancho entero. */
@media (max-width: 699px) { .cartel-cookies-botones { flex-basis: 100%; } }

/* ── Las tramas de las secciones blancas ──
   Las dos van a la derecha, detrás del contenido y muy tenues: sobre papel
   claro un dibujo aguanta mucha menos tinta que sobre el violeta del hero, así
   que aquí las opacidades son la mitad. Se recortan contra el borde de la
   sección, que además es lo que impide que empujen la página a lo ancho.
   Ancladas al contenedor y no a la ventana, como el monte: en un monitor ancho,
   pegadas al borde se quedarían solas a media pantalla del texto. */
.blanca { position: relative; overflow: hidden; }
.blanca > .env { position: relative; z-index: 1; }
/* «Qué hay dentro» no es blanca y también lleva dibujo, así que se posiciona
   aparte. Sin esto el dibujo no se cuelga de la sección sino de la ventana: el
   cerezo que hubo aquí salía al pie de la PRIMERA pantalla, encima del hero, y
   su esquina se quedaba vacía. Un dibujo absoluto necesita una sección que no
   sea `static`; ser blanca era lo que se lo daba a las demás, no una regla. */
#dentro { position: relative; overflow: hidden; }
#dentro > .env { position: relative; z-index: 1; }

/* ── 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; }
  .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; }

}

/* Los destinos aparecen tarde: son seis, y con menos sitio la pastilla se
   quedaba sin aire y «Entrar» se salía por la derecha. */
/* Las dos mitades, a partir de la tableta. Cada una empuja su contenido contra
   el centro —la izquierda a la derecha y la derecha a la izquierda— para que se
   encuentren en la juntura en vez de quedar cada uno en su esquina. */
@media (min-width: 900px) {
  .partido { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .partido-lado { align-items: center; padding: calc(var(--barra) + 40px) 44px 56px; }
  .partido-color { justify-content: flex-end; }
  .partido-papel { justify-content: flex-start; padding-top: calc(var(--barra) + 40px); }
  .partido h1 { font-size: 38px; }
}

@media (min-width: 1240px) {
  .menu { display: flex; }
  /* Con el menú plano a la vista, el plegado sobra: serían los mismos seis
     destinos dos veces en la misma barra. */
  .secciones { display: none; }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS PÁGINAS DEL TEMARIO
   Diez páginas que explican una parte del japonés (hiragana, kanji, JLPT…) y
   enseñan cómo se estudia aquí. Comparten la cabecera, las tarjetas y el pie;
   lo de abajo es lo suyo: las tablas de kana, las fichas de kanji, la línea del
   tiempo y las frases de muestra.

   Ni un color escrito a mano: todo sale de la paleta que inyecta el build.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La cabecera ── */
.tema-cab { padding-top: calc(var(--barra) + 18px); background: var(--papel-hondo); border-bottom: 1px solid var(--niebla); }
.tema-cab-dentro { display: grid; gap: 22px; align-items: center; margin-top: 6px; }
.tema-cab h1 { font-size: 30px; line-height: 1.15; margin: 6px 0 10px; letter-spacing: -.02em; }
.tema-resumen { color: var(--gris); font-size: 15px; margin-top: 10px; max-width: 58ch; }

/* La miga de pan: dice dónde estás a quien ha caído aquí desde un buscador. */
.miga { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); margin-bottom: 10px; }
.miga a { color: var(--marca); text-decoration: none; }
.miga a:hover { text-decoration: underline; }
.miga span[aria-current] { color: var(--gris); }

/* La palabra japonesa de encima del titular. */
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--marca); margin: 0; text-transform: none; }

/* ── El dibujo ──
   Se estira al ancho que le den y nunca pasa de 420: es una ilustración, no una
   fotografía, y a tamaño de cartel se ve el andamio. */
.dibujo { width: 100%; max-width: 420px; margin: 0 auto; }
.dibujo svg { display: block; width: 100%; height: auto; }

/* ── El dato que remata un bloque ── */
.dato { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px;
  background: var(--accion-lavado); border-left: 4px solid var(--accion); border-radius: 0 var(--radio) var(--radio) 0; }
.dato p { margin: 0; font-size: 15.5px; }
.dato .ic { color: var(--accion); flex-shrink: 0; margin-top: 3px; }

/* Lo que hay que decir aunque no apetezca: reservas y avisos. */
.aviso-dato { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--niebla);
  border-radius: var(--radio); color: var(--gris); font-size: 14px; background: var(--papel); }

/* La nota que va debajo de una tabla y explica una rareza. */
.nota-tabla { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; color: var(--gris); font-size: 14px; max-width: 78ch; }
.nota-tabla .ic { color: var(--marca); flex-shrink: 0; margin-top: 3px; }

/* ── Listas largas con su marca delante ── */
.lista-larga { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.lista-larga li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--niebla);
  border-radius: var(--radio); padding: 14px 16px; }
.lista-larga .ic { color: var(--accion); flex-shrink: 0; margin-top: 3px; }
.lista-larga strong { display: block; }

/* ── Tabla de datos de dos columnas (los repartos de kanji) ── */
.tabla-datos { width: 100%; border-collapse: collapse; margin-top: 4px; }
.tabla-datos th { text-align: left; font-weight: 500; color: var(--gris); padding: 7px 0; border-bottom: 1px solid var(--niebla); font-size: 14.5px; }
.tabla-datos td { text-align: right; font-weight: 900; padding: 7px 0; border-bottom: 1px solid var(--niebla); font-variant-numeric: tabular-nums; }

/* ── Frases de muestra ── */
.frases { display: grid; gap: 14px; margin-top: 24px; }
.frase { background: #fff; border: 1px solid var(--niebla); border-radius: var(--radio); padding: 16px 18px; }
.frase p { margin: 0; }
.frase .jp { font-size: 21px; font-weight: 700; line-height: 1.4; }
.frase .kana { font-size: 14px; color: var(--gris); margin-top: 2px; }
.frase .rom { font-size: 13px; color: var(--marca); }
.frase .es { font-size: 16px; margin-top: 8px; }
.frase .cuando { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; color: var(--gris); }
.frase .cuando .ic { color: var(--marca); flex-shrink: 0; margin-top: 2px; }
.frase .etiquetas { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.etiqueta { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--marca-lavado); color: var(--marca); }
.etiqueta.reg { background: var(--accion-lavado); color: var(--accion); }

/* ── El temario ── */
.temario-nivel { margin-top: 28px; }
.temario-nivel h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 10px; color: var(--gris); font-weight: 700; }
.temario { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.temario li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--niebla);
  border-radius: 12px; padding: 10px 14px; }
.temario .u-kanji { font-size: 18px; font-weight: 700; color: var(--marca); min-width: 2.4em; }
.temario .u-tit { flex: 1; font-size: 15px; }
.temario .u-pre { font-size: 12px; color: var(--gris-claro); font-variant-numeric: tabular-nums; }

/* La etiqueta de nivel, con los colores de la escala de la app. */
.nivel-etq { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 3px 8px;
  border-radius: 8px; font-size: 13px; font-weight: 900; color: #fff; }
.nivel-n5 { background: var(--escala-1); }
.nivel-n4 { background: var(--escala-2); }
.nivel-n3 { background: var(--escala-3); }
.nivel-n2 { background: var(--escala-4); }
.nivel-n1 { background: var(--escala-5); }

.niveles { display: grid; gap: 12px; margin-top: 24px; }
.nivel { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--niebla);
  border-radius: var(--radio); padding: 16px 18px; }
.nivel h3 { margin: 0; font-size: 17px; }
.nivel .sub { margin: 4px 0 0; color: var(--gris); font-size: 14.5px; }
.nivel .cubre { margin: 8px 0 0; font-size: 13px; color: var(--gris); }

/* ── La línea del tiempo ── */
.eras { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.eras li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--niebla);
  border-radius: var(--radio); padding: 16px 18px; }
.era-kanji { flex-shrink: 0; min-width: 2.6em; font-size: 22px; font-weight: 700; color: var(--marca); line-height: 1.3; }
.eras h3 { margin: 0; font-size: 17px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.eras .anios { font-size: 13px; font-weight: 500; color: var(--gris); }
.eras p { margin: 6px 0 0; font-size: 14.5px; color: var(--gris); }

/* Un ejemplo en japonés dentro de una tarjeta. */
.tarjeta .ej { font-size: 18px; font-weight: 700; color: var(--marca); margin: 0 0 6px; }

/* La tarjeta que además es un enlace: se comporta como tarjeta y se nota que lleva. */
.enlace-tema { display: block; text-decoration: none; color: inherit; }
.enlace-tema h3 { color: var(--marca); }
@media (hover: hover) and (pointer: fine) {
  .enlace-tema { transition: border-color .12s ease, transform .12s ease; }
  .enlace-tema:hover { border-color: var(--marca); transform: translateY(-2px); }
}

@media (min-width: 700px) {
  .tema-cab { padding-top: calc(var(--barra) + 26px); }
  .tema-cab h1 { font-size: 38px; }
  .tema-cab-dentro { grid-template-columns: 1.15fr .85fr; gap: 34px; }
  .frases { grid-template-columns: repeat(2, 1fr); }
}

/* ── Lo de cada app ──
   Aquí el build pega el estilo-app.css de la app: su letra (--letra y sus
   @font-face), dónde caen sus dibujos y lo que solo pintan sus páginas del
   temario. Va al final a propósito: es lo único de la hoja que sabe de qué app
   es, y así nada de lo común le pisa una regla. */
/* De Petit Drac: web/estilo-app.css. */
/* ── Lo que la portada de Petit Drac añade a la de la librería ──
   El build pega esto al final de estilo.css (jsf_llengua/web), donde dice
   @estilo-app: la letra, dónde caen los dibujos y lo que solo pintan las páginas
   del temario de esta app. */

/* ── La letra ──
   La del sistema, como en la app, hasta que se decida la propuesta de diseño
   (Atkinson Hyperlegible Next, autoalojada en assets/fuente/ y nunca pedida a
   Google Fonts). Mientras tanto no se sirve ninguna, y no hay nada que declarar. */
:root {
  --letra: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── El dragón del hero ──
   Donde Hanasuka pone su monte: abajo a la derecha, anclado al borde de la
   columna de texto y medio salido, detrás de todo y sin tragarse un clic. */
.drac {
  position: absolute; bottom: 0; z-index: 0;
  right: max(-7%, calc(50% - var(--ancho) / 2 - 60px));
  width: 860px; max-width: 62%; height: auto; pointer-events: none;
}
@media (max-width: 899px) { .drac { display: none; } }

/* ── Las olas del contacto ──
   Sobre el panel de color, muy tenues y saliéndose por abajo y a la derecha. */
.ones-fondo {
  position: absolute; right: -10%; bottom: -8%; z-index: 0;
  width: 90%; height: auto; opacity: .1; pointer-events: none;
}
@media (max-width: 899px) { .ones-fondo { display: none; } }

/* ── El libro del último empujón ── */
.llibre-final {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--dibujo-x); top: 50%; transform: translateY(-50%) rotate(-6deg);
  width: 190px; height: 163px; color: var(--marcha); opacity: .1;
}
@media (max-width: 1099px) { .llibre-final { display: none; } }

/* ── La rosa del pie ──
   Tumbada en diagonal: de pie no cabría en la altura del pie. */
.rosa-pie {
  position: absolute; z-index: 0; pointer-events: none;
  right: var(--dibujo-x); top: 50%; width: 104px; height: 143px;
  color: var(--marcha); opacity: .13;
  transform: translateY(-50%) rotate(58deg);
}
@media (max-width: 899px) { .rosa-pie { display: none; } }

/* ── El olivo, el porró y la rajola ──
   A la derecha de sus secciones, detrás del contenido y muy tenues. */
.olivera-que, .rajola-faq, .porro-dentro { position: absolute; z-index: 0; pointer-events: none; color: var(--marca); }
.olivera-que {
  right: var(--dibujo-x);
  top: 0; height: 100%; width: 150px; opacity: .09;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
/* El porró, arriba y junto al titular: abajo quedaba detrás de la última
   tarjeta, que es blanca, y no se veía nunca. */
.porro-dentro {
  right: var(--dibujo-x);
  top: 34px; width: 168px; height: 140px; opacity: .09;
}
.rajola-faq {
  right: var(--dibujo-x);
  bottom: 18px; width: 210px; height: 210px; opacity: .08;
}
@media (max-width: 1099px) { .olivera-que, .rajola-faq, .porro-dentro { display: none; } }

/* ── Los cuatro niveles, con la escalera de la app ── */
.nivel-1 { background: var(--escala-1); }
.nivel-2 { background: var(--escala-2); }
.nivel-3 { background: var(--escala-3); }
.nivel-4 { background: var(--escala-4); }

/* La marca de cada unidad es una palabra y no un kanji: necesita más sitio para
   que los títulos queden en columna. */
.temario .u-kanji { min-width: 5em; }

/* El catalán dentro de las listas del temario va en cursiva, como en la app. */
.temario .u-tit i { color: var(--gris); }