/* [1] Fuentes propias — SIL OFL, ver assets/fonts/LICENSE-*.txt */
/* Inter es una fuente variable: el subset latin que sirve Google trae un eje
   `wght` y los bloques de 400 y de 600 apuntaban al mismo archivo. La Tarea 3
   lo bajó dos veces con dos nombres —`inter-400.woff2` e `inter-600.woff2`,
   idénticos byte a byte— y la página se lo descargaba dos veces. Ahora es un
   solo archivo declarado con rango de peso.
   El eje se midió en navegador con un @font-face de 1 a 1000: el ancho de una
   misma frase crece de forma continua entre 100 y 900 y se satura fuera de ese
   intervalo, así que el rango real es 100–900 y es el que se declara. Con él
   existe de verdad la cara 500 que el diseño pide en `#problema`, que antes
   había que subir a 600.
   JetBrains Mono no es variable: su archivo es una cara 400 estática. Medido
   con el mismo método —declarándolo 1–1000 para que el navegador no sintetice
   nada— la tinta de la misma frase es idéntica a 400, 500 y 700. Por eso sigue
   declarado en 400 a secas; ver `.cubierta-numero`. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

/* [2] Base — viene del <helmet> del export, con tokens */
:root {
  --ink: #0E2233;
  --ink-muted: #4A5C6B;
  --slate-900: #14293D;
  --slate-700: #2B4055;
  --surface: #FFFFFF;
  --surface-muted: #F4F6F8;
  --border: #DCE3EA;
  --accent: #E07A1F;
  --accent-hover: #C4670F;
  --accent-ink: #A85410;
  --link: #0B63A8;
  --ok: #1E7A4D;
  --err: #B3261E;
  /* Los dos grises de texto sobre fondo oscuro. No vienen del export, que los
     escribe sueltos: --ink-claro es el cuerpo y --ink-tenue el secundario, y
     entre los dos suman una veintena de apariciones en esta hoja. Están acá
     porque repetir el literal ya se cobró un error: `.pie-nota` y
     `.eyebrow-tenue` lo escribían por separado, y cuando `.enlace-claro` tomó
     el tenue por error nadie lo vio hasta la revisión. Medidos sobre
     --slate-900: --ink-claro 10,03:1 y --ink-tenue 5,71:1. */
  --ink-claro: #C9D6E1;
  --ink-tenue: #8FA3B5;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

body {
  margin: 0;
  background: var(--surface-muted);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: #08497C; text-decoration: underline; }
/* Anillo de foco de dos tonos. Ningún color solo llega a 3:1 contra los cuatro
   fondos donde aparece el foco, así que lleva un tono claro por fuera y uno
   oscuro por dentro y en cada fondo lo sostiene al menos uno de los dos.
   Medido en navegador — blanco: 14,85:1 sobre --slate-900 y 3,01:1 sobre
   --accent; #0A1826: 17,93:1 sobre --surface, 16,55:1 sobre --surface-muted y
   5,95:1 sobre --accent. Entre sí los dos tonos dan 17,93:1.
   El --link #0B63A8 que traía el export daba 2,38:1 sobre el navy del header y
   2,07:1 sobre el naranja del CTA, por debajo del 3:1 que pide WCAG 1.4.11 para
   un indicador de foco.
   El box-shadow rellena los 3px de outline-offset y el outline se pinta encima:
   el anillo entero mide 5px, que es justo el hueco que .nav-principal reserva
   en móvil. */
:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #0A1826;
}
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

@keyframes om-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Solo se oculta si hay JavaScript para volver a mostrarlo. */
.js section[data-reveal] { opacity: 0; }

/* [3] Salto al contenido */
.saltar {
  position: absolute;
  left: -9999px;
  background: var(--slate-900);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 6px;
  z-index: 50;
}
.saltar:focus { left: 16px; top: 16px; }
/* Sin esta regla gana `a:hover` y el enlace queda azul #08497C sobre el navy
   del propio enlace: 1,59:1 medido. Mismo patrón que el resto del catálogo. */
.saltar:hover { color: #FFFFFF; text-decoration: none; }

/* [4] Botones y enlaces — reemplazan style-hover y style-active */
/* Texto --ink sobre el naranja de marca: 5,38:1 medido. El blanco del export
   daba 3,01:1 con 17px en peso 600, que no califica como texto grande, y es el
   CTA principal de toda la página. En :hover el fondo baja a --accent-ink y el
   texto vuelve a blanco: 5,33:1. Las combinaciones intermedias no llegan a
   4,5:1 — blanco sobre --accent-hover 3,97:1, --ink sobre --accent-hover
   4,09:1, --ink sobre --accent-ink 3,04:1 — así que el par cambia entero. */
.btn-primario {
  background: var(--accent);
  color: var(--ink);
  transition: background 150ms ease, transform 80ms ease;
}
.btn-primario:hover { background: var(--accent-ink); color: #FFFFFF; text-decoration: none; }
.btn-primario:active { transform: translateY(1px); }

.btn-hero-secundario,
.btn-header {
  color: var(--ink-claro);
  border: 1px solid #33506A;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.btn-hero-secundario:hover { color: #FFFFFF; border-color: var(--accent); text-decoration: none; }
.btn-header:hover { color: var(--ink-claro); border-color: var(--ink-tenue); background: #1B3346; text-decoration: none; }

/* Los ocho enlaces del footer. Van en --ink-claro, que es lo que usa el export
   (:352-356, :360-362): en --ink-tenue quedaban del mismo color que los títulos
   de columna —que son `.eyebrow-tenue`— y la jerarquía del footer se aplanaba,
   con el rótulo pesando lo mismo que sus enlaces. Medido sobre --slate-900:
   10,03:1 en reposo y 14,85:1 el blanco del hover; el tenue de los títulos
   queda en 5,71:1, así que los tres pasan 4,5:1 y ahora se distinguen. */
.enlace-claro { color: var(--ink-claro); transition: color 150ms ease; }
.enlace-claro:hover { color: #FFFFFF; text-decoration: none; }

.enlace-nav {
  color: var(--ink-claro);
  font-size: 15px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.enlace-nav:hover { color: #FFFFFF; text-decoration: none; }
.enlace-nav.activo { color: #FFFFFF; border-bottom-color: var(--accent); }

.tarjeta-oscura { background: var(--slate-900); transition: background 150ms ease; }
.tarjeta-oscura:hover { background: #1B3346; }

.tarjeta-borde { border: 1px solid var(--border); transition: border-color 150ms ease; }
.tarjeta-borde:hover { border-color: var(--accent); }

/* [5] Etapas del hero — el estado lo escribe landing.js en data-estado */
/* El reposo va en --ink-tenue, no en el #5E7488 del export: en frío son siete de
   las ocho filas, con texto de 15px y 12px, y el gris viejo daba 3,38:1 sobre
   el fondo real del panel (#0F2130) y 3,06:1 sobre --slate-900. Medido:
   --ink-tenue da 6,31:1 sobre el panel y 5,71:1 sobre --slate-900. Se descartó
   #7B8FA3 porque pasa en el panel (4,92:1) pero no sobre --slate-900 (4,45:1),
   y el bloque de etapas se reusa sobre ese fondo. */
.etapa .punto  { background: #243C50; transition: background 300ms ease; }
.etapa .nombre { color: var(--ink-tenue); transition: color 300ms ease; }
.etapa .estado { color: var(--ink-tenue); transition: color 300ms ease; }
.etapa[data-estado="completa"] .punto  { background: #4E7F63; }
.etapa[data-estado="completa"] .nombre { color: var(--ink-claro); }
.etapa[data-estado="completa"] .estado { color: #7FC49E; }
.etapa[data-estado="activa"] .punto  { background: var(--accent); }
.etapa[data-estado="activa"] .nombre { color: #FFFFFF; }
.etapa[data-estado="activa"] .estado { color: #E9A65E; }

/* [6] Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* [7] Componentes de disposición. Los escribió cada tarea de porteo (4 a 7)
   junto con su HTML, y la Tarea 9 hizo el barrido final: `index.html` no tiene
   ni un atributo `style=`, y lo que las cuatro tareas habían escrito por
   separado —doce pilas verticales, siete grillas fluidas, una clase de fondo
   oscuro repetida, cuatro clases de cuerpo con el mismo color— quedó en dos
   primitivas parametrizadas y un juego de modificadores de un renglón.
   Sobre el orden de declaración, y esto reemplaza a la «regla de oro» que decía
   este comentario antes. Decía que ninguna regla de acá depende de estar más
   arriba o más abajo que otra. **No es cierto, y afirmarlo era la trampa.**
   Volcada la CSSOM y cruzadas todas las reglas que le aplican a cada elemento,
   a 1440 px hay **21 pares de la misma especificidad que se resuelven por
   orden**. Por familia:

   - `.contenedor` contra `.cabecera-interior`, `.hero-interior`, `.pie-interior`
     y `.pie-legal`: 8 pares, todos `padding-top`/`padding-bottom`. El shorthand
     `padding: 0 24px` del contenedor escribe un 0 vertical que los cuatro
     rellenos en longhand pisan por estar más abajo.
   - `.eyebrow` contra `.eyebrow-chico`, `.eyebrow-claro` y `.eyebrow-tenue`: 3.
   - `.punto` contra `.punto-consola`: 2 (ancho y alto).
   - `.seccion` contra `.seccion-holgada`: 2 (relleno vertical).
   - `.maqueta-cifra` contra `.maqueta-ok` y `.maqueta-err`: 2 (color).
   - `.tarjeta` contra `.maqueta` (sombra), `.maqueta-nav` contra
     `.maqueta-nav-activo` (color), `.titulo-seccion` contra `.titulo-confianza`
     (interlineado) y `.dato-valor` contra `.dato-valor-grande` (tamaño): 1 cada
     uno.

   Los 21 son de la misma forma —una base y su modificador, declarado después— y
   hoy son inocuos: si se invirtieran, un tamaño o un relleno quedarían mal, se
   vería a simple vista y se arregla mirando. La regla que sí hay que sostener es
   más chica y más útil que la que estaba escrita:

   **cuando lo que se disputa cambia el significado y no la medida —el color de un
   texto sobre su fondo, el borde que distingue un estado— la que tiene que ganar
   lleva más especificidad o no se disputa nada.** Tres precedentes: `.paso`
   pisaba a `.tarjeta-borde` por posición y al reordenar dos pasos aparecieron con
   un recuadro de 1 px; `.maqueta-panel-apretado` lleva las dos clases para ganar
   por especificidad; y `.texto-claro` le ganaba a `.texto` por orden, con cuatro
   párrafos sobre navy que al invertirse caían a 2,15:1 — ese se resolvió sacando
   la disputa del medio, con la tinta en variable (ver `.texto`).

   El bloque [8] es aparte: un media query no suma especificidad, así que todo lo
   que hay ahí gana por estar al final del archivo. Es su forma de funcionar, no
   un descuido, y por eso [8] es el último bloque. */

/* Ancho de página. Sale del `max-width: 1120px; margin: 0 auto; padding: 0 24px`
   que el export repite en cada sección. El relleno vertical lo pone cada
   componente, porque no es el mismo en el header que en el hero. */
.contenedor {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Dos primitivas de disposición ---
   El porteo dejó doce pilas verticales que solo se diferenciaban en el hueco y
   siete grillas de columnas fluidas que solo se diferenciaban en el mínimo, el
   hueco y la alineación. En vez de doce y siete juegos de las mismas
   declaraciones hay dos clases y un puñado de variables: cada componente
   declara nada más lo suyo.

   Los valores por defecto van en un `:where()`, que tiene especificidad cero, y
   eso resuelve de una vez los dos problemas del patrón:

   1. Cualquier regla de componente —que es una clase, 0,1,0— le gana al valor
      por defecto **sin importar el orden de declaración**. Es la misma lección
      que dejó `.paso` pisando a `.tarjeta-borde` por posición en el archivo.
   2. Las variables se heredan, así que una pila dentro de otra pila tomaría el
      hueco de la de afuera. Al declararse el valor por defecto en el propio
      elemento, la herencia no llega: gana lo declarado. Pasa de verdad —la
      consola vive dentro de una columna de `#integracion`, y las dos son
      pilas— y sin esto la consola habría abierto un hueco de 16 px que el
      export no tiene. */
:where(.pila) { --pila-hueco: 0px; }
.pila {
  display: flex;
  flex-direction: column;
  gap: var(--pila-hueco);
}

/* `repeat(auto-fit, minmax(...))`: las columnas se acomodan solas y bajan de
   fila cuando no entran, que es como el export arma todas sus grillas fluidas.
   Las de columnas fijas —los KPI de la maqueta, el gráfico de barras— no son
   esta clase: no comparten la forma.

   El `min(..., 100%)` del mínimo es el que evita que la grilla desborde en una
   pantalla más angosta que su propio mínimo. `auto-fit` baja a una sola columna
   cuando no entran dos, pero esa única pista sigue midiendo `--grilla-min`: si
   el mínimo es más ancho que el contenedor, la pista se sale y con ella el
   documento entero. Pasaba de verdad con `.hero-grilla`, que hereda del export
   un mínimo de 340 px: por debajo de 365 px de ventana el documento desbordaba
   —4 px medidos a 360 y 44 px a 320— y la página se podía desplazar de lado.
   Con `min()` la pista nunca pide más que el ancho disponible.
   No cambia nada donde el mínimo sí entra: a 1440, 768 y 390 las cuatro grillas
   resuelven las mismas pistas que antes. */
:where(.grilla) {
  --grilla-min: 300px;
  --grilla-hueco: 40px;
  --grilla-alto: normal;
}
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grilla-min), 100%), 1fr));
  gap: var(--grilla-hueco);
  align-items: var(--grilla-alto);
}

/* --- Header (Tarea 4) --- */
.cabecera {
  background: var(--slate-900);
  border-bottom: 1px solid #0A1826;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(5, 15, 25, 0.28);
}
.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}
/* La nav y el botón viajan juntos a la derecha. En el export estaban dentro de
   un mismo <nav> con gap 28px; acá el botón queda fuera de la nav —no es una
   sección de la página— y este contenedor conserva esa separación. */
.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.nav-principal {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.btn-header {
  display: inline-block;
  font-size: 15px;
  border-radius: 6px;
  padding: 8px 14px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.logo-punto {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}
.logo-nombre {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logo-tld {
  color: var(--ink-tenue);
  font-size: 13px;
  font-family: var(--mono);
}

/* Por debajo de 940 px la nav se desliza en horizontal en vez de partirse en
   tres filas; es la razón por la que los cinco enlaces viven en su propio
   <nav>. Va acá, con el componente, y no en [8]: la Tarea 11 hace el resto del
   móvil (el header de 252 px que documenta base-notas.md, punto 3).

   Los dos `min-width: 0` no son decorativos: sin ellos el ítem flexible no
   baja de su ancho de contenido, la nav no se encoge y el header desborda la
   página (medido: 603 px de documento en un viewport de 390).

   El relleno de 6px con margen negativo deja lugar al anillo de foco —2px de
   trazo más 3px de `outline-offset`— dentro del contenedor de desplazamiento,
   que si no lo recortaría, y no mueve el primer enlace de su sitio. */
@media (max-width: 940px) {
  .cabecera-acciones { min-width: 0; }
  .nav-principal {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
    margin: 0 -6px;
  }
}

/* --- Hero (Tarea 4) --- */
/* El <section> del hero no lleva clase propia: su único estilo era el par
   fondo + color de texto, byte a byte el mismo de `.seccion-oscura`, que ya
   existía para `#automatico`. Se quedó una sola, declarada con el resto de los
   fondos de sección. Lo que sigue es la geometría del hero, que sí es suya. */
.hero-interior {
  padding-top: 96px;
  padding-bottom: 96px;
}
.hero-grilla {
  --grilla-min: 340px;
  --grilla-hueco: 56px;
  --grilla-alto: center;
}
.hero-columna { --pila-hueco: 28px; }

/* La etiqueta chica en mayúsculas. El color por defecto es el de las secciones
   claras; sobre el navy del hero se le suma .eyebrow-claro. */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow-claro { color: #E9A65E; }

.hero-titulo {
  font-size: 49px;
  line-height: 1.15;
  color: #FFFFFF;
}
.hero-bajada {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-claro);
  max-width: 62ch;
}
.hero-acciones {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Geometría de los dos CTA; el color y los estados vienen del catálogo [4]. */
.btn-primario {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  border-radius: 6px;
  padding: 15px 26px;
}
.btn-hero-secundario {
  display: inline-block;
  font-size: 16px;
  border-radius: 6px;
  padding: 15px 24px;
}

/* --- Panel de etapas del hero (Tarea 4) --- */
.panel-etapas {
  background: #0F2130;
  border: 1px solid var(--slate-700);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(5, 15, 25, 0.35);
}
.panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--slate-700);
}
.panel-etiqueta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-tenue);
  letter-spacing: 0.06em;
}
.avance {
  font-family: var(--mono);
  font-size: 12px;
  color: #E9A65E;
}
.panel-cuerpo { padding: 8px 20px 20px; }

.lista-etapas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.etapa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #1B3346;
}
.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.nombre {
  flex: 1 1 auto;
  font-size: 15px;
}
.estado {
  font-family: var(--mono);
  font-size: 12px;
}
.barra-fondo {
  margin-top: 18px;
  height: 4px;
  border-radius: 2px;
  background: #1B3346;
  overflow: hidden;
}
/* 13 % es la primera de las ocho etapas: round(1/8 * 100). A partir de ahí el
   ancho lo escribe landing.js por CSSOM, que no lo bloquea style-src 'self'. */
.barra {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  width: 13%;
  transition: width 700ms ease;
}

/* --- Secciones de contenido (Tarea 5) --- */
/* El export repite en cada sección un div con `max-width: 1120px; margin: 0
   auto; padding: 96px 24px`. Acá los 24 px laterales los sigue poniendo
   `.contenedor` y los 96 px verticales suben al propio `<section>`, que es
   quien lleva el fondo: así el color llega de borde a borde del viewport y no
   depende de la caja interna. */
.seccion { padding: 96px 0; }
.seccion-suave { background: var(--surface-muted); }
.seccion-clara { background: var(--surface); }
/* El export pone el fondo y el color del texto en el propio <section> (:144).
   Lo llevan dos: `#automatico`, que además es una `.seccion`, y el hero, que
   no lo es porque su relleno vertical lo pone `.hero-interior`. Los títulos y
   los párrafos de adentro no declaran color: heredan este blanco. */
.seccion-oscura {
  background: var(--slate-900);
  color: #FFFFFF;
}
.seccion-lineas {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Eyebrow + h2 (+ bajada). Mismas declaraciones en `#problema` (export :90) y
   en `#como-funciona` (:119). */
.encabezado-seccion { --pila-hueco: 20px; }
.titulo-seccion {
  font-size: 39px;
  line-height: 1.2;
}

/* Escala de cuerpo. Es una sola clase con dos variables —tamaño y tinta— y un
   juego de modificadores de un renglón, no cuatro clases repitiendo
   `color: var(--ink-muted)`. El export usa ese mismo gris en todos los escalones;
   6,39:1 sobre --surface-muted y 6,92:1 sobre --surface.
   Los escalones: 17 px el párrafo de sección, 15 px el de tarjeta y de pie,
   14 px el detalle de las cajas de `#confianza` (:320) y 13 px los pies de la
   maqueta y de la consola. Cada uno se escribe `class="texto texto-chico"`,
   con la base primero.

   El color va por variable por la misma razón que el tamaño, y esta vez la razón
   tiene consecuencia de contraste. `.texto-claro` y `.texto-destacado` declaraban
   `color` con la misma especificidad que `.texto` (0,1,0) y le ganaban **solo por
   estar más abajo en el archivo**. Los cuatro párrafos de `#automatico` son
   `.texto .texto-claro` sobre --slate-900: si alguien reordenaba este bloque
   —cosa que el propio bloque invita a hacer— ganaba `.texto` y esos párrafos
   quedaban en --ink-muted sobre el navy, que da **2,15:1**, menos de la mitad del
   4,5:1 que exigen las restricciones. Con la tinta en variable el orden deja de
   decidir: el valor por defecto vive en un `:where()` de especificidad cero, cada
   modificador declara la suya con especificidad de clase, y las tres reglas
   escriben `color: var(--texto-tinta)`, o sea el mismo valor gane la que gane.
   Los dos modificadores repiten ese `color` en vez de confiar en que `.texto`
   esté presente: así también sirven sueltos, que es como se usa `.texto-destacado`
   en el `<strong>` de `#integracion`, que no es `.texto`. */
:where(.texto) {
  --texto-tam: 17px;
  --texto-tinta: var(--ink-muted);
}
.texto {
  font-size: var(--texto-tam);
  color: var(--texto-tinta);
}
.texto-chico { --texto-tam: 15px; }
/* 41ch y no los 40 del export: con 40 el renglón de `#problema` cierra con 3 px
   de margen y basta un rasterizado con hinting completo para que la última
   palabra caiga a un segundo renglón. Un carácter más son ~8 px de aire y no
   cambia dónde corta ninguno de los dos párrafos. */
.texto-angosto { max-width: 41ch; }
/* Los dos énfasis de cuerpo del export, y no llevan el mismo peso: la frase de
   `#problema` va en 500 (:94) y el `<strong>` del cierre de `#integracion` en
   600 (:297). Desde que Inter se declara con rango de peso, la cara 500 existe
   de verdad y la frase la usa; antes se subía a 600 porque un 500 se habría
   resuelto en la cara 400.
   El 600 se cuelga del tipo de elemento en vez de una clase más: `<strong>` ya
   significa énfasis fuerte y es el único de la página. Al calificar por tipo la
   regla queda con más especificidad que la de la clase, así que gana sin
   depender del orden de declaración. */
.texto-destacado {
  --texto-tinta: var(--ink);
  color: var(--texto-tinta);
  font-weight: 500;
}
strong.texto-destacado { font-weight: 600; }
/* Pie de sección: la nota de plazos de `#como-funciona` (:140). */
.nota-seccion { margin-top: 48px; }

/* Grillas. Los mínimos salen del export: 320 px en las dos columnas de
   `#problema` (:89) y 260 px en los tres pasos de `#como-funciona` (:123).
   El `align-items: start` es del export y evita que la tarjeta del `<dl>` se
   estire hasta el alto de la columna de texto. `.grilla-3` se queda con el
   hueco y la alineación por defecto de `.grilla`. */
.grilla-2 {
  --grilla-min: 320px;
  --grilla-hueco: 64px;
  --grilla-alto: start;
}
.grilla-3 { --grilla-min: 260px; }

/* Caja de tarjeta. El relleno no va acá a propósito: en `#problema` lo pone
   cada fila del `<dl>`, no la tarjeta. Una tarjeta de una sola caja le suma el
   suyo. */
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(14, 34, 51, 0.04);
}

/* --- Sección «Qué pide el SII» (Tarea 5) --- */
/* Sin hueco entre filas: lo que las separa es la línea de `.requisito +
   .requisito`. Se declara igual, y no se deja al valor por defecto de `.pila`,
   porque así queda dicho que el cero es una decisión. */
.lista-requisitos {
  --pila-hueco: 0px;
  margin: 0;
}
.requisito {
  --pila-hueco: 8px;
  padding: 28px;
}
/* El separador entre filas es más claro que --border: es el #EDF1F4 del export
   (:103, :108), que no tiene token. Va como `+` para que la primera fila no lo
   lleve, igual que en el original. */
.requisito + .requisito { border-top: 1px solid #EDF1F4; }
.requisito dd { margin: 0; }
.requisito-titulo {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
/* Última fila sobre el tinte cálido del export (:108). Repite el radio de
   `.tarjeta` en las dos esquinas de abajo en vez de recortar con
   `overflow: hidden`, que le comería el anillo de foco a cualquier enlace que
   entre después en la tarjeta.
   Medido: --ink-muted sobre #FBF6F0 da 6,44:1 y --accent-ink 4,96:1. */
.requisito-destacado {
  background: #FBF6F0;
  border-radius: 0 0 8px 8px;
}
/* El rótulo de cada fila es el mismo eyebrow, un punto más chico (:99, :104,
   :109). */
.eyebrow-chico { font-size: 12px; }

/* --- Sección «Cómo funciona» (Tarea 5) --- */
.lista-pasos {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
/* Los pasos 02 y 03 llevan además `.tarjeta-borde` del catálogo [4]: de ahí
   salen el hover a naranja y la transición, que es lo que el export resolvía
   con `style-hover` (:129, :134).
   El reparto del borde entre las dos clases es deliberado y no puede quedar
   librado al orden de declaración, que es como estaba: `.paso` traía un
   `border-top: 4px solid var(--border)` que le ganaba al `border: 1px` del
   catálogo solo por estar más abajo en el archivo, y al reordenar este bloque
   dos de los tres pasos aparecían con un recuadro de 1 px.
   Ahora `.paso` no declara borde. La geometría —ancho y estilo— la fija
   `.lista-pasos > .paso`, que con dos clases le gana al catálogo sin depender
   del orden; el color en reposo lo pone `.tarjeta-borde`, el de hover su
   `:hover`, y como las otras tres aristas quedan en ancho 0 solo se ve cambiar
   la de arriba. */
.paso {
  --pila-hueco: 14px;
  padding-top: 24px;
}
.lista-pasos > .paso {
  border-style: solid;
  border-width: 0;
  border-top-width: 4px;
}
/* El primer paso nace en naranja y no tiene hover: en el export su borde ya es
   #E07A1F y su número #A85410. Es el único que no lleva `.tarjeta-borde`, así
   que es el único que necesita decir de qué color es su borde. */
.paso-destacado { border-top-color: var(--accent); }
.paso-numero {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.paso-destacado .paso-numero { color: var(--accent-ink); }
.titulo-paso {
  font-size: 25px;
  line-height: 1.25;
}

/* --- Sección «Qué corre solo» (Tarea 6) --- */
/* El fondo oscuro sale de `.seccion-oscura`, que esta sección comparte con el
   hero y que vive arriba, con el resto de los fondos de sección. */
/* La variante en fila de `.encabezado-seccion`: título a la izquierda, eyebrow
   a la derecha, los dos apoyados en la misma base (:146). */
.encabezado-partido {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
/* El h2 de esta sección se corta a 24ch (:147), como `.texto-angosto` hace con
   el cuerpo a 41ch. */
.titulo-angosto { max-width: 24ch; }

.lista-cubiertas {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
}
/* Cada fila lleva además `.tarjeta-oscura` del catálogo [4]: de ahí salen el
   fondo —que es el mismo --slate-900 de la sección, así que en reposo no se
   ve— y el hover a #1B3346, que es lo que el export resolvía con `style-hover`
   (:151). Única diferencia con el export: la transición dura 150 ms y no 200.
   Ninguna de las dos clases declara lo que declara la otra, así que acá no hay
   pelea de orden como la de `.paso` con `.tarjeta-borde`.
   El margen negativo devuelve los 24 px laterales de `.contenedor` para que el
   fondo del hover se extienda más allá del texto, como en el original. */
.cubierta {
  display: grid;
  grid-template-columns: 96px minmax(180px, 1fr) minmax(280px, 2fr);
  gap: 32px;
  align-items: start;
  padding: 36px 24px;
  margin: 0 -24px;
  border-top: 1px solid var(--slate-700);
  border-radius: 6px;
}
/* La cuarta fila cierra la lista con su propia línea abajo (:166). */
.cubierta:last-child { border-bottom: 1px solid var(--slate-700); }
/* El export pide peso 500 (:152) y acá se queda en 500 aunque no tengamos esa
   cara. La diferencia con `.texto-destacado` es la familia: Inter es variable y
   su 500 existe; JetBrains Mono no lo es —su archivo es una cara 400 estática,
   verificado en navegador— así que un 500 se resuelve en la 400 y un 600
   dispararía la negrita sintética del navegador. Medido contra `base-1440.png`
   en el recorte de los cuatro números, en «tinta» (suma de la distancia de cada
   píxel al fondo): la base, con la Mono 500 real de Google Fonts, da 652.978; el
   600 sintético 768.496 (+17,7 %); el 500, que resuelve en la cara 400, 562.497
   (-13,9 %). El 500 queda más cerca y no inventa una cara que no tenemos.
   Decidido: estos cuatro números no se tocan. */
.cubierta-numero {
  font-family: var(--mono);
  font-size: 39px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}
/* Cuerpo sobre fondo oscuro. Va aparte del interlineado porque el export usa
   1.7 en cinco párrafos y solo cuatro de ellos son claros; el quinto está en
   `#confianza` y es --ink-muted. Calculado: --ink-claro sobre --slate-900 da
   10,03:1.
   Cambia la tinta de la escala, no el color suelto: ver el comentario de
   `.texto`, que es donde el orden de declaración podía costar el contraste. */
.texto-claro {
  --texto-tinta: var(--ink-claro);
  color: var(--texto-tinta);
}
.texto-holgado { line-height: 1.7; }

/* --- Sección «Cómo se integra» (Tarea 6) --- */
/* `#integracion` solo lleva línea arriba (:175); `.seccion-lineas` pone las
   dos. */
.seccion-linea-arriba { border-top: 1px solid var(--border); }

/* Las dos columnas de la sección (:181). No es `.grilla-2`: el export les da
   acá un mínimo de 360 px y un gap de 40, y las estira en vez de alinearlas
   arriba, porque la consola de la izquierda crece hasta el alto de la maqueta
   de la derecha. */
.grilla-integracion {
  --grilla-min: 360px;
  --grilla-alto: stretch;
  margin-top: 48px;
}
.columna-integracion { --pila-hueco: 16px; }
/* Los dos h3 de esta sección no declaran interlineado (:185, :216): heredan el
   1.6 del body, a diferencia de `.titulo-paso`, que baja a 1.25. */
.titulo-columna { font-size: 25px; }
/* Las dos alturas mínimas igualan las columnas: 84 px la bajada y 42 px el pie,
   para que la consola y la maqueta empiecen y terminen a la misma altura pese a
   que sus textos no miden lo mismo. */
.texto-columna { min-height: 84px; }
/* El pie de cada columna. Es el escalón de 13 px de la escala de cuerpo, así
   que el color y la familia salen de `.texto` y acá queda solo lo propio. */
.texto-nota {
  --texto-tam: 13px;
  min-height: 42px;
}

/* Ventana de terminal de la columna de API (:187). Sin el `overflow: hidden`
   del export, y no cambia nada: ningún hijo tiene fondo propio, así que en las
   esquinas solo pinta el fondo de esta caja, que el `border-radius` ya recorta
   solo. Se deja fuera porque el `<pre>` de adentro es un contenedor de
   desplazamiento —hoy su contenido entra sin desplazarse a 1440, 768 y 390, pero
   si algún día no entrara, Chrome lo haría enfocable con teclado— y recortado le
   comería el anillo de foco. */
/* El hueco en cero es obligatorio, no decorativo: la consola es una pila
   dentro de `.columna-integracion`, que es otra pila, y sin declararlo heredaría
   sus 16 px. */
.consola {
  --pila-hueco: 0px;
  flex: 1 1 auto;
  background: var(--slate-900);
  border: 1px solid var(--slate-900);
  border-radius: 8px;
}
.consola-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--slate-700);
}
/* El `.punto` del panel del hero, un punto más chico y en naranja fijo: acá no
   cambia de estado. */
.punto-consola {
  width: 7px;
  height: 7px;
  background: var(--accent);
}
/* El bloque de código; el nombre lo fija la tabla de la Tarea 9. Calculado
   sobre --slate-900: #E4ECF3 da 12,44:1, #E9A65E 7,13:1 y --ink-tenue 5,71:1. */
.snippet {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.8;
  color: #E4ECF3;
}
.snippet-metodo { color: #E9A65E; }
.snippet-campo { color: var(--ink-tenue); }

.consola-avance {
  --pila-hueco: 16px;
  flex: 1 1 auto;
  padding: 24px;
  border-top: 1px solid var(--slate-700);
}
.consola-rotulo {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-tenue);
}
.consola-lista {
  --pila-hueco: 13px;
  flex: 1 1 auto;
  justify-content: space-between;
}
/* Las ocho filas son las ocho etapas del panel del hero, en el mismo orden y
   con sus mismos tres estados y colores ([5]), pero no reusan `.etapa`:
   aquella trae borde, relleno y otra escala tipográfica. El atributo es
   `data-estado` a secas y no `data-etapa` a propósito: landing.js (Tarea 8)
   busca `[data-etapa]` y exige encontrar exactamente ocho, las del hero. Esta
   maqueta es fija y no la toca nadie. */
.consola-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-tenue);
}
.consola-fila[data-estado="completa"] > :first-child { color: var(--ink-claro); }
.consola-fila[data-estado="completa"] > :last-child  { color: #7FC49E; }
.consola-fila[data-estado="activa"]   > :first-child { color: #FFFFFF; }
.consola-fila[data-estado="activa"]   > :last-child  { color: #E9A65E; }

/* Maqueta del portal (:219).
   AVISO: las cifras, los tiempos, los conteos de conflicto, los meses, los
   largos de barra y las alturas del gráfico NO son los del export. Los del
   export salían de una captura del portal en producción y coincidían uno a uno
   con la operación de un cliente concreto; publicarlos rompía la restricción de
   no publicar cifras que no podamos sostener ni material de cliente. Se
   reemplazaron por valores redondos e inventados. Al comparar esta sección
   contra `Landing Enrolamiento.dc.html` los números van a diferir a propósito:
   no restituirlos.
   Reusa `.tarjeta` —fondo, borde y radio de 8— y le
   suma lo suyo. Acá el `overflow: hidden` sí hace falta: la barra superior es
   oscura y llega hasta el borde, y adentro de la maqueta no hay nada enfocable
   a lo que recortarle el foco. La sombra es un punto más opaca que la de
   `.tarjeta` (0.05 contra 0.04). */
/* PISO TIPOGRÁFICO DE LA MAQUETA: 12 px. Es el otro lugar donde esta sección se
   aparta del export a propósito, además de las cifras.
   El export concentraba acá los 26 textos más chicos de toda la página —seis a
   9 px (los meses del gráfico), veinte a 10 (los rótulos de KPI y las filas de
   los dos paneles)— más seis a 11 y uno a 12. Nada de eso se lee: son fidelidad
   al diseño, no información.
   El piso elegido es 12 px, y no es un número inventado: es el que el resto de
   la página ya respeta —las etiquetas monoespaciadas del panel del hero, el
   contador `n/8`, `.eyebrow-chico`— así que la maqueta deja de ser el peor
   bloque de la página y pasa a estar al nivel del resto en vez de por debajo.
   Subir además ese piso de 12 a 14 sería rediseñar la escala tipográfica entera,
   que no es lo que se pidió acá.
   La maqueta sigue leyéndose como una captura en miniatura porque lo que la hace
   miniatura no es el cuerpo del texto sino la escala de todo lo demás: la barra
   superior de 38 px, las cajas de 6 px de radio, los KPI en cuatro columnas, el
   gráfico de 72 px de alto y el avatar de 52×14. Nada de eso cambia.
   Los dos escalones se mantienen: los títulos de panel y la marca quedan un punto
   por encima del cuerpo (13 contra 12), igual que antes estaban a 11 contra 10. */
.maqueta {
  margin: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05);
  /* La maqueta se adapta a SU ancho, no al de la ventana. No son lo mismo y no
     van en el mismo sentido: es la segunda columna de una grilla que colapsa a
     una sola por debajo de 808 px de ventana, así que la maqueta mide 720 px en
     una ventana de 768 y 436 px en una de 960. Atada a la ventana quedaba al
     revés —colapsada donde sobraba lugar y apretada donde faltaba— y a 768 px
     eso costaba 279 px de alto de más. Ver las consultas de contenedor de más
     abajo. */
  container-type: inline-size;
  container-name: maqueta;
}
/* Las dos envuelven siempre, sin punto de corte de ninguna clase. `flex-wrap:
   wrap` no hace nada mientras el contenido entre en una fila —y entra hasta que
   la maqueta baja de ~514 px, o sea a 1440 px de ventana, donde esta barra sigue
   siendo una sola fila idéntica a la del export— y cuando deja de entrar
   envuelve en vez de que `overflow: hidden` se coma «Soporte» y el avatar. Se
   ajusta sola: es más honesto que cualquier umbral que tuviéramos que elegir.
   El hueco entre filas (8) es más chico que el de columna (16), que es el del
   export: el de fila solo existe cuando hay dos filas. */
.maqueta-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  background: var(--slate-900);
}
.maqueta-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.maqueta-marca {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}
.maqueta-nav {
  font-size: 12px;
  color: var(--ink-tenue);
}
.maqueta-nav-activo { color: var(--ink-claro); }
.maqueta-avatar {
  display: block;
  width: 52px;
  height: 14px;
  border-radius: 3px;
  background: var(--slate-700);
}
.maqueta-cuerpo {
  --pila-hueco: 12px;
  padding: 16px;
  background: var(--surface-muted);
}
/* Las cajas de adentro no son `.tarjeta`: radio de 6 y sin sombra, porque ya
   están sobre una. */
.maqueta-caja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.maqueta-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* Consecuencia del piso tipográfico: a 12 px «Declaración final» ya no entra en
   una línea dentro de una caja de 89 px de contenido —haría falta bajar a 10,6—
   así que envuelve en dos, la caja crece y su cifra quedaba 18 px más abajo que
   las otras tres. Con la caja en columna y `space-between`, el rótulo se apoya
   arriba y la cifra abajo: las cuatro cifras vuelven a alinearse, envuelva el
   rótulo o no. Las cajas ya medían todas lo mismo de alto por ser celdas de la
   misma fila de la grilla. */
.maqueta-kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
}
.maqueta-rotulo {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.maqueta-cifra {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
/* Van después de `.maqueta-cifra` para poder pisarle el color con la misma
   especificidad; sobre las filas ganan por ser hijas. */
.maqueta-ok  { color: var(--ok); }
.maqueta-err { color: var(--err); }
.maqueta-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.maqueta-panel {
  --pila-hueco: 10px;
  padding: 12px;
}
/* El panel de la derecha aprieta el hueco a 8 (:267). Va calificado con las dos
   clases para ganarle a `.maqueta-panel` por especificidad y no por orden. */
.maqueta-panel.maqueta-panel-apretado { --pila-hueco: 8px; }
.maqueta-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.maqueta-medida { --pila-hueco: 4px; }
.maqueta-fila {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-muted);
}
/* Mismo separador claro que las filas de `#problema`: #EDF1F4, que el export
   usa sin token. */
.maqueta-fila-borde {
  border-top: 1px solid #EDF1F4;
  padding-top: 6px;
}
/* #E8ECF0 es el riel de la barra; tampoco tiene token en el export. */
.maqueta-riel {
  height: 6px;
  border-radius: 3px;
  background: #E8ECF0;
}
.maqueta-relleno {
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}
.maqueta-grafico {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  height: 72px;
}
.maqueta-columna {
  background: var(--slate-700);
  border-radius: 2px 2px 0 0;
}
.maqueta-columna-destacada { background: var(--accent); }
.maqueta-meses {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
}
/* Largos de barra y alturas de columna. Van por posición: nueve clases de un
   solo uso, tres barras y seis columnas, no dirían más que esto.
   NO SON los valores del export. Los del export salían de una captura del
   portal en producción y describían la operación de un cliente concreto —igual
   que las cifras del HTML, ver el aviso de `.maqueta`—. Estos son inventados:
   los tres largos son proporcionales a los tiempos ficticios que muestra la
   maqueta (90 d = 60 %, 15 d = 10 %, 40 d = 27 %) y las seis alturas son
   múltiplos de cinco elegidos a mano, con la última destacada porque el diseño
   pinta esa columna en naranja. No restituir los del export. */
.maqueta-medida:nth-child(2) .maqueta-relleno { width: 60%; }
.maqueta-medida:nth-child(3) .maqueta-relleno { width: 10%; }
.maqueta-medida:nth-child(4) .maqueta-relleno { width: 27%; }
.maqueta-grafico > :nth-child(1) { height: 45%; }
.maqueta-grafico > :nth-child(2) { height: 30%; }
.maqueta-grafico > :nth-child(3) { height: 55%; }
.maqueta-grafico > :nth-child(4) { height: 50%; }
.maqueta-grafico > :nth-child(5) { height: 65%; }
.maqueta-grafico > :nth-child(6) { height: 90%; }

/* --- La maqueta, adaptada a su propio ancho --- */
/* Los dos umbrales salen de medir, no de tantear. Todo lo de acá adentro está en
   píxeles de la maqueta, no de la ventana.

   - **KPI, de cuatro columnas a dos por debajo de 480 px.** Con cuatro, cada caja
     ofrece (Wm − 56)/4 − 26 px de texto. La palabra más larga de los cuatro
     rótulos, «Declaración», mide 72,8 px a 12 px de cuerpo: para que no se salga
     de su caja hace falta Wm ≥ 451. El umbral va en 480, que deja 7 px de aire
     sobre esos 72,8, y de paso deja los 516 px que la maqueta tiene a 1440 px de
     ventana del lado de las cuatro columnas: ahí no cambia nada.
   - **El dúo de paneles, de dos columnas a una por debajo de 420 px.** Cada panel
     ofrece (Wm − 40)/2 − 26. El título más largo de los dos, «Empresas en pruebas
     SII», mide 154,9 px: entra mientras Wm ≥ 402. El umbral va en 420 por la
     misma razón, para no quedar al filo.

   Los dos umbrales son más chicos que el ancho que la maqueta tiene a 1440
   (516 px) y más grandes que el que tiene a 960 (436 px), que es exactamente el
   caso que estaba al revés.

   El puente de abajo es para el navegador que no tenga consultas de contenedor
   —Chrome 105, Safari 16 y Firefox 110 en adelante las tienen— y cubre el tramo
   donde la falta se nota, que es el de pantalla chica. Ahí los dos umbrales se
   traducen exactos: por debajo de 640 px de ventana la maqueta mide el ancho de
   la ventana menos los 40 del contenedor, así que 480 px de maqueta son 520 de
   ventana y 420 son 460. Por encima de 640, sin soporte, la maqueta se queda en
   cuatro columnas: apretada, no rota. */
@container maqueta (max-width: 480px) {
  .maqueta-kpis { grid-template-columns: repeat(2, 1fr); }
}
@container maqueta (max-width: 420px) {
  .maqueta-duo { grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 520px) { .maqueta-kpis { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .maqueta-duo { grid-template-columns: 1fr; } }
}

/* Cierre de la sección, separado por una línea (:296). */
.nota-integracion {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
/* El párrafo de cierre es el más ancho de la página (:297). */
.texto-ancho { max-width: 70ch; }

/* --- Sección «Confianza» (Tarea 7) --- */
/* AVISO: esta sección NO reproduce el original. El export tenía una cuarta caja
   de datos con una cifra de servicio que no podemos sostener
   (`Landing Enrolamiento.dc.html:313-316`), un párrafo de apertura que
   describía la infraestructura y sus medidas de seguridad (:309) y un pie que
   nombraba al proveedor de nube (:336-338). Las tres cosas están prohibidas por
   `restricciones.md` y la Tarea 7 las saca. `base-notas.md` lo anota como
   diferencia deliberada: al comparar contra las capturas de la línea base esta
   sección va a diferir a propósito. No restituirlas.

   Acá se dice qué se sacó, nunca con qué palabras: esta hoja se publica sin
   minificar, así que una frase citada en un comentario sigue estando publicada
   igual que si estuviera en el HTML. El bloque 3 de `tools/verificar.sh` busca
   las frases prohibidas en los tres archivos que se sirven, no solo en
   `index.html`, justamente porque este comentario las reproducía.

   El export le da a la sección 112 px de relleno vertical y no los 96 del resto
   (:303). Va como modificador de `.seccion` y no como clase nueva: el fondo, la
   línea de arriba y el ancho ya salen de `.seccion-suave`,
   `.seccion-linea-arriba` y `.contenedor`. Se declara después de `.seccion`, que
   tiene la misma especificidad, así que gana por orden. */
.seccion-holgada { padding: 112px 0; }

/* Encabezado en dos columnas: eyebrow y h2 a la izquierda, párrafo a la
   derecha, los dos apoyados sobre la misma base (:304). No es `.grilla-2`: el
   export usa acá un mínimo de 300 px, un gap de 72 y `align-items: end`. La
   columna izquierda reusa `.encabezado-seccion` tal cual; su gap es de 20 px y
   el del export de 24, cuatro de diferencia entre el eyebrow y el título que no
   justifican una clase propia. */
.grilla-confianza {
  --grilla-hueco: 72px;
  --grilla-alto: end;
}
/* El h2 de esta sección cierra más el interlineado que `.titulo-seccion`
   —1.15 contra 1.2— y se corta a 22ch (:307), como `.titulo-angosto` hace con
   el de `#automatico` a 24ch. */
.titulo-confianza {
  line-height: 1.15;
  max-width: 22ch;
}
/* Medida intermedia entre `.texto-angosto` (41ch) y `.texto-ancho` (70ch): el
   párrafo de esta sección se corta a 48ch (:308). El interlineado de 1.7 sale
   de `.texto-holgado`, que ya existe desde la Tarea 6; este es el quinto y
   último párrafo del export que lo usa, y el único que no va sobre fondo
   oscuro. */
.texto-medio { max-width: 48ch; }

/* La tira de datos. En el export son cuatro cajas en un flex con `gap: 1px`
   sobre fondo --border: el hueco de 1 px es la línea divisoria y cada caja
   repinta el --surface-muted encima. Acá son TRES —la cuarta era la de
   disponibilidad, que sale entera— y el único cambio es la base de cada caja:
   30 % en vez del 45 % del export, que es lo que las pone en tres columnas
   donde antes había cuatro en dos filas.

   Se probó con `grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))` y
   se descartó: cuando `auto-fit` resuelve exactamente dos pistas —entre 490 y
   710 px de ventana— la tercera caja baja a la segunda fila y la celda vacía de
   al lado deja ver el --border del contenedor como un rectángulo gris macizo.
   Verificado a 700 px. El flex del export no tiene celdas, así que al envolver
   la tercera caja se estira sola y el --border sigue apareciendo solo en los
   huecos de 1 px.

   Sin `overflow: hidden`: no hay esquinas que recortar y adentro no hay nada
   enfocable, pero tampoco hace falta arriesgarse a comerse un anillo de foco. */
.tira-datos {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--ink);
}
.dato {
  --pila-hueco: 10px;
  flex: 1 1 30%;
  min-width: 220px;
  padding: 36px;
  background: var(--surface-muted);
}
/* El rótulo de cada caja es el mismo eyebrow chico de las filas de `#problema`
   (:318). El valor va a 20 px en dos de las tres cajas y a 31 px en «Desde
   2015» (:319), que es la que el export destaca. */
.dato-valor {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dato-valor-grande { font-size: 31px; }
/* 14 px, un punto por debajo de `.texto-chico` (:320): es el tercer escalón de
   la escala de cuerpo y no una clase con color propio. Interlineado 1.6, que es
   el del body y no hace falta declarar. Medido por la Tarea 3: --ink-muted
   sobre --surface-muted da 6,39:1. */
.dato-detalle { --texto-tam: 14px; }

/* --- Footer (Tarea 7) --- */
/* Fondo, color heredado y la línea naranja de 4 px van en el propio <footer>
   (:346). Los enlaces de adentro no heredan este color: lo declara
   `.enlace-claro` del catálogo [4]. */
.pie {
  background: var(--slate-900);
  color: var(--ink-claro);
  border-top: 4px solid var(--accent);
}
/* Dos bandas, cada una con su `.contenedor`. Los 24 px laterales los sigue
   poniendo el contenedor y acá va solo el relleno vertical, en longhand, igual
   que en `.hero-interior` y `.cabecera-interior`: un `padding` de cuatro valores
   pisaría el `padding: 0 24px` de `.contenedor`.
   La grilla es la misma de `#problema` con otro mínimo —300 px en vez de 320—,
   que es justo el valor por defecto de `.grilla`: de ahí que acá no haga falta
   declararlo. */
.pie-interior {
  --grilla-hueco: 64px;
  --grilla-alto: start;
  padding-top: 96px;
  padding-bottom: 40px;
}
/* El export le pone `align-self: flex-start` al botón (:349). Acá lo pone el
   contenedor con `align-items`: da el mismo ancho —el <p> ya venía limitado a
   22ch, así que encogerlo a su contenido no lo mueve— y evita tocar
   `.btn-primario`, que se comparte con el hero. */
.pie-llamado {
  --pila-hueco: 28px;
  align-items: flex-start;
}
/* Es un <p> y no un encabezado, como en el export: la página ya cierra su
   jerarquía en `#confianza` y un h2 acá abriría uno que no lleva contenido. */
.pie-titulo {
  font-size: 39px;
  line-height: 1.25;
  font-weight: 600;
  max-width: 22ch;
  color: #FFFFFF;
}
/* El mínimo son 220 px y no los 150 del export: `soporte@enrolamiento.cl` mide
   178 px a 15 px de cuerpo y con 150 la celda podía quedarle más angosta, con la
   última letra cayéndose fuera del fondo oscuro (`base-notas.md`, punto 5). Pasa
   en dos tramos que no se parecen: a 390 px de ventana, donde las dos columnas
   quedaban en 151 px, y también a 900, donde quedan en 177 —uno menos que los 178
   que hacen falta—. Los 220 son ese ancho redondeado hacia arriba, así que las
   dos columnas se mantienen mientras el enlace más largo entre y se apilan justo
   cuando dejaría de entrar. A 1440 no cambia nada: ahí la celda mide 232 px con
   los dos valores. */
.pie-columnas { --grilla-min: 220px; }
/* Los 15 px de los enlaces se heredan de acá y no se repiten en cada <a>: así
   las ocho anclas quedan con `class="enlace-claro"` a secas, que es lo que pide
   el brief. Sin `align-items`, como el export: los enlaces se estiran al ancho
   de la columna. */
.pie-columna {
  --pila-hueco: 14px;
  font-size: 15px;
}
/* Tercer color del eyebrow, junto a `.eyebrow-claro` (#E9A65E) y al
   --accent-ink por defecto: los títulos de columna del footer van en el gris
   secundario (:351, :359). Medido por la Tarea 3: 5,71:1 sobre --slate-900. */
.eyebrow-tenue { color: var(--ink-tenue); }

/* Banda de abajo: logotipo a la izquierda, nota legal a la derecha (:371). */
.pie-legal {
  padding-top: 24px;
  padding-bottom: 48px;
  border-top: 1px solid var(--slate-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
/* El mismo logotipo del header, un punto más chico: cuadrado de 8 px en vez de
   10 y nombre de 16 px en vez de 18 (:373-375). Se reusan `.logo`,
   `.logo-punto`, `.logo-nombre` y `.logo-tld`; lo único que no coincide es el
   `letter-spacing: -0.01em` de `.logo-nombre`, que el footer del export no
   declara y acá hereda. */
.logo-pie .logo-punto { width: 8px; height: 8px; }
.logo-pie .logo-nombre { font-size: 16px; }
/* La nota legal. Comparte el gris secundario con los títulos de columna, que
   antes era un literal escrito dos veces y ahora es --ink-tenue. No entra en la
   escala de `.texto` aunque también mida 14 px: aquella es cuerpo sobre fondo
   claro y va en --ink-muted. */
.pie-nota {
  font-size: 14px;
  color: var(--ink-tenue);
}
/* [8] Mobile
   El export vino de un canvas de escritorio: traía dos media queries en total y
   toda su adaptación colgaba de `flex-wrap`. Esto es lo que falta para que la
   página entre en una pantalla de teléfono.

   Los dos cortes que reparten el grueso de las reglas son 940 y 640. El de 940 es
   el mismo que ya usa la nav en [7]; el de 640 es donde el hero deja de tener dos
   columnas. Hay además un corte que solo toca el `scroll-margin-top` de las
   anclas, 994, y está medido: ver la tabla de acá abajo.

   Tres desvíos del guion de la tarea, los tres por la misma razón: el guion se
   escribió mirando el marcado del export y acá los nombres son otros.

   1. `h1 { font-size: 34px }` no habría hecho nada. El único h1 de la página es
      `.hero-titulo`, y una clase (0,1,0) le gana a un tipo (0,0,1) esté donde
      esté el media query. Va por clase, y con él bajan los otros tres títulos
      grandes que el guion no nombra.
   2. `.grilla-4` no existe en este porteo. Las grillas fluidas son cuatro y ya
      se colapsan solas por `auto-fit`; las de columnas fijas de la maqueta —los
      KPI y el dúo— tampoco están acá: no dependen del ancho de la ventana sino
      del suyo, y se resuelven con consultas de contenedor en [7].
   3. `.cubierta` tampoco está en el guion y es el desborde más grande que tenía
      la página: sus tres pistas suman 620 px y no caben por debajo de 668 px de
      ventana (`base-notas.md`, punto 1). */

/* Lo primero es el destino de los saltos por ancla. El header es pegajoso, así
   que un ancla que aterrice más arriba que su borde inferior deja el encabezado
   de la sección tapado: pasaba a 390 px, donde el header medía 205,8 y el margen
   reservado eran 150 (`base-notas.md`, punto 3). Alturas medidas después de este
   bloque, y son cuatro:

   | Ventana    | Header  | Por qué                                    |
   |------------|---------|--------------------------------------------|
   | ≥ 995      | 83 px   | logotipo, nav y botón en una fila          |
   | 941–994    | 135,8   | la nav y el botón bajan a su propia fila   |
   | ≤ 940      | 107,8   | header de dos filas: logotipo, y nav+botón |

   El corte de 995 es medido, no elegido: ahí el header pasa de 135,8 a 83, que
   es donde entran en una fila los 946,4 px de logotipo, nav y botón más los 48
   del contenedor. Por debajo de 940 la altura es la misma a todos los anchos
   —hasta 320— porque el header de dos filas no vuelve a partirse.

   Cada valor es esa altura más diez y pico de aire. Los dos media queries se
   pisan a propósito: no suman especificidad, así que gana el último que aplica y
   por eso van de mayor a menor. El de 96 px de [2] sigue valiendo desde 995. */
@media (max-width: 994px) { section[id] { scroll-margin-top: 148px; } }

@media (max-width: 940px) {
  section[id] { scroll-margin-top: 120px; }

  .seccion, .seccion-holgada { padding-top: 56px; padding-bottom: 56px; }
  .hero-interior { padding-top: 56px; padding-bottom: 56px; }
  .pie-interior { padding-top: 56px; }

  /* Header en dos filas: logotipo arriba, nav y botón abajo. Antes eran tres
     —la nav se partía en dos— y el header se comía 205,8 de los 844 px del
     viewport, el 30 % (`base-notas.md`, punto 3).
     El `flex-basis: 100%` empuja a `.cabecera-acciones` sola a la segunda fila y
     ahí adentro la nav crece y el botón se queda a la derecha.
     **Sin `order` y sin `display: contents`, a propósito.** La primera versión de
     esto subía el botón a la primera fila, al lado del logotipo, con
     `display: contents` sobre este div y `order` sobre sus dos hijos. Se veía
     mejor —la nav se quedaba con el ancho entero— pero invertía el orden visual
     contra el de tabulación: el botón se dibujaba arriba y se tabulaba después
     de los cinco enlaces, que estaban debajo. Ninguna de las dos formas de
     arreglarlo con `order` sirve, porque el escritorio quiere el botón al final
     de la fila y el móvil lo querría al principio: alguna de las dos pantallas
     iba a quedar con el orden dado vuelta. Se elige la disposición que no
     necesita `order` en ninguna: el marcado, lo que se ve y lo que recorre el
     teclado dicen lo mismo a todos los anchos.
     Lo que cuesta: la nav visible pasa de todo el ancho a lo que sobra al lado
     del botón —192,2 px a 390 y 122,2 a 320, medido—. Sigue deslizándose con el
     dedo y landing.js le trae a la vista el enlace que recibe el foco, así que se
     puede recorrer entera con teclado. A cambio el header queda en 107,8 px
     **a todos los anchos de este tramo**, hasta 320: contra los 121 de la versión
     con `order` y los 161,8 que hacía por debajo de 376, donde el botón dejaba de
     entrar al lado del logotipo. Y el header es pegajoso, así que esa altura se
     paga en cada posición de scroll: 12,8 % de una pantalla de 844 px contra el
     19 % que costaría la otra disposición sin `order` —logotipo, nav y botón en
     tres filas— que sí conservaba la nav entera. */
  /* Relleno y hueco más chicos que los 20/24 del escritorio. */
  .cabecera-interior {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px 20px;
  }
  .cabecera-acciones {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 20px;
  }
  /* La nav absorbe todo lo que falte de ancho; el botón no se encoge. Sin esto
     los dos se achicaban a la vez y el rótulo del botón partía en dos líneas:
     88,2 px de ancho y 66 de alto a 320 px de ventana. */
  .btn-header { flex: 0 0 auto; }
  .nav-principal {
    flex: 1 1 auto;
    gap: 20px;
  }
  /* La barra de desplazamiento de la nav se oculta: aparece y desaparece sobre
     los rótulos y el gesto táctil no la necesita. El deslizamiento sigue ahí. */
  .nav-principal { scrollbar-width: none; }
  .nav-principal::-webkit-scrollbar { display: none; }

  /* Los tres pasos de `#como-funciona`, de tres columnas a dos. Se declara la
     propiedad y no `--grilla-min` a propósito: con dos pistas fijas el tercer
     paso baja a la segunda fila y ocupa la mitad, que es lo que pide el guion.
     Le gana al valor de la primitiva por orden, que acá es lo esperable: un
     media query no suma especificidad y este bloque es, por definición, el
     último del archivo. */
  .grilla-3 { grid-template-columns: repeat(2, 1fr); }

  /* Las cuatro filas de `#automatico`: número a la izquierda, título y texto
     apilados a la derecha. La tercera pista del export pedía 280 px que acá no
     existen. El `grid-column` del párrafo es obligatorio: sin él la colocación
     automática lo mandaría a la primera columna de la segunda fila, debajo del
     número. */
  .cubierta {
    grid-template-columns: 72px 1fr;
    gap: 16px 24px;
  }
  .cubierta > .texto { grid-column: 2; }
}

@media (max-width: 640px) {
  /* Los 24 px laterales bajan a 20. Va en longhand y no como el `padding: 0 20px`
     del guion: el shorthand pone también `padding-top: 0` y `padding-bottom: 0`, y
     con la misma especificidad y estando más abajo en el archivo le habría
     borrado el relleno vertical a los cuatro contenedores que lo declaran en
     longhand —header, hero, pie y banda legal—. Medido antes de corregirlo: el
     header perdía sus 20 px de arriba y el logotipo quedaba pegado al borde. Es
     la misma trampa que ya avisaba `.pie-interior`, al revés. */
  .contenedor { padding-left: 20px; padding-right: 20px; }

  .hero-titulo { font-size: 34px; line-height: 1.2; }
  .hero-bajada { font-size: 18px; }
  .titulo-seccion, .pie-titulo { font-size: 26px; }
  .titulo-paso, .titulo-columna { font-size: 22px; }

  /* Los dos CTA a todo el ancho. El del header no: sigue siendo un botón chico
     al lado del logotipo. */
  .btn-primario, .btn-hero-secundario {
    display: block;
    width: 100%;
    text-align: center;
  }

  .grilla-2, .grilla-3 { grid-template-columns: 1fr; }

  /* Acá el número de `.cubierta` pasa a estar arriba: con dos columnas el texto
     se quedaba con 184 px a 320 px de ventana. */
  /* El margen negativo devuelve el relleno lateral del contenedor, así que tiene
     que seguirlo: con -24 px contra un contenedor de 20 la fila se salía 4 px por
     cada lado y el documento entero desbordaba (medido: 324 de ancho en una
     ventana de 320). */
  .cubierta {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 -20px;
    padding: 28px 20px;
  }
  .cubierta > .texto { grid-column: auto; }

}