/*
  mutuOK — la portada.
  ==========================================================================

  La paleta, la tipografía y el ritmo viven en `marca.css` y **no se tocan
  desde acá**. Este archivo solo arma piezas con esos tokens.

  ## La idea que organiza todo: primero la casa, después la herramienta

  mutuOK no le vende software a nadie. Le vende un crédito hipotecario a una
  persona que está comprando una casa, y esa persona llega con **una** pregunta:
  «¿cuánto pagaría?». La primera versión de esta hoja contestaba esa pregunta en
  el segundo cero, con la calculadora arriba de todo. Estaba bien resuelta y mal
  ubicada: alguien aterrizaba en un instrumento **sin saber en la casa de quién
  estaba**, y una mutuaria es una institución, no una herramienta suelta.

  Así que la página abre con una bienvenida, sigue con qué es una mutuaria —corta
  y cierta— y recién en la tercera sección calcula. El instrumento no cambió ni
  un píxel: solo bajó dos secciones. El anuncio y las capturas siguen viniendo
  después, cuando ya hay un número sobre la mesa.

  De ahí salen las cinco reglas de esta hoja:

  1. **Editorial y claro, no oscuro y de producto.** Crema, retícula visible,
     reglas finas, márgenes anchos, composición asimétrica. Un informe bien
     tipografiado, no la pantalla de una aplicación.
  2. **Los números son el contenido.** Una mutuaria vende cifras. Van en
     `--fuente-dato`, tabulares, grandes, con la unidad en chico al lado. La
     página se tiene que poder leer pasando solo por los números.
  3. **Nada de ventanas de navegador falsas ni halos de degradado.** Las
     capturas van a sangre, recortadas dentro de la composición; la profundidad
     la dan el papel sobre crema, las reglas y el espacio.
  4. **El movimiento va atado al dato o a la carga**, nunca al scroll. Un número
     que se asienta cuando se mueve un control vale más que veinte bloques que
     aparecen de abajo. En esta hoja no hay una sola animación de entrada por
     scroll: lo único que se anima solo es la bienvenida, una vez, al cargar —el
     isotipo trazándose y el texto entrando detrás—, y con movimiento reducido
     aparece todo entero.
  5. **El ocre nunca lleva letras sobre claro.** 1,97:1 sobre crema. Vive en la
     barra del deslizador, en el filo de la solapa activa y en el trazo del
     alero de la bienvenida. Como letra, solo sobre tinta.

  Los únicos colores nuevos son los neutros claros para texto sobre tinta: la
  paleta de marca los define para fondo claro, y `--gris` sobre `--tinta` no se
  lee. No son colores de marca, son su complemento —y son cálidos, para que el
  pie no se sienta de otra paleta—.
*/

:root {
  --claro: #f4ece2; /* titulares sobre tinta — 14,4:1 */
  --claro-tenue: #c2b3a4; /* cuerpo sobre tinta — 8,3:1 */
  --borde-claro: rgb(255 255 255 / 14%);

  /* El margen del papel. Es el mismo en todas partes y es lo que hace que la
     retícula se lea como retícula. */
  --margen: clamp(20px, 4vw, 48px);

  /*
    La curva del trazo del isotipo. `--curva` frena de golpe al final, que es lo
    que quiere una tarjeta que aterriza; una punta de lápiz que dibuja arranca y
    para, así que esta entra y sale.
  */
  --trazo: cubic-bezier(0.45, 0, 0.15, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   Reset
   ═══════════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--gris);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--tinta);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.025em;
  line-height: 1.16;
}

p,
ul,
ol,
dl,
figure,
fieldset {
  margin: 0;
}

fieldset {
  padding: 0;
  border: 0;
  min-width: 0; /* si no, un fieldset no se deja encoger dentro de un grid */
}

legend {
  padding: 0;
}

/* Foco visible en todo lo que se alcanza con el teclado. */
:focus-visible {
  outline: 3px solid var(--terracota-fuerte);
  outline-offset: 3px;
  border-radius: 2px;
}

.pie :focus-visible {
  outline-color: var(--ocre);
}

::selection {
  background: var(--terracota-suave);
  color: var(--tinta);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a.solo-lectores:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
  border: 1px solid var(--tinta);
  border-radius: var(--r-chico);
  background: var(--papel);
  color: var(--tinta);
  font-weight: var(--peso-semi);
}

[hidden] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   La retícula
   ═══════════════════════════════════════════════════════════════════════ */

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

/*
  **El pliego**: la retícula que deja que algo salga a sangre sin desbordar.

  Tres columnas —margen, contenido, margen—. Todo cae en la del medio salvo lo
  que se declara `sangra-der` o `sangra-izq`, que llega hasta el filo de la
  ventana. Como las columnas de los costados nunca bajan de `--margen` y la del
  medio se topa en `--ancho`, la suma es siempre exactamente el ancho de la
  ventana: una captura a sangre y cero desborde horizontal.
*/
.pliego {
  display: grid;
  grid-template-columns:
    [orilla-i] minmax(var(--margen), 1fr)
    /* El ancho **menos los dos márgenes**: así la columna del medio empieza
       exactamente donde empieza el texto de un `.envoltorio`, y una ficha no
       se desalinea de la sección que la contiene. */
    [centro-i] minmax(0, calc(var(--ancho) - var(--margen) * 2))
    [centro-f] minmax(var(--margen), 1fr) [orilla-f];
}

.pliego > * {
  grid-column: centro-i / centro-f;
}

.sangra-der {
  grid-column: centro-i / orilla-f;
}

.sangra-izq {
  grid-column: orilla-i / centro-f;
}

.franja {
  padding: clamp(56px, 7vw, 100px) 0;
}

.franja--papel {
  background: var(--papel);
}

/*
  **La placa**: el campo tostado donde van las capturas.

  Las pantallas de la plataforma son de tema claro —el acento de la institución
  manda en claro, y el cromo oscuro del producto es azul pizarra y no se
  configura—, así que una captura blanca sobre papel blanco se despega apenas
  por su borde de un píxel. Sobre este tono la pantalla flota sola y el borde
  vuelve a ser un remate y no un salvavidas.
*/
.franja--placa {
  background: var(--crema-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tipografía de la página
   ═══════════════════════════════════════════════════════════════════════ */

/*
  **El rubro** es la cabecera de sección, y es una fila de tabla, no un
  antetítulo con una reglita: número a la izquierda, nombre en el medio y la
  acotación a la derecha, todo colgando de una regla gruesa que cruza el ancho
  completo. Es el idioma de un informe paginado.
*/
.rubro {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 18px;
  padding-top: 13px;
  border-top: 1.5px solid var(--tinta);
  margin-bottom: clamp(30px, 4vw, 48px);
}

/* El anuncio dejó de ser un capítulo numerado, y sin la cifra el titular caía
   en la columna de 3rem reservada para ella. */
.rubro--sinnumero {
  grid-template-columns: minmax(0, 1fr) auto;
}

.rubro__n,
.rubro__meta {
  font-family: var(--fuente-dato);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.rubro__n {
  color: var(--terracota-fuerte);
  font-weight: 700;
}

.rubro__meta {
  color: var(--gris);
  text-align: right;
}

.rubro__nombre {
  font-size: 0.82rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

.encabezado {
  max-width: 60ch;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/*
  El titular. **No lleva una palabra acentuada ni un subrayado que entra**: la
  frase se sostiene sola. Y es deliberadamente moderado — en esta página la
  estrella es la herramienta, no el titular.
*/
.titular {
  color: var(--tinta);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.03em;
  line-height: 1.18;
  max-width: 24ch;
  /* Reparte las líneas en vez de dejar una palabra huérfana abajo. Donde no
     está implementado no pasa nada: es una mejora, no una dependencia. */
  text-wrap: balance;
}

.titular--grande {
  font-size: clamp(2.05rem, 4.4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.06;
  max-width: 14ch;
}

.bajada {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 1.03rem;
}

.apunte {
  margin-top: 14px;
  max-width: 72ch;
  font-size: 0.88rem;
  color: var(--gris);
}

strong {
  color: var(--tinta);
  font-weight: var(--peso-semi);
}

.enlace {
  color: var(--terracota-fuerte);
  font-weight: var(--peso-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.enlace:hover {
  color: var(--tinta);
}

/* ══════════════════════════════════════════════════════════════════════════
   Botones
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Rectangulares y sin flecha. La píldora con una flecha que se desliza al pasar
  el cursor es el botón de todas las landings de software, y este sitio no es
  una: el radio es apenas un suavizado, como el de la retícula.
*/
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--terracota-fuerte);
  border-radius: var(--r-chico);
  background: var(--terracota-fuerte); /* blanco encima: 6,34:1 */
  color: #fff;
  font-size: 0.95rem;
  font-weight: var(--peso-semi);
  white-space: nowrap;
  transition: background-color 0.25s var(--curva), border-color 0.25s var(--curva);
}

/* Aclara en vez de oscurecer: la terracota a secas sigue dando 4,57:1. */
.boton:hover {
  background: var(--terracota);
  border-color: var(--terracota);
}

.boton--ancho {
  width: 100%;
  height: 50px;
}

/*
  El segundo botón de la bienvenida. Dibujado, no relleno: dos rectángulos
  llenos de terracota uno al lado del otro no dicen cuál es la puerta principal,
  y acá la principal es calcular.
*/
.boton--linea {
  border-color: var(--borde-fuerte);
  background: transparent;
  color: var(--tinta);
}

.boton--linea:hover {
  border-color: var(--tinta);
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   Cabecera
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Pegada, crema y con una regla que **está siempre**. La versión anterior hacía
  aparecer la regla y cambiaba de logotipo al dejar el hero, con un centinela y
  un observador; acá no hay hero oscuro que dejar, así que la cabecera es una
  cabecera de página impresa y no necesita ni una línea de JavaScript.
*/
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(251 247 240 / 94%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde-fuerte);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

/*
  El logotipo es el enlace a la portada y medía 27 px de alto en un teléfono.
  Se le da el blanco táctil sin mover el dibujo: el relleno crece, el margen
  negativo lo devuelve, y `display: flex` evita el hueco de línea base que deja
  una imagen dentro de un enlace en línea.
*/
.cabecera__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-block: 9px;
  margin-block: -9px;
}

.cabecera__logo img {
  height: 32px;
  width: auto;
}

/* El ocre como cuadrado, no como letra: es exactamente su papel. */

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.nav a {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  color: var(--gris);
  font-size: 0.93rem;
  font-weight: 500;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}

.nav a:hover {
  color: var(--tinta);
  border-bottom-color: var(--ocre);
}

/* Solo existe dentro del menú desplegado del teléfono. */
.nav__cta {
  display: none;
}

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  /* 44 y no 42: es el mínimo de un blanco táctil, y este es el control que
     abre todo lo demás en un teléfono. Dos píxeles no se ven; el fallo sí. */
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-chico);
  background: transparent;
  color: var(--tinta);
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentcolor;
}

.menu-btn span {
  position: relative;
}

.menu-btn span::before,
.menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-btn span::before {
  top: -5px;
}

.menu-btn span::after {
  top: 5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   La bienvenida

   El cliente pidió «una sección de bienvenida» y bajar la calculadora dos
   secciones. Tenía razón: la versión anterior dejaba a alguien parado frente a
   un instrumento sin saber en la casa de quién estaba.

   La pieza es el isotipo **dibujándose grande**. No es un efecto de catálogo
   puesto encima de la marca: es la marca. El isotipo es un techo que termina en
   visto bueno —la diagonal larga es el agua del tejado y a la vez el trazo
   largo de un check—, así que trazarlo a tamaño de portada dice las dos cosas
   que vende una mutuaria, la casa y la aprobación, sin escribirlas. El alero
   primero y el visto después, que es el orden en que pasan.

   Tres reglas que no se negocian:

   1. **Se anima una vez, al cargar.** Ni un revelado por scroll: la portada los
      eliminó a propósito.
   2. **El estado base es el resultado final.** Cada animación declara solo su
      `from`. Si no corre, lo que queda es el dibujo entero.
   3. **Movimiento reducido se resuelve acá abajo, explícito.** El bloque de
      `marca.css` acorta duraciones, pero no toca los retardos ni el
      `stroke-dashoffset`: una animación apagada a la mitad deja un techo sin
      agua. Al final de esta hoja las animaciones de la bienvenida se apagan
      enteras.
   ═══════════════════════════════════════════════════════════════════════ */

.bienvenida {
  padding: clamp(40px, 6vw, 88px) 0 clamp(30px, 4vw, 56px);
}

.bienvenida__reja {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.bienvenida__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(16px, 2vw, 24px);
  font-family: var(--fuente-dato);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* El ocre como barra, no como letra: es exactamente su papel. */
.bienvenida__rotulo::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 4px;
  border-radius: 1px;
  background: var(--ocre);
}

.bienvenida .titular--grande {
  max-width: 16ch;
}

/* El «OK» en terracota, como en el logotipo. `--terracota-fuerte` da 5,94:1 y
   se lee igual si alguien copia el titular a un tamaño chico. */
.marca-texto {
  white-space: nowrap;
}

.marca-texto span {
  color: var(--terracota-fuerte);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* ── la lámina: el isotipo a tamaño de portada ──────────────────────────── */

.lamina {
  justify-self: end;
  width: 100%;
  max-width: clamp(190px, 30vw, 330px);
}

.marca-grande {
  width: 100%;
  height: auto;
}

.marca-grande__placa {
  fill: var(--tinta);
}

.marca-grande__trazo {
  fill: none;
}

/* Los dos trazos van sobre tinta, que es la única superficie donde el ocre
   puede aparecer al lado de la terracota sin perder el contraste (7,98:1). */
.marca-grande__visto {
  stroke: var(--terracota);
}

.marca-grande__techo {
  stroke: var(--ocre);
}

/*
  Las longitudes están medidas sobre la geometría del isotipo, en unidades del
  `viewBox`: el alero mide 21,24 y el visto 48,59. Se redondean hacia arriba
  para que en el cuadro cero el trazo salga entero de la línea.
*/
.marca-grande__placa {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: placa-entra 560ms var(--curva) both;
}

.marca-grande__techo {
  stroke-dasharray: 22;
  stroke-dashoffset: 0;
  animation: trazar-techo 540ms var(--trazo) 340ms both;
}

.marca-grande__visto {
  stroke-dasharray: 49;
  stroke-dashoffset: 0;
  animation: trazar-visto 780ms var(--trazo) 900ms both;
}

@keyframes placa-entra {
  from {
    opacity: 0;
    transform: scale(0.965);
  }
}

@keyframes trazar-techo {
  from {
    stroke-dashoffset: 22;
  }
}

@keyframes trazar-visto {
  from {
    stroke-dashoffset: 49;
  }
}

/*
  El texto entra detrás del dibujo, escalonado y corto. Solo `opacity` y
  `transform`, y el estado base es el de llegada: sin animación, la bienvenida
  se lee igual.
*/
.entra {
  animation: entra 620ms var(--curva) both;
}

.entra--2 {
  animation-delay: 90ms;
}

.entra--3 {
  animation-delay: 180ms;
}

.entra--4 {
  animation-delay: 270ms;
}

.entra--5 {
  animation-delay: 380ms;
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ── el sumario: la página es un documento numerado ─────────────────────── */

.sumario {
  /*
     **La columna respira a los dos lados de la línea.**

     Cada celda lleva su separador como `border-right`, y las celdas no tenían
     relleno a la izquierda: el contenido de la siguiente quedaba pegado contra
     la línea de la anterior. Con tres o cinco columnas seguidas eso se lee como
     un amontonamiento, no como una tabla.

     Se resuelve con `column-gap` y no agregando relleno a la izquierda: el
     relleno izquierdo de la **primera** celda desalinearía el bloque respecto
     del resto de la página, y arreglarlo con `:nth-child` ataría el estilo al
     número de columnas —que cambia al angostarse la ventana—. El hueco vale
     para todas las columnas menos antes de la primera, que es exactamente lo
     que hace falta.

     El hueco es parecido al relleno derecho de la celda, así que la línea queda
     centrada entre las dos y no colgando de una.
  */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(38px, 5vw, 68px);
  border-top: 1.5px solid var(--tinta);
  column-gap: 22px;
}

.sumario a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 20px 15px 0;
  border-right: 1px solid var(--borde);
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: var(--peso-semi);
  transition: color 0.25s var(--curva);
}

.sumario a:last-child {
  border-right: 0;
}

.sumario a:hover {
  color: var(--terracota-fuerte);
}

.sumario span {
  font-family: var(--fuente-dato);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--terracota-fuerte);
}

/* ══════════════════════════════════════════════════════════════════════════
   Qué es una mutuaria

   Cuatro columnas colgando de una regla, como el rubro y las anotaciones. Lo
   que se dice acá sale de las fuentes del repositorio y nada más: no hay una
   afirmación regulatoria en toda la sección, y eso es a propósito.
   ═══════════════════════════════════════════════════════════════════════ */

/* Eran cuatro columnas para cuatro nociones; quedaron dos, y a un cuarto de
   ancho cada una se leía como una nota al pie de sí misma. */
.nociones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1.5px solid var(--tinta);
  column-gap: 28px;
}

.nociones > div {
  padding: 20px 26px 6px 0;
  border-right: 1px solid var(--borde);
}

.nociones > div:last-child {
  border-right: 0;
}

.nociones dt {
  color: var(--tinta);
  font-size: 1rem;
  font-weight: var(--peso-titulo);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.nociones dd {
  margin: 9px 0 0;
  font-size: 0.9rem;
}

.nociones + .apunte {
  margin-top: clamp(22px, 3vw, 34px);
}

/* ══════════════════════════════════════════════════════════════════════════
   Calcular: el instrumento
   ═══════════════════════════════════════════════════════════════════════ */

.instrumento {
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r);
  background: var(--papel);
  overflow: hidden;
}

/* ── las solapas ────────────────────────────────────────────────────────── */

.solapas {
  display: flex;
  background: var(--crema-2);
  border-bottom: 1px solid var(--borde-fuerte);
}

.solapa {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 15px 20px 16px;
  border: 0;
  border-right: 1px solid var(--borde);
  background: transparent;
  color: var(--gris);
  font-size: 0.98rem;
  font-weight: var(--peso-semi);
  text-align: left;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva);
}

.solapa:last-child {
  border-right: 0;
}

.solapa:hover {
  color: var(--tinta);
}

.solapa__n {
  display: block;
  margin-bottom: 4px;
  font-family: var(--fuente-dato);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gris);
}

.solapa[aria-selected="true"] {
  background: var(--papel);
  color: var(--tinta);
}

/* El filo de ocre marca dónde está parada la persona. Relleno, no letra. */
.solapa[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ocre);
}

.solapa[aria-selected="true"] .solapa__n {
  color: var(--terracota-fuerte);
}

/* ── el tablero: mandos a la izquierda, lectura a la derecha ────────────── */

.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}

.mandos {
  padding: clamp(20px, 2.8vw, 34px);
  border-right: 1px solid var(--borde);
}

.mandos__titulo {
  margin-bottom: 22px;
  font-family: var(--fuente-dato);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.mandos__pie {
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--gris);
}

.dial + .dial {
  margin-top: 26px;
}

.dial__rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.dial__valor {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: var(--terracota-fuerte);
}

.dial__eco {
  margin-top: 7px;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  color: var(--gris);
}

.dial__pista {
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--gris);
}

/* La casilla del número grande: sin caja, una regla debajo. El número es el
   contenido, así que se escribe en tipografía de despliegue. */
.casilla {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  padding: 4px 2px 6px;
  border-bottom: 2px solid var(--tinta);
  transition: border-color 0.25s var(--curva);
}

.casilla:focus-within {
  border-bottom-color: var(--terracota-fuerte);
  outline: 3px solid var(--terracota-fuerte);
  outline-offset: 5px;
}

.casilla__unidad {
  flex: 0 0 auto;
  font-family: var(--fuente-dato);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gris);
}

.casilla input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.55rem, 3.4vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tinta);
}

.casilla input:focus {
  outline: none; /* el foco lo dibuja `.casilla:focus-within`, ver arriba */
}

/* ── el deslizador del pie ──────────────────────────────────────────────── */

/*
  La barra se llena de ocre hasta donde está el pulgar. `--llenado` lo escribe
  el JavaScript en cada cambio: es la única propiedad que el dato mueve, y es
  relleno, que es lo único que el ocre puede hacer sobre claro.
*/
/*
  **La caja mide 44 px de alto aunque la pista mida 6.**

  Medido antes de esto: el `input` era de 308 × 6 px en un teléfono. El pulgar
  se dibuja a 22 px y sobresale 8 px por arriba y por abajo de esa caja, así que
  la persona apunta a un círculo de 22 px y agarra una franja de 6 — a un píxel
  de distancia el toque se lo lleva el `div` de al lado. Era el blanco táctil
  más chico del sitio, en el único control que se arrastra.

  El alto lo pone el `input` y el aire de adentro lo pone el margen de la pista,
  así que **el dibujo no se mueve**: la pista sigue de 6 px y el pulgar de 22.
  Por eso el margen de arriba baja de 14 a 0: ese aire ahora lo pone el control.
*/
.deslizador {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.deslizador::-webkit-slider-runnable-track {
  height: 6px;
  margin: 19px 0;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--ocre) 0 var(--llenado, 0%),
    var(--borde) var(--llenado, 0%) 100%
  );
}

.deslizador::-moz-range-track {
  height: 6px;
  margin: 19px 0;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--ocre) 0 var(--llenado, 0%),
    var(--borde) var(--llenado, 0%) 100%
  );
}

.deslizador::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid var(--papel);
  border-radius: 50%;
  background: var(--terracota-fuerte);
  box-shadow: 0 0 0 1px var(--borde-fuerte);
  cursor: pointer;
}

.deslizador::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--papel);
  border-radius: 50%;
  background: var(--terracota-fuerte);
  box-shadow: 0 0 0 1px var(--borde-fuerte);
  cursor: pointer;
}

/* ── la botonera del plazo ──────────────────────────────────────────────── */

.botonera {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.botonera input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.botonera label {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 10px 6px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-chico);
  background: var(--papel);
  cursor: pointer;
  transition: background-color 0.2s var(--curva), border-color 0.2s var(--curva);
}

.botonera label b {
  font-family: var(--fuente-dato);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
}

.botonera label span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}

.botonera label:hover {
  border-color: var(--terracota-fuerte);
}

.botonera input:checked + label {
  background: var(--terracota-suave);
  border-color: var(--terracota-fuerte);
}

.botonera input:checked + label b {
  color: var(--terracota-fuerte);
}

.botonera input:focus-visible + label {
  outline: 3px solid var(--terracota-fuerte);
  outline-offset: 3px;
}

/* ── la lectura ─────────────────────────────────────────────────────────── */

.lectura {
  padding: clamp(20px, 2.8vw, 34px);
  background: var(--crema-2);
}

.lectura__rotulo {
  font-family: var(--fuente-dato);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}

.cifrota {
  margin-top: 8px;
}

/*
  El número, en tipografía de despliegue. Tabular: si no lo fuera, cada dígito
  que cambia mueve a los de al lado y el número «hierve» mientras se arrastra
  el deslizador.
*/
.cifrota__num {
  display: inline-block;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 5.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--tinta);
  transition: color 0.4s var(--curva);
}

/* El movimiento va atado al dato: mientras la cifra se asienta se tiñe, y
   vuelve al negro cuando llegó. Es todo lo que se mueve en esta página. */
.cifrota__num.cambiando {
  color: var(--terracota-fuerte);
}

.cifrota__eco {
  margin-top: 8px;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
  color: var(--terracota-fuerte);
}

.desglose {
  margin-top: 24px;
  border-top: 1.5px solid var(--tinta);
}

.desglose > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
}

.desglose dt {
  font-size: 0.9rem;
  color: var(--gris);
}

.desglose dd {
  margin: 0;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  text-align: right;
  color: var(--tinta);
}

.desglose__fuerte dt {
  color: var(--tinta);
  font-weight: var(--peso-semi);
}

.desglose__fuerte dd {
  font-weight: 700;
}

/* El supuesto que hace la mitad de la respuesta, dicho en pantalla. El ocre
   como barra, nunca como letra. */
.requisito {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--ocre);
  background: var(--ocre-suave);
}

.requisito__rotulo {
  font-size: 0.82rem;
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.requisito__cifra {
  margin-top: 4px;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tinta);
}

.requisito__nota {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--gris);
}

/*
  Los gastos operacionales van como **rango declarado**, no como cifra exacta.
  Inventar un número redondo acá es prometer una precisión que no existe.
*/
.lectura__gastos {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--borde-fuerte);
  font-size: 0.82rem;
  color: var(--gris);
}

.lectura__gastos strong {
  font-variant-numeric: tabular-nums;
}

/* ── los supuestos ──────────────────────────────────────────────────────── */

.supuestos {
  margin-top: clamp(28px, 3.5vw, 46px);
}

.supuestos__tabla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1.5px solid var(--tinta);
  border-bottom: 1px solid var(--borde);
  column-gap: 20px;
}

.supuestos__tabla > div {
  padding: 12px 18px 14px 0;
  border-right: 1px solid var(--borde);
}

.supuestos__tabla > div:last-child {
  border-right: 0;
}

.supuestos__tabla dt {
  font-size: 0.8rem;
  color: var(--gris);
}

.supuestos__tabla dd {
  margin: 5px 0 0;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.supuestos__texto {
  margin-top: 14px;
  max-width: 82ch;
  font-size: 0.88rem;
}

.paso-siguiente {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 0.95rem;
}

.paso-siguiente span {
  color: var(--gris);
}

/* ══════════════════════════════════════════════════════════════════════════
   La planilla de cifras
   ═══════════════════════════════════════════════════════════════════════ */

/*
  La página se tiene que poder leer pasando solo por los números. Esto es una
  fila de una planilla: rótulo chico arriba, cifra grande abajo, unidad al lado
  en chico, y una regla vertical entre columnas.
*/
.planilla {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1.5px solid var(--tinta);
  border-bottom: 1px solid var(--borde);
  column-gap: 20px;
}

.planilla > div {
  padding: 16px 18px 20px 0;
  border-right: 1px solid var(--borde);
}

.planilla > div:last-child {
  border-right: 0;
}

.planilla dt {
  font-family: var(--fuente-dato);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.planilla dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 0;
}

.planilla__num {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--tinta);
}

.planilla__unidad {
  font-family: var(--fuente-dato);
  font-size: 0.8rem;
  color: var(--gris);
}

/* ══════════════════════════════════════════════════════════════════════════
   Las fichas: texto arriba, captura a sangre abajo
   ═══════════════════════════════════════════════════════════════════════ */

/*
  **Nada de ventanas de navegador falsas.** La captura no se mete en un marco
  con tres puntitos: se recorta y se la deja salir por el filo de la ventana,
  como una foto en una revista. Las fichas alternan de lado, y esa alternancia
  —más el texto que cuelga de un lado o del otro— es toda la asimetría que la
  composición necesita.
*/
.ficha {
  margin-top: clamp(44px, 6vw, 84px);
  row-gap: clamp(18px, 2.5vw, 30px);
}

.ficha__texto {
  max-width: 48ch;
}

.ficha--espejo .ficha__texto {
  margin-left: auto;
}

.ficha__n {
  margin-bottom: 10px;
  font-family: var(--fuente-dato);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracota-fuerte);
}

.ficha__texto h3 {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
}

.ficha__texto > p {
  margin-top: 12px;
  font-size: 0.98rem;
}

.puntos {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--borde);
}

.puntos li {
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.92rem;
}

.ficha__vista img {
  width: 100%;
  /* `height: auto` no es decorativo: el `height="1800"` del HTML llega como
     regla de presentación y le gana a `aspect-ratio`, con lo que el recorte no
     ocurre y la captura se estira a mil ochocientos píxeles de alto. */
  height: auto;
  aspect-ratio: 16 / 6.6;
  object-fit: cover;
  object-position: left top;
  border-top: 1px solid var(--borde-fuerte);
  border-bottom: 1px solid var(--borde-fuerte);
}

.sangra-der img {
  border-left: 1px solid var(--borde-fuerte);
}

.sangra-izq img {
  border-right: 1px solid var(--borde-fuerte);
  object-position: right top;
}

.anotaciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(44px, 6vw, 80px);
  border-top: 1.5px solid var(--tinta);
  column-gap: 26px;
}

.anotaciones > div {
  padding: 18px 24px 4px 0;
  border-right: 1px solid var(--borde);
}

.anotaciones > div:last-child {
  border-right: 0;
}

.anotaciones h3 {
  font-size: 1rem;
}

.anotaciones p {
  margin-top: 7px;
  font-size: 0.9rem;
  max-width: 36ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   El teléfono
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Esta sección se conserva a pedido del cliente y con razón: el marco es CSS,
  no la foto de un teléfono, así que se ve nítido en cualquier pantalla y no le
  pone la marca de otro fabricante a la demostración. Y las pestañas son
  `<button>` de verdad, con flechas y `aria-selected`.

  Lo que cambió es el vestido: fondo crema en vez de fondo oscuro, el aparato
  en tinta cálida y las pestañas con filo de ocre en vez de píldoras.
*/
.bolsillo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.telefono {
  position: relative;
  flex: 0 0 auto;
  width: 296px;
  padding: 11px;
  border-radius: 44px;
  background: linear-gradient(158deg, #4a3b31 0%, #2c211a 46%, #1a130f 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%);
}

.telefono__pantalla {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #1a130f;
  aspect-ratio: 390 / 844;
}

.telefono__vista {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--curva), visibility 0s linear 0.32s;
}

.telefono__vista.activa {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.telefono__vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/*
  Ranura de altavoz en el bisel, no una isla sobre la pantalla: la captura de
  la aplicación ya trae su propia barra con el título, y una muesca encima la
  tapaba. El marco tiene que enmarcar, no editar la foto.
*/
.telefono__isla {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 3;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 17%);
  transform: translateX(-50%);
}

.telefono__boton {
  position: absolute;
  left: -3px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(#5c4b3e, #2a201a);
}

.telefono__boton--a {
  top: 116px;
  height: 30px;
}

.telefono__boton--b {
  top: 162px;
  height: 52px;
}

.telefono__boton--c {
  left: auto;
  right: -3px;
  top: 148px;
  height: 74px;
}

/* Las pestañas del teléfono: la misma pieza que las de la calculadora, con la
   regla al pie en vez de la caja. */
.solapas--filo {
  margin-top: 26px;
  background: transparent;
  border-bottom: 1px solid var(--borde-fuerte);
}

.solapas--filo .solapa {
  flex: 0 1 auto;
  padding: 11px 0 12px;
  margin-right: 26px;
  border-right: 0;
  font-size: 0.93rem;
}

.solapas--filo .solapa:last-child {
  margin-right: 0;
}

.solapas--filo .solapa[aria-selected="true"] {
  background: transparent;
}

.solapas--filo .solapa[aria-selected="true"]::after {
  inset: auto 0 -1px 0;
}

.pie-solapa {
  margin-top: 16px;
  min-height: 4.6em;
  max-width: 52ch;
  font-size: 0.92rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   El itinerario
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Seis renglones de una tabla, no una línea de tiempo con una barra que se
  llena al hacer scroll. El estado de la derecha es el nombre que la cuenta le
  pone a cada etapa: es la columna que ata este relato con las capturas.
*/
.itinerario {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1.5px solid var(--tinta);
}

.renglon {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 12rem;
  gap: 0 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--borde);
}

.renglon__n {
  font-family: var(--fuente-dato);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--terracota-fuerte);
}

.renglon__cuerpo h3 {
  font-size: 1.08rem;
}

.renglon__cuerpo p {
  margin-top: 7px;
  max-width: 60ch;
  font-size: 0.94rem;
}

.renglon__estado {
  justify-self: end;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-chico);
  background: var(--terracota-suave);
  color: var(--terracota-fuerte); /* 5,1:1 sobre terracota suave */
  font-family: var(--fuente-dato);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Salvia: lo aprobado, lo cumplido. Acá, el crédito ya vigente. */
.renglon__estado--ok {
  background: var(--salvia-suave);
  color: var(--salvia); /* 5,15:1 sobre salvia suave */
}

.renglon__estado--vacio {
  background: transparent;
  border-color: var(--borde-fuerte);
  border-style: dashed;
  color: var(--gris);
}

.salvedad {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 16px 20px;
  border-left: 3px solid var(--terracota);
  background: var(--crema-2);
  max-width: 84ch;
  font-size: 0.92rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   El anuncio
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Sin barra de tres puntitos y sin marco de navegador: el anuncio no corre
  dentro de un Chrome dibujado, corre en la página. Va a la derecha y el pie de
  foto cuelga a la izquierda, al ras de abajo — que es como se pone una imagen
  en una revista y no como se pone un video en una landing.
*/
.cinta {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: end;
}

.cinta__pie {
  order: -1;
  padding-bottom: 4px;
  font-size: 0.92rem;
  color: var(--gris);
}

.cinta__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--borde-fuerte);
  background: var(--tinta);
}

.cinta__reserva {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  height: 100%;
  padding: 28px;
  text-align: center;
}

.cinta__reserva img {
  width: 56px;
  height: 56px;
}

.cinta__reserva p {
  max-width: 34ch;
  font-size: 0.92rem;
  color: var(--claro-tenue);
}

.cinta video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinta--roto video {
  display: none;
}

.cinta__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: none;
  height: 44px;
  padding: 0 22px;
  /* El póster ahora es de tema claro: sin borde, un botón crema encima se
     pierde. */
  border: 1px solid var(--tinta);
  border-radius: var(--r-chico);
  background: var(--crema);
  color: var(--tinta);
  font-weight: var(--peso-semi);
  transform: translate(-50%, -50%);
}

.cinta--pausado .cinta__play {
  display: inline-flex;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contacto
   ═══════════════════════════════════════════════════════════════════════ */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.fichero {
  margin-top: 28px;
  border-top: 1.5px solid var(--tinta);
}

.fichero > div {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--borde);
}

.fichero dt {
  font-family: var(--fuente-dato);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris);
}

.fichero dd {
  margin: 6px 0 0;
  font-size: 1.02rem;
  color: var(--tinta);
}

.fichero__nota {
  margin-top: 5px !important;
  font-size: 0.84rem;
  color: var(--gris) !important;
  max-width: 46ch;
}

.formulario {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r);
  background: var(--crema);
}

.campo {
  display: grid;
  gap: 7px;
}

/*
  El campo de «otro» se esconde con el atributo `hidden`, y `hidden` no puede
  contra un `display` declarado: sin esta regla el campo quedaría a la vista
  para siempre. Va acompañada porque el atributo es la única fuente de verdad
  —el guion no toca clases— y así el estado se lee en el propio HTML.
*/
.campo[hidden] {
  display: none;
}

.campo--doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.campo label {
  font-size: 0.86rem;
  font-weight: var(--peso-semi);
  color: var(--tinta);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-chico);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 16px; /* menos de 16 y iOS hace zoom al enfocar */
  transition: border-color 0.2s var(--curva);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--gris);
  opacity: 0.75;
}

.campo textarea {
  min-height: 110px;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--terracota-fuerte);
}

.campo__error {
  display: none;
  font-size: 0.82rem;
  font-weight: var(--peso-semi);
  color: var(--error);
}

.campo.invalido input,
.campo.invalido select,
.campo.invalido textarea {
  border-color: var(--error);
  background: var(--error-suave);
}

.campo.invalido .campo__error {
  display: block;
}

/*
  El recuento de lo que falta, con `role="alert"`. Es el mismo bloque que el
  simulador ya tenía y que esta página no había copiado: sin él, el foco salta
  al primer campo malo y quien navega escuchando oye «inválido» sin saber ni
  por qué ni cuántos quedan.
*/
.form-aviso {
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--error);
  border-radius: var(--r-chico);
  background: var(--error-suave);
  color: var(--error);
  font-size: 0.92rem;
  font-weight: var(--peso-semi);
}

.form-ok {
  display: none;
  padding: 14px 16px;
  border-left: 3px solid var(--salvia);
  background: var(--salvia-suave);
  font-size: 0.92rem;
  color: var(--tinta);
}

.form-ok.visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pie
   ═══════════════════════════════════════════════════════════════════════ */

.pie {
  padding: clamp(48px, 6vw, 76px) 0 28px;
  background: var(--tinta);
  color: var(--claro-tenue);
}

.pie__alto {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(26px, 4vw, 56px);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--borde-claro);
}

.pie__logo {
  height: 34px;
  width: auto;
  margin-bottom: 16px;
}

.pie p {
  max-width: 46ch;
  font-size: 0.9rem;
}

.pie h2 {
  margin-bottom: 14px;
  color: var(--claro);
  font-family: var(--fuente-dato);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pie ul {
  list-style: none;
  padding: 0;
  display: grid;
  /* El aire entre renglones lo pone ahora el relleno de cada enlace, que es
     lo que lo vuelve tocable. Sumar los dos dejaría el pie desarmado. */
  gap: 0;
}

/*
  Diez enlaces de 19 px de alto en un teléfono. El relleno los lleva a 43-44 y
  el margen negativo devuelve la retícula a donde estaba: **crece el blanco
  táctil, no el dibujo.**
*/
.pie ul a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -7px;
}

.pie ul a {
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}

.pie ul a:hover {
  color: var(--claro);
  border-bottom-color: var(--ocre);
}

.pie strong {
  color: var(--claro);
}

.pie__bajo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  font-family: var(--fuente-dato);
  font-size: 0.76rem;
  color: var(--claro-tenue);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive — de 360 px para arriba
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  /* La barra tiene un enlace más desde que la calculadora bajó dos secciones.
     Antes de que el menú se apile, se aprieta. */
  .nav {
    gap: 18px;
  }

  .nav a {
    font-size: 0.88rem;
  }
}

@media (max-width: 1080px) {
  .bienvenida__reja,
  .tablero,
  .bolsillo,
  .contacto,
  .cinta {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
    **En una columna, el resultado va arriba de los mandos.**

    Medido antes de esto: alguien toca «Calcula tu dividendo» —el único llamado
    a la acción sobre el pliegue de un teléfono— y la cifra quedaba a 930 px del
    borde de una ventana de 844. Tocaba el botón que promete un número y no veía
    el número: veía el rótulo, la bajada, dos solapas y tres campos.

    En dos columnas el problema no existe —controles y cifra se ven juntos—, así
    que esto vive solo acá. Se hace con `order` y no moviendo el HTML: el orden
    de lectura y el de tabulación siguen siendo «primero los mandos, después lo
    que producen», que es el que corresponde a un lector de pantalla.
  */
  .tablero .lectura {
    order: -1;
  }

  .mandos {
    border-right: 0;
    border-top: 1px solid var(--borde);
  }

  /* La lámina pasa a ser un remate arriba del titular, no una columna. Se
     achica: a esta altura compite con el texto en vez de acompañarlo. */
  .bienvenida__reja {
    gap: clamp(22px, 3vw, 30px);
    align-items: start;
  }

  .lamina {
    order: -1;
    justify-self: start;
    max-width: 156px;
  }

  .nociones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nociones > div:nth-child(2n) {
    border-right: 0;
  }

  .nociones > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--borde);
  }

  .nociones > div {
    padding-bottom: 20px;
  }

  .mandos {
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }

  .bolsillo {
    justify-items: center;
  }

  .bolsillo__texto {
    width: 100%;
  }

  .cinta__pie {
    order: 1;
    padding-bottom: 0;
  }

  .planilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .planilla > div:nth-child(3n) {
    border-right: 0;
  }

  .anotaciones {
    grid-template-columns: minmax(0, 1fr);
  }

  .anotaciones > div {
    padding: 16px 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }

  .anotaciones > div:last-child {
    border-bottom: 0;
  }

  .pie__alto {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .nav,
  .cabecera > .envoltorio > .boton {
    display: none;
  }

  .menu-btn {
    display: flex;
  }

  .cabecera.abierta .nav {
    position: absolute;
    top: 64px;
    left: var(--margen);
    right: var(--margen);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r);
    background: var(--papel);
  }

  .cabecera.abierta .nav a {
    padding: 12px;
    border-bottom: 1px solid var(--borde);
    color: var(--tinta);
  }

  .cabecera.abierta .nav a:hover {
    background: var(--crema-2);
  }

  /* La clase va junto al selector de elemento: `.nav a` le gana en
     especificidad a `.nav__cta` a secas. */
  .cabecera.abierta .nav a.nav__cta {
    display: block;
    margin-top: 8px;
    padding: 13px 12px;
    border: 0;
    border-radius: var(--r-chico);
    background: var(--terracota-fuerte);
    color: #fff;
    font-weight: var(--peso-semi);
    text-align: center;
  }

  .cabecera.abierta .nav a.nav__cta:hover {
    background: var(--terracota);
  }

  /* Tres columnas de sumario a este ancho parten «Qué es una mutuaria» en dos
     líneas y la fila deja de leerse como una fila. Se apila. */
  .sumario {
    grid-template-columns: minmax(0, 1fr);
  }

  .sumario a {
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }

  .sumario a:last-child {
    border-bottom: 0;
  }

  .renglon {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .renglon__estado {
    grid-column: 2;
    justify-self: start;
    margin-top: 10px;
  }

  .supuestos__tabla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supuestos__tabla > div:nth-child(2n) {
    border-right: 0;
  }

  .supuestos__tabla > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--borde);
  }

  /* A esta altura la captura recortada en panorámico no deja leer nada: se
     abre a un recorte más alto. */
  .ficha__vista img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16.5px;
  }

  .cabecera__barra {
    gap: 12px;
    height: 62px;
  }

  .cabecera__logo img {
    height: 27px;
  }

  .cabecera.abierta .nav {
    top: 58px;
  }

  .rubro {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .rubro__meta {
    display: none;
  }

  .planilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planilla > div {
    border-right: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
  }

  .planilla > div:nth-child(2n) {
    border-right: 0;
  }

  .planilla > div:last-child {
    border-bottom: 0;
  }

  /* Un recorte más cuadrado: `cover` escala por el lado que falta, así que una
     caja más alta agranda la captura en vez de encogerla. A este ancho es la
     diferencia entre adivinar la pantalla y reconocerla. */
  .ficha__vista img {
    aspect-ratio: 1 / 1;
  }

  .solapa {
    padding: 12px 14px 14px;
    font-size: 0.9rem;
  }

  .campo--doble {
    grid-template-columns: 1fr;
  }

  .nociones {
    grid-template-columns: minmax(0, 1fr);
  }

  .nociones > div {
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }

  .nociones > div:last-child {
    border-bottom: 0;
  }

  /* En un teléfono los dos botones ocupan la línea entera cada uno: dos
     rectángulos a medio ancho quedan con el texto partido. */
  .acciones .boton {
    flex: 1 1 100%;
  }

  .telefono {
    width: min(296px, 82vw);
  }

  .pie__alto {
    grid-template-columns: 1fr;
  }

  .pie__bajo {
    font-size: 0.72rem;
  }
}

/*
  Quien pidió menos movimiento lo recibe.

  `marca.css` acorta las duraciones a 0,01 ms y apaga las transiciones, y con
  eso alcanza para casi todo. Para la bienvenida **no alcanza**, y hay que
  decirlo explícito:

  - Una duración de 0,01 ms **no toca el `animation-delay`**. El visto del
    isotipo arranca a los 900 ms: con la duración apagada seguiría invisible
    ese casi segundo y después aparecería de golpe. Un techo sin agua durante
    un segundo es un dibujo roto, no una animación apagada.
  - Lo mismo con el texto escalonado: cinco retardos que se cumplen igual.

  Así que acá se apagan enteras. Como el estado base de cada elemento ya es el
  de llegada —`stroke-dashoffset: 0`, opacidad 1, sin desplazamiento—, apagar
  la animación deja exactamente el resultado final: el isotipo completo y el
  texto en su sitio, desde el primer cuadro.

  El desplazamiento suave se apaga acá porque no es ni transición ni animación.
  El tejido de las cifras lo apaga el propio JavaScript.
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .entra,
  .marca-grande__placa,
  .marca-grande__trazo {
    animation: none !important;
  }

  .marca-grande__trazo {
    stroke-dashoffset: 0;
  }

  .marca-grande__placa {
    opacity: 1;
    transform: none;
  }

  .entra {
    opacity: 1;
    transform: none;
  }
}