/* ======================================================================
   Disciplina — la capa de diseño del sitio comercial.
   ----------------------------------------------------------------------
   Se apila ENCIMA de portada.css y home.css, que no se tocan. Todo lo que
   está acá corrige o afina, nunca reemplaza, y por eso se puede quitar
   entero borrando dos líneas de cada página.

   Las cuatro reglas de las que sale todo lo demás:

     1. Los titulares van en la sans del sistema —la misma de la
        plataforma— y la serif aparece SÓLO en el fragmento en cursiva que
        lleva el énfasis. Uno por titular: si son dos, deja de ser énfasis.
     2. El color de acento vive encerrado en una píldora y en ningún otro
        lugar.
     3. Filetes de 1px, no sombras. La excepción son las maquetas de
        aparato, que sin sombra se leen pegadas con cinta.
     4. Nada aparece de golpe: cada cosa entra cuando llega su turno.
   ====================================================================== */

/* ======================================================================
   Variante «disciplina Sketch» sobre la identidad de Blueprint.
   Lo que se toma prestado del documento: el ritmo (base 8, secciones 80),
   una sola tipografía de display sólo en titulares, el acento de color
   encerrado en una píldora, el degradado como atmósfera y nunca como fondo
   de contenido, cero sombras teatrales, un solo botón primario.
   Lo que NO se toma prestado: la paleta. El cianotipo se queda.
   ====================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../assets/fuentes/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

.s-hero {
  --ritmo: 80px;            /* separación entre bloques mayores */
  position: relative; overflow: hidden;
  background: var(--azul); color: #fff;
  padding: clamp(96px, 11vw, 144px) 0 0;
}

/* La retícula sigue ahí —es la marca— pero enmascarada hacia abajo: no pasa
   por detrás del titular. El documento de Sketch lo dice de otro modo
   («el degradado es atmósfera, no fondo de contenido»); acá aplica igual. */
.s-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / .11) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .11) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 22%, #000 62%);
          mask-image: linear-gradient(to bottom, transparent 0 22%, #000 62%);
}
/* Atmósfera: una sola fuente de luz, detrás del equipo, nunca detrás del texto. */
.s-hero::after {
  content: ""; position: absolute; left: 50%; bottom: -12%; translate: -50% 0;
  width: 120%; height: 62%; pointer-events: none;
  background: radial-gradient(52% 50% at 50% 50%, rgb(79 184 232 / .30), transparent 72%);
  filter: blur(8px);
}
.s-hero > * { position: relative; }

.s-hero-texto { text-align: center; max-width: 1120px; margin: 0 auto; }

/* El acento vive encerrado en la píldora. En ningún otro lugar. */
.s-pildora {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 6px 14px 6px 12px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06);
  font-size: 12.5px; line-height: 1.4; letter-spacing: .005em;
  color: rgb(255 255 255 / .82); text-transform: none; font-weight: 450;
}
.s-pildora::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cian); box-shadow: 0 0 0 3px rgb(79 184 232 / .22);
}

.s-hero h1 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400; font-style: normal;
  margin: 24px auto 0; max-width: 17ch;
  font-size: clamp(2.7rem, 1.3rem + 4.9vw, 4.75rem);   /* 43 → 76 px */
  line-height: 1.03; letter-spacing: -0.021em;
  text-wrap: balance;
}
.s-hero h1 em { font-style: italic; color: #bcdcf0; }

.s-bajada {
  margin: 24px auto 0; max-width: 46ch;
  font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / .72);
}

/* Una sola acción primaria. La segunda es un enlace, no un botón. */
.s-acciones { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.s-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  padding: 14px 26px; border-radius: 999px;
  background: #fff; color: var(--azul-hondo);
  font-size: 15px; font-weight: 600; letter-spacing: -0.006em; text-decoration: none;
  transition: transform .16s var(--sale);
}
.s-cta::before {
  content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: 999px;
  background: radial-gradient(closest-side, rgb(120 205 245 / .75), transparent 72%);
  filter: blur(10px);
  transition: opacity .3s ease;
}
.s-cta:active { transform: scale(.97); }
.s-enlace {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgb(255 255 255 / .8); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / .22); padding-bottom: 2px;
}
.s-enlace:hover { color: #fff; border-bottom-color: #fff; }
.s-enlace svg { width: 14px; height: 14px; fill: currentColor; }

.s-nota { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / .5); }

.s-vitrina { max-width: 1120px; margin: var(--ritmo) auto 0; padding: 0 var(--canto); }
.s-vitrina img { display: block; width: 100%; height: auto; }

/* Los hechos, en voz baja. Antes eran cuatro bloques en negrita compitiendo
   con el titular; acá sostienen sin levantar la voz. */
.s-hechos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1120px; margin: 64px auto 0; padding: 0 var(--canto) 88px;
  list-style: none; gap: 0;
}
.s-hechos li {
  padding: 0 20px; font-size: 12.5px; line-height: 1.5;
  color: rgb(255 255 255 / .58);
  border-left: 1px solid rgb(255 255 255 / .14);
}
.s-hechos li:first-child { padding-left: 0; border-left: 0; }
.s-hechos b { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; color: rgb(255 255 255 / .92); letter-spacing: -0.004em; }

@media (max-width: 720px) {
  .s-hechos { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .s-hechos li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ======================================================================
   Capa de disciplina — segunda versión.
   Se apila sobre portada.css + home.css.

   Cambia respecto de la primera:
     · La serif dejó de ser la voz de todos los titulares. Ahora es el
       énfasis dentro de la frase, y nada más. El único titular entero en
       serif es el h1 del hero, que es uno por página.
     · Cero sombras. Filetes de 1px, que es la idea de Pirsch y la que mejor
       le calza a una marca que se llama Blueprint.
     · La sección de los tres pasos deja de cambiar de color a mitad de
       camino. El ritmo lo marcan el espacio y las líneas, no el fondo.
   ====================================================================== */

/* ---------- 1. La serif, sólo como énfasis ---------------------------- */

/*
 * La cursiva de una serif junto a una sans tiene la x más baja y los trazos
 * más finos: puesta al mismo cuerpo se ve chica y desmayada. 1.06em y un
 * pelo de tracking negativo la dejan ópticamente del mismo tamaño.
 */
.s-em {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.004em;
  color: var(--azul-vivo);
}
.oscuro .s-em, .s-hero .s-em { color: #bcdcf0; }

/* Los titulares vuelven a la sans del sistema: la misma de la plataforma. */
h2, .h-sec, .encabezado-seccion h2 {
  font-size: clamp(2rem, 1.25rem + 2.3vw, 2.95rem);
  line-height: 1.1; letter-spacing: -0.024em; font-weight: 700;
}
.h-paso h3 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); line-height: 1.15; }

/* ---------- 2. El acento, encerrado en la píldora --------------------- */

.rotulo, .h-rotulo {
  display: inline-flex !important; align-items: center; gap: 0;
  padding: 0; margin-bottom: 20px; border-radius: 999px;
  font-size: 12.5px !important; font-weight: 500 !important;
  letter-spacing: .005em !important; text-transform: none !important;
  color: var(--tinta-2) !important;
  border: 1px solid rgb(0 49 83 / .22); background: transparent;
  overflow: hidden;
  width: fit-content; justify-self: start; align-self: start;
}
.rotulo::before, .h-rotulo::before {
  content: "" !important; display: block !important; flex: none;
  width: 6px !important; height: 6px !important; border-radius: 50%;
  background: var(--azul-vivo) !important; opacity: 1 !important;
  margin: 0 8px 0 11px;
}
.rotulo > span.s-txt, .h-rotulo > span.s-txt { padding: 5px 13px 5px 0; }
.oscuro .rotulo, .oscuro .h-rotulo {
  color: rgb(255 255 255 / .82) !important; border-color: rgb(255 255 255 / .22);
}
.oscuro .rotulo::before, .oscuro .h-rotulo::before { background: var(--cian) !important; }

/*
 * La píldora numerada de Pirsch: la cifra en su propia celda, con su filete
 * de separación, y el nombre del paso al lado. Reemplaza al «01» gigante en
 * marca de agua, que era un segundo sistema de numeración compitiendo con la
 * píldora a diez centímetros de distancia.
 */
.h-rotulo .s-num {
  flex: none; display: grid; place-items: center;
  width: 26px; align-self: stretch;
  border-right: 1px solid rgb(0 49 83 / .22);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.h-rotulo .s-num + .s-txt { padding-left: 11px; }
.h-rotulo:has(.s-num)::before { display: none !important; }
.h-paso-num { display: none !important; }

/* ---------- 3. Filetes, no sombras ------------------------------------ */

.h-pantalla, .video-marco, .h-mano, .h-paso-img-movil, .lamina, .cifra, .h-rotulacion {
  box-shadow: none !important;
}
.h-pantalla, .video-marco, .h-mano, .h-paso-img-movil {
  border: 1px solid rgb(0 49 83 / .16); border-radius: 12px; overflow: hidden;
}
.cifra { border: 1px solid rgb(0 49 83 / .14); background: transparent; }
.oscuro .cifra { border-color: rgb(255 255 255 / .16); }

/* ---------- 4. El lienzo no se quiebra -------------------------------- */

/*
 * La sección de los tres pasos se ponía azul en el paso 2 y volvía al papel
 * en el 3. Eso era lo que rompía: dentro de UN bloque había tres fondos, así
 * que los tres pasos se leían como tres secciones sueltas en vez de como una
 * sola idea en tres tiempos. Ahora el fondo es uno solo de principio a fin y
 * lo que separa cada paso es un filete y el aire de arriba.
 */
.h-pasos[data-activo="2"] { background: var(--papel) !important; color: var(--tinta) !important; }
.h-pasos[data-activo="2"] .h-sec,
.h-pasos[data-activo="2"] .h-paso h3,
.h-pasos[data-activo="2"] .h-lista li b { color: var(--tinta) !important; }
.h-pasos[data-activo="2"] .h-paso .h-p { color: var(--tinta-2) !important; }
.h-pasos[data-activo="2"] .h-lista li { color: var(--gris) !important; }
.h-pasos[data-activo="2"] .h-lista .h-ico-s,
.h-pasos[data-activo="2"] .h-paso .h-rotulo,
.h-pasos[data-activo="2"] .h-encabezado .h-rotulo,
.h-pasos[data-activo="2"] .h-sin-instalar .h-ico { color: inherit !important; }
.h-pasos[data-activo="2"] .h-sin-instalar { border-top-color: rgb(0 49 83 / .15) !important; }
.h-pasos[data-activo="2"] .h-rotulo { color: var(--tinta-2) !important; border-color: rgb(0 49 83 / .22); }
.h-pasos[data-activo="2"] .h-rotulo::before { background: var(--azul-vivo) !important; }
.h-pasos[data-activo="2"] .h-rotulo .s-num { border-right-color: rgb(0 49 83 / .22); }

/* Cada paso, separado por un filete y por aire. */
.h-paso + .h-paso { border-top: 1px solid rgb(0 49 83 / .1); }
.h-paso { padding: 10vh 0; }

/* ---------- 5. Ritmo --------------------------------------------------- */

.seccion { padding-block: clamp(80px, 7.5vw, 120px); }
.encabezado-seccion, .h-encabezado { margin-bottom: 56px; }
.bajada, .h-sec-bajada, .h-p { font-size: 16.5px; line-height: 1.6; }
.bajada, .h-sec-bajada { max-width: 52ch; }

.encabezado-seccion, .h-encabezado, .h-fijo { position: relative; }
.s-filete::before {
  content: ""; position: absolute; top: -26px; left: 0;
  width: 0; height: 1px; background: currentColor; opacity: .3;
  transition: width 820ms var(--sale) 140ms;
}
.encabezado-centrado.s-filete::before { left: 50%; translate: -50% 0; }
.s-filete[data-visible='si']::before { width: 56px; }

@media (hover: hover) and (pointer: fine) {
  .h-modulos li a, .video-marco { transition: transform 240ms var(--sale), border-color 240ms ease; }
  .h-modulos li a:hover { transform: translateY(-3px); border-color: rgb(0 49 83 / .3); }
  .video-marco:hover { transform: translateY(-3px); border-color: rgb(0 49 83 / .34); }
}
.h-modulos li a:active, .video-marco:active { transform: scale(.985); }

.s-cta { position: relative; isolation: isolate; }
.s-cta::before {
  content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: 999px;
  background: radial-gradient(closest-side, rgb(26 127 184 / .38), transparent 72%);
  filter: blur(10px);
}
.s-hero .s-cta::before {
  background: radial-gradient(closest-side, rgb(120 205 245 / .75), transparent 72%);
}
.h-cierre .s-acciones { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.h-cierre .s-cta {
  display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px;
  background: var(--azul); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform .16s var(--sale);
}
.h-cierre .s-cta:active { transform: scale(.97); }
.h-cierre .s-enlace {
  display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2);
  font-size: 15px; text-decoration: none;
  border-bottom: 1px solid rgb(0 49 83 / .22); padding-bottom: 2px;
}
.h-cierre .s-enlace:hover { color: var(--azul); border-bottom-color: var(--azul); }
.h-cierre .s-enlace svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- 6. Movimiento --------------------------------------------- */

.js .s-palabras .s-pal {
  display: inline-block;
  opacity: 0; transform: translateY(.34em); filter: blur(7px);
  transition: opacity 640ms var(--sale), transform 640ms var(--sale), filter 640ms var(--sale);
  transition-delay: calc(var(--i) * 48ms);
}
.js .s-palabras[data-visto='si'] .s-pal { opacity: 1; transform: none; filter: blur(0); }

.js .s-destapa {
  clip-path: inset(0 0 100% 0); transform: scale(1.045); opacity: .6;
  transition: clip-path 980ms var(--sale), transform 1180ms var(--sale), opacity 600ms ease;
}
.js .s-destapa[data-visto='si'] { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }

.js .s-entra-pildora { opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity 520ms var(--sale), transform 520ms var(--sale); }
.js .s-entra-pildora[data-visto='si'] { opacity: 1; transform: none; }

/* El equipo del hero: entra desde abajo destapándose, y después crece con el
   desplazamiento. El original lo hacía con `animation-timeline: scroll()`,
   que no existe en Safari; acá lo mueve el guion, que funciona en todos. */
.js .s-vitrina { will-change: transform; }
.js .s-vitrina picture {
  display: block;
  opacity: 0; transform: translateY(56px) scale(.96); clip-path: inset(30% 0 0 0);
  transition: opacity 900ms var(--sale) 450ms, transform 1250ms var(--sale) 450ms,
              clip-path 1000ms var(--sale) 450ms;
}
.js .s-vitrina[data-visto='si'] picture { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

.js .escalonado > * { transition-duration: 720ms; }
.js .escalonado[data-visible='si'] > *:nth-child(1) { transition-delay: 0ms; }
.js .escalonado[data-visible='si'] > *:nth-child(2) { transition-delay: 95ms; }
.js .escalonado[data-visible='si'] > *:nth-child(3) { transition-delay: 190ms; }
.js .escalonado[data-visible='si'] > *:nth-child(4) { transition-delay: 285ms; }
.js .escalonado[data-visible='si'] > *:nth-child(5) { transition-delay: 380ms; }
.js .escalonado[data-visible='si'] > *:nth-child(6) { transition-delay: 475ms; }

@media (prefers-reduced-motion: reduce) {
  .js .s-palabras .s-pal, .js .s-destapa, .js .s-entra-pildora, .js .s-vitrina picture {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; transition: none !important;
  }
  .js .s-vitrina { transform: none !important; }
  .s-filete::before { width: 56px !important; transition: none; }
}

/* ---------- 7. Correcciones de la revisión ---------------------------- */

/*
 * La nota al margen iba en manuscrita. Eran cuatro familias conviviendo en un
 * mismo bloque —la sans del sistema, la cursiva del énfasis, la manuscrita y
 * la negrita— y la manuscrita, además, se leía mal. Vuelve a la sans y se
 * apoya en un filete: sigue leyéndose como apunte al margen, pero se lee.
 */
.h-manuscrita {
  font-family: inherit !important;
  font-size: 16px !important; line-height: 1.55 !important;
  transform: none !important;
  max-width: 34ch; margin-top: 28px !important;
  padding-left: 16px; border-left: 1px solid rgb(0 49 83 / .18);
  color: var(--gris) !important;
}

/*
 * La foto de terreno estaba compuesta para sangrar por el canto derecho
 * contra el azul: se desbordaba un 24 % y se anclaba abajo a la derecha. Sin
 * el azul y con marco, ese desborde dejaba la foto recortada dentro de una
 * caja medio vacía. Ahora llena su marco como cualquier otra captura.
 */
.h-mano { place-items: stretch !important; border-radius: 12px; }
.h-mano img { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

/* El cuadro de rotulación se va: era una cita al oficio del plano que no
   aporta nada a quien está decidiendo si contrata. */
.h-rotulacion { display: none !important; }

/* ---------- 8. Galería de dispositivos -------------------------------- */

/*
 * El mismo gesto que usa la página de Things: el producto en dos aparatos a la
 * vez, superpuestos. Pero acá no es sólo composición — es el argumento del
 * sitio dicho con imágenes. A la izquierda la lista de órdenes en la oficina,
 * a la derecha el modo terreno en el teléfono del técnico. Es la misma
 * información y son las pantallas de verdad, tomadas del modo demostración.
 */
.s-galeria { position: relative; margin-top: 56px; }
.s-galeria-marco {
  position: relative; max-width: 1120px; margin-inline: auto;
  aspect-ratio: 1400 / 760;
}
.s-galeria img { position: absolute; display: block; height: auto; }
.s-galeria .s-mac { left: 2%; top: 4%; width: 79%; }
.s-galeria .s-tel { right: 3%; top: 16%; width: 18.6%; }

/*
 * Entran por separado y en ese orden: primero el computador, y el teléfono
 * 220 ms después, subiendo desde un poco más abajo y desde un grado de
 * inclinación. Si entraran juntos se leerían como una sola imagen; entrando
 * así se leen como dos aparatos, que es justamente lo que hay que contar.
 */
.js .s-galeria img { opacity: 0; transition: opacity 900ms var(--sale), transform 1100ms var(--sale); }
.js .s-galeria .s-mac { transform: translateY(40px) scale(.97); }
.js .s-galeria .s-tel { transform: translateY(64px) rotate(1.6deg) scale(.96); transition-delay: 220ms; }
.js .s-galeria[data-visto='si'] img { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .s-galeria-marco { aspect-ratio: 1400 / 900; }
  .s-galeria .s-mac { left: 0; top: 0; width: 88%; }
  .s-galeria .s-tel { right: 0; top: 30%; width: 26%; }
}

/* ---------- 9. El logo asomado ---------------------------------------- */

/*
 * Un detalle juguetón que le vi a Things: el isotipo asoma por detrás del
 * canto superior de la banda siguiente, como si estuviera apoyado ahí atrás.
 * Funciona porque la banda que lo tapa es opaca y va por encima: el logo no
 * se recorta con ninguna máscara, simplemente queda debajo.
 */
.s-asomado {
  display: block; width: 132px; margin: 72px auto -66px; position: relative; z-index: 0;
  opacity: .9;
}
.js .s-asomado { transform: translateY(26px); opacity: 0; transition: transform 900ms var(--sale), opacity 700ms ease; }
.js .s-asomado[data-visto='si'] { transform: none; opacity: .9; }
/* La banda que lo tapa tiene que ir por encima y ser opaca. */
.h-datos { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .s-galeria img, .js .s-asomado {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- 10. Boletín ----------------------------------------------- */

.s-boletin { text-align: center; }
.s-boletin .encabezado-seccion { max-width: 52ch; margin-inline: auto; }
.s-boletin-forma {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: 480px; margin: 0 auto;
}
.s-boletin input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  padding: 13px 16px; border-radius: 999px;
  border: 1px solid rgb(0 49 83 / .2); background: var(--papel);
  font: inherit; font-size: 15px; color: var(--tinta);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.s-boletin input[type="email"]::placeholder { color: var(--gris-2); }
.s-boletin input[type="email"]:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgb(26 127 184 / .16);
}
.s-boletin button {
  flex: none; padding: 13px 26px; border-radius: 999px; border: 0;
  background: var(--azul); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: transform .16s var(--sale), background-color .2s ease;
}
.s-boletin button:hover { background: var(--azul-hondo); }
.s-boletin button:active { transform: scale(.97); }
.s-boletin .s-letra-chica {
  margin: 16px auto 0; max-width: 46ch;
  font-size: 13px; line-height: 1.55; color: var(--gris-2);
}
/* La trampa para robots: invisible para una persona, irresistible para un
   guion que rellena todo lo que encuentra. Si viene con algo, se descarta. */
.s-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-aviso { margin: 18px auto 0; font-size: 14.5px; line-height: 1.5; max-width: 46ch; min-height: 1.5em; }
.s-aviso[data-tono="mal"] { color: #a1440f; }
.s-aviso[data-tono="bien"] { color: #15803d; }
/* «Mandando…»: gris, porque todavía no es ni un éxito ni un fallo. */
.s-aviso[data-tono="neutro"] { color: var(--gris); }

/* ---------- 11. Correcciones de la segunda revisión -------------------- */

/*
 * Los aparatos estaban flotando.
 *
 * La regla de la casa es «filetes, no sombras», pero esa regla es para cajas
 * apoyadas en el lienzo. Un aparato recortado sobre fondo no es una caja: si
 * no proyecta nada, se lee pegado con cinta. Things lo dice igual —reserva las
 * sombras exactamente para las maquetas de producto— así que acá hay sombra, y
 * es de dos capas: una pegada al canto que da el contacto, y una amplia y
 * suave que da el aire. `drop-shadow` y no `box-shadow`, porque sigue el canal
 * alfa del PNG y no la caja rectangular.
 */
.s-galeria .s-mac {
  filter: drop-shadow(0 2px 3px rgb(0 49 83 / .10)) drop-shadow(0 26px 46px rgb(0 49 83 / .14));
}
.s-galeria .s-tel {
  filter: drop-shadow(0 2px 3px rgb(0 49 83 / .16)) drop-shadow(0 22px 40px rgb(0 49 83 / .26));
}

/*
 * El logo asomado quedaba partido por la mitad y dejaba de leerse. Ahora
 * esconde un 20 % y nada más —el isotipo se reconoce entero— y apoya con una
 * sombra hacia abajo para que se entienda que está DETRÁS de la banda y no
 * pintado encima de ella.
 */
.s-asomado {
  width: 150px; margin: 76px auto -30px;
  filter: drop-shadow(0 6px 14px rgb(0 49 83 / .22));
  opacity: 1;
}
.js .s-asomado[data-visto='si'] { opacity: 1; }

/*
 * La foto del brazo se va.
 *
 * Era la única fotografía en una sección hecha de capturas de interfaz, y con
 * marco quedaba peor: una mano recortada dentro de una caja. En su lugar va el
 * mismo teléfono de la galería, con su bezel, mostrando el modo terreno. Es lo
 * que hace Things: maquetas de aparato, nunca fotografía de estilo de vida.
 */
.h-mano {
  display: grid; place-items: center; background: none !important;
  border: 0 !important; box-shadow: none !important; overflow: visible;
}
.h-mano img {
  width: min(56%, 300px) !important; height: auto; margin: 0 !important;
  filter: drop-shadow(0 2px 3px rgb(0 49 83 / .16)) drop-shadow(0 22px 40px rgb(0 49 83 / .26));
}
/* Ojo: acá NO se toca `display`. Esta imagen nace en `display:none` y sólo
   aparece bajo el punto de quiebre móvil; fijarle `grid` la hacía aparecer
   también en escritorio, duplicando el teléfono de la vitrina. */
#terreno .h-paso-img-movil {
  border: 0 !important; box-shadow: none !important; overflow: visible;
  text-align: center;
}
#terreno .h-paso-img-movil img {
  width: min(62%, 280px);
  filter: drop-shadow(0 2px 3px rgb(0 49 83 / .16)) drop-shadow(0 20px 34px rgb(0 49 83 / .24));
}

@media (prefers-reduced-motion: reduce) {
  .js .s-asomado { opacity: 1 !important; transform: none !important; }
}

/* ---------- 12. Tercera revisión --------------------------------------- */

/*
 * El teléfono se monta sobre el computador y apoya en él.
 *
 * Flotaba por dos razones, y las dos estaban mal resueltas. La primera es que
 * no tocaba nada: estaba al lado del Mac, no delante. Ahora se corre a la
 * izquierda hasta montarse sobre el canto derecho de la pantalla, así que hay
 * un objeto sobre el que apoyarse. La segunda es que la sombra no tenía
 * dirección: una sombra centrada y pareja se lee como un halo, no como luz.
 * Ésta cae hacia abajo y hacia la izquierda, que es donde cae la del Mac, y
 * aterriza SOBRE el computador, que es lo que de verdad lo pega al plano.
 */
.s-galeria .s-tel { right: 8%; top: 15%; width: 19.4%; }
.s-galeria .s-tel {
  filter:
    drop-shadow(-6px 8px 10px rgb(0 49 83 / .20))
    drop-shadow(-14px 26px 34px rgb(0 49 83 / .22))
    drop-shadow(0 44px 64px rgb(0 49 83 / .14));
}
.s-galeria .s-mac {
  filter: drop-shadow(0 3px 4px rgb(0 49 83 / .09)) drop-shadow(0 30px 54px rgb(0 49 83 / .13));
}

/*
 * El logo asomado, con la sombra de Things.
 *
 * Fui a mirar cómo lo hacen y la respuesta no estaba en el CSS: su PNG mide
 * 500 × 601 para un icono de 500 × 500, o sea que la sombra viene PINTADA en
 * el archivo, cien píxeles de alto por debajo del icono. Y medida en el canal
 * alfa es facilísima: a media altura de esa franja el alfa máximo es 3 de 255.
 * Enorme de ancho y casi invisible de opacidad.
 *
 * Lo mío era justo al revés —corta y oscura—, que es lo que la hacía parecer
 * un borde sucio en vez de una proyección. Acá va con la proporción de ellos:
 * mucho desenfoque, mucha caída y muy poca tinta. Y el logo crece, porque a
 * 150 px la sombra no tiene dónde extenderse.
 */
.s-asomado {
  width: 172px; margin: 84px auto -34px;
  /*
   * El desplazamiento tiene que ser mayor o igual que el desenfoque. Con 30 de
   * caída y 56 de desenfoque la sombra se derramaba también hacia ARRIBA y
   * coronaba el icono con un halo: se leía como luz detrás, no como sombra
   * debajo. Con la caída por encima del desenfoque, todo lo que se pinta queda
   * bajo el logo, y la parte de más abajo la tapa la banda.
   */
  filter:
    drop-shadow(0 16px 14px rgb(0 49 83 / .10))
    drop-shadow(0 42px 40px rgb(0 49 83 / .14));
}

/* ---------- 13. Cuarta revisión ---------------------------------------- */

/*
 * Las capturas de los tres pasos quedaban dentro de una tarjeta blanca mucho
 * más alta que la propia imagen, con medio panel de blanco vacío abajo.
 *
 * La causa: la vitrina pegajosa coloca sus hijos con `inset: 0`, y un elemento
 * absoluto con `top` Y `bottom` fijados toma la altura del contenedor aunque
 * declare `height: auto`. La tarjeta medía el alto de la ventana; la imagen,
 * lo que le daba su proporción; y la diferencia era ese blanco.
 *
 * Soltando `bottom` la altura vuelve a salir del contenido, y el centrado se
 * hace con `translate` —la propiedad suelta, no la función dentro de
 * `transform`— para no pisar la animación de entrada, que usa `transform`.
 */
.h-pasos-vitrina > * {
  top: 50%; bottom: auto; height: auto;
  translate: 0 -50%;
}

/*
 * Más sombra bajo el logo asomado.
 *
 * La regla que yo había anotado —desplazamiento mayor o igual que el
 * desenfoque— era más estricta de lo necesario y dejaba la sombra casi toda
 * escondida detrás de la banda. El desenfoque se derrama la mitad hacia cada
 * lado, así que basta con desplazamiento ≥ desenfoque/2 para que nada suba
 * por encima del icono. Con eso hay margen para subir tinta y radio, y la
 * sombra aparece donde tiene que aparecer: a los costados y por debajo, sobre
 * el papel claro, justo antes del canto de la banda.
 */
.s-asomado {
  filter:
    drop-shadow(0 14px 16px rgb(0 49 83 / .16))
    drop-shadow(0 32px 48px rgb(0 49 83 / .22));
}

/* ---------- 14. El logo asomado, donde de verdad funciona --------------- */

/*
 * Estaba en la entrada a la banda azul, y ahí la sombra no se puede ver: una
 * sombra oscura sobre azul marino no existe. En la referencia de Things el
 * bloque de abajo es CLARO —papel sobre papel— y por eso la proyección se lee
 * a los dos lados del canto.
 *
 * Así que se muda al canto del boletín, y el boletín pasa a ser una banda de
 * papel gris sobre el blanco de la sección anterior. Mismo esquema: dos
 * bloques claros, un escalón de tono apenas perceptible, y el logo apoyado
 * detrás. De paso el gesto queda donde corresponde —justo encima de «déjanos
 * tu correo»— que es un momento amable, no uno de datos y respaldos.
 */
.s-boletin {
  background: var(--papel-2);
  position: relative; z-index: 1;
}
.h-datos { z-index: auto; }

/*
 * Y crece. En la referencia el icono ocupa cerca de un tercio del ancho de la
 * columna; a 172 px se leía como un favicon perdido, y una sombra tan chica no
 * alcanza a extenderse lo suficiente para parecer una proyección.
 */
.s-asomado {
  width: clamp(190px, 21vw, 264px);
  margin: 88px auto 0;
  /* Un cuarto escondido, medido sobre el propio ancho del logo. */
  margin-bottom: calc(clamp(190px, 21vw, 264px) * -0.24);
  filter:
    drop-shadow(0 16px 20px rgb(0 49 83 / .16))
    drop-shadow(0 40px 56px rgb(0 49 83 / .20));
}

/* ---------- 15. El titular del hero, en la sans ------------------------ */

/*
 * Se acabó la excepción. El h1 era el último titular entero en serif, y con
 * él fuera la regla queda pareja en toda la página: los titulares son la sans
 * del sistema —la misma de la plataforma— y la serif aparece sólo en el
 * fragmento en cursiva que lleva el énfasis.
 *
 * Al cambiar de familia hay que bajar el cuerpo: una sans en peso 700 pesa
 * mucho más que una serif en 400 al mismo tamaño, y a 76 px se comía la
 * pantalla. 62 px con el tracking cerrado de la casa deja el mismo bloque
 * visual con menos estruendo.
 */
.s-hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.35rem, 1.2rem + 3.7vw, 3.9rem);   /* 38 → 62 px */
  line-height: 1.06;
  letter-spacing: -0.028em;
  max-width: 19ch;
}
.s-hero h1 em {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.004em;
  color: #bcdcf0;
}

/* ---------- 16. Las páginas interiores --------------------------------- */

/*
 * Las interiores no tienen el hero del home: usan `.portada`, que es la misma
 * banda azul con píldora, titular y bajada. Se les aplica el mismo criterio
 * —sans en el titular, cursiva sólo en el énfasis, cuerpo más bajo— para que
 * no se note dónde termina una página y empieza la otra.
 */
.portada h1 {
  font-size: clamp(2.2rem, 1.15rem + 3.4vw, 3.6rem);
  line-height: 1.07; letter-spacing: -0.028em; font-weight: 700;
  max-width: 19ch;
}
.portada .bajada { font-size: clamp(1.02rem, .95rem + .35vw, 1.15rem); line-height: 1.6; }
.portada .rotulo { margin-bottom: 22px; }

/* Sobre el azul, la cursiva del énfasis se aclara igual que en el hero. */
.oscuro .s-em, .portada .s-em { color: #bcdcf0; }

/*
 * Los índices de sección, las tarjetas de norma y las listas de las
 * interiores comparten el mismo trato que las del home: filete en vez de
 * sombra, y tres píxeles de levante al pasar el cursor.
 */
.indice-normas a, .tarjeta, .caja, .norma, .plan {
  box-shadow: none !important;
  transition: transform 240ms var(--sale), border-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .indice-normas a:hover { transform: translateY(-3px); }
}
.indice-normas a:active { transform: scale(.985); }

/* La vitrina de `terreno.html` muestra ahora el mismo teléfono con bezel que
   el resto del sitio, así que no necesita marco propio: el bisel ya lo es. */
.vitrina-aparato { border: 0 !important; box-shadow: none !important; background: none !important; }
.vitrina-aparato img {
  filter: drop-shadow(0 2px 3px rgb(0 49 83 / .16)) drop-shadow(0 22px 40px rgb(0 49 83 / .24));
}

/* ---------- 17. Un lienzo, dos bandas ---------------------------------- */

/*
 * El problema medido: `plataforma.html` alternaba fondo nueve veces —azul,
 * gris, azul, gris, azul, gris, azul, blanco— y `prevencion` y `planes` tres
 * veces cada una. Cada cambio de fondo le grita al lector «empieza otra
 * sección», así que una página de nueve bloques se leía como nueve páginas.
 *
 * La regla que se adopta es la de Things y Pirsch, y es la misma que ya rige
 * en el home: el lienzo NO se quiebra. El ritmo lo marcan el espacio y los
 * filetes. Quedan como mucho dos bandas oscuras por página —la portada y una
 * al cierre— y todo lo demás vive sobre el mismo papel.
 *
 * El gris `--papel-2` es el lienzo; el blanco se reserva para lo que se
 * levanta de él, que es lo que hace que una tarjeta se lea como tarjeta.
 */
main > .seccion:not(.oscuro):not(.portada) { background: var(--papel-2); }
main > .seccion.tenue { background: var(--papel-2); }
/* La trama tenue sobre claro también marcaba secciones al aparecer y
   desaparecer: sobre un lienzo único no puede estar sólo en algunos bloques. */
main > .seccion.tenue { background-image: none; }

/*
 * Las bandas oscuras del medio se aclaran. `.oscuro` pinta el fondo, la
 * retícula y una veintena de colores heredados, así que aclararla es
 * devolverlos uno por uno; se hace con una clase propia y no tocando
 * `.oscuro`, para que la portada y el cierre sigan intactos.
 */
.oscuro.s-aclarada { background: var(--papel-2) !important; color: var(--tinta) !important; }
.oscuro.s-aclarada::before, .oscuro.s-aclarada::after { display: none !important; }
.oscuro.s-aclarada h2, .oscuro.s-aclarada h3 { color: var(--azul); }
.oscuro.s-aclarada .bajada, .oscuro.s-aclarada .cuerpo { color: var(--gris); }
.oscuro.s-aclarada .rotulo { color: var(--tinta-2) !important; border-color: rgb(0 49 83 / .22); }
.oscuro.s-aclarada .rotulo::before { background: var(--azul-vivo) !important; }
.oscuro.s-aclarada .lista span, .oscuro.s-aclarada .cifra span { color: var(--gris); }
.oscuro.s-aclarada .tilde, .oscuro.s-aclarada .faq .signo { color: var(--azul-vivo); }
.oscuro.s-aclarada .vitrina { border-color: var(--linea); }
.oscuro.s-aclarada .cifra { border-color: var(--linea); }
.oscuro.s-aclarada .cifra b { color: var(--tinta); }
.oscuro.s-aclarada .norma { background: var(--papel); border-color: var(--linea); border-left-color: var(--azul-vivo); }
.oscuro.s-aclarada .norma h3 { color: var(--azul); }
.oscuro.s-aclarada .norma p { color: var(--gris); }
.oscuro.s-aclarada .norma cite { color: var(--gris-2); }
.oscuro.s-aclarada .faq details { background: var(--papel); border-color: var(--linea); }
.oscuro.s-aclarada .faq summary { color: var(--tinta); }
.oscuro.s-aclarada .faq summary:hover { background: rgb(0 49 83 / .03); }
.oscuro.s-aclarada .faq .respuesta { color: var(--gris); }
.oscuro.s-aclarada .faq .respuesta a { color: var(--azul); }
.oscuro.s-aclarada .pasos li::before { background: var(--azul); color: #fff; }
.oscuro.s-aclarada .pasos span { color: var(--gris); }
.oscuro.s-aclarada .boton-lleno { background: var(--azul); color: #fff; }
.oscuro.s-aclarada .boton-linea { color: var(--azul); border-color: rgb(0 49 83 / .25); }
.oscuro.s-aclarada .indice-normas a { border-color: var(--linea); }
/* Los enlaces heredaban el blanco de `.oscuro`. En un bloque aclarado, los
   de dentro de un párrafo vuelven al azul de marca; los que SON la tarjeta
   entera heredan, porque ahí el color lo pone el contenido. */
.oscuro.s-aclarada a { color: inherit; }
.oscuro.s-aclarada p a, .oscuro.s-aclarada li a, .oscuro.s-aclarada .bajada a { color: var(--azul); }
.oscuro.s-aclarada + .oscuro, .oscuro + .oscuro.s-aclarada { border-top: 0; }

/* ---------- 18. El azul de los enlaces --------------------------------- */

/*
 * `--azul-vivo` (#1a7fb8) da 4,11:1 sobre el gris del lienzo y 4,40:1 sobre
 * blanco: las dos por debajo del 4,5:1 que pide la WCAG AA para texto normal.
 * Medido, no estimado. Como acento dentro de una píldora da igual —ahí es un
 * punto de 6 px, no texto— pero como color de enlace no sirve.
 *
 * `--enlace` es ese mismo azul un paso más oscuro: 5,57:1 sobre el lienzo y
 * 5,97:1 sobre blanco.
 *
 * El orden se resuelve por especificidad y no por excepciones, que es lo que
 * me falló en el primer intento: `main a` son dos elementos (0,0,2), así que
 * cualquier regla con UNA clase le gana. Los botones (`.boton`, `.s-cta`) y
 * las secciones oscuras (`.oscuro a`) ganan solos, sin `:not()` encadenados.
 */
:root { --enlace: #15699a; }

main a { color: var(--enlace); }
.oscuro a { color: var(--cian); }
.oscuro .boton-lleno { color: var(--azul-hondo); }
.oscuro.s-aclarada a { color: var(--enlace); }
.oscuro.s-aclarada .boton-lleno { color: #fff; }
/* Los enlaces que SON una tarjeta entera heredan: ahí el color lo pone el
   contenido de la tarjeta, no el hecho de ser enlace. */
main .indice-normas a, main .h-modulos li a, main .h-video-item a { color: inherit; }

/*
 * Los últimos enlaces en `--azul-vivo` que quedaban por debajo de AA. Se
 * listan uno por uno porque cada uno tiene su propia regla con clase en
 * portada.css o home.css, y ganarles por especificidad pide nombrarlos.
 * El punto de las píldoras y los íconos se quedan en `--azul-vivo`: no son
 * texto y ahí el contraste se mide de otra forma.
 */
.faq .respuesta a,
.ficha a,
.h-video-canal,
main .mas-enlace, main .enlace-mas, main .ver-mas,
main .cuerpo a, main .nota a, main .lista a { color: var(--enlace); }
.h-video-flecha:hover { border-color: var(--enlace); color: var(--enlace); }
main .ayuda a { color: var(--enlace); }
main .campo .ayuda a { color: var(--enlace); }

/*
 * Las dos últimas sombras de tarjeta del sitio. La fachada del video ya vive
 * dentro de un marco con filete, así que la suya sobraba; las fichas de
 * contacto pasan a filete como todas las demás. La sombra del botón de play
 * se queda: no es una caja apoyada en el lienzo, es un control flotando sobre
 * una imagen, que es la excepción declarada en la regla 3.
 */
.video-facade { box-shadow: none !important; }
.ficha { box-shadow: none !important; border: 1px solid var(--linea); }

/* ======================================================================
   19. Correcciones de la auditoría — 20-09-2026
   ====================================================================== */

/* --- 1. Objetivos táctiles ---------------------------------------------
 * 26 de 42 elementos interactivos medían menos de 44 px de alto a 390 px.
 * En un teléfono eso son errores de pulsación, no un detalle de estilo. Se
 * agranda el área sensible SIN agrandar el texto: padding y `min-height`, y
 * un margen negativo donde el elemento vive en una línea y no se puede
 * permitir que empuje a sus vecinos. */
@media (max-width: 860px) {
  .barra-menu a, .menu-movil a, .pie a,
  .h-video-canal, .s-enlace, .h-cierre .s-enlace,
  main .campo .ayuda a, .faq summary {
    min-height: 46px; display: inline-flex; align-items: center;
  }
  .abrir-menu, .h-video-flecha { min-width: 46px; min-height: 46px; }
  .barra-marca { min-height: 46px; display: inline-flex; align-items: center; }
  /* Los enlaces dentro de un párrafo no pueden crecer en alto sin romper el
     interlineado: se les da área con padding lateral y se aceptan como
     excepción declarada. */
  main p a { padding-block: 6px; }
}

/* --- 2. Sólo `transform` y `opacity` en lo que se repite ----------------
 * El desenfoque por palabra corría sobre 124 elementos a la vez. Es la
 * propiedad que mejor funde «moverse» y «aparecer» en una sola cosa, pero
 * no es compositable y la regla de la casa es clara. Se queda sólo donde
 * hay POCOS elementos —las imágenes que se destapan— y sale de las
 * palabras, que son multitud. */
.js .s-palabras .s-pal {
  filter: none;
  transition: opacity 640ms var(--sale), transform 640ms var(--sale);
  transition-delay: calc(var(--i) * 48ms);
}
.js .s-palabras[data-visto='si'] .s-pal { filter: none; }

/* El filete de sección se dibujaba animando `width`, que toca la maqueta.
   `scaleX` hace lo mismo en la capa de composición. */
.s-filete::before {
  width: 56px; transform: scaleX(0); transform-origin: left center;
  transition: transform 820ms var(--sale) 140ms;
}
.encabezado-centrado.s-filete::before { transform-origin: center; }
.s-filete[data-visible='si']::before { width: 56px; transform: scaleX(1); }

/* --- 3. Soltar `will-change` -------------------------------------------
 * `portada.css` ya tenía escrita la regla —«terminada la entrada se suelta
 * la promesa de composición»— y yo, al escribir esta capa, la ignoré.
 * Mantenerla viva reserva memoria de vídeo sin ninguna ganancia. */
.js .s-vitrina[data-quieta='si'] { will-change: auto; }

/* --- 4. Tamaños mínimos de texto en teléfono --------------------------- */
@media (max-width: 720px) {
  .rotulo, .h-rotulo, .s-pildora { font-size: 13px !important; }
  .s-nota, .s-letra-chica, .h-nota, .s-hechos li { font-size: 14px; }
  .h-hechos li, .s-hechos li b { font-size: 14px; }
}

/* --- 5. Las otras preferencias del sistema -----------------------------
 * Había tres reglas de `prefers-reduced-motion` y cero de las otras dos.
 * Reducir el movimiento no es lo mismo que reducir la transparencia ni que
 * pedir más contraste: son tres personas distintas pidiendo cosas
 * distintas. */
@media (prefers-reduced-transparency: reduce) {
  .rotulo, .h-rotulo, .s-pildora { background: var(--papel); }
  .oscuro .rotulo, .oscuro .h-rotulo, .s-hero .s-pildora { background: var(--azul-hondo); }
  .s-hero::before, .oscuro::before { opacity: .45; }
  .s-hero .s-cta::before, .s-cta::before { display: none; }
}
@media (prefers-contrast: more) {
  :root { --enlace: #0d4f76; --gris: #45536b; --gris-2: #5b6b84; }
  .rotulo, .h-rotulo, .s-pildora { border-color: var(--azul); color: var(--azul) !important; }
  .h-pantalla, .video-marco, .h-mano, .h-paso-img-movil, .cifra,
  .h-modulos li a, .indice-normas a { border-color: rgb(0 49 83 / .45); }
  .s-filete::before { opacity: .6; }
}
@media (forced-colors: active) {
  .rotulo, .h-rotulo, .s-pildora, .cifra, .h-pantalla, .video-marco { border: 1px solid CanvasText; }
  .s-cta::before, .s-hero::before, .oscuro::before, .oscuro::after { display: none; }
  .s-asomado, .s-galeria img { forced-color-adjust: none; }
}

/* --- 6. La fila de cuatro tarjetas iguales -----------------------------
 * `.cifras` eran cuatro cajas idénticas en fila: el patrón más genérico que
 * existe y el que la regla prohíbe. Pasan a columnas separadas por filete,
 * como los hechos del hero: la misma información sin el molde. */
.cifras { gap: 0; }
.cifra {
  padding: 4px 24px; border: 0 !important; border-radius: 0;
  border-left: 1px solid rgb(0 49 83 / .14) !important; background: none !important;
}
.cifra:first-child { padding-left: 0; border-left: 0 !important; }
.oscuro:not(.s-aclarada) .cifra { border-left-color: rgb(255 255 255 / .18) !important; }
@media (max-width: 720px) {
  .cifras { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .cifra:nth-child(3) { padding-left: 0; border-left: 0 !important; }
}

/* --- 9. `100vh` en iOS ------------------------------------------------
 * Con la barra de Safari visible, `100vh` es más alto que la ventana y la
 * vitrina pegajosa queda cortada; al ocultarse la barra, salta. `dvh` mide
 * la ventana de verdad. */
@supports (height: 100dvh) {
  .h-pasos-vitrina { height: calc(100dvh - var(--barra) - 12vh); }
}

/* --- 10. El titular fuera de escala ------------------------------------ */
/* --- 10. RETIRADO ------------------------------------------------------
 * La auditoría marcó el h2 de 21,6 px de `terminos-servicio.html` como
 * «fuera de escala». Estaba equivocada: esa página define en su propio
 * bloque `<style>` una escala completa de documento legal —h2 a 1,35rem,
 * h3 a 1,1rem, cuerpo a 1rem— y los tres valores están puestos juntos y a
 * propósito. No es un titular de sección descolgado, es el subtítulo de un
 * artículo numerado dentro de un documento. Se deja como está. */

/* Quedaban siete bajo el mínimo: tres a 43 px porque una altura fija le
   ganaba al `min-height`, un enlace suelto dentro de un párrafo, y el campo
   trampa para robots —que no es para nadie y se queda como está—. */
@media (max-width: 860px) {
  .abrir-menu, .h-video-flecha, .s-boletin button, .boton, .s-cta {
    min-height: 46px; height: auto;
  }
  .h-sec-bajada a, .bajada a, .ciclo-cierre a {
    min-height: 46px; display: inline-flex; align-items: center;
  }
}
@media (max-width: 860px) { .s-letra-chica a { min-height: 46px; display: inline-flex; align-items: center; } }


/* Titulares de secciones claras en el azul de marca, como en la portada: antes
   iban en negro casi puro y las páginas interiores se leían de otra familia. */
.seccion:not(.oscuro) h2 { color: var(--azul); }

/* La ficha de resultado (.hallazgo) con un párrafo, no sólo con <span>, y en
   las secciones aclaradas: nació para fondo oscuro y sobre papel quedaba sin
   caja, con el título pegado al texto y el texto en negro. */
.hallazgo p {
  display: block; margin: 10px 0 0; max-width: 70ch;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55;
  color: rgb(255 255 255 / .78);
}
.oscuro.s-aclarada .hallazgo {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--azul-vivo); text-align: left;
}
.oscuro.s-aclarada .hallazgo b { color: var(--azul); }
.oscuro.s-aclarada .hallazgo p, .oscuro.s-aclarada .hallazgo span { color: var(--gris); }