/* Sitio público de VETTRA — www.vettra.cl
 *
 * Todo el color sale de assets/tokens.css, que es una copia exacta de
 * motor_clinico/static/tokens.css (única diferencia: la ruta de las fuentes).
 * No se declara ningún hex acá: si un color falta, se agrega allá, donde
 * test_marca_contraste.py lo vigila contra la guía de marca.
 *
 * Regla de la guía v3.0 que condiciona el diseño: el logo a color va SOLO sobre
 * blanco o hueso. Por eso la cabecera y el pie son claros, y ninguna de las
 * tres bandas oscuras de la portada lleva marca encima. Ver «Superficies
 * oscuras»: la alternancia claro/oscuro significa algo, no es un patrón.
 */

/* ---- Sistema tipográfico del sitio (decisión del owner, 2026-08-31) ----
 *
 * El sitio deja Inter. El motivo lo dio el owner y es correcto: Inter es la
 * tipografía por defecto de la web generada con IA, y un sitio que quiere
 * distinguirse no puede vestirse con el uniforme. Procedencia, hashes y
 * licencias OFL verbatim: sitio/fuentes/PROCEDENCIA.md.
 *
 * - **Fraunces** (serif variable) para h1/h2: el mensaje humano —«más
 *   medicina»— en una voz cálida con carácter, sobre la precisión del resto.
 * - **IBM Plex Sans** como cuerpo: se une a la Plex Mono que ya era la voz de
 *   sistema del proyecto; el par queda de la misma fundición.
 * - Space Grotesk (h3, UI) e IBM Plex Mono siguen siendo las del sistema D2.
 *
 * Alcance: SOLO el sitio. La PWA sigue con el sistema D2 completo; llevarlo a
 * la app sería una revisión de D2, no un cambio de CSS. Por eso las
 * redefiniciones viven acá y no en tokens.css, que es copia exacta del de la
 * app: este archivo se carga después y sus :root ganan.
 */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/FrauncesVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSansVariable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --vt-fuente-titular: "Fraunces", Georgia, "Times New Roman", serif;
  --vt-fuente-cuerpo: "IBM Plex Sans", Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

/* `display` de una clase le gana al atributo `hidden` del navegador.
 * Ya pasó una vez en la PWA: la vista de login aparecía junto a la app. */
[hidden] { display: none !important; }

/* Huérfanas: una última palabra sola en su línea se lee como un error de
 * maquetación. `pretty` lo evita sin tocar el texto y el navegador que no lo
 * soporta simplemente ajusta como siempre. En los titulares ya actúa
 * `text-wrap: balance`, que reparte las líneas en vez de perseguir la última. */
p, li, dd, figcaption { text-wrap: pretty; }

/* Los saltos de ancla tienen que dejar el destino DEBAJO de la cabecera fija.
 * Sin esto, `#borrador` aterriza con su titular tapado y parece que el enlace
 * llevo al lugar equivocado. El valor cubre la cabecera compacta, que es la
 * que hay despues de cualquier salto (scrollY > 0). */
html { scroll-padding-top: calc(var(--vt-e20) + var(--vt-e10)); }

body {
  margin: 0;
  background: var(--vt-superficie-lienzo);
  color: var(--vt-texto-principal);
  font-family: var(--vt-fuente-cuerpo);
  font-size: var(--vt-texto-base);
  line-height: var(--vt-interlinea-cuerpo);
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--vt-verde-clinico); }
a:hover { color: var(--vt-petroleo-profundo); }

:focus-visible {
  outline: 3px solid var(--vt-petroleo-profundo);
  outline-offset: 2px;
  border-radius: var(--vt-radio-sm);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: var(--vt-e2);
  background: var(--vt-superficie-elevada);
  padding: var(--vt-e3) var(--vt-e5);
  border-radius: var(--vt-radio-pill);
  z-index: 10;
}
.saltar:focus { left: var(--vt-e4); }

.franja {
  max-width: var(--vt-ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--vt-e5);
}
.franja.estrecho { max-width: 780px; }

/* ---- Tipografía ---- */

h1, h2, h3 {
  font-family: var(--vt-fuente-display);
  line-height: var(--vt-interlinea-ajustada);
  letter-spacing: -0.015em;
  margin: 0 0 var(--vt-e4);
}
/* La escala salta de verdad entre niveles. Estaba en 62/42/22 px, que en una
 * pantalla ancha se lee como un documento bien maquetado y no como una portada:
 * los tres tamaños quedaban lo bastante cerca como para que el ojo no
 * distinguiera jerarquía de un vistazo, sólo leyéndolos.
 *
 * `interlinea-ajustada` (1.08) es de los tokens y sirve a 62 px; a 92 abre
 * demasiado, así que el h1 lleva la suya. Space Grotesk aguanta el tracking
 * negativo a ese cuerpo — es una display, está dibujada para eso. */
/* h1/h2 en Fraunces: el tracking apretado de una grotesca NO se traslada a una
 * serif —le rompe las serifas—, así que acá afloja a -0.01em. El peso baja de
 * 750 a 600: Fraunces a 124 px y 750 se vuelve mancha. `font-optical-sizing:
 * auto` deja que la variable elija su corte de display en cuerpos grandes. */
h1, h2 {
  font-family: var(--vt-fuente-titular);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(44px, 8vw, 108px);
  line-height: 1.0;
}
h2 { font-size: clamp(30px, 4.6vw, 54px); }
h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: var(--vt-peso-semi); }

/* Los tres verbos del hero, uno por línea, el último en menta. Es el ciclo
 * completo del producto en seis sílabas — y las dos puntas son del
 * veterinario: la máquina solo existe entre «Dictas» y «Revisas». */
.hero-verbos span { display: block; }
.hero-verbos .acento { color: var(--vt-menta-clara); }
p { margin: 0 0 var(--vt-e4); }

.eyebrow {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-sm);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-texto-tenue-aa);
  margin-bottom: var(--vt-e4);
}

.lead {
  font-size: var(--vt-texto-lead);
  color: var(--vt-texto-secundario);
  max-width: 58ch;
}

.bajada {
  color: var(--vt-texto-secundario);
  max-width: 62ch;
  margin-bottom: var(--vt-e10);
}

/* Nota al margen de un bloque. Se llamaba `.hero-nota`, pero el único lugar
 * donde quedó en uso es la página 404, que no tiene hero: el nombre describía
 * dónde nació, no qué hace. */
.nota-lateral {
  margin-top: var(--vt-e8);
  padding-left: var(--vt-e4);
  border-left: 2px solid var(--vt-menta-clara);
  color: var(--vt-texto-secundario);
  font-size: var(--vt-texto-sm);
  max-width: 46ch;
}

/* ---- Botones ---- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vt-objetivo-tactil);
  padding: var(--vt-e3) var(--vt-e6);
  border-radius: var(--vt-radio-pill);
  font-weight: var(--vt-peso-semi);
  text-decoration: none;
  transition: background var(--vt-mov-rapido) var(--vt-mov-easing),
              color var(--vt-mov-rapido) var(--vt-mov-easing);
}
.boton-primario {
  background: var(--vt-petroleo-profundo);
  color: var(--vt-texto-inverso);
}
.boton-primario:hover {
  background: var(--vt-petroleo-oscuro);
  color: var(--vt-texto-inverso);
}
.boton-secundario {
  background: transparent;
  color: var(--vt-petroleo-profundo);
  box-shadow: inset 0 0 0 1.5px var(--vt-borde-control);
}
.boton-secundario:hover {
  background: var(--vt-superficie-sutil);
  color: var(--vt-petroleo-profundo);
}
.boton-texto {
  padding-inline: var(--vt-e2);
  color: var(--vt-verde-clinico);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-e3);
  margin-top: var(--vt-e8);
}

/* ---- Cabecera ---- */

/* La cabecera ya era fija; acá sólo sube su z-index por encima de las nuevas
 * capas y se deja **opaca** a propósito.
 *
 * El intento de hacerla translúcida con `backdrop-filter` —que es lo que se
 * estila hoy— está mal en este sitio: al pasar la banda oscura por debajo, el
 * logo a color quedaría sobre un fondo oscurecido, y la guía v3.0 §6 sólo
 * autoriza blanco o hueso bajo el logo. Lo cazó
 * `test_el_logo_a_color_no_se_pone_sobre_una_superficie_no_autorizada`. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--vt-superficie-elevada);
  border-bottom: 1px solid var(--vt-borde);
}
/* La cabecera se compacta al bajar.
 *
 * Con el logo al minimo que exige la guia (320 px) la cabecera mide 177 px:
 * el 20 % de la pantalla, ocupado de forma permanente por estar fija. Eso no
 * se lee como moderno, se lee como pesado.
 *
 * La solucion no es achicar el logo —volveria a perderse el slogan— sino
 * mostrarlo entero al llegar y compactarlo mientras se navega: para entonces
 * ya se leyo. La clase la pone `mejoras.js`; sin JavaScript la cabecera se
 * queda grande, que es correcto aunque ocupe mas. */
.cabecera .franja, .marca img {
  transition: padding var(--vt-mov-lento) var(--vt-mov-easing),
              width var(--vt-mov-lento) var(--vt-mov-easing);
}
.cabecera.compacta .franja { padding-block: var(--vt-e2); }
.cabecera.compacta .marca img { width: 168px; }

/* En un telefono la cabecera envuelve en tres filas y mide 256 px: casi un
 * tercio de la pantalla. Fija, eso se come el contenido en vez de ayudar a
 * navegarlo. Se suelta por debajo de 720 px y se recupera el ancla completa. */
@media (max-width: 719px) {
  .cabecera { position: static; }
  html { scroll-padding-top: var(--vt-e6); }
}
.cabecera .franja {
  display: flex;
  align-items: center;
  gap: var(--vt-e3) var(--vt-e5);
  flex-wrap: wrap;
  padding-block: var(--vt-e3);
}
/* En angosto: logo y «Entrar» en la primera fila, menú completo en la segunda.
 * Con el menú en medio, la cabecera se comía cuatro filas en un teléfono. */
.marca { display: inline-flex; line-height: 0; margin-right: auto; }
/* La guía v3.0 §6 fija 320 px como mínimo para la marca principal con slogan.
 * Estaba a 132: menos de la mitad, y el slogan no se leía.
 *
 * Se cumple el mínimo también en teléfono. Un intento anterior lo capaba en
 * 260 px «para no empujar la navegación fuera de pantalla», y era un miedo sin
 * fundamento: la franja de la cabecera envuelve, así que el menú baja solo a
 * la fila siguiente. Con `padding-inline` de 20 px por lado quedan 350 px
 * útiles en una pantalla de 390, y 320 caben.
 *
 * El `calc` es la red para pantallas más angostas que 360 px, donde el mínimo
 * ya no cabe y encoger es mejor que desbordar. */
.marca img { width: min(320px, calc(100vw - var(--vt-e10))); height: auto; }

.nav {
  display: flex;
  gap: var(--vt-e2);
  flex-wrap: wrap;
  order: 3;
  width: 100%;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--vt-objetivo-tactil);
  padding: 0 var(--vt-e3);
  border-radius: var(--vt-radio-sm);
  color: var(--vt-texto-secundario);
  text-decoration: none;
  font-weight: var(--vt-peso-medio);
}
.nav a:hover { background: var(--vt-superficie-sutil); color: var(--vt-petroleo-profundo); }
.nav a[aria-current="page"] {
  color: var(--vt-petroleo-profundo);
  font-weight: var(--vt-peso-semi);
  box-shadow: inset 0 -2px 0 var(--vt-jade-medio);
  border-radius: 0;
}

/* ---- Hero ----
 *
 * Una sola idea por pantalla. Antes el hero cargaba título, bajada, dos
 * botones, una nota de piloto y el panel de demostración a dos columnas: seis
 * cosas compitiendo en la primera pantalla, y la pieza que mejor explica el
 * producto —el borrador con su PENDIENTE_CONFIRMAR— apretada en una esquina.
 * Ahora el panel tiene su propia sección con aire y el hero se queda con el
 * titular, la promesa y una acción.
 */

.hero { padding-block: var(--vt-e20) var(--vt-e16); }
.hero-grid { display: grid; gap: var(--vt-e12); }
.hero-texto { max-width: 46rem; }

/* El riel de hechos: no son argumentos de venta, son las tres condiciones bajo
 * las que el producto opera hoy. Estaban más abajo en la página o en la nota
 * de piloto; acá sostienen el ancho del hero sin inventar una promesa nueva. */
/* Los tres hechos, como panel de instrumento y no como lista de definiciones.
 *
 * Es el mismo contenido —las tres condiciones bajo las que el producto opera
 * hoy— pero leído de otra forma: separadores verticales finos, rótulo
 * monoespaciado en menta y un punto de estado delante. Un `<dl>` con tres
 * bloques sueltos se salta; una fila de celdas con divisiones se recorre.
 *
 * El verde clínico del rótulo se cambió por menta a la fuerza: sobre petróleo
 * rendía 2,80:1 y no llega a texto legible. La menta da 8,96:1.
 */
.hero-hechos {
  margin: var(--vt-e16) 0 0;
  border-top: 1px solid var(--vt-jade-medio);
  display: grid;
  gap: 0;
}
.hero-hechos > div { padding: var(--vt-e6) 0; }
.hero-hechos dt {
  display: flex;
  align-items: center;
  gap: var(--vt-e2);
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-menta-clara);
  margin-bottom: var(--vt-e3);
}
.hero-hechos dt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vt-jade-medio);
  flex: none;
}
.hero-hechos dd {
  margin: 0;
  max-width: 34ch;
  font-size: var(--vt-texto-sm);
  color: var(--vt-menta-clara);
  opacity: 0.85;
}

/* ---- Huecos de fotografía ----
 *
 * Las clases están escritas; falta el archivo. Para colgar una foto: dejarla
 * en `sitio/imagenes/`, listarla en `IMAGENES` dentro de `construir_sitio.py`
 * y usar el marcado que documenta `sitio/README.md`.
 *
 * `width` y `height` en la etiqueta no son opcionales: sin ellos el navegador
 * no reserva el espacio y la página salta cuando la imagen llega, que se lee
 * como un error del sitio. El test los exige.
 */
.foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--vt-radio-lg);
  background: var(--vt-superficie-sutil);
}
/* Una captura de pantalla no es una fotografía: lleva texto chico que hay que
 * poder leer. Borde y sombra para que se lea como una ventana; nada de
 * recortes redondeados grandes que se coman la barra superior de la app. */
.foto-pantalla {
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-md);
  box-shadow: 0 18px 40px -28px var(--vt-petroleo-oscuro);
  background: var(--vt-superficie-elevada);
}
.hero-figura, .figura-seccion { margin: 0; }
/* En un telefono, la captura de escritorio queda como una mancha ilegible: el
 * hero muestra la version movil, que a ese ancho si se lee. Es <picture>, no
 * JavaScript, asi que el navegador elige antes de descargar y no baja las dos. */
.hero-figura picture img { margin-inline: auto; }
@media (max-width: 719px) {
  .hero-figura picture img { max-width: 330px; }
}
.figura-seccion { margin-top: var(--vt-e12); }
.hero-figura figcaption, .figura-seccion figcaption {
  margin-top: var(--vt-e3);
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-tenue-aa);
}

/* ---- El panel de demostración: la pieza que carga la página ----
 *
 * `.seccion-borrador` es la primera banda oscura (ver «Superficies oscuras»).
 * Era blanca, y era la decisión equivocada: acá se muestra exactamente lo que
 * hace el motor —el dictado crudo, el mismo dictado tachado, el borrador con
 * sus pendientes—, o sea el único lugar de la página donde el lector está
 * mirando trabajar a la máquina. En oscuro el texto monoespaciado se lee como
 * lo que es, un registro, y no como una cita decorativa.
 */

.demo {
  margin: 0;
  background: var(--vt-petroleo-profundo);
  border: 1px solid var(--vt-jade-medio);
  border-radius: var(--vt-radio-lg);
  padding: var(--vt-e6);
}
.demo-grid { display: grid; gap: var(--vt-e6); align-items: stretch; }
.demo-lado { display: flex; flex-direction: column; }
/* La separación entre el dictado y el borrador es el asunto de la figura:
 * son dos momentos del mismo caso, no dos columnas cualesquiera. */
.demo-lado + .demo-lado {
  padding-top: var(--vt-e6);
  border-top: 1px solid var(--vt-borde);
}
.demo-rotulo {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-petroleo-profundo);
  margin-bottom: var(--vt-e3);
}
.demo-dictado {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  line-height: 1.75;
  color: var(--vt-texto-secundario);
  background: var(--vt-superficie-sutil);
  border-radius: var(--vt-radio-md);
  padding: var(--vt-e4);
  margin: 0;
  flex: 1;
}
.demo-secciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vt-e3); }
.demo-secciones li {
  border-left: 3px solid var(--vt-jade-medio);
  padding: var(--vt-e2) 0 var(--vt-e2) var(--vt-e4);
}
.demo-secciones li.pendiente { border-left-color: var(--vt-estado-advertencia); }
.demo-seccion {
  font-weight: var(--vt-peso-semi);
  font-size: var(--vt-texto-sm);
  margin: 0 0 2px;
}
.demo-hallazgo { font-size: var(--vt-texto-sm); color: var(--vt-texto-secundario); margin: 0; }
.demo-motivo {
  font-size: var(--vt-texto-xs);
  color: var(--vt-estado-advertencia);
  margin: var(--vt-e1) 0 0;
}
.centinela {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.04em;
  color: var(--vt-estado-advertencia);
}
.demo-pie {
  margin: var(--vt-e6) 0 0;
  padding-top: var(--vt-e4);
  border-top: 1px solid var(--vt-borde);
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-secundario);
}

/* ---- Fotografía de apoyo ----
 *
 * Las escenas de clínica se publican con la pantalla del ecógrafo desenfocada
 * (`sitio/preparar_fotos.py`): el original generado trae una ecografía
 * inventada, y la portada no puede ilustrar «acá no se rellena por
 * plausibilidad clínica» con contenido clínico fabricado.
 */

/* Alineados por arriba, no centrados.
 *
 * Con `center`, una foto de 366 px junto a un titular de 107 deja al texto
 * flotando en el medio, con hueco arriba y abajo: se lee como si la imagen
 * estuviera mal puesta en el plano. Compartiendo la linea superior, las dos
 * columnas empiezan juntas y la altura de mas de la foto se lee como
 * composicion y no como error. */
.encabezado-con-foto { display: grid; gap: var(--vt-e8); align-items: start; }
/* El aire de abajo tiene que igualar al relleno superior de la seccion.
 *
 * Sin esto, la fila la marca la altura de la foto y lo que sigue —los botones
 * del recorrido— arranca pegado a su borde inferior: 65 px de aire arriba y 0
 * abajo. La foto no queda centrada entre el borde de la seccion y los botones,
 * queda apoyada sobre ellos. */
.seccion-borrador .encabezado-con-foto { margin-bottom: var(--vt-e16); }
.bajada-junta { margin-bottom: 0; }
.figura-lado { margin: 0; }
/* Una foto vertical a ancho de columna se vuelve una torre que empuja
 * todo lo demás hacia abajo. Acotada, acompaña en vez de dominar. */
.figura-alta .foto { max-width: 420px; margin-inline: auto; }
.figura-lado .foto { border-radius: var(--vt-radio-lg); }
.figura-seccion .foto { border-radius: var(--vt-radio-lg); }

.seccion-cierre .franja.cierre { display: grid; gap: var(--vt-e10); align-items: center; }
.seccion-cierre .figura-lado .foto { border-radius: var(--vt-radio-lg); }

/* ---- El recorrido de un caso ----
 *
 * Progressive enhancement de verdad: el HTML trae los cuatro pasos completos y
 * uno debajo del otro, y `recorrido.js` marca `<html class="con-recorrido">`
 * antes de convertirlos en pestañas. Los estilos de «una a la vez» cuelgan de
 * esa clase, así que si el script no corre la sección queda entera y legible en
 * vez de vacía. El prototipo que motivó esta sección falla justo ahí.
 */

.recorrido {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--vt-e10);
}
.paso {
  background: var(--vt-superficie-lienzo);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-lg);
  padding: var(--vt-e6);
}
.paso-num {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-verde-clinico);
  margin-bottom: var(--vt-e3);
}
.paso h3 { margin-bottom: var(--vt-e2); }
.paso-que { color: var(--vt-texto-secundario); max-width: 68ch; }
.paso-texto {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  line-height: 1.85;
  color: var(--vt-texto-secundario);
  background: var(--vt-superficie-elevada);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-md);
  padding: var(--vt-e5);
  margin: 0;
}
/* Cada marca se resalta para que la sustitución se vea, no haya que buscarla.
 * El ámbar es el mismo de PENDIENTE_CONFIRMAR: en los dos casos significa «acá
 * el sistema no completó por su cuenta». */
.marca-min {
  color: var(--vt-estado-advertencia);
  font-weight: var(--vt-peso-semi);
  background: var(--vt-superficie-sutil);
  border-radius: var(--vt-radio-sm);
  padding: 1px 4px;
}
.paso-pie {
  margin: var(--vt-e5) 0 0;
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-secundario);
  max-width: 74ch;
}
.paso .demo-secciones { margin-top: var(--vt-e4); }

/* La versión navegable. Todo lo de acá abajo depende de que el script corriera. */
.con-recorrido .recorrido { gap: 0; }
.con-recorrido .paso { border-radius: 0 0 var(--vt-radio-lg) var(--vt-radio-lg); }

.recorrido-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vt-e2);
  margin-bottom: var(--vt-e5);
}
.recorrido-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-e2);
  min-height: var(--vt-objetivo-tactil);
  padding: var(--vt-e2) var(--vt-e5);
  border: 1px solid var(--vt-borde-control);
  border-radius: var(--vt-radio-pill);
  background: transparent;
  color: var(--vt-texto-secundario);
  font-family: inherit;
  font-size: var(--vt-texto-sm);
  font-weight: var(--vt-peso-medio);
  cursor: pointer;
  transition: background var(--vt-mov-rapido) var(--vt-mov-easing),
              color var(--vt-mov-rapido) var(--vt-mov-easing);
}
.recorrido-chip:hover { background: var(--vt-superficie-sutil); }
.recorrido-chip.es-actual {
  background: var(--vt-petroleo-profundo);
  border-color: var(--vt-petroleo-profundo);
  color: var(--vt-texto-inverso);
  font-weight: var(--vt-peso-semi);
}
.recorrido-chip-num {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  /* 0.85, no 0.75. La opacidad no es decoración inocente: mezcla el texto con
   * su fondo y baja el contraste REAL. A 0.75 el numeral del chip inactivo
   * rendía 4,52:1 contra un umbral de 4,5 — un margen de dos centésimas, o sea
   * aprobado por casualidad. A 0.85 el numeral sigue leyéndose como secundario
   * y el margen es de verdad. Medido en el navegador, no calculado sobre el
   * color del token: `test_marca_contraste` mira pares de tokens y no ve lo
   * que la opacidad les hace encima. */
  opacity: 0.85;
}
.recorrido-pie { display: flex; flex-wrap: wrap; gap: var(--vt-e3); margin-top: var(--vt-e6); }
.recorrido-mover { border: 0; font-family: inherit; font-size: var(--vt-texto-base); cursor: pointer; }
.recorrido-mover[disabled] { opacity: 0.45; cursor: default; }

/* El recorrido sobre fondo oscuro.
 *
 * Dos profundidades: la tarjeta del paso se aclara un punto (petróleo profundo)
 * y el texto del dictado se hunde (petróleo oscuro). Así el registro se lee como
 * algo incrustado en la tarjeta y no como otro párrafo.
 *
 * OJO CON EL ÁMBAR. En claro, una marca de sustitución va en ámbar
 * (`--vt-estado-advertencia`), que es un color elegido para contrastar sobre
 * hueso y que sobre petróleo rinde 2,25:1 — ni cerca de 4.5. Y no hay ámbar
 * claro en la paleta: la guía v3.0 §3.1 son seis colores, y los tres usables
 * como texto sobre oscuro son blanco y menta (jade está prohibido como texto).
 *
 * Así que acá la marca deja de ser texto de color y pasa a ser un BLOQUE
 * relleno: menta de fondo, petróleo encima. No es un rodeo por falta de color —
 * es lo que una supresión parece de verdad, un rectángulo que tapa. El par
 * menta sobre petróleo oscuro es el mismo del botón primario invertido, ya
 * verificado. El ámbar se conserva intacto donde sigue siendo legible.
 *
 * DÓNDE VIVE ESTO, que cambió y es lo que importa: la sección es CLARA y la
 * tarjeta del paso es oscura. Un primer intento puso la sección entera en
 * oscuro, y el resultado fue peor que el punto de partida: pegada al hero —que
 * también abre oscuro— daba mil cuatrocientos píxeles de oscuro sin corte, o sea
 * un muro. La consola sobre superficie clara conserva el sentido (acá trabaja la
 * máquina) y además CONTRASTA, que era todo el objetivo.
 *
 * Consecuencia: la tarjeta no puede apoyarse en `.superficie-oscura` para
 * invertir su texto, porque su sección ya no la tiene. Invierte lo suyo.
 * Los chips de navegación quedan fuera de la tarjeta, sobre el fondo claro, y
 * por eso conservan su estilo claro original.
 */
.paso {
  background: var(--vt-petroleo-profundo);
  border-color: var(--vt-jade-medio);
  color: var(--vt-menta-clara);
}
.paso h3 { color: var(--vt-texto-inverso); }
.paso strong { color: var(--vt-texto-inverso); }
.paso em { color: var(--vt-texto-inverso); font-style: normal; font-weight: var(--vt-peso-semi); }
.paso-num { color: var(--vt-menta-clara); }
.paso-que, .paso-pie { color: var(--vt-menta-clara); }
.paso-texto {
  background: var(--vt-superficie-inversa);
  border-color: var(--vt-jade-medio);
  color: var(--vt-menta-clara);
}
.paso .marca-min {
  background: var(--vt-menta-clara);
  color: var(--vt-petroleo-oscuro);
  font-weight: var(--vt-peso-fuerte);
}
.paso .centinela { color: var(--vt-menta-clara); }
.paso .demo-seccion { color: var(--vt-texto-inverso); }
.paso .demo-hallazgo { color: var(--vt-menta-clara); }
.paso .demo-secciones li.pendiente { border-left-color: var(--vt-menta-clara); }
.paso .demo-motivo { color: var(--vt-menta-clara); }
.paso :focus-visible { outline-color: var(--vt-borde-foco); }
.superficie-oscura .figura-lado .foto { border-radius: var(--vt-radio-lg); }

/* ---- Dónde vive cada pieza ----
 *
 * Sin cifras de ahorro de tiempo: la columna izquierda dice dónde queda cada
 * cosa hoy, no cuánto se tarda. El piloto todavía no midió el tiempo, y hay una
 * prueba que impide publicarlo.
 */

.flujo { display: grid; gap: var(--vt-e8); }
.flujo-lado {
  padding: var(--vt-e6);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-lg);
  background: var(--vt-superficie-lienzo);
}
.flujo-lado-junto {
  background: var(--vt-superficie-elevada);
  border-color: var(--vt-jade-medio);
}
.flujo-rotulo {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-texto-tenue-aa);
  margin-bottom: var(--vt-e5);
}
.flujo-lado-junto .flujo-rotulo { color: var(--vt-verde-clinico); }
.flujo-lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vt-e4); }
.flujo-lado li { color: var(--vt-texto-secundario); padding-left: var(--vt-e5); border-left: 2px solid var(--vt-borde); }
.flujo-lado-junto li { border-left-color: var(--vt-menta-clara); }
.flujo-lado strong { color: var(--vt-petroleo-profundo); }
/* La imagen cierra cada tarjeta.
 *
 * Sin proporcion forzada: el primer intento las igualaba a 3:2 con
 * `object-fit: cover`, y eso recortaba la captura de la app -- se comia la
 * barra lateral y el borde derecho. Una fotografia se puede recortar; una
 * captura de interfaz no, porque lo recortado es informacion. La diferencia de
 * alto entre las dos es del 11 % y las tarjetas igualan altura solas, porque
 * la rejilla las estira. */
.flujo-foto {
  margin-top: var(--vt-e6);
  border-radius: var(--vt-radio-md);
}
.flujo-pie {
  margin: var(--vt-e8) 0 0;
  color: var(--vt-texto-secundario);
  max-width: 70ch;
}

/* ---- Por dentro: las pantallas reales ----
 *
 * La sección existe porque el argumento del sitio es que el producto está
 * hecho. Un mockup dibujado a mano se despega del producto el día que el
 * producto cambia; estas capturas las regenera `sitio/capturar_app.py`.
 * El escritorio manda y el teléfono acompaña, en esa proporción, porque es
 * donde se hace la revisión.
 */

.seccion-dentro { background: var(--vt-superficie-lienzo); }
/* Centrado y con el telefono acotado: la captura de escritorio es apaisada y
 * la del telefono es alta, asi que alineadas arriba dejan un hueco de 300 px
 * bajo el primer pie que se lee como contenido faltante. */
.pantallas { display: grid; gap: var(--vt-e10); align-items: center; }
.pantallas figure { margin: 0; }
.pantallas figure:last-child img { max-width: 330px; margin-inline: auto; }
.pantallas figcaption {
  margin-top: var(--vt-e4);
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-secundario);
  max-width: 52ch;
}
.pantallas figcaption strong { color: var(--vt-petroleo-profundo); }
.pie-pantallas {
  margin: var(--vt-e10) 0 0;
  padding-top: var(--vt-e6);
  border-top: 1px solid var(--vt-borde);
  color: var(--vt-texto-secundario);
  max-width: 76ch;
}

/* ---- La puerta de aprobación ----
 *
 * Segunda banda oscura del sitio, y por eso no lleva logotipo encima: la guía
 * v3.0 §6 autoriza el logo a color sólo sobre blanco o hueso. Es la sección
 * que dice lo único que un competidor no puede copiar sin construirlo.
 */

.seccion-puerta h2 { max-width: 20ch; }
.eyebrow-inverso { color: var(--vt-menta-clara); }
.lead-inverso { max-width: 62ch; }
.centinela-inverso { color: var(--vt-menta-clara); }

.puerta {
  list-style: none;
  counter-reset: puerta;
  margin: var(--vt-e12) 0 0;
  padding: 0;
  display: grid;
  gap: var(--vt-e8);
}
.puerta li {
  counter-increment: puerta;
  padding-top: var(--vt-e5);
  border-top: 1px solid var(--vt-petroleo-profundo);
}
.puerta li::before {
  content: counter(puerta, decimal-leading-zero);
  display: block;
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-sm);
  font-weight: var(--vt-peso-semi);
  color: var(--vt-menta-clara);
  margin-bottom: var(--vt-e3);
}
.puerta h3 { color: var(--vt-texto-inverso); margin-bottom: var(--vt-e2); }
.puerta p { color: var(--vt-menta-clara); margin: 0; }

/* ---- Superficies oscuras: el ritmo de la página ----
 *
 * La página alterna claro y oscuro, y la alternancia SIGNIFICA algo: las bandas
 * oscuras son donde trabaja la máquina —el recorrido del dictado, la puerta de
 * la aprobación, el cierre—; las claras son donde lee una persona. No es un
 * patrón decorativo cada-dos-secciones: si una sección nueva no habla del
 * mecanismo, va clara.
 *
 * Ninguna de las tres lleva logotipo encima, y no puede llevarlo: la guía v3.0
 * §3.2 autoriza el logo a color sólo sobre blanco o hueso, y las versiones
 * inversa y monocromo están BLOQUEADAS —no se entregaron másters—. Por eso la
 * cabecera y el pie se quedan claros, y por eso esto no se puede «extender a
 * toda la página» sin pedirle archivos nuevos al diseñador.
 *
 * Un solo bloque para las tres. Antes cada sección repetía sus propias reglas
 * de color invertido con la misma especificidad, así que agregar una cuarta
 * significaba copiar el bloque entero y descubrir a mano lo que faltaba.
 */

.superficie-oscura {
  background: var(--vt-superficie-inversa);
  color: var(--vt-texto-inverso);
  position: relative;
  isolation: isolate;
}
.superficie-oscura h2,
.superficie-oscura h3 { color: var(--vt-texto-inverso); }
.superficie-oscura p,
.superficie-oscura li,
.superficie-oscura dd { color: var(--vt-menta-clara); }
.superficie-oscura .eyebrow { color: var(--vt-menta-clara); }
.superficie-oscura strong { color: var(--vt-texto-inverso); }
.superficie-oscura a { color: var(--vt-menta-clara); }
.superficie-oscura a:hover { color: var(--vt-texto-inverso); }
.superficie-oscura :focus-visible { outline-color: var(--vt-borde-foco); }

.superficie-oscura .boton-primario {
  background: var(--vt-menta-clara);
  color: var(--vt-petroleo-oscuro);
}
.superficie-oscura .boton-primario:hover {
  background: var(--vt-superficie-elevada);
  color: var(--vt-petroleo-oscuro);
}
.superficie-oscura .boton-secundario {
  color: var(--vt-texto-inverso);
  box-shadow: inset 0 0 0 1.5px var(--vt-menta-clara);
}
.superficie-oscura .boton-secundario:hover {
  background: var(--vt-petroleo-profundo);
  color: var(--vt-texto-inverso);
}

/* El campo del ecógrafo, como textura.
 *
 * Arcos concéntricos abriéndose desde un vértice: es la forma del haz sectorial
 * que el veterinario tiene delante todo el día. Se eligió eso y no una retícula
 * genérica de «producto tecnológico» porque la retícula podría estar en el sitio
 * de cualquier cosa; esto sólo tiene sentido acá.
 *
 * No es el logotipo: la guía §7 prohíbe usar la marca como patrón decorativo o
 * fondo de baja opacidad, y esto no la usa. Va como `data:` en el CSS, que la
 * CSP admite (`img-src 'self' data:`), así que no agrega ni una petición.
 *
 * VA COMO MÁSCARA, no como imagen de fondo, y la razón no es estética. La
 * primera versión pintaba los arcos con el hex de la menta dentro del `data:`.
 * Eso pasa el test que prohíbe hex en esta hoja —adentro dice `%239FDEC4`, sin
 * `#` literal— y por eso mismo estaba mal: esquivaba el guardia en vez de
 * cumplirlo, y el día que la menta cambiara en `tokens.css` la textura se
 * habría quedado con el color viejo, sin que nada avisara. Como máscara, el
 * `data:` aporta sólo la FORMA (trazo `white`, del que la máscara usa el alfa)
 * y el color entra por `background-color`, o sea desde el token.
 */
.superficie-oscura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-color: var(--vt-menta-clara);
  --vt-campo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='white' stroke-width='1.4'%3E%3Cpath d='M280 0 L60 545 M280 0 L500 545 M280 0 L170 552 M280 0 L390 552'/%3E%3Ccircle cx='280' cy='0' r='140'/%3E%3Ccircle cx='280' cy='0' r='240'/%3E%3Ccircle cx='280' cy='0' r='340'/%3E%3Ccircle cx='280' cy='0' r='440'/%3E%3Ccircle cx='280' cy='0' r='540'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--vt-campo);
  mask-image: var(--vt-campo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 88% -12%;
  mask-position: 88% -12%;
  -webkit-mask-size: 620px 620px;
  mask-size: 620px 620px;
}
@media (max-width: 719px) {
  .superficie-oscura::before {
    opacity: 0.1;
    -webkit-mask-position: 132% -8%;
    mask-position: 132% -8%;
  }
}

/* ---- Secciones ---- */

.seccion { padding-block: var(--vt-e16); }

/* ---- La cabecera de una página interior ----
 *
 * Abre en oscuro, como la portada, y por la misma razón: era una columna clara
 * sobre fondo claro, así que entrar a «Seguridad» no se sentía como entrar a
 * ninguna parte. Ahora las cinco páginas del sitio arrancan con el mismo gesto
 * y la marca de arriba sigue sobre blanco, que es lo único que la guía exige.
 *
 * El h1 baja de escala: la portada usa 108 px porque ahí el titular ES la
 * página; acá compite con un texto largo que hay que leer, y una serif a ese
 * cuerpo delante de nueve párrafos se vuelve un cartel, no un título.
 */
.seccion-encabezado {
  padding-block: var(--vt-e16) var(--vt-e12);
  background: var(--vt-superficie-inversa);
  color: var(--vt-texto-inverso);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.seccion-encabezado h1 { font-size: clamp(36px, 5.4vw, 68px); }
.seccion-encabezado .lead { color: var(--vt-menta-clara); }
.seccion-encabezado .eyebrow { color: var(--vt-menta-clara); }
.seccion-encabezado a { color: var(--vt-menta-clara); }
.seccion-encabezado a:hover { color: var(--vt-texto-inverso); }
.seccion-encabezado :focus-visible { outline-color: var(--vt-borde-foco); }
/* El mismo campo del ecógrafo de la portada, más tenue: acá hay que leer. */
.seccion-encabezado::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background-color: var(--vt-menta-clara);
  --vt-campo-int: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='white' stroke-width='1.4'%3E%3Cpath d='M280 0 L60 545 M280 0 L500 545 M280 0 L170 552 M280 0 L390 552'/%3E%3Ccircle cx='280' cy='0' r='140'/%3E%3Ccircle cx='280' cy='0' r='240'/%3E%3Ccircle cx='280' cy='0' r='340'/%3E%3Ccircle cx='280' cy='0' r='440'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--vt-campo-int);
  mask-image: var(--vt-campo-int);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 92% -30%;
  mask-position: 92% -30%;
  -webkit-mask-size: 780px 780px;
  mask-size: 780px 780px;
}

/* El índice deja de ser una caja clara dentro de la banda oscura. */
.seccion-encabezado .indice {
  background: var(--vt-petroleo-profundo);
  border-color: var(--vt-jade-medio);
}
.seccion-encabezado .indice-titulo { color: var(--vt-menta-clara); }
.seccion-encabezado .indice a { color: var(--vt-texto-inverso); }
.seccion-encabezado .indice a:hover { color: var(--vt-menta-clara); }
/* La regla que había acá anulaba el relleno superior del primer bloque, porque
 * la cabecera y él eran la misma superficie clara y sumar los dos rellenos
 * abría un hueco que se leía como sección faltante. Con la cabecera en oscuro
 * el problema se invirtió: ahora hay un corte de color, y sin relleno el
 * primer titular quedaba pegado al borde de la banda. */
.seccion-encabezado + .seccion { padding-top: var(--vt-e16); }
.titulo-seccion { margin-bottom: var(--vt-e3); }
.seccion-evidencia { background: var(--vt-superficie-elevada); border-block: 1px solid var(--vt-borde); }
.seccion-datos { background: var(--vt-superficie-lienzo); }

.prosa { max-width: 72ch; }
/* El borde superior le da un límite visible a cada sección: sin él, ocho
 * bloques de h2 + párrafos se leen como un solo muro de texto. El
 * `scroll-margin-top` es para los saltos del índice: sin margen, el título
 * queda pegado al borde de arriba y no se ve que la página se movió. */
.prosa h2 {
  margin-top: var(--vt-e12);
  padding-top: var(--vt-e8);
  border-top: 1px solid var(--vt-borde);
  scroll-margin-top: var(--vt-e20);
}
.prosa h2:first-child { margin-top: 0; }
.prosa ul { padding-left: var(--vt-e5); }
.prosa li { margin-bottom: var(--vt-e3); }

/* Índice de una página de consulta. `seguridad.html` no se lee de corrido:
 * alguien llega con una pregunta concreta —«¿quién ve mis casos?»— y hasta
 * ahora tenía que recorrer siete secciones para encontrarla. Es un índice de
 * anclas, sin JavaScript, porque el sitio no lleva ni una línea. */
.indice {
  margin-top: var(--vt-e10);
  padding: var(--vt-e6);
  background: var(--vt-superficie-elevada);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-lg);
}
.indice-titulo {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-texto-tenue-aa);
  margin: 0 0 var(--vt-e4);
}
.indice-lista {
  list-style: none;
  counter-reset: indice;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--vt-e3);
}
.indice-lista li { counter-increment: indice; font-size: var(--vt-texto-sm); }
/* El enlace se agranda hacia arriba y abajo: en un teléfono, siete enlaces de
 * una línea seguidos son siete objetivos de ~20 px pegados entre sí, y errar
 * uno lleva a la sección equivocada. */
.indice-lista a { display: inline-block; padding-block: var(--vt-e2); }
.indice-lista li::before {
  content: counter(indice, decimal-leading-zero);
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  color: var(--vt-jade-medio);
  margin-right: var(--vt-e3);
}

/* El cierre de seguridad: los dos botones sueltos no decían de qué eran. */
.cierre-documentos {
  margin-top: var(--vt-e12);
  padding-top: var(--vt-e8);
  border-top: 1px solid var(--vt-borde);
}
.cierre-documentos p:first-child { color: var(--vt-texto-secundario); }

/* Pasos: el número dice el orden real del trabajo, no decora. */
.pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--vt-e8);
}
.pasos li { counter-increment: paso; padding-top: var(--vt-e5); border-top: 1px solid var(--vt-borde); }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-sm);
  font-weight: var(--vt-peso-semi);
  color: var(--vt-jade-medio);
  margin-bottom: var(--vt-e3);
}
.pasos h3 { margin-bottom: var(--vt-e2); }
.pasos p { color: var(--vt-texto-secundario); margin: 0; }

/* Evidencia: cada ficha declara su estado antes que su número. */
.evidencia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vt-e6); }
.evidencia li {
  background: var(--vt-superficie-lienzo);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-md);
  padding: var(--vt-e6);
}
.evidencia-estado {
  display: inline-block;
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--vt-e1) var(--vt-e3);
  border-radius: var(--vt-radio-pill);
  margin-bottom: var(--vt-e4);
}
.estado-medido { background: var(--vt-menta-clara); color: var(--vt-petroleo-oscuro); }
.estado-midiendo { background: var(--vt-superficie-sutil); color: var(--vt-texto-secundario); box-shadow: inset 0 0 0 1px var(--vt-borde-control); }
.evidencia-dato {
  font-family: var(--vt-fuente-display);
  font-size: 30px;
  font-weight: var(--vt-peso-fuerte);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--vt-e3);
}
.evidencia-dato .unidad { font-size: var(--vt-texto-lead); font-weight: var(--vt-peso-medio); }
.evidencia-que { margin: 0 0 var(--vt-e3); }
.evidencia-como {
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-secundario);
  margin: 0;
  padding-top: var(--vt-e3);
  border-top: 1px solid var(--vt-borde);
}
/* La única cifra publicada, presentada como lo que es: la evidencia.
 *
 * Era un párrafo gris al final de la sección («.nota-evidencia»), o sea la
 * letra chica — y es exactamente lo contrario: es el único número que el
 * proyecto se permite publicar, con intervalo y fecha. Los sitios que este
 * rediseño tomó de referencia ponen el caso con número al frente; acá el
 * número existe de verdad, así que se le da el cuerpo que se ganó. El resto
 * de la letra sigue siendo honesta: el IC al lado, en mono, y la nota de que
 * el tiempo de corrección aún se mide.
 */
.evidencia-cifra {
  margin-top: var(--vt-e12);
  display: grid;
  gap: var(--vt-e6);
  padding: var(--vt-e8);
  background: var(--vt-superficie-lienzo);
  border: 1px solid var(--vt-borde);
  border-left: 4px solid var(--vt-jade-medio);
  border-radius: var(--vt-radio-lg);
}
.evidencia-numero {
  margin: 0;
  font-family: var(--vt-fuente-titular);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(64px, 9vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--vt-petroleo-profundo);
  font-variant-numeric: tabular-nums;
}
.evidencia-numero span {
  font-size: 0.45em;
  margin-left: 0.06em;
  color: var(--vt-verde-clinico);
}
.evidencia-texto p { margin: 0 0 var(--vt-e3); max-width: 52ch; }
.evidencia-detalle {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-tenue-aa);
}
.evidencia-nota { font-size: var(--vt-texto-sm); color: var(--vt-texto-secundario); }
@media (min-width: 720px) {
  .evidencia-cifra {
    grid-template-columns: auto 1fr;
    gap: var(--vt-e10);
    align-items: center;
  }
}

.datos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vt-e4); max-width: 78ch; }
.datos-lista li { padding-left: var(--vt-e5); border-left: 2px solid var(--vt-menta-clara); }
.datos-lista strong { color: var(--vt-petroleo-profundo); }

/* Cada dirección es una ficha. Sueltas, con sólo un hueco entre ellas, los
 * tres bloques se leían como un texto corrido de tres párrafos y costaba ver
 * dónde terminaba uno. */
.contactos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vt-e6); }
.contactos li {
  background: var(--vt-superficie-elevada);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-lg);
  padding: var(--vt-e6);
}
.contacto-dir { font-family: var(--vt-fuente-mono); font-size: var(--vt-texto-lead); margin: 0 0 var(--vt-e1); }
.contacto-que { font-weight: var(--vt-peso-semi); margin: 0 0 var(--vt-e2); }
.contacto-detalle { color: var(--vt-texto-secundario); margin: 0; max-width: 68ch; }

.aviso {
  /* Llevaba sólo `margin-top`: la línea del operador quedaba pegada al borde
   * inferior de la caja ámbar y se leía como parte del aviso. */
  margin-block: var(--vt-e12);
  padding: var(--vt-e5);
  border-left: 3px solid var(--vt-estado-advertencia);
  background: var(--vt-superficie-elevada);
  border-radius: 0 var(--vt-radio-md) var(--vt-radio-md) 0;
}
.aviso-titulo { font-weight: var(--vt-peso-semi); color: var(--vt-estado-advertencia); margin-bottom: var(--vt-e2); }
.aviso p:last-child { margin-bottom: 0; }
.operador {
  margin: 0;
  padding-top: var(--vt-e6);
  border-top: 1px solid var(--vt-borde);
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-secundario);
}

/* Cierre: única superficie oscura, y por eso sin logotipo encima. */
/* Color y botones invertidos: los pone `.superficie-oscura`. Acá queda sólo lo
 * que es propio de esta sección. */
.seccion-cierre p { max-width: 56ch; }

/* ---- La sección del asistente ---- */

.seccion-asistente { background: var(--vt-superficie-elevada); border-block: 1px solid var(--vt-borde); }
.encabezado-con-foto.invertido { grid-template-areas: none; }
.ventajas {
  list-style: none;
  margin: var(--vt-e16) 0 0;
  padding: 0;
  display: grid;
  gap: var(--vt-e8);
}
.ventajas li {
  padding: var(--vt-e6);
  border: 1px solid var(--vt-borde);
  border-radius: var(--vt-radio-lg);
  background: var(--vt-superficie-lienzo);
  transition: transform var(--vt-mov-normal) var(--vt-mov-easing),
              box-shadow var(--vt-mov-normal) var(--vt-mov-easing);
}
.ventajas li:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -32px var(--vt-petroleo-oscuro);
}
.ventajas h3 { margin-bottom: var(--vt-e2); }
.ventajas p { color: var(--vt-texto-secundario); margin: 0; }

/* ---- Modernidad: elevación al pasar el cursor ----
 *
 * Vendemos software y el sitio se veía plano. Nada de esto es decorativo por
 * decorar: las tarjetas responden al cursor porque son lo que se lee de una
 * pasada, y el hero abre con un degradado sutil para que la primera pantalla
 * no sea un rectángulo liso. Todo con tokens: ni un hex nuevo.
 */

/* El hero.
 *
 * Era hueso con un degradado suave, y la primera pantalla decidía todo el sitio:
 * una columna de texto centrada sobre un fondo casi blanco con una captura al
 * lado. Correcto, y de plantilla. Ahora abre en petróleo a sangre —el logotipo
 * queda arriba, en la cabecera blanca, que es donde la guía lo autoriza— y la
 * captura se sale por el borde derecho en vez de quedar contenida.
 *
 * Sangrar la captura no es un gesto: una imagen que toca el borde dice que la
 * pantalla sigue más allá, que hay producto. Una centrada con aire a los dos
 * lados dice que es una ilustración.
 */
.hero {
  padding-block: var(--vt-e20) 0;
  overflow: hidden;
}
.hero .franja { position: relative; z-index: 1; }
.hero .lead { font-size: clamp(18px, 1.55vw, 22px); max-width: 46ch; }

/* El resplandor: un halo de menta muy abierto detrás del titular. Da
 * profundidad sin dibujar nada, y sale del token —no hay hex acá—. */
.hero::after {
  content: "";
  position: absolute;
  top: -18%;
  left: -10%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vt-jade-medio);
  opacity: 0.13;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* En el hero el campo del ecógrafo deja de ser un susurro: es la textura que
 * el visitante tiene que registrar en la primera pantalla. En las secciones de
 * más abajo sigue discreto, porque ahí compite con texto que hay que leer. */
.hero::before {
  opacity: 0.3;
  -webkit-mask-size: 1050px 1050px;
  mask-size: 1050px 1050px;
  -webkit-mask-position: 74% -34%;
  mask-position: 74% -34%;
}
/* En un teléfono la textura deja de estar detrás del texto y pasa a estar
 * ENCIMA de la lectura: el titular y el lead ocupan el ancho completo, así que
 * los arcos los cruzan. El bloque móvil de `.superficie-oscura::before` no
 * bastaba —tiene la misma especificidad y este va después, así que ganaba—.
 * Se baja acá, donde la cascada lo respeta. */
@media (max-width: 719px) {
  .hero::before {
    opacity: 0.12;
    -webkit-mask-size: 760px 760px;
    mask-size: 760px 760px;
    -webkit-mask-position: 128% -14%;
    mask-position: 128% -14%;
  }
}

.hero-figura {
  position: relative;
  margin-bottom: calc(var(--vt-e16) * -1);
}
.hero-figura .foto-pantalla {
  box-shadow: 0 48px 96px -40px var(--vt-petroleo-oscuro),
              0 0 0 1px var(--vt-jade-medio);
}
.hero-figura figcaption { color: var(--vt-menta-clara); opacity: 0.75; }

.evidencia li, .flujo-lado, .demo, .indice, .contactos li, .paso {
  transition: transform var(--vt-mov-normal) var(--vt-mov-easing),
              box-shadow var(--vt-mov-normal) var(--vt-mov-easing);
}
.flujo-lado:hover, .contactos li:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -32px var(--vt-petroleo-oscuro);
}
.boton-primario { box-shadow: 0 10px 24px -16px var(--vt-petroleo-oscuro); }
.boton-primario:hover { box-shadow: 0 16px 32px -18px var(--vt-petroleo-oscuro); }

/* Aparición al entrar en pantalla. La clase `con-mejoras` la pone el script:
 * sin él, `.aparece` no existe como estado y todo se ve desde el principio. */
.con-mejoras .aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--vt-mov-easing), transform 520ms var(--vt-mov-easing);
}
.con-mejoras .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .con-mejoras .aparece { opacity: 1; transform: none; transition: none; }
  .ventajas li:hover, .flujo-lado:hover, .contactos li:hover { transform: none; }
}

/* ---- Selección, desplazamiento y micro-interacciones ---- */

::selection { background: var(--vt-menta-clara); color: var(--vt-petroleo-oscuro); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* El botón primario dice hacia dónde va. La flecha es contenido decorativo
 * (alt vacío en la sintaxis de `content`) para que un lector de pantalla no
 * anuncie «flecha derecha» después de cada botón. */
.boton { transition: background var(--vt-mov-rapido) var(--vt-mov-easing),
                     color var(--vt-mov-rapido) var(--vt-mov-easing),
                     transform var(--vt-mov-rapido) var(--vt-mov-easing),
                     box-shadow var(--vt-mov-normal) var(--vt-mov-easing); }
.boton:active { transform: scale(0.97); }
.boton-primario::after {
  content: "\2192" / "";
  margin-left: var(--vt-e2);
  transition: transform var(--vt-mov-normal) var(--vt-mov-easing);
}
.boton-primario:hover::after { transform: translateX(4px); }

/* ---- La entrada del hero: una coreografía, no un parpadeo ----
 *
 * Escalonada de arriba hacia abajo, 70 ms entre piezas, `backwards` para que
 * cada una espere invisible su turno. Cuelga de `con-mejoras`: sin JavaScript
 * la clase no existe y todo se ve desde el primer pintado, y bajo
 * `prefers-reduced-motion` el script ni la agrega.
 */
@keyframes vt-entra {
  from { opacity: 0; transform: translateY(18px); }
}
.con-mejoras .hero .eyebrow,
.con-mejoras .hero h1 span,
.con-mejoras .hero .lead,
.con-mejoras .hero .acciones,
.con-mejoras .hero-figura,
.con-mejoras .hero-hechos {
  animation: vt-entra 640ms var(--vt-mov-easing) backwards;
}
/* Los tres verbos caen uno por uno; el resto respeta el orden de lectura. */
.con-mejoras .hero h1 span:nth-child(1) { animation-delay: 70ms; }
.con-mejoras .hero h1 span:nth-child(2) { animation-delay: 170ms; }
.con-mejoras .hero h1 span:nth-child(3) { animation-delay: 270ms; }
.con-mejoras .hero .lead { animation-delay: 340ms; }
.con-mejoras .hero .acciones { animation-delay: 410ms; }
.con-mejoras .hero-figura { animation-delay: 240ms; animation-duration: 780ms; }
.con-mejoras .hero-hechos { animation-delay: 480ms; }

/* El eyebrow del hero es una insignia de estado, con pulso. El punto late solo
 * cuando hay mejoras activas (o sea, nunca bajo movimiento reducido). */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-e2);
  padding: var(--vt-e2) var(--vt-e4);
  border: 1px solid var(--vt-jade-medio);
  border-radius: var(--vt-radio-pill);
}
.hero .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vt-jade-medio);
  flex: none;
}
@keyframes vt-late {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.con-mejoras .hero .eyebrow::before { animation: vt-late 2.4s ease-in-out infinite; }

/* ---- El tachado, ocurriendo ----
 *
 * Cuando el recorrido muestra el paso 2, cada marca del minimizador se BARRE
 * sobre el texto, una tras otra: es la página demostrando el producto, no un
 * adorno. La referencia es el patrón «prueba por demostración» de los sitios
 * que mejor venden herramientas (la terminal de Vercel, el editor de Stripe):
 * lo que acá se demuestra es la minimización, que es la promesa dura de VETTRA.
 *
 * Mecánica: en reposo la marca ya se ve completa (fondo menta, texto petróleo:
 * el mismo estado de siempre). Con `.tachando` —la pone `mejoras.js` al entrar
 * al paso— la animación arranca `backwards` desde fondo cero y barre. El fondo
 * va como gradiente del MISMO token para poder animar `background-size`, que
 * un `background-color` a secas no permite barrer.
 */
.con-mejoras #paso-minimizado .marca-min {
  background: none;
  background-image: linear-gradient(var(--vt-menta-clara), var(--vt-menta-clara));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@keyframes vt-tachar {
  0% { background-size: 0% 100%; color: var(--vt-menta-clara); }
  55% { color: var(--vt-menta-clara); }
  100% { background-size: 100% 100%; color: var(--vt-petroleo-oscuro); }
}
.con-mejoras #paso-minimizado.tachando .marca-min {
  animation: vt-tachar 560ms var(--vt-mov-easing) backwards;
}
.con-mejoras #paso-minimizado.tachando .marca-min:nth-of-type(2) { animation-delay: 140ms; }
.con-mejoras #paso-minimizado.tachando .marca-min:nth-of-type(3) { animation-delay: 280ms; }
.con-mejoras #paso-minimizado.tachando .marca-min:nth-of-type(4) { animation-delay: 420ms; }
.con-mejoras #paso-minimizado.tachando .marca-min:nth-of-type(5) { animation-delay: 560ms; }
.con-mejoras #paso-minimizado.tachando .marca-min:nth-of-type(6) { animation-delay: 700ms; }

/* Las capturas responden al cursor sin moverse: sólo profundidad. */
.foto-pantalla { transition: box-shadow var(--vt-mov-normal) var(--vt-mov-easing); }
.pantallas figure:hover .foto-pantalla {
  box-shadow: 0 26px 56px -30px var(--vt-petroleo-oscuro);
}

/* El cierre pesa como un cierre. */
.seccion-cierre h2 { font-size: clamp(32px, 5vw, 60px); }
.seccion-cierre { padding-block: calc(var(--vt-e20) + var(--vt-e8)); }

/* ---- Documentos legales ---- */

/* Los dos documentos jurídicos.
 *
 * Su TEXTO es verbatim del paquete y no se toca ni una palabra — eso lo fija
 * `test_sitio_publico`. Lo que sí es nuestro es cómo se lee: medida de línea,
 * ritmo entre secciones y el título de apertura. Un documento legal que se
 * puede leer no es un lujo, es la diferencia entre publicarlo y esconderlo.
 *
 * El h1 abre en oscuro como el resto del sitio: `legal-portada` lo envuelve
 * desde `construir_sitio`, sin que el generador toque el contenido.
 */
/* La medida se aplica al CONTENEDOR, no al titular.
 *
 * `max-width: 76ch` sobre el h1 no lo restringía: `ch` se calcula con la
 * tipografía y el cuerpo del propio elemento, y 76 caracteres de Fraunces a
 * 60 px son ~2500 px. El h1 salía a 1264 px pegado al borde mientras el
 * artículo de abajo empezaba a 267: dos alineaciones distintas en la misma
 * página. Acá el relleno se calcula sobre `.legal-portada`, que hereda el
 * cuerpo del documento — la misma base con la que `.legal` calcula su 76ch —,
 * así que las dos columnas caen exactamente en el mismo eje.
 */
.legal-portada {
  background: var(--vt-superficie-inversa);
  color: var(--vt-texto-inverso);
  padding-block: var(--vt-e16) var(--vt-e12);
  padding-inline: max(var(--vt-e5), calc((100% - 76ch) / 2));
}
.legal-portada h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  color: var(--vt-texto-inverso);
}
.legal-portada .legal-version {
  margin: var(--vt-e4) 0 0;
  color: var(--vt-menta-clara);
}

.legal { max-width: 76ch; margin-inline: auto; padding-block: var(--vt-e16); }
.legal h1 { font-size: clamp(28px, 4.6vw, 40px); }
.legal h2 {
  font-size: clamp(21px, 2vw, 27px);
  margin-top: var(--vt-e12);
  padding-top: var(--vt-e5);
  border-top: 1px solid var(--vt-borde);
}
/* Cuerpo un punto más grande y con más aire: son las dos páginas del sitio
 * que alguien lee entera, de arriba abajo, y decidiendo algo. */
.legal p { font-size: var(--vt-texto-lead); line-height: 1.68; }
.legal-num { font-family: var(--vt-fuente-mono); color: var(--vt-jade-medio); }
.legal p { color: var(--vt-texto-secundario); }
.legal .legal-version {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-sm);
  color: var(--vt-texto-tenue-aa);
  margin-bottom: var(--vt-e10);
}

/* ---- Pie ---- */

.pie {
  /* Blanco, no la superficie sutil: el isologo a color sólo puede ir sobre
   * blanco o hueso (guía de marca v3.0 §6). */
  background: var(--vt-superficie-elevada);
  border-top: 1px solid var(--vt-borde);
  padding-block: var(--vt-e12) var(--vt-e8);
  font-size: var(--vt-texto-sm);
}
.pie-grid { display: grid; gap: var(--vt-e8); }
.pie p { color: var(--vt-texto-secundario); }
.pie a { color: var(--vt-verde-clinico); }
.pie-marca img { width: 56px; height: auto; }
.pie-slogan {
  font-family: var(--vt-fuente-display);
  font-size: var(--vt-texto-base);
  font-weight: var(--vt-peso-semi);
  color: var(--vt-petroleo-profundo);
  margin: var(--vt-e3) 0 var(--vt-e2);
}
.pie-estado { margin: 0; }
.pie-titulo {
  font-family: var(--vt-fuente-mono);
  font-size: var(--vt-texto-xs);
  font-weight: var(--vt-peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-texto-tenue-aa);
  margin-bottom: var(--vt-e3);
}
.pie-legal {
  margin-top: var(--vt-e10);
  padding-top: var(--vt-e5);
  border-top: 1px solid var(--vt-borde);
}
.pie-legal p { margin: 0 0 var(--vt-e3); max-width: 78ch; }
.pie-legal p:last-child { margin-bottom: 0; }

/* ---- Anchos mayores ---- */

@media (min-width: 720px) {
  .marca { margin-right: 0; }
  .marca img { width: 320px; }
  .nav { order: 0; width: auto; margin-right: auto; }
}

@media (min-width: 640px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .evidencia { grid-template-columns: repeat(2, 1fr); }
  .pie-grid { grid-template-columns: repeat(2, 1fr); }
  /* Las divisiones verticales van con `gap` + borde izquierdo, no con borde en
   * cada celda: así la primera no lleva raya suelta al principio de la fila. */
  .hero-hechos { grid-template-columns: repeat(3, 1fr); gap: var(--vt-e8); }
  .hero-hechos > div + div {
    border-left: 1px solid var(--vt-jade-medio);
    padding-left: var(--vt-e8);
  }
  .indice-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .franja { padding-inline: var(--vt-e8); }
  /* El ritmo vertical se abre en pantalla ancha. Con la escala nueva —h2 a
   * 54 px— los 64 px de separación entre secciones que servían para titulares
   * de 42 px dejaban los bloques pegados: el aire alrededor de un titular
   * grande tiene que crecer con él, o el titular se lee como apretado aunque
   * el tamaño sea correcto. */
  .seccion { padding-block: calc(var(--vt-e20) + var(--vt-e6)); }
  .seccion-encabezado { padding-block: var(--vt-e20) var(--vt-e16); }
  .seccion-encabezado + .seccion { padding-top: calc(var(--vt-e20) + var(--vt-e6)); }
  /* Con foto el hero vuelve a dos columnas; sin ella se queda en una, que es
   * lo honesto: una columna vacía al lado del titular se lee como algo que no
   * cargó. La clase la pone la plantilla, no `:has()`, para que el día que se
   * agregue la foto el cambio se vea en el HTML. */
  /* Asimétrica y sangrada. El texto se queda en algo más de la mitad —a 92 px
   * de titular, 46 ch de medida es lo legible— y la captura toma el resto y
   * SIGUE más allá del borde de la franja. El `margin-right` negativo es lo que
   * la saca: sin él la imagen se detiene donde termina el contenido y vuelve a
   * leerse como ilustración enmarcada. `overflow: hidden` en `.hero` es lo que
   * impide que eso genere barra horizontal. */
  .hero-grid.con-figura {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--vt-e16);
  }
  /* `-e20 * 1.4` (−112 px) no alcanzaba: en una pantalla ancha la franja ya
   * tiene ese margen libre a cada lado, así que la imagen sólo llegaba al borde
   * y se leía contenida. Se mide contra el ANCHO DE PANTALLA, no contra la
   * franja: lo que sobra a la derecha, más un empujón. */
  .hero-grid.con-figura .hero-figura {
    margin-right: calc((var(--vt-ancho-contenido) - 100vw) / 2 - var(--vt-e16));
  }
  .demo-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--vt-e10); }
  .demo-lado + .demo-lado {
    padding-top: 0;
    padding-left: var(--vt-e10);
    border-top: 0;
    border-left: 1px solid var(--vt-borde);
  }
  .demo { padding: var(--vt-e10); }
  .pantallas { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--vt-e12); }
  .puerta { grid-template-columns: repeat(3, 1fr); gap: var(--vt-e10); }
  .flujo { grid-template-columns: repeat(2, 1fr); gap: var(--vt-e6); }
  .ventajas { grid-template-columns: repeat(3, 1fr); gap: var(--vt-e6); }
  .encabezado-con-foto.invertido { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .paso { padding: var(--vt-e10); }
  .encabezado-con-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: var(--vt-e12); }
  .seccion-cierre .franja.cierre { grid-template-columns: minmax(0, 1fr) minmax(0, 45%); gap: var(--vt-e12); }
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .pie-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}