/*
  app.css — plan.md §8, con el craft de .claude/skills/emil-design-eng y
  apple-design encima.

  Lo que manda sigue siendo el plan: modo oscuro por defecto (uso en coche y de
  noche), tipografía grande, botones de respuesta en el tercio inferior al
  alcance del pulgar, y ni una animación de celebración.

  Lo que aportan las skills, y que aquí encaja:
   - Curvas de easing propias. Las de serie (ease, ease-out) son flojas.
   - Nada por encima de 300 ms en interfaz. Lo rápido se percibe como sólido.
   - Solo se anima transform y opacity: saltan layout y paint, van en la GPU.
   - Respuesta al pulsar, no al soltar: scale(0.97) instantáneo en :active.
   - El hover, detrás de @media (hover: hover): en táctil dispara al tocar.
   - prefers-reduced-motion es REDUCIR, no eliminar. Se quedan las opacidades.

  La regla de frecuencia de emil-design-eng dice que lo que se ve cien veces al
  día no se anima nunca. La pantalla de sesión se ve decenas de veces seguidas,
  así que ahí no hay entradas animadas: solo la respuesta al dedo.
*/

/* ============================================================== tokens */

:root {
  /* Superficies. Escalón a escalón, sin saltos bruscos: la profundidad se
     construye con capas, no repartiendo bordes por todas partes. */
  --atzeko: #0f1116;
  --azalera: #171a21;
  --azalera-argia: #1e222b;
  --azalera-sakona: #0b0d11;

  --marra: #262b35;
  --marra-argia: #363d4a;

  /* Texto: nunca blanco puro sobre negro puro. De noche deslumbra. */
  --testu: #e9ebef;
  --testu-lasai: #b6bcc8;
  --testu-ahula: #848c9b;

  --nabarmena: #7ab5f5;
  --nabarmena-sakona: #2b5f96;
  --nabarmena-lauso: rgba(122, 181, 245, 0.13);

  --ondo: #5cc98d;
  --ondo-lauso: rgba(92, 201, 141, 0.13);
  --gaizki: #ff8080;
  --gaizki-lauso: rgba(255, 128, 128, 0.12);
  --arriskua: #e05a5a;

  /* Escala de espaciado. Un puñado de valores, no cifras al tuntún. */
  --t1: 4px;
  --t2: 8px;
  --t3: 12px;
  --t4: 16px;
  --t5: 24px;
  --t6: 32px;
  --t7: 48px;

  /* Escala tipográfica */
  --neurria-xs: 12px;
  --neurria-s: 14px;
  --neurria-m: 16px;
  --neurria-l: 19px;
  --neurria-xl: 23px;
  --neurria-2xl: 28px;
  --neurria-3xl: 34px;

  --biribila-s: 8px;
  --biribila: 14px;
  --biribila-l: 20px;

  /* Curvas. Las de serie no tienen fuerza (emil-design-eng). */
  --kurba: cubic-bezier(0.23, 1, 0.32, 1);
  --kurba-leuna: cubic-bezier(0.4, 0, 0.2, 1);

  --azkar: 120ms;
  --arrunta: 180ms;
  --lasaia: 240ms;

  --tartea: var(--t4);
}

/*
  Tema. plan.md §8 dice «modo oscuro por defecto», así que el oscuro es lo que
  hay arriba, sin condiciones: es lo que se ve al instalar. El claro entra solo
  si lo eliges en Ajustes, o si eliges «automático» y tu sistema está en claro.

  Los tokens claros van duplicados en dos selectores a propósito: se podría
  hacer con light-dark(), pero eso deja fuera a los iPhone anteriores a 2024 y
  esto tiene que aguantar cinco años.
*/
:root[data-gaia="argia"] {
  --atzeko: #f7f7f9;
  --azalera: #ffffff;
  --azalera-argia: #f0f1f4;
  --azalera-sakona: #e9eaee;
  --marra: #dcdee4;
  --marra-argia: #c3c7d0;
  --testu: #14161b;
  --testu-lasai: #3f4653;
  --testu-ahula: #626a78;
  --nabarmena: #1d6fc0;
  --nabarmena-sakona: #bcd8f5;
  --nabarmena-lauso: rgba(29, 111, 192, 0.09);
  --ondo: #177a47;
  --ondo-lauso: rgba(23, 122, 71, 0.09);
  --gaizki: #c3382f;
  --gaizki-lauso: rgba(195, 56, 47, 0.08);
  --arriskua: #c3382f;
}

@media (prefers-color-scheme: light) {
  :root[data-gaia="auto"] {
    --atzeko: #f7f7f9;
    --azalera: #ffffff;
    --azalera-argia: #f0f1f4;
    --azalera-sakona: #e9eaee;
    --marra: #dcdee4;
    --marra-argia: #c3c7d0;
    --testu: #14161b;
    --testu-lasai: #3f4653;
    --testu-ahula: #626a78;
    --nabarmena: #1d6fc0;
    --nabarmena-sakona: #bcd8f5;
    --nabarmena-lauso: rgba(29, 111, 192, 0.09);
    /* #1d8a52 se quedaba en 4.08 sobre el fondo claro y la etiqueta «Correcto»
       va a 12px: por debajo del 4.5 que pide WCAG AA para texto pequeño. */
    --ondo: #177a47;
    --ondo-lauso: rgba(23, 122, 71, 0.09);
    --gaizki: #c3382f;
    --gaizki-lauso: rgba(195, 56, 47, 0.08);
    --arriskua: #c3382f;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--atzeko);
  color: var(--testu);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", system-ui, Roboto, sans-serif;
  font-size: var(--neurria-l);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Los números de las estadísticas, en cifras de ancho fijo: si no, bailan
   al cambiar de 9 a 10 y la fila entera se mueve. */
.zenbakia-balioa, .menu-kopurua, .azpititulua {
  font-variant-numeric: tabular-nums;
}

#app {
  min-height: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ============================================================ cabecera */

.goiburua {
  display: flex;
  align-items: baseline;
  gap: var(--t3);
  padding: var(--t5) var(--tartea) var(--t2);
}
.goiburua-testua { flex: 1; min-width: 0; }
.goiburua h1 {
  font-size: var(--neurria-2xl);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.azpititulua {
  margin: var(--t1) 0 0;
  color: var(--testu-ahula);
  font-size: var(--neurria-s);
}

.atzera {
  color: var(--testu-ahula);
  text-decoration: none;
  font-size: var(--neurria-m);
  padding: var(--t2) var(--t3) var(--t2) 0;
  margin: 0 0 0 calc(var(--t1) * -1);
  transition: color var(--azkar) var(--kurba);
  flex: none;
}
.atzera:active { color: var(--testu); }

/* ============================================================== cuerpo */

.edukia {
  flex: 1;
  padding: var(--tartea);
  overflow-y: auto;
}

.testua { margin: 0 0 var(--t3); color: var(--testu-lasai); }
.testua.ahula { color: var(--testu-ahula); font-size: var(--neurria-m); }

.errorea {
  background: var(--azalera);
  border: 1px solid var(--arriskua);
  color: var(--gaizki);
  padding: var(--t3);
  border-radius: var(--biribila);
  white-space: pre-wrap;
  font-size: var(--neurria-s);
}

/* El tercio inferior: aquí y solo aquí se toca (plan.md §8). */
.behekoa {
  padding: var(--t3) var(--tartea) calc(var(--tartea) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--marra);
  background: linear-gradient(to bottom, transparent, var(--atzeko) 18px);
  position: sticky;
  bottom: 0;
}
.argibidea {
  margin: 0 0 var(--t3);
  color: var(--testu-ahula);
  font-size: var(--neurria-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}

/* ============================================================= botones */

.botoia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: var(--t3) var(--t4);
  border: 1px solid var(--marra-argia);
  border-radius: var(--biribila);
  background: var(--azalera-argia);
  color: var(--testu);
  font: inherit;
  font-size: var(--neurria-l);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  /* Nunca `transition: all`: se nombran las propiedades (emil-design-eng). */
  transition: transform var(--azkar) var(--kurba),
              background-color var(--azkar) var(--kurba),
              border-color var(--azkar) var(--kurba);
}
/* Respuesta al pulsar, no al soltar. Es la diferencia entre una interfaz que
   escucha y una que parece muerta (apple-design §1). */
.botoia:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .botoia:hover { background: var(--marra); border-color: var(--marra-argia); }
  .botoia.nagusia:hover { filter: brightness(1.08); }
  .botoia.ahula:hover { background: var(--azalera); color: var(--testu); }
}

.botoia:focus-visible {
  outline: 2px solid var(--nabarmena);
  outline-offset: 2px;
}

.botoia.nagusia {
  background: var(--nabarmena);
  border-color: var(--nabarmena);
  color: #08111c;
  font-weight: 650;
}
.botoia.handia { min-height: 72px; font-size: var(--neurria-xl); font-weight: 650; }
.botoia.txikia {
  min-height: 38px; font-size: var(--neurria-s); padding: var(--t1) var(--t3);
  width: auto; border-radius: var(--biribila-s);
}
.botoia.ahula { background: transparent; border-color: transparent; color: var(--testu-ahula); }
.botoia.zabala { width: 100%; }
.botoia.arriskutsua { border-color: var(--arriskua); color: var(--gaizki); background: transparent; }
.botoia.ona { border-color: var(--ondo); color: var(--ondo); background: var(--ondo-lauso); }
.botoia.erdipurdi { border-color: var(--nabarmena); color: var(--nabarmena); background: var(--nabarmena-lauso); }
.botoia.txarra { border-color: var(--arriskua); color: var(--gaizki); background: var(--gaizki-lauso); }

.saio-botoiak { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t2); }
.aukerak { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t2); }
.aukerak .botoia { min-height: 62px; line-height: 1.25; padding: var(--t2) var(--t3); }
.kalifikazioak { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t2); }
.kalifikazioak .botoia { font-size: var(--neurria-s); padding: var(--t2) var(--t1); line-height: 1.2; }
.amaiera-botoiak { display: grid; gap: var(--t2); }
.produkzioa { display: grid; grid-template-columns: 1fr auto; gap: var(--t2); }
.produkzioa .botoia { width: auto; padding: var(--t3) var(--t5); }

.sarrera {
  min-height: 58px;
  padding: var(--t3) var(--t4);
  border: 1px solid var(--marra-argia);
  border-radius: var(--biribila);
  background: var(--azalera-sakona);
  color: var(--testu);
  font: inherit;
  font-size: var(--neurria-xl);
  width: 100%;
  transition: border-color var(--azkar) var(--kurba);
}
.sarrera:focus {
  outline: none;
  border-color: var(--nabarmena);
  box-shadow: 0 0 0 3px var(--nabarmena-lauso);
}

/* ============================================================= portada */

.zenbakiak {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--marra);
  border: 1px solid var(--marra);
  border-radius: var(--biribila);
  overflow: hidden;
  margin-bottom: var(--t5);
}
.zenbakia { background: var(--azalera); padding: var(--t4) var(--t2); text-align: center; }
.zenbakia-balioa {
  display: block;
  font-size: var(--neurria-3xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.zenbakia-etiketa {
  display: block;
  font-size: var(--neurria-xs);
  color: var(--testu-ahula);
  margin-top: var(--t1);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.menua {
  display: grid;
  gap: 1px;
  background: var(--marra);
  border: 1px solid var(--marra);
  border-radius: var(--biribila);
  overflow: hidden;
  margin-top: var(--t5);
}
.menu-lerroa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--t3);
  background: var(--azalera);
  color: var(--testu);
  text-decoration: none;
  padding: var(--t4) var(--tartea);
  min-height: 60px;
  font-size: var(--neurria-m);
  transition: background-color var(--azkar) var(--kurba);
}
.menu-lerroa:active { background: var(--azalera-argia); }
@media (hover: hover) and (pointer: fine) {
  .menu-lerroa:hover { background: var(--azalera-argia); }
}
.menu-kopurua {
  color: var(--testu-ahula);
  font-size: var(--neurria-s);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.menu-azalpena {
  display: block;
  color: var(--testu-ahula);
  font-size: var(--neurria-s);
  margin-top: 2px;
  line-height: 1.35;
}

/* Bloques del menú. Antes eran cinco filas planas donde todo pesaba igual. */
.menu-atala { margin-top: var(--t5); }
.menu-atala-izenburua {
  margin: 0 0 var(--t2);
  font-size: var(--neurria-xs);
  font-weight: 600;
  color: var(--testu-ahula);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.menu-atala .menua { margin-top: 0; }
.menua-bakarra { margin-top: var(--t5); }

.hasiera-gonbita {
  display: block;
  background: var(--nabarmena-lauso);
  border: 1px solid var(--nabarmena-sakona);
  border-radius: var(--biribila);
  padding: var(--t4) var(--tartea);
  margin-bottom: var(--t5);
  text-decoration: none;
  color: var(--testu);
  transition: transform var(--azkar) var(--kurba);
}
.hasiera-gonbita:active { transform: scale(0.99); }
.hasiera-gonbita-izenburua {
  display: block; font-size: var(--neurria-l); font-weight: 650; color: var(--nabarmena);
}
.hasiera-gonbita-testua {
  display: block; font-size: var(--neurria-m); color: var(--testu-lasai); margin-top: var(--t1);
}

/* ============================================================== sesión */

.aurrerapena {
  height: 2px;
  background: var(--marra);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--t6);
}
.aurrerapena-barra {
  height: 100%;
  width: 100%;
  background: var(--nabarmena);
  /* Se escala desde la izquierda: transform en vez de width, para no
     recalcular layout en cada fotograma. */
  transform-origin: left center;
  transition: transform var(--lasaia) var(--kurba);
}

.galdera { margin-bottom: var(--t6); }
.galdera-gaztelaniaz {
  margin: 0 0 var(--t3);
  font-size: var(--neurria-l);
  color: var(--testu-ahula);
  line-height: 1.4;
}
/* El enunciado en euskera es el héroe de la pantalla: que respire. */
.galdera-euskaraz {
  margin: 0;
  font-size: var(--neurria-2xl);
  line-height: 1.3;
  font-weight: 550;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.galdera-euskaraz.osoa { font-size: var(--neurria-xl); font-weight: 500; }
.hutsunea {
  display: inline-block;
  min-width: 2.8em;
  text-align: center;
  color: var(--nabarmena);
  border-bottom: 2px solid var(--nabarmena);
  line-height: 1.1;
}
.galdera-etiketa {
  margin: var(--t4) 0 0;
  font-size: var(--neurria-xs);
  color: var(--testu-ahula);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}
.galdera.txikia { margin-bottom: var(--t5); }
.galdera.txikia .galdera-gaztelaniaz { font-size: var(--neurria-m); margin-bottom: var(--t2); }
.galdera.txikia .galdera-euskaraz { font-size: var(--neurria-l); font-weight: 500; }

.nozio-esteka { margin-top: var(--t5); }

/* ---------------------------------------------------------- corrección */

.emaitza {
  border-radius: var(--biribila);
  border: 1px solid var(--marra);
  padding: var(--t4) var(--tartea);
  margin-bottom: var(--t5);
}
.emaitza.ondo { border-color: rgba(92, 201, 141, 0.4); background: var(--ondo-lauso); }
.emaitza.gaizki { border-color: rgba(255, 128, 128, 0.35); background: var(--gaizki-lauso); }
.emaitza-etiketa {
  margin: 0;
  font-size: var(--neurria-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--testu-ahula);
}
.emaitza.ondo .emaitza-etiketa { color: var(--ondo); }
.emaitza.gaizki .emaitza-etiketa { color: var(--gaizki); }
.emaitza-zurea {
  margin: var(--t2) 0 0;
  font-size: var(--neurria-m);
  color: var(--testu-ahula);
  text-decoration: line-through;
  text-decoration-color: var(--gaizki);
}
.emaitza-forma-lerroa {
  display: flex; align-items: center; gap: var(--t3);
  flex-wrap: wrap; margin-top: var(--t2);
}
.emaitza-forma {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--neurria-2xl); font-weight: 650; letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.botoia.entzun { flex: none; }

.adibidea {
  border-left: 2px solid var(--nabarmena-sakona);
  padding: var(--t1) 0 var(--t1) var(--t4);
  margin: 0 0 var(--t5);
}
.adibidea-eu { margin: 0; font-size: var(--neurria-l); }
.adibidea-es { margin: var(--t1) 0 0; font-size: var(--neurria-m); color: var(--testu-ahula); }

.tresnak { margin-top: var(--t6); display: flex; gap: var(--t2); flex-wrap: wrap; align-items: center; }

/* ------------------------------------------ glosa palabra por palabra */

.glosa {
  display: grid;
  gap: 1px;
  background: var(--marra);
  border: 1px solid var(--marra);
  border-radius: var(--biribila);
  overflow: hidden;
  margin-bottom: var(--t5);
}
.glosa-lerroa {
  display: grid;
  grid-template-columns: minmax(5.5em, auto) 1fr;
  gap: 2px var(--t4);
  background: var(--azalera);
  padding: var(--t3) var(--t4);
  align-items: baseline;
}
.glosa-eu { font-size: var(--neurria-l); font-weight: 600; overflow-wrap: anywhere; }
.glosa-es { font-size: var(--neurria-m); color: var(--testu-lasai); }
.glosa-rola {
  grid-column: 2;
  font-size: var(--neurria-xs);
  color: var(--testu-ahula);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.glosa-lerroa.nabarmena { background: var(--nabarmena-lauso); }
.glosa-lerroa.nabarmena .glosa-eu { color: var(--nabarmena); }

/* -------------------------- la fila del paradigma con su casilla marcada */

.taula-zatia { margin-bottom: var(--t3); }
.taula-goiburua {
  margin: 0 0 var(--t2);
  font-size: var(--neurria-xs);
  color: var(--testu-ahula);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.taula-lerroa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--t1);
}
.gelaxka {
  background: var(--azalera);
  border: 1px solid var(--marra);
  border-radius: var(--biribila-s);
  padding: var(--t2) var(--t1);
  text-align: center;
  min-width: 0;
}
.gelaxka-etiketa { display: block; font-size: var(--neurria-xs); color: var(--testu-ahula); }
.gelaxka-forma { display: block; font-size: var(--neurria-m); margin-top: 2px; overflow-wrap: anywhere; }
.gelaxka.unekoa { border-color: var(--nabarmena); background: var(--nabarmena-lauso); }
.gelaxka.unekoa .gelaxka-forma { color: var(--nabarmena); font-weight: 650; }
.gelaxka.hutsik { opacity: 0.35; }

.laburpena { text-align: center; padding: var(--t7) 0 var(--t4); }
.laburpena-kopurua {
  margin: 0; font-size: var(--neurria-3xl); font-weight: 650; letter-spacing: -0.03em;
}
.laburpena-xehe { margin: var(--t2) 0 0; color: var(--testu-ahula); }

/* ==================================================== test de lo básico */

/* La pregunta es texto castellano corrido, no una forma vasca que haya que
   leer letra a letra: algo menos de cuerpo y más interlínea que el enunciado
   de una tarjeta. */
.proba-galdera {
  margin: 0;
  font-size: var(--neurria-xl);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Las respuestas del test son frases, no formas de tres letras: una por fila. */
.aukerak-proba { grid-template-columns: 1fr; }
.aukerak-proba .botoia {
  justify-content: flex-start;
  text-align: left;
  font-size: var(--neurria-m);
  min-height: 52px;
  line-height: 1.3;
}

.proba-nota { text-align: center; padding: var(--t5) 0 var(--t6); }
.proba-nota-zenbakia {
  margin: 0;
  font-size: var(--neurria-3xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.proba-nota-iritzia {
  margin: var(--t2) auto 0;
  color: var(--testu-ahula);
  max-width: 34ch;
}

.proba-berrikuspena {
  border: 1px solid var(--marra);
  border-left-width: 3px;
  border-radius: var(--biribila-s);
  padding: var(--t3) var(--t4);
  margin-bottom: var(--t2);
}
.proba-berrikuspena.ondo { border-left-color: var(--ondo); }
.proba-berrikuspena.gaizki { border-left-color: var(--arriskua); }
.proba-berrikuspena-galdera {
  margin: 0 0 var(--t2);
  font-size: var(--neurria-m);
  line-height: 1.4;
  color: var(--testu-lasai);
}
.proba-erantzuna { margin: 0; font-size: var(--neurria-m); }
.proba-erantzuna.ondo { color: var(--ondo); font-weight: 600; }
.proba-erantzuna.gaizki {
  color: var(--testu-ahula);
  text-decoration: line-through;
  text-decoration-color: var(--gaizki);
}
.proba-azalpena {
  margin: var(--t2) 0 0;
  font-size: var(--neurria-s);
  color: var(--testu-ahula);
  line-height: 1.5;
  padding-top: var(--t2);
  border-top: 1px solid var(--marra);
}

/* ============================================================ revisión */

.berrikuspen-lerroa {
  display: flex;
  gap: var(--t3);
  align-items: center;
  justify-content: space-between;
  background: var(--azalera);
  border: 1px solid var(--marra);
  border-radius: var(--biribila);
  padding: var(--t3) var(--tartea);
  margin-bottom: var(--t2);
  flex-wrap: wrap;
}
.berrikuspen-testua { min-width: 0; flex: 1; }
.berrikuspen-eu { margin: 0; font-size: var(--neurria-l); overflow-wrap: anywhere; }
.berrikuspen-es { margin: 2px 0 0; color: var(--testu-ahula); font-size: var(--neurria-m); }
.berrikuspen-modulo {
  margin: var(--t1) 0 0; font-size: var(--neurria-xs); color: var(--testu-ahula);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.berrikuspen-botoiak { display: flex; gap: var(--t2); }

/* ============================================================ nociones */

.nozioa { margin-bottom: var(--t6); }
.nozioa > *:first-child { margin-top: 0; }
.nozio-izenburua {
  font-size: var(--neurria-xl);
  margin: var(--t7) 0 var(--t3);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
/* Texto de lectura larga: algo más estrecho y con más aire entre líneas. */
.nozio-p {
  margin: 0 0 var(--t4);
  max-width: 62ch;
  line-height: 1.65;
  color: var(--testu-lasai);
}
.nozio-zerrenda { margin: 0 0 var(--t4); padding-left: var(--t5); max-width: 62ch; line-height: 1.65; color: var(--testu-lasai); }
.nozio-zerrenda li { margin-bottom: var(--t2); }
.nozioa strong { color: var(--testu); font-weight: 650; }

.nozio-oharra {
  border-left: 2px solid var(--nabarmena);
  background: var(--nabarmena-lauso);
  padding: var(--t3) var(--t4);
  border-radius: 0 var(--biribila-s) var(--biribila-s) 0;
  margin: 0 0 var(--t4);
}
.nozio-oharra p { margin: 0; font-size: var(--neurria-m); line-height: 1.6; color: var(--testu-lasai); }

.nozio-adibidea {
  background: var(--azalera);
  border: 1px solid var(--marra);
  border-radius: var(--biribila);
  padding: var(--t4);
  margin: 0 0 var(--t4);
}
.nozio-adibidea-eu {
  margin: 0; font-size: var(--neurria-xl); font-weight: 550; letter-spacing: -0.01em;
}
.nozio-adibidea-es { margin: var(--t1) 0 0; color: var(--testu-ahula); }
.nozio-adibidea-oharra {
  margin: var(--t3) 0 0; font-size: var(--neurria-m); color: var(--testu-lasai);
  line-height: 1.55; padding-top: var(--t3); border-top: 1px solid var(--marra);
}

.nozio-taula-kutxa {
  overflow-x: auto;
  margin: 0 0 var(--t4);
  border: 1px solid var(--marra);
  border-radius: var(--biribila);
  -webkit-overflow-scrolling: touch;
}
.nozio-taula { border-collapse: collapse; width: 100%; font-size: var(--neurria-m); }
.nozio-taula th, .nozio-taula td {
  border-bottom: 1px solid var(--marra);
  padding: var(--t3) var(--t4);
  text-align: left;
  vertical-align: top;
}
.nozio-taula tr:last-child td { border-bottom: 0; }
.nozio-taula th {
  background: var(--azalera-argia);
  font-size: var(--neurria-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--testu-ahula);
  font-weight: 600;
  white-space: nowrap;
}
.nozio-taula td:first-child { white-space: nowrap; color: var(--testu); }
.nozio-taula td { color: var(--testu-lasai); }

.hurrengo-nozioa { margin-top: var(--t4); }

/* ========================================================== formulario */

.formularioa { display: grid; gap: var(--t5); }
.eremua { display: block; }
.eremua-etiketa {
  display: block; font-size: var(--neurria-s); color: var(--testu-lasai);
  margin-bottom: var(--t2); font-weight: 550;
}
.eremua-laguntza {
  display: block; font-size: var(--neurria-s); color: var(--testu-ahula); margin-top: var(--t2);
}

/* ============================================================= ajustes */

.atala { margin-bottom: var(--t7); }
.atala h2 {
  font-size: var(--neurria-l);
  margin: 0 0 var(--t3);
  letter-spacing: -0.01em;
}
.atala .botoia + .botoia { margin-top: var(--t2); }

.aukera-taldea {
  display: grid; gap: 1px; background: var(--marra);
  border: 1px solid var(--marra); border-radius: var(--biribila); overflow: hidden;
}
.aukera-lerroa {
  display: flex;
  align-items: center;
  gap: var(--t3);
  background: var(--azalera);
  padding: var(--t3) var(--tartea);
  min-height: 58px;
  cursor: pointer;
  font-size: var(--neurria-m);
  transition: background-color var(--azkar) var(--kurba);
}
.aukera-lerroa:active { background: var(--azalera-argia); }
.aukera-lerroa.hautatua { background: var(--nabarmena-lauso); }
.aukera-lerroa.hautatua span { color: var(--nabarmena); }
.aukera-lerroa input { width: 20px; height: 20px; accent-color: var(--nabarmena); flex: none; }
.atala .aukera-lerroa + .botoia,
.atala .aukera-taldea + .botoia { margin-top: var(--t3); }

/* ================================================== avisos y superposición */

.oharra {
  position: fixed;
  left: 50%;
  bottom: calc(var(--t5) + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  background: var(--azalera-argia);
  border: 1px solid var(--marra-argia);
  color: var(--testu);
  padding: var(--t3) var(--t5);
  border-radius: 999px;
  font-size: var(--neurria-m);
  max-width: calc(100% - var(--t6));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  /* Solo transform y opacity: van en la GPU y no tocan layout. */
  transition: opacity var(--arrunta) var(--kurba), transform var(--arrunta) var(--kurba);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.oharra.ikusgai { opacity: 1; transform: translate(-50%, 0); }

.estalkia {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 11, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tartea);
  z-index: 30;
  animation: agertu var(--arrunta) var(--kurba);
}
.elkarrizketa, .panela {
  background: var(--azalera);
  border: 1px solid var(--marra-argia);
  border-radius: var(--biribila-l);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  /* Nunca desde scale(0): nada aparece de la nada (emil-design-eng). */
  animation: sartu var(--lasaia) var(--kurba);
}
.elkarrizketa { padding: var(--t5); max-width: 420px; width: 100%; }
.panela { max-width: 620px; width: 100%; max-height: 84vh; display: flex; flex-direction: column; }

@keyframes agertu { from { opacity: 0; } }
@keyframes sartu { from { opacity: 0; transform: scale(0.96); } }

.elkarrizketa .galdera { margin: 0 0 var(--t2); font-size: var(--neurria-l); }
.elkarrizketa .xehetasuna { margin: 0 0 var(--t5); color: var(--testu-ahula); font-size: var(--neurria-m); }
.elkarrizketa-botoiak { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t2); }

.panela-goiburua {
  display: flex; align-items: center; justify-content: space-between; gap: var(--t3);
  padding: var(--t4) var(--t5); border-bottom: 1px solid var(--marra);
}
.panela-goiburua h2 { font-size: var(--neurria-l); margin: 0; letter-spacing: -0.01em; }
.panela-edukia { padding: var(--t5); overflow-y: auto; }
.panela-edukia > *:last-child { margin-bottom: 0; }
.panela-edukia .nozio-izenburua:first-child { margin-top: 0; }

/* ==================================================== pantallas anchas */

@media (min-width: 620px) {
  :root { --tartea: var(--t5); }
  body { font-size: 20px; }
  .galdera-euskaraz { font-size: var(--neurria-3xl); }
  .aukerak .botoia { min-height: 66px; }
}

/*
  Monitor grande y con sitio de sobra.

  En móvil la app llena la pantalla y la barra de respuestas se pega abajo,
  porque el tercio inferior es donde llega el pulgar (§8). En un monitor eso no
  significa nada: no hay pulgar, hay ratón. Y estirar la columna hasta el borde
  deja medio metro de vacío entre el menú y los botones.

  Aquí la app deja de estirarse: se convierte en una tarjeta de altura natural,
  centrada, con la barra de respuestas justo debajo del contenido. Si el
  contenido es más largo que la ventana (una noción, por ejemplo), crece y
  hace scroll la página, que es lo normal en un ordenador.

  El `margin: auto 0` no es decorativo: centra en vertical y, a diferencia de
  `align-items: center`, nunca empuja la parte de arriba fuera del área
  desplazable cuando el contenido no cabe.
*/
/*
  El umbral está medido, no elegido a ojo: la portada mide 1096 px y con el aire
  de arriba y abajo pide 1160. Por debajo de eso, la tarjeta dejaría los botones
  de sesión bajo el pliegue y habría que hacer scroll para llegar a la acción
  principal, que es peor que el hueco que veníamos a arreglar. Así que en 1080p
  y en portátiles se sigue a pantalla completa, con la barra pegada abajo y el
  contenido haciendo scroll por dentro; la tarjeta entra solo cuando de verdad
  cabe entera.

  Si algún día crece la portada, hay que volver a medirla y subir este número.
*/
@media (min-width: 620px) and (min-height: 1200px) {
  html { height: auto; }
  body {
    height: auto;
    /* 100vh y no 100%: con el html en altura automática, un porcentaje no
       tiene contra qué resolverse y el body se queda del alto del contenido,
       con lo que no sobra espacio y el centrado vertical no llega a ocurrir. */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: var(--t6) var(--t4);
    background: var(--azalera-sakona);
  }
  #app {
    min-height: 0;
    margin: auto 0;
    width: 100%;
    background: var(--atzeko);
    border: 1px solid var(--marra);
    border-radius: var(--biribila-l);
    overflow: hidden;
  }
  .edukia { flex: none; overflow: visible; }
  .behekoa {
    position: static;
    background: var(--atzeko);
  }
  /* Sin barra pegada abajo, la sesión terminada no necesita tanto aire. */
  .laburpena { padding-top: var(--t6); }
}

/* Móviles bajos (SE, minis): quitar aire para que el enunciado y los botones
   quepan sin scroll. Es la postura real de uso, no un caso raro. */
@media (max-height: 700px) {
  .goiburua { padding-top: var(--t3); }
  .galdera { margin-bottom: var(--t5); }
  .aurrerapena { margin-bottom: var(--t5); }
  .galdera-euskaraz { font-size: var(--neurria-xl); }
  .botoia { min-height: 52px; }
  .aukerak .botoia { min-height: 56px; }
  .botoia.handia { min-height: 62px; }
}

/* Reducir movimiento no es eliminarlo: se quedan opacidad y color, que
   ayudan a entender; se va el desplazamiento (emil-design-eng). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
  }
  .botoia:active { transform: none; }
  .oharra { transform: translate(-50%, 0); }
  .elkarrizketa, .panela { animation: agertu var(--azkar) var(--kurba); }
}