/* Presentación interactiva: collage editorial sobre papel, como el reproductor del curso de Litigación.
   Cada pantalla entra sin desplazamiento a 1366 × 768 y a 390 × 844; los límites de texto de cada tipo (GUIA.md) lo aseguran
   y pantallas.py lo mide. Con «Letra más grande» la pantalla puede desplazarse por dentro.

   Color: papel y tinta, la pizarra y el coral de la risografía en el collage y en las piezas de acento, y el color de la
   institución (marca.json) para el estado: pantalla actual, foco, lápiz y puntos que se encienden.
   Movimiento: una curva y tres duraciones (160, 280 y 520 ms). La pantalla entra deslizándose 28 px y sus elementos suben
   por turnos; los trazos se dibujan; los puntos se encienden con un anillo. Con «reducir movimiento», solo fundidos breves. */

@font-face { font-family: "Urbanist"; src: url(fuentes/urbanist-latin-wght-normal.woff2?v=96bc39c4) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url(fuentes/urbanist-latin-ext-wght-normal.woff2?v=d2c4d880) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url(fuentes/sourceserif4-normal-400_700.woff2?v=4c4d14ec) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fuentes/sourceserif4-italic-400_700.woff2?v=7be705ca) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  /* la marca (construye_presentacion.py los reescribe desde marca.json) */
  --papel: #f4eee4; --papel-claro: #fbf8f2; --papel-2: #ebe3d6; --tinta: #1e1011; --tinta-2: #4d4244; --gris: #6f6466; --regla: #ddd2c4;
  --acento: #da291c; --acento-tinta: #b51f14; --bien: #1f6b4f; --mal: #b51f14;
  /* las tintas del collage */
  --pizarra: #33415a; --coral: #ef7a62; --coral-suave: #f8d9cf; --resaltador: #ffe27a; --resaltador-suave: #fff3c4;
  --bien-suave: #e2efe7; --mal-suave: #fbe6e2;

  --display: Urbanist, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --texto: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --t-cuerpo: 1.3125rem; --t-entrada: 1.4375rem; --t-h1: 2.875rem; --t-h2: 1.5rem;
  --radio: 16px; --radio-chico: 12px;
  --sombra: 0 1px 0 var(--regla), 0 10px 26px rgba(51, 65, 90, .09);
  --curva: cubic-bezier(.2, .7, .2, 1); --d1: 160ms; --d2: 280ms; --d3: 520ms;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --trama-clara: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.7px);
  color-scheme: light;
}
/* «Letra más grande» agranda la raíz: crecen todos los textos medidos en rem */
html.texto-grande { font-size: 115%; }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; background: var(--papel) var(--grano); color: var(--tinta); font-family: var(--texto); font-size: var(--t-cuerpo); line-height: 1.5; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); color: var(--tinta); line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }
a { color: var(--tinta); text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.solo-lector, .ejes-celda { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--papel-claro); padding: 10px 18px; border-radius: 999px; font-family: var(--display); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.cargando { padding: 24px; font-family: Georgia, serif; color: var(--tinta-2); }
.solo-telefono, .solo-telefono-bloque { display: none !important; }

/* íconos de Phosphor a dos tonos */
.icono { display: inline-block; width: 1em; height: 1em; flex: none; line-height: 0; }
.icono svg { width: 100%; height: 100%; display: block; }
.icono .duo { fill: var(--duo, var(--coral)); }
.icono.arriba { transform: rotate(90deg); }
.icono.abajo { transform: rotate(-90deg); }

/* ---------- armazón ---------- */
#presentacion { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.cabecera { position: relative; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px max(20px, env(safe-area-inset-right, 0px)) 8px max(20px, env(safe-area-inset-left, 0px));
  background: rgba(251, 248, 242, .9); border-bottom: 1px solid var(--regla); font-family: var(--display); }
.emblema { width: 32px; height: 32px; object-fit: contain; flex: none; }
.cabecera .donde { flex: 1; min-width: 0; margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera .donde b { color: var(--tinta); font-weight: 700; }
.cabecera .cuenta { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cuenta .corto { display: none; }
.boton-redondo { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--regla);
  background: var(--papel-claro); font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--tinta); cursor: pointer; text-decoration: none; transition: border-color var(--d1) var(--curva), background-color var(--d1) var(--curva); }
.boton-redondo:hover { border-color: var(--tinta-2); }
.boton-redondo .icono { font-size: 1.375rem; }
.escena { position: relative; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.escena:focus { outline: none; }

.navegacion { position: relative; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 80px;
  padding: 10px max(20px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: rgba(251, 248, 242, .92); border-top: 1px solid var(--regla); font-family: var(--display); }
.navegacion .anterior { border-color: transparent; background: transparent; color: var(--tinta-2); }
.navegacion .anterior:hover { border-color: var(--regla); }
.navegacion .anterior[disabled] { opacity: .4; cursor: default; }
.navegacion .continuar { min-height: 54px; padding: 0 28px 0 30px; font-size: 1.1875rem; background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); --duo: var(--coral); }
.navegacion .continuar:hover { background: #3a2a2c; }
.navegacion .continuar:active { transform: scale(.97); }
.navegacion .continuar[aria-disabled="true"] { background: var(--papel-2); border-color: var(--regla); color: var(--gris); cursor: not-allowed; --duo: var(--regla); }
.avance { min-width: 0; }
.segmentos { display: flex; gap: 4px; width: 100%; max-width: 620px; margin: 0 auto; }
.segmentos i { flex: 1; height: 6px; border-radius: 3px; background: var(--regla); transition: background-color var(--d2) var(--curva); }
.segmentos i.hecho { background: var(--pizarra); }
.segmentos i.actual { background: var(--acento); }
.barra-avance { display: none; position: relative; height: 6px; border-radius: 3px; background: var(--regla); overflow: hidden; }
.barra-avance i { position: absolute; inset: 0; border-radius: 3px; background: var(--acento); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform var(--d3) var(--curva); }
.continuar-caja { position: relative; display: flex; justify-content: flex-end; }
.aviso-nav { position: absolute; right: 0; bottom: calc(100% + 12px); width: max-content; max-width: min(420px, 80vw); margin: 0; background: var(--tinta); color: var(--papel-claro);
  border-radius: 12px; padding: 10px 16px; font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.35; box-shadow: 0 10px 28px rgba(30, 16, 17, .25); }
.aviso-nav::after { content: ""; position: absolute; right: 36px; top: 100%; border: 8px solid transparent; border-top-color: var(--tinta); }

/* ajustes de lectura */
.ajustes { position: absolute; right: 16px; top: calc(100% + 8px); z-index: 40; width: min(340px, calc(100vw - 32px)); background: var(--papel-claro); border: 1px solid var(--regla);
  border-radius: var(--radio); padding: 20px; box-shadow: 0 14px 40px rgba(30, 16, 17, .16); }
.ajustes h2 { font-size: 1.125rem; margin-bottom: 10px; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; cursor: pointer; }
.interruptor + .interruptor { border-top: 1px solid var(--regla); }
.interruptor input { appearance: none; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--gris); position: relative; cursor: pointer; transition: background var(--d2) var(--curva); margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--papel-claro); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--d2) var(--curva); }
.interruptor input:checked { background: var(--tinta); }
.interruptor input:checked::after { transform: translateX(20px); }

/* el punto: vacío, lleno y recién encendido (con un anillo que se expande una vez) */
.punto { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gris); background: var(--papel-claro); vertical-align: middle; }
.punto.lleno { border-color: var(--acento); background: var(--acento); }
.punto.recien::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--acento); animation: anillo 700ms var(--curva) forwards; }
@keyframes anillo { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }

/* ---------- pantallas ---------- */
.pantalla { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.pantalla.dividida { grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); }
.pantalla.dividida.visual-izquierda { grid-template-columns: minmax(320px, 40%) minmax(0, 1fr); }
.pantalla.dividida.visual-izquierda .visual { order: -1; }
.contenido { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(20px, 4vh, 44px) clamp(24px, 4.6vw, 64px); }
.pantalla.dividida .contenido { max-width: 860px; }
.pantalla.centrada .contenido { width: 100%; max-width: 1200px; margin: 0 auto; }
.contenido > h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.018em; line-height: 1.05; }
.contenido > h1:focus { outline: none; }
.contenido h2 { font-size: var(--t-h2); font-weight: 800; }
.entrada { font-size: var(--t-entrada); line-height: 1.45; color: var(--tinta-2); max-width: 46rem; margin: 0; }
.texto p { max-width: 46rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.visual { position: relative; overflow: hidden; min-height: 240px; }
.visual .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* entrada de cada pantalla */
.pantalla.entra-adelante { animation: entraAdelante var(--d2) var(--curva) both; }
.pantalla.entra-atras { animation: entraAtras var(--d2) var(--curva) both; }
@keyframes entraAdelante { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes entraAtras { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.entra-adelante .anima, .entra-atras .anima { animation: sube var(--d3) var(--curva) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.aparece { animation: aparecer var(--d2) var(--curva) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.entra-adelante .visual .pieza, .entra-atras .visual .pieza { animation: pieza var(--d3) var(--curva) both; }
.visual .pieza:nth-child(2) { animation-delay: 60ms; } .visual .pieza:nth-child(3) { animation-delay: 120ms; }
.visual .pieza:nth-child(4) { animation-delay: 180ms; } .visual .pieza:nth-child(5) { animation-delay: 240ms; } .visual .pieza:nth-child(n+6) { animation-delay: 300ms; }
@keyframes pieza { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
/* los trazos de lápiz se dibujan */
.entra-adelante .lapiz path, .entra-atras .lapiz path, .entra-adelante .trazo-cifra path, .entra-atras .trazo-cifra path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traza var(--d3) var(--curva) 420ms forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }

/* ---------- collage ---------- */
.collage { position: absolute; inset: 0; }
.pieza { position: absolute; }
.pieza.fondo { inset: 0; background-color: var(--pizarra); background-image: var(--trama-clara); background-size: 8px 8px; }
.pieza.fondo.coral { background-color: var(--coral); }
.pieza.fondo.papel { background-color: var(--papel-2); background-image: radial-gradient(rgba(51, 65, 90, .1) 1.2px, transparent 1.7px); }
.pieza.fondo.rasgado-derecho { clip-path: polygon(0 0, 100% 0, 97% 6%, 99% 14%, 96.5% 23%, 99% 31%, 97% 40%, 99.5% 49%, 96.8% 58%, 99% 66%, 97% 75%, 99.2% 84%, 96.6% 92%, 98.6% 100%, 0 100%); }
.pieza.fondo.rasgado-izquierdo { clip-path: polygon(3% 0, 100% 0, 100% 100%, 1.4% 100%, 3.4% 92%, 0.8% 84%, 3% 75%, 1% 66%, 3.2% 58%, 0.5% 49%, 3% 40%, 1% 31%, 3.5% 23%, 1% 14%, 3% 6%); }
.pieza.circulo { border-radius: 50%; aspect-ratio: 1; background-color: var(--coral); background-image: var(--trama-clara); background-size: 7px 7px; }
.pieza.papel-roto { background-color: var(--pizarra); background-image: var(--trama-clara); background-size: 8px 8px;
  clip-path: polygon(0 3%, 6% 0, 18% 2%, 31% 0, 47% 3%, 62% 0, 79% 2%, 100% 0, 98% 22%, 100% 47%, 97% 72%, 100% 100%, 76% 98%, 52% 100%, 27% 97%, 0 99%, 2% 70%, 0 44%, 3% 20%); }
.pieza.papel-roto.coral { background-color: var(--coral); }
.pieza.recorte { width: auto; max-width: none; }
.pieza.fila { display: flex; justify-content: center; align-items: center; }
.pieza.fila.inicio { justify-content: flex-start; } .pieza.fila.fin { justify-content: flex-end; }
.pieza.fila img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.pieza.ilustracion { background: var(--papel-claro); padding: 7px; box-shadow: 0 10px 24px rgba(30, 16, 17, .18); }
.pieza.ilustracion img { width: 100%; height: auto; }
.pieza.cinta { width: 9%; min-width: 64px; height: 30px; background: rgba(255, 232, 160, .8); box-shadow: 0 1px 2px rgba(0,0,0,.08); clip-path: polygon(3% 8%, 97% 0, 100% 92%, 1% 100%); }
.pieza.lapiz { overflow: visible; }
.pieza.lapiz path { fill: none; stroke: var(--acento); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.pieza.lapiz.amarillo path { stroke: var(--resaltador); }
.pieza.lapiz.tinta path { stroke: var(--tinta); }
.pieza.palabras { margin: 0; display: flex; flex-wrap: wrap; gap: 0 .45em; font-family: var(--texto); font-style: italic; font-weight: 600; line-height: 1.05; color: var(--resaltador); }

/* ---------- portada ---------- */
.pantalla.portada.dividida { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); }
.portada .contenido { gap: 16px; }
.portada .logo { height: 46px; width: auto; object-fit: contain; align-self: flex-start; margin-bottom: 4px; }
.antetitulo { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--tinta-2); }
.antetitulo .punto { width: 12px; height: 12px; }
.portada .contenido > h1 { font-size: calc(var(--t-h1) * 1.12); }
.meta { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--gris); }
.meta .icono { font-size: 1.375rem; color: var(--tinta-2); --duo: var(--coral-suave); }
.temas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 46rem; }
.temas li { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; }
.insignia { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--coral-suave); }
.insignia .icono { font-size: 1.625rem; color: var(--tinta); }
.insignia.numero { font-family: var(--display); font-weight: 800; font-size: 1.1875rem; color: var(--tinta); }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--tinta);
  background: var(--tinta); color: var(--papel-claro); font-family: var(--display); font-weight: 700; font-size: 1.0625rem; cursor: pointer; text-decoration: none; --duo: var(--coral);
  transition: transform var(--d1) var(--curva), background-color var(--d1) var(--curva); }
.boton:hover { background: #3a2a2c; }
.boton:active { transform: scale(.97); }
.boton .icono { font-size: 1.375rem; }
.boton.secundario { background: transparent; color: var(--tinta); --duo: var(--coral-suave); }
.boton.secundario:hover { background: var(--papel-2); }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.cuenta-boton { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-weight: 600; }

/* ---------- piezas de texto ---------- */
.instruccion { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin: 0; max-width: 100%; padding: 8px 20px 8px 12px; border-radius: 999px; background: var(--resaltador-suave);
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--tinta); }
.instruccion .icono { font-size: 1.625rem; color: var(--tinta); --duo: var(--resaltador); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; padding: 8px 16px; border-radius: 999px;
  background: var(--papel-claro); border: 1.5px solid var(--regla); }
.chips li .icono { font-size: 1.375rem; color: var(--pizarra); }
.destacado { position: relative; align-self: flex-start; max-width: 38rem; margin: 4px 0 0 4px; padding: 14px 20px 16px; background: var(--resaltador); transform: rotate(-1deg); box-shadow: 0 10px 20px rgba(30, 16, 17, .12); }
.destacado .titulo-destacado { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 1.0625rem; }
.destacado .titulo-destacado .icono { font-size: 1.5rem; --duo: var(--papel-claro); }
.destacado p { font-size: 1.1875rem; line-height: 1.45; }

/* lista que entra por partes: los puntos ocultos guardan su sitio, así la pantalla no salta */
.lista-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 52rem; }
.lista-partes.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.item-lista { display: flex; align-items: center; gap: 16px; padding: 10px 20px 10px 12px; border-radius: var(--radio-chico); background: var(--papel-claro); box-shadow: var(--sombra); }
.item-lista.oculto { background: transparent; box-shadow: none; outline: 2px dashed var(--regla); outline-offset: -2px; }
.item-lista.oculto > * { visibility: hidden; }
.item-lista:focus { outline: none; }
.item-lista p { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; line-height: 1.3; }
.item-lista .detalle { display: block; margin-top: 3px; font-family: var(--texto); font-weight: 400; font-size: 1.0625rem; color: var(--tinta-2); line-height: 1.4; }
.item-lista .insignia { width: 48px; height: 48px; }

/* cifra protagonista: el número cuenta con cifras de ancho fijo y el ancho del valor final reservado */
.cifra-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 52px; align-items: center; }
.pantalla.dividida .cifra-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cifra-caja { display: grid; justify-items: start; gap: 2px; max-width: 26rem; }
.cifra-numero { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 16px; font-family: var(--display); line-height: .9; color: var(--tinta); }
.cifra-numero .pila { display: inline-grid; font-size: clamp(5rem, 17vh, 9.5rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.cifra-numero .pila > * { grid-area: 1 / 1; }
.cifra-numero .reserva { visibility: hidden; }
.cifra-numero .unidad { font-size: clamp(1.75rem, 5vh, 2.75rem); font-weight: 800; color: var(--tinta-2); }
.trazo-cifra { display: block; width: min(100%, 17rem); margin-top: -2px; line-height: 0; }
.trazo-cifra svg { width: 100%; height: auto; overflow: visible; }
.trazo-cifra path { fill: none; stroke: var(--acento); stroke-width: 4; stroke-linecap: round; }
.rotulo-cifra { margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--tinta-2); }
.cifra-texto { display: flex; flex-direction: column; gap: 12px; }
.cifra-texto p { max-width: 36rem; }
.fuente { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--gris); }

/* cita */
.cita { margin: 0; max-width: 52rem; }
.cita p { font-family: var(--texto); font-style: italic; font-weight: 500; font-size: clamp(1.625rem, 4vh, 2.125rem); line-height: 1.3; color: var(--tinta); margin: 0; }
.cita p::before { content: "«"; color: var(--acento); }
.cita p::after { content: "»"; color: var(--acento); }
.cita cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--gris); }

/* suma: términos que dan un resultado */
.terminos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.terminos .termino { background: var(--papel-claro); border: 1.5px solid var(--regla); border-radius: 999px; padding: 12px 26px; font-family: var(--display); font-weight: 800; font-size: 1.4375rem; line-height: 1.25; }
.terminos .operador { font-family: var(--texto); font-style: italic; font-size: 2.25rem; color: var(--acento); line-height: 1; }
.terminos .resultado { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); }
.terminos .igual { display: inline-flex; align-items: center; gap: 16px; }

/* línea de tiempo */
.hitos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); position: relative; }
.hitos::before { content: ""; position: absolute; left: 8px; right: 0; top: 8px; height: 4px; margin-top: -2px; background: var(--tinta); border-radius: 2px; transform-origin: left center; }
.entra-adelante .hitos::before, .entra-atras .hitos::before { animation: dibuja var(--d3) var(--curva) 120ms both; }
@keyframes dibuja { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hito { position: relative; padding: 30px 22px 0 0; }
.hito .punto { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-color: var(--tinta); }
.hito.clave .punto { border-color: var(--acento); background: var(--acento); }
.hito .fecha { font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; margin: 0 0 4px; }
.hito.clave .fecha { color: var(--acento-tinta); }
.hito p { font-size: 1.125rem; line-height: 1.45; color: var(--tinta-2); }

/* proceso paso a paso: los pasos comparten celda, así el panel mide lo del paso más largo */
.proceso { display: flex; flex-direction: column; gap: 14px; }
.pasos-trazos { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.pasos-trazos span { height: 6px; border-radius: 3px; background: var(--regla); transition: background-color var(--d2) var(--curva); }
.pasos-trazos span.hecho { background: var(--pizarra); }
.pasos-trazos span.actual { background: var(--acento); }
.pasos-pila { display: grid; }
.paso { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 26px; border-radius: var(--radio); background: var(--papel-claro); box-shadow: var(--sombra); visibility: hidden; }
.paso.actual { visibility: visible; }
.paso .insignia { width: 60px; height: 60px; }
.paso .insignia .icono { font-size: 2.125rem; }
.paso-numero { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--acento-tinta); margin: 0 0 4px; }
.paso h2, .etapa h2 { font-size: 1.5rem; margin: 0 0 6px; }
.paso h2:focus, .etapa h2:focus { outline: none; }
.paso .texto p, .etapa .texto p { color: var(--tinta-2); font-size: 1.1875rem; line-height: 1.45; }
.paso-controles { display: flex; justify-content: space-between; gap: 12px; }

/* ciclo: las etapas en un anillo con flechas en el sentido de las agujas del reloj; la etapa elegida, al lado */
.ciclo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 32px; align-items: center; }
.rueda { position: relative; width: clamp(240px, 42vh, 360px); aspect-ratio: 1; margin: 18px auto; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anillo .arco, .anillo .punta { fill: none; stroke: var(--regla); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--d2) var(--curva); }
.anillo .hecho { stroke: var(--tinta-2); }
.centro-ciclo { position: absolute; left: 50%; top: 50%; width: 48%; transform: translate(-50%, -50%); margin: 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--tinta-2); }
.nodos { position: absolute; inset: 0; }
.nodo { position: absolute; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--tinta); }
.nodo.derecha { transform: translate(-22px, -50%); }
.nodo.izquierda { transform: translate(calc(-100% + 22px), -50%); flex-direction: row-reverse; text-align: right; }
.nodo.arriba { transform: translate(-50%, calc(-100% + 22px)); flex-direction: column-reverse; gap: 6px; text-align: center; }
.nodo.abajo { transform: translate(-50%, -22px); flex-direction: column; gap: 6px; text-align: center; }
.circulo-nodo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--papel-claro); border: 2px solid var(--gris);
  font-family: var(--display); font-weight: 800; font-size: 1.125rem; color: var(--tinta); transition: background-color var(--d2) var(--curva), border-color var(--d2) var(--curva), color var(--d2) var(--curva); }
.etiqueta-etapa { width: max-content; max-width: 9.5rem; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; color: var(--tinta-2); }
.nodo.visto .circulo-nodo { border-color: var(--tinta); }
.nodo[aria-selected="true"] .circulo-nodo { background: var(--tinta); border-color: var(--tinta); color: var(--papel-claro); box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--acento); }
.nodo[aria-selected="true"] .etiqueta-etapa { color: var(--tinta); }
.nodo:focus-visible { outline: none; }
.nodo:focus-visible .circulo-nodo { outline: 3px solid var(--acento); outline-offset: 4px; }
.ciclo-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etapas-pila { display: grid; }
.etapa { grid-area: 1 / 1; padding: 22px 26px; border-radius: var(--radio); background: var(--papel-claro); box-shadow: var(--sombra); visibility: hidden; }
.etapa.actual { visibility: visible; }

/* comparación en dos columnas */
.comparacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.columna { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 22px; border-radius: var(--radio); background: var(--papel-claro); box-shadow: var(--sombra); }
.cabeza-columna { display: flex; align-items: center; gap: 14px; }
.cabeza-columna h2 { font-size: 1.375rem; }
.columna ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 8px; }
.columna li { font-size: 1.1875rem; line-height: 1.4; color: var(--tinta-2); }
.columna li::marker { color: var(--acento); }
.columna .texto p { font-size: 1.1875rem; line-height: 1.45; color: var(--tinta-2); }
.conclusion { display: flex; align-items: center; gap: 12px; align-self: flex-start; margin: 0; padding: 10px 20px 10px 14px; border-radius: 999px; background: var(--papel-2);
  font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.conclusion .icono { font-size: 1.5rem; color: var(--acento-tinta); --duo: var(--coral-suave); }

/* matriz de 2 × 2: rótulos de columna arriba y de fila a la izquierda, en vertical */
.matriz { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.eje { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.0625rem; line-height: 1.2; color: var(--tinta-2); }
.eje.col { align-self: end; padding: 0 6px; }
.eje.fila { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; justify-self: center; text-align: center; padding: 0 2px; }
.celda { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: var(--radio-chico); background: var(--papel-claro); box-shadow: var(--sombra); }
.celda h2 { font-size: 1.25rem; }
.celda .texto p { font-size: 1.125rem; line-height: 1.4; color: var(--tinta-2); }
.celda.destacada { background: var(--pizarra) var(--trama-clara); background-size: 8px 8px; }
.celda.destacada h2, .celda.destacada .texto p { color: var(--papel-claro); }

/* tarjetas que se dan vuelta: las dos caras en la misma celda */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr)); gap: 16px; }
.tarjeta { perspective: 1200px; display: grid; }
.tarjeta-boton { position: relative; display: grid; width: 100%; min-height: clamp(8.5rem, 22vh, 12rem); border: 0; padding: 0; background: none; cursor: pointer; text-align: left;
  transform-style: preserve-3d; transition: transform var(--d3) var(--curva); border-radius: var(--radio); }
.tarjeta-boton[aria-pressed="true"] { transform: rotateY(180deg); }
.cara { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: var(--radio); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara.frente { background: var(--papel-claro); box-shadow: var(--sombra); }
.cara.frente .icono { font-size: 2.25rem; color: var(--tinta); }
.cara.dorso { background: var(--pizarra); background-image: var(--trama-clara); background-size: 8px 8px; color: var(--papel-claro); transform: rotateY(180deg); }
.cara .termino { font-family: var(--display); font-weight: 800; font-size: 1.375rem; line-height: 1.2; color: var(--tinta); }
.cara .indicacion { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--tinta-2); }
.cara .indicacion .icono { font-size: 1.25rem; --duo: var(--coral-suave); }
.cara.dorso .explicacion { font-family: var(--texto); font-size: 1.1875rem; line-height: 1.4; color: var(--papel-claro); }
.cara.dorso .indicacion { color: var(--resaltador); }

/* acordeón: uno abierto a la vez y la altura reservada, para que la pantalla no cambie de tamaño */
.acordeon { display: grid; gap: 10px; }
.acordeon-item { border-radius: var(--radio-chico); background: var(--papel-claro); box-shadow: var(--sombra); overflow: hidden; }
.cabeza-item { margin: 0; font-size: inherit; }
.acordeon-boton { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 16px; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.1875rem; line-height: 1.25; color: var(--tinta); }
.acordeon-boton .icono { font-size: 1.75rem; color: var(--pizarra); }
.acordeon-boton .rotulo-item { flex: 1; }
.signo { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gris); transition: border-color var(--d2) var(--curva), background-color var(--d2) var(--curva); }
.signo::before, .signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--tinta); border-radius: 1px; transition: transform var(--d2) var(--curva); }
.signo::after { transform: rotate(90deg); }
[aria-expanded="true"] > .signo { border-color: var(--tinta); background: var(--tinta); }
[aria-expanded="true"] > .signo::before, [aria-expanded="true"] > .signo::after { background: var(--papel-claro); }
[aria-expanded="true"] > .signo::after { transform: rotate(0deg); }
.despliegue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d2) var(--curva); }
.despliegue > div { overflow: hidden; }
.despliegue.abierto { grid-template-rows: 1fr; }
.contenido-item { padding: 0 20px 16px 58px; min-height: var(--alto-item, 0); }
.contenido-item .texto p { color: var(--tinta-2); font-size: 1.1875rem; line-height: 1.45; }

/* pestañas: los paneles comparten celda */
.pestanas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.pestana { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px 0 14px; border: 0; border-radius: 14px 14px 0 0; background: rgba(51, 65, 90, .08);
  font-family: var(--display); font-weight: 800; font-size: 1.1875rem; color: var(--tinta-2); cursor: pointer; transition: background-color var(--d1) var(--curva); }
.pestana .icono { font-size: 1.75rem; color: var(--pizarra); --duo: var(--coral-suave); }
.pestana:hover { background: rgba(51, 65, 90, .14); }
.pestana[aria-selected="true"] { background: var(--papel-claro); color: var(--tinta); box-shadow: inset 0 -3px 0 var(--acento); }
.pestana[aria-selected="true"] .icono { color: var(--tinta); --duo: var(--coral); }
.paneles { display: grid; }
.panel-pestana { grid-area: 1 / 1; padding: 22px 26px; background: var(--papel-claro); border-radius: 0 var(--radio) var(--radio) var(--radio); box-shadow: var(--sombra); visibility: hidden; }
.panel-pestana.actual { visibility: visible; }
.panel-pestana .texto p { font-size: 1.1875rem; line-height: 1.5; color: var(--tinta-2); }

/* ---------- actividades: la pregunta a un lado y la respuesta al otro ---------- */
.actividad-caja { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 22px; align-items: stretch; }
.actividad-caja.terminada { grid-template-columns: minmax(0, 1fr); }
.a-opcion { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 14px 22px; }
.a-ordenar { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); }
.actividad-caja > .cabeza-actividad { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.lado-pregunta { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: var(--radio); background: var(--papel-claro); box-shadow: var(--sombra); min-width: 0; }
.lado-respuesta { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px 24px; border-radius: var(--radio); background: var(--papel-2);
  background-image: radial-gradient(rgba(51, 65, 90, .08) 1.2px, transparent 1.7px); background-size: 8px 8px; min-width: 0; }
.etiqueta { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--tinta-2); }
.zona-respuesta { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.zona-respuesta:focus { outline: none; }
.medidor { position: absolute !important; visibility: hidden !important; left: 0; top: 0; min-height: 0 !important; }
.espera { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--tinta-2); font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.espera .icono { font-size: 2.75rem; color: var(--pizarra); --duo: var(--coral-suave); }
.retro { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; border-radius: 14px; background: var(--papel-claro); box-shadow: var(--sombra); }
.retro .icono { font-size: 2.375rem; }
.retro.bien .icono { color: var(--bien); --duo: var(--bien-suave); }
.retro.mal .icono { color: var(--mal); --duo: var(--mal-suave); }
.retro strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.1875rem; margin-bottom: 4px; }
.retro p { font-size: 1.0625rem; line-height: 1.45; color: var(--tinta-2); margin: 0 0 .4em; }
.retro p:last-child { margin-bottom: 0; }
.intentos { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--gris); }
.leyenda { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--gris); line-height: 1.4; }

/* opción múltiple */
.lado-pregunta fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.lado-pregunta legend { padding: 0; margin-bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 1.3125rem; line-height: 1.3; color: var(--tinta); }
.opciones { display: grid; gap: 10px; }
.opcion { display: flex; align-items: flex-start; gap: 14px; padding: 9px 16px; border-radius: 12px; border: 2px solid var(--regla); background: var(--papel-claro); cursor: pointer; font-size: 1.125rem; line-height: 1.35;
  transition: border-color var(--d1) var(--curva), background-color var(--d1) var(--curva); }
.opcion:hover { border-color: var(--tinta-2); }
.opcion input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--tinta); }
.opcion:has(input:checked) { border-color: var(--tinta); }
.opcion.correcta { border-color: var(--bien); background: var(--bien-suave); }
.opcion.incorrecta { border-color: var(--mal); background: var(--mal-suave); }
.pregunta { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.3; color: var(--tinta); }

/* verdadero o falso y clasificar: una afirmación por vez */
.tarjeta-afirmacion .cuenta-afirmacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--tinta-2); }
.puntitos { display: flex; gap: 6px; }
.puntitos i { width: 10px; height: 10px; border-radius: 50%; background: var(--regla); }
.puntitos i.bien { background: var(--bien); }
.puntitos i.mal { background: var(--mal); }
.puntitos i.actual { background: var(--tinta); }
.enunciado { margin: 0; font-family: var(--texto); font-size: 1.375rem; line-height: 1.4; color: var(--tinta); }
.categorias { display: flex; flex-wrap: wrap; gap: 10px; }
.categoria { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--papel-claro);
  font-family: var(--display); font-weight: 800; font-size: 1.125rem; cursor: pointer; transition: background-color var(--d1) var(--curva); }
.categoria .icono { font-size: 1.5rem; }
.categoria:hover { background: var(--papel-2); }
.categoria[aria-pressed="true"].bien { background: var(--bien); border-color: var(--bien); color: #fff; --duo: rgba(255, 255, 255, .3); }
.categoria[aria-pressed="true"].mal { background: var(--mal); border-color: var(--mal); color: #fff; --duo: rgba(255, 255, 255, .3); }
.categoria[disabled] { cursor: default; }
.categoria[disabled]:not([aria-pressed="true"]) { opacity: .45; }
.resumen-clasificacion { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.resumen-clasificacion li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 1.0625rem; line-height: 1.35; }
.resumen-clasificacion .icono { font-size: 1.375rem; margin-top: 1px; }
.resumen-clasificacion .bien .icono { color: var(--bien); --duo: var(--bien-suave); }
.resumen-clasificacion .mal .icono { color: var(--mal); --duo: var(--mal-suave); }
.terminada .resumen-clasificacion { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }

/* ordenar: flechas para subir y bajar, sin arrastrar */
.ordenar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fila-orden { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 3px 6px 3px 10px; border-radius: 12px; border: 2px solid var(--regla); background: var(--papel-claro);
  transition: border-color var(--d1) var(--curva), background-color var(--d1) var(--curva); }
.posicion { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--papel-2); font-family: var(--display); font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.texto-orden { font-size: 1.125rem; line-height: 1.35; }
.botones-orden { display: flex; gap: 4px; }
.mover { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--regla); background: var(--papel-claro); cursor: pointer; color: var(--tinta); --duo: var(--coral-suave); }
.mover .icono { font-size: 1.375rem; }
.mover:hover:not([disabled]) { border-color: var(--tinta-2); }
.mover[disabled] { opacity: .35; cursor: default; }
.marca { width: 24px; height: 24px; }
.fila-orden.bien { border-color: var(--bien); background: var(--bien-suave); }
.fila-orden.mal { border-color: var(--mal); background: var(--mal-suave); }
.fila-orden.bien .marca::before, .fila-orden.mal .marca::before { display: block; font-family: var(--display); font-weight: 900; font-size: 1.25rem; line-height: 24px; text-align: center; }
.fila-orden.bien .marca::before { content: "✓"; color: var(--bien); }
.fila-orden.mal .marca::before { content: "✗"; color: var(--mal); }
.solucion .fila-orden { border-color: var(--tinta-2); }
.orden-revisado { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.orden-revisado li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .9375rem; line-height: 1.35; }
.orden-revisado .icono { font-size: 1.25rem; margin-top: 1px; }
.orden-revisado .bien .icono { color: var(--bien); --duo: var(--bien-suave); }
.orden-revisado .mal .icono { color: var(--mal); --duo: var(--mal-suave); }
.orden-revisado .num { font-family: var(--display); font-weight: 800; }
.orden-correcto { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: 1.0625rem; }

/* ---------- cierre con las ideas clave ---------- */
.cierre-cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 22px 28px; align-items: start; }
.cierre-cuerpo:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 52rem; }
.ideas li { display: flex; align-items: center; gap: 16px; padding: 12px 20px 12px 14px; border-radius: var(--radio-chico); background: var(--papel-claro); box-shadow: var(--sombra); }
.ideas p { margin: 0; font-size: 1.1875rem; line-height: 1.4; }
.resultado { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: var(--radio); background: var(--pizarra) var(--trama-clara); background-size: 8px 8px; color: var(--papel-claro); }
.resultado .que { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.25; }
.resultado .punto { border-color: var(--papel-claro); background: transparent; }
.resultado .punto.lleno { border-color: var(--resaltador); background: var(--resaltador); }
.resultado .cifras { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.resultado .cifra { margin: 0; display: grid; }
.resultado .cifra b { font-family: var(--display); font-weight: 900; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.resultado .cifra span { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--papel-claro); }
.resultado .pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.resultado a { display: inline-flex; align-items: center; gap: 8px; color: var(--papel-claro); text-decoration-color: var(--resaltador); font-family: var(--display); font-weight: 700; font-size: 1.0625rem; }
.resultado a:focus-visible { outline-color: var(--resaltador); }
.despedida p { font-size: var(--t-entrada); line-height: 1.45; color: var(--tinta-2); max-width: 52rem; }

/* ---------- pantallas bajas del escritorio (1366 × 768 y menos): se achica lo grande y el aire, no el texto ---------- */
@media screen and (max-height: 820px) and (min-width: 761px) {
  :root { --t-h1: 2.5rem; --t-entrada: 1.3125rem; }
  .cabecera { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
  .navegacion { min-height: 72px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .navegacion .continuar { min-height: 50px; }
  .contenido { gap: 14px; }
  .insignia { width: 42px; height: 42px; }
}

/* ---------- teléfono ---------- */
@media screen and (max-width: 760px) {
  :root { --t-cuerpo: 1.0625rem; --t-entrada: 1.125rem; --t-h1: 1.625rem; --t-h2: 1.1875rem; }
  .cabecera { gap: 10px; min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  .emblema { width: 28px; height: 28px; }
  .cabecera .donde { font-size: 1rem; }
  .cabecera .donde .titulo-presentacion { display: none; }
  .cabecera .cuenta { font-size: 1rem; }
  .cuenta .largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cuenta .corto { display: inline; }
  .navegacion { gap: 12px; min-height: 64px; padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)); }
  .navegacion .anterior { padding: 0; }
  .navegacion .anterior .etiqueta-boton { display: none; }
  .navegacion .continuar { min-height: 48px; padding: 0 20px 0 22px; font-size: 1.0625rem; }
  .segmentos { display: none; }
  .barra-avance { display: block; }
  .pantalla.dividida, .pantalla.dividida.visual-izquierda, .pantalla.portada.dividida { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* la imagen pasa a una franja arriba: el collage conserva su composición y se ve su parte central */
  .visual { order: -1; min-height: 0; height: clamp(72px, 12vh, 112px); }
  .visual .collage { inset: auto 0 auto 0; top: 50%; height: auto; aspect-ratio: 4 / 5; transform: translateY(-50%); }
  .contenido { justify-content: flex-start; gap: 12px; padding: 16px 18px 18px; }
  .pantalla.centrada .contenido { justify-content: center; }
  .contenido > h1 { line-height: 1.08; }
  .portada .contenido > h1 { font-size: 1.875rem; }
  .portada .logo { display: none; }
  .entrada { line-height: 1.4; }
  .temas, .lista-partes.dos { grid-template-columns: minmax(0, 1fr); }
  .temas { gap: 8px; }
  .temas li { font-size: 1rem; }
  .insignia { width: 38px; height: 38px; }
  .insignia .icono { font-size: 1.375rem; }
  .instruccion { font-size: .9375rem; padding: 6px 14px 6px 10px; gap: 8px; }
  .instruccion .icono { font-size: 1.375rem; }
  .boton { min-height: 46px; padding: 0 20px; }
  .chips li { font-size: 1rem; padding: 6px 12px; }
  .destacado { padding: 10px 14px 12px; }
  .destacado p { font-size: 1.0625rem; }
  .lista-partes { gap: 8px; }
  .item-lista { gap: 12px; padding: 9px 12px 9px 10px; }
  .item-lista .insignia { width: 36px; height: 36px; }
  .item-lista p { font-size: 1.0625rem; }
  .item-lista .detalle { font-size: 1rem; line-height: 1.35; }
  .cifra-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cifra-numero .pila { font-size: 5rem; }
  .rotulo-cifra { font-size: 1.0625rem; }
  .cita p { font-size: 1.375rem; }
  .terminos { gap: 8px 10px; }
  .terminos .termino { font-size: 1.0625rem; padding: 8px 16px; }
  .terminos .operador { font-size: 1.5rem; }
  .hitos { grid-template-columns: minmax(0, 1fr); }
  .hitos::before { left: 8px; right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; margin: 0; transform-origin: top center; }
  .entra-adelante .hitos::before, .entra-atras .hitos::before { animation-name: dibujaV; }
  @keyframes dibujaV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .hito { padding: 0 0 14px 34px; }
  .hito:last-child { padding-bottom: 0; }
  .hito .fecha { font-size: 1.0625rem; margin-bottom: 2px; }
  .hito p { font-size: 1rem; line-height: 1.4; }
  .paso { gap: 12px; padding: 16px; grid-template-columns: minmax(0, 1fr); }
  .paso .insignia { display: none; }
  .paso h2, .etapa h2 { font-size: 1.1875rem; }
  .paso .texto p, .etapa .texto p { font-size: 1.0625rem; }
  .paso-controles .boton { flex: 1; }
  .ciclo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rueda { width: min(48vw, 172px); margin: 2px auto; }
  .nodo, .nodo.derecha, .nodo.izquierda, .nodo.arriba, .nodo.abajo { transform: translate(-50%, -50%); }
  .etiqueta-etapa { display: none; }
  .circulo-nodo { width: 40px; height: 40px; font-size: 1rem; }
  .centro-ciclo { font-size: .875rem; }
  .etapa { padding: 14px 16px; }
  .comparacion { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .columna { padding: 12px 16px 14px; gap: 6px; }
  .cabeza-columna { gap: 10px; }
  .cabeza-columna h2 { font-size: 1.125rem; }
  .columna ul { gap: 4px; }
  .columna li, .columna .texto p { font-size: 1rem; line-height: 1.35; }
  .conclusion { font-size: 1rem; padding: 8px 14px 8px 10px; border-radius: 14px; }
  .matriz { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 6px 8px; }
  .esquina { display: none; }
  .eje { font-size: .9375rem; }
  .eje.col { padding: 0 2px; }
  .eje.fila { grid-column: 1 / -1; writing-mode: horizontal-tb; transform: none; justify-self: start; text-align: left; margin-top: 4px; }
  .celda { padding: 10px 12px; gap: 4px; }
  .celda h2 { font-size: 1.0625rem; }
  .celda .texto p { font-size: .9375rem; line-height: 1.35; }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .tarjeta-boton { min-height: 7.5rem; }
  .cara { padding: 12px 14px; gap: 8px; }
  .cara.frente .icono { font-size: 1.75rem; }
  .cara .termino { font-size: 1.0625rem; }
  .cara .indicacion { font-size: .875rem; }
  .cara.dorso .explicacion { font-size: .9375rem; line-height: 1.35; }
  .acordeon { gap: 8px; }
  .acordeon-boton { min-height: 52px; font-size: 1.0625rem; padding: 6px 12px; gap: 10px; }
  .acordeon-boton .icono { font-size: 1.5rem; }
  .contenido-item { padding: 0 14px 12px 14px; }
  .contenido-item .texto p { font-size: 1rem; line-height: 1.4; }
  .pestanas-lista { gap: 6px; }
  .pestana { min-height: 46px; padding: 0 14px; font-size: 1rem; border-radius: 12px 12px 0 0; }
  .pestana .icono { display: none; }
  .panel-pestana { padding: 14px 16px; border-radius: 0 12px 12px 12px; }
  .panel-pestana .texto p { font-size: 1.0625rem; line-height: 1.45; }
  /* actividades: la respuesta reemplaza a la pregunta en la misma celda, y «Ver la pregunta» vuelve */
  .actividad-caja, .a-opcion, .a-ordenar { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .actividad-caja > .cabeza-actividad { grid-row: 1; margin-bottom: 10px; gap: 4px; }
  .actividad-caja > .lado-pregunta, .actividad-caja > .lado-respuesta { grid-column: 1; grid-row: 2; }
  .actividad-caja > .lado-respuesta { visibility: hidden; }
  .actividad-caja.respondida > .lado-pregunta { visibility: hidden; }
  .actividad-caja.respondida > .lado-respuesta { visibility: visible; }
  .solo-escritorio { display: none !important; }
  .a-ordenar .posicion { display: none; }
  .fila-orden { grid-template-columns: minmax(0, 1fr) auto auto; padding: 4px 4px 4px 12px; }
  .mover { width: 40px; height: 40px; }
  .lado-pregunta, .lado-respuesta { padding: 14px 16px; gap: 10px; }
  .solo-telefono { display: inline-flex !important; }
  .solo-telefono-bloque { display: block !important; }
  .solo-telefono[hidden] { display: none !important; }
  .lado-pregunta legend, .pregunta { font-size: 1.0625rem; }
  .opcion { padding: 8px 12px; gap: 10px; font-size: 1rem; line-height: 1.35; }
  .opcion input { width: 20px; height: 20px; margin-top: 1px; }
  .opciones { gap: 8px; }
  .enunciado { font-size: 1.125rem; }
  .categoria { min-height: 46px; padding: 0 16px; font-size: 1rem; }
  .espera { font-size: 1rem; }
  .espera .icono { font-size: 2.25rem; }
  .retro { padding: 12px 14px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .retro .icono { font-size: 1.875rem; }
  .retro strong { font-size: 1.0625rem; }
  .retro p { font-size: 1rem; }
  .fila-orden { gap: 8px; }
  .texto-orden { font-size: 1rem; }
  .marca { width: 16px; }
  .botones-orden { gap: 2px; }
  .terminada .resumen-clasificacion { grid-template-columns: minmax(0, 1fr); }
  .resumen-clasificacion li { font-size: .9375rem; }
  .cierre-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ideas { gap: 8px; }
  .ideas li { gap: 12px; padding: 9px 12px 9px 10px; }
  .ideas .insignia { width: 32px; height: 32px; font-size: 1rem; }
  .ideas p { font-size: 1rem; line-height: 1.35; }
  .resultado { padding: 12px 16px; gap: 6px; }
  .resultado .que { font-size: 1.0625rem; }
  .resultado .cifra b { font-size: 1.75rem; }
  .resultado .cifra span { font-size: .875rem; }
  .despedida p { font-size: 1.0625rem; }
}

/* ---------- movimiento reducido: solo fundidos breves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .tarjeta-boton[aria-pressed="true"] { transform: none; }
  .tarjeta-boton[aria-pressed="true"] .frente { visibility: hidden; }
  .tarjeta-boton .dorso { transform: none; visibility: hidden; }
  .tarjeta-boton[aria-pressed="true"] .dorso { visibility: visible; }
}
html.sin-animacion *, html.sin-animacion *::before, html.sin-animacion *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
html.sin-animacion .tarjeta-boton[aria-pressed="true"] { transform: none; }
html.sin-animacion .tarjeta-boton[aria-pressed="true"] .frente { visibility: hidden; }
html.sin-animacion .tarjeta-boton .dorso { transform: none; visibility: hidden; }
html.sin-animacion .tarjeta-boton[aria-pressed="true"] .dorso { visibility: visible; }

/* ---------- colores forzados (alto contraste de Windows) ---------- */
@media (forced-colors: active) {
  .boton, .boton-redondo, .opcion, .categoria, .pestana, .cara, .acordeon-item, .item-lista, .ideas li, .retro, .destacado, .instruccion, .columna, .celda, .paso, .etapa, .fila-orden, .mover, .circulo-nodo { border: 2px solid CanvasText; }
  .punto.lleno, .segmentos i.actual, .barra-avance i { background: Highlight; forced-color-adjust: none; }
  .visual { display: none; }
  .pantalla.dividida { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- versión para imprimir (PDF): una pantalla por página de 1280 × 720 ---------- */
@page { size: 1280px 720px; margin: 0; }
html.imprimir { font-size: 14px; --t-h1: 2.5rem; --t-entrada: 1.3125rem; }
html.imprimir, html.imprimir body { height: auto; overflow: visible; }
html.imprimir body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html.imprimir #presentacion { display: block; height: auto; }
/* en el PDF, el grano y las sombras se rasterizan en cada página y lo multiplican por dos: van papel liso y un filete */
.hoja { position: relative; width: 1280px; height: 720px; overflow: hidden; display: grid; grid-template-rows: 40px minmax(0, 1fr); background: var(--papel); break-after: page; page-break-after: always; }
.imprimir .hoja * { box-shadow: none !important; }
.imprimir .item-lista, .imprimir .columna, .imprimir .celda, .imprimir .actividad-impresa, .imprimir .cara.frente, .imprimir .ideas li, .imprimir .tabla-respuestas, .imprimir .pieza.ilustracion,
.imprimir .pasos-impresos li, .imprimir .etapas-impresas li, .imprimir .acordeon-impreso section, .imprimir .pestanas-impresas section, .imprimir .chips li { border: 1px solid var(--regla); }
.hoja-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 40px; border-bottom: 1px solid var(--regla); font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--gris); }
.hoja-cabeza b { color: var(--tinta); }
.hoja .pantalla { min-height: 0; height: 100%; }
.hoja .contenido { padding: 24px 52px; gap: 14px; }
.hoja .rueda { width: 250px; margin: 30px auto; }
.imprimir .instruccion, .imprimir .acciones, .imprimir .saltar { display: none !important; }
.imprimir .cifra-numero .reserva { display: none; }
.pasos-impresos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pasos-impresos li, .etapas-impresas li, .acordeon-impreso section, .pestanas-impresas section { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: var(--radio-chico); background: var(--papel-claro); box-shadow: var(--sombra); }
.pasos-impresos h2, .etapas-impresas h2, .acordeon-impreso h2, .pestanas-impresas h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.pasos-impresos .texto p, .etapas-impresas .texto p, .acordeon-impreso .texto p, .pestanas-impresas .texto p { font-size: 1.0625rem; line-height: 1.4; color: var(--tinta-2); }
.ciclo.impreso { grid-template-columns: 400px minmax(0, 1fr); gap: 16px; }
.etapas-impresas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.etapas-impresas li { padding: 10px 14px; gap: 4px; }
.etapas-impresas h2 { font-size: 1.0625rem; }
.etapas-impresas .texto p { font-size: 1rem; }
.acordeon-impreso, .pestanas-impresas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ciclo.impreso .nodo { transform: translate(-50%, -50%); }
.ciclo.impreso .nodo.derecha { transform: translate(-22px, -50%); }
.ciclo.impreso .nodo.izquierda { transform: translate(calc(-100% + 22px), -50%); }
.ciclo.impreso .nodo.arriba { transform: translate(-50%, calc(-100% + 22px)); }
.ciclo.impreso .nodo.abajo { transform: translate(-50%, -22px); }
.tarjeta.impresa { display: grid; grid-template-rows: auto 1fr; gap: 0; }
.tarjeta.impresa .cara { backface-visibility: visible; transform: none; }
.tarjeta.impresa .frente { grid-area: 1 / 1; border-radius: var(--radio) var(--radio) 0 0; }
.tarjeta.impresa .dorso { grid-area: 2 / 1; border-radius: 0 0 var(--radio) var(--radio); }
.actividad-impresa { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; border-radius: var(--radio); background: var(--papel-claro); box-shadow: var(--sombra); }
.opciones-impresas { margin: 0; padding-left: 1.6em; list-style: upper-alpha; display: grid; gap: 8px; font-size: 1.1875rem; }
.opciones-impresas.con-respuesta li { padding-left: 4px; }
.opciones-impresas .correcta { font-weight: 700; }
.opciones-impresas .correcta .icono { color: var(--bien); --duo: var(--bien-suave); margin-right: 8px; vertical-align: -3px; }
.afirmaciones-impresas { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: 1.125rem; }
.afirmaciones-impresas li { padding: 6px 0; border-bottom: 1px solid var(--regla); }
.afirmaciones-impresas li > span:first-child { display: inline-block; width: calc(100% - 9rem); vertical-align: top; }
.casillas { display: inline-block; width: 9rem; text-align: right; font-family: var(--display); font-weight: 800; white-space: pre; color: var(--gris); }
.orden-impreso { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1.125rem; }
.orden-impreso li { display: flex; align-items: center; gap: 14px; }
.casilla { flex: none; width: 30px; height: 30px; border: 2px solid var(--tinta-2); border-radius: 8px; background: var(--papel-claro); }
.explicacion-impresa { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--papel-2); font-size: 1.0625rem; }
.tabla-respuestas { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.35; background: var(--papel-claro); border-radius: var(--radio-chico); }
.tabla-respuestas th, .tabla-respuestas td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--regla); }
.tabla-respuestas th { font-family: var(--display); font-weight: 800; font-size: .9375rem; color: var(--tinta-2); }
.tabla-respuestas .cat { font-family: var(--display); font-weight: 800; white-space: nowrap; }
.respuestas .orden-correcto { font-size: 1.1875rem; gap: 6px; }