/* ============================================================
   Learning Darija — hoja de estilo
   Rehecha el 2026-09-22 copiando el planteamiento de Abetka (alfabeto
   ucraniano, Awwwards Site of the Day 2023): bloques planos a sangre, una
   grotesca condensada de rótulo y el alfabeto como baraja de cartas.
   El lienzo con la dirección elegida (F) y las descartadas está en
   PLAN.md. Cero terceros: las fuentes salen de assets/fuentes/.
   ============================================================ */

:root {
  --verde:       #1D6B4A;   /* acierto sobre claro; estrellas del friso */
  --verde-hondo: #154F37;
  --verde-claro: #9BE0B8;   /* acierto sobre verde o tinta */
  --rojo:        #A32330;   /* acentos: corchetes, números, error */
  --rojo-vivo:   #C8323C;
  /* Paleta pastel: crema, melocotón y tinta marrón. El 2026-09-23 se probó
     una de zellige (blanco, cobalto, negro) y David prefirió esta. */
  --melocoton:   #F0C5A8;   /* bloque intermedio */
  --crema:       #F2E6D4;   /* las cartas */
  --blanco:      #FFFFFF;
  --tinta:       #2A1710;   /* texto y bloque oscuro */
  --gris:        #6B5A52;   /* texto secundario sobre blanco: 6,4:1 */

  /* Color de la casa: cabecera, pie, cartel y bloques de tema. Rojo desde
     el 2026-09-23 (antes verde). Sobre él solo valen crema, melocotón y
     verde claro (contraste, ver CLAUDE.md). Cambiar de tema es esta línea. */
  --tema:        var(--rojo);

  /* Galgo Condensed (rótulo, en prueba desde el 2026-09-22), CMU Serif
     (texto: Computer Modern, la de TeX, desde el 2026-09-23), Jomhuria (árabe de cartel, solo letras sueltas grandes),
     Harmattan (árabe vocalizado). Big Shoulders queda detrás de Galgo: a
     Galgo le faltan ḥ ṣ ṭ ḍ ẓ ʿ ʾ y el navegador los toma de ahí.
     Por qué estas: tools/fuentes.py. */
  --rotulo: "Galgo", "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif;
  --muelle: cubic-bezier(.34, 1.56, .64, 1);   /* rebote de las cartas */
  --friso: 40px;
  --texto:  "CMU Serif", "Latin Modern Roman", "Computer Modern", Georgia, serif;
  --cartel: "Jomhuria", "Harmattan", serif;
  --arabe:  "Harmattan", "Traditional Arabic", serif;

  --margen: clamp(16px, 5vw, 64px);
  --ancho: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
}

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

img, svg { max-width: 100%; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--rojo); }
.bloque--tema a:hover, .bloque--rojo a:hover, .pie a:hover { text-decoration-color: var(--melocoton); }

/* ---------- Titulares ---------- */

h1, h2, h3, h4 {
  font-family: var(--rotulo);
  font-weight: 800;
  /* Cero. Nunca negativo: es la firma de las plantillas (medido en nueve
     sitios del sector, ver CLAUDE.md). La caja alta va sin espaciar: es
     rótulo, no etiqueta. */
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0;
}

/* Escala irregular a propósito: 18 / 28 / 46 / 72 / 112. Una progresión
   modular limpia es lo que emite cualquier plantilla. */
h1 { font-size: 72px; text-transform: uppercase; }
h2 { font-size: 46px; text-transform: uppercase; }
/* h3 y h4 van en el texto (Computer Modern, negrita), como el apartado de
   un paper: Galgo queda para los titulares grandes y los números. Pedido por
   David el 2026-09-23. La excepción es .camino h3, que es rótulo de lista. */
h3, h4 { font-family: var(--texto); font-weight: 700; line-height: 1.25; }
h3 { font-size: 28px; }
.camino h3 { font-family: var(--rotulo); font-weight: 800; line-height: 0.95; }
.titular-cartel { font-size: 112px; }

@media (max-width: 860px) {
  h1 { font-size: 46px; }
  h2 { font-size: 34px; }
  h3 { font-size: 22px; }
  .titular-cartel { font-size: 64px; }
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* El árabe: con cuerpo, sin espaciado jamás (separar letras rompe los
   enlaces, que en árabe son ortografía). */
[lang="ar"] { font-family: var(--arabe); letter-spacing: 0; }
/* Harmattan dibuja más pequeño que el texto latino: a 1,2em la palabra árabe
   quedaba por debajo del texto que la rodea; las letras sueltas, más aún. */
bdi[lang="ar"] { font-size: 1.6em; line-height: 1; }
/* A 1,6em las letras altas (ك گ ل) y las vocales de arriba llegan a la
   línea de encima. El párrafo que lleva árabe dentro gana interlineado
   entero, no solo esa línea, para que el ritmo no salte a medio párrafo. */
:is(p, li, td, dd, figcaption, span):has(> bdi[lang="ar"]) { line-height: 1.95; }
.ar { font-family: var(--arabe); direction: rtl; unicode-bidi: isolate; }
.lat { font-style: italic; }

/* ---------- Bloques planos ---------- */

/* Aire de cada bloque. Subido el 2026-09-23: David lo veía apretado. */
.bloque { --aire: clamp(72px, 10vw, 136px); padding-block: var(--aire); }
.bloque--tema     { background: var(--tema); color: var(--crema); }
.bloque--tinta    { background: var(--tinta); color: var(--crema); }
.bloque--melocoton{ background: var(--melocoton); color: var(--tinta); }
.bloque--crema    { background: var(--crema); color: var(--tinta); }
.bloque--rojo     { background: var(--rojo); color: var(--crema); }
.bloque--junto    { padding-top: 0; }

/* ---------- Friso de zellige entre secciones ----------
   Cenefa de estrellas de ocho puntas (khatam), la que remata zócalos y
   fuentes en Fez y Marrakech. La estrella está calculada, no dibujada a
   ojo: radio interior = R·cos45°/cos22,5°. Colores de la paleta, tinta
   plana, sin degradados. Va entre dos secciones y encima del pie; no
   entre un bloque y su continuación (.bloque--junto). */
main :is(.bloque, .cartel) + section:not(.bloque--junto),
.pie { position: relative; }
main :is(.bloque, .cartel) + section:not(.bloque--junto)::before,
.pie::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--friso);
  border-block: 2px solid var(--crema);
  background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Crect width='80' height='40' fill='%232A1710'/%3E%3Cpath d='M20 3 L25 8 L32 8 L32 15 L37 20 L32 25 L32 32 L25 32 L20 37 L15 32 L8 32 L8 25 L3 20 L8 15 L8 8 L15 8Z' fill='%231D6B4A' stroke='%23F2E6D4' stroke-width='2'/%3E%3Cpath d='M60 3 L65 8 L72 8 L72 15 L77 20 L72 25 L72 32 L65 32 L60 37 L55 32 L48 32 L48 25 L43 20 L48 15 L48 8 L55 8Z' fill='%23A32330' stroke='%23F2E6D4' stroke-width='2'/%3E%3Cpath d='M20 14 L21.8 15.8 L24.2 15.8 L24.2 18.2 L26 20 L24.2 21.8 L24.2 24.2 L21.8 24.2 L20 26 L18.2 24.2 L15.8 24.2 L15.8 21.8 L14 20 L15.8 18.2 L15.8 15.8 L18.2 15.8Z' fill='%23F0C5A8'/%3E%3Cpath d='M60 14 L61.8 15.8 L64.2 15.8 L64.2 18.2 L66 20 L64.2 21.8 L64.2 24.2 L61.8 24.2 L60 26 L58.2 24.2 L55.8 24.2 L55.8 21.8 L54 20 L55.8 18.2 L55.8 15.8 L58.2 15.8Z' fill='%23F0C5A8'/%3E%3Cpath d='M40 16L44 20L40 24L36 20Z' fill='%23F2E6D4'/%3E%3Cpath d='M0 16L4 20L0 24L-4 20Z' fill='%23F2E6D4'/%3E%3Cpath d='M80 16L84 20L80 24L76 20Z' fill='%23F2E6D4'/%3E%3C/svg%3E") repeat-x center center / auto 100%;
}
/* El friso ocupa sitio: se suma al aire de arriba para que no se coma el
   contenido. */
main :is(.bloque, .cartel) + section.bloque:not(.bloque--junto) { padding-top: calc(var(--aire) + var(--friso)); }

.entradilla { font-size: 21px; line-height: 1.5; max-width: 40em; }
.aparte { max-width: 42em; }
.pie-bloque { margin-top: 2.8rem; font-size: 16px; }
.suave { opacity: 0.85; }

/* ---------- Cabecera fija y pie ---------- */

.salta {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.salta:focus {
  width: auto; height: auto; margin: 0; clip-path: none;
  left: var(--margen); top: 10px; z-index: 100;
  background: var(--crema); color: var(--tinta); padding: 0.6em 1em;
}

.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--tema); color: var(--crema);
  border-bottom: 2px solid var(--tinta);
}
.cabecera .env {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 28px; min-height: 60px; padding-block: 8px;
}
.marca {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: inherit;
  font-family: var(--rotulo); font-weight: 900; font-size: 26px;
  text-transform: uppercase; line-height: 1;
}
.marca__ar { font-family: var(--arabe); font-weight: 700; font-size: 26px; text-transform: none; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.menu a, .idiomas a, .idiomas span {
  font-family: var(--texto); font-weight: 700; font-size: 19px;
  text-decoration: none; color: inherit; line-height: 1.2;
}
/* Computer Modern es más ancha que Galgo: en móvil el menú, más apretado,
   para que la cabecera fija no ocupe tres filas. */
@media (max-width: 620px) {
  .cabecera .env { gap: 4px 16px; }
  .menu { gap: 4px 14px; }
  .menu a, .idiomas a, .idiomas span { font-size: 16px; }
}
.menu a:hover { text-decoration: underline; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--melocoton); }
.idiomas { display: flex; gap: 0; align-items: center; }
.idiomas > * { padding: 6px 8px; min-height: 32px; display: inline-flex; align-items: center; }
.idiomas > * + * { border-left: 2px solid currentColor; }
.idiomas .idioma--actual { background: var(--crema); color: var(--tema); }

.pie { background: var(--tema); color: var(--crema); padding-block: calc(56px + var(--friso)) 40px; }
.pie .env { display: grid; gap: 28px; }
@media (min-width: 860px) { .pie .env { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.pie__marca { font-family: var(--rotulo); font-weight: 900; font-size: 58px; text-transform: uppercase; line-height: 0.9; margin: 0; }
.pie__marca span { font-family: var(--arabe); font-weight: 700; text-transform: none; }
.pie p { font-size: 16px; }
.pie a { color: var(--crema); }

/* ---------- Botón: arco polilobulado ---------- */

.boton {
  position: relative;
  display: inline-flex; align-items: flex-end; justify-content: center;
  min-width: 240px; min-height: 78px;
  padding: 0 24px 14px;
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--texto); font-weight: 700; font-size: 22px;
  line-height: 1.2;
}
.boton > span { position: relative; z-index: 1; }
.boton:hover { color: var(--rojo); }
/* El borde superior tesela un solo lóbulo: el botón crece sin deformar
   los arcos. */
.boton::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background-color: var(--crema);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='26'><path d='M0 26 A25 25 0 0 1 50 26 Z' fill='black'/></svg>") repeat-x center bottom;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='26'><path d='M0 26 A25 25 0 0 1 50 26 Z' fill='black'/></svg>") repeat-x center bottom;
}
.boton::after { content: ""; position: absolute; left: 0; right: 0; top: 25px; bottom: 0; background: var(--crema); }
.boton--tinta { color: var(--crema); }
.boton--tinta:hover { color: var(--melocoton); }
.boton--tinta::before { background-color: var(--tinta); }
.boton--tinta::after { background: var(--tinta); }
.botonera { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 2.8rem; }
.botonera__nota { margin: 0; font-size: 16px; }

/* ---------- Cartas del alfabeto (76:105, como las de Abetka) ---------- */

.carta {
  position: relative;
  /* La letra grande se mide contra el ancho de la carta (cqi): con un
     tamaño fijo en px las anchas (ب ث ش) se salían por los lados. */
  container-type: inline-size;
  aspect-ratio: 76 / 105;
  background: var(--crema); color: var(--tinta);
  border: 2px solid var(--tinta);
  display: flex; flex-direction: column;
}
details.carta > summary { list-style: none; cursor: pointer; flex: 1; display: flex; flex-direction: column; }
details.carta > summary::-webkit-details-marker { display: none; }
.carta__arriba {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px 0;
  font-family: var(--texto); font-weight: 700; font-size: clamp(12px, 12cqi, 20px); line-height: 1.2;
}
.carta__clave { color: var(--rojo); }
/* Las letras de Jomhuria van a line-height 1, nunca menos: su tinta cabe
   justa en un em (0,61 arriba, 0,39 abajo). Con 0,6 la caja medía la mitad
   que la letra y esta pisaba el rótulo de al lado. Vale para todos los
   glifos grandes de abajo. */
.carta__glifo {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--cartel); font-size: 76cqi; line-height: 1; color: var(--tinta);
}
.carta__nombre {
  padding: 0 12px 10px; font-family: var(--texto); font-weight: 700; font-size: clamp(12px, 12cqi, 20px); line-height: 1.2;
}
.carta__vuelta { display: none; }
details.carta[open] { background: var(--tinta); color: var(--crema); }
details.carta[open] .carta__glifo,
details.carta[open] .carta__nombre { display: none; }
details.carta[open] summary { flex: 0; }
details.carta[open] .carta__clave { color: var(--melocoton); }
details.carta[open] .carta__vuelta {
  display: flex; flex-direction: column; gap: 10px; flex: 1;
  padding: 12px 14px 16px; font-size: 15px; line-height: 1.45;
}
/* Veredicto como arranque en cursiva del párrafo, no rótulo encima del
   título: el antetítulo es una de las marcas de página hecha con IA
   (docs/SENALES-IA.md). Lo mismo en .demo__veredicto y .sonido__marca. */
.carta__signo { font-style: italic; color: var(--melocoton); }
.carta__signo[data-signo="ventaja"] { color: var(--verde-claro); }
.carta__ejemplo { margin-top: auto; border-top: 2px solid currentColor; padding-top: 8px; }
.carta__ejemplo [lang="ar"] { font-size: 32px; line-height: 1.5; display: block; }
/* El altavoz de la cara: abajo, en el centro, entre la letra latina y el «+».
   Suena la palabra de ejemplo; al voltear la carta se esconde (el dorso
   trae los suyos). 40 px: el mínimo cómodo para el dedo en una carta de
   112 px de ancho. */
.carta .carta__oir { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); min-width: 40px; min-height: 40px; border: 0; color: var(--rojo); }
.carta .carta__oir svg { width: 22px; height: 22px; }
details.carta[open] .carta__oir { display: none; }
.carta__mas { position: absolute; right: 10px; bottom: 8px; font-family: var(--texto); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--rojo); }
details.carta[open] .carta__mas { transform: rotate(45deg); color: var(--melocoton); }

/* ---------- Cartas en movimiento (a la manera de Balatro) ----------
   Tres capas que no se pisan:
   - el <li> se mece solo (translate/rotate sueltos, que se suman al
     transform que ya llevan las del cartel);
   - la carta se inclina hacia el puntero (--rx/--ry, de baraja.js) y sube
     al pasar por encima, con rebote;
   - al voltearla da media vuelta en el eje vertical (scale, .carta--gira).
   La sombra es un bloque desplazado, sin difuminar: tinta plana. */
.baraja > li, .letras > li, .cartel__baraja > li {
  animation: mecer 5.2s ease-in-out infinite;
}
.baraja > li:nth-child(3n+2), .letras > li:nth-child(3n+2), .cartel__baraja > li:nth-child(3n+2) { animation-duration: 4.4s; animation-delay: -1.7s; }
.baraja > li:nth-child(3n),   .letras > li:nth-child(3n),   .cartel__baraja > li:nth-child(3n)   { animation-duration: 6s;   animation-delay: -3.1s; }
.baraja > li:nth-child(4n),   .letras > li:nth-child(4n),   .cartel__baraja > li:nth-child(4n)   { animation-direction: reverse; }
@keyframes mecer {
  0%, 100% { translate: 0 0;    rotate: -0.8deg; }
  50%      { translate: 0 -5px; rotate: 0.8deg; }
}

.baraja .carta, .letras .carta, .cartel__baraja .carta {
  --rx: 0deg; --ry: 0deg; --alza: 0px; --zoom: 1;
  transform: perspective(800px) translateY(var(--alza)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--zoom));
  transition: transform .5s var(--muelle), box-shadow .25s ease-out;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
@media (hover: hover) and (pointer: fine) {
  .baraja .carta:hover, .letras .carta:hover, .cartel__baraja .carta:hover {
    --alza: -14px; --zoom: 1.06;
    z-index: 5;
    box-shadow: 8px 12px 0 rgba(0, 0, 0, 0.4);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
  }
}
/* La carta vuelta queda levantada, como la seleccionada en la mano. */
.baraja details.carta[open] { --alza: -10px; z-index: 4; box-shadow: 8px 12px 0 rgba(0, 0, 0, 0.4); }
.carta--gira { animation: voltear .45s var(--muelle); }
@keyframes voltear {
  0%   { scale: 0.04 1; }
  60%  { scale: 1.06 1; }
  100% { scale: 1 1; }
}

/* ---------- Portada: cartel verde con cartas sueltas ---------- */

.cartel { position: relative; overflow: hidden; padding-block: 64px 80px; }
.cartel__centro { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto; }
.cartel__ante {
  font-family: var(--texto); font-weight: 700; font-size: 24px; line-height: 1.2;
  margin-bottom: 18px; color: var(--melocoton);
}
.cartel h1 { font-size: 112px; line-height: 0.88; }
.cartel .entradilla { margin: 26px auto 0; }
.cartel .botonera { justify-content: center; }
.cartel__baraja { list-style: none; margin: 0; padding: 0; }
.cartel__baraja .carta { width: 150px; }

/* Sueltas alrededor del titular solo a partir de 1380 px: por debajo caían
   encima del titular y de la entradilla (visto a 1100 y 1280). */
@media (min-width: 1380px) {
  .cartel { min-height: 760px; display: flex; align-items: center; }
  .cartel__baraja li { position: absolute; z-index: 1; }
  .cartel__baraja li:nth-child(1) { left: 3%;  top: 60px;  transform: rotate(-8deg); }
  .cartel__baraja li:nth-child(2) { left: 14%; top: 300px; transform: rotate(5deg); }
  .cartel__baraja li:nth-child(3) { left: 4%;  top: 500px; transform: rotate(-3deg); }
  .cartel__baraja li:nth-child(4) { left: 16%; top: 40px;  transform: rotate(7deg); }
  .cartel__baraja li:nth-child(5) { right: 4%;  top: 70px;  transform: rotate(6deg); }
  .cartel__baraja li:nth-child(6) { right: 15%; top: 330px; transform: rotate(-6deg); }
  .cartel__baraja li:nth-child(7) { right: 3%;  top: 520px; transform: rotate(4deg); }
  .cartel__baraja li:nth-child(8) { right: 17%; top: 30px;  transform: rotate(-4deg); }
  .cartel__centro { max-width: 600px; }
}
@media (max-width: 1379px) {
  .cartel__baraja { display: flex; justify-content: safe center; gap: 16px; overflow-x: auto; padding: 24px 12px 28px; margin-top: 16px; }
  .cartel__baraja li { flex: 0 0 auto; }
  .cartel__baraja li:nth-child(odd) { transform: rotate(-3deg); }
  .cartel__baraja li:nth-child(even) { transform: rotate(3deg); }
  .cartel__baraja .carta { width: 112px; }
  .cartel { padding-block: 40px 80px; }
}
@media (max-width: 860px) { .cartel h1 { font-size: 58px; } }

/* ---------- Manifiesto: rejilla de 12 ---------- */

.rejilla { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .rejilla__ancha { grid-column: 1 / span 7; }
  .rejilla__estrecha { grid-column: 9 / span 4; }
}
.manifiesto { font-family: var(--rotulo); font-weight: 800; font-size: 58px; line-height: 0.98; margin: 0; }
@media (max-width: 860px) { .manifiesto { font-size: 38px; } }

/* La demo contrastiva, montada como carta grande (assets/js/demo-contrastiva.js) */
.demo { background: var(--crema); border: 2px solid var(--tinta); padding: 20px 22px 24px; container-type: inline-size; }
/* 1,3 y no 1: las vocales (la kasra bajo la ب, la ḍamma encima) salen del
   em de Jomhuria y pisaban el nombre de debajo. Varias letras (بَ بِ بُ) van
   en una sola línea y encogidas al ancho de la carta. */
.demo__glifo { font-family: var(--cartel); font-size: min(200px, 52cqi); line-height: 1.3; text-align: center; white-space: nowrap; }
.demo__glifo--varias { font-size: min(120px, 26cqi); line-height: 1.6; }
.demo__nombre { text-align: center; font-family: var(--texto); font-weight: 700; font-size: 22px; margin: 6px 0 16px; }
.demo__barra { display: flex; border: 2px solid var(--tinta); margin-bottom: 16px; }
.demo__tab {
  flex: 1; min-height: 44px; background: none; border: 0; cursor: pointer;
  font-family: var(--texto); font-weight: 700; font-size: 20px; color: var(--tinta);
}
.demo__tab + .demo__tab { border-left: 2px solid var(--tinta); }
.demo__tab[aria-selected="true"] { background: var(--tinta); color: var(--crema); }
.demo__veredicto { font-style: italic; color: var(--rojo); }
.demo__veredicto[data-signo="ventaja"] { color: var(--verde); }
.demo h3 { font-size: 22px; margin: 4px 0 8px; }
.demo p { font-size: 16px; line-height: 1.5; }
.demo__piezas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.demo__pieza {
  min-width: 48px; min-height: 48px; background: none; border: 2px solid var(--tinta); cursor: pointer;
  font-family: var(--arabe); font-size: 30px; line-height: 1.7; padding: 0 10px; color: var(--tinta);
}
.demo__pieza[aria-pressed="true"] { background: var(--tinta); color: var(--crema); }
.demo__pie { font-size: 15px; margin-top: 14px; }

/* ---------- Tres caminos (melocotón, 01 02 03: es una secuencia) ---------- */

.caminos { list-style: none; margin: 40px 0 0; padding: 0; border-top: 2px solid var(--tinta); }
.camino { display: grid; gap: 10px 28px; padding: 34px 0; border-bottom: 2px solid var(--tinta); }
@media (min-width: 860px) { .camino { grid-template-columns: 90px minmax(110px, max-content) minmax(0, 1fr) 260px; align-items: center; } }
.camino__n { font-family: var(--rotulo); font-weight: 900; font-size: 58px; line-height: 0.9; color: var(--rojo); }
.camino__glifo { font-family: var(--cartel); font-size: 110px; line-height: 1; }
.camino h3 { font-size: 34px; text-transform: uppercase; margin-bottom: 6px; }
.camino p { font-size: 17px; margin: 0; }
.camino__estado { font-size: 17px; }

/* ---------- Bloque oscuro: tira y baraja completa ---------- */

.tira {
  display: flex; gap: 28px; overflow: hidden; white-space: nowrap;
  font-family: var(--rotulo); font-weight: 900; font-size: 88px; line-height: 1;
  color: var(--rojo); border-block: 2px solid var(--crema); padding-block: 10px; margin-bottom: 48px;
}
/* Cinco por fila en escritorio, no seis: a 185 px el dorso no cabía y la
   carta vuelta crecía encima de la fila de arriba. */
.baraja { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 36px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (min-width: 620px) { .baraja { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .baraja { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .baraja { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* En móvil la carta vuelta ocupa la fila entera: en media pantalla no cabe. */
@media (max-width: 619px) {
  .baraja > li:has(> details[open]) { grid-column: 1 / -1; }
  .baraja details.carta[open] { aspect-ratio: auto; min-height: 280px; }
}
.baraja .carta { border-color: var(--crema); }
details.carta[open] { border-color: var(--melocoton); }

/* ---------- Arabismos ---------- */

.arabismos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0 32px; }
@media (min-width: 760px) { .arabismos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arabismos li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 2px solid var(--tinta);
}
.arabismos [lang="ar"] { font-size: 36px; line-height: 1.6; }
.arabismos__lat { font-family: var(--texto); font-weight: 700; font-size: 26px; }
/* Solar o lunar, dicho en cursiva y entre paréntesis: sin pastilla de color. */
.marca-sol, .marca-luna { font-family: var(--texto); font-size: 16px; font-weight: 400; text-transform: none; }
.leyenda { margin-top: 20px; font-size: 16px; display: grid; gap: 6px; }

/* ---------- Índice de lecciones ---------- */

.indice { list-style: none; margin: 32px 0 0; padding: 0; border-top: 2px solid currentColor; }
.indice li { border-bottom: 2px solid currentColor; }
.indice a, .indice span.indice__fila {
  display: grid; gap: 6px 24px; padding: 20px 0; text-decoration: none; color: inherit; align-items: baseline;
}
@media (min-width: 760px) { .indice a, .indice span.indice__fila { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 90px; } }
.indice a:hover .indice__titulo { text-decoration: underline; }
.indice__n { font-family: var(--rotulo); font-weight: 900; font-size: 34px; line-height: 1; color: var(--rojo); }
.bloque--tinta .indice__n, .bloque--tema .indice__n { color: var(--melocoton); }
.indice__titulo { font-family: var(--texto); font-weight: 700; font-size: 26px; line-height: 1.2; }
.indice__tema { font-size: 16px; }
.indice__nivel { font-family: var(--texto); font-weight: 700; font-size: 20px; }
.indice__libro { font-size: 14px; }

/* ---------- El libro (PDF) ---------- */

.libro { display: grid; gap: 32px; }
@media (min-width: 900px) { .libro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.libro__tapa {
  aspect-ratio: 76 / 105; max-width: 320px; width: 100%;
  background: var(--rojo); color: var(--crema); border: 2px solid var(--tinta);
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
}
.libro__tapa-nivel { font-family: var(--rotulo); font-weight: 900; font-size: 120px; line-height: 0.8; }
.libro__tapa-ar { font-family: var(--cartel); font-size: 110px; line-height: 1; text-align: right; }
.libro__tapa-t { font-family: var(--texto); font-weight: 700; font-size: 24px; line-height: 1.2; }
.libro ul { margin: 16px 0 0; padding-left: 1.2em; }
.libro li { margin-bottom: 6px; }
.libro__estado { font-family: var(--texto); font-weight: 700; font-size: 24px; color: var(--rojo); }

/* ---------- Lección: cabecera ---------- */

.migas { font-size: 15px; padding-block: 14px; }
.migas a { color: inherit; }
.bloque--tema .migas { color: var(--crema); }
.leccion-cab { display: grid; gap: 28px; }
@media (min-width: 900px) { .leccion-cab { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; } }
.leccion-cab__num {
  font-family: var(--rotulo); font-weight: 900; font-size: 160px; line-height: 0.8; color: var(--melocoton);
}
.leccion-cab__ante { font-family: var(--texto); font-weight: 700; font-size: 24px; color: var(--melocoton); margin-bottom: 10px; }
.leccion-cab h1 { font-size: 72px; }
.objetivos { margin: 24px 0 0; padding-left: 1.2em; max-width: 40em; }
.objetivos li { margin-bottom: 4px; }
@media (max-width: 860px) { .leccion-cab__num { font-size: 96px; } .leccion-cab h1 { font-size: 46px; } }

.seccion-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 28px; }
.seccion-h__n { font-family: var(--rotulo); font-weight: 900; font-size: 46px; line-height: 0.9; color: var(--rojo); }
.bloque--tinta .seccion-h__n, .bloque--tema .seccion-h__n, .bloque--rojo .seccion-h__n { color: var(--melocoton); }
h3.sub { font-size: 30px; margin: 64px 0 18px; }

/* ---------- Lección: cómo se lee (solo la 1) ---------- */

.marcas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.marca-l { border: 2px solid var(--tinta); padding: 16px 18px; background: var(--blanco); }
.marca-l__ej { display: block; font-size: 60px; line-height: 1.6; text-align: center; }
.marca-l__nombre { display: block; font-family: var(--texto); font-weight: 700; font-size: 22px; }
.marca-l__lat { font-style: italic; }
.marca-l__gloss { display: block; font-size: 15px; line-height: 1.4; margin-top: 4px; }
.desmontada { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin: 24px 0 12px; }
.pieza { display: flex; flex-direction: column; align-items: center; border: 2px solid var(--tinta); padding: 6px 14px; background: var(--blanco); min-width: 64px; }
.pieza [lang="ar"] { font-size: 50px; line-height: 1.6; }
.pieza__lat { font-family: var(--texto); font-weight: 700; font-size: 22px; }
.nota-pie { font-size: 16px; margin-top: 24px; max-width: 46em; }

/* ---------- Sonidos: cartas horizontales ---------- */

.sonidos { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 900px) { .sonidos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sonido { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 24px; border-top: 2px solid currentColor; padding: 24px 0 8px; }
.sonido__glifo { font-family: var(--cartel); font-size: 120px; line-height: 1; text-align: center; }
.sonido__marca { font-style: italic; color: var(--rojo); }
.sonido__marca[data-signo="ventaja"] { color: var(--verde); }
.bloque--tinta .sonido__marca, .bloque--tema .sonido__marca { color: var(--melocoton); }
.bloque--tinta .sonido__marca[data-signo="ventaja"], .bloque--tema .sonido__marca[data-signo="ventaja"] { color: var(--verde-claro); }
.sonido h3 { margin: 4px 0 6px; }
.sonido p { font-size: 16px; line-height: 1.5; }
.sonido__clave { font-size: 15px; }
@media (max-width: 600px) {
  .sonido { grid-template-columns: 1fr; }
  .sonido__glifo { text-align: left; }
}

/* ---------- Vocabulario ---------- */

.familias { display: grid; gap: 56px; margin-top: 40px; }
@media (min-width: 1000px) { .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.familia h3 { font-size: 28px; padding-bottom: 8px; border-bottom: 2px solid currentColor; }
.palabras { list-style: none; margin: 0; padding: 0; }
.palabra {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px;
  padding: 18px 0; border-bottom: 2px solid currentColor;
}
.palabra__ar { grid-column: 2; grid-row: 1 / span 2; font-size: 40px; line-height: 1.5; text-align: right; }
.palabra__lat { font-family: var(--texto); font-weight: 700; font-size: 28px; line-height: 1.2; }
.palabra__gloss { font-size: 16px; }
.palabra__nota { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; margin: 8px 0 0; opacity: 0.9; }
.oir {
  min-width: 44px; min-height: 44px; border: 2px solid currentColor; background: none; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.oir svg { width: 22px; height: 22px; }

/* ---------- Gramática ---------- */

.descubre { list-style: none; counter-reset: d; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.descubre li { counter-increment: d; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; border-bottom: 2px solid var(--tinta); padding: 14px 0; }
.descubre li::before { content: counter(d); font-family: var(--texto); font-weight: 700; font-size: 30px; color: var(--rojo); }
.descubre [lang="ar"] { font-size: 40px; line-height: 1.6; margin-left: auto; }
.descubre__lat { font-style: italic; flex-basis: 100%; text-align: right; font-size: 16px; }
.pregunta-grande { font-family: var(--rotulo); font-weight: 800; font-size: 46px; line-height: 1; text-transform: uppercase; margin: 36px 0 0; }
@media (max-width: 860px) { .pregunta-grande { font-size: 32px; } }
.regla { margin-top: 44px; background: var(--tinta); color: var(--crema); padding: 26px 28px; max-width: 48em; }
.regla h3 { color: var(--melocoton); font-size: 28px; margin-bottom: 10px; }

.tabla-scroll { overflow-x: auto; margin-top: 12px; }
table.tabla { border-collapse: collapse; width: 100%; max-width: 760px; }
.tabla th, .tabla td { text-align: left; padding: 14px 18px 14px 0; border-bottom: 2px solid currentColor; vertical-align: baseline; }
.tabla thead th { font-family: var(--texto); font-weight: 700; font-size: 20px; }
.tabla [lang="ar"] { font-size: 36px; line-height: 1.6; font-weight: 400; text-align: right; }
.tabla .lat { font-style: italic; }

.contraste p { max-width: 44em; }
.error { margin-top: 44px; border: 2px solid var(--tinta); padding: 28px 30px; background: var(--blanco); max-width: 52em; }
.error h3 { font-size: 28px; margin-bottom: 10px; }
.error__par { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 760px) { .error__par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* La forma mala lleva el asterisco de la lingüística (*forma agramatical),
   no una caja roja con aspa frente a una verde con visto. */
.error__marca { color: var(--rojo); margin-left: 4px; }
.error__mal [lang="ar"], .error__bien [lang="ar"] { font-size: 38px; line-height: 1.6; display: block; }
.error__pie { font-size: 15px; margin: 4px 0 0; }

/* ---------- Recurso: piezas impresas ---------- */

.recurso { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; align-items: flex-start; }
.pieza-rec { margin: 0; background: var(--crema); color: var(--tinta); border: 2px solid var(--tinta); flex: 1 1 280px; max-width: 460px; }
.pieza-rec__cuerpo { padding: 28px 28px 24px; text-align: center; }
.pieza-rec__cuerpo p { font-size: 36px; line-height: 1.7; margin: 0; }
.pieza-rec--cartel { background: var(--verde); color: var(--crema); border-color: var(--crema); }
.pieza-rec--cartel .pieza-rec__cuerpo p:first-child { font-family: var(--cartel); font-size: 64px; line-height: 1; }
.pieza-rec--ticket .pieza-rec__cuerpo, .pieza-rec--lista .pieza-rec__cuerpo { text-align: right; }
.pieza-rec--ticket { border-style: dashed; background: var(--blanco); }
.pieza-rec--dialogo .pieza-rec__cuerpo { text-align: right; }
.pieza-rec--dialogo .pieza-rec__cuerpo p { font-size: 32px; border-bottom: 1px solid var(--tinta); padding: 10px 0; }
/* Texto corrido (prensa, enciclopedia, clásicos) y cartas: párrafo largo,
   a lo ancho y alineado a la derecha, no un cartel centrado. */
.pieza-rec--articulo { flex-basis: 100%; max-width: none; background: var(--blanco); }
.pieza-rec--articulo .pieza-rec__cuerpo, .pieza-rec--carta .pieza-rec__cuerpo { text-align: right; }
.pieza-rec--articulo .pieza-rec__cuerpo p, .pieza-rec--carta .pieza-rec__cuerpo p { font-size: 28px; line-height: 1.9; }
.pieza-rec--articulo .pieza-rec__cuerpo p + p, .pieza-rec--carta .pieza-rec__cuerpo p + p { margin-top: 14px; }
.pieza-rec--carta { flex-basis: 100%; max-width: 720px; background: var(--blanco); }
.pieza-rec figcaption { border-top: 2px solid currentColor; padding: 8px 14px; font-size: 14px; }
.preguntas { margin: 12px 0 0; padding-left: 1.4em; max-width: 48em; }
.preguntas li { margin-bottom: 20px; }
.preguntas details summary { cursor: pointer; font-weight: 600; }
.preguntas details p { margin-top: 6px; }

/* ---------- Ejercicios ---------- */

.ejercicios { display: grid; gap: 36px; margin-top: 36px; }
.ejercicio { background: var(--blanco); color: var(--tinta); border: 2px solid var(--tinta); padding: 30px 32px; }
.ejercicio h3 { display: flex; align-items: baseline; gap: 14px; font-size: 28px; }
.ejercicio__n { font-weight: 900; color: var(--rojo); }
.ejercicio__instruccion { margin: 12px 0 22px; }
.ejercicio ol, .ejercicio ul { margin: 0; }
.ejercicio [lang="ar"] { font-size: 34px; line-height: 1.7; }
.banco { border: 2px dashed var(--tinta); padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }
.huecos, .mcq { padding-right: 1.6em; padding-left: 0; }
.huecos li, .mcq > li { margin-bottom: 16px; }
.opciones { list-style: lower-alpha; padding-right: 1.6em; }
.pares { border-collapse: collapse; width: 100%; }
.pares td, .pares th { border-bottom: 2px solid var(--tinta); padding: 12px 12px; }
.pares__letra { font-family: var(--texto); font-weight: 700; font-size: 22px; text-align: center; color: var(--rojo); }
.vf li { display: flex; justify-content: space-between; gap: 16px; }
.columnas-sort { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.columnas-sort div { flex: 1 1 180px; border: 2px solid var(--tinta); padding: 8px 12px; min-height: 90px; }
.columnas-sort h4 { font-size: 20px; }
.modelo-h { font-family: var(--texto); font-weight: 700; font-size: 20px; margin-top: 16px; }

.solucionario { margin-top: 24px; border: 2px solid currentColor; }
.solucionario summary { cursor: pointer; padding: 14px 18px; font-family: var(--texto); font-weight: 700; font-size: 22px; min-height: 44px; }
.solucionario table { border-collapse: collapse; width: 100%; }
.solucionario th, .solucionario td { padding: 8px 18px; border-top: 2px solid currentColor; text-align: left; vertical-align: baseline; }
.solucionario td[lang="ar"] { text-align: right; font-size: 30px; line-height: 1.6; }

/* Los tres ejercicios del libro: se ve el enunciado y el primer ítem.
   El resto no está en el HTML: construir.py no lo escribe. */
.ejercicio--libro { background: var(--melocoton); }
.ejercicio--libro .ejercicio__n { color: var(--tinta); }
.cerrado {
  margin-top: 14px; border-top: 2px solid var(--tinta); padding-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
}
.cerrado__txt { font-family: var(--texto); font-weight: 700; font-size: 22px; margin: 0; }
.cerrado__resto { font-size: 15px; margin: 0; }

/* ---------- Cierre de lección ---------- */

.cando { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; max-width: 48em; }
.cando li { padding: 14px 0 14px 40px; border-bottom: 2px solid currentColor; position: relative; }
.cando li::before { content: ""; position: absolute; left: 0; top: 14px; width: 22px; height: 22px; border: 2px solid currentColor; }
.pasos { display: grid; gap: 20px; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Anterior y siguiente: un enlace con flecha, como el pie de un manual. */
.paso { display: block; color: inherit; font-size: 22px; padding-block: 10px; min-height: 44px; }
.paso--siguiente { text-align: right; }

/* ---------- Curso de escritura (lección de letras) ---------- */

.letras { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 28px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .letras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.letras .carta { border-color: var(--crema); }
.formas { border-collapse: collapse; width: 100%; max-width: 760px; }
.formas th, .formas td { border-bottom: 2px solid currentColor; padding: 8px 12px; text-align: center; }
.formas td, .formas tbody th { font-family: var(--arabe); font-size: 44px; line-height: 1.7; font-weight: 400; }
.formas thead th { font-family: var(--texto); font-weight: 700; font-size: 20px; }
.practica { margin: 16px 0 0; padding-right: 1.6em; display: grid; gap: 8px; }
.practica [lang="ar"] { font-size: 44px; line-height: 1.7; }

/* ---------- Tienda ---------- */

.producto { display: grid; gap: 32px; }
@media (min-width: 900px) { .producto { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.producto__tapa { display: grid; gap: 14px; background: var(--tema); color: var(--crema); padding: 28px; aspect-ratio: 210 / 297; max-width: 320px; align-content: space-between; }
.producto__lec { font-family: var(--texto); font-weight: 700; font-size: 28px; color: var(--rojo); margin-top: 12px; }
.producto__lista { margin: 16px 0 0; padding-left: 1.2em; }
.producto__lista li { margin-bottom: 6px; }
.producto__pronto { font-family: var(--texto); font-weight: 700; font-size: 28px; margin: 0; }
.producto__niveles { font-family: var(--rotulo); font-weight: 900; font-size: 72px; line-height: 1; color: var(--melocoton); margin-top: 24px; }
/* La muestra se hojea de lado, como un libro: tira con imán, sin JS. */
.hojear { list-style: none; margin: 0; padding: 4px 0 20px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
.hojear li { flex: 0 0 auto; width: min(78vw, 320px); scroll-snap-align: start; }
.hojear img { display: block; width: 100%; height: auto; border: 2px solid var(--tinta); background: var(--blanco); }
.hojear__pdf { margin-top: 12px; font-weight: 600; }
.faq { margin: 28px 0 0; display: grid; gap: 22px; max-width: 48em; }
.faq dt { font-family: var(--texto); font-weight: 700; font-size: 28px; line-height: 1.2; }
.faq dd { margin: 6px 0 0; }

/* ---------- El curso por niveles (packs desplegables) ---------- */

.packs { display: grid; gap: 0; border-top: 2px solid currentColor; }
.pack { border-bottom: 2px solid currentColor; }
.pack > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 28px; padding: 22px 0; }
.pack > summary::-webkit-details-marker { display: none; }
.pack__nivel { font-family: var(--rotulo); font-weight: 900; font-size: 72px; line-height: 0.85; color: var(--rojo); min-width: 1.6em; }
.pack__rango { display: block; font-family: var(--rotulo); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1.05; }
.pack__p { display: block; font-size: 16px; line-height: 1.5; margin-top: 6px; max-width: 46em; }
.pack__mas { font-family: var(--texto); font-weight: 700; font-size: 34px; color: var(--rojo); transition: transform .2s; }
.pack[open] .pack__mas { transform: rotate(45deg); }
.pack .indice { margin-top: 0; }
.pack__enlaces { margin: 18px 0 30px; font-weight: 600; }
@media (max-width: 600px) {
  .pack__nivel { font-size: 46px; }
  .pack__rango { font-size: 22px; }
  .pack__p { display: none; }
}

/* ---------- Puerta de entrada y 404 ---------- */

.puerta { min-height: 100vh; }
.puerta__cab { text-align: center; padding-block: 56px 32px; }
.puerta__ar { font-family: var(--cartel); font-size: 180px; line-height: 1; margin: 0 0 12px; }
.puerta h1 { font-size: 112px; line-height: 0.88; }
@media (max-width: 860px) { .puerta h1 { font-size: 58px; } .puerta__ar { font-size: 120px; } }
.entradas { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--crema); }
.entrada { border-bottom: 2px solid var(--crema); }
.entrada a {
  display: grid; gap: 8px 28px; padding: 26px 0; text-decoration: none; color: inherit;
}
@media (min-width: 860px) { .entrada a { grid-template-columns: minmax(120px, max-content) minmax(0, 4fr) minmax(0, 7fr); align-items: center; } }
.entrada__glifo { font-family: var(--cartel); font-size: 120px; line-height: 1; color: var(--melocoton); justify-self: start; }
.entrada__h { font-family: var(--rotulo); font-weight: 900; font-size: 46px; line-height: 0.95; text-transform: uppercase; }
.entrada a:hover .entrada__h { text-decoration: underline; }
.entrada p { margin: 0; font-size: 17px; }

/* ---------- La abubilla ---------- */

.hudhud { color: currentColor; display: block; }
.pliego-ave { position: absolute; width: 0; height: 0; overflow: hidden; }
.con-ave { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }

/* ---------- Paso entre secciones (2026-09-23) ----------
   Pedido por David: que el cambio de una sección a otra se mueva. Tres
   cosas, todas atadas al scroll (animation-timeline), sin JS:
   - el friso corre de lado mientras bajas, como una cinta;
   - el titular de cada sección se destapa de izquierda a derecha;
   - lo demás sube y aparece al entrar en pantalla, uno detrás de otro.
   Solo donde el navegador sabe hacerlo (@supports); donde no, todo se ve
   quieto y entero. Con movimiento reducido no hay nada (regla de abajo). */
@supports (animation-timeline: view()) {
  main :is(.bloque, .cartel) + section:not(.bloque--junto)::before,
  .pie::before {
    animation: friso-corre linear both;
    animation-timeline: view();
  }
  @keyframes friso-corre {
    from { background-position-x: 0; }
    to   { background-position-x: -480px; }
  }

  main .bloque :is(h2, .seccion-h, .manifiesto, .titular-cartel, .tira) {
    animation: destapa both cubic-bezier(.2, .7, .2, 1);
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes destapa {
    from { clip-path: inset(0 100% 0 0); translate: -40px 0; }
    to   { clip-path: inset(0 0 0 0);    translate: 0 0; }
  }

  main .bloque > .env > :not(h2, .seccion-h, .manifiesto, .titular-cartel, .tira),
  main .bloque :is(.rejilla, .familias, .sonidos, .ejercicios, .pasos) > *,
  main .bloque :is(.caminos, .indice, .arabismos, .ruta, .oferta) > li {
    animation: sube both cubic-bezier(.2, .7, .2, 1);
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  @keyframes sube {
    from { opacity: 0; translate: 0 48px; }
    to   { opacity: 1; translate: 0 0; }
  }
  /* Los hijos de una rejilla ya suben solos: el contenedor, quieto. */
  main .bloque > .env > :is(.rejilla, .familias, .sonidos, .ejercicios, .pasos, .caminos, .indice, .arabismos) { animation: none; }
}

/* ---------- Propuesta del 2026-09-28 (bocetos de George) ----------
   Escalera de niveles en portada, libro con precios, pie que hace de
   mapa, preguntas en acordeón y «sigue donde lo dejaste». Misma piel:
   bloques planos, filetes de 2 px, Galgo solo en lo grande. */

/* El libro con sus precios. */
.libro ul.oferta { list-style: none; margin: 32px 0 0; padding: 0; border-top: 2px solid var(--tinta); }
.libro .oferta li { margin: 0; border-bottom: 2px solid var(--tinta); }
.oferta__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; align-items: baseline;
  padding: 14px 12px; text-decoration: none; color: inherit; }
.oferta__nombre { font-family: var(--texto); font-weight: 700; font-size: 22px; line-height: 1.2; }
.oferta__lec { grid-column: 1; font-size: 16px; }
.oferta__precio { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--rotulo); font-weight: 900; font-size: 46px; line-height: 1; }
.oferta__fila:hover { background: var(--crema); }
.oferta__fila--pack { background: var(--tinta); color: var(--crema); }
.oferta__fila--pack .oferta__precio { color: var(--melocoton); }
.oferta__fila--pack:hover { background: var(--rojo); }
.oferta__confianza { margin-top: 22px; font-size: 16px; }

/* Portada: segundo camino y «sigue donde lo dejaste». */
.cartel .botonera__nota { font-size: 19px; font-weight: 700; }
.seguir { margin: 26px 0 0; font-size: 18px; }
.seguir a { color: var(--crema); font-weight: 700; }

/* Pie: marca a la izquierda, mapa a la derecha, la letra pequeña abajo. */
.pie__mapa { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 860px) { .pie .env { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.pie__titulo { font-family: var(--rotulo); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1; margin-bottom: 14px; color: var(--melocoton); }
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie__col li, .pie__col p { font-size: 16px; line-height: 1.4; }
.pie__col .idiomas { margin-top: 16px; }
.pie__letra { grid-column: 1 / -1; border-top: 2px solid var(--crema); padding-top: 18px; margin: 12px 0 0; }

/* Preguntas de la tienda en acordeón (<details>, sin JS). */
.preguntas { margin-top: 28px; max-width: 52em; border-top: 2px solid var(--tinta); }
.pregunta { border-bottom: 2px solid var(--tinta); }
.pregunta > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 0; font-family: var(--texto); font-weight: 700; font-size: 26px; line-height: 1.2; }
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta__mas { font-size: 34px; color: var(--rojo); transition: transform .2s; }
.pregunta[open] .pregunta__mas { transform: rotate(45deg); }
.pregunta p { margin: 0 0 22px; max-width: 42em; }


/* ============================================================
   Híbrido con los bocetos de George (2026-09-28): cabecera blanca con
   desplegable y píldoras, ventana en arco de herradura en la portada,
   abanico de portadas reales delante de otro arco. Se mantiene lo de
   la casa: tinta plana, sin sombras ni degradados, filetes de 2 px,
   Galgo solo en lo grande. Volver atrás es borrar este bloque y lo que
   lo usa en construir.py.
   ============================================================ */

/* ---------- Cabecera blanca ---------- */

.cabecera { background: var(--blanco); color: var(--tinta); }
.cabecera .env { position: relative; min-height: 68px; }
.cabecera .marca__ar { color: var(--rojo); }
.cabecera a:hover, .menu__grupo > summary:hover { text-decoration-color: var(--rojo); }
.menu a[aria-current="page"], .menu__grupo > summary[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rojo); }
.menu > li { position: relative; }
.menu__grupo > summary {
  list-style: none; cursor: pointer;
  font-family: var(--texto); font-weight: 700; font-size: 19px; line-height: 1.2;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.menu__grupo > summary::-webkit-details-marker { display: none; }
.menu__grupo > summary:hover { text-decoration-line: underline; }
.menu__grupo > summary::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg); transition: transform .2s;
}
.menu__grupo[open] > summary::after { transform: translateY(.05em) rotate(-135deg); }
.menu__precio {
  display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px;
  background: var(--melocoton); color: var(--tinta); font-size: 14px; vertical-align: 2px;
}

.desplegable {
  position: absolute; top: calc(100% + 16px); left: -14px; z-index: 30;
  width: min(580px, 92vw); padding: 10px;
  background: var(--blanco); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 14px;
}
.desplegable ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.desplegable__nivel {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
}
.desplegable__nivel:hover { background: var(--crema); }
.desplegable__n { font-family: var(--rotulo); font-weight: 900; font-size: 40px; line-height: 1; color: var(--rojo); }
.desplegable__nivel b { display: block; font-size: 17px; line-height: 1.3; }
.desplegable__nivel b + span { display: block; font-size: 14px; line-height: 1.4; color: var(--gris); }
.desplegable__pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--crema);
  font-weight: 700; font-size: 16px;
}
@media (max-width: 620px) {
  .menu > li { position: static; }
  .desplegable { left: var(--margen); right: var(--margen); width: auto; top: calc(100% + 4px); }
  .menu__grupo > summary { font-size: 16px; }
  .menu__precio { display: none; }
}

/* Idiomas en píldora, solo arriba (el pie rojo sigue como estaba). */
.cabecera .idiomas { border: 2px solid var(--tinta); border-radius: 999px; padding: 3px; gap: 2px; }
.cabecera .idiomas > * { border-radius: 999px; padding: 4px 12px; min-height: 30px; }
.cabecera .idiomas > * + * { border-left: 0; }
.cabecera .idiomas .idioma--actual { background: var(--tema); color: var(--crema); }
.cabecera .idiomas a:hover { background: var(--crema); text-decoration: none; }

/* ---------- Portada: texto a la izquierda, ventana en arco a la derecha ---------- */

.cartel { padding-block: 64px 88px; }
.cartel__rejilla { display: grid; gap: 48px; align-items: center; }
.cartel__texto { max-width: 680px; }
.cartel__texto h1 { font-size: 96px; line-height: 0.9; }
.cartel__texto .entradilla { margin: 26px 0 0; }
.cartel__texto .botonera { justify-content: flex-start; }
@media (min-width: 960px) { .cartel__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
@media (max-width: 860px) { .cartel__texto h1 { font-size: 56px; } }
@media (min-width: 1380px) { .cartel { min-height: 0; display: block; } }

/* La ventana: el arco de herradura de la casa con las patas largas. La
   máscara usa el mismo trazado que arco_linea() en construir.py. */
.ventana { position: relative; width: 100%; max-width: 500px; justify-self: end; padding: 20px 40px 0 0; }
.ventana__arco, .ventana__linea { aspect-ratio: 152 / 230; width: calc(100% - 20px); }
.ventana__arco {
  position: relative; margin-left: 0;
  background: var(--melocoton);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='24 124 152 230' preserveAspectRatio='none'><path d='M 36 354 L 36 241 A 76 76 0 1 1 164 241 L 164 354 Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='24 124 152 230' preserveAspectRatio='none'><path d='M 36 354 L 36 241 A 76 76 0 1 1 164 241 L 164 354 Z'/></svg>") center / 100% 100% no-repeat;
}
/* El filete, desplazado arriba a la derecha como en el boceto. */
.ventana__linea { position: absolute; top: 0; left: 20px; fill: none; stroke: var(--crema); stroke-width: 2px; vector-effect: non-scaling-stroke; overflow: visible; }
.ventana__linea path { vector-effect: non-scaling-stroke; }
.ventana__cartas { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ventana__cartas li { position: absolute; left: 50%; bottom: 14%; width: 44%; translate: -50% 0; transition: rotate .3s var(--muelle), translate .3s var(--muelle); }
.ventana__cartas li:nth-child(1) { rotate: -11deg; translate: -96% 4%; }
.ventana__cartas li:nth-child(2) { rotate: 0deg; z-index: 2; translate: -50% -6%; }
.ventana__cartas li:nth-child(3) { rotate: 11deg; translate: -4% 4%; }
.ventana:hover .ventana__cartas li:nth-child(1) { rotate: -15deg; translate: -104% 2%; }
.ventana:hover .ventana__cartas li:nth-child(3) { rotate: 15deg; translate: 4% 2%; }
.ventana__cartas .carta { width: 100%; }
.ventana__pie {
  position: absolute; right: 0; bottom: 70px; margin: 0;
  writing-mode: vertical-rl; rotate: 180deg;
  font-size: 15px; font-weight: 700; color: var(--melocoton);
}
.ventana__ficha {
  position: absolute; left: -24px; bottom: 34px; z-index: 3;
  display: grid; gap: 2px; max-width: 270px; padding: 12px 16px;
  background: var(--crema); color: var(--tinta); text-decoration: none;
  border: 2px solid var(--tinta); border-radius: 14px;
}
.ventana__ficha:hover { background: var(--blanco); }
.ventana__ante { font-size: 14px; font-weight: 700; color: var(--rojo); }
.ventana__ficha b { font-family: var(--texto); font-size: 20px; line-height: 1.2; }
.ventana__ficha b + span { font-size: 14px; line-height: 1.4; }
@media (max-width: 959px) { .ventana { justify-self: start; max-width: 420px; } .ventana__ficha { left: 8px; } }

/* ---------- Portadas reales ---------- */

.libro__img { display: block; width: 100%; max-width: 320px; height: auto; border: 2px solid var(--tinta); }
.libro--compacto { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-items: start; }
.libro__mini { display: block; width: 110px; height: auto; border: 2px solid var(--tinta); }
@media (max-width: 480px) { .libro--compacto { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; } .libro__mini { width: 76px; } }

/* Abanico: las cinco portadas delante del arco de herradura canónico. */
.abanico { position: relative; width: 100%; max-width: 520px; padding: 20px 40px 44px 0; }
.abanico__arco, .abanico__linea { aspect-ratio: 152 / 176; width: calc(100% - 20px); }
.abanico__arco {
  background: var(--crema);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='24 124 152 176' preserveAspectRatio='none'><path d='M 36 300 L 36 241 A 76 76 0 1 1 164 241 L 164 300 Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='24 124 152 176' preserveAspectRatio='none'><path d='M 36 300 L 36 241 A 76 76 0 1 1 164 241 L 164 300 Z'/></svg>") center / 100% 100% no-repeat;
}
.bloque--tema .abanico__arco { background: var(--melocoton); }
.abanico__linea { position: absolute; top: 0; left: 20px; fill: none; stroke: currentColor; stroke-width: 2px; overflow: visible; }
.abanico__linea path { vector-effect: non-scaling-stroke; }
.abanico__tapas { position: absolute; left: 0; right: 40px; bottom: 20px; display: flex; justify-content: center; align-items: flex-end; }
.abanico__tapa { flex: none; width: 34%; height: auto; margin-left: -20%; border: 2px solid var(--tinta); background: var(--blanco); transition: rotate .3s var(--muelle), translate .3s var(--muelle); }
.abanico__tapa:first-child { margin-left: 0; }
.abanico__tapa:nth-child(1) { rotate: -12deg; translate: 0 -2%; }
.abanico__tapa:nth-child(2) { rotate: -6deg; translate: 0 -8%; z-index: 1; }
.abanico__tapa:nth-child(3) { translate: 0 -14%; z-index: 3; }
.abanico__tapa:nth-child(4) { rotate: 6deg; translate: 0 -8%; z-index: 1; }
.abanico__tapa:nth-child(5) { rotate: 12deg; translate: 0 -2%; }
.abanico:hover .abanico__tapa:nth-child(1) { rotate: -16deg; translate: -8% -4%; }
.abanico:hover .abanico__tapa:nth-child(5) { rotate: 16deg; translate: 8% -4%; }
.pack-tienda { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .pack-tienda { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }


/* ---------- Híbrido, segundo paso (2026-09-28): más George ----------
   Paneles redondeados dentro del bloque, camino de niveles con burbujas,
   cómo es una lección con demo, ofertas en tarjeta, pie claro y botón de
   volver arriba. Sigue sin sombras ni degradados: donde George pone
   sombra, aquí va un filete de 2 px. */

.bloque--panel { padding-block: clamp(32px, 4vw, 56px); }
main :is(.bloque, .cartel) + section.bloque--panel:not(.bloque--junto) { padding-top: calc(clamp(32px, 4vw, 56px) + var(--friso)); }
.panel { border-radius: 28px; padding: clamp(36px, 5vw, 68px) clamp(18px, 4vw, 52px); }
.panel--crema { background: var(--crema); }
.panel--melocoton { background: var(--melocoton); }
.panel__ante { font-weight: 700; font-size: 17px; color: var(--rojo); margin-bottom: 14px; }

/* Línea de confianza: frases cortas con su marca. */
.confianza { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 22px 0 0; font-size: 16px; }
.confianza span::before { content: "✓ "; font-weight: 700; color: var(--verde); }
.bloque--tema .confianza span::before, .cartel .confianza span::before { color: var(--verde-claro); }

/* Camino de niveles: burbujas unidas por una línea y tarjeta debajo. */
.ruta { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 16px; position: relative; }
.parada { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; height: 100%; }
.parada__burbuja {
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanco); border: 2px solid var(--tinta);
  font-family: var(--rotulo); font-weight: 900; font-size: 28px; line-height: 1; color: var(--rojo);
  transition: background .2s, color .2s, scale .2s var(--muelle);
}
.ruta li:first-child .parada__burbuja { background: var(--tinta); color: var(--crema); }
.parada:hover .parada__burbuja { background: var(--rojo); color: var(--crema); scale: 1.08; }
.parada__carta {
  display: grid; gap: 6px; align-content: start; height: 100%; padding: 16px;
  background: var(--blanco); border: 2px solid var(--tinta); border-radius: 14px;
  transition: translate .2s var(--muelle);
}
.parada:hover .parada__carta { translate: 0 -4px; }
.parada__carta b { font-size: 19px; line-height: 1.25; }
.parada__carta > span { font-size: 15px; line-height: 1.45; }
.parada__carta .parada__ir { margin-top: 6px; font-weight: 700; color: var(--rojo); }
@media (min-width: 1000px) {
  .ruta { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ruta::before { content: ""; position: absolute; left: 32px; right: 10%; top: 31px; height: 2px; background: var(--tinta); }
}
@media (min-width: 600px) and (max-width: 999px) { .ruta { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
.ruta__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: 12px; }
.ruta__pie .confianza { margin: 0; }

/* Cómo es una lección: tres pasos y la demo al lado. */
.como { display: grid; gap: 44px; align-items: end; }
@media (min-width: 960px) { .como { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.pasos3 { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .pasos3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos3 li { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--crema); border-radius: 14px; transition: background .2s, translate .2s var(--muelle); }
.pasos3 li:hover { background: var(--melocoton); translate: 0 -3px; }
.paso3__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); border: 2px solid var(--tinta); font-weight: 700; font-size: 16px; color: var(--rojo); }
.pasos3 b { font-family: var(--rotulo); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; margin-top: 4px; }
.pasos3 p { font-size: 15px; line-height: 1.5; margin: 0; }
.paso3__partes { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.paso3__partes i { font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--blanco); }

.prueba { display: grid; gap: 14px; padding: 26px; border: 2px solid var(--tinta); border-radius: 20px; background: var(--blanco); }
.prueba__ante { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-weight: 700; font-size: 16px; }
.prueba__nivel { font-family: var(--rotulo); font-weight: 900; font-size: 24px; line-height: 1; color: var(--rojo); }
.frases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.frases li { display: flex; align-items: center; gap: 10px; }
.frase { flex: 1; border-radius: 12px; background: var(--crema); transition: background .2s; }
.frase[open] { background: var(--melocoton); }
.frase > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 12px 16px; }
.frase > summary::-webkit-details-marker { display: none; }
.frase > summary [lang="ar"] { font-size: 30px; line-height: 1.5; }
.frase > summary em { font-size: 15px; }
.frase p { margin: 0; padding: 0 16px 12px; font-size: 16px; }
.prueba__pista { margin: 0; font-size: 15px; color: var(--gris); }
.prueba .botonera { margin-top: 6px; }

/* Ofertas en tarjeta; el curso entero, destacado con su bandera. */
.libro ul.oferta { border-top: 0; display: grid; gap: 10px; }
.libro .oferta li { border-bottom: 0; }
.oferta__fila { position: relative; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 14px; padding: 14px 18px; transition: translate .2s var(--muelle), background .2s; }
.oferta__fila:hover { background: var(--crema); translate: 0 -2px; }
.oferta__fila--pack { border-width: 3px; margin-top: 12px; }
.oferta__fila--pack:hover { background: var(--rojo); }
.oferta__bandera {
  position: absolute; top: -13px; left: 16px; padding: 2px 11px; border-radius: 999px;
  background: var(--rojo); color: var(--crema); font-size: 13px; font-weight: 700; line-height: 1.5;
}
.oferta__fila--pack:hover .oferta__bandera { background: var(--crema); color: var(--rojo); }

/* Pie claro, como el de George; el friso sigue encima. */
.pie { background: var(--crema); color: var(--tinta); }
.pie a { color: var(--tinta); }
.pie a:hover { text-decoration-color: var(--rojo); }
.pie__titulo { color: var(--rojo); }
.pie__marca span { color: var(--rojo); }
.pie__letra { border-top-color: var(--tinta); }
.pie .idiomas { border: 2px solid var(--tinta); border-radius: 999px; padding: 3px; gap: 2px; width: max-content; }
.pie .idiomas > * { border-radius: 999px; padding: 4px 12px; min-height: 30px; }
.pie .idiomas > * + * { border-left: 0; }
.pie .idiomas .idioma--actual { background: var(--tema); color: var(--crema); }

/* Volver arriba: aparece al bajar (menu.js pone .arriba--ver). */
.arriba {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blanco); color: var(--tinta); border: 2px solid var(--tinta);
  opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .25s, translate .25s, background .2s, color .2s;
}
.arriba svg { width: 22px; height: 22px; }
.arriba--ver { opacity: 1; translate: 0 0; pointer-events: auto; }
.arriba:hover { background: var(--rojo); color: var(--crema); }
html { scroll-behavior: smooth; }
@media print { .arriba { display: none; } }

/* ---------- Vida (2026-10-05) ----------
   Lo que trae assets/js/vida.js, copiado de quixotespanish.com: barra de
   lectura, cabecera que se esconde al bajar, portadas que se inclinan y
   botones que se hunden al pulsar. Sin brillo ni sombras. */
.vida-barra {
  position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 3px;
  background: var(--rojo); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.cabecera { transition: transform .45s cubic-bezier(.22, .7, .2, 1); }
.cabecera--oculta { transform: translateY(-105%); }
.vida-inclina { transition: transform .5s cubic-bezier(.22, .7, .2, 1); transform-style: preserve-3d; will-change: transform; }
.vida-inclina--mueve { transition: transform .08s linear; }
.vida-cifra { font-variant-numeric: tabular-nums; }
.boton:active, .oferta__fila:active, .menu__boton:active { scale: .96; transition: scale .1s; }
@media print { .vida-barra { display: none; } }

/* ---------- Accesibilidad ---------- */

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rojo-vivo);
  outline-offset: 3px;
}
.bloque--tema a:focus-visible, .bloque--tinta a:focus-visible,
.bloque--tema summary:focus-visible, .bloque--tinta summary:focus-visible { outline-color: var(--melocoton); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .cabecera, .pie, .botonera { display: none; }
  .bloque { padding-block: 24px; background: none !important; color: #000 !important; }
}

/* ---------- Utilidades de espacio ---------- */
.mt-p { margin-top: 28px; }
.mt-libro { margin-top: 40px; border-top: 2px solid var(--tinta); padding-top: 28px; display: block; }
.botonera--centro { justify-content: center; }
.puerta__intro { margin-inline: auto; }
.vf-lista { padding-left: 1.4em; }
.vf-lista li { margin-bottom: 10px; }
.vf-lista [lang="ar"] { display: block; }
.producto__tapa-img { display: block; width: 100%; max-width: 320px; height: auto; border: 2px solid var(--tinta); }

/* ============================================================
   Piel Apple (2026-10-06, aprobada por David): capa encima de la casa.
   Misma paleta (rojo, crema, melocotón, tinta, blanco); cambia la
   piel: tipo del sistema con tracking negativo, filetes finos en vez
   de 2 px, esquinas por niveles, sombra doble suave, cristal solo en
   lo que flota (cabecera, desplegable, volver arriba). Quitar esta
   capa es volver atrás.
   ============================================================ */

:root {
  --sistema: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --rotulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
            "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --texto: var(--sistema);

  --filete: rgba(42, 23, 16, 0.09);
  --filete-claro: rgba(242, 230, 212, 0.22);
  --texto-2: #6B5A52;

  --r-pill: 999px; --r-chip: 6px; --r-thumb: 12px; --r-card: 18px; --r-panel: 22px; --r-hero: 26px;
  --sh-card:  0 1px 2px rgba(42,23,16,.05), 0 8px 24px rgba(42,23,16,.07);
  --sh-panel: 0 1px 3px rgba(42,23,16,.05), 0 14px 40px rgba(42,23,16,.07);
  --sh-lift:  0 2px 6px rgba(42,23,16,.06), 0 16px 36px rgba(42,23,16,.13);
  --sh-cta:   0 1px 2px rgba(42,23,16,.08), 0 18px 44px rgba(163,35,48,.28);
  --sh-overlay: 0 2px 8px rgba(42,23,16,.10), 0 30px 80px rgba(42,23,16,.22);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

html { font-optical-sizing: auto; }
body {
  font-family: var(--sistema);
  font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---------- Tipo: peso y tamaño, sin caja alta ---------- */
h1, h2, h3, h4, .manifiesto, .pregunta-grande, .titular-cartel {
  font-family: var(--rotulo); font-weight: 700; text-transform: none;
}
h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.035em; line-height: 1.06; }
h2 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.015em; line-height: 1.25; font-weight: 650; }
.cartel__texto h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.04; letter-spacing: -0.04em; }
.cartel h1 { line-height: 1.04; }
.manifiesto { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.03em; }
.pregunta-grande { letter-spacing: -0.025em; line-height: 1.15; }
.entradilla { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: inherit; opacity: .86; }
.camino h3, .pasos3 b, .pack__rango, .entrada__h, .pie__titulo, .marca, .pie__marca {
  font-family: var(--rotulo); font-weight: 700; text-transform: none; letter-spacing: -0.02em;
}
.camino h3 { font-size: 26px; line-height: 1.15; }
.pasos3 b { font-size: 24px; line-height: 1.15; }
.pie__titulo { font-size: 13px; letter-spacing: 0; font-weight: 600; color: var(--texto-2); margin-bottom: 12px; }
.marca { font-size: 21px; font-weight: 700; }
.pie__marca { font-size: 34px; line-height: 1.1; }
.camino__n, .seccion-h__n, .indice__n, .pack__nivel, .desplegable__n, .oferta__precio,
.prueba__nivel, .leccion-cab__num, .producto__niveles, .tira, .libro__tapa-nivel, .parada__burbuja {
  font-family: var(--rotulo); font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.camino__n { font-size: 44px; }
.oferta__precio { font-size: 34px; }
.pack__nivel { font-size: 56px; }

/* ---------- Sin friso entre secciones: el aire separa ---------- */
main :is(.bloque, .cartel) + section:not(.bloque--junto)::before,
.pie::before { display: none; }
main :is(.bloque, .cartel) + section.bloque:not(.bloque--junto) { padding-top: var(--aire); }
main :is(.bloque, .cartel) + section.bloque--panel:not(.bloque--junto) { padding-top: clamp(32px, 4vw, 56px); }
.pie { padding-block: 64px 40px; }
.bloque { --aire: clamp(64px, 9vw, 120px); }

/* ---------- Cabecera de cristal ---------- */
.cabecera {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--filete);
}
.cabecera .env { min-height: 56px; }
.menu a, .idiomas a, .idiomas span, .menu__grupo > summary { font-size: 15px; font-weight: 500; }
.menu a:hover, .menu__grupo > summary:hover { text-decoration: none; color: var(--rojo); }
.menu__precio { font-size: 12px; font-weight: 600; padding: 2px 9px; }
.cabecera .idiomas { border: 0; background: rgba(42,23,16,.06); padding: 3px; }
.cabecera .idiomas > * { padding: 4px 12px; min-height: 28px; font-size: 13px; font-weight: 600; }
.cabecera .idiomas .idioma--actual { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(42,23,16,.12); }
.cabecera .idiomas a:hover { background: rgba(255,255,255,.6); }
.menu__grupo > summary::after { border-width: 1.5px; }

.desplegable {
  border: 1px solid var(--filete); border-radius: var(--r-panel);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--sh-overlay);
  transform-origin: 20% 0;
  animation: materializa .32s var(--ease-spring);
}
@keyframes materializa {
  from { opacity: 0; scale: .96; filter: blur(4px); }
  to   { opacity: 1; scale: 1;   filter: blur(0); }
}
.desplegable__nivel { border-radius: var(--r-thumb); }
.desplegable__nivel:hover { background: rgba(242,230,212,.7); }
.desplegable__n { font-size: 30px; }
.desplegable__pie { border-radius: var(--r-thumb); }
.vida-barra { height: 2px; }

/* ---------- Botones: píldora ---------- */
.boton::before, .boton::after { display: none; }
.boton {
  align-items: center; min-width: 0; min-height: 48px; padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--crema); color: var(--tinta);
  font-family: var(--sistema); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
  transition: translate .2s var(--ease-out-quart), box-shadow .2s var(--ease-out-quart), background .2s;
}
.boton:hover { color: var(--tinta); background: var(--blanco); translate: 0 -1px; box-shadow: var(--sh-card); }
.boton--tinta { background: var(--tinta); color: var(--crema); }
.boton--tinta:hover { background: var(--rojo); color: var(--crema); box-shadow: var(--sh-cta); }
.bloque--tema .boton--tinta, .cartel .boton--tinta { background: var(--crema); color: var(--rojo); }
.bloque--tema .boton--tinta:hover, .cartel .boton--tinta:hover { background: var(--blanco); color: var(--rojo); box-shadow: 0 18px 44px rgba(42,23,16,.28); }
.bloque--tema .boton:not(.boton--tinta), .cartel .boton:not(.boton--tinta) {
  background: rgba(242,230,212,.14); color: var(--crema);
  box-shadow: inset 0 0 0 1px rgba(242,230,212,.32);
}
.bloque--tema .boton:not(.boton--tinta):hover, .cartel .boton:not(.boton--tinta):hover { background: rgba(242,230,212,.24); }
.botonera { gap: 14px 18px; }
.boton:active, .oferta__fila:active { scale: .97; }

/* ---------- Portada ---------- */
.cartel { padding-block: clamp(56px, 8vw, 104px); }
.cartel__texto .entradilla { opacity: .9; }
.ventana__ficha {
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-card);
  background: rgba(242, 230, 212, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--sh-panel);
}
.ventana__ficha b { font-family: var(--rotulo); letter-spacing: -0.015em; font-size: 18px; }
.ventana__ante { font-size: 12px; font-weight: 600; }
.ventana__linea { stroke-width: 1px; opacity: .6; }
.seguir a { font-weight: 600; }

/* ---------- Cartas: superficie con sombra doble ---------- */
.carta {
  border: 1px solid var(--filete); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--sh-card);
}
.baraja .carta, .letras .carta { border-color: rgba(242,230,212,.18); }
.carta__arriba, .carta__nombre { font-family: var(--sistema); font-weight: 600; }
.baraja .carta, .letras .carta, .cartel__baraja .carta, .ventana__cartas .carta { box-shadow: var(--sh-card); }
@media (hover: hover) and (pointer: fine) {
  .baraja .carta:hover, .letras .carta:hover, .cartel__baraja .carta:hover {
    --alza: -8px; --zoom: 1.03;
    box-shadow: var(--sh-lift);
  }
}
.baraja details.carta[open] { --alza: -6px; box-shadow: var(--sh-lift); }
details.carta[open] { border-color: rgba(240,197,168,.4); }
.carta__ejemplo { border-top: 1px solid rgba(242,230,212,.25); }
.baraja > li, .letras > li, .cartel__baraja > li { animation-duration: 7s; }
@keyframes mecer {
  0%, 100% { translate: 0 0;    rotate: -0.4deg; }
  50%      { translate: 0 -3px; rotate: 0.4deg; }
}

/* ---------- Filetes finos en todas las listas ---------- */
.caminos, .indice, .packs, .preguntas, .entradas { border-top-width: 1px; border-top-color: var(--filete); }
.camino, .indice li, .pack, .pregunta, .arabismos li, .palabra, .descubre li, .cando li,
.tabla th, .tabla td, .pares td, .pares th, .formas th, .formas td, .familia h3 {
  border-bottom-width: 1px; border-bottom-color: var(--filete);
}
.bloque--tinta :is(.indice, .indice li, .entradas, .entrada), .bloque--tema :is(.indice, .indice li, .entradas, .entrada) { border-color: var(--filete-claro); }
.entrada { border-bottom-width: 1px; }
.sonido { border-top-width: 1px; border-top-color: var(--filete); }
.tira { border-block-width: 1px; border-color: var(--filete-claro); }
.mt-libro { border-top-width: 1px; border-top-color: var(--filete); }

/* Los tres caminos: un solo panel blanco con filetes, no tarjetas sueltas. */
.caminos {
  border-top: 0; background: var(--blanco); color: var(--tinta);
  border-radius: var(--r-panel); box-shadow: var(--sh-panel); padding: 0 clamp(18px, 3vw, 36px);
}
.camino { padding: 28px 0; }
.camino:last-child { border-bottom: 0; }
.camino p, .camino__estado { color: var(--texto-2); font-size: 16px; }
.camino__glifo { font-size: 92px; }

/* Arabismos: también un panel. */
.arabismos {
  background: var(--blanco); color: var(--tinta); border-radius: var(--r-panel);
  box-shadow: var(--sh-panel); padding: 8px clamp(18px, 3vw, 32px); column-gap: 48px;
}
.arabismos__lat { font-family: var(--rotulo); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; }
.leyenda { color: var(--texto-2); font-size: 14px; }

/* ---------- Paneles y superficies ---------- */
.panel { border-radius: var(--r-hero); }
.panel__ante { font-size: 14px; font-weight: 600; }

.parada__burbuja {
  border: 0; box-shadow: var(--sh-card); font-size: 22px; width: 56px; height: 56px;
}
.ruta::before { height: 1px; background: var(--filete); top: 28px; left: 28px; }
.parada__carta {
  border: 0; border-radius: var(--r-card); box-shadow: var(--sh-card);
  transition: translate .25s var(--ease-out-quart), box-shadow .25s var(--ease-out-quart);
}
.parada:hover .parada__carta { translate: 0 -3px; box-shadow: var(--sh-lift); }
.parada__carta b { font-family: var(--rotulo); letter-spacing: -0.01em; font-weight: 650; font-size: 17px; }
.parada__carta > span { color: var(--texto-2); font-size: 14px; }
.parada__carta .parada__ir { color: var(--rojo); font-weight: 600; font-size: 14px; }

.pasos3 li { border-radius: var(--r-card); transition: background .25s, translate .25s var(--ease-out-quart); }
.paso3__n { border: 0; box-shadow: var(--sh-card); font-size: 14px; font-weight: 600; }
.pasos3 p { color: var(--texto-2); }
.paso3__partes i { font-size: 12px; font-weight: 600; }

.prueba { border: 0; border-radius: var(--r-hero); box-shadow: var(--sh-panel); }
.prueba__ante { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.frase { border-radius: var(--r-thumb); }

.libro ul.oferta { gap: 0; background: var(--blanco); border-radius: var(--r-panel); box-shadow: var(--sh-panel); overflow: visible; padding: 6px; }
.oferta__fila { border: 0; border-radius: 16px; background: transparent; padding: 14px 16px; }
.libro .oferta li + li .oferta__fila:not(.oferta__fila--pack) { box-shadow: inset 0 1px 0 var(--filete); border-radius: 0; }
.oferta__fila:hover { background: rgba(242,230,212,.6); translate: 0; box-shadow: none; border-radius: 16px; }
.oferta__nombre { font-family: var(--rotulo); font-weight: 650; font-size: 18px; letter-spacing: -0.01em; }
.oferta__lec { color: var(--texto-2); font-size: 14px; }
.oferta__fila--pack { border: 0; margin-top: 18px; border-radius: var(--r-card); background: var(--tinta); box-shadow: var(--sh-card); }
.oferta__fila--pack:hover { background: var(--rojo); box-shadow: var(--sh-cta); border-radius: var(--r-card); }
.oferta__bandera { font-size: 12px; font-weight: 600; }
.oferta__confianza, .confianza { color: inherit; font-size: 14px; }

/* Portadas reales: esquina pequeña y sombra, sin marco. */
.abanico__tapa, .libro__img, .libro__mini, .producto__tapa-img, .hojear img {
  border: 0; border-radius: var(--r-chip); box-shadow: var(--sh-card);
}
.abanico__linea { stroke-width: 1px; opacity: .5; }

.ejercicio, .error, .marca-l, .pieza, .demo {
  border: 0; border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.ejercicio--libro { box-shadow: none; }
.regla { border-radius: var(--r-card); }
.banco, .columnas-sort div, .solucionario { border-width: 1px; border-color: var(--filete); border-radius: var(--r-thumb); }
.cerrado { border-top-width: 1px; border-top-color: var(--filete); }
.pieza-rec { border: 0; border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.pieza-rec figcaption { border-top: 1px solid var(--filete); }
.demo__barra { border: 0; border-radius: var(--r-pill); background: rgba(42,23,16,.06); padding: 3px; gap: 3px; }
.demo__tab { border-radius: var(--r-pill); font-size: 15px; font-weight: 600; min-height: 38px; }
.demo__tab + .demo__tab { border-left: 0; }
.demo__tab[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(42,23,16,.12); }
.demo__pieza { border: 1px solid var(--filete); border-radius: var(--r-thumb); }
.oir { border: 0; border-radius: 50%; background: rgba(42,23,16,.06); transition: background .2s; }
.oir:hover { background: rgba(42,23,16,.12); }
.bloque--tinta .oir, .bloque--tema .oir { background: rgba(242,230,212,.14); }
.carta .carta__oir { background: none; }
.cando li::before { border-width: 1.5px; border-radius: 6px; }

/* ---------- Pie claro ---------- */
.pie { background: var(--crema); }
.pie__letra { border-top: 1px solid var(--filete); color: var(--texto-2); font-size: 13px; }
.pie__col li, .pie__col p { font-size: 14px; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.pie .idiomas { border: 0; background: rgba(42,23,16,.07); }
.pie .idiomas > * { font-size: 13px; font-weight: 600; }
.pie .idiomas .idioma--actual { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(42,23,16,.12); }

/* Volver arriba: cristal. */
.arriba {
  border: 1px solid var(--filete);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sh-card);
  width: 48px; height: 48px;
}
.arriba:hover { background: var(--rojo); color: var(--crema); }

/* Enlaces: subrayado fino. */
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-width: 2px; border-radius: 6px; }

/* ---------- La web, en venta (2026-10-06) ----------
   Franja fina encima del cartel de la portada. Quitarla es borrar esto y
   la línea de VENTA en construir.py. */
.venta { margin: 0; background: var(--tinta); color: var(--crema); font-size: 15px; line-height: 1.45; text-align: center; }
.venta .env { display: block; padding-block: 10px; }
.venta a { color: var(--melocoton); font-weight: 600; }
.venta a:hover { text-decoration-color: var(--crema); }