/* ============================================================
   Estudio McKenna Robinson & Asociados
   Todo valor de color, tamaño y espacio viene de brand.tokens.json.
   Mapeo 1:1 — si acá aparece un valor que no está en los tokens, es un bug.
   ============================================================ */

/* ---------- 1 · Tokens ---------- */
:root {
  /* primitivo.color */
  --marca-100: #E4EDE7;
  --marca-300: #7FBF9A;
  --marca-500: #1F5C3D;
  --marca-700: #10301F;
  --neutral-0:   #FCFCFA;
  --neutral-25:  #F6F5F2;
  --neutral-50:  #F4F3EF;
  --neutral-100: #E2E4DE;
  --neutral-200: #D9DCD6;
  --neutral-350: #A9AFA6;
  --neutral-400: #8E948B;
  --neutral-450: #767B74;
  --neutral-600: #5A5F5A;
  --neutral-900: #111310;

  /* semantico.superficie */
  --sup-base: var(--neutral-0);
  --sup-elevada: var(--neutral-50);
  --sup-inversa: var(--neutral-900);
  --sup-acento: var(--marca-500);
  --sup-acento-lavada: var(--marca-100);

  /* semantico.texto */
  --tx-principal: var(--neutral-900);
  --tx-secundario: var(--neutral-600);
  --tx-sobre-inversa: var(--neutral-25);
  --tx-secundario-sobre-inversa: var(--neutral-350);
  --tx-acento: var(--marca-500);
  --tx-acento-sobre-inversa: var(--marca-300);

  /* semantico.borde */
  --bd-sutil: var(--neutral-100);
  --bd-fuerte: var(--neutral-900);
  --bd-acento: var(--marca-500);
  --bd-interfaz: var(--neutral-450);

  /* primitivo.espacio */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 16px;  --sp-4: 28px;
  --sp-5: 48px; --sp-6: 76px;  --sp-7: 120px; --sp-8: 184px;

  /* Ritmo vertical — cuatro alturas, no dos ni tres (registro de convergencia) */
  --pad-xl: clamp(var(--sp-6), 11vw, var(--sp-8));
  --pad-l:  clamp(var(--sp-5), 8vw,  var(--sp-7));
  --pad-m:  clamp(var(--sp-5), 6vw,  var(--sp-6));
  --pad-s:  clamp(var(--sp-4), 4vw,  var(--sp-5));

  /* tipografia.familia */
  --f-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", Roboto, sans-serif;

  /* tipografia.rol */
  --r-display-size: clamp(2.75rem, 6.2vw, 5.5rem);
  --r-headline-size: clamp(1.75rem, 3.2vw, 2.625rem);
  --r-subhead-size: clamp(1.125rem, 1.6vw, 1.375rem);
  --r-body-size: 1.0625rem;
  --r-caption-size: 0.875rem;
  --r-firma-size: 0.9375rem;

  /* movimiento */
  --mov-rapido: 140ms cubic-bezier(0.32, 0.72, 0, 1);
  --mov-lento: 620ms cubic-bezier(0.16, 1, 0.3, 1);

  /* forma */
  --radio-chico: 6px;
  --radio-grande: 18px;
  --borde-fino: 1px;      /* reglas, separadores, bordes de control */
  --borde-marca: 2px;     /* la barra de acento de la nota al margen y del aval */
  --foco-offset: 3px;

  /* dimensiones de componente */
  --firma-retrato: 40px;  /* el recorte cuadrado de la banda de firma */
  --subrayado-offset: 3px;
  --barra-desenfoque: 10px;
  --entra-desplazamiento: 12px;
  --grano-deriva-x: -28px;
  --grano-deriva-y: 22px;
  --grano-sangrado: -60px;  /* mayor que la deriva, para que la textura nunca deje ver su borde */
  --control-alto: var(--sp-5);      /* 48px — alto mínimo de input */
  --textarea-alto: var(--sp-7);     /* 120px */
  --paso-columna: var(--sp-5);      /* ancho de la columna del número de paso */
  --grano-tile: 220px;

  --grano-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");

  /* layout */
  --contenedor: 1200px;
  --gutter: var(--sp-4);
}

/* ---------- 2 · 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(--sup-base);
  color: var(--tx-principal);
  font-family: var(--f-texto);
  font-size: var(--r-body-size);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El ambiente: una capa de grano de papel fija detrás de todo.
   No es decoración suelta — es lo que hace que el scroll se sienta
   como recorrer un documento y no como pasar por secciones apiladas. */
.grano {
  position: fixed;
  inset: var(--grano-sangrado);
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: var(--grano-url);
  background-size: var(--grano-tile) var(--grano-tile);
  animation: deriva 90s linear infinite;
}
@keyframes deriva {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(var(--grano-deriva-x), var(--grano-deriva-y), 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grano { animation: none; } }

/* Toda la página vive por encima del grano */
.sitio { position: relative; z-index: 1; }

/* Ningún espacio del sitio sale del navegador. Todo margen es una decisión
   del sistema: los bloques se separan con gap o con --sp-*, nunca con el
   margen por defecto de <p> o <ul>, que no está en los tokens. */
p, ul, ol, h1, h2, h3, h4, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

::selection { background: var(--sup-acento-lavada); color: var(--marca-700); }

a { color: var(--tx-acento); text-decoration-thickness: var(--borde-fino); text-underline-offset: var(--subrayado-offset); }

:focus-visible {
  outline: var(--borde-marca) solid var(--sup-acento);
  outline-offset: var(--foco-offset);
  border-radius: var(--radio-chico);
}
.inversa :focus-visible { outline-color: var(--tx-acento-sobre-inversa); }

.salto-a-contenido {
  position: absolute; left: var(--sp-3); top: var(--sp-3);
  transform: translateY(-200%);
  background: var(--sup-acento); color: var(--neutral-0);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radio-chico);
  z-index: 100; text-decoration: none; font-weight: 600;
  transition: transform var(--mov-rapido);
}
.salto-a-contenido:focus { transform: translateY(0); }

/* ---------- 3 · Grilla ----------
   Doce columnas, idénticas en las seis secciones. Las formas de
   sección cambian; el pautado de abajo no. Es lo que impide que
   cinco formas se lean como cinco sitios distintos. */
.rejilla {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--sp-4);
}
@media (min-width: 768px)  { .rejilla { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1024px) { .rejilla { grid-template-columns: repeat(12, 1fr); } }

/* ---------- 4 · Roles tipográficos ----------
   Escala cerrada. Seis roles. Cualquier tamaño intermedio se
   agrega primero a brand.tokens.json. */
.r-display {
  font-family: var(--f-display);
  font-size: var(--r-display-size);
  line-height: 0.98; font-weight: 600; letter-spacing: -0.035em;
  margin: 0; text-wrap: balance;
}
.r-headline {
  font-family: var(--f-display);
  font-size: var(--r-headline-size);
  line-height: 1.1; font-weight: 600; letter-spacing: -0.022em;
  margin: 0; text-wrap: balance;
}
.r-subhead {
  font-size: var(--r-subhead-size);
  line-height: 1.45; font-weight: 400; letter-spacing: -0.008em;
  margin: 0;
}
.r-body { font-size: var(--r-body-size); line-height: 1.65; margin: 0; }
.r-caption {
  font-size: var(--r-caption-size); line-height: 1.5;
  letter-spacing: 0.005em; color: var(--tx-secundario); margin: 0;
}
/* El sexto rol lo nombra el proyecto: firma.
   Es la atribución de una afirmación a una persona. Deliberadamente
   MÁS grande que caption — una firma no es letra chica. */
.r-firma {
  font-size: var(--r-firma-size); line-height: 1.3;
  font-weight: 600; letter-spacing: -0.005em; margin: 0;
}

/* Medida de lectura sobre el elemento de texto, nunca sobre el contenedor */
.medida { max-width: 62ch; }
.medida-corta { max-width: 46ch; }

/* Las cifras reemplazan a la familia mono, que está quemada */
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- 5 · Controles ---------- */
.boton {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-texto); font-size: var(--r-body-size);
  font-weight: 600; line-height: 1.2;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radio-chico);
  border: var(--borde-fino) solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--mov-rapido), color var(--mov-rapido), border-color var(--mov-rapido);
}
.boton-primario { background: var(--sup-acento); color: var(--neutral-0); }
.boton-primario:hover { background: var(--marca-700); }
.boton-primario:active { background: var(--marca-700); }
.inversa .boton-primario { background: var(--tx-acento-sobre-inversa); color: var(--neutral-900); }
.inversa .boton-primario:hover { background: var(--neutral-25); }

.boton-lineado {
  background: transparent; color: var(--tx-principal);
  border-color: var(--bd-interfaz);
}
.boton-lineado:hover { border-color: var(--bd-fuerte); background: var(--sup-elevada); }

/* Targets táctiles: 44px mínimo, agregados sin mover el layout */
@media (pointer: coarse) {
  .boton, .nav-enlace, .nav-urgencia, .marca, .caso-firma-enlace, .pie-lista a { position: relative; }
  .boton::after, .nav-enlace::after, .nav-urgencia::after, .marca::after, .caso-firma-enlace::after, .pie-lista a::after {
    content: ""; position: absolute; inset: 50% 0 auto 0;
    height: 44px; transform: translateY(-50%); min-width: 44px;
  }
}

/* ---------- 6 · Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--sup-base) 88%, transparent);
  backdrop-filter: blur(var(--barra-desenfoque));
  border-bottom: var(--borde-fino) solid var(--bd-sutil);
}
.barra-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  grid-column: 1 / -1;
}
/* El logo es firma tipográfica, no elemento de estilo (brand.rules.md) */
.marca { text-decoration: none; color: var(--tx-principal); line-height: 1.1; }
.marca-nombre {
  display: block; font-family: var(--f-display);
  font-weight: 600; letter-spacing: -0.025em; font-size: var(--r-body-size);
}
.marca-sufijo {
  display: block; font-size: var(--r-caption-size);
  color: var(--tx-secundario); letter-spacing: 0.005em;
}
.barra-nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav-enlace {
  font-size: var(--r-caption-size); color: var(--tx-secundario);
  text-decoration: none; white-space: nowrap;
  transition: color var(--mov-rapido);
}
.nav-enlace:hover { color: var(--tx-principal); }
.nav-urgencia { color: var(--tx-acento); text-decoration: underline; text-underline-offset: var(--subrayado-offset); }
/* El CTA compacto de la barra solo existe en mobile: ahí se pierden los
   anclas de sección, y una página de 8.900px sin acción persistente obliga
   a scrollear hasta el final para convertir. */
.barra-cta { display: none; }
@media (max-width: 767px) {
  .nav-oculto-mobile { display: none; }
  .barra-fila { padding-block: var(--sp-2); }
  .barra-cta {
    display: inline-flex;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--r-caption-size);
    min-height: 44px; align-items: center;
  }
}

/* La entrada de urgencia vive junto al CTA principal, que es donde se
   toma la decisión — no arriba, donde compite con el enunciado. */
.pliego-urgencia {
  grid-column: 1 / -1; margin-top: var(--sp-3);
  font-size: var(--r-caption-size);
}

/* ---------- 7 · Secciones ---------- */
.seccion { position: relative; }
.seccion-xl { padding-block: var(--pad-xl); }
.seccion-l  { padding-block: var(--pad-l); }
.seccion-m  { padding-block: var(--pad-m); }
.seccion-s  { padding-block: var(--pad-s); }
.elevada { background: var(--sup-elevada); }
.inversa { background: var(--sup-inversa); color: var(--tx-sobre-inversa); }
.inversa .r-caption { color: var(--tx-secundario-sobre-inversa); }

/* ============================================================
   FORMA 1 · PLIEGO  — abre con el enunciado, sin nada encima
   Hero editorial asimétrico: 7 de 12 columnas, alineado al grid,
   nunca centrado. Sin imagen. El aire hace toda la jerarquía.
   ============================================================ */
.pliego-enunciado { grid-column: 1 / -1; }
@media (min-width: 1024px) { .pliego-enunciado { grid-column: 1 / 9; } }

.pliego-bajada { grid-column: 1 / -1; margin-top: var(--sp-4); color: var(--tx-secundario); }
@media (min-width: 1024px) { .pliego-bajada { grid-column: 1 / 7; } }

.pliego-acciones {
  grid-column: 1 / -1; margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
}
.pliego-promesa { color: var(--tx-secundario); }

.pliego-datos {
  grid-column: 1 / -1; margin-top: var(--pad-m);
  border-top: var(--borde-fino) solid var(--bd-sutil);
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 640px) { .pliego-datos { grid-template-columns: repeat(3, 1fr); } }
.dato {
  padding-block: var(--sp-4);
  border-bottom: var(--borde-fino) solid var(--bd-sutil);
  /* Las filas de texto se alinean por baseline, no por cajas centradas */
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
}
@media (min-width: 640px) {
  .dato { border-bottom: none; padding-right: var(--sp-4); }
  .dato + .dato { border-left: var(--borde-fino) solid var(--bd-sutil); padding-left: var(--sp-4); }
}
.dato-cifra {
  font-family: var(--f-display); font-size: var(--r-headline-size);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.1;
}

/* ============================================================
   FORMA 2 · PROTOCOLO — abre con un número de paso, no con un titular
   Pasos numerados a la izquierda; a la derecha una nota al margen
   que declara lo que NO se hace. La nota pesa igual que los pasos.
   ============================================================ */
/* La forma `protocolo` abre con un NÚMERO DE PASO, no con un titular.
   Por eso los pasos ocupan la columna izquierda y el titular de sección se
   corre a la derecha: lo primero que se lee arriba a la izquierda es "01".
   En el DOM el h2 va primero, para que el orden de lectura asistida sea el correcto. */
.protocolo-lateral { grid-column: 1 / -1; margin-bottom: var(--sp-5); }
.protocolo-pasos   { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .protocolo-lateral { grid-column: 8 / -1; grid-row: 1; margin-bottom: 0; align-self: start; }
  .protocolo-pasos   { grid-column: 1 / 7;  grid-row: 1; }
}

.paso { display: grid; grid-template-columns: var(--paso-columna) 1fr; gap: var(--sp-3); align-items: baseline; }
.paso + .paso { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--borde-fino) solid var(--bd-sutil); }
.paso-numero {
  font-family: var(--f-display); font-size: var(--r-subhead-size);
  font-weight: 600; color: var(--tx-acento); letter-spacing: -0.008em;
}
.paso-titulo { margin-bottom: var(--sp-2); }
.paso-texto { color: var(--tx-secundario); }

.protocolo-nota {
  margin-top: var(--sp-5);
  background: var(--sup-elevada);
  border-left: var(--borde-marca) solid var(--sup-acento);
  border-radius: 0 var(--radio-grande) var(--radio-grande) 0;
  padding: var(--sp-4);
}

.protocolo-nota-titulo { margin-bottom: var(--sp-3); }
.protocolo-lista { margin: 0; padding: 0; list-style: none; }
.protocolo-lista li {
  padding-left: var(--sp-4); position: relative;
  color: var(--tx-secundario); font-size: var(--r-caption-size); line-height: 1.5;
}
.protocolo-lista li + li { margin-top: var(--sp-2); }
.protocolo-lista li::before {
  content: "—"; position: absolute; left: 0; color: var(--tx-acento);
}

/* ============================================================
   FORMA 3 · PADRÓN — abre con un titular corto y el conteo
   Unidades idénticas en grilla estricta. La repetición literal
   es el argumento: son seis y se parecen porque son un cuerpo.
   ============================================================ */
.padron-encabezado {
  grid-column: 1 / -1; margin-bottom: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--sp-3);
}
.padron-conteo { color: var(--tx-secundario); }

.padron-grilla { grid-column: 1 / -1; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .padron-grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .padron-grilla { grid-template-columns: repeat(3, 1fr); } }

.ficha {
  border: var(--borde-fino) solid var(--bd-sutil);
  border-radius: var(--radio-grande);
  background: var(--sup-base);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* height:auto es obligatorio: sin él, el atributo height="900" del <img>
   gana sobre aspect-ratio y el retrato mide 900px en todos los viewports. */
.ficha-retrato { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; background: var(--sup-elevada); }
/* En una sola columna el retrato 4:5 ocupa media pantalla, y seis seguidos
   son mucho scroll. El recorte de mobile es CUADRADO, no apaisado: con 4:3
   la ventana visible cubre el 60 % del original y el mentón queda afuera en
   las seis fichas. El 1:1 cubre el 80 % (del 10 % al 90 % de la altura) y
   entra la cabeza entera más los hombros, sin desplazar el encuadre. */
@media (max-width: 639px) {
  .ficha-retrato { aspect-ratio: 1 / 1; object-position: 50% 50%; }
}
.ficha-cuerpo { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.ficha-area {
  color: var(--tx-acento); font-weight: 600;
  font-size: var(--r-caption-size); line-height: 1.4;
}
.ficha-perfil { color: var(--tx-secundario); font-size: var(--r-caption-size); line-height: 1.55; }
.ficha-pie {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: var(--borde-fino) solid var(--bd-sutil);
}
.ficha-atiende { color: var(--tx-secundario); font-size: var(--r-caption-size); }

/* Padrón, variante empresas: mismas reglas, unidad en fila */
.padron-lista { grid-column: 1 / -1; border-top: var(--borde-fino) solid var(--bd-sutil); }
.empresa {
  display: grid; gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 1fr;
  padding-block: var(--sp-4);
  border-bottom: var(--borde-fino) solid var(--bd-sutil);
  align-items: baseline;
}
/* A 768px las cuatro columnas parten los nombres en dos renglones y la fila
   queda despareja. La fila de cuatro entra recién a 1024px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .empresa { grid-template-columns: 1fr 1fr; row-gap: var(--sp-3); align-items: start; }
}
@media (min-width: 1024px) {
  .empresa { grid-template-columns: 1.5fr 1.8fr 0.7fr 1.5fr; }
  .empresa .banda-firma { align-self: center; }
}
.empresa-nombre { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.018em; font-size: var(--r-subhead-size); }
.empresa-rubro, .empresa-desde { color: var(--tx-secundario); font-size: var(--r-caption-size); }

/* ============================================================
   FORMA 4 · FIRMADO — abre con una CIFRA, no con un titular.
   El titular de sección vive corrido al margen izquierdo, en
   vertical. INVENTADA PARA ESTE PROYECTO: solo funciona si el
   número persuade más que cualquier frase que se escriba arriba.
   ============================================================ */
.firmado { position: relative; }
.firmado-rotulo-margen {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-4);
}
@media (min-width: 1024px) {
  .firmado-rotulo-margen {
    grid-column: 1 / 2; grid-row: 1 / 3;
    margin-bottom: 0; align-self: start;
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap;
  }
}
.firmado-cuerpo { grid-column: 1 / -1; }
@media (min-width: 1024px) { .firmado-cuerpo { grid-column: 2 / -1; } }

.casos { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .casos { grid-template-columns: repeat(2, 1fr); } }

.caso {
  border: var(--borde-fino) solid var(--bd-sutil); border-radius: var(--radio-grande);
  background: var(--sup-base); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
/* La apertura de la unidad: la cifra entra primero */
.caso-cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.caso-monto-origen {
  font-family: var(--f-display); font-size: var(--r-headline-size);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1;
  color: var(--tx-secundario); text-decoration: line-through;
  text-decoration-thickness: var(--borde-marca);
}
/* Origen sin tachar: cuando el par no es "monto que se evitó" sino un
   hecho que sí ocurrió (44 salidas), tachar la cifra afirma algo falso. */
.caso-monto-neutro {
  font-family: var(--f-display); font-size: var(--r-headline-size);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1;
  color: var(--tx-principal);
}
.caso-flecha { color: var(--tx-secundario); }
.caso-monto-final {
  font-family: var(--f-display); font-size: var(--r-headline-size);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1;
  color: var(--tx-acento);
}
.caso-etiquetas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.caso-estado {
  font-size: var(--r-caption-size); font-weight: 600; line-height: 1.3;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radio-chico);
  background: var(--sup-acento-lavada); color: var(--marca-700);
}
.caso-estado-alerta {
  background: var(--sup-inversa); color: var(--tx-sobre-inversa);
}
.caso-linea { color: var(--tx-secundario); font-size: var(--r-caption-size); line-height: 1.55; }
.caso-linea b { color: var(--tx-principal); font-weight: 600; }
.caso-pie { margin-top: auto; padding-top: var(--sp-3); border-top: var(--borde-fino) solid var(--bd-sutil); }

.nota-reserva {
  grid-column: 1 / -1; margin-top: var(--sp-4);
  color: var(--tx-secundario); font-size: var(--r-caption-size);
}
@media (min-width: 1024px) { .nota-reserva { grid-column: 2 / -1; } }

/* ---------- El elemento firma ----------
   Un recorte CUADRADO del retrato, el nombre en rol firma, y la
   matrícula. Cierra toda afirmación del sitio. El círculo está
   prohibido: es el tic del testimonio con carrusel. */
.banda-firma { display: flex; align-items: center; gap: var(--sp-3); }
.banda-firma-retrato {
  width: var(--firma-retrato); height: var(--firma-retrato); flex: none;
  border-radius: var(--radio-chico);
  object-fit: cover; object-position: 50% 22%;
  background: var(--sup-elevada);
}
.banda-firma-datos { display: flex; flex-direction: column; }
.banda-firma-matricula {
  font-size: var(--r-caption-size); color: var(--tx-secundario);
  font-variant-numeric: tabular-nums;
}
.caso-firma-enlace { color: var(--tx-principal); text-decoration: none; }
.caso-firma-enlace:hover { color: var(--tx-acento); text-decoration: underline; text-underline-offset: var(--subrayado-offset); }
.inversa .banda-firma-matricula { color: var(--tx-secundario-sobre-inversa); }

/* ---------- Avales institucionales ---------- */
.avales { grid-column: 1 / -1; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--borde-fino) solid var(--bd-sutil); }
.avales-grilla { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-4); }
@media (min-width: 768px) { .avales-grilla { grid-template-columns: repeat(3, 1fr); } }
.aval { border-left: var(--borde-marca) solid var(--bd-acento); padding-left: var(--sp-3); }
.aval-emisor { font-weight: 600; line-height: 1.35; }
.aval-que { color: var(--tx-secundario); font-size: var(--r-caption-size); margin-top: var(--sp-1); }

/* ============================================================
   FORMA 5 · TALÓN — abre con un número de consulta YA EMITIDO,
   antes de que el visitante escriba nada. El formulario es un
   documento que se emite; el talón lateral lleva la promesa firmada.
   ============================================================ */
.talon-numero {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: var(--borde-fino) dashed var(--neutral-450);
}
.talon-numero-valor {
  font-family: var(--f-display); font-weight: 600;
  letter-spacing: -0.018em; font-size: var(--r-subhead-size);
  color: var(--tx-acento-sobre-inversa); font-variant-numeric: tabular-nums;
}
.talon-cuerpo { grid-column: 1 / -1; }
@media (min-width: 1024px) { .talon-cuerpo { grid-column: 1 / 8; } }

.talon-titulo { margin-bottom: var(--sp-4); }

.campo { display: block; margin-bottom: var(--sp-4); }
.campo-etiqueta { display: block; margin-bottom: var(--sp-2); font-weight: 600; font-size: var(--r-caption-size); }
.campo-control {
  width: 100%; font-family: var(--f-texto); font-size: var(--r-body-size);
  line-height: 1.5; color: var(--tx-sobre-inversa);
  background: transparent;
  border: var(--borde-fino) solid var(--bd-interfaz); border-radius: var(--radio-chico);
  padding: var(--sp-3); min-height: var(--control-alto);
  transition: border-color var(--mov-rapido), background var(--mov-rapido);
}
.campo-control::placeholder { color: var(--neutral-400); }
.campo-control:hover { border-color: var(--neutral-350); }
.campo-control:focus { border-color: var(--tx-acento-sobre-inversa); outline-offset: var(--borde-marca); }
textarea.campo-control { min-height: var(--textarea-alto); resize: vertical; }
.campo-control[aria-invalid="true"] { border-color: var(--marca-300); background: color-mix(in srgb, var(--marca-300) 12%, transparent); }
.campo-error { display: block; margin-top: var(--sp-2); font-size: var(--r-caption-size); color: var(--tx-acento-sobre-inversa); font-weight: 600; }
.campo-ayuda { display: block; margin-top: var(--sp-2); font-size: var(--r-caption-size); color: var(--tx-secundario-sobre-inversa); }

/* El talón: separado por una perforación real, no por un borde más */
.talon-stub {
  grid-column: 1 / -1; margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: var(--borde-fino) dashed var(--neutral-450);
}
@media (min-width: 1024px) {
  .talon-stub {
    grid-column: 9 / -1; margin-top: 0; padding-top: 0;
    padding-left: var(--sp-5); border-top: none;
    border-left: var(--borde-fino) dashed var(--neutral-450); align-self: start;
  }
}
.talon-promesa { font-family: var(--f-display); font-size: var(--r-subhead-size); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.talon-detalle { color: var(--tx-secundario-sobre-inversa); font-size: var(--r-caption-size); margin-top: var(--sp-3); }
.talon-firma { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--borde-fino) solid var(--neutral-600); }

.acuse {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: var(--borde-fino) solid var(--tx-acento-sobre-inversa); border-radius: var(--radio-grande);
  background: color-mix(in srgb, var(--marca-300) 10%, transparent);
}
.acuse-numero { font-family: var(--f-display); font-weight: 600; font-size: var(--r-subhead-size); color: var(--tx-acento-sobre-inversa); font-variant-numeric: tabular-nums; }

/* ---------- 8 · Pie ---------- */
.pie { border-top: var(--borde-fino) solid var(--bd-sutil); }
.pie-grilla { grid-column: 1 / -1; display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pie-grilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie-firma-sufijo { margin-bottom: var(--sp-3); }
.pie-titulo { font-weight: 600; font-size: var(--r-caption-size); margin-bottom: var(--sp-3); }
.pie-lista { margin: 0; padding: 0; list-style: none; color: var(--tx-secundario); font-size: var(--r-caption-size); }
.pie-lista li + li { margin-top: var(--sp-2); }
.pie-legal {
  grid-column: 1 / -1; margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: var(--borde-fino) solid var(--bd-sutil);
  color: var(--tx-secundario); font-size: var(--r-caption-size);
}

/* ---------- 9 · Entrada de material ---------- */
.entra { opacity: 0; transform: translateY(var(--entra-desplazamiento)); }
.entra-visible { opacity: 1; transform: none; transition: opacity var(--mov-lento), transform var(--mov-lento); }
@media (prefers-reduced-motion: reduce) {
  .entra { opacity: 1; transform: none; }
  .entra-visible { transition: none; }
}