/* ══════════════════════════════════════════════════════════════════
   estilo.css — la constitución visual (D27) hecha hoja de estilo.

   Reglas que mandan aquí:
   · EL ROJO NO EXISTE. Ni un tono rojo en ninguna variable ni regla.
   · Un solo color de acento (bronce) y paleta corta.
   · Tres tamaños tipográficos, y solo tres: --t-grande, --t-base,
     --t-meta. La matemática usa el grande: es el elemento mayor.
   · Interlineado generoso, líneas cortas.
   · Tema oscuro de primera clase: se diseña aquí mismo, no después
     (auto por prefers-color-scheme).
   · D18/§9.1: una fórmula jamás se parte — .carril da a cada bloque
     su propio desplazamiento horizontal.
   · Móvil vertical con botones abajo; el atril de escritorio se mira
     de reojo (grande, centrado, sin nada alrededor).
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* claro */
  --fondo: #faf8f4;
  --tinta: #1f2a24;
  --tinta-suave: #5f6b63;
  --acento: #8a6b2f;          /* bronce; jamás rojo */
  --acento-suave: #f0e7d2;
  --panel: #f2eee4;
  --linea: #ddd6c6;
  /* los dos tonos del par (ver EL COLOR SOLO EMPAREJA) */
  --par-a: #2c5a68;
  --par-b: #8a6b2f;

  /* los tres tamaños — no hay más.
     Medido, no elegido: con n=104, la comprensión empeora de forma
     significativa por debajo de 14 pt y lo mejor son 18. Estábamos en
     1.05rem (~12,6 pt), dentro de la zona mala. El interlineado, en el
     mismo estudio, apenas influyó: manda el tamaño. */
  --t-grande: 1.6rem;
  --t-display: 2.2rem;   /* 17 sep, dale de Pepe: cuarto tamaño SOLO para el
                            número del día (Hoy) y la fuga nombrada (Revisar).
                            Nunca prosa. Se usa con el paso 5 (identidad). */
  --t-base: 1.2rem;      /* ~14,4 pt — fuera de la zona degradada */
  --t-meta: 0.95rem;
  --t-enunciado: 1.12rem;
  /* la barra: el ancla que faltaba */
  --alto-barra: 3.1rem;
  --alto-barra-movil: 5.2rem;   /* dos filas de tres */
  --alto-accion: 5.5rem;        /* la botonera fija */
}

/* Tres estados, no dos: sin elegir manda el aparato; elegido manda la
   eleccion, y en los dos sentidos — por eso la noche se declara otra
   vez fuera del media query y el papel se protege dentro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #16191b;
    --tinta: #e9e5da;
    --tinta-suave: #9aa49b;
    --acento: #d3b26e;
    --acento-suave: #2b2619;
    --panel: #1e2225;
    --linea: #2c3135;
    --par-a: #7ebacb;
    --par-b: #d3b26e;
  }
}

:root[data-theme="dark"] {
  --fondo: #16191b;
  --tinta: #e9e5da;
  --tinta-suave: #9aa49b;
  --acento: #d3b26e;
  --acento-suave: #2b2619;
  --panel: #1e2225;
  --linea: #2c3135;
  --par-a: #7ebacb;
  --par-b: #d3b26e;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: Georgia, "Times New Roman", serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: var(--t-base);
  line-height: 1.7;
}

/* ── la página: una columna corta, con aire ───────────────────────── */
main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 7rem; /* sitio para la botonera de abajo */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  font-size: var(--t-grande);
  font-weight: normal;
  line-height: 1.45;
  margin: 0 0 1rem;
}

p { margin: 0.6rem 0; }

.meta {
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

/* ── la matemática: lo más grande, y jamás partida (D18) ─────────── */
.material {
  /* deliberadamente MENOR que la prosa: el enunciado se barre entero,
     no se lee renglon a renglon */
  font-size: var(--t-enunciado);
  line-height: 1.45;
}

.carril {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0;
  max-width: 100%;
  /* 96 enunciados traen sus lineas separadas — las de una falacia,
     por ejemplo, van una por renglon en el examen. El HTML las
     aplastaba en un parrafo corrido y el argumento se volvia un muro:
     justo lo que impide barrerlo, que es lo unico que este producto
     entrena. `pre-line` respeta el salto y sigue colapsando espacios,
     asi que el TeX no se entera. */
  white-space: pre-line;
}
.carril .katex-display { margin: 0.4rem 0; }

/* Una línea de solución que es sobre todo PROSA (`matematica.js`,
   `_mateProsa`, 18 sep 2026) se compone como prosa: fluye y rompe
   donde haga falta, con las fórmulas en línea. Sin esto la frase
   entera salía en un renglón y hasta 597 px se quedaban fuera de la
   pantalla a 390 px. `pre-line` no vale aquí: el TeX trae saltos que
   en prosa son solo separadores. */
.carril.carril-prosa {
  overflow-x: visible;
  white-space: normal;
  line-height: 1.55;
}
/* Solo la FÓRMULA no se parte. El `<span>` que `bloqueTex` pone
   alrededor de todo NO lleva esta clase: si se la pusiera, la frase
   entera quedaría en `nowrap` y el arreglo no serviría de nada (pasó,
   18 sep 2026: lo vio el control negativo del auditor de píxel). */
.carril.carril-prosa .formula { white-space: nowrap; }
/* Si un carril se desborda, matematica.js le pone tabindex (WCAG
   2.1.1 / regla ACT 0ssw9k): quien solo usa teclado tiene que poder
   llegar al final de una formula ancha. Y si se puede enfocar, el
   foco tiene que verse. */
.carril[tabindex]:focus-visible,
.criterio p[tabindex]:focus-visible,
.criterio .texto[tabindex]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}
.katex-display > .katex { white-space: nowrap; }

.parte { margin: 1.4rem 0; }

/* ── pantallas centradas (llegada, cierre) ────────────────────────── */
.centrada {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  /* El centro óptico, no el geométrico. Con `flex: 1` y `center`, una
     frase queda clavada en la mitad exacta de un móvil de 844 px: deja
     tanto aire arriba que se lee como una página que no cargó. Se
     ancla arriba y se baja lo justo — y el relleno sí manda porque ya
     no compite con un centrado que se lo comía. */
  justify-content: flex-start;
  max-width: 30rem;
  margin: 0 auto;
  padding-top: 22vh;
  gap: 1.7rem;
}
.centrada > * { margin: 0; }

/* ── botones: grandes de tocar, serenos de ver ────────────────────── */
button {
  font: inherit;
  font-size: var(--t-base);
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
}
button.primario {
  background: var(--acento-suave);
  border-color: var(--acento);
}
button.discreto {
  background: none;
  border-color: transparent;
  color: var(--tinta-suave);
}
button.centrado { text-align: center; }
button:disabled { opacity: 0.45; cursor: default; }

.botonera-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

/* la botonera del fondo: en el bolsillo los pulgares viven abajo */
.botonera {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 0.9rem 1.2rem calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}
.botonera button { flex: 1; max-width: 22rem; text-align: center; }

/* La accion de UNA FILA de una lista. `.botonera` es fija al fondo —
   la accion de la pantalla, y solo hay una— asi que usarla dentro de
   cada fila apilaba todos los botones en el mismo sitio. No se veia
   porque la lista siempre estaba vacia. */
.acciones {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.acciones button { flex: 0 1 auto; }

/* En una LISTA el enunciado se reconoce, no se lee entero: tres
   lineas y el resto se calla. La pregunta completa vive en su
   pantalla. */
.criterio > p:not(.meta) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* `overflow: hidden` a secas pisaba el carril de abajo (más
     específico) y una fórmula larga en un criterio se cortaba por el
     borde a 390 px: 9 preguntas reales (auditor de píxel, bloque 1).
     El recorte vertical es lo que hace el clamp; el horizontal desliza. */
  overflow-x: auto;
  overflow-y: hidden;
}

/* ── el atril: solo la pregunta y un botón (más el de dejarla) ────── */
.atril {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) {
  /* en el escritorio se mira de reojo: aún más grande y con más aire */
  .atril .material { font-size: calc(var(--t-grande) * 1.15); }
}

/* El atril centra en vertical porque, cuando el enunciado es lo ÚNICO que
   hay, centrarlo es lo correcto. Pero en la puerta ya hecha debajo van el
   aviso, el botón de revisar y el de compartir: el atril seguía estirándose
   y abría dos huecos enormes que empujaban el enunciado fuera del pliegue —
   justo lo que el auditor de composición existe para impedir. Con contenido
   debajo, el atril deja de estirarse. (Visto en pantalla el 17 sep.) */
.atril-compacto {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* ── opciones de un drill / líneas de una caza ────────────────────── */
.opciones {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.linea-caza {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
}
.linea-caza.senalada { border-color: var(--acento); background: var(--acento-suave); }

/* ── la revelación: el porqué siempre pegado al qué ───────────────── */
.revelado { margin: 1.2rem 0; }
.tell {
  border-left: 3px solid var(--acento);
  background: var(--panel);
  padding: 0.7rem 1rem;
  margin: 1.2rem 0;
}
.tell .meta { display: block; margin-bottom: 0.2rem; }

/* ── el aviso de D21: visible, sereno, sin drama ──────────────────── */
.aviso {
  border-left: 3px solid var(--acento);
  background: var(--panel);
  color: var(--tinta-suave);
  padding: 0.7rem 1rem;
  font-size: var(--t-meta);
  margin: 1rem 0;
}

/* ── la revisión en tres columnas ─────────────────────────────────── */
.tres-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: start;
}
@media (min-width: 900px) {
  main.ancha { max-width: 72rem; }
  .tres-columnas { grid-template-columns: 1fr 2fr 1fr; }
  .col.pegajosa { position: sticky; top: 1rem; }
}
.col h2 { font-size: var(--t-base); color: var(--tinta-suave); }

.criterio {
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
}
/* D18 en las tarjetas: una formula irrompible (una raiz larga, un
   parentesis gigante) no se parte — se desliza. Sin esto, 12 preguntas
   reales se cortaban por el borde en movil (auditor de pixel). */
.criterio p, .criterio .texto { overflow-x: auto; overflow-y: hidden; }
.criterio .decidir { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.criterio .decidir button { flex: 1; text-align: center; font-size: var(--t-meta); }
.criterio button.elegida { border-color: var(--acento); background: var(--acento-suave); }

/* La marca en el margen (Revisar, paso 2): la misma convención de un
   guideline de NESA — el tick a la derecha, el tachón sobre la línea —
   no un color de veredicto. Movimiento representacional (marca un
   hecho ya ocurrido), no decorativo: por eso se anima. */
.criterio-margen .fila-marca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.criterio-margen .fila-marca > p { flex: 1; transition: opacity 0.2s; }
.criterio-margen .fila-marca.tachada > p { opacity: 0.6; text-decoration: line-through; }
.marca-margen {
  font-family: var(--fuente-mono, monospace);
  font-size: var(--t-base);
  min-width: 1.4rem;
  text-align: right;
  flex-shrink: 0;
}
.marca-margen.sello { animation: sello-marca 0.28s ease-out; }
@keyframes sello-marca {
  0% { transform: scale(2) rotate(-14deg); opacity: 0; }
  60% { transform: scale(0.9) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.criterio-margen .fila-marca.tachada > p {
  animation: tachar-linea 0.3s ease-out;
}
@keyframes tachar-linea {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .marca-margen.sello, .criterio-margen .fila-marca.tachada > p { animation: none; }
}

/* El rango que se estrecha (Tu patrón): el mismo número, antes y
   después, para que se vea moverse — no solo leerse. */
.rango-barra {
  position: relative;
  height: 0.5rem;
  background: var(--linea);
  border-radius: 0.25rem;
  margin: 0.5rem 0 0.3rem;
  overflow: hidden;
}
.rango-barra .antes, .rango-barra .ahora {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 0.25rem;
}
.rango-barra .antes {
  background: transparent;
  border: 1px dashed var(--tinta-suave);
  transition: none;
}
.rango-barra .ahora {
  background: var(--acento);
  transition: left 0.7s ease-in-out, width 0.7s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .rango-barra .ahora { transition: none; }
}

details { margin-top: 0.6rem; }
details summary {
  cursor: pointer;
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

.hoja img {
  max-width: 100%;
  border: 1px solid var(--linea);
  border-radius: 0.4rem;
  display: block;
}

/* ── la caída: material, nunca veredicto ──────────────────────────── */
.nombre-error {
  font-size: var(--t-grande);
  border-left: 3px solid var(--acento);
  padding-left: 1rem;
  margin: 1.2rem 0;
  animation: fuga-llega 0.4s ease-out;
}
@keyframes fuga-llega {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nombre-error { animation: none; }
}
.regla-linea { margin: 1rem 0; }
.regla-linea .meta { display: block; }

/* ══ EL CASO ═══════════════════════════════════════════════════════
   El duelo: dos tarjetas apiladas en el móvil, lado a lado en
   escritorio. El acento hace UN trabajo: iluminar la línea donde las
   rutas se separan (.divergente). Nada de rojo, nada de verde, nada
   de celebración: el acierto se ve en que la palabra queda fijada. */

.careo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.2rem 0;
}
/* una celda de rejilla tiene min-width:auto por defecto y una fórmula
   ancha REVENTARÍA la página entera; con min-width:0 el desplazamiento
   se queda dentro del carril, que es donde debe vivir (D18) */
.careo > * { min-width: 0; }
.linea-solucion .carril { min-width: 0; }
@media (min-width: 900px) {
  .careo { grid-template-columns: 1fr 1fr; }
}

.tarjeta-careo {
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--panel);
}
.tarjeta-careo > .meta { display: block; margin-bottom: 0.4rem; }

/* la línea donde las rutas se separan: el único trabajo del acento */
.divergente {
  border-left: 3px solid var(--acento);
  padding-left: 0.8rem;
  margin: 0.6rem 0;
}

.centrada-texto { text-align: center; margin-top: 1.4rem; }

/* beat 3: las palabras tocables y el presupuesto de huecos */
.huecos {
  font-size: var(--t-grande);
  letter-spacing: 0.3rem;
  color: var(--acento);
  margin: 0.6rem 0 0.2rem;
}
.palabras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.8rem 0;
}
button.palabra {
  padding: 0.45rem 0.8rem;
  font-size: var(--t-base);
}
button.palabra.fijada {
  border-color: var(--acento);
  background: var(--acento-suave);
  font-weight: bold;
}
button.palabra.atenuada { opacity: 0.35; }

/* beat 4: los pasos colapsados y el rival al margen */
.paso-colapsado {
  border: 1px dashed var(--linea);
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.6rem 0;
  cursor: pointer;
  color: var(--tinta-suave);
}
.paso-abierto {
  border-left: 3px solid var(--linea);
  padding: 0.2rem 0 0.2rem 1rem;
  margin: 0.6rem 0;
}
.prompt-paso {
  border: 1px solid var(--acento);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rival-margen {
  border-left: 3px solid var(--linea);
  padding-left: 0.8rem;
  margin: 1rem 0;
  transition: border-color 0.3s;
}
.rival-margen.parpadeo { border-color: var(--acento); }

/* beat 5: la zona editable — texto del enunciado, no matemática */
textarea.mutacion {
  font: inherit;
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  width: 100%;
  min-height: 8rem;
  margin: 0.8rem 0;
  line-height: 1.6;
}

/* momento 1: el desglose y la solución numerada */
.paga {
  border-left: 3px solid var(--linea);
  padding: 0.4rem 0.9rem;
  margin: 0.5rem 0;
}
.linea-solucion {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.linea-solucion .num { min-width: 1.2rem; text-align: right; }
.linea-solucion .carril { flex: 1; }

.plan-paso { margin: 0.3rem 0; }

/* la escalera de la entrada (D25): su jugada y sus tres líneas, con
   letra del alumno — misma voz que la llave */
input.linea-propia {
  font: inherit;
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  width: 100%;
  margin: 0.4rem 0;
}

/* momento 7: la llave, con letra del alumno */
input.llave {
  font: inherit;
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  width: 100%;
  margin: 0.4rem 0;
}

/* ── formularios (la cuenta, al final de la puerta) ───────────────── */
input[type="email"], input[type="password"] {
  font: inherit;
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  width: 100%;
  margin: 0.4rem 0;
}

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

/* ══ EL MAPA (momento 6) ═══════════════════════════════════════════
   Casi todo gris al principio y el gris NUNCA es un reproche: es la
   promesa de "aún sin medir". Cuatro estados, cero rojo. El acento
   hace un solo trabajo: lo probado en frío. */

.cuenta-atras { font-size: var(--t-grande); margin: 0.4rem 0 1rem; }

.rango { display: flex; flex-direction: column; margin: 1rem 0 0.4rem; }
.rango .cifra { font-size: calc(var(--t-grande) * 1.6); line-height: 1.2; }

.grupo-mapa { margin: 1.4rem 0 0; }
.grupo-mapa h2 { margin-bottom: 0.5rem; }

.casillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.casilla {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* el número se va: no nombra nada (la taxonomía no se enseña) y
     compite con la única señal que sí informa, que es el color.
     Sin él la rejilla deja de ser una lista y pasa a ser un CAMPO:
     cuánto hay medido y cuánto no, de un vistazo. Y cabe entera. */
  font-size: 0;
  border: 1px solid var(--linea);
  color: transparent;
  background: transparent;        /* unmeasured: gris, sin reproche */
}
.casilla.seen { background: var(--panel); }
.casilla.holding {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--tinta);
}
.casilla.cold {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--fondo);
}
.casilla.mini { width: 1rem; height: 1rem; border-radius: 0.22rem; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.4rem 0;
}
.leyenda-item { display: flex; align-items: center; gap: 0.4rem; }

/* ══ LA SALA (momento 5) ═══════════════════════════════════════════
   El reloj del examen SÍ se ve aquí — el único sitio. El reloj de
   ajedrez vive en cada pregunta; la activa se señala con el acento. */

.cabecera-sala {
  position: sticky;
  top: 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding: 0.5rem 0;
  text-align: center;
  z-index: 2;
}
.reloj {
  font-size: var(--t-grande);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.reloj.grande { font-size: calc(var(--t-grande) * 2); }

.pregunta-sala {
  border: 1px solid var(--linea);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
}
.pregunta-sala.activa { border-color: var(--acento); background: var(--panel); }
.cabecera-q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.mando-q { display: flex; gap: 0.8rem; margin-top: 0.8rem; }
.mando-q button { font-size: var(--t-meta); }

.opciones-mcq { margin-top: 0.6rem; }
.opcion-mcq {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.opcion-mcq .carril { flex: 1; min-width: 0; }

/* ── Section I cuando las opciones SON dibujos (bloque 6) ─────────────
   En MEC-12 las cuatro opciones son gráficas, y la tarea del ítem es
   COMPARARLAS. Apiladas en una columna no caben con el enunciado y el
   alumno tiene que hacer scroll para comparar — es decir, la pantalla
   rompe justo lo que la pregunta pide. Las figuras se emiten a 150 px de
   ancho, así que dos caben de sobra a 390 px: rejilla de dos columnas.
   (Hallazgo de la sesión de diseño sobre el código real, 17 sep.) */
.opciones-dibujo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.6rem;
}

/* `baseline` alinea por la última línea de texto: con una figura de 118 px
   la letra cae al pie de su propio dibujo y se lee como si fuera de la
   opción de abajo. Con dibujos, la letra va arriba. */
.opciones-dibujo .opcion-mcq { align-items: flex-start; }
.opciones-dibujo .figura { margin: 0; }
.opcion-mcq .katex-display { margin: 0.15rem 0; }

/* las letras de Section I */
.fila-letras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0.7rem 0;
}
.letras { display: flex; gap: 0.5rem; }
button.letra { padding: 0.55rem 0.95rem; text-align: center; }
button.letra.elegida { border-color: var(--acento); background: var(--acento-suave); }

/* la reconstrucción de la ruta (modo limpio) */
button.casilla-num { padding: 0.5rem 0.8rem; font-size: var(--t-meta); }
.ruta-lista { margin: 1rem 0; }
.ruta-paso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0.4rem 0;
}
.ruta-paso button { font-size: var(--t-meta); }
.ruta-paso button.elegida { color: var(--acento); }

/* ══ LA AUTOPSIA ═══════════════════════════════════════════════════
   La línea de tiempo: bloques por pregunta, anchura = tiempo. Las
   fugas se VEN. Lo pálido es eligiendo. Nada de rojo. */

.linea-tiempo {
  display: flex;
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid var(--linea);
  border-radius: 0.45rem;
  overflow: hidden;
  margin: 0.8rem 0;
}
.tramo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-meta);
  color: var(--tinta);
  background: var(--panel);
  border-right: 1px solid var(--linea);
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  flex-basis: 0;
}
.tramo:last-child { border-right: none; }
.tramo.eligiendo { background: transparent; color: var(--tinta-suave); }
.tramo.dejada { border-bottom: 3px solid var(--acento); }

.conclusion {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
}
.titulo-conclusion { font-size: var(--t-base); margin: 0 0 0.3rem; }

/* el enlace discreto (el progreso se consulta, no se empuja) */
.enlaces-discretos {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  margin-top: 2rem;
}
.enlaces-discretos a {
  color: var(--tinta-suave);
  font-size: var(--t-meta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}

/* ── los papeles (términos/privacidad) y su pie discreto ─────────── */
.legal h2 {
  font-size: var(--t-base);
  font-weight: bold;
  margin: 1.6rem 0 0.4rem;
}
.legal ul { margin: 0.4rem 0 0.8rem; padding-left: 1.3rem; }
.legal li { margin: 0.35rem 0; }
.legal a { color: var(--acento); }
.legal .borrador {
  margin-top: 2.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--linea);
}

.pie-legal {
  max-width: 46rem;
  margin: -5rem auto 0;   /* dentro del aire que main ya reserva abajo */
  /* y aire propio debajo: la puerta lleva botonera fija (bloque 5) y
     sin esto el pie quedaba escondido detras de ella al final del
     desplazamiento */
  padding: 0 1.2rem calc(6rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--t-meta);
}
.pie-legal a {
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}

.legal-registro { margin-top: 1.2rem; text-align: center; }
.legal-registro a { color: var(--tinta-suave); }

/* ── el borrado de cuenta: una decisión, explícita ───────────────── */
.confirmar-borrado {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  text-align: left;
  margin: 1.2rem auto;
  max-width: 26rem;
}


/* ── el modo vistazo: un indice sobrio, mismo aire que el resto ──── */
.vistazo { padding-top: 2rem; }
.vistazo-nota {
  color: var(--tinta-suave);
  font-size: var(--t-meta);
  margin-bottom: 2rem;
}
.vistazo-lista { list-style: none; padding: 0; margin: 0; }
.vistazo-lista li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linea);
}
.vistazo-lista li:last-child { border-bottom: 0; }
.vistazo-lista a {
  font-size: var(--t-base);
  /* el azul del navegador no es de esta casa: paleta corta y un solo
     acento (D27). El enlace se marca con el subrayado, no con color. */
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--acento);
}
.vistazo-lista a:hover { border-bottom-width: 2px; }
.vistazo-que {
  display: block;
  color: var(--tinta-suave);
  font-size: var(--t-meta);
  margin-top: 0.25rem;
}


/* ── el muro blando (la puerta abierta, D34) ────────────────────────
   Aparece en el espejo, DESPUES del valor, y solo para quien todavia
   no es nadie. Blando: se puede aplazar, y el escape se llama
   "later". Nada aqui grita: el silencio es el lujo (D27). */
.muro {
  margin: 2.2rem auto 0;
  max-width: 26rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: var(--panel);
}
.muro h2 { margin: 0 0 0.4rem; font-size: var(--t-grande); }
.muro .meta { margin: 0; }
.muro-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.1rem; }
.muro-form input {
  font: inherit;
  font-size: var(--t-base);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  background: var(--fondo);
  color: var(--tinta);
  min-height: 2.75rem;          /* WCAG 2.5.8: 24px de destino minimo */
}
.muro-form input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-color: var(--acento);
}
.muro-form .pista { margin: -0.3rem 0 0; }
.muro-form .aviso:empty { display: none; }
.muro-form .aviso { margin: 0; color: var(--acento); }
.muro .botonera { margin-top: 0.3rem; }


/* ═══ LA BARRA — el ancla ══════════════════════════════════════════
   Una pantalla con una frase flotando en el centro no se lee como
   silencio: se lee como una pagina que no cargo. La contencion
   necesita algo a lo que agarrarse, y ademas resuelve tres cosas
   medidas: la navegacion a la vista se usa el 86 % de las veces
   contra el 57 % escondida, el 95 % de los sitios no marca donde
   estas, y WCAG 2.2 SC 3.2.3 exige el mismo orden en cada pantalla. */
.marca-barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: var(--alto-barra);
  padding: 0.4rem 1.1rem;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.marca {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.marca:hover { text-decoration: none; }
/* La cuenta no es una seccion: no entra en la barra de secciones (el
   orden identico en cada pantalla es SC 3.2.3) ni rompe la rejilla de
   tres en movil, donde se llega por el pie de «Where you stand». */
.marca-cuenta {
  margin-left: 0.9rem;
  font-size: var(--t-meta);
  color: var(--tinta-suave);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.marca-cuenta:hover { color: var(--tinta); }
.separador { color: var(--tinta-suave); }

/* los tres botones del aspecto */
.aspecto {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0 1.6rem;
  flex-wrap: wrap;
}
.aspecto button {
  flex: 1 1 6rem;
  min-height: 2.75rem;
}
.aspecto button.aqui {
  border-color: var(--acento);
  background: var(--acento-suave);
}
.dato {
  font-size: var(--t-base);
  margin: 0.2rem 0 1.6rem;
}
.cuenta-salidas { margin-top: 2.4rem; }
.cuenta-salidas form { margin: 0; }
.cuenta-salidas form button { width: 100%; }

/* ── el cierre de un par ───────────────────────────────────────────
   Los dos lados llevan los dos tonos del par (D30): el color empareja
   la etiqueta con su entrada a traves de una frontera, y no hace nada
   mas. Degrada al negro del examen — lo que separa los lados es la
   barra de la izquierda y el orden, no el tono. */
.cierre-titulo {
  font-size: var(--t-grande);
  line-height: 1.35;
  margin: 0.2rem 0 0.6rem;
}
.lado {
  border-left: 3px solid var(--linea);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 1.1rem 0;
}
.lado .marca-op { display: block; margin-bottom: 0.15rem; }
.lado p { margin: 0; }
.lado.par-a { border-left-color: var(--par-a); }
.lado.par-a .marca-op { color: var(--par-a); }
.lado.par-b { border-left-color: var(--par-b); }
.lado.par-b .marca-op { color: var(--par-b); }

/* la fila del apetito: tres botones pequenos, uno ya puesto — es una
   eleccion ofrecida, no un tramite. Reusa .aspecto en aspecto y
   tamano; lo que cambia es que aqui vive dentro de una columna
   centrada. */
.apetito-titulo { margin-bottom: 0.2rem; }
.apetito {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.6rem;
}
.apetito button {
  flex: 1 1 5rem;
  min-height: 2.75rem;
  font-size: var(--t-meta);
}
.apetito button.aqui {
  border-color: var(--acento);
  background: var(--acento-suave);
}
.secciones {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: auto;
}
.secciones::-webkit-scrollbar { display: none; }
.seccion {
  font-size: var(--t-meta);
  color: var(--tinta-suave);
  text-decoration: none;
  padding: 0.55rem 0.7rem;      /* WCAG 2.5.8: >= 24px de destino */
  border-radius: 2px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.seccion:hover { color: var(--tinta); text-decoration: none; }
/* donde estas. El fallo de navegacion mas repetido que encontre. */
.seccion.aqui {
  color: var(--tinta);
  border-bottom-color: var(--acento);
}
.marca-barra a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* En movil la barra baja al pie y se queda. El 97 % de los de 14-17
   tiene movil y el 23 % no tiene ni portatil en casa: el movil no es
   la version reducida, es la principal. */
@media (max-width: 560px) {
  .marca-barra {
    top: auto;
    bottom: 0;
    position: fixed;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-bottom: 0;
    border-top: 1px solid var(--linea);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .marca, .marca-cuenta { display: none; }
  /* Seis etiquetas no caben en una fila de 390 px: «Where you stand»
     se cortaba. Las alternativas eran esconder parte de la barra
     (deslizarla o meterla en un «More») y esconder cuesta caro — a la
     vista la navegacion se usa el 86 % de las veces contra el 57 %
     escondida. Asi que se parte en dos filas y **no se esconde nada**.
     Cuesta unos 40 px de alto, y la regla del pliegue sigue pasando. */
  .secciones {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: visible;
    /* el gap heredado del escritorio eran 2,4 px: tres items de
       33,333 % mas dos huecos sumaban 395 en una pantalla de 390 y la
       fila de tres se partia en dos. Aqui no hay hueco: separan el
       relleno y la linea de arriba. */
    gap: 0;
  }
  .seccion {
    box-sizing: border-box;      /* sin esto el relleno rompe el tercio */
    /* y sin esto tampoco: los items de flex traen `min-width: auto`,
       asi que una etiqueta larga («Where you stand») se niega a
       encoger y rompe la fila de tres en dos. */
    min-width: 0;
    flex: 0 0 33.333%;
    text-align: center;
    font-size: 0.78rem;
    padding: 0.6rem 0.15rem;
    border-bottom: 0;
    border-top: 2px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* En dos filas, una linea EN EL BORDE de la celda miente: la de la
     segunda fila se lee como si marcara el item de arriba. Se vio en
     tres de las seis secciones. Aqui la marca va DENTRO de la celda
     —fondo y peso— y por tanto no se puede atribuir a la vecina.
     Degrada en blanco y negro: queda el peso. */
    /* El atril se centra en vertical, y en el movil eso deja la pregunta
     empezando a un tercio de la pantalla: el ojo aterriza en nada. En
     el escritorio se mira de reojo y el centrado sirve; aqui se lee de
     arriba abajo con el pulgar, asi que se ancla arriba y el hueco
     que sobre cae al fondo, donde la barra ya lo sujeta. */
  .atril { justify-content: flex-start; }
  .seccion.aqui {
    border-top-color: transparent;
    background: var(--acento-suave);
    color: var(--tinta);
    font-weight: 600;
  }
  /* que la barra no tape el final del trabajo. Iba en `body` y el
     contenido vive en <main>, que no lo heredaba: el boton de
     continuar quedaba medio tapado. */
  /* Dos capas fijas se disputaban el fondo: la barra (z-index 10) y
     la botonera. La barra ganaba y el boton de continuar quedaba
     ENTERO debajo — invisible, y con el el bucle entero. La accion
     sube por encima de la barra.

     Pero la barra solo esta abajo cuando LLEVA SECCIONES: en la
     puerta, que es la primera pantalla que ve un desconocido, la
     cabecera es estatica y no ocupa el fondo. Subir la accion alli la
     dejaba flotando en mitad del texto — segundo fallo del mismo
     arreglo. Asi que la elevacion y la reserva van condicionadas a que
     la barra exista de verdad ahi abajo. */
  .botonera { z-index: 9; }

  body:has(.secciones) .botonera {
    bottom: calc(var(--alto-barra-movil) + env(safe-area-inset-bottom));
    padding-bottom: 0.9rem;
  }
  body:has(.secciones) #pantalla {
    padding-bottom: calc(var(--alto-barra-movil) + 1.2rem
                         + env(safe-area-inset-bottom));
  }
  body:has(.secciones) #pantalla:has(.botonera) {
    padding-bottom: calc(var(--alto-barra-movil) + var(--alto-accion) + 1.2rem
                         + env(safe-area-inset-bottom));
  }
  /* sin barra abajo, la accion se apoya en el fondo y basta con
     reservarle su propio alto */
  body:not(:has(.secciones)) #pantalla:has(.botonera) {
    padding-bottom: calc(var(--alto-accion) + 1.2rem
                         + env(safe-area-inset-bottom));
  }
}

/* En movil, la cabecera con solo la marca (visitante sin secciones)
   no debe fijarse abajo: no hay nada que fijar. */
@media (max-width: 560px) {
  .marca-barra:not(:has(.secciones)) {
    position: static;
    flex-direction: row;
    padding: 0.6rem 1.1rem;
    border-top: 0;
    border-bottom: 1px solid var(--linea);
  }
  .marca-barra:not(:has(.secciones)) .marca { display: block; }
}


/* ═══ EL COLOR SOLO EMPAREJA ═══════════════════════════════════════
   Con 45 alumnos de 16 años, emparejar por color un término con su
   correspondiente en otro sitio de la pantalla bajó las fijaciones de
   la vista de 36,00 a 18,62 — a la mitad — y decidió por dónde entraba
   el ojo. El mecanismo es estrecho: no hace la matemática más fácil,
   abarata cruzar entre dos representaciones separadas.

   Por eso NO hay una clase "color bonito". Hay `.par-a` y `.par-b`, y
   se usan de dos en dos: si un término lleva `.par-a`, algo más en la
   pantalla lleva `.par-a`. Si aparece sola, es ruido — y en cuanto el
   color decora en un sitio, deja de creerse como semántico en todos
   los demás.

   Y degrada: subrayado punteado además del tono, para quien no
   distingue el color y para la impresión en negro (WCAG 1.4.1 — el
   color nunca puede ser lo único que informa). */
.par-a, .par-b {
  text-decoration: underline dotted currentColor 1px;
  text-underline-offset: 0.22em;
}
.par-a { color: var(--par-a); }
.par-b { color: var(--par-b); }
.carril .par-a, .carril .par-b { text-decoration: none; }
/* El punteado degrada el COLOR de un termino: una letra, una palabra.
   Sobre un parrafo entero se lee como un enlace roto, y ademas sobra —
   ahi lo que empareja es la barra de la izquierda y el orden, que ya
   sobreviven en blanco y negro. */
.lado.par-a, .lado.par-b,
.lado .par-a, .lado .par-b,
.lado .marca-op { text-decoration: none; }

/* ── lo pulsable tiene que parecer pulsable ────────────────────────
   Señalizadores débiles: +22 % de tiempo y +25 % de fijaciones, y en
   un caso solo el 50 % miró primero el enlace correcto contra el 86 %
   con señal fuerte. Los jóvenes lo detectan más rápido que los
   mayores, pero no lo toleran mejor: igual prueban y pulsan a ver. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  button:active { transform: none; }
  * { scroll-behavior: auto !important; }
}


/* El contrato de la llegada: cuanto dura y que hace falta. Va debajo
   del reconocimiento y en voz mas baja — primero se decide si esto va
   contigo, despues cuanto te cuesta. */
.centrada .contrato {
  color: var(--tinta-suave);
  font-size: var(--t-base);
  max-width: 26rem;
  margin: 0 auto;
}


/* ── las opciones llevan su letra ──────────────────────────────────
   La revelacion dice «option B» y el alumno nunca habia visto una B.
   Es la gramatica que el examen ya usa (Seccion I va de A a D) y de
   paso resuelve que las tarjetas se lean como opciones y no como
   parrafos sueltos — los senalizadores debiles cuestan un 22 % de
   tiempo y un 25 % mas de fijaciones. */
.opciones { counter-reset: opcion; }
.opciones > button {
  counter-increment: opcion;
  position: relative;
  padding-left: 2.9rem;
  text-align: left;
}
.opciones > button::before {
  content: counter(opcion, upper-alpha);
  position: absolute;
  left: 0.95rem;
  top: 0.85rem;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.opciones > button:hover::before,
.opciones > button:focus-visible::before { color: var(--acento); }


/* ── el rotulo con sus marks, como en el examen ────────────────────
   La asignacion de marks va SIEMPRE en el mismo sitio, a la derecha.
   Es el dato mas importante de la pagina para un candidato y la unica
   pieza de gramatica visual que todos ya leen con fluidez. */
/* la línea para quien llega frío: encima de la pregunta, discreta */
.que-es { margin: 0 0 1rem; max-width: 34rem; }

.rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.rotulo .marks {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}

/* ── el emparejamiento en la revelacion ────────────────────────────
   La letra de la opcion que paga lleva el mismo tono en el texto y en
   el bloque que la explica: dos sitios separados, un color, para que
   el ojo no tenga que buscar cual era. Es la unica operacion donde el
   color esta medido que sirve (fijaciones de 36,00 a 18,62). */
.paga { display: flex; gap: 0.7rem; align-items: flex-start; }
.paga .marca-op {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: var(--t-meta);
  padding-top: 0.28em;
  text-decoration: none;
}
.paga p { margin: 0; }

/* El sello del modo vistazo. Solo existe mirando la app (exige DEBUG),
   y está para que una captura de pantalla diga qué se está ejecutando:
   seis entregas se perdieron porque el navegador enseñaba un servidor
   viejo y nada en la pantalla lo delataba. */
.sello {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  margin: 0;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--acento);
  background: var(--acento-suave);
  border-bottom-left-radius: 4px;
  pointer-events: none;
}

/* la versión impresa (bloque 0): discreta, nunca tapa nada, no es
   una capa fija — vive al final del documento */
.version {
  margin: 2rem 0 0.5rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  opacity: 0.45;
}

/* Hoy y Tu patrón (bloque 4): estados en palabras; el matiz acompaña,
   nunca decide — y nada de rojo */
.fila-estado { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline;
  padding: 0.55rem 0; border-bottom: 1px solid var(--linea); }
.fila-estado .tema { flex: 1 1 8rem; }
.fila-estado .fuga { flex-basis: 100%; }
.estado-on_track { border-left: 3px solid var(--acento); padding-left: 0.6rem; }
.estado-close { border-left: 3px solid var(--linea); padding-left: 0.6rem; }
.estado-not_yet { border-left: 3px dashed var(--tinta-suave); padding-left: 0.6rem; }
.estado-measuring { opacity: 0.75; padding-left: 0.6rem; border-left: 3px dotted var(--linea); }
.accion-hoy h2 { margin: 0.2rem 0 0.4rem; }
.objetivo label { display: block; margin: 0.5rem 0; }
.objetivo .campo { display: block; width: 100%; max-width: 20rem; margin-top: 0.2rem; }

/* ── la figura (bloque 6) ─────────────────────────────────────────────
   Ningún molde dibujaba hasta aquí. De los 100 marks de 2020, 34 llegan
   con figura impresa y 3 son esenciales: el dato o el método están en el
   dibujo y no en el texto.

   Tres reglas, y ninguna es de gusto:

   1. `color: var(--tinta)` es lo único que da color al trazo. El SVG del
      banco solo puede usar `currentColor` (lo impone la lista blanca de
      figura.py), así que el tema claro/oscuro lo decide AQUÍ, una vez, y
      una figura no puede desaparecer sobre su fondo.
   2. La regla de Byrne / Rougeux (docs/LENGUAJE_GRAFICO.md §9) — la
      figura no sale de la pantalla mientras se lee el argumento que la
      referencia. Lo que la cumple es que la figura viva DENTRO del mismo
      bloque que el enunciado, pegada a él, y que no sea más alta de lo
      que ALTO_MAXIMO permite. El `break-inside: avoid` de abajo NO
      interviene en eso: solo actúa al imprimir y en multicolumna. Se
      conserva por la impresión, no por el scroll — corregido el 17 sep
      tras la revisión de diseño, que tenía razón.
   3. El dibujo NUNCA es más grande que la prosa que lo explica. Un SVG
      con `width` en unidades de viewBox se desborda a 390 px si no se le
      pone techo: `max-width: 100%` + `height: auto` es lo que impide que
      el auditor de píxel encuentre un desbordamiento sin carril. */
.figura {
  margin: 0.6rem 0;
  color: var(--tinta);
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}

.figura svg {
  max-width: 100%;
  height: auto;
  /* El trazo hereda el color del texto: si un día alguien mete un
     `stroke` a mano en el banco, la lista blanca lo rechaza antes. */
  overflow: visible;
}

/* Las opciones de Section I pueden SER dibujos (constelación MEC-12: las
   cuatro opciones son gráficas sin escala). Ahí la figura va dentro del
   botón de la opción y no puede empujarlo: se le da un techo más bajo. */
.opcion .figura { margin: 0.2rem 0; }
.opcion .figura svg { max-height: 140px; }