/* Tokens de marca. Todo el color del sitio sale de aquí; nada se escribe suelto. */
:root {
  /* Los bordes laterales del sitio: una sola regla. 1.25rem (más la zona segura) hasta que la página pasa de 1280 px; desde
     ahí, el contenedor centrado. El `%` se resuelve contra el ancho de la página (no de la ventana con su barra), que es
     el mismo contra el que centra `.contenedor`. `-estrecho` es el de las secciones de lectura (1100 px). La cabecera, el
     hero de la portada, el pie y la tarjeta de cierre caen en `--borde-*`; el hero del caso y el del aviso, en `-estrecho`,
     como el cuerpo de sus secciones. Antes cada pieza tenía el suyo (48, 80, 100 o 20 px). */
  --borde-izq: max(calc(1.25rem + env(safe-area-inset-left)), calc((100% - 1280px) / 2));
  --borde-der: max(calc(1.25rem + env(safe-area-inset-right)), calc((100% - 1280px) / 2));
  --borde-izq-estrecho: max(calc(1.25rem + env(safe-area-inset-left)), calc((100% - 1100px) / 2));
  --borde-der-estrecho: max(calc(1.25rem + env(safe-area-inset-right)), calc((100% - 1100px) / 2));
  --verde: #1f4d3f;
  --verde-vivo: #2f7d5f;
  --verde-oscuro: #10251e;
  --verde-suave: #e8f0ec;
  --verde-claro: #9fd3bd;
  --tinta: #23282b;
  --tinta-suave: #5b6168;
  --crema: #fbfaf8;
  --blanco: #ffffff;
  --linea: #e7e4dd;
  --linea-fuerte: #d9d4c9;
  --ambar: #b45309;
  --ambar-suave: #fbeee4;
  /* Mismo par que el rojo, misma trampa: `--ambar` sobre `--ambar-suave` da 4.41:1 —— medido,
     por debajo del 4.5 —— y la pastilla de «pendiente de exhibir» es texto de 13 px. Este tono
     ya estaba escrito suelto en la etiqueta de comprobacion manual; aqui pasa a token. */
  --ambar-texto: #8a3b1a;
  --rojo: #c0392b;
  /* El par del chip de discrepancia, tomado del portal: el fondo y el texto que sobre él
     pasa el contraste. `--rojo` puro sobre `--rojo-suave` no llega a 4.5:1. */
  --rojo-suave: #fbe9e7;
  --rojo-texto: #8c2a24;
  /* Tres niveles de profundidad. Ver DESIGN.md · Profundidad.
     EL MATIZ ES EL DEL PAPEL, NO EL DE LA TINTA. Con la tinta (#23282b, azulada) la sombra salía
     fría —— medido sobre la captura: R−B de −2 a 0 —— bajo un borde beige de R−B +10 y sobre papel
     de R−B +3. Una sombra fría en un entorno cálido se lee sucia. Éstas llevan el matiz de
     `--linea-fuerte` oscurecido: el tono del papel, sólo que a menos luz. */
  --sombra-1: 0 1px 2px rgba(77, 68, 50, 0.08);
  --sombra-2: 0 1px 3px rgba(77, 68, 50, 0.08), 0 8px 24px rgba(77, 68, 50, 0.12);
  --sombra-3: 0 2px 4px rgba(77, 68, 50, 0.07), 0 12px 32px rgba(77, 68, 50, 0.13), 0 32px 64px rgba(77, 68, 50, 0.11);
}

/* Una sola cara con rango de peso 400-700: un archivo, dos pesos.
   swap: el texto se lee con la fuente del sistema mientras baja el woff. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/Hanken-Expedix.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  /* Las cifras citables se alinean en columna: la firma visual son las tablas. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); }
/* FOCO VISIBLE EN TODO ENLACE. Lo tenían sólo los botones. El de Derechos ARCO es un
   `mailto:` suelto en prosa —— y es el canal ÚNICO para ejercer esos derechos —— así que
   quien navega con teclado no sabía dónde estaba. Va en el elemento, no en una clase, para
   que lo hereden también los enlaces que nadie ha escrito todavía. */
a:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
/* Sobre el verde oscuro y sobre el gradiente del cierre, el anillo verde no se ve. */
.oscuro a:focus-visible, .cierre-caja a:focus-visible, .figura.clara a:focus-visible { outline-color: var(--verde-claro); }

/* ── cabeza ── */
.cabeza {
  position: relative;   /* ancla del panel del menú móvil */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: calc(.5rem + env(safe-area-inset-top)) var(--borde-der) .5rem var(--borde-izq);
  border-bottom: 1px solid var(--linea);
  background: var(--crema);
}
.marca { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--verde); font-weight: 700; font-size: 1.3125rem; text-decoration: none; }
.simbolo { color: var(--verde); display: block; }
.menu { display: none; gap: 1.75rem; }
.menu a { color: var(--tinta); text-decoration: none; font-size: 1.0625rem; min-height: 44px; display: inline-flex; align-items: center; }
.menu a:hover { color: var(--verde-vivo); }

/* ── el menú de abajo de 900 px ──
   `.menu` es `display:none` de base y sólo vuelve en ≥900, así que el teléfono y la tablet se
   quedaban sin ninguna navegación: para llegar a Condiciones había que recorrer once bloques.
   Esto es el mismo juego de seis enlaces en un `<details>` nativo —— sin JS, con teclado, y con
   su estado anunciado sin `aria-expanded` a mano. Referencia medida en `MV4`: Anthropic lleva
   logo + hamburguesa en el pliegue a 390 px. Y `MV2`: con más de cinco destinos, no una barra. */
/* A 390 px la cabecera lleva marca (110) + hamburguesa (40) + botón (206 con su texto entero),
   y con los dos huecos de 16 y el acolchado de 40 eso da 428: se salía 38 px, el visor crecía a
   422 y con él la página. Recortar el texto del botón fue peor —— quedaba «ablar de un
   expedient», porque está centrado y se come las dos puntas ——, así que lo que cede es el
   espacio, no la palabra: huecos de 8, el botón con menos acolchado y un punto menos de letra.
   Nadie pierde texto y los tres caben enteros. Desde 480 px vuelve todo a su tamaño. */
@media (max-width: 479px) {
  .cabeza { gap: .5rem; }
  .cabeza .marca { font-size: 1.0625rem; }
  .cabeza > .boton.primario.chico { padding-inline: .75rem; font-size: .9375rem; }
}
.menu-movil { flex: none; }
.menu-movil > details > summary {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -.25rem;   /* 44×44: el mínimo táctil de la casa */
  border-radius: 8px; cursor: pointer; list-style: none;
}
.menu-movil > details > summary::-webkit-details-marker { display: none; }   /* el triángulo de Safari */
.menu-movil > details > summary:hover { background: var(--crema-honda, rgba(0, 0, 0, .04)); }
.menu-movil > details > summary:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }
/* Tres barras dibujadas con la caja y sus dos pseudos: sin SVG y sin descarga. */
.barras, .barras::before, .barras::after {
  content: ""; display: block; width: 20px; height: 2px; border-radius: 4px; background: var(--tinta);
}
.barras { position: relative; }
.barras::before { position: absolute; top: -6px; }
.barras::after { position: absolute; top: 6px; }
.menu-movil > details[open] .barras { background: transparent; }            /* abierto: se vuelve una X */
.menu-movil > details[open] .barras::before { top: 0; transform: rotate(45deg); }
.menu-movil > details[open] .barras::after { top: 0; transform: rotate(-45deg); }
.menu-movil .menu-panel {
  position: absolute; top: 100%; z-index: 20;
  right: calc(1.25rem + env(safe-area-inset-right));   /* el acolchado de la cabecera */
  max-width: calc(100vw - 2.5rem);
  display: flex; flex-direction: column; min-width: 13rem; padding: .5rem;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--papel, #fff);
  box-shadow: 0 12px 32px rgba(16, 37, 30, .14);
}
.menu-movil .menu-panel a {
  color: var(--tinta); text-decoration: none; font-size: 1.0625rem;
  min-height: 44px; display: flex; align-items: center; padding: 0 .75rem; border-radius: 8px;
}
.menu-movil .menu-panel a:hover { background: var(--crema); color: var(--verde-vivo); }
.menu-movil .menu-panel a:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: -2px; }

/* ── botones. El verde vivo es para el control; no se mueve bajo el puntero. ── */
.boton, .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
}
.boton.chico { min-height: 44px; padding: 0 1rem; font-size: 1.0625rem; }
.primario, .cta { background: var(--verde-vivo); color: var(--blanco); }
.primario:hover, .primario:focus-visible, .cta:hover, .cta:focus-visible { background: var(--verde); }
.secundario { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
/* `:focus-visible` iba aparte: el de ratón veía el cambio y el de teclado no. */
.secundario:hover, .secundario:focus-visible { border-color: var(--tinta-suave); }
.claro { background: var(--blanco); color: var(--verde); }
.claro:hover, .claro:focus-visible { background: var(--verde-suave); color: var(--verde); }
.boton:focus-visible, .cta:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.botones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ── tipografía de secciones ── */
h1 { font-weight: 700; font-size: clamp(2.125rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: 1.3125rem; line-height: 1.2; }
/* Los titulares reparten sus palabras en renglones parejos: sin una sola palabra en el último («expediente.» solo bajo «Las
   cuatro etapas del»). Es un ajuste del navegador y no toca el texto; sin soporte queda el corte de siempre. */
h1, h2, h3 { text-wrap: balance; }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.45; color: var(--tinta-suave); max-width: 56ch; }
.nota { font-size: .9375rem; color: var(--tinta-suave); }
.suave { color: var(--tinta-suave); }
/* Aquí vivían `.pastilla`, `.pills` y `.pill`. Salieron cuando ningún HTML servido las usó:
   una cifra en píldora se lee como si todas tuvieran el mismo respaldo, y no lo tienen. */
.cejilla-clara { color: var(--verde-claro); font-size: .9375rem; font-weight: 500; }
/* Sólo para lector de pantalla: el aviso de que un enlace abre en otra pestaña. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.num.grande { font-size: 2.125rem; font-weight: 700; line-height: 1.1; }
.num.enorme { font-size: 2.75rem; font-weight: 700; line-height: 1; }
.etiqueta { font-size: .9375rem; color: var(--tinta-suave); }
.num-seccion { display: inline-block; margin-right: .75rem; color: var(--verde); font-size: 1.0625rem; vertical-align: middle; }
.num-seccion.clara { color: var(--verde-claro); }

/* ── hero de la portada: el producto a la vista ─────────────────────────────
   El primer pantallazo ES la tabla citable, no una descripción de ella.

   Lo que se retira: la tira 01-04 (lo mismo que dice, mejor, el bloque de las cinco
   piezas) y las cuatro cifras del caso, que bajan a su propia banda: en un pantallazo
   con la tabla del portal compiten dos bancos de cifras y ninguno se lee. */
.hero-portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: calc(3rem + env(safe-area-inset-top)) var(--borde-der) 3.5rem var(--borde-izq);
  background-color: var(--crema);
  text-align: left;
}
.hero-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; min-width: 0; }
.hero-derecha { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.hero-portada h1 { max-width: 15ch; }
.hero-portada .lede { max-width: 46ch; margin: 0; }
.hero-portada .botones { justify-content: flex-start; }

/* ── el portal, dentro de su marco ──
   No es una captura: es la tabla, servida. Una imagen del portal pesaba 73 KB y se
   veía blanda en pantallas densas; esto pesa poco más de 1 KB y se lee nítido. */
.portal-vista { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.marco-portal {
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.portal-barra {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
  padding: .75rem 1.25rem;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
}
.portal-barra strong { font-size: .9375rem; }
.portal-barra .portal-meta { font-size: .8125rem; color: var(--tinta-suave); }
/* Los conteos del hero son la réplica quieta de los filtros del portal, y son texto: cada uno con su punto de estado, sin
   cápsula ni borde. Con forma de filtro se leían como tocables. Los sellos de estado de las filas (`.est`) son otra cosa:
   son del lenguaje de estado y se quedan. */
.portal-chips { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--linea); }
.filtro {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--tinta);
}
/* El conteo va en la tinta plena, no en la suave: `--tinta-suave` sobre el blanco de la
   pastilla da 4.24:1 —— medido por píxeles, por debajo del 4.5 —— y el conteo es información,
   no adorno. La jerarquía la hace la cifra, que ya se lee distinta del rótulo. */
.filtro .n { color: var(--tinta); }
.filtro i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* El rombo es el de una discrepancia en el portal: mismo signo, misma forma. */
.filtro i.discrepa { background: var(--rojo); border-radius: 0; transform: rotate(45deg); }
.filtro i.cotejado { background: var(--verde-vivo); }
.filtro i.pendiente { width: 6px; height: 6px; background: transparent; border: 2px solid var(--ambar); }

.portal-tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.portal-tabla th {
  text-align: left; font-weight: 700; font-size: .8125rem; color: var(--tinta-suave);
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.portal-tabla td { padding: .75rem 1.25rem; border-bottom: 1px solid var(--linea); vertical-align: top; white-space: nowrap; }
.portal-tabla td.c-doc { white-space: normal; }
.portal-tabla tr:last-child td { border-bottom: 0; }
.portal-tabla .der { text-align: right; }
/* SIN SUBRAYADO. En el portal de verdad el folio abre el documento; en la tabla que sirve
   este sitio es un `<span>` dentro de una figura, y un subrayado verde en la primera pantalla
   promete un clic que no existe. El color se queda: es el del folio en el portal. */
.portal-tabla .folio { color: var(--verde); white-space: nowrap; }
.portal-tabla .c-doc { min-width: 0; }
.portal-tabla .dif { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--tinta-suave); }
.est { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: 999px; font-size: .8125rem; white-space: nowrap; }
.est i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.est.cotejado { background: var(--verde-suave); color: var(--verde); }
.est.cotejado i { background: var(--verde-vivo); }
.est.discrepa { background: var(--rojo-suave); color: var(--rojo-texto); }
.est.discrepa i { background: var(--rojo); border-radius: 0; transform: rotate(45deg); }
.portal-pie { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; padding: .75rem 1.25rem; background: var(--crema); border-top: 1px solid var(--linea); font-size: .8125rem; color: var(--tinta-suave); }
.portal-vista figcaption { font-size: .8125rem; color: var(--tinta-suave); }

/* ── el resumen del portal, dentro del mismo marco ──
   El bloque #el-portal servía una captura de 74,807 B: JPEG de un texto, 1100 px de origen
   para un hueco de ~695, la letra chica a ~7 px. El mismo defecto que este archivo argumenta
   dos comentarios más arriba para no poner una captura en el hero. Aquí no hay componente
   nuevo —— es `.marco-portal` otra vez —— solo el reparto del cuerpo y los dos tonos de cifra. */
/* Los dos tonos del portal: rojo para la discrepancia, ámbar para lo que falta. Van en la
   cifra y no en la etiqueta, porque la cifra es lo que se lee de lejos. */
.num.dif { color: var(--rojo-texto); }
.num.pen { color: var(--ambar); }
/* A `.est` le faltaba este estado: existían el cotejado y el discrepante, y el punto ámbar
   solo como filtro. El portal sí lo tiene, y este panel lo necesita en sus tres filas. */
.est.pendiente { background: var(--ambar-suave); color: var(--ambar-texto); }
.est.pendiente i { width: 6px; height: 6px; background: transparent; border: 2px solid var(--ambar); }

/* En móvil la tabla se queda con las cuatro columnas de prioridad —— folio, documento,
   importe y estado —— igual que el portal real, que también las recorta a 390 px. Una
   tabla que desborda la pantalla en el primer pantallazo no enseña el producto: lo esconde. */
@media (max-width: 720px) {
  .portal-tabla .c-pag, .portal-tabla .c-extra { display: none; }
  /* El botón de cotizar ya está pegado en la cabecera y se ve siempre: repetirlo aquí
     cuesta 105 px del primer pantallazo y no añade un destino nuevo. */
  .hero-portada .botones .boton.secundario { display: none; }
  .portal-chips { gap: .25rem 1rem; }
  .portal-tabla th, .portal-tabla td { padding: .5rem; font-size: .8125rem; }
  .portal-tabla th:first-child, .portal-tabla td:first-child { padding-left: .75rem; }
  .portal-tabla th:last-child, .portal-tabla td:last-child { padding-right: .75rem; }
  .portal-barra, .portal-chips, .portal-pie { padding-left: .75rem; padding-right: .75rem; }
}

/* Entre 721 y 919 px la tabla del hero mide 865 px con todas sus columnas y su marco (`overflow: hidden`) mide 679 a 858:
   «Estado», lo que enseña el hero, quedaba fuera. Pág. y Fecha, las menos importantes, se esconden hasta que cabe. Por
   debajo de 720 rige la variante del teléfono; desde 920 el marco mide 878 o más. */
@media (min-width: 721px) and (max-width: 919px) {
  .portal-tabla .c-pag, .portal-tabla .c-extra { display: none; }
}

@media (min-width: 1000px) {
  /* El texto en dos columnas: el titular a la izquierda, el lede y los botones a su
     derecha y alineados abajo, para que el portal empiece lo más arriba posible. */
  .hero-texto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: end; }
  .hero-portada h1 { max-width: 14ch; }
  .hero-derecha { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
}

.cifras { width: 100%; max-width: 1280px; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; text-align: left; }
.cifra { display: flex; flex-direction: column; gap: .25rem; }

/* ── bloques ── */
.bloque { padding: 4rem calc(1.25rem + env(safe-area-inset-right)) 4rem calc(1.25rem + env(safe-area-inset-left)); border-top: 1px solid var(--linea); }
.bloque.blanco { background: var(--blanco); }
/* DOS BLOQUES DE LA MISMA SUPERFICIE, SEGUIDOS. Pasa en la portada (#capacidades y #el-portal,
   los dos crema) y en la sucesión (dos blancos). La raya de arriba no cambia nada: quedan 8rem
   del mismo color partidos por una línea, y el lector no lee dos secciones, lee un hueco.
   Cambiar la superficie no se puede: los dos bloques sirven tarjetas BLANCAS, así que uno de
   ellos tiene que quedarse en crema. Lo que sí se puede es cerrar la costura: pegados, se leen
   como un movimiento, que es lo que son.
   El selector dice «crema después de crema» y «blanco después de blanco» sin nombrar ninguna
   sección: así lo arregla también para el par siguiente, que nadie ha escrito todavía. */
.bloque:not(.blanco):not(.oscuro) + .bloque:not(.blanco):not(.oscuro),
.bloque.blanco + .bloque.blanco { padding-top: 1.5rem; border-top: 0; }

/* FRANJA: un bloque que no es una parada, es un renglón. `#alcance` gastaba una sección de
   pantalla completa —— 8rem arriba y 8rem abajo, con un h2 de 44 px —— en la QUINTA repetición
   del mismo descargo de la página. La repetición la manda el contrato y no se discute; lo
   desproporcionado era el envase. Mismo texto y mismo sitio, sin la pantalla. */
.bloque.franja { padding-top: 2rem; padding-bottom: 2rem; }
.bloque.franja .contenedor { gap: .5rem; }
.titulo-franja { font-size: 1.3125rem; line-height: 1.2; letter-spacing: 0; }

/* El rótulo de una tarjeta que NO es cifra: mismo sitio en la tarjeta, otro peso visual. Con
   el estilo de cifra de 34 px, «Contraparte simulada» rompía el banco. */
.rotulo-tarjeta { display: block; font-size: 1.3125rem; line-height: 1.2; font-weight: 700; }
.bloque.oscuro {
  background-color: var(--verde-oscuro);
  color: var(--crema);
  border-top: 0;
  background-image: radial-gradient(rgba(251, 250, 248, 0.12) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.contenedor { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.contenedor.estrecho { max-width: 1100px; }
.contenedor.dos { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.contenedor.dos > div { display: flex; flex-direction: column; gap: 1.25rem; }
.encabezado-doble { display: flex; flex-direction: column; gap: 1rem; }
.encabezado-doble p { color: var(--tinta-suave); max-width: 44ch; }
.oscuro .encabezado-doble p { color: rgba(251, 250, 248, 0.72); }
.oscuro .cifra .etiqueta { color: rgba(251, 250, 248, 0.72); }
.rejilla { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* La tarjeta se levanta del papel. La oscura no lleva sombra: va sobre el verde noche, donde
   no se vería y sólo ensuciaría. */
.tarjeta { border: 1px solid var(--linea); border-radius: 16px; padding: 1.5rem; background: var(--blanco); display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--sombra-2); }
.tarjeta.oscura { box-shadow: none; }
/* La tarjeta se levanta por CONTRASTE DE SUPERFICIE, no sólo por la sombra. En el bloque blanco
   era `--blanco` sobre `--blanco`: el mismo valor exacto, y la sombra cargaba sola con separar
   dos planos del mismo color. Se alternan: papel sobre blanco, blanco sobre papel. */
.bloque.blanco .tarjeta:not(.oscura) { background: var(--crema); }
.bloque.blanco .tarjeta { background: var(--crema); }
.tarjeta strong { font-size: 1.3125rem; }
.tarjeta span { font-size: .9375rem; color: var(--tinta-suave); }
.tarjeta.oscura { background: rgba(251, 250, 248, 0.04); border-color: rgba(251, 250, 248, 0.14); color: var(--crema); }
.tarjeta.oscura span, .tarjeta.oscura p { color: rgba(251, 250, 248, 0.72); }
/* El título de una tarjeta de paso NO abre una sección: el h3 de un grupo
   quedaba al mismo nivel que los h3 de las tarjetas que agrupa. Pasa a `<strong>`, igual que
   ya hicieron los títulos de figura, y conserva su tamaño. */
.tarjeta-titulo { display: block; font-weight: 700; font-size: 1.75rem; line-height: 1.15; }
.tarjeta.oscura .num.grande { color: var(--crema); }

.checks { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.checks li { position: relative; padding-left: 1.75rem; font-size: .9375rem; color: var(--tinta); }
.checks li::before { content: ''; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--verde-vivo); }
.checks li::after { content: ''; position: absolute; left: 6px; top: calc(.2em + 4px); width: 4px; height: 8px; border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks.claros li { color: var(--crema); }


.nota.clara { color: rgba(251, 250, 248, 0.6); }

.condiciones { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.condiciones .fila { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.condiciones dt { font-weight: 700; }

.preguntas { display: flex; flex-direction: column; gap: 1.5rem; }
.pregunta h3 { margin-bottom: .5rem; }
.pregunta p { color: var(--tinta-suave); }

/* ── cierre y pie ── */
.cierre-caja {
  margin: 1.5rem calc(1.25rem + env(safe-area-inset-right)) 0 calc(1.25rem + env(safe-area-inset-left));
  padding: 4rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(137deg, var(--verde-oscuro) 0%, var(--verde) 100%);
  color: var(--crema);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.cierre-caja h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 20ch; }
.cierre-texto { color: rgba(251, 250, 248, 0.8); }
.enlace-claro { color: rgba(251, 250, 248, 0.85); }
/* Altura de toque de 44 px. Sin esto quedan en 23-26 px, por debajo del mínimo, y la sonda
   `hero` no los ve porque sólo mira `.cta`.
   Va con min-height sobre el propio enlace y NO con un `::after` que extienda el área: el
   pseudo-elemento agranda dónde se puede tocar pero no la caja que se mide, así que la sonda
   seguiría marcándolo y el arreglo no se podría comprobar. */
.enlace-claro,
.pie-enlace { display: inline-flex; align-items: center; min-height: 44px; }
/* Ninguno de los dos tenía estado bajo el puntero ni bajo el foco, en las cuatro páginas.
   `.enlace-claro` es el CTA secundario y vive sobre el gradiente verde oscuro. */
.enlace-claro:hover, .enlace-claro:focus-visible { color: var(--blanco); }
.pie-enlace:hover, .pie-enlace:focus-visible { color: var(--verde-vivo); }
/* El canal de Derechos ARCO: altura de toque de verdad y estado bajo el puntero. */
.canal { display: inline-flex; align-items: center; min-height: 44px; }
.canal:hover { color: var(--verde-vivo); }
.pie {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2.5rem var(--borde-der) 0 var(--borde-izq);
  padding: 2rem 0 calc(2.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: .9375rem;
}
.pie div { display: flex; flex-direction: column; gap: .25rem; }
.pie strong { color: var(--tinta); }
/* Los dos contactos van EN FILA. En columna, cada uno centra su texto en una caja de 44 px y el
   pie quedaba con dos huecos que se leían como renglones en blanco; quitar el gap no arregla nada
   —— el aire está dentro de la caja —— y tirar de los bordes hacia dentro con valores negativos
   solaparía las dos áreas de toque, que es peor que el hueco. En fila el alto de 44 px no se nota
   y el área queda intacta. Los dos documentos (el aviso y el contrato) saltan de línea con flex-basis y van juntos si caben. */
/* `div.pie-derecha` y no `.pie-derecha`: la regla de arriba es `.pie div`, que lleva clase +
   elemento y gana a una clase sola. Con el selector flojo sólo entraba `align-items` y el pie
   quedaba en columna y centrado, peor que antes. */
.pie div.pie-derecha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; }
.pie div.pie-derecha > span { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pie-enlace { color: var(--verde); }
.pie-caso { margin: 0 var(--borde-der) 0 var(--borde-izq); padding: 0 0 2rem; font-size: .9375rem; color: var(--tinta-suave); }

/* ── páginas de caso ── */
.hero-caso {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 1.5rem;
  padding: calc(3.5rem + env(safe-area-inset-top)) var(--borde-der-estrecho) 3rem var(--borde-izq-estrecho);
  background-color: var(--crema);
}
.hero-caso h1 { max-width: 20ch; font-size: clamp(2.125rem, 5.5vw, 4.5rem); }
.hero-caso .lede { margin: 0; max-width: 62ch; }

/* ── el primer pantallazo de una página de caso ──────────────────────────────────────────
   `.informe` lo llevan sólo las dos páginas de caso; el aviso conserva el hero centrado.
   El reparto: la procedencia en una línea plana, el titular, y pegada debajo su base ——
   material, medida y límite —— sin aire entre las dos. Lo que sigue entra cortado por el
   borde inferior a propósito: el primer pantallazo no cierra, abre. */
/* Aire abajo: el resumen de la barra (289 → 2,107) terminaba a 1-2 px de la línea de la sección 01. */
.hero-caso.informe { padding-bottom: 2rem; }
/* 44 px, no 72. Once palabras a 72 px son cinco renglones y ~390 px: media pantalla antes de
   que empiece nada. Y el titular de estas dos páginas tenía once palabras cuando la mediana de
   las doce referencias medidas es CINCO y el máximo nueve. */
.hero-caso.informe h1 { max-width: 26ch; font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
/* La procedencia va plana, sin pastilla verde: la pastilla es vocabulario de anuncio, que es
   la única de las tres capas de género que las fuentes contraindican por nombre. */
.procedencia { margin: 0; font-size: .9375rem; color: var(--tinta-suave); }

/* La base de la opinión: material, método y límite, pegados a la cifra y sin aire de por
   medio. No es una tabla de cuatro columnas —— eso obliga a casar etiqueta de fila con
   etiqueta de columna, que es justo lo que Larkin & Simon (1987) señalan que un buen diagrama
   EVITA, y es el mecanismo por el que el apéndice subido al hero se sentía como trabajo. */
/* El mismo ancho que el resumen de abajo. Sin tope, la fila corre los 1,400 px de una laptop
   y deja renglones de 110 caracteres: el doble del alto de la banda 45-85 del contrato. */
.base { display: grid; gap: 0; width: 100%; max-width: 1080px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-3); overflow: hidden; }
.base > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: 1rem 1.5rem; border-top: 1px solid var(--linea); }
.base > div:first-child { border-top: 0; }
.base dt { font-size: .8125rem; color: var(--tinta-suave); }
.base dd { margin: 0; font-size: 1.0625rem; }
@media (min-width: 900px) {
  .base > div { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
  .base dt { text-align: right; }
}

.resumen, .figura {
  width: 100%;
  max-width: 1080px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.resumen { margin-top: 1.5rem; gap: 0; }
/* El rótulo «Resumen» era un <span> suelto como hijo directo del <dl>, que sólo admite dt, dd
   y div. Ahora el <dl> va dentro y no pinta caja propia. */
.resumen > dl { display: contents; }
.etq { font-size: .8125rem; letter-spacing: 1.5px; color: var(--verde); font-weight: 700; text-transform: uppercase; }
.res { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: .75rem 0; border-top: 1px solid var(--linea); font-size: 1.0625rem; }
.resumen .res:first-of-type { border-top: 0; }
.res dt { font-size: .8125rem; letter-spacing: 1.5px; color: var(--verde); font-weight: 700; text-transform: uppercase; }

.figura figcaption { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
/* El título de una figura NO es un encabezado de sección: dentro de un figcaption metía un
   h3 en el árbol de encabezados sin sección debajo, y en las páginas de caso eso daba un salto
   h1 → h3 antes del primer h2. El figcaption ya es el nombre accesible de la figura. */
.figura .figura-titulo { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.fuente { font-size: .9375rem; color: var(--tinta-suave); }
.figura.chica { padding: 1.25rem; }
.figura.clara { background: rgba(251, 250, 248, 0.04); border-color: rgba(251, 250, 248, 0.14); color: var(--crema); }
.figura.clara .figura-titulo { color: var(--crema); }
.fila-barra { display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: center; padding: .5rem 0; }
.rotulo { font-size: .9375rem; color: var(--tinta-suave); }
.figura.clara .rotulo { color: rgba(251, 250, 248, 0.72); }
.valor { font-size: .9375rem; font-weight: 700; }
.barra { display: flex; width: 100%; background: transparent; border-radius: 4px; overflow: hidden; }
.seg { display: block; height: 100%; }
.seg.verde { background: var(--verde); }
.seg.vivo { background: var(--verde-vivo); }
.seg.gris { background: var(--linea-fuerte); }
.seg.suave { background: var(--verde-suave); }
.seg.rojo { background: var(--rojo); }
.seg.claro { background: rgba(251, 250, 248, 0.25); }
.leyenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9375rem; color: var(--tinta-suave); }
.leyenda li { display: inline-flex; align-items: center; gap: .5rem; }
.leyenda li::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--verde); }
.leyenda .l-gris::before { background: var(--linea-fuerte); }
.leyenda .l-suave::before { background: var(--verde-suave); }
.leyenda .l-rojo::before { background: var(--rojo); }
.dos-col { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.hero-cifra { display: flex; flex-direction: column; gap: .25rem; }

/* La línea de tiempo del caso. Su cifra de cierre va como texto, no como píldora: lo que no es control no lleva
   forma de control (la píldora verde rellena se leía como botón). */
.linea { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.linea > p { color: var(--tinta-suave); }
.linea > .linea-cifra { font-weight: 600; color: var(--verde); }
.hitos { display: flex; flex-direction: column; gap: 1rem; }
.hitos li { display: flex; gap: 1rem; align-items: flex-start; }
.hitos li div { display: flex; flex-direction: column; gap: .25rem; }
.hitos li div span { color: var(--tinta-suave); font-size: .9375rem; }
.chip { flex: none; min-width: 4.5rem; padding-top: .25rem; color: var(--verde); font-size: .8125rem; font-weight: 700; }
.lede.clara { color: rgba(251, 250, 248, 0.72); }

.tabla-marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: 16px; background: var(--crema); padding: .25rem 1rem .75rem; }
table.apendice { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9375rem; }
table.apendice th, table.apendice td { text-align: left; vertical-align: top; padding: .75rem .75rem; border-top: 1px solid var(--linea); }
table.apendice thead th { border-top: 0; color: var(--tinta-suave); font-weight: 500; font-size: .9375rem; }
table.apendice th { font-weight: 700; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* En el teléfono no se desliza nada: cada renglón se apila como bloque. Arriba, una vez, el nombre de la columna
   del renglón; en cada bloque, el renglón (su th, en 600) y debajo cada dato con el rótulo de su columna delante
   (`.col-movil`, texto que pone genera.py desde la cabecera). La tabla sigue en `display: table`. */
.col-movil { display: none; }
@media (max-width: 640px) {
  table.apendice { min-width: 0; }
  table.apendice thead, table.apendice tbody, table.apendice tr, table.apendice th, table.apendice td { display: block; }
  /* los encabezados de los datos siguen en el árbol (rol columnheader) para el lector de pantalla; a la vista va
     el rótulo de cada dato. El del renglón se ve, una vez, arriba */
  table.apendice thead th:not(:first-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.apendice thead th:first-child { padding-top: .75rem; }
  table.apendice tr { padding: .75rem 0; border-top: 1px solid var(--linea); }
  table.apendice thead tr { padding: 0; }
  table.apendice thead tr, table.apendice tbody tr:first-child { border-top: 0; }
  table.apendice th, table.apendice td { padding: 0; border-top: 0; }
  .tabla-marco table.apendice th[scope="row"] { font-weight: 600; }
  table.apendice td { margin-top: .5rem; }
  /* 4 px de aire: la cortina del valor (inset -1px) no toca el rótulo */
  table.apendice .col-movil { display: block; margin-bottom: 4px; font-size: .8125rem; color: var(--tinta-suave); }
}


/* ── botones de las tarjetas de caso a la misma altura; tarjetas oscuras sobre fondo claro ── */
.rejilla.dos > .tarjeta { height: 100%; }
.tarjeta .boton { margin-top: auto; align-self: flex-start; }
.subtitulo-claro { color: var(--verde-claro); font-size: 1.0625rem; margin-top: .5rem; }
/* «Cada caso indica cuáles usó» lo promete la portada y ninguna de las dos páginas lo decía.
   Va con las palabras de la portada, no con las del caso: había tres taxonomías del método sin
   una sola palabra en común entre ellas. */
.piezas-usadas { color: var(--verde); font-size: .9375rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.cejilla-verde { color: var(--verde-vivo); font-size: .9375rem; font-weight: 500; }
.rejilla.claras .tarjeta.oscura { background: var(--verde-oscuro); border-color: var(--verde-oscuro); }
.bloque.blanco .figura.clara { background: var(--verde-oscuro); border-color: var(--verde-oscuro); }

/* ── revelado al entrar en pantalla.
   Quien esconde es .espera, y esa clase la pone el mismo bloque de JS que después
   pone .dentro. Sin JS no hay .espera: todo se ve, sin transición pendiente. ── */
/* `:not(.dentro)` NO es decorativo. `.sube.espera` y `.sube.dentro` tienen la misma
   especificidad, así que la segunda ganaba SÓLO por estar un renglón después: mover este
   bloque cinco líneas arriba dejaba el sitio entero en opacity 0 y ninguna sonda lo caza,
   porque el HTML no cambia. Con `:not(.dentro)` el orden deja de decidir. */
.sube.espera:not(.dentro) { opacity: 0; transform: translateY(1.25rem); transition: none; }
/* .28s y una curva que FRENA, no que arranca. `.6s ease` para 20 px de recorrido es lento
   —— el bloque sigue moviéndose mucho después de que el ojo ya lo leyó —— y `ease` arranca
   despacio, que es la curva de algo que sale, no de algo que entra. */
.sube.dentro { opacity: 1; transform: none; transition: opacity .28s cubic-bezier(0, 0, .2, 1), transform .28s cubic-bezier(0, 0, .2, 1); }

/* Modo quieto: sin animación y con todo a la vista.
   `html.quieto` va EN LA LISTA, no sólo sus descendientes. `scroll-behavior: smooth` vive en
   `html` (arriba), y `html.quieto *` es un combinador descendiente: selecciona a los hijos de
   `html` y nunca a `html` mismo, así que por esta vía el scroll seguía animado. La ruta de
   `prefers-reduced-motion` usa `*` pelón, que sí alcanza a `html`: dos caminos al mismo estado
   daban dos comportamientos, y el contrato de página promete uno. */
html.quieto, html.quieto *, html.quieto *::before, html.quieto *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── norma y correlaciones (páginas de caso) ── */
.apendice.norma th[scope="row"] { font-weight: 400; }
/* Las seis materias son una lista, no controles: texto en línea separado por puntos medios, sin borde ni fondo. Una
   cápsula con borde se lee como filtro. El punto va a la izquierda de cada una (menos la primera), a media distancia de la
   anterior. La lista se corre a la izquierda esa misma distancia y se recorta por ahí (`clip-path`): el punto de la materia
   que abre un renglón cae fuera de lo recortado y no se ve, y ninguno queda colgado al final. Así ningún renglón empieza ni
   termina con un separador, a ningún ancho. El segundo `content` lo esconde a los lectores de pantalla. */
.materias { --hueco: 1.8rem; display: flex; flex-wrap: wrap; gap: .25rem 0; margin: .75rem 0 2rem calc(-1 * var(--hueco));
  clip-path: inset(-.5rem 0 -.5rem var(--hueco)); font-size: 1.0625rem; }
.materias li { position: relative; margin-left: var(--hueco); }
.materias li:not(:first-child)::before { content: "·"; content: "·" / ""; position: absolute; left: calc(var(--hueco) / -2); transform: translateX(-50%); color: var(--tinta-suave); }
.ejemplo { border: 1px solid var(--linea); border-radius: 16px; padding: 1.75rem; background: var(--blanco);
  display: flex; flex-direction: column; gap: 1.25rem; }
.ejemplo-par { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: stretch; }
.ejemplo-caja { border: 1px solid var(--linea); border-radius: 16px; padding: 1.25rem; background: var(--crema);
  display: flex; flex-direction: column; gap: .5rem; }
.ejemplo-caja .rotulo { font-size: .8125rem; color: var(--tinta-suave); letter-spacing: .4px; }
.ejemplo-caja strong { font-size: 1.0625rem; font-weight: 400; line-height: 1.4; }
/* el nexo lleva el sello «correlación»; en el teléfono va en renglón y deja libre la línea del cotejo (a 40 px) */
.ejemplo-nexo { display: flex; align-items: center; column-gap: 8px; padding: .25rem 0 .25rem 56px; font-size: .9375rem; color: var(--tinta-suave); }
.ejemplo-par { position: relative; }
.ejemplo-caja { position: relative; z-index: 1; }
.ejemplo .sello-c { display: inline-flex; }
.ejemplo-cierre .mv-valor, .tabla-marco .mv-valor { display: block; }
.linea-cotejo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.linea-cotejo path { fill: none; stroke: var(--verde-vivo); stroke-width: 1.5; }
.linea-cotejo circle { fill: var(--verde); }
/* 03 · los dos planteamientos, dibujados sin texto, con su sello; la barra de las citas crece desde la izquierda */
.revision-cr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.mesa-rev { display: flex; gap: 16px; }
.plant { position: relative; flex: none; width: 136px; height: 128px; border: 1px solid var(--linea); border-radius: 16px; background: var(--crema); }
.plant .sello-c { position: absolute; left: 16px; top: 52px; z-index: 2; }
.barra.crece { background: var(--linea-fuerte); }
.barra.crece .seg.verde { transform-origin: left; }
/* la cortina de la norma es del crema de su marco */
.tabla-marco { --fondo: var(--crema); }
/* 07 · la bandeja del caso va sobre crema: el marco se aclara y su cortina con él */
.bloque:not(.blanco) .marco-ent { background: var(--blanco); --fondo: var(--blanco); }
.ejemplo-cierre { border-top: 1px solid var(--linea); padding-top: 1.25rem; font-size: 1.3125rem; line-height: 1.45; }

/* ── anchos ── */
@media (min-width: 600px) {
  .rejilla.dos, .rejilla.cuatro, .dos-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ejemplo-par { grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr); gap: 0; align-items: center; }
  /* 16 px abajo: la línea del cotejo corre 10 px arriba del borde de las cajas y el sello queda arriba de ella */
  .ejemplo-nexo { flex-direction: column; justify-content: center; row-gap: 8px; padding: 0 12px 16px; }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .condiciones .fila { grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; }
  .res { grid-template-columns: 160px minmax(0, 1fr); gap: 1.25rem; }
  .fila-barra { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 1rem; }
  .pie { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .pie-derecha { align-items: flex-end; }
  .encabezado-doble { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 2.5rem; }
  .resumen, .figura { padding: 2rem 2.25rem; }
}
@media (min-width: 900px) {
  .menu { display: flex; }
  .menu-movil { display: none; }
  .bloque { padding-top: 6rem; padding-bottom: 6rem; }
  .rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contenedor.dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; }
  /* El hero de la portada respira menos arriba que el de caso: lo que va debajo del titular
     es la tabla del portal, y cada píxel de aire aquí se lo come al primer pantallazo. */
  .hero-portada { padding-top: calc(4rem + env(safe-area-inset-top)); padding-bottom: 4.5rem; }
  .hero-caso { padding-top: calc(6rem + env(safe-area-inset-top)); padding-bottom: 4.5rem; }
  .hero-caso.informe { padding-bottom: 3rem; }
  .cierre-caja { margin-left: var(--borde-izq); margin-right: var(--borde-der); padding: 6rem 3rem; }
}

/* ── el aviso de privacidad ──
   Un documento normativo, no una portada: el aire es el de un texto que se lee seguido, la
   jerarquía la lleva el número de apartado, y lo que separa es la regla horizontal. */
.bloque.legal { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.bloque.legal h2 { font-size: 1.75rem; margin-bottom: 1rem; }
.bloque.legal .contenedor { gap: 1rem; }
.bloque.legal p { max-width: 68ch; }
.bloque.legal .checks { max-width: 68ch; }
.bloque.legal .condiciones { margin-top: .5rem; }

/* ── la portada: el servicio primero, los casos como prueba ──────────────────────────────
   Orden: trabajos, recorrido, dónde corre, método, lo que recibe, tiempo, casos. Todo va en su
   estado final; nada se mueve todavía. Los tamaños son los ocho de la escala y el espaciado va
   en múltiplos de 4. */
.portada .bloque h2 { font-size: clamp(1.75rem, 3.6vw, 2.125rem); line-height: 1.15; }
.portada .encabezado-doble p { max-width: 46ch; }
.n-paso { font-size: .9375rem; font-weight: 700; color: var(--verde-vivo); letter-spacing: .04em; }
.punto { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--linea-fuerte); flex: none; margin-top: 8px; }

/* ── dibujos: facsímiles y escenas, con los datos del portal de muestra ── */
.esc { position: relative; width: 300px; max-width: 100%; height: 240px; overflow: hidden; border: 1px solid var(--linea);
  border-radius: 8px; background: var(--crema); color: var(--tinta); font-size: .8125rem; line-height: 1.3; }
.esc.blanca { background: var(--blanco); }
.sheet { position: absolute; background: var(--blanco); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-1); transform-origin: 50% 50%;
  transform: rotate(var(--rot, 0deg)); }
.sheet i { position: absolute; left: 10%; display: block; height: 2px; background: rgba(35, 40, 43, 0.14); }
.sheet i.f { background: rgba(35, 40, 43, 0.32); }
.sheet i.v { height: 3px; background: var(--verde-vivo); }
.sheet i.r { height: 3px; background: var(--rojo); }
.sheet b { position: absolute; left: 6px; bottom: 4px; font-size: .8125rem; line-height: 1; font-weight: 400; color: var(--tinta-suave); }
/* La página velada: el papel apagado y sus renglones casi borrados; el rótulo conserva su contraste. */
.sheet.vel { background: var(--linea); }
.sheet.vel i { background: rgba(35, 40, 43, 0.08); }
.mt { position: absolute; background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
.mt .r { position: relative; display: grid; column-gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--linea); align-items: center; }
.mt .r:last-child { border-bottom: 0; }
.mt .h { color: var(--tinta-suave); background: var(--crema); }
.mt .r.off { color: var(--tinta-suave); }
.mt .d { text-align: right; }
/* La discrepancia se encierra en rojo; la partida sin comprobante, con el guion del «todavía no». */
.mt .r.punteada { outline: 1px dashed var(--ambar); outline-offset: -2px; }
.mt .est { padding: 0 4px; }
.mt.estrecha .r { column-gap: 4px; }
/* Un rótulo de la ilustración no es un control: sin fondo ni borde, el ícono de 14 px en línea y el texto
   en verde. Las píldoras (.est) son otra cosa: el lenguaje de estado del sitio. */
.tag { position: absolute; display: inline-flex; align-items: center; column-gap: 4px; height: 24px; color: var(--verde);
  font-size: .8125rem; line-height: 1; white-space: nowrap; }
.tag.estatico { position: static; }
.tag svg { flex: none; width: 14px; height: 14px; }
.fila-est.rotulos { column-gap: 16px; }
/* Lo que va uno debajo del otro en un dibujo (Entregar; en Trabajos, la cita y dos tablas con su rótulo) va en
   flujo: si una parte crece, empuja a las que siguen (pila() en genera.py) */
.pila-esc { position: absolute; display: flex; flex-direction: column; align-items: flex-start; }
.esc .pila-esc > * { position: static; }
.esc .pila-esc > .trazo { position: relative; inset: auto; width: 100%; height: 29px; }
.trazo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.acto.por-cargar .punta-dib, .sale.por-cargar .punta-dib { opacity: 0; }
.video { position: absolute; width: 104px; height: 72px; border-radius: 4px; background: var(--tinta); color: var(--crema);
  display: flex; align-items: center; justify-content: center; }
.video span { position: absolute; right: 8px; bottom: 4px; font-size: .8125rem; }
.cita { position: absolute; width: 268px; padding: 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--crema); }
.cita-cab { display: flex; justify-content: space-between; align-items: center; column-gap: 8px; }
.cita-cab b { color: var(--verde); }
.cita p { margin-top: 8px; color: var(--tinta-suave); }
.cita p b { color: var(--tinta); }
.cita .cita-txt { font-style: italic; color: var(--tinta); }
.fila-est { position: absolute; display: flex; align-items: center; column-gap: 4px; }
.relacion { position: absolute; width: 200px; height: 212px; padding: 12px; border: 1px solid var(--linea-fuerte); background: var(--blanco);
  box-shadow: var(--sombra-1); display: flex; flex-direction: column; }
.relacion > span { color: var(--tinta-suave); }
.relacion dl { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 4px; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--linea); }
.relacion dt { color: var(--tinta-suave); }
.relacion dd { text-align: right; }
.relacion .total { font-weight: 700; color: var(--tinta); border-top: 1px solid var(--linea); padding-top: 4px; }
.relacion .firma { margin-top: auto; padding-top: 4px; border-top: 1px solid var(--tinta); }
.marca-conv { position: absolute; width: 104px; padding: 4px 8px; border-radius: 4px; }
.marca-conv b { display: block; }
.marca-conv.rojo { background: var(--rojo-suave); color: var(--rojo-texto); }
.marca-conv.verde { background: var(--verde-suave); color: var(--verde-oscuro); }
/* La ficha de la norma en las escenas del Método. Se llamaba `.norma` y le caía también a `table.apendice.norma`
   del caso (posición absoluta y borde verde), desde la R-b. */
.ficha-norma { position: absolute; right: 10px; display: flex; flex-direction: column; row-gap: 4px; padding: 8px; border: 1px solid var(--verde-vivo);
  border-radius: 8px; background: var(--blanco); }
.ficha-norma b { color: var(--verde); }
.ficha-norma .cursiva { font-style: italic; }
.ficha-norma .falta { color: var(--ambar-texto); border-bottom: 2px solid var(--ambar); }
.ficha-norma .suave b { color: var(--verde); }
.nota-dib { position: absolute; color: var(--tinta-suave); white-space: nowrap; }
.nota-dib.rojo { color: var(--rojo-texto); font-weight: 700; }
.en { position: absolute; }
.rombo { display: inline-block; width: 8px; height: 8px; margin-right: 4px; background: var(--rojo); transform: rotate(45deg); vertical-align: middle; }
.est-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-vivo); vertical-align: middle; }
.est-punto.discrepa { border-radius: 0; background: var(--rojo); transform: rotate(45deg); }
.est-punto.pendiente { width: 8px; height: 8px; background: transparent; border: 2px solid var(--ambar); }
.escena { width: 100%; max-width: none; height: 240px; background: var(--blanco); }
.escena .lienzo { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%) scale(1.15); }
.est.anillo { position: relative; }
.est svg { flex: none; }

/* ── trabajos: un <details> por trabajo; en escritorio, con JS, lista y panel ── */
.trabajos, .t-paneles { display: flex; flex-direction: column; gap: 8px; }
.trabajo { border: 1px solid var(--linea); border-radius: 16px; background: var(--crema); }
.trabajo > summary { list-style: none; display: flex; align-items: flex-start; column-gap: 12px; min-height: 44px; padding: 12px 16px; cursor: pointer; }
.trabajo > summary::-webkit-details-marker { display: none; }
.trabajo > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; border-radius: 16px; }
.trabajo[open] > summary .punto, .t-tab[aria-selected="true"] .punto { background: var(--verde-vivo); border-color: var(--verde-vivo); }
.t-tit, .t-tab > span:last-child { min-width: 0; }
.t-tit b, .t-tab b { display: block; font-weight: 700; line-height: 1.3; }
.t-frase { display: block; font-size: .9375rem; color: var(--tinta-suave); }
.flecha { margin-left: auto; margin-top: 4px; flex: none; color: var(--tinta-suave); display: flex; }
.trabajo[open] > summary .flecha { transform: rotate(180deg); }
.t-cuerpo { display: flex; flex-direction: column; gap: 20px; padding: 16px; background: var(--blanco); border-top: 1px solid var(--linea); border-radius: 0 0 16px 16px; }
.t-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.t-mitad { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.t-rot { font-size: .9375rem; font-weight: 700; letter-spacing: .04em; color: var(--tinta-suave); }
.t-mitad p, .t-specs dd, .t-detiene { font-size: .9375rem; }
.t-puente { display: none; }
.t-specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--linea); }
.t-specs dt { font-size: .9375rem; font-weight: 700; color: var(--verde); }
.t-specs dd { color: var(--tinta-suave); }
.t-detiene { display: flex; align-items: flex-start; column-gap: 8px; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--tinta-suave); }
.t-detiene .alto { flex: none; margin-top: 4px; color: var(--ambar); display: flex; }
.t-detiene b { color: var(--tinta); }
.t-lista { display: flex; flex-direction: column; gap: 4px; }
.t-lista[hidden] { display: none; }
.t-tab { display: flex; align-items: flex-start; column-gap: 12px; width: 100%; min-height: 44px; padding: 12px 16px; border: 1px solid transparent;
  border-radius: 8px; background: none; font: inherit; color: var(--tinta-suave); text-align: left; cursor: pointer; }
.t-tab b { color: var(--tinta); }
.t-tab:hover { border-color: var(--linea); }
.t-tab[aria-selected="true"] { background: var(--crema); border-color: var(--linea-fuerte); }
.t-tab:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.trabajos.pestanas { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.pestanas .trabajo { box-shadow: var(--sombra-2); }
.pestanas .trabajo > summary { padding: 32px 32px 0; cursor: default; }
.pestanas .trabajo > summary .punto, .pestanas .trabajo > summary .flecha { display: none; }
.pestanas .t-tit b { font-size: 1.75rem; line-height: 1.2; }
.pestanas .t-cuerpo { padding: 20px 32px 32px; background: none; border-top: 0; }
@media (min-width: 700px) {
  .t-par { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 16px; }
  .t-puente { display: block; position: relative; align-self: stretch; }
  .t-puente::before { content: ''; position: absolute; left: -10px; right: 0; top: 156px; height: 1px; background: var(--verde); opacity: .45; }
  .t-punta { position: absolute; right: -10px; top: 150px; fill: var(--verde); }
  .t-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── el recorrido: en el teléfono, un riel a cada lado (el izquierdo del despacho, el derecho de
   Expedix) y cada tarjeta corrida hacia el suyo; en escritorio, dos carriles con el eje al
   centro y la cremallera: dos pasos seguidos en carriles opuestos comparten altura. El mismo
   marcado; la rejilla coloca cada pieza con su `grid-row` y el teléfono sigue el orden del DOM. ── */
.carriles { position: relative; display: flex; flex-direction: column; gap: 48px; --ny: 56px; }
.carriles::before, .carriles::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--verde); }
.carriles::before { left: 7px; }
.carriles::after { right: 7px; }
.cab-carriles { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; min-height: 32px;
  background: var(--crema); border-bottom: 1px solid var(--linea); font-size: .9375rem; font-weight: 700; color: var(--verde); }
.r-paso, .acuse { position: relative; z-index: 1; width: calc(100% - 58px); margin-left: 18px; display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 1px solid var(--linea); border-radius: 16px; text-align: left; }
/* El marco de lo que recibe el despacho lo dibuja su SVG (punteado antes de llegar el envío, lleno al llegar). */
.acuse { border-color: transparent; }
.r-paso::after, .acuse::after, .est-caja::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--verde-vivo); border-radius: 16px;
  opacity: 0; pointer-events: none; }
.r-paso { background: var(--blanco); box-shadow: var(--sombra-1); }
.r-paso.lado-der { margin-left: 40px; }
.r-paso.centro { margin-left: 29px; }
.r-paso h3 { margin-top: 4px; }
.r-paso p { font-size: .9375rem; }
.actor-r { position: absolute; top: -22px; left: 8px; font-size: .8125rem; font-weight: 700; line-height: 16px; color: var(--verde); white-space: nowrap; }
.lado-der > .actor-r { left: auto; right: 8px; }
/* Qué lleva cada envío: un rótulo quieto, parte del diagrama. En el teléfono, en el renglón de abajo del
   cruce entre rieles, del lado contrario al riel del que recibe (por ahí baja el viajero). */
.envio { position: absolute; top: -22px; font-size: .8125rem; font-weight: 700; line-height: 16px; color: var(--verde);
  white-space: nowrap; background: var(--crema); pointer-events: none; }
.r-paso > .envio { left: -14px; }
.acuse > .envio { right: -14px; }
.env-esc, .punta { display: none; }
.centro > .actor-r { left: 50%; transform: translateX(-50%); }
.nodo { position: absolute; top: var(--ny); left: -19px; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--verde-vivo); border-radius: 50%;
  background: var(--blanco); box-shadow: 0 0 0 4px var(--crema); z-index: 2; }
.nodo::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--verde); }
.lado-der > .nodo, .centro > .nodo.der { left: auto; right: -19px; }
.centro > .nodo.izq { left: -30px; }
.centro > .nodo.der { right: -30px; }
.tick { position: absolute; top: var(--ny); left: -11px; width: 11px; height: 2px; margin-top: -1px; background: var(--verde-vivo); }
.lado-der > .tick { left: auto; right: -11px; }
.centro > .tick { width: 22px; left: -22px; }
.centro > .tick.der { left: auto; right: -22px; }
.nodo-doble { display: none; }
.acuse { background: var(--crema); }
.acuse-cab { display: flex; align-items: center; column-gap: 8px; margin-top: 4px; }
.acuse-cab .rotulo { font-size: .9375rem; font-weight: 700; color: var(--tinta); }
.acuse-hoja { display: none; }
.acuse-hoja g, .acuse-glifo g { fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recibe { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--linea); font-size: .8125rem; line-height: 1.5; color: var(--tinta-suave); }
.acuse > .recibe { margin-top: 0; padding-top: 0; border-top: 0; }
.carga { display: flex; flex-direction: column; }
.fila-c { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; padding: 4px 0; }
.fila-c dt { font-size: .8125rem; line-height: 1.5; color: var(--tinta-suave); }
.fila-c dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.fila-c .est { vertical-align: middle; }
.fila-c .det { display: block; margin-top: 4px; }
.g { white-space: nowrap; }
.rutas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.rutas .ruta { fill: none; stroke: var(--verde); stroke-width: 1.5; opacity: .6; }
.rutas .chev { fill: var(--verde); }
@media (min-width: 1000px) {
  .carriles { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); row-gap: 12px; column-gap: 40px; --ny: 64px; }
  .carriles::before { left: 50%; margin-left: -1px; top: 44px; }
  .carriles::after, .actor-r, .solo-movil, .centro > .nodo, .centro > .tick, .acuse > .nodo, .acuse > .tick, .acuse-glifo { display: none; }
  .cab-carriles { position: static; grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    min-height: 0; background: none; border-bottom: 0; }
  .cab-carriles span { padding: 0 4px 8px; border-bottom: 1px solid var(--linea-fuerte); }
  .cab-carriles span:last-child { grid-column: 3; text-align: right; }
  .r-paso, .acuse { width: auto; margin-left: 0; }
  .r-paso { align-self: start; padding: 20px 24px; box-shadow: var(--sombra-2); }
  .r-paso.lado-der, .r-paso.centro { margin-left: 0; }
  .r-paso p { font-size: 1.0625rem; line-height: 1.5; }
  .r-paso.centro { justify-self: center; width: 60%; margin: 12px 0; padding-top: 28px; align-items: center; text-align: center; }
  .lado-izq > .nodo { left: auto; right: -41px; }
  .lado-der > .nodo { right: auto; left: -41px; }
  .lado-izq > .tick { left: auto; right: -33px; width: 32px; }
  .lado-der > .tick { right: auto; left: -33px; width: 32px; }
  .nodo-doble { display: block; position: absolute; top: -1px; left: 50%; width: 32px; height: 16px; margin: -8px 0 0 -16px; border: 2px solid var(--verde-vivo);
    border-radius: 999px; background: var(--blanco); box-shadow: 0 0 0 4px var(--crema); overflow: hidden; }
  .nodo-doble::before, .nodo-doble::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: var(--verde); }
  .nodo-doble::before { left: 0; }
  .nodo-doble::after { right: 0; }
  .acuse:not(.bandeja) > .band-marco { display: none; }
  .acuse { justify-self: end; align-self: center; width: auto; margin-right: 24px; padding: 0; border: 0; background: none; align-items: center; }
  .acuse > .acuse-cab { flex-direction: column; row-gap: 4px; }
  .acuse-hoja { display: block; }
  .acuse-cab .rotulo { font-size: .8125rem; font-weight: 400; color: var(--tinta-suave); }
  .acuse.bandeja { align-self: start; width: 100%; max-width: 380px; margin-right: 0; padding: 16px 20px; border: 1px solid transparent; border-radius: 16px;
    background: var(--crema); align-items: stretch; }
  .acuse.bandeja > .acuse-cab { flex-direction: row; column-gap: 12px; margin-top: 8px; }
  .acuse.bandeja .rotulo { font-size: .9375rem; font-weight: 700; color: var(--tinta); }
  .fila-c { grid-template-columns: fit-content(45%) minmax(0, 1fr); }
  /* Con `fit-content` por renglón cada uno tomaba el ancho de su propia etiqueta y los valores arrancaban en 975, 946 y 905
     en «Cotización». Las etiquetas de una carga comparten UNA columna (subcuadrícula): el ancho es el de la más larga y
     todos los valores arrancan en la misma x. Sin subcuadrícula queda lo de arriba. */
  @supports (grid-template-columns: subgrid) {
    .r-paso .carga, .acuse .carga { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); column-gap: 16px; }
    .r-paso .fila-c, .acuse .fila-c { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: normal; }
  }
  .rutas .ruta { stroke-width: 1; opacity: .45; }
  /* el rótulo va con el viajero: del lado del que envía, sobre el tramo por donde sale, a 24 px de su
     trazo (la mitad del viajero y 2 px) */
  .env-mov { display: none; }
  .env-esc { display: block; }
  .lado-izq > .env-esc { left: calc(100% + 4px); top: 8px; width: max-content; max-width: 66px; white-space: normal; }
  .lado-der > .env-esc { left: auto; right: calc(100% + 4px); top: 24px; }
  .acuse:not(.bandeja) > .envio { top: 5px; }
}

/* ── dónde corre cada parte: tres fichas y el límite del borrado ── */
.banda .contenedor { gap: 24px; }
.donde-linea { max-width: 92ch; font-size: .9375rem; }

/* ── los flujos: el proceso del caso (A1) y «Dónde corre». Estaciones con su nodo, su título, su subtítulo o
   renglón de origen, y filas que cargan al llegar lo que las produce; cada envío sale de quien lo manda, con su
   rótulo fijo del lado por donde sale el viajero. En columna hasta 1,199 px; en fila desde 1,200. ── */
.flujo { position: relative; --ny: 26px; display: flex; flex-direction: column; gap: 72px; max-width: 560px; }
.est-caja { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 20px 24px;
  border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); --fondo: var(--blanco); box-shadow: var(--sombra-1); }
.est-caja h3 { font-size: 1.3125rem; line-height: 1.2; }
.est-caja .sub { font-size: .9375rem; line-height: 1.45; color: var(--tinta-suave); }
.est-caja .carga { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--linea); }
.est-caja .recibe + .carga { margin-top: 0; padding-top: 0; border-top: 0; }
.flujo .fila-c { grid-template-columns: minmax(0, 1fr); }
.flujo .nodo { top: auto; bottom: -8px; left: 50%; right: auto; margin: 0 0 0 -8px; }
/* el rótulo de lo que manda: a la izquierda de la bajada (en fila, arriba de su salida); el regreso, del otro lado */
.flujo .envio { right: calc(50% + 66px); left: auto; top: calc(100% + 16px); z-index: 3; background: none; text-align: right; }
.flujo .envio.regreso { right: auto; left: calc(50% + 66px); top: auto; bottom: calc(100% + 16px); text-align: left; }
.flujo .viajero { width: 36px; height: 44px; }
.flujo .punta { display: block; position: absolute; left: 0; top: 0; width: 10px; height: 12px; offset-rotate: auto; }
.flujo .sello-c { display: inline-flex; vertical-align: middle; margin-left: 8px; }
@media (min-width: 1200px) {
  .flujo { display: grid; grid-auto-flow: column; justify-content: space-between; align-items: start; column-gap: 112px; max-width: none; }
  .flujo.a1 { grid-auto-columns: minmax(0, 236px); }
  .flujo.donde { grid-auto-columns: minmax(0, 340px); column-gap: 128px; }
  .flujo .nodo { top: var(--ny); bottom: auto; left: auto; right: -8px; margin: -8px 0 0; }
  .flujo .envio { left: calc(100% + 10px); right: auto; top: auto; bottom: calc(100% - var(--ny) + 24px); width: max-content; max-width: 100px;
    white-space: normal; text-align: left; }
  .flujo .envio.regreso { left: auto; right: calc(100% + 10px); bottom: auto; top: 124px; text-align: right; }
}

/* ── qué se le hace a cada expediente: seis actos con su escena ── */
.actos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; }
.acto { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acto h3 { margin-top: 4px; }
.acto p { margin-top: 8px; line-height: 1.5; }
.acto .ejemplo-txt { font-size: .9375rem; }

/* ── lo que recibe el despacho ── */
.marco-ent { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--linea); border-radius: 16px; background: var(--crema);
  box-shadow: var(--sombra-3); overflow: hidden; }
.ent { display: flex; align-items: flex-start; column-gap: 16px; padding: 28px; border-bottom: 1px solid var(--linea); }
.ent:last-child { border-bottom: 0; }
.ent-ico { flex: none; display: flex; color: var(--verde); }
.ent strong { display: block; font-size: 1.3125rem; line-height: 1.2; }
.ent p { position: relative; margin-top: 8px; font-size: .9375rem; }
.marco-ent { --fondo: var(--crema); }

/* ── tiempo, casos, condiciones, preguntas y cierre ── */
.tiempo { gap: 20px; }
.tiempo h2 { max-width: 30ch; text-wrap: balance; }
.tiempo-txt { max-width: 60ch; font-size: 1.3125rem; line-height: 1.45; }
.tiempo .nota { max-width: 96ch; font-size: .8125rem; }
#casos { background-image: none; }
#casos .tarjeta { gap: 16px; padding: 28px; }
/* Un solo caso: la tarjeta a la medida de sus fichas, no a lo ancho de la página. */
.casos-uno { max-width: 760px; }
#casos .tarjeta-titulo { font-size: 1.75rem; }
.fichas { display: flex; flex-direction: column; border-top: 1px solid rgba(251, 250, 248, 0.14); }
.fi { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(251, 250, 248, 0.14); }
.fi dt { font-size: .9375rem; color: rgba(251, 250, 248, 0.85); }
.fi dd { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--crema); }
.tarjeta.oscura .fi .num { font-size: inherit; font-weight: 700; color: var(--crema); }
.tarjeta.oscura .hecho, #casos .nota.clara { font-size: .9375rem; color: rgba(251, 250, 248, 0.85); }
#condiciones .condiciones { max-width: 1000px; border-top-color: var(--linea-fuerte); }
.portada .preguntas { max-width: 800px; gap: 32px; }
.cierre-correo { display: inline-flex; align-items: center; min-height: 44px; color: var(--crema); font-size: 1.3125rem; font-weight: 700; text-decoration: none; }
.cierre-correo:hover, .cierre-correo:focus-visible { color: var(--blanco); text-decoration: underline; }

@media (min-width: 600px) {
  .fi { grid-template-columns: 132px minmax(0, 1fr); }
}
@media (min-width: 700px) {
  .actos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .escena { height: 290px; }
  .escena .lienzo { transform: translate(-50%, -50%) scale(1.35); }
}
@media (min-width: 900px) {
  .banda { padding-top: 4rem; padding-bottom: 4rem; }
  /* Seis columnas y cada entregable ocupa dos: tres por renglón. La última fila se reparte entera y no deja celda vacía: con
     cinco, los dos últimos ocupan tres columnas cada uno; con cuatro, el último ocupa las seis. En tres columnas, con cinco,
     el segundo renglón dejaba la tercera celda en blanco. La línea entre renglones es el borde de arriba de los de abajo. */
  .marco-ent { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .revision-cr { grid-template-columns: 320px minmax(0, 1fr); column-gap: 48px; }
  .ent { grid-column: span 2; border-right: 1px solid var(--linea); border-bottom: 0; }
  .ent:nth-child(3n), .ent:last-child { border-right: 0; }
  .ent:nth-child(n+4) { border-top: 1px solid var(--linea); }
  .ent:last-child:nth-child(3n+1) { grid-column: span 6; }
  .ent:last-child:nth-child(3n+2), .ent:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .actos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── el movimiento ────────────────────────────────────────────────────────────────────────────
   El marcado es el estado FINAL: sin JS, en modo quieto o con «reducir movimiento», todo se ve
   quieto y completo. El JS del movimiento carga después del primer pintado, pone el estado previo
   (.animado, .por-cargar, .mov) sólo en lo que todavía no se ve y lo retira al entrar en pantalla.
   Sólo se animan transform, opacity, stroke-dashoffset y offset-distance: ni color, ni fondo, ni
   tamaño. Ningún texto va en la capa que se mueve: se mueven cortinas, glifos, trazos y el viajero. */

/* hero: la fila que discrepa, segunda en el teléfono */
.portal-tabla .fila-movil, .portal-tabla .est-doc { display: none; }
@media (max-width: 720px) {
  .portal-tabla .fila-movil { display: table-row; }
  .portal-tabla .fila-escritorio, .portal-tabla .c-est { display: none; }
  .portal-tabla .est-doc { display: inline-flex; }
  /* el aire de MovilHero: 16 px arriba y entre bloques */
  .hero-portada { padding-top: calc(1rem + env(safe-area-inset-top)); gap: 1rem; }
  .hero-texto, .hero-derecha { gap: 1rem; }
}

/* el anillo de la discrepancia, trazado */
.aro { position: absolute; left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.mt .r > .aro { left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.aro rect { fill: none; stroke: var(--rojo); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* la cortina: una capa lisa del color de su fondo, sólo sobre el valor */
.mv-valor, .fila-c dd { position: relative; }
.cortina { position: absolute; inset: -1px 0; background: var(--fondo, var(--blanco)); transform: scaleX(0); transform-origin: right; pointer-events: none; }
.esc.blanca, .r-paso { --fondo: var(--blanco); }
.cita, .acuse { --fondo: var(--crema); }
.marca-conv.rojo { --fondo: var(--rojo-suave); }
.marca-conv.verde { --fondo: var(--verde-suave); }

/* los dibujos: trazos, el chevron que viaja y el candado */
.traza { stroke-dasharray: 1; stroke-dashoffset: 0; }
.traza.pt { stroke-dasharray: .06 .05; }
.ruta-m { opacity: .45; }
.endereza { position: absolute; width: 48px; height: 62px; }
.m-chev, .t-chev { position: absolute; left: 0; top: 0; width: 8px; height: 10px; opacity: 0; offset-rotate: auto; pointer-events: none; }
.m-chev svg, .t-chev svg { display: block; }
.m-chev path, .t-chev path { fill: var(--verde); }
.t-chev { offset-path: path('M -10 156 H 40'); }
.cand rect, .cand path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* el recorrido: tramos del eje, la hoja del acuse, el marco de las bandejas y el viajero */
.tramos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tramos .tramo { fill: none; stroke: var(--verde); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.acuse-hoja .papel { fill: var(--blanco); }
.acuse-hoja .punteado { fill: none; stroke: var(--verde); stroke-width: 1; stroke-dasharray: 8 6; opacity: 0; }
.acuse-hoja .lleno-p { fill: none; stroke: var(--verde); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.band-marco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.band-marco rect { fill: none; stroke: var(--linea); stroke-width: 1; }
.band-marco .bm-p { stroke-dasharray: 8 6; opacity: 0; }
.viajeros { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.viajero { position: absolute; left: 0; top: 0; width: 31px; height: 38px; offset-rotate: 0deg; filter: drop-shadow(0 1px 2px rgba(77, 68, 50, 0.28)); }
.viajero svg { display: block; width: 100%; height: 100%; }
@media (min-width: 1000px) {
  .viajero { width: 36px; height: 44px; }
  .punta { display: block; position: absolute; left: 0; top: 0; width: 10px; height: 12px; offset-rotate: auto; }
}
.punta svg { display: block; }
.punta path { fill: var(--verde); }
@supports not (offset-path: path("M0 0")) { .viajero, .punta, .m-chev, .t-chev { display: none; } }

/* ── estados previos: sólo existen cuando el JS del movimiento los pone ── */
.mov .hero-anillo:not(.trazado) .aro { opacity: 0; }
.mov .hero-anillo:not(.trazado) .aro rect { stroke-dashoffset: 1; }
.animado::before, .animado::after { opacity: .45; background: var(--verde-vivo); }
.animado .tramo:not(.lleno) { stroke-dashoffset: 1; }
.animado .nodo:not(.punto)::after { transform: scale(0); }
.animado .nodo-doble:not(.lleno)::before, .animado .nodo-doble:not(.lleno)::after { transform: scale(0); }
.animado .ruta:not(.corriendo):not(.hecha), .animado .chev:not(.hecha) { opacity: 0; }
.animado .ruta.corriendo { opacity: 1; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.animado .envio:not(.visto), .animado .sello-c:not(.puesto) { opacity: 0; }
.animado .sello-c:not(.puesto) { transform: scale(0); }
.marco-ent.por-cargar .ent-ico svg { transform: scale(0); }
/* el caso (03, 04, 05): lo que carga y no es un dl lleva .cargable; la línea del cotejo se traza al quedar .hecha */
.animado .cargable:not(.cargando):not(.cargada) .cortina { transform: scaleX(1); }
.animado .cargable:not(.cargando):not(.cargada) .barra.crece .seg.verde { transform: scaleX(0); }
.animado .linea-cotejo path { stroke-dasharray: 1; }
.animado .linea-cotejo:not(.hecha) path { stroke-dashoffset: 1; }
.animado .linea-cotejo:not(.hecha) circle { opacity: 0; }
.marco-ent.por-cargar .cortina { transform: scaleX(1); }
.animado .carga:not(.cargando):not(.cargada) .cortina,
.sale.por-cargar .cortina, .acto.por-cargar .cortina { transform: scaleX(1); }
.animado .carga:not(.cargando):not(.cargada) .est i, .sale.por-cargar .est i, .acto.por-cargar .est-punto:not(.discrepa) { transform: scale(0); }
.animado .carga:not(.cargando):not(.cargada) .est.discrepa i, .sale.por-cargar .est.discrepa i,
.acto.por-cargar .est-punto.discrepa, .acto.por-cargar .rombo { transform: rotate(45deg) scale(0); }
.animado .carga:not(.cargando):not(.cargada) .aro, .sale.por-cargar .aro, .acto.por-cargar .aro { opacity: 0; }
.animado .carga:not(.cargando):not(.cargada) .aro rect, .sale.por-cargar .aro rect, .acto.por-cargar .aro rect { stroke-dashoffset: 1; }
.animado .acuse:not(.lleno) .punteado, .animado .acuse:not(.lleno) .bm-p { opacity: 1; }
.animado .acuse:not(.lleno) .lleno-p { stroke-dashoffset: 1; }
.animado .acuse:not(.lleno) .glifo, .animado .acuse:not(.lleno) .bm-l { opacity: 0; }
.sale.por-cargar .traza, .acto.por-cargar .traza, .acto.por-cargar .cand rect, .acto.por-cargar .cand path { stroke-dashoffset: 1; }
.acto.por-cargar .cae, .acto.por-cargar .ruta-m { opacity: 0; }
.acto.por-cargar .endereza { transform: rotate(-84deg); }
/* Lo que ya quedó arriba pasa a su estado final sin animar. */
.ya, .ya::before, .ya::after, .ya * { transition: none !important; animation: none !important; }

@keyframes cae { from { opacity: 0; transform: translateY(-56px) rotate(calc(var(--rot, 0deg) - 14deg)); } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes endereza { from { transform: rotate(-84deg); } to { transform: rotate(0deg); } }
@keyframes traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparece-ruta { from { opacity: 0; } to { opacity: .45; } }
@keyframes sella { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sella-rombo { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
@keyframes destapa { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes viaja { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* 28 px por delante del centro del viajero: su frente es de 18 a 22 px (36 × 44) */
@keyframes punta { from { offset-distance: 28px; } to { offset-distance: calc(100% + 28px); } }
@keyframes chev { 0% { offset-distance: 0%; opacity: 1; } 99% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes aviso { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* hero: el anillo de F-0053 se traza cuando la página está lista */
  .mov .hero-anillo.trazado .aro rect { transition: stroke-dashoffset .45s cubic-bezier(.16, 1, .3, 1); }
  /* recorrido: flujo, carga, sello y estado */
  .animado .tramo.lleno:not(.ya) { transition: stroke-dashoffset .3s cubic-bezier(.16, 1, .3, 1); }
  .animado .nodo.punto:not(.ya)::after { transition: transform .25s cubic-bezier(.16, 1, .3, 1) var(--dp, 0s); }
  .animado .nodo-doble.lleno:not(.ya)::before, .animado .nodo-doble.lleno:not(.ya)::after { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
  .animado .ruta.corriendo { animation: traza var(--dur, 1s) linear forwards; }
  .animado .recibido:not(.ya)::after { animation: aviso .7s ease-out both; }
  .animado .envio.visto:not(.ya) { transition: opacity .2s; }
  .animado .sello-c.puesto:not(.ya) { transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity 0s; }
  .marco-ent.cargado .cortina { transition: transform .45s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .3s); }
  .animado .cargable.cargando .cortina { transition: transform .45s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .3s); }
  .animado .cargable.cargando .barra.crece .seg.verde { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
  .animado .linea-cotejo.hecha:not(.ya) path { transition: stroke-dashoffset .45s cubic-bezier(.16, 1, .3, 1); }
  .animado .linea-cotejo.hecha:not(.ya) circle { transition: opacity .15s; }
  .animado .linea-cotejo.hecha:not(.ya) circle:last-of-type { transition-delay: .4s; }
  .marco-ent.cargado .ent-ico svg { transition: transform .25s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .3s); }
  .animado .ruta.hecha:not(.ya), .animado .chev.hecha:not(.ya) { transition: opacity .25s; }
  .animado .carga.cargando .cortina, .sale.cargando .cortina { transition: transform .45s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .3s); }
  .animado .carga.cargando .est i, .sale.cargando .est i { transition: transform .25s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .3s); }
  .animado .carga.cargando .aro, .sale.cargando .aro { transition: opacity 0s linear calc(var(--i, 0) * .3s + .1s); }
  .animado .carga.cargando .aro rect, .sale.cargando .aro rect { transition: stroke-dashoffset .45s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .3s + .1s); }
  .animado .acuse.lleno:not(.ya) .punteado, .animado .acuse.lleno:not(.ya) .bm-p { transition: opacity .1s; }
  .animado .acuse.lleno:not(.ya) .lleno-p { transition: stroke-dashoffset .35s cubic-bezier(.16, 1, .3, 1); }
  .animado .acuse.lleno:not(.ya) .glifo, .animado .acuse.lleno:not(.ya) .bm-l { transition: opacity .25s .35s; }
  @supports (offset-path: path("M0 0")) {
    .viajero { offset-path: var(--ruta); animation: viaja var(--dur, 1s) linear forwards; }
    .punta { offset-path: var(--ruta); animation: punta var(--dur, 1s) linear forwards; }
    .t-chev.cruza { animation: chev .3s linear forwards; }
  }
  /* trabajos: la hoja de Sale se carga por renglones */
  .sale.cargando .traza { animation: traza 1.2s cubic-bezier(.16, 1, .3, 1) var(--r, .6s) both; }
  .sale.cargando .punta-dib, .acto.cargado .punta-dib { animation: aparece .2s linear var(--r, 0s) both; }
  /* método: cada escena corre una vez al entrar */
  .acto.cargado .cae { animation: cae .8s cubic-bezier(.16, 1, .3, 1) var(--r, 0s) both; }
  .acto.cargado .endereza { animation: endereza 1.1s cubic-bezier(.16, 1, .3, 1) .9s both; }
  .acto.cargado .traza { animation: traza 1.2s cubic-bezier(.16, 1, .3, 1) var(--r, .6s) both; }
  .acto-2.cargado .ruta-m { animation: aparece-ruta .3s linear .9s both; }
  .acto-2.cargado .m-chev { animation: chev .3s linear .9s forwards; }
  .acto-2.cargado .rombo { animation: sella-rombo .25s cubic-bezier(.16, 1, .3, 1) 1.2s both; }
  .acto-2.cargado .aro { animation: aparece 0s linear 1.2s both; }
  .acto-2.cargado .aro rect { animation: traza .45s cubic-bezier(.16, 1, .3, 1) 1.3s both; }
  .acto-2.cargado .cortina { animation: destapa .45s cubic-bezier(.16, 1, .3, 1) 1.7s both; }
  .acto-6.cargado .est-punto { animation: sella .25s cubic-bezier(.16, 1, .3, 1) calc(1.4s + var(--i, 0) * .3s) both; }
  .acto-6.cargado .est-punto.discrepa { animation-name: sella-rombo; }
  .acto-6.cargado .aro { animation: aparece 0s linear 1.8s both; }
  .acto-6.cargado .aro rect { animation: traza .45s cubic-bezier(.16, 1, .3, 1) 1.8s both; }
  .acto-6.cargado .ruta-m { animation: aparece-ruta .3s linear 3.1s both; }
  .acto-6.cargado .m-chev { animation: chev .3s linear 3.1s forwards; }
  .acto-6.cargado .cand rect, .acto-6.cargado .cand path { animation: traza .45s cubic-bezier(.16, 1, .3, 1) 3.4s both; }
}