/* Se sirve sellado: construir_sitio.py escribe una copia con la huella
 * del contenido en el nombre y el HTML apunta a ella. Editar este
 * archivo estrena URL, que es justo lo que impide que un CDN sirva una
 * versión vieja. Ver infra/nginx.conf. */
/* AMEYAL Consultoría — hoja de estilo del sitio
 *
 * El objeto físico de referencia es una placa de identificación de equipo
 * industrial: rectangular, troquelada, sin esquinas blandas y sin decoración.
 * De ahí salen tres decisiones que gobiernan todo lo demás:
 *
 *   1. Radio cero en todo. No hay una sola esquina redondeada en el sitio.
 *   2. Las reglas de 1px son el material estructural, no un adorno. Separan
 *      datos como las separa una placa grabada.
 *   3. El color se usa en bloques enteros, no en acentos tímidos: las bandas
 *      profundas van completas en Forest Ink y las de lectura completas en
 *      Natural Linen. Honey no rellena nada, sólo señala.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--cuerpo);
  font-weight: var(--peso-cuerpo);
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-display); }

a { color: inherit; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-interior);
  outline-offset: var(--foco-separacion);
  box-shadow: 0 0 0 calc(var(--foco-separacion) + 2 * var(--foco-grosor)) var(--foco-exterior);
}

.saltar {
  position: absolute;
  left: -100vw;
  top: var(--e4);
  z-index: 60;
  padding: var(--e3) var(--e4);
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
  text-decoration: none;
}
.saltar:focus { left: var(--e4); }

/* Superficie profunda: bloque entero en Forest Ink. */
.profundo, .banda--llamada, .pie {
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
}
/* Este reinicio no es redundante con el `a { color: inherit }` global: hace falta
 * para los enlaces que traen color propio de superficie clara y acaban dentro de
 * un campo profundo. `.volver` es el caso: fija Evergreen, y sobre Forest Ink da
 * 1.59:1. Al aplicarse directamente sobre el enlace le gana a la herencia. */
.profundo a, .banda--llamada a, .pie a { color: var(--texto-inverso); }

/* ── Átomos ──────────────────────────────────────────────────────────────── */

.rotulo {
  display: block;
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.profundo .rotulo, .banda--llamada .rotulo, .pie .rotulo {
  color: var(--texto-inverso-suave);
}

.dato {
  font-size: var(--dato);
  line-height: var(--alto-dato);
  letter-spacing: var(--tracking-dato);
}
.dato--fuerte { font-size: var(--cuerpo-l); font-weight: var(--peso-dato); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--area-tactil);
  padding: var(--e3) var(--e6);
  border: var(--regla-fuerte) solid currentColor;
  font-family: var(--fuente-texto);
  font-size: var(--cuerpo);
  font-weight: var(--peso-enfasis);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--duracion-corta) var(--curva-salida);
}
/* Filo Forest Ink, no Honey: sin él el botón de acento pierde borde sobre lino,
 * donde Honey da 2.14:1. */
.boton--acento {
  background: var(--acento);
  border-color: var(--ameyal-forest-ink);
  color: var(--ameyal-forest-ink);
}
/* Y no la cede. Los cuatro contenedores de campo profundo reinician el color de
 * sus enlaces con selectores 0-1-1, y `.boton--acento` sólo puntúa 0-1-0: sin
 * esto le ganaban y dejaban la etiqueta en lino sobre Honey, 2.14:1, en la
 * llamada a la acción principal de la portada, precios, cómo trabajamos y el
 * índice. Es el par exacto que el manual prohíbe, invertido. Estos selectores
 * puntúan 0-2-0, así que ganan por especificidad y no dependen del orden. */
.cabezal .boton--acento, .profundo .boton--acento,
.banda--llamada .boton--acento, .pie .boton--acento { color: var(--ameyal-forest-ink); }
/* La regla de asiento sustituye al hover que blanqueaba el botón: sobre el
 * blanco de .vistazo lo dejaba a 1.13:1 y desaparecía. Ni el relleno ni el
 * color de la etiqueta cambian en ningún fotograma, así que el contraste es
 * constante 5.59:1 en las tres superficies. El foco recibe exactamente el
 * mismo estado que el hover. */
.boton::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duracion) var(--curva-salida);
}
.boton:hover::after, .boton:focus-visible::after { transform: scaleX(1); }
.boton:hover, .boton:focus-visible { transform: translateY(-1px); }
.boton:active { transform: translateY(1px); }
.boton--grande { padding: var(--e4) var(--e8); font-size: var(--cuerpo-l); }

.titulo-pagina {
  font-family: var(--fuente-display);
  font-size: var(--display-l);
  line-height: var(--alto-l);
  letter-spacing: var(--tracking-l);
  text-wrap: balance;
  margin-bottom: var(--e6);
  max-width: 22ch;
}
.titulo-pagina--obligacion {
  font-size: var(--display-m);
  line-height: 1.12;
  letter-spacing: var(--tracking-m);
  max-width: 30ch;
}

.titulo-seccion {
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  line-height: var(--alto-m);
  letter-spacing: var(--tracking-m);
  text-wrap: balance;
  margin-bottom: var(--e8);
  max-width: 24ch;
}
.titulo-seccion__n {
  font-family: var(--fuente-texto);
  font-size: var(--dato);
  font-weight: var(--peso-dato);
  letter-spacing: var(--tracking-dato);
  color: var(--texto-suave);
  margin-left: var(--e3);
  vertical-align: middle;
}

.prosa { max-width: var(--medida-lectura); font-size: var(--cuerpo-l); text-wrap: pretty; }
.prosa--corta { max-width: 56ch; }
.prosa strong { font-weight: var(--peso-enfasis); }
.prosa a, .nota a, .fuente a { text-underline-offset: 0.18em; }

.nota {
  max-width: var(--medida-lectura);
  margin-top: var(--e8);
  padding-top: var(--e4);
  border-top: var(--regla) solid var(--borde);
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
  text-wrap: pretty;
}
.nota strong { color: var(--texto); font-weight: var(--peso-enfasis); }

/* Aviso integral: primero la decisión útil, después el detalle legal. */
.aviso-privacidad {
  display: grid;
  gap: var(--e10);
}
.aviso-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  padding: var(--e6);
  border: var(--regla) solid var(--borde-fuerte);
  background: var(--superficie-evidencia);
}
.aviso-resumen p { max-width: 58ch; font-size: var(--cuerpo-l); text-wrap: pretty; }
.aviso-privacidad > section {
  display: grid;
  gap: var(--e4);
  padding-top: var(--e8);
  border-top: var(--regla) solid var(--borde);
}
.aviso-privacidad h2 {
  max-width: 28ch;
  font-family: var(--fuente-display);
  font-size: var(--display-s);
  line-height: var(--alto-s);
  text-wrap: balance;
}
.aviso-privacidad h3 {
  margin-top: var(--e2);
  font-size: var(--cuerpo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.aviso-privacidad p,
.aviso-privacidad ul { max-width: 72ch; text-wrap: pretty; }
.aviso-privacidad ul { display: grid; gap: var(--e2); padding-left: 1.35em; }
.aviso-privacidad a { text-underline-offset: 0.18em; }
/* La leyenda del art. III, al pie del entregable y sólo ahí. Salió de las 100
 * páginas el 22 de agosto de 2026 —vender no es disculparse— pero el vistazo
 * es un entregable y la sigue debiendo. Va del tamaño de un rótulo: presente
 * para quien la busca, sin pelearse con el botón que tiene encima. */
.resultado__alcance {
  margin: var(--e6) 0 0;
  font-size: var(--rotulo);
  line-height: 1.6;
  color: var(--texto-suave);
  text-wrap: pretty;
}

.marca-estado {
  display: inline-block;
  padding: 0.15em var(--e2);
  border: var(--regla) solid currentColor;
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
}
.marca-estado--falta { color: var(--ameyal-forest-ink); background: var(--ameyal-sage-mist); }
.marca-estado--ok { color: var(--ameyal-evergreen); }
.marca-estado--coord { color: var(--ameyal-evergreen); border-style: dashed; }

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--superficie);
  border-bottom: var(--regla) solid var(--borde);
}
.cabecera__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: var(--e4) var(--e6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  flex-wrap: wrap;
}
.marca { display: block; text-decoration: none; }
.marca__logo { display: block; height: 34px; width: auto; }

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: var(--e6);
  font-size: var(--cuerpo-s);
}
.cabecera__nav a {
  text-decoration: none;
  color: var(--texto-suave);
  padding-block: var(--e2);
  border-bottom: var(--regla-fuerte) solid transparent;
  transition: color var(--duracion) var(--curva),
              border-color var(--duracion) var(--curva);
}
.cabecera__nav a:hover { color: var(--texto); border-bottom-color: var(--borde-fuerte); }
.cabecera__nav a[aria-current] { color: var(--texto); border-bottom-color: var(--acento); }
.cabecera__nav .enlace-fuerte {
  padding: var(--e2) var(--e4);
  border: var(--regla-fuerte) solid var(--texto);
  color: var(--texto);
  font-weight: var(--peso-enfasis);
}
.cabecera__nav .enlace-fuerte:hover {
  background: var(--texto);
  color: var(--texto-inverso);
  border-bottom-color: var(--texto);
}

/* ── Bandas ──────────────────────────────────────────────────────────────── */

/* 48.6 px por lado a 1280 en vez de 102.4, y el ancho de ventana deja de
 * gobernar el alto. El separador entre secciones lo lleva el trazo. */
.banda { padding-block: var(--banda-aire); }
.banda + .banda { border-top: var(--regla) solid var(--borde); }
.banda--fondo { background: var(--superficie-alta); }
.banda--titular { padding-block: var(--banda-aire) var(--e12); }
.banda--corpus { border-bottom: var(--regla) solid var(--borde); }
.banda__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--e6);
}
.banda__interior--angosto { max-width: 62rem; }
.banda__cierre { margin-top: var(--e12); }

.banda--llamada { text-align: center; }
.banda--llamada .titulo-seccion,
.banda--llamada .prosa { margin-inline: auto; }
.banda--llamada .prosa { margin-bottom: var(--e8); }

.rastro {
  padding-block: var(--e4);
  border-bottom: var(--regla) solid var(--borde);
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
}
.rastro .banda__interior {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}
.rastro a { text-decoration: none; }
.rastro a:hover { text-decoration: underline; }
.rastro__sep { opacity: 0.45; }

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--e8), 5vw, var(--e24));
  align-items: start;
}
.dos-columnas--texto { gap: var(--e12); }

/* ── Cabezal ─────────────────────────────────────────────────────────────── */

/* No es un hero: es el cabezal de identificación del documento que la página
 * produce. Lleva procedencia, revisión de la matriz, titular, una línea de
 * entrada, una salida y cuatro precios con su plazo. Lo que queda es una placa:
 * quién, qué y cuánto. */

.cabezal {
  position: relative;
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
  /* En campo profundo el anillo de foco perdía su capa exterior (Forest Ink
   * sobre Forest Ink) y quedaba en 2 px en vez de 6. */
  --foco-exterior: var(--ameyal-natural-linen);
}
.cabezal a { color: inherit; }
.cabezal .rotulo { color: var(--texto-inverso-suave); }

/* El aire que devolvió el recorte. Con dos bloques menos dentro, el pliegue
 * ya no necesita apretarse contra la cabecera: 32 px arriba, 48 abajo y 24 de
 * separación entre piezas, y aun así el cabezal entero cabe en 1280x720. */
.cabezal__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: var(--e8) var(--e6) var(--e12);
  display: grid;
  gap: var(--e6);
}

.cabezal__firma {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e2) var(--e6);
  margin: 0;
  padding-bottom: var(--e3);
  border-bottom: var(--regla) solid var(--borde-inverso);
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}
/* Deja de ser Honey. Honey tiene tres trabajos nombrados en este pliegue (la
 * salida principal, el precio publicado y el remate del titular) y la versión
 * de la matriz no es ninguno. El gesto que le toca es el de `.placa__folio`:
 * identificador de trazabilidad, encajonado y en monoespaciada. */
.cabezal__rev {
  font-family: var(--fuente-mono);
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-dato);
  text-transform: none;
  color: var(--texto-inverso);
  border: var(--regla) solid var(--borde-inverso-fuerte);
  padding: 0.1em var(--e2);
  white-space: nowrap;
}

/* Dos escalones, no tres renglones iguales. La taxonomía es la etiqueta de
 * categoría y va pequeña; el diferenciador es el titular y va grande. El h1
 * baja de 221 a 122 px MIENTRAS la promesa comercial crece. El tamaño ya no lo
 * fija la caja: lo fija cada tajo, así que `max-width` sobra. */
.cabezal__titulo {
  margin: 0;
  display: grid;
  gap: var(--e2);
  font-family: var(--fuente-display);
  max-width: none;
}
.tajo--materia {
  font-size: var(--display-m);
  font-weight: var(--peso-display);
  line-height: var(--alto-m);
  letter-spacing: var(--tracking-m);
  color: var(--texto-inverso);
}
/* Cada línea es su propia caja: sin esto el corte recortaría el bloque entero
 * y las dos líneas llegarían a la vez. */
.tajo { display: block; }

.cabezal__entrada {
  margin: 0;
  max-width: 58ch;
  font-size: var(--cuerpo-l);
  line-height: 1.55;
  color: var(--texto-inverso-suave);
  text-wrap: pretty;
}

.cabezal__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); }

/* La ruta de la audiencia más caliente. No va en `.cabezal__firma`, que es
 * `--rotulo` en versales: darle el tipo más chico de la página al único
 * comprador con plazo legal encima es lo contrario de lo que hace falta. Va a
 * tamaño de cuerpo, en la misma fila que los botones, empujada al filo derecho
 * para que no compita por el centro, y apunta al destino final, no a un ancla
 * de esta misma página: un clic, no tres. */
.cabezal__urgente {
  margin-left: auto;
  font-size: var(--cuerpo);
  font-weight: var(--peso-enfasis);
  text-decoration: none;
  padding-bottom: 2px;
  box-shadow: inset 0 -2px 0 var(--acento);
  transition: box-shadow var(--duracion) var(--curva-salida),
              transform var(--duracion-corta) var(--curva-salida);
}
.cabezal__urgente:hover, .cabezal__urgente:focus-visible {
  box-shadow: inset 0 -2px 0 var(--texto-inverso);
  transform: translateX(3px);
}

.cabezal__nota {
  margin: 0;
  font-size: var(--cuerpo-s);
  color: var(--texto-inverso-suave);
}

/* ── Las tres composiciones del cabezal ──────────────────────────────────── */

/* Mismo marcado, tres reparticiones. La clase la escribe `C.CABEZAL`.
 *
 * La fotografia va tenida al duotono de la paleta por preparar_imagenes.py, asi
 * que no mete un octavo color, y no lleva pie: es la situacion que el servicio
 * atiende, no una foto de plantilla. */

.cabezal__dicho {
  display: grid;
  gap: var(--e6);
  align-content: start;
}
.cabezal__vista { margin: 0; overflow: hidden; }
.cabezal__vista img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Apuntado a la persona y al tablero, no al centro geometrico. */
  object-position: 62% 52%;
}

/* A · Placa partida. El dicho a la izquierda, la vista a la derecha, y entre
 * los dos una regla: la misma costura que separa datos en una placa grabada.
 * La tira de precios cruza las dos columnas, que es lo que la vuelve el piso
 * del pliegue y no una fila mas. */
.cabezal--partido .cabezal__interior {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: 0;
}
.cabezal--partido .cabezal__firma,
.cabezal--partido .tira,
.cabezal--partido .cabezal__nota { grid-column: 1 / -1; }
.cabezal--partido .cabezal__dicho { padding-right: clamp(var(--e6), 3vw, var(--e12)); }
/* La vista se posiciona en vez de fluir: si la deja fluir, su alto lo fija la
 * proporcion 3:2 del archivo (357 px a esta columna) y el pliegue crece 78 px
 * sin que nadie lo haya pedido. Posicionada, el alto de la fila lo decide el
 * texto y el recorte se acomoda: la fotografia obedece a la placa, no al reves. */
.cabezal--partido .cabezal__vista {
  position: relative;
  border-left: var(--regla) solid var(--borde-inverso);
  min-height: 17rem;
}
.cabezal--partido .cabezal__vista img {
  position: absolute;
  inset: 0 0 0 clamp(var(--e6), 3vw, var(--e12));
  width: auto;
  height: auto;
}

/* B · Campo entero. La fotografia a sangre debajo de todo, con un degradado
 * direccional en vez de un velo plano: el texto cae sobre Forest Ink solido y
 * la persona conserva el 100 % de su presencia. La version de julio se quito
 * justamente porque el velo la dejaba al 22 % y no se veia nada. El segundo
 * degradado, de abajo hacia arriba, le devuelve suelo solido a la tira. */
.cabezal--campo { isolation: isolate; }
/* El pie se aprieta 16 px: con la fotografía debajo, el aire de cierre lo pone
 * ella. Sin esto el pliegue mide 719 de 720 y cualquier fuente de reserva lo
 * saca. */
.cabezal--campo .cabezal__interior { padding-bottom: var(--e8); }
/* El interior NO se posiciona, y es la línea que hace que «a sangre» sea cierto.
 * Posicionado, el `inset: 0` de la fotografía se resolvía contra él, que mide
 * 88rem: a 1920 la imagen se quedaba en 1408 px con 248 de campo verde plano a
 * cada lado. Sin posición, el `inset` sube hasta `.cabezal` y la fotografía
 * ocupa la ventana entera. El orden de pintado lo recupera cada bloque de texto
 * por su cuenta. */
.cabezal--campo > .cabezal__interior > *:not(.cabezal__vista) {
  position: relative;
  z-index: 1;
}
.cabezal--campo .cabezal__vista {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cabezal--campo .cabezal__vista::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Suelo para la tira y la nota. */
    linear-gradient(to top, rgba(21, 51, 45, 1) 0 20%, rgba(21, 51, 45, 0) 44%),
    /* Techo para la firma y el sello de revision, que caen sobre la esquina
     * mas clara de la fotografia: sin esto el lino queda contra una ventana. */
    linear-gradient(to bottom, rgba(21, 51, 45, 0.88) 0 11%, rgba(21, 51, 45, 0) 27%),
    /* Y el direccional, con la zona opaca cubriendo el ancho entero del dicho:
     * ningun renglon de texto cae sobre pixel de fotografia. */
    /* La rampa tiene que estar apagada antes del 62 % del ancho, que es donde
     * cae la persona en esta fotografía. Con el corte a 68 % le quedaba encima
     * un 60 % de tinta: el mismo velo que mató a la versión de julio, sólo que
     * en degradado. Eso le fija el ancho al dicho, no al revés, y por eso va a
     * 30rem: el titular mide 430 px y le sobran 50. El eje va horizontal puro,
     * porque a 100deg los topes se corren 53 px por arriba y por abajo y el
     * margen de seguridad no existe. */
    linear-gradient(to right, rgba(21, 51, 45, 1) 0 46%,
                              rgba(21, 51, 45, 0.5) 56%,
                              rgba(21, 51, 45, 0.04) 64%);
}
/* 34rem y no menos: por debajo, la línea de materias envuelve a dos renglones
 * y el pliegue crece 64 px hasta salirse de 720. Por encima, el texto invade
 * la rampa. Es el único ancho donde caben las dos condiciones. */
.cabezal--campo .cabezal__dicho { max-width: 34rem; }
/* Y por eso mismo el remate deja de crecer con la ventana. La rampa de 80rem
 * lo lleva a 80 px, pero su caja sigue midiendo 544: de 1285 px de ventana en
 * adelante el titular envolvía a dos renglones y el pliegue se salía de 720.
 * En campo entero el ancho lo gobierna el degradado, no el viewport, así que
 * el tamaño también. */
.cabezal--campo .tajo--remate { font-size: var(--display-xl); }


/* La tira de precios: la única tabla del pliegue y la prueba inmediata de que
 * precio y plazo están publicados. */
.tira {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Sin numero fijo de columnas: la tira la escribe C.PELDANOS, y el dia que
   * se agregue o se quite un peldano la reticula no tiene que enterarse. Salio
   * la iguala y con `repeat(5, ...)` habrian quedado cuatro celdas y un hueco. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: var(--regla-fuerte) solid var(--borde-inverso-fuerte);
  border-bottom: var(--regla) solid var(--borde-inverso);
}
.tira__celda {
  padding: var(--e3) var(--e4) var(--e3) 0;
  display: grid;
  gap: var(--e1);
  align-content: start;
}
.tira__celda + .tira__celda { border-left: var(--regla) solid var(--borde-inverso); padding-left: var(--e4); }
.tira__nombre {
  margin: 0;
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}
/* Honey aparece aquí y sólo aquí sobre campo profundo: 5.59:1. Nunca sobre
 * lino (2.14:1), blanco (2.43:1) ni Sage Mist (1.64:1). La regla semántica es
 * estrecha a propósito: Honey significa precio publicado. */
.tira__precio {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--cifra);
  font-weight: var(--peso-dato);
  letter-spacing: var(--tracking-s);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.tira__entrega { margin: 0; font-size: var(--cuerpo-s); color: var(--texto-inverso-suave); }

/* La línea de procedencia: el gesto que el manual declara protagonista y que
 * llevaba cero usos en 918 líneas. Se parte a lo largo por la costura: la
 * mitad sobre campo profundo va en Sage Mist (8.9:1), la que cae sobre campo
 * claro en Evergreen (7.54:1). El punto Honey viaja por la mitad superior,
 * siempre dentro del campo profundo. */
.procedencia {
  position: absolute;
  bottom: -6px;
  height: 12px;
  z-index: 1;
  pointer-events: none;
  left: max(var(--e6), calc((100% - var(--ancho-maximo)) / 2 + var(--e6)));
  right: max(var(--e6), calc((100% - var(--ancho-maximo)) / 2 + var(--e6)));
}
.procedencia::before {
  content: "";
  position: absolute;
  inset: 4.5px 0 auto 0;
  height: 3px;
  background: linear-gradient(to bottom,
    var(--ameyal-sage-mist) 0 1.5px,
    var(--ameyal-evergreen) 1.5px 3px);
}
.procedencia::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-size: 6px 6px;
  background-repeat: no-repeat;
  /* El reposo es el punto ya en su destino: el porcentaje se resuelve contra
   * (ancho − 6px), así que aterriza exacto en el filo sin conocer el ancho. */
  background-position: 100% 50%;
}

/* ── Las tres puertas ────────────────────────────────────────────────────── */

/* Una sola promesa arriba y tres entradas aquí. No son tarjetas de producto:
 * son estados en los que el visitante puede reconocerse, y cada una lo manda a
 * un sitio distinto. Por eso el estado va primero y en grande — es lo que la
 * persona está buscando en la pantalla— y la salida va abajo, ya decidida. */

.banda--puertas { border-bottom: var(--regla) solid var(--borde); }

.puertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border-top: var(--regla-fuerte) solid var(--borde-fuerte);
}
.puerta {
  display: grid;
  align-content: start;
  gap: var(--e3);
  padding: var(--e6) var(--e6) var(--e6) 0;
  border-bottom: var(--regla) solid var(--borde);
}
.puerta + .puerta {
  border-left: var(--regla) solid var(--borde);
  padding-left: var(--e6);
}

.puerta__estado {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--subtitulo);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-m);
  line-height: 1.15;
}
.puerta__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--cuerpo);
  font-weight: var(--peso-cuerpo);
  color: var(--texto-suave);
  line-height: 1.4;
}
.puerta__cuerpo {
  margin: 0;
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
  text-wrap: pretty;
  max-width: 42ch;
}
.puerta__salida {
  margin-top: var(--e2);
  font-size: var(--cuerpo-s);
  font-weight: var(--peso-enfasis);
  text-decoration: none;
  justify-self: start;
  padding-bottom: 2px;
  box-shadow: inset 0 -1.5px 0 var(--acento);
  transition: box-shadow var(--duracion) var(--curva-salida),
              transform var(--duracion-corta) var(--curva-salida);
}
.puerta__salida:hover {
  box-shadow: inset 0 -1.5px 0 var(--texto);
  transform: translateX(3px);
}

/* El remate carga la promesa. La regla que lo separaba se va: partía una sola
 * unidad de sentido con la línea más pesada del sistema, y el bloque de
 * tira de precios que viene abajo ya trae reglas de sobra. */
.tajo--remate {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--display-xl);
  font-weight: var(--peso-titular);
  line-height: var(--alto-xl);
  letter-spacing: var(--tracking-xl);
  color: var(--acento);
}
/* `--display-xl` topaba en 1280 (5vw contra 4rem): de 1280 a 1920 la ventana
 * crece 50 % y el titular no crecía un pixel, o sea que en relativo se
 * encogía. La rampa arranca exactamente en los 64 px que ya tiene a 1280, así
 * que por debajo de ese ancho no cambia nada de lo ya medido. */
@media (min-width: 80rem) {
  .tajo--remate { font-size: clamp(4rem, 2.5vw + 2rem, 5rem); }
}

/* ── Placa y renglones ───────────────────────────────────────────────────── */

.especimen { margin: 0; }
/* Canto opaco y más grueso que cualquier regla interna: la hoja tiene borde,
 * los datos de dentro sólo tienen reglas. */
.placa {
  position: relative;
  background: var(--superficie-evidencia);
  border: 2px solid var(--ameyal-forest-ink);
  padding: var(--e6) var(--e6) var(--e4);
}
/* El folio va en el DOM y no en un ::before: un identificador de trazabilidad
 * es dato del documento, y desde contenido generado no se copia ni se extrae. */
.placa__folio {
  position: absolute;
  top: -0.65em;
  left: var(--e4);
  padding-inline: var(--e2);
  background: var(--ameyal-forest-ink);
  color: var(--texto-inverso);
  font-family: var(--fuente-mono);
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-dato);
}

.placa__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  padding-bottom: var(--e4);
  border-bottom: var(--regla-fuerte) solid var(--borde-fuerte);
  margin-bottom: var(--e4);
}
.placa__campo { display: grid; gap: var(--e1); }
.placa__lista { list-style: none; margin: 0; padding: 0; }

.renglon { padding-block: var(--e4); border-bottom: var(--regla) solid var(--borde); }
.renglon:last-child { border-bottom: 0; padding-bottom: 0; }
.renglon__encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e3);
  flex-wrap: wrap;
}
.renglon__nombre { font-weight: var(--peso-enfasis); font-size: var(--cuerpo-l); }

.renglon__datos { margin: 0; display: grid; gap: var(--e2); }
.renglon__datos > div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--e4); }
.renglon__datos dt {
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.renglon__datos dd { margin: 0; font-size: var(--cuerpo-s); text-wrap: pretty; }
.renglon__datos--pagina > div {
  padding-block: var(--e4);
  border-bottom: var(--regla) solid var(--borde);
}
.renglon__datos--pagina > div:last-child { border-bottom: 0; padding-bottom: 0; }
.renglon__datos--pagina dd { font-size: var(--cuerpo); }

.especimen__pie, .fuente, .volver {
  margin-top: var(--e4);
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
}
.especimen__pie { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); }
.fuente { font-size: var(--cuerpo); }

.obligacion__materia {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
  margin-bottom: var(--e4);
}

/* ── Escalera de peldaños ────────────────────────────────────────────────── */

.escalera {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--regla-fuerte) solid var(--borde-fuerte);
}
.peldano {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(10rem, auto) minmax(0, 1.15fr);
  gap: clamp(var(--e6), 3vw, var(--e12));
  padding-block: var(--e8);
  border-bottom: var(--regla) solid var(--borde);
}
.peldano--destacado {
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
  padding-inline: var(--e8);
  border-bottom-color: var(--borde-inverso);
}
.peldano--destacado .rotulo { color: var(--texto-inverso-suave); }
.peldano--destacado .peldano__para { color: var(--texto-inverso-suave); }
.peldano--destacado .peldano__incluye { border-color: var(--borde-inverso); }
.peldano--destacado .peldano__limite { border-color: var(--borde-inverso); }

.peldano__nombre {
  font-family: var(--fuente-display);
  font-size: var(--titulo);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--e2);
}
.peldano__para { font-size: var(--cuerpo-s); color: var(--texto-suave); }
.peldano__precio { margin: 0; display: grid; gap: var(--e1); align-content: start; }
.peldano__precio dt { margin-top: var(--e3); }
.peldano__precio dt:first-child { margin-top: 0; }
.peldano__precio dd { margin: 0; }
.peldano__mas { display: grid; gap: var(--e3); align-content: start; }
.peldano__detalles summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: var(--area-tactil);
  border-bottom: var(--regla) solid currentColor;
  font-size: var(--cuerpo-s);
  font-weight: var(--peso-enfasis);
  list-style: none;
  cursor: pointer;
}
.peldano__detalles summary::-webkit-details-marker { display: none; }
.peldano__detalles summary::after { content: "+"; }
.peldano__detalles[open] summary::after { content: "−"; }
.peldano__contenido { padding-top: var(--e4); }

.peldano__incluye {
  list-style: none;
  margin: 0 0 var(--e4);
  padding: 0 0 var(--e4);
  border-bottom: var(--regla) solid var(--borde);
  display: grid;
  gap: var(--e2);
  font-size: var(--cuerpo-s);
}
.peldano__limite { margin: 0; font-size: var(--cuerpo-s); text-wrap: pretty; }
.peldano__limite strong { color: var(--acento); font-weight: var(--peso-enfasis); }
.peldano__cta {
  display: inline-block;
  font-size: var(--cuerpo-s);
  font-weight: var(--peso-enfasis);
  text-underline-offset: 0.2em;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

.tabla__marco { overflow-x: auto; margin-top: var(--e6); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--cuerpo-s); }
.tabla thead th {
  text-align: left;
  padding: var(--e3) var(--e4);
  border-bottom: var(--regla-fuerte) solid var(--borde-fuerte);
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}
.tabla tbody th, .tabla tbody td {
  padding: var(--e4);
  border-bottom: var(--regla) solid var(--borde);
  vertical-align: top;
  text-align: left;
}
.tabla :is(thead, tbody) :is(th, td):first-child { padding-left: 0; }
.tabla tbody th { font-weight: var(--peso-enfasis); }
.tabla tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* ── Lista de hechos ─────────────────────────────────────────────────────── */

.lista-hechos {
  list-style: none;
  margin: var(--e8) 0 0;
  padding: 0;
  border-top: var(--regla) solid var(--borde);
}
.lista-hechos li {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--e6);
  padding: var(--e4) 0;
  border-bottom: var(--regla) solid var(--borde);
}
.lista-hechos__clave {
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.lista-hechos__valor { max-width: 62ch; text-wrap: pretty; }

/* ── Flujo de cuatro pasos ───────────────────────────────────────────────── */

.flujo { list-style: none; margin: 0; padding: 0; }
.paso {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--e8);
  padding-block: var(--e8);
  border-top: var(--regla) solid var(--borde);
}
.paso:last-child { border-bottom: var(--regla) solid var(--borde); }
.paso__numero {
  font-family: var(--fuente-display);
  font-size: var(--titulo);
  font-weight: var(--peso-display);
  color: var(--texto-suave);
  border-right: var(--regla) solid var(--borde);
  padding-top: var(--e1);
}
.paso__cuerpo { display: grid; gap: var(--e4); }
.paso__nombre {
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  line-height: var(--alto-titulo);
  letter-spacing: var(--tracking-display);
}
.paso__meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--e2) var(--e4);
}
.paso__meta dd { margin: 0; }
.paso__intercambio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e6);
  padding-top: var(--e4);
  border-top: var(--regla) solid var(--borde);
}
.paso__intercambio > div { display: grid; gap: var(--e2); align-content: start; }
.paso__intercambio p { margin: 0; max-width: 46ch; font-size: var(--cuerpo-s); }

/* ── Índice de obligaciones ──────────────────────────────────────────────── */

.indice__grupo { margin-bottom: var(--e24); scroll-margin-top: 6rem; }
.indice {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--regla-fuerte) solid var(--borde-fuerte);
  columns: 2;
  column-gap: var(--e12);
}
.indice__item { break-inside: avoid; border-bottom: var(--regla) solid var(--borde); }
.indice__item a {
  display: grid;
  gap: var(--e1);
  padding: var(--e4) var(--e4) var(--e4) 0;
  text-decoration: none;
  transition: background var(--duracion) var(--curva-salida);
}
.indice__item a:hover { background: var(--superficie-alta); }
.indice__nombre { font-size: var(--cuerpo-s); font-weight: var(--peso-enfasis); }
.indice__meta {
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ── Preguntas frecuentes ────────────────────────────────────────────────── */

.faq { border-bottom: var(--regla) solid var(--borde); }
.faq:first-of-type { border-top: var(--regla-fuerte) solid var(--borde-fuerte); }
.faq__pregunta {
  padding: var(--e4) var(--e8) var(--e4) 0;
  font-size: var(--cuerpo-l);
  font-weight: var(--peso-enfasis);
  cursor: pointer;
  list-style: none;
  position: relative;
  text-wrap: pretty;
}
.faq__pregunta::-webkit-details-marker { display: none; }
/* La cruz se convierte en raya girando y colapsando la barra vertical. Antes
 * era una transición sobre `content`, que no interpola: no animaba nada. Los
 * dos extremos declaran la misma lista de funciones, porque interpolar contra
 * una escala cero cae en una matriz no invertible. */
.faq__pregunta::before,
.faq__pregunta::after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--texto-suave);
  transition: transform var(--duracion) var(--curva-corte),
              background var(--duracion-corta) var(--curva-salida);
}
.faq__pregunta::before {
  right: 6.25px; width: 1.5px; height: 14px;
  transform: translateY(-50%) rotate(0deg) scaleY(1);
}
.faq__pregunta::after { right: 0; width: 14px; height: 1.5px; transform: translateY(-50%); }
.faq[open] .faq__pregunta::before { transform: translateY(-50%) rotate(90deg) scaleY(0); }
.faq__pregunta:hover { background: var(--superficie-alta); }
.faq__pregunta:hover::before, .faq__pregunta:hover::after { background: var(--texto); }
.faq__respuesta { padding-bottom: var(--e6); max-width: var(--medida-lectura); }
.faq__respuesta p { color: var(--texto-suave); }
.faq--compacta { margin-top: var(--e6); }

/* ── Vistazo paso a paso ─────────────────────────────────────────────────── */

.vistazo {
  border: var(--regla-fuerte) solid var(--borde-fuerte);
  background: var(--superficie-alta);
}
.selector-vistazo { padding: clamp(var(--e6), 4vw, var(--e12)); }
.selector-vistazo__titulo {
  margin: 0 0 var(--e6);
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  line-height: var(--alto-titulo);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.modalidades { border-top: var(--regla-fuerte) solid var(--borde-fuerte); }
.modalidad {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e4);
  min-height: 5.5rem;
  padding: var(--e4) 0;
  border: 0;
  border-bottom: var(--regla) solid var(--borde-fuerte);
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duracion-corta) var(--curva-salida),
              padding var(--duracion-corta) var(--curva-salida);
}
.modalidad:hover, .modalidad:focus-visible {
  padding-inline: var(--e4);
  background: var(--superficie-evidencia);
}
.modalidad__cabecera { display: grid; gap: var(--e1); }
.modalidad__cabecera strong {
  font-family: var(--fuente-display);
  font-size: var(--subtitulo);
  letter-spacing: var(--tracking-display);
}
.modalidad__cabecera > span {
  font-family: var(--fuente-mono);
  font-size: var(--dato);
  color: var(--texto-suave);
}
.modalidad__accion {
  font-weight: var(--peso-dato);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.avance { height: 3px; background: var(--borde); }
.avance__barra {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acento);
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: transform var(--duracion-larga) var(--curva-salida);
}

.tarjetas { list-style: none; margin: 0; padding: 0; }
.tarjeta { padding: clamp(var(--e6), 4vw, var(--e12)); }
.tarjeta__cuenta {
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e4);
}
.tarjeta__titulo {
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  line-height: var(--alto-titulo);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin-bottom: var(--e3);
}
.tarjeta__ayuda {
  max-width: 52ch;
  color: var(--texto-suave);
  margin-bottom: var(--e6);
  text-wrap: pretty;
}
.tarjeta__saltar {
  margin-top: var(--e4);
  background: none;
  border: 0;
  padding: var(--e2) 0;
  font: inherit;
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* El alto no se anima: se fija, para que cambiar de pregunta no salte. */
.tarjeta { min-height: 20rem; }

.opciones { display: flex; flex-direction: column; gap: var(--e2); max-width: 34rem; }
.opcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e4);
  min-height: var(--area-tactil);
  padding: var(--e3) var(--e4);
  border: var(--regla-fuerte) solid var(--borde-fuerte);
  background: var(--superficie);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duracion-corta) var(--curva),
              color var(--duracion-corta) var(--curva),
              transform var(--duracion-corta) var(--curva);
}
.opcion__detalle {
  font-family: var(--fuente-mono);
  font-size: var(--rotulo);
  color: var(--texto-suave);
  text-align: right;
}
.opcion:hover {
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
  transform: translateX(3px);
}
.opcion:hover .opcion__detalle,
.opcion[aria-pressed="true"] .opcion__detalle { color: inherit; }
.opcion[aria-pressed="true"] {
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
}

.entrada {
  display: block;
  width: 100%;
  max-width: 34rem;
  min-height: var(--area-tactil);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: var(--regla-fuerte) solid var(--borde-fuerte);
  background: var(--superficie);
  font: inherit;
  color: var(--texto);
}
.entrada::placeholder { color: var(--texto-suave); opacity: 1; }

.vistazo__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) clamp(var(--e8), 5vw, var(--e16));
  border-top: var(--regla) solid var(--borde);
  min-height: 3.5rem;
}
.vistazo__atras {
  background: none;
  border: 0;
  padding: var(--e2) 0;
  font: inherit;
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
  cursor: pointer;
}
.vistazo__atras:hover { color: var(--texto); }
.vistazo__aviso { margin: 0; font-size: var(--cuerpo-s); color: var(--texto-suave); }
.vistazo__aviso { flex: 1; text-align: center; }
.vistazo__cambiar, .vistazo__reiniciar {
  min-height: var(--area-tactil);
  padding: var(--e2) 0;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: var(--cuerpo-s);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.vistazo__cambiar:hover, .vistazo__reiniciar:hover { color: var(--texto); }

/* ── Resultado ───────────────────────────────────────────────────────────── */

.resultado { margin-top: var(--e12); scroll-margin-top: 6rem; }
.resultado[tabindex="-1"]:focus { outline: 0; box-shadow: none; }
.resultado__titulo {
  max-width: 18ch;
  margin: 0 0 var(--e3);
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  line-height: var(--alto-titulo);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.resultado__cifras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e8);
  margin: 0 0 var(--e3);
  padding: var(--e4) 0;
  border-block: var(--regla-fuerte) solid var(--borde-fuerte);
}
.resultado__cifras li {
  display: flex;
  gap: var(--e2);
  align-items: baseline;
}
.resultado__cifras strong {
  min-width: 2ch;
  font-family: var(--fuente-display);
  font-size: var(--subtitulo);
  font-weight: var(--peso-dato);
}
.resultado__cifras span { text-wrap: pretty; }
.resultado__aclaracion {
  max-width: 60ch;
  margin: 0 0 var(--e6);
  color: var(--texto-suave);
  font-size: var(--cuerpo-s);
  text-wrap: pretty;
}
.resultado__aclaracion strong { color: var(--texto); }
.resultado__nota {
  max-width: var(--medida-lectura);
  margin: 0 0 var(--e6);
  padding: var(--e3) var(--e4);
  border: var(--regla-fuerte) solid var(--acento);
  font-size: var(--cuerpo-s);
  text-wrap: pretty;
}
.resultado__afinar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e3) var(--e6);
  align-items: center;
  margin: 0 0 var(--e8);
  padding-bottom: var(--e4);
  border-bottom: var(--regla) solid var(--borde);
}
.resultado__afinar p { margin: 0; color: var(--texto-suave); }
.resultado__afinar .boton { justify-self: end; white-space: nowrap; }
.lectura-precision {
  margin: 0 0 var(--e12);
  padding-block: var(--e6);
  border-block: var(--regla-fuerte) solid var(--borde-fuerte);
}
.lectura-precision h2 {
  margin: 0 0 var(--e4);
  font-family: var(--fuente-display);
  font-size: var(--subtitulo);
  letter-spacing: var(--tracking-display);
}
.lectura-precision dl { margin: 0; }
.lectura-precision dl > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--e4);
  padding-block: var(--e3);
  border-bottom: var(--regla) solid var(--borde);
}
.lectura-precision dl > div:last-child { border-bottom: 0; }
.lectura-precision dt {
  font-size: var(--rotulo);
  font-weight: var(--peso-dato);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.lectura-precision dd { margin: 0; }
.resultado__grupo {
  margin: 0;
  border-top: var(--regla-fuerte) solid var(--borde-fuerte);
}
.resultado > .resultado__grupo:first-of-type { margin-top: var(--e8); }
.resultado__grupo:last-of-type { border-bottom: var(--regla-fuerte) solid var(--borde-fuerte); }
.resultado__grupo-resumen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--e4);
  align-items: baseline;
  padding-block: var(--e4);
  list-style: none;
  cursor: pointer;
}
.resultado__grupo-resumen::-webkit-details-marker { display: none; }
.resultado__materia {
  font-family: var(--fuente-display);
  font-size: var(--subtitulo);
  letter-spacing: var(--tracking-display);
}
.resultado__cantidad {
  font-family: var(--fuente-cuerpo);
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}
.resultado__grupo-accion {
  color: var(--texto-suave);
  font-size: var(--cuerpo-s);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.resultado__grupo-cerrar { display: none; }
.resultado__grupo[open] .resultado__grupo-abrir { display: none; }
.resultado__grupo[open] .resultado__grupo-cerrar { display: inline; }
.resultado__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--regla) solid var(--borde);
}
.resultado .renglon,
.resultado .renglon:last-child {
  padding: 0;
  border-bottom: var(--regla) solid var(--borde);
}
.renglon__desplegable { margin: 0; }
.renglon__resumen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: center;
  padding-block: var(--e4);
  list-style: none;
  cursor: pointer;
}
.renglon__resumen::-webkit-details-marker { display: none; }
.renglon__principal {
  display: grid;
  gap: var(--e2);
  justify-items: start;
  min-width: 0;
}
.resultado .renglon__nombre {
  font-size: var(--cuerpo);
  line-height: 1.45;
  text-wrap: pretty;
}
.renglon__accion {
  font-size: var(--cuerpo-s);
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.renglon__cerrar { display: none; }
.renglon__desplegable[open] .renglon__abrir { display: none; }
.renglon__desplegable[open] .renglon__cerrar { display: inline; }
.renglon__contenido {
  max-width: var(--medida-lectura);
  padding: 0 0 var(--e6);
}
.resultado .renglon__datos {
  padding-top: var(--e4);
  border-top: var(--regla) solid var(--borde);
}
.resultado .renglon__datos > div { grid-template-columns: 9rem minmax(0, 1fr); }
.resultado__meta {
  margin: var(--e8) 0 var(--e4);
  padding-top: var(--e3);
  border-top: var(--regla) solid var(--borde);
  color: var(--texto-suave);
  font-size: var(--rotulo);
}
.resultado__conversion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4) var(--e8);
  align-items: center;
  margin-top: var(--e8);
  padding-block: var(--e6);
  border-block: var(--regla-fuerte) solid var(--borde-fuerte);
}
.resultado__conversion p { margin: 0; text-wrap: pretty; }
.resultado__conversion .boton { justify-self: end; white-space: nowrap; }
.resultado__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin-top: var(--e3);
  color: var(--texto-suave);
  font-size: var(--cuerpo-s);
}
@media (hover: hover) {
  .resultado__grupo-resumen:hover :is(.resultado__materia, .resultado__grupo-accion) {
    color: var(--texto);
  }
  .renglon__resumen:hover .renglon__nombre { text-decoration: underline; text-underline-offset: 0.18em; }
  .renglon__resumen:hover .renglon__accion { color: var(--texto); }
}
.resultado-ia {
  margin-top: var(--e16);
  padding: clamp(var(--e6), 4vw, var(--e12));
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
}
.resultado-ia h2 {
  margin: 0 0 var(--e3);
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.resultado-ia > p { max-width: 62ch; color: var(--texto-inverso-suave); }
.resultado-ia__consentimiento {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--e3);
  max-width: 62ch;
  margin-block: var(--e6);
  color: var(--texto-inverso-suave);
  cursor: pointer;
}
.resultado-ia__consentimiento input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
.resultado-ia .boton:disabled { cursor: not-allowed; opacity: 0.48; }
.resultado-ia__estado { min-height: 1.5em; margin-top: var(--e4); font-size: var(--cuerpo-s); }
.resultado-ia__salida {
  margin-top: var(--e6);
  padding: var(--e6);
  background: var(--superficie);
  color: var(--texto);
}
.resultado-ia__salida h3 { margin: var(--e6) 0 var(--e3); font-size: var(--cuerpo-l); }
.resultado-ia__salida :is(ol, ul) { margin: 0; padding-left: var(--e6); }
.resultado-ia__salida li + li { margin-top: var(--e3); }
.resultado-ia__salida li span { display: block; margin-top: var(--e1); color: var(--texto-suave); }
.resultado-ia__resumen { margin: 0; font-size: var(--cuerpo-l); }
@media (max-width: 47.9375rem) {
  .resultado { scroll-margin-top: 11rem; }
  .modalidad { gap: var(--e3); }
  .modalidad:hover, .modalidad:focus-visible { padding-inline: var(--e3); }
  .opcion { grid-template-columns: 1fr; gap: var(--e1); }
  .opcion__detalle { text-align: left; }
  .vistazo__pie { flex-wrap: wrap; }
  .vistazo__aviso { order: 3; flex-basis: 100%; text-align: left; }
  .resultado__afinar { grid-template-columns: 1fr; }
  .resultado__afinar .boton { justify-self: start; }
  .lectura-precision dl > div { grid-template-columns: 1fr; gap: var(--e1); }
  .renglon__resumen { grid-template-columns: 1fr; gap: var(--e3); }
  .renglon__accion { justify-self: start; }
  .resultado .renglon__datos > div { grid-template-columns: 1fr; }
  .resultado__conversion { grid-template-columns: 1fr; }
  .resultado__conversion .boton { justify-self: start; }
  .resultado__pie { align-items: flex-start; flex-direction: column; gap: var(--e1); }
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

/* En 98 de 100 páginas el pie llegaba sin separación del cuerpo. */
.pie {
  padding-top: var(--banda-aire);
  border-top: var(--regla-fuerte) solid var(--borde-inverso-fuerte);
}
.pie__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--e6);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--e12);
  padding-bottom: var(--e12);
}
.pie__logo { display: block; height: 40px; width: auto; margin-bottom: var(--e6); }
.pie__linea { max-width: 42ch; color: var(--texto-inverso-suave); font-size: var(--cuerpo-s); }
/* Quién responde. Va en lino pleno, no en Sage Mist como la línea de arriba:
 * es el único elemento accionable del pie y la jerarquía la tiene que llevar
 * el contraste, no el tamaño. El nombre encima y la dirección debajo, para que
 * el enlace quede solo en su renglón y sea un blanco fácil en táctil. */
.pie__contacto {
  margin-top: var(--e6);
  display: grid;
  gap: var(--e1);
  font-size: var(--cuerpo-s);
}
.pie__quien {
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}
.pie__contacto a {
  color: var(--texto-inverso);
  font-weight: var(--peso-enfasis);
  text-underline-offset: 0.18em;
  justify-self: start;
  min-height: var(--area-tactil);
  display: flex;
  align-items: center;
}
.pie__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.pie__nav a { font-size: var(--cuerpo-s); text-decoration: none; color: var(--texto-inverso-suave); }
.pie__nav a:hover { color: var(--texto-inverso); text-decoration: underline; }

/* La barra de cierre: una regla fina y la firma. Aqui vivia la leyenda de
 * alcance, y era el bloque de prosa mas largo del sitio: cuatro negaciones
 * seguidas justo antes del ultimo renglon que leia un comprador. */
.pie__cierre {
  border-top: var(--regla) solid var(--borde-inverso);
}
.pie__firma {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: var(--e8) var(--e6);
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}


/* ── Contacto global ───────────────────────────────────────────────────── */

/* Una placa flotante, no una tarjeta ajena al sistema. El icono y la palabra
 * hacen reconocible el canal; el enlace existe aunque JavaScript no cargue. */
.whatsapp-flotante {
  position: fixed;
  right: var(--e6);
  bottom: max(var(--e6), env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 3.5rem;
  padding: var(--e3) var(--e4);
  border: var(--regla-fuerte) solid var(--ameyal-natural-linen);
  background: var(--ameyal-forest-ink);
  color: var(--ameyal-natural-linen);
  font-size: var(--cuerpo-s);
  font-weight: var(--peso-enfasis);
  line-height: 1;
  text-decoration: none;
  transition: background var(--duracion-corta) var(--curva-salida),
              transform var(--duracion-corta) var(--curva-salida);
}
.whatsapp-flotante__icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .whatsapp-flotante:hover {
    background: var(--ameyal-evergreen);
    transform: translateY(-2px);
  }
}
.whatsapp-flotante:active { transform: translateY(1px); }

.contacto-modal {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  overflow: visible;
}
.contacto-modal::backdrop { background: rgba(21, 51, 45, 0.72); }
.contacto-modal-abierto { overflow: hidden; }
.contacto-modal[data-contacto-fallback] {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  width: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--e4);
  place-items: center;
  background: rgba(21, 51, 45, 0.72);
  overflow: auto;
}
.contacto-modal[data-contacto-fallback] .contacto-modal__placa {
  width: min(34rem, 100%);
}
.contacto-modal__placa {
  position: relative;
  max-height: calc(100dvh - 2rem);
  padding: var(--e8);
  border: var(--regla-fuerte) solid var(--ameyal-forest-ink);
  background: var(--ameyal-natural-linen);
  overflow: auto;
}
.contacto-modal__titulo {
  max-width: 18ch;
  padding-right: var(--e12);
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  font-weight: var(--peso-titular);
  line-height: var(--alto-m);
  letter-spacing: var(--tracking-m);
  text-wrap: balance;
}
.contacto-modal__texto {
  max-width: 40ch;
  margin: var(--e3) 0 0;
  color: var(--texto-suave);
  text-wrap: pretty;
}
.contacto-modal__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}
.contacto-modal__acciones .boton { flex: 1 1 13rem; }
.contacto-modal__firma {
  margin: var(--e6) 0 0;
  padding-top: var(--e4);
  border-top: var(--regla) solid var(--borde);
  color: var(--texto-suave);
  font-size: var(--rotulo);
  font-weight: var(--peso-enfasis);
  letter-spacing: var(--tracking-rotulo);
  line-height: var(--alto-dato);
  text-transform: uppercase;
}
.contacto-modal__cerrar {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 1;
  display: inline-flex;
  width: var(--area-tactil);
  height: var(--area-tactil);
  padding: 0;
  align-items: center;
  justify-content: center;
  border: var(--regla) solid var(--borde-fuerte);
  background: var(--ameyal-natural-linen);
  color: var(--texto);
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.contacto-modal__cerrar:hover { background: var(--ameyal-sage-mist); }

@media (max-width: 47.9375rem) {
  .whatsapp-flotante {
    right: var(--e4);
    bottom: max(var(--e4), env(safe-area-inset-bottom));
    width: 3.25rem;
    min-height: 3.25rem;
    padding: 0;
  }
  .whatsapp-flotante__texto { display: none; }
  .contacto-modal__placa { padding: var(--e6); }
  .contacto-modal__titulo { padding-right: var(--e8); }
  .contacto-modal__acciones { display: grid; }
  .contacto-modal__acciones .boton { width: 100%; }
}


/* ── Movimiento ──────────────────────────────────────────────────────────── */

/* Regla que gobierna todo lo de abajo: el REPOSO de cada elemento es su estado
 * final. El estado oculto sólo vive dentro de un @keyframes, y ese keyframes
 * sólo dentro de la media query. Si el CSS de movimiento no aplica, no queda
 * nada invisible que rescatar.
 *
 * Ningún retraso se escribe como literal: todos salen de --escalon, que
 * colapsa a 0ms con la preferencia activa. Un retraso literal con `backwards`
 * mantendría el estado inicial durante la espera y armaría la página a saltos
 * justo para quien pidió que no se moviera. */

@keyframes cortar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes alzar {
  from { opacity: 0; transform: translateY(var(--recorrido)); }
  to   { opacity: 1; transform: none; }
}
@keyframes procedencia {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes entrar-adelante {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrar-atras {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* El corte: cada línea del titular se descubre de izquierda a derecha. */
  .tajo { animation: cortar var(--duracion-larga) var(--curva-corte) both; }
  .tajo:nth-child(2) { animation-delay: var(--escalon); }

  /* El alzado del cabezal. Cola total 515 ms; antes sólo la fotografía tardaba
   * 1,200 ms en terminar de aparecer. */
  .cabezal__firma,
  .cabezal__entrada,
  .cabezal__acciones,
  .tira,
  .cabezal__nota { animation: alzar var(--duracion-revelado) var(--curva-salida) backwards; }
  .cabezal__entrada  { animation-delay: calc(var(--escalon) * 2); }
  .cabezal__acciones { animation-delay: calc(var(--escalon) * 3); }
  .tira              { animation-delay: calc(var(--escalon) * 4); }
  .cabezal__nota     { animation-delay: calc(var(--escalon) * 5); }

  /* El gesto protagonista, una vez por visita. */
  .procedencia::after {
    animation: procedencia var(--duracion-procedencia) var(--curva-salida)
               calc(var(--escalon) * 6) 1 backwards;
  }

  /* Revelado al desplazar. El atributo lo escribe movimiento.js un instante
   * antes de observar cada nodo, y sólo en nodos que están bajo el pliegue: el
   * generador no lo emite nunca, así que sin JS no hay nada oculto. */
  [data-revelar="pendiente"] { opacity: 0; transform: translateY(var(--recorrido)); }
  [data-revelar="puesta"] {
    opacity: 1;
    transform: none;
    transition: opacity var(--duracion-revelado) var(--curva-salida) calc(var(--i, 0) * var(--escalon)),
                transform var(--duracion-revelado) var(--curva-salida) calc(var(--i, 0) * var(--escalon));
  }

  .faq[open] .faq__respuesta { animation: alzar var(--duracion-larga) var(--curva-salida) backwards; }

  /* El vistazo entra por el lado del que viene. Antes toda tarjeta entraba
   * desde la derecha, también al pulsar «atrás»: el gesto contradecía la
   * acción. */
  [data-sentido="adelante"] .tarjeta:not([hidden]) {
    animation: entrar-adelante var(--duracion-larga) var(--curva-salida);
  }
  [data-sentido="atras"] .tarjeta:not([hidden]) {
    animation: entrar-atras var(--duracion-larga) var(--curva-salida);
  }
  .resultado [data-orden] {
    animation: alzar var(--duracion-revelado) var(--curva-salida)
               calc(var(--i, 0) * var(--escalon)) backwards;
  }
}

/* Empuje lateral. Sobre transform, en los hijos, nunca sobre padding: en el
 * índice de 95 obligaciones dentro de columns:2, animar padding era el peor
 * caso posible de reflujo. Queda una sola lista de enlaces: las otras dos
 * —conteos y materias— eran la misma cifra repetida y se fueron con ella. */
.indice__nombre, .indice__meta {
  transition: transform var(--duracion-corta) var(--curva-salida);
}
.indice__item a:is(:hover, :focus-visible) :is(.indice__nombre, .indice__meta) {
  transform: translateX(6px);
}
/* La regla inferior engrosa con box-shadow: es pintura, no layout, y evita el
 * borde lateral de color, que está prohibido. */
.indice__item a:is(:hover, :focus-visible) {
  box-shadow: inset 0 -1.5px 0 currentColor;
  transition: box-shadow var(--duracion-corta) var(--curva-salida);
}

/* El acuse de recibo del vistazo. Los 170 ms del barrido son idénticos al
 * setTimeout de vistazo.js: termina en el mismo fotograma en que cambia la
 * pregunta, y el retraso queda explicado. El cuadro relleno es la marca
 * permanente y comunica el estado por forma, no sólo por color. */
.opcion { position: relative; padding-left: 2.5rem; }
.opcion::before {
  content: "";
  position: absolute;
  left: var(--e4);
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: var(--regla-fuerte) solid currentColor;
  opacity: 0.45;
  transition: opacity var(--duracion-corta) var(--curva-salida),
              background var(--duracion-corta) var(--curva-salida);
}
.opcion[aria-pressed="true"]::before { background: var(--acento); opacity: 1; }
.opcion::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 170ms var(--curva-salida);
}
.opcion[aria-pressed="true"]::after { transform: scaleX(1); }

/* La cabecera se compacta al desplazar. No se toca padding ni height: son
 * layout, y bajo un sticky provocan reflujo en cada fotograma. */
.marca__logo { transition: transform var(--duracion-corta) var(--curva-salida); }
.cabecera[data-compacta] { border-bottom-color: var(--borde-fuerte); }
.cabecera[data-compacta] .marca__logo { transform: scale(0.82); transform-origin: left center; }

/* Estados que no existían: en 243 reglas había once :hover, un :focus-visible
 * y un :active. */
.tabla tbody tr:hover { background: var(--superficie-alta); }
.entrada:focus { border-color: var(--ameyal-forest-ink); }
.tarjeta__saltar:hover, .vistazo__atras:hover { color: var(--texto); }

/* NO SE MUEVE, POR DECISIÓN:
 *  1. El anillo de foco. Retrasar su aparición es una regresión de
 *     accesibilidad, no un detalle de estilo.
 *  2. Los rangos de sanción en UMA. Nunca, en ningún componente.
 *  3. `.marca-estado` no parpadea ni pulsa: el estado se lee en palabras.
 *  4. Los conteos NO cuentan de cero hacia arriba. Un número que sube es la
 *     métrica grande de landing SaaS que PRODUCT.md nombra anti-referencia, y
 *     durante la cuenta la página mostraría cifras que no están en la matriz.
 *  5. La cabecera no lleva barra de avance de scroll: sería una segunda línea
 *     Honey, y dos líneas compiten y ninguna significa nada.
 *
 * PROHIBIDO EN TODO EL SISTEMA: cubic-bezier con sobrepaso, steps() de rebote,
 * animation-direction: alternate, iteration-count distinto de 1, y animar
 * width, height, padding, margin, top o left. Una placa no oscila. */

/* ── Adaptación ──────────────────────────────────────────────────────────── */

@media (max-width: 71.9375rem) {
  .peldano { grid-template-columns: minmax(0, 1fr) minmax(9rem, auto); }
  .peldano__mas { grid-column: 1 / -1; }
  .indice { columns: 1; }
}

@media (max-width: 63.9375rem) {
  .dos-columnas { grid-template-columns: 1fr; }
  .pie__interior { grid-template-columns: 1fr; gap: var(--e8); }
  /* Un numero impar de celdas en dos columnas deja una suelta al final: que la
   * ocupe entera, para que la fila sola senale en vez de sobrar. Con un numero
   * par la condicion no se cumple y la reticula queda cuadrada sola. Las filas
   * se separan con la misma regla fina que las columnas, para que la placa no
   * pierda su reticula al plegarse. */
  .tira { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .tira__celda { padding-right: var(--e3); }
  .tira__celda + .tira__celda { border-left: 0; padding-left: 0; }
  .tira__celda:nth-child(even) {
    border-left: var(--regla) solid var(--borde-inverso);
    padding-left: var(--e3);
  }
  .tira__celda:nth-child(n+3) { border-top: var(--regla) solid var(--borde-inverso); }
  .tira__celda:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cabezal__urgente { margin-left: 0; }
  /* La placa partida se dobla: la vista pasa a banda debajo del dicho y suelta
   * la regla lateral, que a una columna no separa nada. */
  .cabezal--partido .cabezal__interior { grid-template-columns: minmax(0, 1fr); }
  .cabezal--partido .cabezal__dicho { padding-right: 0; }
  .cabezal--partido .cabezal__vista {
    border-left: 0;
    padding-left: 0;
    min-height: 0;
    height: clamp(10rem, 26vw, 14rem);
  }
  /* Campo entero deja de ser campo entero. A una columna no hay mitad derecha
   * donde dejar respirar la fotografia: el texto ocupa el ancho completo y
   * cualquier velo que lo haga legible deja la imagen al 10 % de presencia,
   * que es el fracaso de julio otra vez, ahora en el telefono. Asi que baja a
   * banda: el texto sobre Forest Ink limpio y la fotografia entera debajo, sin
   * una sola capa encima. El campo entero es una composicion de escritorio. */
  .cabezal--campo .cabezal__vista {
    position: static;
    height: clamp(9rem, 34vw, 13rem);
  }
  .cabezal--campo .cabezal__vista::after { background: none; }
  .cabezal--campo .cabezal__dicho { max-width: none; }
}

@media (max-width: 47.9375rem) {
  .cabecera__interior { padding: var(--e3) var(--e4); gap: var(--e3); }
  .cabecera__nav { gap: var(--e3); font-size: var(--rotulo); flex-wrap: wrap; }
  .cabecera__nav a { min-height: var(--area-tactil); display: flex; align-items: center; }
  .marca__logo { height: 28px; }
  .banda__interior, .cabezal__interior, .pie__interior,
  .pie__firma { padding-inline: var(--e4); }
  /* Antes los tres niveles salían a 28 px idénticos: ni un salto de tamaño
   * en la pantalla donde más falta hace orientarse. Razones 1.33 y 1.25.
   * A 2.5rem fijos, "Un solo interlocutor." mide 375 px y envolvía por debajo
   * de 414 px de ventana. La rampa lo mantiene en un renglón desde 360. */
  .tajo--remate { font-size: clamp(2.125rem, 9vw, 2.5rem); }
  .tajo--materia { font-size: 1.375rem; }
  .titulo-pagina { font-size: 1.875rem; }
  .titulo-seccion, .paso__nombre, .tarjeta__titulo { font-size: 1.5rem; }
  .cabezal__interior { padding: var(--e6) var(--e4) var(--e8); }
  /* Las dos columnas de `.tira` ya vienen del bloque de 63.9375rem: aquí no se
   * repiten. */
  .cabezal__urgente {
    width: 100%;
    min-height: var(--area-tactil);
    display: flex;
    align-items: center;
  }
  .peldano { grid-template-columns: 1fr; gap: var(--e4); padding-block: var(--e8); }
  .peldano--destacado { padding-inline: var(--e4); }
  .peldano__precio {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--e1) var(--e3);
  }
  .peldano__precio dt { margin-top: 0; }
  .paso { grid-template-columns: 1fr; gap: var(--e4); padding-block: var(--e8); }
  .paso__numero { border-right: 0; padding-top: 0; }
  .paso__intercambio { grid-template-columns: 1fr; gap: var(--e6); }
  .renglon__datos > div { grid-template-columns: 1fr; gap: var(--e1); }
  .lista-hechos li { grid-template-columns: 1fr; gap: var(--e2); }
  .aviso-resumen { align-items: stretch; flex-direction: column; }
  .aviso-resumen .boton { width: 100%; }
  .cabezal__acciones .boton { width: 100%; }
  .puerta + .puerta { border-left: 0; padding-left: 0; }
  .puerta { padding-block: var(--e6); }
}