/* ==========================================================================
   Kuntur — hoja de estilos del sitio público
   Depende de /css/tokens.css (color, tipografía, escala fluida). Aquí solo hay
   layout, ritmo y componentes. Sin framework, sin build, sin JavaScript.

   IDEA RECTORA — «la carátula del expediente»
   El logo es un cóndor: vigilancia desde arriba, territorio ancho, precisión.
   La página es una serie de láminas técnicas: el hero es la carátula —marco,
   franja de metadatos, área de dibujo y cajetín— y cada sección es una lámina
   numerada de la misma serie (LÁM. 02 · EL PROBLEMA…). La voz «instrumento»
   la pone la monoespaciada del sistema: códigos, rótulos, estaciones, datos.
   El tamaño se contiene a propósito; la jerarquía la hacen el peso (eje
   variable 340–760) y la densidad, no los puntos. El ámbar queda para la
   ruta, el rótulo y la acción principal — nunca de fondo.

   ORDEN DEL ARCHIVO
     1. Reajuste y cimientos
     2. Rejilla de página (sangrado completo sin envoltorios)
     3. Tipografía y rótulos de lámina
     4. Elementos comunes: enlaces, botones, láminas .viz
     5. Cabecera y navegación
     6. Secciones 1–7
     7. Pie de página
     8. Movimiento (respeta prefers-reduced-motion)
   ========================================================================== */

/* ==========================================================================
   1. REAJUSTE Y CIMIENTOS
   ========================================================================== */

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

body,
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

:root {
  /* Superficies. Todas salen de los tokens: cualquier texto sobre ellas usa
     un par de contraste ya calculado en tokens.css. */
  --bg: var(--green-900); /* lienzo base */
  --surface: var(--green-800); /* tarjetas y bandas */
  --surface-strong: var(--green-700); /* banda de cierre */

  /* Filete decorativo (--line) frente a borde de control. Un borde que
     delimita un control debe llegar a 3:1 (WCAG 1.4.11) y rgba(255,255,255,.1)
     se queda en ~1.3:1. Calculado para este par:
       rgba(255,255,255,.38) sobre green-900 .... 3.51:1  ✔
       rgba(255,255,255,.38) sobre green-800 .... 3.34:1  ✔ */
  --line-control: rgba(255, 255, 255, 0.38);

  /* Marco de lámina: más presente que el filete pero sin llegar a control. */
  --line-frame: rgba(255, 255, 255, 0.16);

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Margen lateral que centra el contenido sin necesitar un <div> envoltorio:
     así las bandas de color llegan de borde a borde de la ventana. */
  --pad: max(var(--gutter), (100% - var(--max)) / 2);

  --sec-y: clamp(2.75rem, 6vw, 5rem);
  --radius-sm: 2px; /* controles: canto casi vivo, como una pieza fresada */
}

html {
  scroll-padding-top: 5.5rem; /* la cabecera pegajosa no debe tapar el destino */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* red de seguridad: nada debe desbordar de todos modos */
}

svg {
  display: block;
}

/* Foco visible, único y de alto contraste sobre las tres superficies:
     amber sobre green-900 8.21:1 · green-800 6.94:1 · green-700 5.41:1 */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre los controles rellenos de ámbar el anillo ámbar se pierde. Se cambia
   a tinta, que sobre el fondo de la página da 15.41:1 y se ve desde lejos. */
.skip-link:focus-visible {
  outline-color: var(--ink);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: var(--green-900);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}

#contenido:focus {
  outline: none; /* destino del salto: el foco se ve en el contenido, no en <main> */
}

/* ==========================================================================
   2. REJILLA DE PÁGINA
   ========================================================================== */

.site-header,
main > section,
.site-footer {
  padding-inline: var(--pad);
}

main > section {
  position: relative;
  padding-block: var(--sec-y);
}

/* Filete divisorio de sangrado completo entre láminas. Las secciones con banda
   de color propia se lo saltan: allí el cambio de fondo ya divide. */
main > section + section:not(.banda) {
  border-top: 1px solid var(--line);
}

/* Bandas: cambian el fondo de borde a borde y marcan el compás de la página.
   Con trece láminas seguidas, el mismo verde de cabo a rabo se vuelve una
   pared; las bandas alternan de tres en tres y dan respiración. Llevan
   `.banda` en el HTML —no se listan aquí por clase de sección— para que el
   filete divisorio de arriba siga siendo una sola regla. `contacto` va después
   porque su verde es el fuerte, el de cierre. */
.banda {
  background-color: var(--surface);
}

.contacto {
  background-color: var(--surface-strong);
}

/* ==========================================================================
   3. TIPOGRAFÍA Y RÓTULOS DE LÁMINA
   ========================================================================== */

h1,
h2,
h3 {
  font-weight: 640;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* El titular no grita: dos pesos del eje variable hacen el trabajo que antes
   hacía el cuerpo de letra. Cada tramo es su propia línea: el quiebre es una
   decisión, no un accidente del ancho. */
h1 {
  font-size: var(--step-3);
  line-height: 1.16;
  letter-spacing: -0.022em;
  font-weight: 340;
}

.h1-suave,
.h1-fuerte {
  display: block;
}

.h1-fuerte {
  font-weight: 760;
  letter-spacing: -0.028em;
}

h2 {
  font-size: var(--step-2);
  max-width: 26ch;
}

h3 {
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  max-width: 64ch;
  text-wrap: pretty;
}

/* Entradilla: peso ligero y medida corta. El contraste de peso frente al
   titular hace el trabajo que en otros sitios hace una segunda familia. */
.lede,
.intro {
  font-size: var(--step-0);
  font-weight: 380;
  line-height: 1.55;
  color: var(--ink-soft);
}

.lede {
  max-width: 46ch;
}

.intro {
  max-width: 54ch;
}

/* Rótulo de lámina: la numeración de la serie, en monoespaciada y con su
   tramo de línea ámbar. Es el elemento que antes era un adorno (el «tick»)
   promovido a sistema. Va con aria-hidden en el HTML: es señalética. */
.lamina {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

/* La raya se ancla al centro óptico de la PRIMERA línea: si el rótulo se
   quiebra en pantallas angostas, no queda flotando entre las dos. */
.lamina::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1px;
  margin-top: 0.55em;
  background: var(--amber);
}

/* Cifras técnicas: rasgos tabulares para que 01–04 midan lo mismo. */
.parada::before,
.expediente-rasgos > li::before {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   4. ELEMENTOS COMUNES
   ========================================================================== */

/* Enlaces de texto: tinta con subrayado ámbar. El color se reserva para el
   estado activo, de modo que un párrafo con enlaces no se convierte en un
   sarpullido naranja. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--amber);
  text-decoration-thickness: 2px;
}

/* --- Botones ---------------------------------------------------------------
   Nada de píldoras: canto casi vivo, rotulación en mayúsculas compactas y el
   principal delineado en ámbar con marcas de registro en las esquinas — la
   misma marca que llevan las láminas .viz. Se rellena al pasar por encima.
   -------------------------------------------------------------------------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: none;
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 640;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* Delineado ámbar sobre green-900: texto 8.21:1 (AAA), borde muy por encima
   del 3:1 no textual. Al pasar, relleno ámbar con tinta green-900: 8.21:1. */
.btn-primario {
  position: relative;
  border-color: var(--amber);
  color: var(--amber);
}

.btn-primario:hover {
  background: var(--amber);
  color: var(--green-900);
}

/* Marcas de registro: dos escuadras fuera de las esquinas opuestas. */
.btn-primario::before,
.btn-primario::after {
  content: "";
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border: 0 solid var(--amber);
}

.btn-primario::before {
  top: -0.3rem;
  left: -0.3rem;
  border-top-width: 1px;
  border-left-width: 1px;
}

.btn-primario::after {
  right: -0.3rem;
  bottom: -0.3rem;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

/* El secundario cede el paso: tinta suave (8.50:1 AAA) hasta el hover. */
.btn-secundario {
  border-color: var(--line-control);
  color: var(--ink-soft);
}

.btn-secundario:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--ink-soft);
  color: var(--ink);
}

/* --- Láminas .viz ---------------------------------------------------------
   Cajas vacías hasta que L2/L3 les meta el SVG animado. Reservan su sitio con
   aspect-ratio (el layout no da un salto cuando llegue el dibujo) y mientras
   tanto se leen como el área de dibujo de una lámina: cuadrícula en planta,
   anillos concéntricos —la vista del cóndor— y marcas de esquina.
   -------------------------------------------------------------------------- */

.viz {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.015);
  background-image:
    /* anillos concéntricos, muy tenues */
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(82, 183, 136, 0.09) 0 1px,
      transparent 1px 46px
    ),
    /* cuadrícula en planta */
      repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.045) 0 1px,
        transparent 1px 44px
      ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 44px
    ),
    radial-gradient(
      ellipse 80% 70% at 50% 45%,
      rgba(27, 67, 50, 0.85),
      transparent 70%
    );
  overflow: hidden;
}

/* Marcas de esquina: dos pseudoelementos, dos esquinas opuestas. */
.viz::before,
.viz::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  border: 0 solid rgba(244, 165, 36, 0.5);
}

.viz::before {
  top: 0.75rem;
  left: 0.75rem;
  border-top-width: 1px;
  border-left-width: 1px;
}

.viz::after {
  right: 0.75rem;
  bottom: 0.75rem;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

/* --- Listas marcadas -------------------------------------------------------
   El bolo de las láminas densas (control, auditoría, seguridad). No es un
   `list-style` porque el reajuste los quitó a todos y porque aquí el marcador
   es parte del vocabulario del plano: un tramo de filete ámbar, el mismo gesto
   que la raya del rótulo de lámina, alineado al centro óptico de la primera
   línea para que no baile cuando el texto se quiebra.
   -------------------------------------------------------------------------- */

.lista-marcada {
  display: grid;
  gap: 0.9rem;
}

.lista-marcada > li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
  max-width: 62ch;
}

.lista-marcada > li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 0.9rem;
  height: 1px;
  background: var(--amber);
}

.lista-marcada strong {
  color: var(--ink);
  font-weight: 620;
}

/* --- Remate de lámina ------------------------------------------------------
   El «Importante:» con que el dossier cierra cada capítulo. Es la frase que el
   lector se lleva, así que va en tinta plena, con su filete y su rótulo en
   ámbar, y NO se recorta a la medida de un párrafo suelto: cierra la lámina.
   -------------------------------------------------------------------------- */

.remate {
  max-width: 62ch;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.55;
}

.remate-etq {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ==========================================================================
   5. CABECERA
   ========================================================================== */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}

/* Pegajosa solo desde tableta: en móvil la ventana es corta y la cabecera se
   comería la llamada a la acción del hero. */
@media (min-width: 48rem) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    /* green-900 al 90 %; el desenfoque es un extra, no se depende de él. */
    background-color: rgba(13, 33, 26, 0.9);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

/* Alto fijo y ancho automático: el viewBox conserva la proporción y el cóndor
   nunca se deforma. */
.brand-mark {
  height: 1.9rem;
  width: auto;
  flex: none;
}

.brand-name {
  font-size: var(--step-0);
  font-weight: 650;
  letter-spacing: 0.04em;
}

/* Navegación en monoespaciada compacta: índice de láminas, no menú de SaaS. */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

/* ==========================================================================
   6. SECCIONES
   ========================================================================== */

/* --- 1. Hero: la carátula --------------------------------------------------
   Una sola pieza enmarcada: franja de metadatos, texto + área de dibujo y
   cajetín de datos. El cambio estructural que saca al hero del molde
   «titular a la izquierda, caja a la derecha, dos píldoras debajo».
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "meta"
    "texto"
    "viz"
    "cajetin";
  border: 1px solid var(--line-frame);
  background-color: rgba(255, 255, 255, 0.012);
  /* El papel de la lámina: cuadrícula en planta muy tenue en toda la hoja. */
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 56px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.025) 0 1px,
      transparent 1px 56px
    ),
    radial-gradient(
      ellipse 75% 90% at 80% 0%,
      rgba(45, 106, 79, 0.35),
      transparent 65%
    );
}

/* Franja de metadatos: el encabezado de la hoja. */
.hero-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 2rem;
  max-width: none;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-texto {
  grid-area: texto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 3vw, 3rem);
}

.hero-texto > * + * {
  margin-top: 1.25rem;
}

/* El primer tramo del titular, en ligera y tinta suave: 8.50:1 (AAA). */
.h1-suave {
  color: var(--ink-soft);
}

/* El área de dibujo pertenece a la hoja: sin marco propio ni esquinas
   redondeadas, solo el filete que la separa del texto. */
.viz-hero {
  grid-area: viz;
  aspect-ratio: 16 / 10;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

/* En tableta la hoja es ancha pero apilada: a 16/10 el área de dibujo vacía
   media pantalla y empuja el cajetín fuera de la vista. Se aplana. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .viz-hero {
    aspect-ratio: 21 / 9;
  }
}

/* La ruta del centro es el dato más prescindible de la franja: por debajo de
   escritorio se quita antes que dejarla quebrar la línea del encabezado. */
@media (max-width: 61.99rem) {
  .hero-meta-ruta {
    display: none;
  }
}

/* Cajetín: la fila de datos de la carátula. El truco de `gap: 1px` sobre
   fondo --line dibuja los separadores en ambos ejes se pliegue como se
   pliegue. */
.hero-cajetin {
  grid-area: cajetin;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: none;
  border-top: 1px solid var(--line);
  background-color: var(--line);
}

/* Columnas explícitas por corte y la última celda cruzando la fila: así el
   cajetín siempre cierra en filas completas, sin huecos del color del
   separador. */
.celda:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .hero-cajetin {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.celda {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: 0.6rem 1.1rem 0.7rem;
  background-color: var(--bg);
}

.celda-k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.celda-v {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
}

@media (min-width: 62rem) {
  .hero-sheet {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "meta meta"
      "texto viz"
      "cajetin cajetin";
  }

  .viz-hero {
    aspect-ratio: auto;
    height: 100%;
    min-height: 24rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .hero-cajetin {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .celda:last-child {
    grid-column: auto;
  }
}

/* --- La escena del traslado (SVG de la carátula) ---------------------------
   El dibujo del hero: geometría en el HTML, color aquí (con tokens),
   movimiento en anim.css. TODO lo declarado en este bloque es el ESTADO
   FINAL: ruta completa, estaciones encendidas y camión en la planta. Quien
   navegue sin JavaScript ve exactamente esto; anim.css solo lo retrasa,
   nunca lo cambia.
   -------------------------------------------------------------------------- */

.escena-traslado {
  width: 100%;
  height: 100%;
}

/* Rótulos del plano: la misma voz monoespaciada de las láminas. El tamaño va
   en unidades del viewBox: escala con el dibujo, como en un plano impreso. */
.escena-traslado .rotulo {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--ink);
}

.escena-traslado .rotulo-suave {
  font-weight: 500;
  fill: var(--ink-soft);
}

.escena-traslado .terreno path {
  fill: none;
  stroke: rgba(82, 183, 136, 0.2);
  stroke-width: 1;
}

.escena-traslado .poligono path {
  fill: rgba(82, 183, 136, 0.05);
  stroke: rgba(82, 183, 136, 0.4);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.escena-traslado .marca-linea {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1;
  opacity: 0.6;
}

.escena-traslado .marca-flecha {
  fill: var(--ink-soft);
  opacity: 0.7;
}

/* La alineación prevista: el plan de viaje, en guiones discretos. */
.escena-traslado .ruta-plan {
  fill: none;
  stroke: rgba(242, 246, 243, 0.25);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}

/* La traza registrada: el único trazo ámbar continuo de la lámina. */
.escena-traslado .ruta-trazo {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
}

.escena-traslado .estacion-anillo {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.escena-traslado .estacion-punto {
  fill: var(--amber);
}

.escena-traslado .camion-caja {
  fill: var(--ink);
}

.escena-traslado .camion-cabina {
  fill: var(--amber);
}

.escena-traslado .ping {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  opacity: 0; /* solo se enciende durante el viaje (anim.css) */
}

/* Estado de reposo del camión: en la planta, orientado como llega la ruta.
   Es también su posición sin JavaScript y sin soporte de offset-path. */
.escena-traslado .camion {
  transform: translate(520px, 72px) rotate(-20deg);
}

/* Con soporte de motion path, la posición pasa a medirse sobre la propia
   ruta (offset-distance: 100% = la planta). anim.css anima esa distancia. */
@supports (offset-path: path("M0 0H1")) {
  .escena-traslado .camion {
    transform: none;
    offset-path: path("M80 300 C135 298 155 268 195 246 C225 229 256 206 300 195 C348 183 378 178 408 152 C438 126 466 92 520 72");
    offset-rotate: auto;
    offset-distance: 100%;
  }
}

/* --- Láminas de plano: la ruta continua y la analítica ---------------------
   Dos escenas más de la misma serie: mismo reparto que la carátula
   (geometría en el HTML, color aquí, movimiento en anim.css) y misma regla:
   TODO lo declarado en este bloque es el ESTADO FINAL. `.plano` reúne la voz
   común —rótulos, terreno, polígono, alineaciones— y cada escena añade lo
   suyo. El ámbar sigue reservado a lo registrado y a la verificación.
   -------------------------------------------------------------------------- */

.plano {
  width: 100%;
  height: 100%;
}

.plano .rotulo {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--ink);
}

.plano .rotulo-suave {
  font-weight: 500;
  fill: var(--ink-soft);
}

.plano .terreno path {
  fill: none;
  stroke: rgba(82, 183, 136, 0.2);
  stroke-width: 1;
}

.plano .poligono path {
  fill: rgba(82, 183, 136, 0.05);
  stroke: rgba(82, 183, 136, 0.4);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.plano .ruta-plan {
  fill: none;
  stroke: rgba(242, 246, 243, 0.25);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}

.plano .ping {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  opacity: 0; /* solo late durante el viaje (anim.css) */
}

/* Escena de la ruta continua (Lám. 03): una traza, cuatro estaciones y sus
   viñetas en miniatura. Dos variantes del mismo dibujo: `ruta-ancha` (una
   fila) y `ruta-apilada` (serpentina en dos filas, para móvil). Las viñetas
   comparten coordenadas locales en ambas, así que el reposo del marcador y
   su offset-path se declaran UNA vez. */

.viz-ruta {
  margin-top: clamp(2rem, 5vw, 3rem);
  aspect-ratio: auto; /* la altura la da el propio SVG visible */
}

.escena-ruta {
  height: auto;
}

.ruta-ancha {
  aspect-ratio: 1200 / 360;
}

.ruta-apilada {
  display: none;
  aspect-ratio: 640 / 672;
}

@media (max-width: 47.99rem) {
  .ruta-ancha {
    display: none;
  }

  .ruta-apilada {
    display: block;
  }
}

/* La traza registrada: el único trazo ámbar continuo de la lámina. */
.escena-ruta .ruta-trazo {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Estaciones: anillo con fondo de página para que la traza no lo cruce. */
.escena-ruta .estacion-anillo {
  fill: var(--bg);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.escena-ruta .estacion-punto {
  fill: var(--amber);
}

.escena-ruta .est-rotulo {
  font-size: 16px;
}

/* En la variante apilada el dibujo se ve a media escala: los rótulos suben
   de cuerpo para seguir siendo legibles a 360 px de ventana. */
.ruta-apilada .rotulo {
  font-size: 16px;
}

.ruta-apilada .est-rotulo {
  font-size: 20px;
}

/* Viñeta de origen: bocamina, radio GPS y punto de evidencia. */
.escena-ruta .vin-glifo {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}

.escena-ruta .radio-anillo {
  fill: rgba(82, 183, 136, 0.05);
  stroke: rgba(82, 183, 136, 0.6);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.escena-ruta .evidencia-punto {
  fill: var(--amber);
}

/* Viñeta de traslado: puntos registrados y marcador de posición. */
.escena-ruta .punto {
  fill: var(--amber);
  opacity: 0.9;
}

.escena-ruta .marcador-anillo {
  fill: rgba(13, 33, 26, 0.85);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.escena-ruta .marcador-punto {
  fill: var(--amber);
}

/* Reposo del marcador: el final del tramo, en coordenadas LOCALES de la
   viñeta (el translate del grupo lo lleva a su sitio en cada variante).
   Con motion path, la posición se mide sobre la propia alineación. */
.escena-ruta .marcador {
  transform: translate(198px, 26px);
}

@supports (offset-path: path("M0 0H1")) {
  .escena-ruta .marcador {
    transform: none;
    offset-path: path("M6 130 C50 104 95 82 140 62 C162 52 180 40 198 26");
    offset-rotate: 0deg;
    offset-distance: 100%;
  }
}

/* Viñeta de recepción: el código, su lectura y el conforme. */
.escena-ruta .qr-esquina {
  fill: none;
  stroke: rgba(242, 246, 243, 0.4);
  stroke-width: 1;
}

.escena-ruta .qr-buscador rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.escena-ruta .qr-buscador .qr-buscador-centro {
  fill: var(--ink);
  stroke: none;
}

.escena-ruta .qr-celdas rect {
  fill: var(--ink);
  opacity: 0.85;
}

.escena-ruta .lector {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  opacity: 0; /* solo se ve durante la pasada de lectura (anim.css) */
}

.escena-ruta .conforme-aro {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
}

.escena-ruta .conforme-visto {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Viñeta del expediente: folios, índice y sello. */
.escena-ruta .folio {
  fill: var(--green-800);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.escena-ruta .indice-linea {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

.escena-ruta .sello-aro {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
}

.escena-ruta .sello-visto {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Escena de reportes: barras, tendencia y anillo. */

.escena-reportes .eje {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

.escena-reportes .barra {
  fill: rgba(82, 183, 136, 0.3);
  stroke: rgba(82, 183, 136, 0.65);
  stroke-width: 1;
}

.escena-reportes .linea-tendencia {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.escena-reportes .punto-tendencia {
  fill: var(--amber);
}

.escena-reportes .aro-pista {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 5;
}

.escena-reportes .aro-progreso {
  fill: none;
  stroke: var(--amber);
  stroke-width: 5;
  /* Corte recto: con `round`, el dash de arranque `0 100` del estado
     pre-animación pintaría un punto ámbar antes de tiempo. */
  stroke-linecap: butt;
  stroke-dasharray: 72 28; /* pathLength=100: el 72 % del anillo */
}

.escena-reportes .cifra {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--ink);
}

/* Escena del semáforo (Lám. 06): la caja de tres luces y, al lado, el estado
   que le corresponde a cada una. SIN ROJO: la paleta no lo tiene y no se
   estrena por un dibujo. El rechazo se lee por ausencia —luz apagada, solo
   contorno—, que además es como se ve un semáforo real. */

.escena-semaforo .rotulo {
  font-size: 15px;
}

.escena-semaforo .rotulo-suave {
  font-size: 13px;
}

.escena-semaforo .semaforo-titulo {
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink-soft);
}

/* En móvil la lámina se ve a media escala y estos rótulos caerían por debajo
   de los 8 px reales. Mismo remedio que la variante apilada de la ruta: subir
   el cuerpo en unidades del viewBox. Los topes están medidos sobre la línea
   más larga de cada estilo —«REQUIERE SUSTENTO» y el encabezado— para que
   ninguna se salga de los 640 del dibujo. */
@media (max-width: 47.99rem) {
  .escena-semaforo .rotulo {
    font-size: 26px;
  }

  .escena-semaforo .rotulo-suave {
    font-size: 21px;
  }

  .escena-semaforo .semaforo-titulo {
    font-size: 17px;
  }
}

.escena-semaforo .semaforo-caja {
  fill: rgba(255, 255, 255, 0.025);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.escena-semaforo .luz {
  stroke-width: 1.5;
}

.escena-semaforo .luz-ok {
  fill: rgba(82, 183, 136, 0.85);
  stroke: var(--green-400);
}

.escena-semaforo .luz-obs {
  fill: rgba(244, 165, 36, 0.9);
  stroke: var(--amber);
}

.escena-semaforo .luz-off {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.32);
}

.escena-semaforo .conector {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.escena-semaforo .semaforo-filete {
  fill: none;
  stroke: var(--line-frame);
  stroke-width: 1;
}

/* Los 17 puntos de control. Encendidos es el estado final: la revisión pasó
   entera. anim.css los enciende de uno en uno antes de que aparezca ningún
   estado del semáforo. */
.escena-semaforo .pto {
  fill: rgba(82, 183, 136, 0.55);
  stroke: var(--green-400);
  stroke-width: 1;
}

/* --- Escena de la arquitectura híbrida (Lám. 05) ---------------------------
   Teléfono, enlace cifrado y plataforma. Los «dispositivos» comparten voz
   —cuerpo tenue con filete de tinta suave, pantalla más oscura— para que el
   protagonismo se lo lleven el enlace y los paquetes, que son el mensaje.
   -------------------------------------------------------------------------- */

.escena-hibrido .rotulo {
  font-size: 15px;
}

.escena-hibrido .disp-cuerpo {
  fill: rgba(255, 255, 255, 0.025);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.escena-hibrido .disp-pantalla {
  fill: rgba(13, 33, 26, 0.55);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.escena-hibrido .disp-glifo {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}

.escena-hibrido .disp-punto {
  fill: var(--amber);
}

.escena-hibrido .disp-boton,
.escena-hibrido .disp-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

/* El enlace usa el mismo guionado que la alineación prevista de los planos:
   es una vía, no un trazo registrado. */
.escena-hibrido .enlace {
  fill: none;
  stroke: rgba(242, 246, 243, 0.28);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
}

.escena-hibrido .candado-cuerpo {
  fill: rgba(82, 183, 136, 0.2);
  stroke: var(--green-400);
  stroke-width: 1.2;
}

.escena-hibrido .candado-arco {
  fill: none;
  stroke: var(--green-400);
  stroke-width: 1.2;
}

.escena-hibrido .paquete {
  fill: var(--amber);
}

.escena-hibrido .fila {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
}

/* --- Escena del dossier (Lám. 08) ------------------------------------------
   Búsqueda, las cuatro piezas y el expediente cerrado con su sello. Las hojas
   toman el verde de tarjeta para separarse del lienzo sin necesitar sombra.
   -------------------------------------------------------------------------- */

.escena-dossier .rotulo {
  font-size: 15px;
}

.escena-dossier .busca-campo {
  fill: rgba(0, 0, 0, 0.22);
  stroke: var(--line-control);
  stroke-width: 1;
}

.escena-dossier .busca-lupa {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.escena-dossier .pieza-hoja,
.escena-dossier .dossier-tapa {
  fill: var(--green-800);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.escena-dossier .pieza-linea,
.escena-dossier .dossier-linea {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

.escena-dossier .sello-aro {
  fill: var(--green-900);
  stroke: var(--amber);
  stroke-width: 1.5;
}

.escena-dossier .sello-visto {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Escena de la huella (Lám. 09) -----------------------------------------
   El mismo registro dos veces: guardado y retocado. El único ámbar del caso
   de arriba es inexistente —va todo en verde de conformidad— y el de abajo
   marca la línea editada y el aspa: el color hace de conclusión.
   -------------------------------------------------------------------------- */

.escena-huella .rotulo {
  font-size: 15px;
}

.escena-huella .huella-titulo {
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink-soft);
}

.escena-huella .huella-filete {
  fill: none;
  stroke: var(--line-frame);
  stroke-width: 1;
}

.escena-huella .reg-ficha {
  fill: rgba(13, 33, 26, 0.55);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.escena-huella .reg-linea {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.5;
}

.escena-huella .reg-linea-editada {
  stroke: var(--amber);
  stroke-width: 2;
}

.escena-huella .huella-cifra {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  fill: var(--ink);
}

.escena-huella .marca-aro {
  fill: none;
  stroke-width: 1.5;
}

.escena-huella .marca-visto,
.escena-huella .marca-aspa {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.escena-huella .caso-ok .marca-aro,
.escena-huella .caso-ok .marca-visto {
  stroke: var(--green-400);
}

.escena-huella .caso-alterado .marca-aro,
.escena-huella .caso-alterado .marca-aspa {
  stroke: var(--amber);
}

/* Flechas: vocabulario común de las láminas 08 y 09. */
.escena-dossier .flecha,
.escena-huella .flecha {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.escena-dossier .flecha-punta,
.escena-huella .flecha-punta {
  fill: var(--ink-soft);
}

/* Mismo remedio de escala que el semáforo: en móvil estas láminas se ven a
   poco más de media escala y los rótulos caerían por debajo de los 8 px
   reales. Los topes están medidos sobre la línea más larga de cada escena. */
@media (max-width: 47.99rem) {
  .escena-hibrido .rotulo,
  .escena-dossier .rotulo,
  .escena-huella .rotulo {
    font-size: 22px;
  }

  .escena-hibrido .rotulo-suave,
  .escena-dossier .rotulo-suave,
  .escena-huella .rotulo-suave {
    font-size: 18px;
  }

  .escena-huella .huella-titulo {
    font-size: 17px;
  }

  .escena-huella .huella-cifra {
    font-size: 22px;
  }

  /* El dossier es la escena más apretada de las tres —cinco rótulos en una
     misma fila— y con el bump general «CIERRE» y «EXPEDIENTE» se tocan. Dos
     puntos menos y las cinco palabras vuelven a caber. */
  .escena-dossier .rotulo {
    font-size: 20px;
  }

  .escena-dossier .rotulo-suave {
    font-size: 16px;
  }
}

/* --- 2. El problema -------------------------------------------------------
   Composición editorial: el enunciado a la izquierda, el desarrollo a la
   derecha. Sin envoltorios: se resuelve colocando los hijos en la rejilla.
   -------------------------------------------------------------------------- */

.problema {
  display: grid;
  gap: 1.4rem;
}

.problema h2 {
  max-width: 20ch;
}

/* Hijo directo, no descendiente: la comparativa que va debajo también tiene
   párrafos, y una colocación en rejilla heredada por ellos los mandaría a la
   columna 2 de ESTA rejilla, fuera de su propia celda. */
.problema > p {
  color: var(--ink-soft);
}

@media (min-width: 56rem) {
  .problema {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    row-gap: 1.3rem;
  }

  .problema > .lamina {
    grid-column: 1 / -1;
  }

  .problema > h2 {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .problema > p {
    grid-column: 2;
  }

  .comparativa {
    grid-column: 1 / -1;
  }
}

/* La comparativa: cinco veces el mismo trabajo, antes y después. No es una
   <table> —no hay datos que cruzar entre filas y columnas, solo pares— y por
   eso cada fila trae sus dos rótulos escritos en el HTML: en móvil se apilan y
   en escritorio quedan como encabezado de su celda, sin necesidad de una
   cabecera aparte que luego haya que reponer con ::before. */

.comparativa {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}

.comp {
  display: grid;
  gap: 0.9rem;
  padding-block: clamp(1.25rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}

.comp h3 {
  font-size: var(--step-0);
  font-weight: 640;
  max-width: none;
}

.comp-lado {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.comp p {
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 48ch;
}

/* El lado de hoy se lee apagado; el de Kuntur, en tinta plena. La jerarquía
   la hace el color, no un icono ni un tachado. */
.comp-antes p {
  color: var(--ink-soft);
}

.comp-ahora p {
  color: var(--ink);
}

.comp-etq {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.comp-ahora .comp-etq {
  color: var(--amber);
}

@media (min-width: 52rem) {
  .comp {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
}

/* --- 3. Qué es Kuntur -----------------------------------------------------
   Los cuatro ejes de valor, numerados como el índice del expediente. Mismo
   gesto que los rasgos del expediente pero sobre el fondo de página: la cifra
   se apoya en el filete con --bg de máscara.
   -------------------------------------------------------------------------- */

.valor .intro {
  margin-top: 1rem;
}

.valor-ejes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  counter-reset: eje;
}

.valor-ejes > li {
  position: relative;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  counter-increment: eje;
}

.valor-ejes > li::before {
  content: counter(eje, decimal-leading-zero);
  position: absolute;
  top: -0.8rem;
  left: 0;
  padding-right: 0.6rem;
  background-color: var(--bg);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
}

.valor-ejes h3 {
  margin-bottom: 0.55rem;
  font-size: var(--step-0);
  font-weight: 640;
}

.valor-ejes p {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

/* --- 3. El recorrido ------------------------------------------------------
   Una sola lámina ancha con la ruta continua y sus cuatro estaciones, y
   debajo las cuatro paradas en texto: columnas numeradas como el índice del
   expediente (1 columna en móvil, 2 en tableta, 4 en escritorio).
   -------------------------------------------------------------------------- */

.recorrido .intro {
  margin-top: 1rem;
}

.paradas {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  counter-reset: parada;
}

.parada {
  position: relative;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  counter-increment: parada;
}

/* La cifra de la parada se apoya sobre el filete, con el fondo de la página
   como máscara: el mismo gesto que los rasgos del expediente. */
.parada::before {
  content: counter(parada, decimal-leading-zero);
  position: absolute;
  top: -0.8rem;
  left: 0;
  padding-right: 0.6rem;
  background-color: var(--bg);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.parada h3 {
  margin-bottom: 0.6rem;
  font-size: var(--step-0);
  font-weight: 640;
}

.parada p {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

/* Sin esto, dos párrafos seguidos dentro de una parada se pegan: el reajuste
   del principio deja los <p> a margen cero y aquí no había nada que lo
   repusiera. El .hito trae su propio filete y no necesita este margen, pero
   tampoco le estorba. */
.parada p + p {
  margin-top: 0.8rem;
}

/* El hito de control: lo que tiene que quedar registrado para que la etapa
   siguiente pueda empezar. Se separa del cuerpo con un filete y sube a tinta
   plena — es la frase que el lector se lleva de cada parada. */
.parada .hito {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.hito-etq {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

@media (min-width: 40rem) {
  .paradas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .paradas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- 5. Módulos -----------------------------------------------------------
   Seis fichas iguales sobre banda. Nada de iconos: la etiqueta monoespaciada
   dice dónde vive el módulo (web, app o los dos) y ese es todo el adorno que
   necesita.
   -------------------------------------------------------------------------- */

.modulos .intro {
  margin-top: 1rem;
}

.viz-hibrido {
  aspect-ratio: 640 / 260;
  max-width: 46rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* Columnas contadas a mano, no `auto-fit`: son seis fichas y a este ancho el
   reparto automático da cuatro, que deja la última fila con dos huecos. Dos y
   tres cierran filas completas. */
.modulos-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

@media (min-width: 40rem) {
  .modulos-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .modulos-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.modulo {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: clamp(1.3rem, 3vw, 1.75rem);
  background-color: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.modulo-etq {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.modulo h3 {
  font-size: var(--step-0);
  font-weight: 640;
}

.modulo p:not(.modulo-etq) {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

/* --- 6. Control en recepción ----------------------------------------------
   El semáforo, y debajo dos columnas: lo que el sistema revisa y quién firma
   al final. Las dos son listas marcadas, así que la lámina se lee de un
   vistazo sin más aparato.
   -------------------------------------------------------------------------- */

.control .intro {
  margin-top: 1rem;
}

.viz-semaforo {
  aspect-ratio: 640 / 274;
  max-width: 46rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.control-columnas {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.control-bloque h3,
.seguridad-bloque h3 {
  margin-bottom: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  font-weight: 640;
}

@media (min-width: 52rem) {
  .control-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 7. Expediente --------------------------------------------------------
   La pieza que distingue al producto: banda propia y rasgos numerados como
   un índice.
   -------------------------------------------------------------------------- */

.expediente .intro {
  margin-top: 1rem;
}

.expediente-rasgos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  counter-reset: rasgo;
}

.expediente-rasgos > li {
  position: relative;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  counter-increment: rasgo;
}

.expediente-rasgos > li::before {
  content: counter(rasgo, decimal-leading-zero);
  position: absolute;
  top: -0.8rem;
  left: 0;
  padding-right: 0.6rem;
  background-color: var(--surface);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.expediente-rasgos h3 {
  font-size: var(--step-0);
  font-weight: 640;
  margin-bottom: 0.5rem;
}

.expediente-rasgos p {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* --- 8. Auditoría rápida --------------------------------------------------
   La lámina más corta de la serie: entradilla, la escena del dossier y una
   frase de cierre en tinta plena.

   Llevaba dos columnas con el desglose de cada pieza del expediente y con los
   criterios de búsqueda, y se retiraron a propósito: el sitio es público y eso
   era la receta del producto. Si algún día vuelven, van en una rejilla de dos
   como la de la Lám. 06 (.control-columnas), que es exactamente la misma
   forma; por eso aquí no queda un juego de reglas muerto esperándolas.
   -------------------------------------------------------------------------- */

.auditoria .intro {
  margin-top: 1rem;
}

/* Más ancha que las otras: son cuatro piezas en fila y el expediente al final,
   y por debajo de este ancho las hojas se vuelven ilegibles. */
.viz-dossier {
  aspect-ratio: 640 / 270;
  max-width: 54rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.auditoria-cierre {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: 64ch;
  color: var(--ink);
}

/* --- 9. Datos y seguridad -------------------------------------------------
   Tres bloques sobre banda. Se reparten en columnas cuando hay sitio y se
   apilan cuando no; el filete bajo cada encabezado los separa igual.
   -------------------------------------------------------------------------- */

.seguridad .intro {
  margin-top: 1rem;
}

.viz-huella {
  aspect-ratio: 640 / 244;
  max-width: 46rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.seguridad-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 4vw, 2.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

/* --- 10. Alcance ----------------------------------------------------------
   Dos fichas arriba y una tercera que cruza la rejilla de lado a lado: la
   analítica es la que trae lámina, y su banda ancha rompe la simetría de
   catálogo además de dar el aire horizontal que pide la vista aérea.
   -------------------------------------------------------------------------- */

.alcance .intro {
  margin-top: 1rem;
}

.alcance-grupos {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.grupo {
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.grupo h3 {
  margin-bottom: 0.75rem;
}

.grupo p {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

.grupo strong {
  color: var(--ink);
  font-weight: 620;
}

.grupo .viz {
  margin-top: 1.4rem;
  aspect-ratio: 16 / 9;
}

@media (min-width: 52rem) {
  .alcance-grupos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #alcance-analitica {
    grid-column: 1 / -1;
  }

  /* Lámina apaisada bajo el texto, no a su lado: a este ancho una lámina
     lateral sería mucho más alta que el párrafo y dejaría un hueco. */
  #alcance-analitica .viz {
    aspect-ratio: 16 / 4.5;
  }
}

/* --- 11. Para quién es ----------------------------------------------------
   Cinco fichas, cada una con su reto arriba —el problema del puesto, en tinta
   plena— y debajo lo que cambia. El reto va primero a propósito: quien se
   reconoce en él sigue leyendo.
   -------------------------------------------------------------------------- */

.perfiles .intro {
  margin-top: 1rem;
}

/* Cinco fichas: en tres columnas la última fila queda con dos, que se lee como
   remate; en cuatro quedaría una sola ficha suelta. */
.perfiles-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

@media (min-width: 40rem) {
  .perfiles-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .perfiles-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.perfil {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: clamp(1.3rem, 3vw, 1.75rem);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.perfil h3 {
  font-size: var(--step-0);
  font-weight: 640;
}

.perfil-reto {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.6;
}

.perfil-etq {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.perfil p:not(.perfil-reto) {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

/* --- 12. Preguntas frecuentes ---------------------------------------------
   <details> nativo, sin una línea de JavaScript: el navegador ya sabe abrir y
   cerrar, y funciona igual con el teclado y con lector de pantalla. El marcador
   propio se retira (::-webkit-details-marker para Safari) y se dibuja uno con
   el vocabulario del sitio: una cruz de registro que gira a guion al abrirse.
   -------------------------------------------------------------------------- */

.faq-lista {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
  max-width: 60rem;
}

.pregunta {
  border-bottom: 1px solid var(--line);
}

.pregunta summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(0.9rem, 2.5vw, 1.15rem);
  font-size: var(--step-1);
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

/* El marcador: una escuadra ámbar que apunta abajo y se voltea al abrirse —el
   mismo ángulo de las marcas de registro de los botones y las láminas. Se
   dibuja con BORDES, no con degradados: un trazo de 1px pintado por
   `linear-gradient` cae en posiciones fraccionarias de píxel y el navegador lo
   difumina a gris; el borde se ajusta a la rejilla y sale limpio. Va al final
   de la línea para que la pregunta arranque alineada con el resto de la
   lámina. */
.pregunta summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  margin-bottom: 0.2rem; /* el giro deja el peso abajo; se recentra a ojo */
  border-right: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  transform: rotate(45deg);
}

.pregunta[open] summary::after {
  margin-bottom: 0;
  margin-top: 0.2rem;
  transform: rotate(-135deg);
}

.pregunta summary:hover {
  color: var(--amber);
}

.pregunta p {
  padding-bottom: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 68ch;
}

/* --- 13. Contacto ---------------------------------------------------------
   Banda de cierre en verde de marca. Sobre green-700: ink 10.16:1,
   ink-soft 5.60:1, amber 5.41:1 — todos AA o mejor.
   -------------------------------------------------------------------------- */

.contacto .intro {
  margin-top: 1rem;
  color: var(--ink);
}

/* El formulario de demo (L4.1). Panel instrumental: fondo green-900, rótulos
   monoespaciados, canto casi vivo. Nace con `hidden` en el HTML y contact.js
   lo muestra; estas reglas no lo tocan. */
/* `hidden` tiene que ganarle SIEMPRE al display de la clase: el estilo de
   agente de usuario para [hidden] pierde contra el display:grid de abajo, y
   sin esta regla el formulario se vería sin JavaScript (nace con `hidden`) y
   seguiría en pantalla tras el éxito (se retira con `hidden`). */
.contacto-form[hidden] {
  display: none;
}

.contacto-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem 1.4rem;
  max-width: 46rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--green-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contacto-form-rotulo {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.campo {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.campo label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.campo input {
  min-width: 0;
  padding: 0.7rem 0.9rem;
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--step-0);
}

.campo input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-color: var(--amber);
}

/* Error de campo: en ámbar, la única voz de alerta del sitio (no hay rojo en
   la paleta y no se estrena por esto). Amber sobre green-900: 8.21:1. */
.campo input[aria-invalid="true"] {
  border-color: var(--amber);
}

.campo-error {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--amber);
}

/* El honeypot: fuera de pantalla POR POSICIÓN, nunca display:none (hay bots
   que se saltan lo que un display:none delata). Ver comentario en el HTML. */
.hp-campo {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto-form-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* .btn está pensado para <a>; el <button> del formulario necesita además
   quitarse el fondo de agente de usuario y declarar el cursor. */
.contacto-form .btn {
  background: none;
  cursor: pointer;
}

.contacto-form .btn:hover:not([disabled]) {
  background: var(--amber);
}

.contacto-form .btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.form-estado {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.form-error {
  padding: 0.9rem 1.1rem;
  background-color: rgba(244, 165, 36, 0.07);
  border: 1px solid rgba(244, 165, 36, 0.45);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink);
  max-width: none;
}

/* Dos columnas desde tableta: (nombre, empresa) / (rol, correo) / (teléfono,
   acciones). El botón queda a la altura del último campo, cerrando la ficha. */
@media (min-width: 40rem) {
  .contacto-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contacto-form-rotulo,
  .form-error {
    grid-column: 1 / -1;
  }

  .contacto-form-acciones {
    align-self: end;
    padding-bottom: 0.15rem;
  }
}

/* Estado de éxito: la constancia de que la solicitud quedó registrada, en el
   mismo lenguaje de cajetín que el resto de la lámina. */
.contacto-exito {
  max-width: 46rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--green-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contacto-exito:focus {
  outline: none; /* recibe foco programático; el cambio visual ya es evidente */
}

.contacto-exito-rotulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* El visto del rótulo, dibujado sin imagen: eco del sello del expediente. */
.contacto-exito-rotulo::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--amber);
  border-radius: 50%;
  font-size: 0.8rem;
}

.contacto-exito p:not(.contacto-exito-rotulo) {
  color: var(--ink);
  max-width: 56ch;
}

/* El canal directo: UNA sola celda, WhatsApp. Mismo lenguaje de cajetín que
   el formulario y la constancia de éxito (fondo green-900, rótulo mono en
   ámbar), para que se lea como pieza deliberada y no como resto de una
   grilla. El número de teléfono no se imprime: vive solo en el href. */
.contacto-canal {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  max-width: 46rem;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--green-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contacto-canal-rotulo {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.contacto-canal p:not(.contacto-canal-rotulo) {
  color: var(--ink);
  max-width: 56ch;
}

.contacto-canal .btn {
  margin-top: 0.35rem;
}

/* ==========================================================================
   7. PIE DE PÁGINA
   ========================================================================== */

.site-footer {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.footer-marca {
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* El pie es el índice de láminas: están las once, no una selección. Con esa
   cantidad, una fila envuelta se lee como un párrafo de enlaces; en dos
   columnas se lee como índice, que es lo que es. */
.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
}

.footer-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-nav a,
.footer-contacto a {
  color: var(--ink-soft);
  text-decoration: none;
}

.footer-nav a:hover,
.footer-contacto a:hover {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.footer-legal,
.footer-copy {
  max-width: 70ch;
  line-height: 1.6;
}

.footer-legal {
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* Tres columnas: identidad (con la letra pequeña debajo), navegación y
   contacto. La letra pequeña vive dentro de la primera columna en vez de
   cruzar el pie: así conserva su medida de lectura y no hace falta un filete
   que —limitado por esa misma medida— quedaría cortado a media anchura. */
@media (min-width: 52rem) {
  .site-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.7fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 1.5rem;
    align-content: start;
  }

  .footer-marca {
    grid-area: 1 / 1;
  }

  .footer-nav {
    grid-area: 1 / 2 / span 3 / 3;
  }

  .footer-contacto {
    grid-area: 1 / 3 / span 3 / 4;
    flex-direction: column;
    gap: 0.6rem;
  }

  .footer-nav ul {
    gap: 0.6rem 1.5rem;
  }

  .footer-legal {
    grid-area: 2 / 1;
    max-width: 54ch;
    padding-top: 0;
    border-top: 0;
  }

  .footer-copy {
    grid-area: 3 / 1;
  }
}

/* ==========================================================================
   8. MOVIMIENTO
   Nada de esto es necesario para leer la página: son transiciones de estado y
   una única entrada escalonada al cargar. Todo se apaga con reduced-motion.

   Importante: los elementos [data-reveal] NO se ocultan aquí. La revelación
   al hacer scroll vive en reveal.js + anim.css, condicionada a la clase `js`
   que pone el script; si esta hoja los pusiera a opacity:0, quien navegue
   sin JS no vería nunca las láminas.
   ========================================================================== */

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

  a,
  .btn,
  .site-nav a,
  .campo input,
  .skip-link {
    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      color 0.18s ease,
      transform 0.22s ease,
      text-decoration-thickness 0.12s ease;
  }

  .btn:active {
    transform: translateY(1px);
  }

  /* Entrada de la carátula: la hoja aparece y su contenido se escalona. */
  .hero-sheet {
    animation: kuntur-entrada 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }

  .hero-texto > h1,
  .hero-texto > .lede,
  .hero-texto > .acciones,
  .hero-cajetin {
    animation: kuntur-entrada 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }

  .hero-texto > h1 {
    animation-delay: 0.08s;
  }

  .hero-texto > .lede {
    animation-delay: 0.16s;
  }

  .hero-texto > .acciones {
    animation-delay: 0.24s;
  }

  .hero-cajetin {
    animation-delay: 0.32s;
  }
}

@keyframes kuntur-entrada {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }
}