/* 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);
}
.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);
}
/* 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); }

.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 firma, revisión de la matriz, titular, entrada, acciones, el
 * índice de materias y los cinco precios con su plazo. La versión anterior
 * gastaba 774 px en una fotografía que el velo dejaba al 22 % de presencia y
 * cuyo recorte tiraba la chimenea; y ponía la primera cifra del sitio a
 * 1,248 px del borde. Eso es lo que se corrige aquí, no el alto. */

.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); }

.cabezal__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: var(--e6) var(--e6) var(--e8);
  display: grid;
  gap: var(--e4);
}

.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);
}
.cabezal__rev { color: var(--acento); }

.cabezal__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--display-xl);
  font-weight: var(--peso-titular);
  line-height: var(--alto-xl);
  letter-spacing: var(--tracking-xl);
  max-width: 22ch;
}
/* 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; gap: var(--e4); }

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

/* Índice de materias. Cada una dice cuántas se coordinan con tercero
 * acreditado: subir los conteos sin esa marca sería prometer competencia
 * completa en STPS, que el art. III llama violación. */
.materias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: var(--regla) solid var(--borde-inverso);
}
.materias li { border-bottom: var(--regla) solid var(--borde-inverso); }
.materias a {
  display: grid;
  gap: var(--e1);
  padding: var(--e3) var(--e4) var(--e3) 0;
  text-decoration: none;
}
.materias__n {
  font-family: var(--fuente-display);
  font-size: var(--cifra);
  font-weight: var(--peso-dato);
  letter-spacing: var(--tracking-s);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.materias__t { font-size: var(--cuerpo-s); }
.materias__coord {
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}

/* La tira de precios. Es la corrección de fondo: el titular promete el precio
 * y la fecha, y aquí están los cinco, dentro del primer pliegue. */
.tira {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 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%;
}

/* ── Conteos por materia ─────────────────────────────────────────────────── */

.conteos {
  list-style: none;
  margin: var(--e16) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: var(--regla-fuerte) solid var(--borde-fuerte);
}
.conteos li { border-bottom: var(--regla) solid var(--borde); }
.conteos a {
  display: grid;
  gap: var(--e1);
  padding: var(--e6) var(--e4) var(--e6) 0;
  text-decoration: none;
}
.conteo__n {
  font-family: var(--fuente-display);
  font-size: var(--display-m);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.conteo__t { font-size: var(--cuerpo-s); color: var(--texto-suave); }

/* ── 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);
}
.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);
}
/* La landing emitía esta clase y el CSS no la tenía, así que repetía
 * /precios/ byte a byte: 1,096 px de escalera para decir lo que cabe en 307. */
.escalera--resumen .peldano {
  grid-template-columns: minmax(0, 1.2fr) minmax(9rem, auto) minmax(0, 0.9fr);
  padding-block: var(--e3);
}
.escalera--resumen .peldano__precio {
  grid-column: 2 / -1;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: var(--e1) var(--e6);
}
.escalera--resumen .peldano__precio dt { margin-top: 0; }
.escalera--resumen .peldano--destacado { padding-inline: var(--e4); }
.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(--e12);
  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,
.peldano--destacado .peldano__incluye li::before { 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__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__incluye li { padding-left: var(--e4); text-indent: calc(var(--e4) * -1); }
.peldano__incluye li::before { content: "— "; color: var(--texto-suave); }
.peldano__limite { font-size: var(--cuerpo-s); text-wrap: pretty; }
.peldano__limite strong { color: var(--acento); font-weight: var(--peso-enfasis); }
.peldano__cta {
  display: inline-block;
  margin-top: var(--e4);
  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(--e12) 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(--e6) 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(--e12);
  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(--e6); }
.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(--e8);
  padding-top: var(--e6);
  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); }

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

.vistazo {
  border: var(--regla-fuerte) solid var(--borde-fuerte);
  background: var(--superficie-alta);
}
.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(--e8), 5vw, var(--e16)); }
.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(--e8);
  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: 22rem; }

.opciones { display: flex; flex-direction: column; gap: var(--e3); max-width: 34rem; }
.opcion {
  display: flex;
  align-items: center;
  min-height: var(--area-tactil);
  padding: var(--e4) var(--e6);
  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:hover {
  background: var(--superficie-profunda);
  color: var(--texto-inverso);
  transform: translateX(3px);
}
.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); }

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

.resultado { margin-top: var(--e16); scroll-margin-top: 6rem; }
.resultado__resumen {
  font-size: var(--cuerpo-l);
  max-width: 58ch;
  margin: 0 0 var(--e6);
  padding-bottom: var(--e4);
  border-bottom: var(--regla-fuerte) solid var(--borde-fuerte);
  text-wrap: pretty;
}
.resultado__resumen strong { font-weight: var(--peso-dato); }
.resultado__nota {
  max-width: var(--medida-lectura);
  margin: 0 0 var(--e8);
  padding: var(--e4);
  border: var(--regla-fuerte) solid var(--acento);
  font-size: var(--cuerpo-s);
  text-wrap: pretty;
}
.resultado__indice {
  list-style: none;
  margin: 0 0 var(--e12);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e8);
}
.resultado__indice li { display: grid; gap: var(--e1); }
.resultado__materia {
  font-family: var(--fuente-display);
  font-size: var(--subtitulo);
  letter-spacing: var(--tracking-display);
  margin: var(--e16) 0 var(--e4);
  padding-bottom: var(--e2);
  border-bottom: var(--regla-fuerte) solid var(--borde-fuerte);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e4);
}
.resultado__materia:first-of-type { margin-top: 0; }

/* ── 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); }
.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; }

.pie__alcance {
  border-top: var(--regla) solid var(--borde-inverso);
}
/* Es la única prosa larga del sitio que ignoraba su propia regla de medida:
 * corría a 176 caracteres por línea. Es texto que protege legalmente al
 * negocio, no una nota al pie. */
.pie__alcance p {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: var(--e8) var(--e6) 0;
  font-size: var(--cuerpo-s);
  line-height: 1.7;
  color: var(--texto-inverso-suave);
  text-wrap: pretty;
}
.pie__alcance > p:not(.pie__firma) { columns: 2; column-gap: var(--e12); }
.pie__alcance strong { color: var(--texto-inverso); font-weight: var(--peso-enfasis); }
.pie__firma {
  font-size: var(--rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  padding-bottom: var(--e8);
}


/* ── 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,
  .materias,
  .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); }
  .materias          { 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: un solo gesto y una sola amplitud para las tres listas de
 * enlaces. 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. */
.conteo__n, .conteo__t,
.indice__nombre, .indice__meta,
.materias__n, .materias__t, .materias__coord {
  transition: transform var(--duracion-corta) var(--curva-salida);
}
:is(.conteos a, .indice__item a, .materias a):is(:hover, :focus-visible)
  :is(.conteo__n, .conteo__t, .indice__nombre, .indice__meta,
      .materias__n, .materias__t, .materias__coord) {
  transform: translateX(6px);
}
/* La regla inferior engrosa con box-shadow: es pintura, no layout, y evita el
 * borde lateral de color, que está prohibido. */
:is(.conteos a, .indice__item a, .materias 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__incluye, .peldano__limite, .peldano__cta { 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); }
}

@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__alcance p { 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. */
  .cabezal__titulo { font-size: 2.5rem; }
  .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); }
  /* A una columna, la tira eran cinco filas apiladas que empujaban el primer
   * precio a y=1277. A dos, cabe sobre el pliegue. */
  .tira { 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); }
  .materias { grid-template-columns: 1fr 1fr; }
  .materias a { padding-right: var(--e3); }
  .pie__alcance > p:not(.pie__firma) { columns: 1; }
  .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); }
  .cabezal__acciones .boton { width: 100%; }
  .conteos { grid-template-columns: 1fr 1fr; }
}