/* ==========================================================================
   JM Rutas · Red de Carga — Sistema de diseño web v3.0
   «La ruta como relato» · paleta «Territorio» (tokens v3 en §01b)

   Un solo archivo para todo el sitio. Las páginas interiores NO crean su
   propio CSS salvo para piezas únicas (p-<pagina>.css, < 6 KB).

   Índice
   00. Fuentes (autoalojadas, woff2, font-display: swap)
   01. Tokens: color, tipo, espacio, radios, sombras, z-index, motion
   01b. Tokens v3 «Territorio» y tramos [data-tramo] (manda sobre 01)
   02. Reset y base
   03. Retícula (12 columnas con líneas con nombre + sangrado)
   04. Tipografía y utilidades de texto
   05. Utilidades de layout
   06. Botones y enlaces
   07. Etiquetas de estado (honestidad visible)
   08. Fotografía: <picture>, «Imagen referencial», parallax
   09. Cabecera transparente → sólida
   10. Menú overlay (mega)
   11. Odómetro fijo
   12. Hero video «Salida» y hero interior
   13. Cinta / marquee de cifras
   14. Manifiesto sticky (palabra a palabra)
   15. Cifras con contador y fuente
   16. Tarjetas de servicio con foto
   17. Cómo funciona (scroll horizontal)
   18. Collage editorial
   19. Panel Torre JM (simulación)
   20. Mapa de corredores
   21. Red JM: comparativa / calculadora
   22. Furgón y banda de delineadores
   23. Timeline de compuertas
   24. Ruta Talento
   25. Compromisos y Garantía JM
   26. Acordeón
   27. Pestañas
   28. Formularios y formulario multi-paso
   29. Llegada (cierre)
   30. Pie de página
   31. Revelados y motion (IO + scroll-driven)
   32. Esquema oscuro opcional (solo páginas utilitarias)
   33. Reduced motion
   34. Impresión
   35. Capa v3: limpieza anti-IA, odómetro navegable, tramos vivos, créditos
   ========================================================================== */


/* ==========================================================================
   00. Fuentes
   Archivo (Omnibus-Type, OFL) variable wght 100–900 · wdth 62–125.
   Atkinson Hyperlegible Next (Braille Institute, OFL) variable wght 200–800.
   Subconjunto «latin» (cubre español: ñ, tildes, ¿¡, «»).
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"),
       url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/atkinson-next-var.woff2") format("woff2-variations"),
       url("../fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/atkinson-next-var-italic.woff2") format("woff2-variations"),
       url("../fonts/atkinson-next-var-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* Respaldo métrico: reduce el salto de diseño mientras carga la fuente. */
@font-face {
  font-family: "Archivo Respaldo";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 88%;
  descent-override: 22%;
}


/* ==========================================================================
   01. Tokens
   Paleta oficial (identidad_final/tokens.css) + escalas derivadas.
   Contraste verificado (WCAG 2.x, recalculado en v3; ver 02_Paleta §2.5):
   - Noche #10223D sobre Cal #F7F4EE ............ 14.5:1
   - Noche-600 #3B5478 sobre Cal ................  7.0:1
   - Piedra-600 #6E665B sobre Cal ...............  5.2:1  → notas y fuentes
   - Cobre #C4572A sobre Cal ....................  4.0:1  → SOLO ≥ 24px (o ≥ 18.7px bold) y gráficos
   - Cobre #C4572A sobre Noche ..................  3.6:1  → SOLO UI / ≥ 24px
   - Cobre-tinta #A3431D sobre Cal ..............  5.7:1  → texto pequeño cobre sobre claro
   - Cobre-claro #E58A5F sobre Noche ............  6.2:1  → texto pequeño cobre sobre oscuro
   - Blanco sobre Cobre-600 #B24C23 .............  5.3:1  → relleno del botón principal
   - Noche-300 #A9B6C9 sobre Noche ..............  7.8:1
   ========================================================================== */
:root {
  /* --- Marca --- */
  --noche-950: #0A1628;   /* oklch(0.19 0.04 258) fondo más profundo, tramo nocturno */
  --noche:     #10223D;   /* oklch(0.25 0.06 258) Azul Noche oficial (logo) */
  --noche-800: #1C3050;   /* oklch(0.31 0.06 257) superficies elevadas sobre noche */
  --noche-700: #2A4066;   /* oklch(0.38 0.07 257) líneas sobre noche */
  --noche-500: #4D6487;   /* oklch(0.50 0.06 256) */
  --noche-300: #A9B6C9;   /* oklch(0.77 0.03 254) texto secundario sobre noche */
  --noche-100: #DCE2EB;   /* oklch(0.91 0.01 254) */

  --cobre:       #C4572A; /* oklch(0.59 0.15 41) acento oficial · máx. 10–15 % */
  --cobre-600:   #B24C23; /* relleno de botón (AA con texto claro) */
  --cobre-700:   #963E1B; /* hover del botón */
  --cobre-tinta: #A3431D; /* texto cobre pequeño sobre fondos claros (AA) */
  --cobre-claro: #E58A5F; /* texto cobre pequeño sobre Azul Noche (AA) */
  --cobre-100:   #F6E3D8; /* fondo de etiqueta */

  /* --- Territorio (neutros cal, tintados hacia la piedra) --- */
  --cal-0:    #FBFAF7;   /* «blanco» de marca: nunca #FFF puro */
  --cal-50:   #F6F4EF;   /* fondo de página */
  --piedra:   #ECE7DE;   /* Piedra oficial · superficie 2 */
  --piedra-2: #E2DBCF;   /* superficie 3 (tramo de sierra) */
  --linea:    #DAD5CB;   /* bordes y divisores */
  --linea-2:  #C7BFB1;
  --grafito:  #3A3F44;   /* Grafito oficial · texto 2 */
  --grafito-2:#5A6069;   /* texto atenuado */

  /* --- Programa social (exclusivo de Ruta Talento) --- */
  --brote:      #2F8F7F;
  --brote-tinta:#1E6C62;  /* AA sobre claro */
  --brote-100:  #DCEFEA;

  /* --- Estados --- */
  --ok:     #2F7D4F;
  --alerta: #B7791F;
  --error:  #B3261E;

  /* --- Semánticos (se reasignan por tramo con [data-tema]) --- */
  --bg:        var(--cal-50);
  --superficie:var(--cal-0);
  --superficie-2: var(--piedra);
  --tinta:     var(--noche);
  --tinta-2:   var(--grafito);
  --tinta-3:   var(--grafito-2);
  --borde:     var(--linea);
  --acento:    var(--cobre);
  --acento-tinta: var(--cobre-tinta);
  --foco:      var(--noche);
  --logo-acento: var(--cobre);

  /* --- Tipografía --- */
  --f-display: "Archivo", "Archivo Respaldo", "Arial Narrow", Arial, system-ui, sans-serif;
  --f-texto:   "Atkinson Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida (cuarta justa ≈ 1.333; el cartel va aparte) */
  --t-cartel: clamp(3.4rem, 11.5vw + 0.5rem, 13rem);   /* 1–3 palabras: hero, llegada */
  --t-1:      clamp(2.6rem, 5.6vw + 0.6rem, 6.5rem);   /* h1 interior / h1 portada */
  --t-2:      clamp(2rem, 3.4vw + 0.7rem, 4.25rem);    /* h2 de tramo */
  --t-3:      clamp(1.35rem, 1.1vw + 1rem, 2rem);      /* h3, títulos de tarjeta */
  --t-4:      1.1875rem;                               /* h4 */
  --t-lead:   clamp(1.15rem, 0.45vw + 1rem, 1.45rem);
  --t-cuerpo: 1.0625rem;  /* 17 px */
  --t-chico:  0.9375rem;  /* 15 px */
  --t-nota:   0.8125rem;  /* 13 px · fuentes */
  --t-etiqueta: 0.78rem;
  --t-cifra:  clamp(3rem, 6.5vw, 7.5rem);

  --lh-cartel: 0.86;
  --lh-titular: 0.96;
  --lh-texto: 1.6;

  /* --- Espacio (4 pt, nombres semánticos) --- */
  --e-3xs: 0.25rem;  /* 4  */
  --e-2xs: 0.5rem;   /* 8  */
  --e-xs:  0.75rem;  /* 12 */
  --e-s:   1rem;     /* 16 */
  --e-m:   1.5rem;   /* 24 */
  --e-l:   2rem;     /* 32 */
  --e-xl:  3rem;     /* 48 */
  --e-2xl: 4rem;     /* 64 */
  --e-3xl: 6rem;     /* 96 */
  --e-4xl: 9rem;     /* 144 */

  /* Ritmo vertical: tres alturas de tramo, nunca la misma dos veces seguidas */
  --tramo:       clamp(5.5rem, 11vw, 12rem);
  --tramo-corto: clamp(3rem, 6vw, 6rem);

  /* Retícula */
  --margen:   clamp(1rem, 4vw, 3.5rem);
  --medianil: clamp(1rem, 2vw, 1.75rem);
  --ancho-max: 84rem;   /* 1344 px */
  --medida:   62ch;
  --cab-alto: 4.5rem;

  /* --- Radios: sobrios, nada de píldoras en tarjetas --- */
  --r-xs: 2px;
  --r-s:  4px;
  --r-m:  8px;
  --r-l:  14px;
  --r-pill: 999px;   /* solo chips y etiquetas */

  /* --- Sombras reales (luz cenital, tintadas a noche) --- */
  --sombra-1: 0 1px 2px rgb(16 34 61 / .06), 0 2px 6px rgb(16 34 61 / .05);
  --sombra-2: 0 2px 4px rgb(16 34 61 / .05), 0 10px 24px -6px rgb(16 34 61 / .14);
  --sombra-3: 0 4px 8px rgb(16 34 61 / .06), 0 30px 60px -18px rgb(16 34 61 / .32);

  /* --- Capas --- */
  --z-base: 1;
  --z-elevado: 10;
  --z-odometro: 40;
  --z-cab: 50;
  --z-menu: 60;
  --z-salto: 100;

  /* --- Motion --- */
  --dur-instante: 120ms;
  --dur-corta: 240ms;
  --dur-media: 480ms;
  --dur-larga: 900ms;
  --dur-cinta: 60s;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);   /* expo out: entradas */
  --ease-suave:  cubic-bezier(0.25, 1, 0.5, 1);   /* quart out: hover, estados */
  --ease-entrada:cubic-bezier(0.7, 0, 0.84, 0);   /* salidas */
  --ease-vaiven: cubic-bezier(0.65, 0, 0.35, 1);  /* toggles */
  --escalon: 60ms;

  color-scheme: light;
}

@media (min-width: 1200px) {
  /* En escritorio grande el margen izquierdo aloja el odómetro. */
  :root { --margen: clamp(5.5rem, 7vw, 8rem); }
}

/* Tramos con otro «momento del día». Se aplican a cualquier contenedor. */
[data-tema="noche"] {
  --bg: var(--noche);
  --superficie: var(--noche-800);
  --superficie-2: var(--noche-800);
  --tinta: var(--cal-0);
  --tinta-2: var(--noche-100);
  --tinta-3: var(--noche-300);
  --borde: rgb(220 226 235 / .16);
  --acento-tinta: var(--cobre-claro);
  --foco: var(--cobre-claro);
  --logo-acento: var(--cobre-claro);
  color-scheme: dark;
}
[data-tema="madrugada"] { /* más profundo: hero, torre */
  --bg: var(--noche-950);
  --superficie: var(--noche);
  --superficie-2: var(--noche-800);
  --tinta: var(--cal-0);
  --tinta-2: var(--noche-100);
  --tinta-3: var(--noche-300);
  --borde: rgb(220 226 235 / .14);
  --acento-tinta: var(--cobre-claro);
  --foco: var(--cobre-claro);
  --logo-acento: var(--cobre-claro);
  color-scheme: dark;
}
/* Tramos claros: reponen TODOS los tokens (sirven también dentro de un tramo oscuro) */
[data-tema="cal"], [data-tema="piedra"], [data-tema="brote"] {
  --bg: var(--cal-50); --superficie: var(--cal-0); --superficie-2: var(--piedra);
  --tinta: var(--noche); --tinta-2: var(--grafito); --tinta-3: var(--grafito-2);
  --borde: var(--linea); --acento: var(--cobre); --acento-tinta: var(--cobre-tinta);
  --foco: var(--noche); --logo-acento: var(--cobre);
  color-scheme: light;
}
[data-tema="piedra"] { --bg: var(--piedra); --superficie: var(--cal-50); --superficie-2: var(--cal-0); --borde: var(--linea-2); }
[data-tema="brote"]  { --bg: var(--cal-0); --acento: var(--brote); --acento-tinta: var(--brote-tinta); }


/* ==========================================================================
   01b. Tokens v3 «Territorio» (15_Web_v3/tokens-v3.css) — mandan sobre §01
   ========================================================================== */


:root {
  /* ------------------------------------------------------------------
     1. PRIMITIVOS
     ------------------------------------------------------------------ */

  /* Noche andina — el cielo de la Carretera Central a las 4:50 a. m. (ancla) */
  --noche-950: #0A1628;  /* oklch(0.200 0.040 258) fondo nocturno profundo */
  --noche:     #10223D;  /* oklch(0.252 0.057 258) AZUL NOCHE · logo */
  --noche-800: #1B3254;  /* oklch(0.317 0.068 258) superficie sobre noche */
  --noche-700: #2A4468;  /* oklch(0.384 0.070 257) líneas sobre noche */
  --noche-600: #3B5478;  /* oklch(0.442 0.067 258) texto 2 azulado sobre claro (7.0:1) */
  --noche-300: #A9B6C9;  /* oklch(0.772 0.031 258) texto 2 sobre noche (7.8:1) */
  --noche-100: #DCE2EB;  /* oklch(0.911 0.014 258) */

  /* Cobre — el metal que el Perú saca de los Andes y la luz de las 6:10 (ancla) */
  --cobre:       #C4572A; /* oklch(0.587 0.151 41) COBRE · logo · ≥ 24 px y UI */
  --cobre-600:   #B24C23; /* oklch(0.543 0.144 41) relleno de botón (blanco 5.3:1) */
  --cobre-700:   #963E1B; /* oklch(0.478 0.128 41) hover/pressed (blanco 7.0:1) */
  --cobre-tinta: #A3431D; /* oklch(0.506 0.137 40) texto cobre sobre claro (5.7:1) */
  --cobre-claro: #E58A5F; /* oklch(0.721 0.126 46) texto cobre sobre noche (6.2:1) */
  --cobre-100:   #F6E3D8; /* oklch(0.928 0.026 52) fondo de etiqueta */

  /* Cal — el blanco de cal de los muros de pueblo y de los hitos (fondo) */
  --cal-0:  #FBFAF7;     /* oklch(0.984 0.004 85) «blanco» de marca, nunca #FFF puro */
  --cal:    #F7F4EE;     /* oklch(0.968 0.009 85) fondo de página */

  /* Piedra — la pirca y el canto rodado (ancla) */
  --piedra:     #ECE7DE; /* oklch(0.929 0.013 82) PIEDRA · superficie 2 */
  --piedra-300: #D9D1C3; /* oklch(0.863 0.021 82) bordes */
  --piedra-600: #6E665B; /* oklch(0.514 0.020 76) texto atenuado (5.2:1 sobre cal) */

  /* Niebla costera — la garúa y el cielo «panza de burro» de abril a noviembre */
  --niebla-100: #E6E8E5; /* oklch(0.929 0.005 135) superficie fría de la costa */
  --niebla:     #C3C6C4; /* oklch(0.824 0.004 157) */
  --niebla-600: #69716F; /* oklch(0.541 0.010 179) texto frío atenuado (4.6:1) */

  /* Asfalto — la carpeta de la Panamericana; nunca negro puro */
  --asfalto:     #1B1F24; /* oklch(0.237 0.011 254) */
  --asfalto-700: #2B3036; /* oklch(0.307 0.013 253) */

  /* Adobe y Arcilla — la tierra cruda de la costa (Caral, Chan Chan, tapial) */
  --adobe-100:    #F1E6D8; /* oklch(0.930 0.022 74) superficie del tramo costa */
  --adobe:        #D7B899; /* oklch(0.802 0.055 67) bloque, ilustración, fondo cálido */
  --arcilla:      #A86B4C; /* oklch(0.586 0.090 47) gráfico, filete, textura */
  --arcilla-tinta:#8A5236; /* oklch(0.497 0.086 47) texto sobre claro (5.7:1) */

  /* Ocre puna — el ichu seco de agosto en la meseta de Junín */
  --ocre-100:   #F5EBCF; /* oklch(0.941 0.038 91) */
  --ocre:       #C99A2E; /* oklch(0.712 0.131 84) bloque, dato, ilustración */
  --ocre-claro: #E3B04B; /* oklch(0.785 0.131 82) acento sobre noche (8.0:1) */
  --ocre-tinta: #7C5C14; /* oklch(0.495 0.094 83) texto sobre claro (5.6:1) */

  /* Yareta — el cojín verde lima que crece a 4 500 m; color de Ruta Talento */
  --yareta-100:   #E6EDD3; /* oklch(0.934 0.035 119) */
  --yareta:       #7C9A3B; /* oklch(0.643 0.127 125) bloque, ilustración */
  --yareta-claro: #A9C46A; /* oklch(0.780 0.120 123) acento sobre noche (8.2:1) */
  --yareta-tinta: #46602A; /* oklch(0.455 0.086 131) texto/botón (blanco 7.1:1) */

  /* Cielo de altura — el azul cobalto de la puna a mediodía */
  --cielo-100:   #DEE8F5; /* oklch(0.927 0.021 255) */
  --cielo:       #2F64B0; /* oklch(0.507 0.133 258) enlace secundario, info (5.4:1) */
  --cielo-claro: #8DB3E8; /* oklch(0.759 0.087 257) info sobre noche (7.4:1) */

  /* Señal — amarillo preventivo de la señalización vial. SOLO alertas reales. */
  --senal:      #F2B705; /* oklch(0.811 0.166 85) siempre con texto Noche (8.8:1) */

  /* Grana — rojo de cochinilla. SOLO error y riesgo. */
  --grana-100:  #F7DEDF; /* oklch(0.921 0.028 15) */
  --grana:      #9C2B3B; /* oklch(0.468 0.148 17) texto/icono de error (6.8:1) */
  --grana-claro:#F08A8A; /* oklch(0.743 0.125 21) error sobre noche (6.6:1) */

  /* ------------------------------------------------------------------
     2. SEMÁNTICOS · tema claro (por defecto = tramo «costa de día»)
     ------------------------------------------------------------------ */
  --bg:            var(--cal);
  --superficie:    var(--cal-0);
  --superficie-2:  var(--piedra);
  --superficie-3:  var(--adobe-100);
  --tinta:         var(--noche);       /* texto principal 14.5:1 */
  --tinta-2:       var(--noche-600);   /* texto secundario 7.0:1 */
  --tinta-3:       var(--piedra-600);  /* notas y fuentes 5.2:1 */
  --borde:         var(--piedra-300);
  --borde-fuerte:  var(--noche-600);
  --acento:        var(--cobre);       /* gráfico, filete, cifra grande */
  --acento-tinta:  var(--cobre-tinta); /* acento en texto pequeño */
  --enlace:        var(--noche);       /* subrayado cobre */
  --enlace-subrayado: var(--cobre);
  --foco:          var(--noche);
  --boton-bg:      var(--cobre-600);
  --boton-bg-hover:var(--cobre-700);
  --boton-tinta:   #FFFFFF;
  --boton-2-bg:    var(--noche);
  --boton-2-tinta: var(--cal);
  --logo-acento:   var(--cobre);

  /* Estados (siempre con icono + texto; el color nunca va solo) */
  --ok:          var(--yareta-tinta);  --ok-bg:     var(--yareta-100);
  --info:        var(--cielo);         --info-bg:   var(--cielo-100);
  --alerta:      var(--noche);         --alerta-bg: var(--senal);   /* señal preventiva */
  --alerta-tinta:var(--ocre-tinta);    /* alerta como texto sobre claro */
  --error:       var(--grana);         --error-bg:  var(--grana-100);
  --piloto:      var(--cobre-tinta);   --piloto-bg: var(--cobre-100); /* «etapa piloto», «meta», «estimado» */

  /* ------------------------------------------------------------------
     3. DATOS (validados para protanopia, deuteranopia y tritanopia;
        ΔE OKLab mínimo entre pares ≥ 0.10 en las cuatro visiones)
     ------------------------------------------------------------------ */
  /* Categórica sobre claro (todas ≥ 3:1 contra Cal) */
  --dato-1: #1B3254; /* Noche      11.7:1 */
  --dato-2: #C4572A; /* Cobre       4.0:1 */
  --dato-3: #644305; /* Nogal       8.2:1 */
  --dato-4: #0C625D; /* Laguna      6.6:1 */
  --dato-5: #408EE3; /* Cielo       3.1:1 */
  --dato-6: #A6759B; /* Cochinilla  3.4:1 */
  --dato-otros: #8F948F; /* «Otros / sin dato»: fuera de la leyenda categórica */

  /* Secuencial «Altitud» (claro → oscuro; luminancia monótona) */
  --seq-1: #F8EFDE; --seq-2: #EDC482; --seq-3: #E28A45; --seq-4: #BA513D;
  --seq-5: #7D2E4B; --seq-6: #3C254D; --seq-7: #0B1A31;

  /* Divergente «Cielo ↔ Cobre» (centro neutro Cal; azul/naranja es seguro para CVD) */
  --div-n4: #0D2E55; --div-n3: #265B95; --div-n2: #5C8FC2; --div-n1: #A6C1D9;
  --div-0:  #F4F0E7;
  --div-p1: #E4BC94; --div-p2: #D68452; --div-p3: #B34F28; --div-p4: #772D15;

  /* ------------------------------------------------------------------
     4. TIPOGRAFÍA (ver §5 del .md)
     ------------------------------------------------------------------ */
  --f-display: "Archivo", "Archivo Respaldo", "Arial Narrow", Arial, system-ui, sans-serif;
  --f-texto:   "Atkinson Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-cartel:   clamp(3.4rem, 11.5vw + 0.5rem, 13rem); /* Archivo 850 · wdth 118 · lh .86 · −0.035em */
  --t-1:        clamp(2.6rem, 5.6vw + 0.6rem, 6.5rem); /* Archivo 800 · wdth 108 · lh .92 · −0.03em */
  --t-2:        clamp(2rem, 3.4vw + 0.7rem, 4.25rem);  /* Archivo 760 · wdth 100 · lh .98 · −0.02em */
  --t-3:        clamp(1.35rem, 1.1vw + 1rem, 2rem);    /* Archivo 700 · wdth 92  · lh 1.08 */
  --t-4:        1.1875rem;                             /* Archivo 680 · wdth 88 */
  --t-lead:     clamp(1.15rem, 0.45vw + 1rem, 1.45rem);/* Atkinson 400 · lh 1.45 */
  --t-cuerpo:   1.0625rem;                             /* 17 px · Atkinson 400 · lh 1.6 */
  --t-chico:    0.9375rem;                             /* 15 px */
  --t-nota:     0.8125rem;                             /* 13 px · fuentes */
  --t-etiqueta: 0.78rem;                               /* Archivo 650 · wdth 75 · MAYÚS · +0.12em */
  --t-cifra:    clamp(3rem, 6.5vw, 7.5rem);            /* Archivo 800 · wdth 70 · tabular-nums */
  --t-rotulo:   clamp(1rem, 0.8vw + 0.8rem, 1.5rem);   /* Archivo 900 · wdth 125 · MAYÚS · rotulado */

  --wdth-cartel: 118; --wdth-titular: 106; --wdth-etiqueta: 75; --wdth-cifra: 70; --wdth-rotulo: 125;
  --lh-cartel: 0.86; --lh-titular: 0.96; --lh-texto: 1.6;

  /* ------------------------------------------------------------------
     5. RECURSOS GRÁFICOS (SVG en línea; sin peticiones extra)
     ------------------------------------------------------------------ */
  /* Banda de delineadores: chevrón del manual (paso 100 × 100) */
  --banda-alto: 20px;
  --banda-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2310223D' d='M0 0H44L94 50L44 100H0L50 50Z'/%3E%3C/svg%3E");
  --banda-svg-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23F7F4EE' d='M0 0H44L94 50L44 100H0L50 50Z'/%3E%3C/svg%3E");
  --banda-svg-cobre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23C4572A' d='M0 0H44L94 50L44 100H0L50 50Z'/%3E%3C/svg%3E");

  /* Topográfico: curvas de nivel abiertas, 1 px, 6 % de opacidad */
  --topo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%2310223D' stroke-width='1' opacity='.13'%3E%3Cpath d='M-20 92c60-30 110 18 170-6s92-62 160-40 120 44 190 12'/%3E%3Cpath d='M-20 132c66-26 108 26 176 0s96-58 156-36 118 52 188 18'/%3E%3Cpath d='M-20 176c70-20 112 34 180 8s100-52 150-32 112 60 190 26'/%3E%3Cpath d='M-20 224c74-14 118 40 186 16s104-44 144-28 108 66 190 34'/%3E%3Cpath d='M-20 276c80-8 124 44 190 22s106-36 138-22 104 70 192 40'/%3E%3Cpath d='M-20 332c84 0 128 46 194 28s108-28 134-16 100 72 192 46'/%3E%3Cpath d='M-20 392c88 6 132 46 196 32s110-20 130-10 98 72 194 50'/%3E%3Cpath d='M180 214c18-22 58-26 76-6s6 52-28 54-62-24-48-48z'/%3E%3Cpath d='M196 222c12-12 36-14 46-2s2 30-18 31-38-14-28-29z'/%3E%3C/g%3E%3C/svg%3E");

  /* Asfalto: ruido fractal (grano de carpeta), para fondos Noche/Asfalto */
  --asfalto-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Trazo de iconografía */
  --icono-trazo: 1.75px;  /* a 24 px; esquinas a inglete, extremos rectos */
  --icono-tam: 24px;

  /* Radios y sombras (sin cambios de v2) */
  --r-xs: 2px; --r-s: 4px; --r-m: 8px; --r-l: 14px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgb(16 34 61 / .06), 0 2px 6px rgb(16 34 61 / .05);
  --sombra-2: 0 2px 4px rgb(16 34 61 / .05), 0 10px 24px -6px rgb(16 34 61 / .14);

  /* Overlay funcional sobre foto (único degradado permitido) */
  --velo-foto: linear-gradient(to top, rgb(10 22 40 / .82) 0%, rgb(10 22 40 / .45) 38%, rgb(10 22 40 / 0) 70%);
}

/* --------------------------------------------------------------------
   6. TRAMOS (el color cambia de proporción según el territorio)
   Uso: <section data-tramo="sierra">…</section>
   -------------------------------------------------------------------- */
[data-tramo="costa"], [data-tema="cal"] { --bg: var(--cal);       --superficie: var(--cal-0);   --superficie-2: var(--niebla-100); --borde: var(--niebla); }
[data-tramo="desierto"] { --bg: var(--adobe-100); --superficie: var(--cal);   --superficie-2: var(--adobe);      --borde: #D9C4AA; --acento: var(--cobre); }
[data-tramo="sierra"], [data-tema="piedra"] { --bg: var(--piedra);    --superficie: var(--cal);     --superficie-2: var(--adobe-100);  --borde: var(--piedra-300); --acento: var(--cobre); }
[data-tramo="puna"]   { --bg: var(--ocre-100);  --superficie: var(--cal);     --superficie-2: #EFE2BE; --borde: #DCCB9C; --acento: var(--cobre); --acento-tinta: var(--cobre-tinta); }
[data-tramo="talento"], [data-tema="brote"] { --bg: var(--yareta-100);--superficie: var(--cal-0);   --superficie-2: #D7E2BC; --borde: #C3D19F; --acento: var(--yareta); --acento-tinta: var(--yareta-tinta);
                        --boton-bg: var(--yareta-tinta); --boton-bg-hover: #354A1F; --enlace-subrayado: var(--yareta); }

/* Noche: hero, Torre JM, llegada. También es el modo oscuro. */
[data-tramo="noche"], [data-tema="oscuro"], [data-tema="noche"], [data-tema="madrugada"] {
  --bg:           var(--noche-950);
  --superficie:   var(--noche);
  --superficie-2: var(--noche-800);
  --superficie-3: var(--asfalto);
  --tinta:        var(--cal);          /* 16.5:1 */
  --tinta-2:      var(--noche-300);    /* 8.8:1 */
  --tinta-3:      #8A9AB2;             /* 6.3:1 notas */
  --borde:        var(--noche-700);
  --borde-fuerte: var(--noche-300);
  --acento:       var(--cobre-claro);
  --acento-tinta: var(--cobre-claro);  /* 7.0:1 */
  --enlace:       var(--cal);
  --enlace-subrayado: var(--cobre-claro);
  --foco:         var(--ocre-claro);
  --boton-bg:     var(--cobre-600);
  --boton-tinta:  #FFFFFF;
  --boton-2-bg:   var(--cal);
  --boton-2-tinta:var(--noche);
  --logo-acento:  var(--cobre-claro);
  --ok: var(--yareta-claro);  --ok-bg: rgb(169 196 106 / .14);
  --info: var(--cielo-claro); --info-bg: rgb(141 179 232 / .14);
  --alerta: var(--noche);     --alerta-bg: var(--senal);
  --alerta-tinta: var(--ocre-claro);
  --error: var(--grana-claro);--error-bg: rgb(240 138 138 / .14);
  --piloto: var(--cobre-claro); --piloto-bg: rgb(229 138 95 / .14);
  /* Categórica sobre noche (todas ≥ 3.5:1 contra Noche 950; ΔE mín. 0.12) */
  --dato-1: #F2EEE5; --dato-2: #D76D3B; --dato-3: #E9B142;
  --dato-4: #7FCEC1; --dato-5: #649CD3; --dato-6: #9A5883; --dato-otros: #6B7A90;
  color-scheme: dark;
}

/* Modo oscuro del sistema: solo páginas utilitarias (privacidad, recursos).
   El sitio narrativo controla su propia luz con data-tramo. */
@media (prefers-color-scheme: dark) {
  :root[data-respeta-sistema]:not([data-tema="claro"]) {
    --bg: var(--noche-950); --superficie: var(--noche); --superficie-2: var(--noche-800);
    --tinta: var(--cal); --tinta-2: var(--noche-300); --tinta-3: #8A9AB2;
    --borde: var(--noche-700); --acento: var(--cobre-claro); --acento-tinta: var(--cobre-claro);
    --enlace: var(--cal); --enlace-subrayado: var(--cobre-claro); --foco: var(--ocre-claro);
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------
   7. UTILIDADES MÍNIMAS
   -------------------------------------------------------------------- */
/* .banda: ver §22 (máscara con currentColor; mismo chevrón del manual) */
.textura-topo    { background-image: var(--topo-svg); background-size: 480px 480px; }
.textura-asfalto { position: relative; isolation: isolate; }
.textura-asfalto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--asfalto-svg); opacity: .07; mix-blend-mode: overlay; }

/* Hito kilométrico (objeto de identidad): poste de cal con banda Noche */
.hito-poste { display: inline-grid; place-items: center; min-width: 3.2em; padding: .45em .55em .35em;
  background: var(--cal-0); color: var(--noche); border-radius: 1.1em 1.1em 2px 2px;
  box-shadow: inset 0 -.32em 0 var(--noche); font: 800 var(--t-etiqueta)/1 var(--f-display);
  font-stretch: 75%; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.hito-poste > small { font-size: .62em; letter-spacing: .14em; opacity: .7; }

.rotulo { font: 900 var(--t-rotulo)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; }
.cifra  { font-family: var(--f-display); font-variant-numeric: tabular-nums lining-nums; font-stretch: 70%; font-weight: 800; }

/* Señal preventiva: solo para avisos reales (cierre de vía, demora, alerta de fatiga) */
.senal { display: inline-flex; gap: .5em; align-items: center; padding: .35em .7em;
  background: var(--senal); color: var(--noche); font: 700 var(--t-chico)/1.2 var(--f-texto);
  border-radius: var(--r-s); box-shadow: inset 0 0 0 2px var(--noche); }

/* Duotono CSS de respaldo (cuando no existe la versión gradada con gradar.py) */
.duotono-noche { position: relative; isolation: isolate; background: var(--noche-950); }
.duotono-noche img { filter: grayscale(1) contrast(1.08) brightness(.92); mix-blend-mode: luminosity; opacity: .85; }
.duotono-noche::after { content: ""; position: absolute; inset: 0; background: var(--noche); mix-blend-mode: color; pointer-events: none; }

/* Compatibilidad v2 → v3: los nombres viejos apuntan a la paleta Territorio */
:root {
  --cal-50: var(--cal); --linea: var(--piedra-300); --linea-2: #C7BFB1; --piedra-2: var(--adobe-100);
  --grafito: var(--noche-600); --grafito-2: var(--piedra-600); --noche-500: #4D6487;
  --brote: var(--yareta-tinta); --brote-tinta: var(--yareta-tinta); --brote-100: var(--yareta-100);
}
/* «noche» de v2 es un azul un punto más claro que «madrugada» */
[data-tema="noche"] { --bg: var(--noche); --superficie: var(--noche-800); }
/* Un tramo claro dentro de uno oscuro repone texto y foco */
[data-tramo="costa"], [data-tramo="desierto"], [data-tramo="sierra"], [data-tramo="puna"], [data-tramo="talento"] {
  --tinta: var(--noche); --tinta-2: var(--noche-600); --tinta-3: var(--piedra-600); --foco: var(--noche);
  --enlace: var(--noche); --logo-acento: var(--cobre); color-scheme: light;
}
[data-tramo] { color: var(--tinta); }


/* ==========================================================================
   02. Reset y base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cab-alto) + 1rem);
  background: var(--cal-50);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-texto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--cobre); color: var(--cal-0); }

/* Foco visible: anillo noche sobre claro, cobre claro sobre oscuro (3px) */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Salto al contenido */
.salto {
  position: fixed; left: 1rem; top: -4rem; z-index: var(--z-salto);
  background: var(--noche); color: var(--cal-0);
  padding: .75rem 1.1rem; border-radius: var(--r-s); font-weight: 700;
  transition: top var(--dur-corta) var(--ease-suave);
}
.salto:focus { top: 1rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   03. Retícula
   .reticula: líneas con nombre [full] [content]. Cualquier hijo sale a
   sangre con .a-sangre. Dentro, .rejilla reparte 12 columnas; cada hijo
   declara su tramo con style="--c: 1 / 8" (escritorio) y "--c-m" (móvil).
   ========================================================================== */
.reticula {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--margen), 1fr)
    [content-start] minmax(0, var(--ancho-max))
    [content-end] minmax(var(--margen), 1fr) [full-end];
}
.reticula > * { grid-column: content; }
.reticula > .a-sangre { grid-column: full; }
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho-max)); margin-inline: auto; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--medianil);
  row-gap: var(--rg, var(--e-xl));
}
.rejilla > * { grid-column: var(--c-m, 1 / -1); }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(8, minmax(0, 1fr)); } .rejilla > * { grid-column: var(--c-t, var(--c-m, 1 / -1)); } }
@media (min-width: 1024px) { .rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); } .rejilla > * { grid-column: var(--c, 1 / -1); } }

/* Rejilla automática sin cortes */
.rejilla-auto { display: grid; gap: var(--medianil); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr)); }

/* Tramos (secciones) */
.tramo { position: relative; padding-block: var(--tramo); background: var(--bg); color: var(--tinta); }
.tramo--corto { padding-block: var(--tramo-corto); }
.tramo--pausa { min-height: 100svh; padding-block: 0; }
.tramo--sin-arriba { padding-top: 0; }
.tramo--sin-abajo { padding-bottom: 0; }
.tramo-cab { display: grid; gap: var(--e-m); margin-bottom: clamp(var(--e-xl), 5vw, var(--e-3xl)); max-width: 56rem; }
.tramo-cab--ancha { max-width: none; }
@media (min-width: 1024px) {
  .tramo-cab--partida { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--medianil); align-items: end; max-width: none; }
  .tramo-cab--partida > .hito { grid-column: 1 / -1; }
  .tramo-cab--partida > .lead { grid-column: 2; }
}


/* ==========================================================================
   04. Tipografía
   Máximo 3 pesos por pantalla. Cifras siempre tabulares.
   ========================================================================== */
.t-cartel, .t-1, .t-2, .t-3, .t-4, h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  color: inherit;
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.05; }
.t-cartel {
  font-size: var(--t-cartel);
  font-weight: 800;
  font-stretch: 112%;
  line-height: var(--lh-cartel);
  letter-spacing: -0.035em;
}
.t-1 { font-size: var(--t-1); font-weight: 780; font-stretch: 106%; line-height: 0.93; letter-spacing: -0.03em; }
.t-2 { font-size: var(--t-2); font-weight: 740; font-stretch: 100%; line-height: var(--lh-titular); letter-spacing: -0.025em; }
.t-3 { font-size: var(--t-3); font-weight: 700; font-stretch: 94%; line-height: 1.08; letter-spacing: -0.012em; }
.t-4 { font-size: var(--t-4); font-weight: 700; font-stretch: 92%; line-height: 1.2; }
.t-tenue { color: var(--tinta-3); }
.t-acento { color: var(--acento); }              /* SOLO en tamaños ≥ 24px */
.t-cond { font-stretch: 75%; }
.t-ancha { font-stretch: 118%; }

.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--tinta-2); max-width: 46ch; }
.chico { font-size: var(--t-chico); line-height: 1.5; }
.medida { max-width: var(--medida); }
.flujo > * + * { margin-top: var(--flujo, 1em); }
.prosa { max-width: var(--medida); }
.prosa > * + * { margin-top: 1em; }
.prosa h2 { font-size: var(--t-3); margin-top: 2em; }
.prosa h3 { font-size: var(--t-4); margin-top: 1.6em; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li + li { margin-top: .4em; }
.prosa a { color: var(--acento-tinta); }

/* Etiqueta: hitos, KM, estados. Archivo condensada en mayúsculas. */
.etiqueta {
  font-family: var(--f-display);
  font-size: var(--t-etiqueta);
  font-weight: 650;
  font-stretch: 78%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Hito kilométrico: numeración de tramo, insinuada (no en cada bloque). */
.hito {
  display: inline-flex; align-items: center; gap: .75em; flex-wrap: wrap;
  font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 650;
  font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2);
  gap: .55em;
}
.hito b { font-weight: 750; color: var(--acento-tinta); }
.hito--acento { color: var(--acento-tinta); }

.fuente { font-size: var(--t-nota); line-height: 1.45; color: var(--tinta-3); max-width: 70ch; }
.fuente a { color: inherit; }
.cifra { font-family: var(--f-display); font-variant-numeric: tabular-nums lining-nums; font-weight: 800; font-stretch: 72%; line-height: .9; letter-spacing: -0.02em; }
.cita { font-family: var(--f-display); font-size: var(--t-3); font-weight: 600; font-stretch: 96%; line-height: 1.2; }
.firma { font-size: var(--t-chico); color: var(--tinta-3); }

/* Lista con raya (sin viñetas genéricas) */
.lista-raya { list-style: none; padding: 0; display: grid; gap: var(--e-s); }
.lista-raya { gap: 0; }
.lista-raya > li { display: block; padding-block: var(--e-s); border-top: 1px solid var(--borde); }
.lista-raya > li:last-child { border-bottom: 1px solid var(--borde); }
.lista-raya b, .lista-raya strong { font-weight: 700; color: var(--tinta); }


/* ==========================================================================
   05. Utilidades de layout
   ========================================================================== */
.pila { display: flex; flex-direction: column; gap: var(--gap, var(--e-m)); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--e-s)); }
.entre { justify-content: space-between; }
.centrado { text-align: center; margin-inline: auto; }
.sticky { position: sticky; top: calc(var(--cab-alto) + var(--e-m)); }
.relativo { position: relative; }
.solo-movil { }
.solo-escritorio { display: none; }
@media (min-width: 1024px) { .solo-movil { display: none; } .solo-escritorio { display: revert; } }
.divisor { height: 1px; background: var(--borde); border: 0; }


/* ==========================================================================
   06. Botones y enlaces
   Jerarquía: 1 primario por pantalla (cobre), secundario (contorno),
   fantasma (texto). Objetivo táctil ≥ 44 px.
   ========================================================================== */
.boton {
  --b-bg: transparent; --b-tx: var(--tinta); --b-bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .8rem 1.35rem .78rem;
  background: var(--b-bg); color: var(--b-tx);
  border: 1.5px solid var(--b-bd); border-radius: var(--r-s);
  font-family: var(--f-display); font-size: 1rem; font-weight: 680; font-stretch: 96%;
  letter-spacing: .005em; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-corta) var(--ease-suave), color var(--dur-corta) var(--ease-suave), border-color var(--dur-corta) var(--ease-suave), transform var(--dur-instante) var(--ease-suave);
}
.boton:active { transform: translateY(1px); }
.boton .flecha { transition: transform var(--dur-corta) var(--ease-suave); }
.boton:hover .flecha, .boton:focus-visible .flecha { transform: translateX(4px); }
.boton--primario { --b-bg: var(--cobre-600); --b-tx: var(--cal-0); --b-bd: var(--cobre-600); }
.boton--primario:hover { --b-bg: var(--cobre-700); --b-bd: var(--cobre-700); }
.boton--oscuro { --b-bg: var(--noche); --b-tx: var(--cal-0); --b-bd: var(--noche); }
.boton--oscuro:hover { --b-bg: var(--noche-800); --b-bd: var(--noche-800); }
.boton--claro { --b-bg: var(--cal-0); --b-tx: var(--noche); --b-bd: var(--cal-0); }
.boton--claro:hover { --b-bg: var(--piedra); --b-bd: var(--piedra); }
.boton--contorno { --b-bd: color-mix(in srgb, currentColor 45%, transparent); }
.boton--contorno:hover { --b-bd: currentColor; --b-bg: color-mix(in srgb, currentColor 8%, transparent); }
.boton--fantasma { --b-bd: transparent; padding-inline: .4rem; }
.boton--fantasma:hover { text-decoration: underline; }
.boton--grande { min-height: 3.6rem; padding: 1rem 1.7rem; font-size: 1.0625rem; }
.boton--chico { min-height: 2.75rem; padding: .55rem 1rem; font-size: .9375rem; }
.boton--bloque { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font-family: var(--f-display); font-weight: 680; font-stretch: 96%;
  color: var(--tinta); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1.5px no-repeat;
  transition: background-size var(--dur-corta) var(--ease-suave);
}
.enlace-flecha::after { content: "→"; transition: transform var(--dur-corta) var(--ease-suave); }
.enlace-flecha:hover::after, .enlace-flecha:focus-visible::after { transform: translateX(4px); }
.enlace-flecha:hover { background-size: 0 1.5px; background-position: 100% calc(100% - 8px); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-s); align-items: center; }


/* ==========================================================================
   07. Etiquetas de estado — honestidad visible, con jerarquía real
   En piloto · Meta · Estimado · Simulación ilustrativa · Próximo · Fase 1
   ========================================================================== */
.estado {
  display: inline-flex; align-items: center; gap: .5em; width: fit-content;
  padding: .34em .55em .3em; border-radius: var(--r-xs);
  font-family: var(--f-display); font-size: .74rem; font-weight: 700; font-stretch: 80%;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.1;
  background: none;
  color: var(--tinta-2);
  border: 1px solid color-mix(in srgb, var(--tinta) 28%, transparent);
}
.estado--meta { background: none; color: var(--acento-tinta); border-color: color-mix(in srgb, var(--cobre) 30%, transparent); }
.estado--simulacion { background: transparent; border-style: dashed; }
.estado--proximo { background: transparent; }
[data-tema="noche"] .estado--meta, [data-tema="madrugada"] .estado--meta { background: color-mix(in srgb, var(--cobre) 18%, transparent); color: var(--cobre-claro); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5em transparent; } }


/* ==========================================================================
   08. Fotografía
   <figure class="foto" data-foto="01-furgon-carretera-montana">
     <picture> source webp (800/1600/2400) + img jpg 1600 con width/height
     <span class="foto__ref">Imagen referencial</span>
   El recorte se controla con --ar (aspect-ratio) y --pos (object-position).
   ========================================================================== */
.foto { position: relative; overflow: hidden; background: var(--piedra-2); border-radius: var(--r-foto, var(--r-xs)); aspect-ratio: var(--ar, auto); isolation: isolate; }
[data-tema="noche"] .foto, [data-tema="madrugada"] .foto { background: var(--noche-800); }
.foto picture, .foto img, .foto video { width: 100%; height: 100%; }
.foto img, .foto video { object-fit: cover; object-position: var(--pos, 50% 50%); }
.foto--libre { aspect-ratio: auto; }
.foto--libre img { height: auto; }
/* Gradación de marca: sombras levemente hacia noche, sin filtros pesados */
.foto--gradada img { filter: saturate(.9) contrast(1.03); }
.foto__ref {
  position: absolute; z-index: 2; right: .6rem; bottom: .6rem;
  padding: .3em .6em; border-radius: var(--r-xs);
  background: rgb(10 22 40 / .62); color: var(--cal-0);
  font-family: var(--f-texto); font-size: .72rem; line-height: 1.2; letter-spacing: .01em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none;
}
.foto__ref--arriba { top: .6rem; bottom: auto; }
.foto__ref--izq { left: .6rem; right: auto; }
.foto figcaption:not(.foto__ref) { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--e-s); color: var(--cal-0); background: linear-gradient(to top, rgb(10 22 40 / .7), transparent); font-size: var(--t-chico); }
.pie-foto { margin-top: var(--e-xs); font-size: var(--t-nota); color: var(--tinta-3); }

/* Zoom lento al hover (tarjetas) */
.foto--zoom img { transition: transform 1.4s var(--ease-salida); }
:is(a, .tarjeta):hover .foto--zoom img, :is(a, .tarjeta):focus-visible .foto--zoom img { transform: scale(1.045); }

/* Overlay de legibilidad: el ÚNICO degradado permitido (noche 0 → 70 %) */
.velo { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(10 22 40 / .78) 0%, rgb(10 22 40 / .42) 38%, rgb(10 22 40 / 0) 70%); }
.velo--total { background: linear-gradient(to top, rgb(10 22 40 / .82), rgb(10 22 40 / .45) 55%, rgb(10 22 40 / .25)); }
.velo--arriba { background: linear-gradient(to bottom, rgb(10 22 40 / .55), rgb(10 22 40 / 0) 28%), linear-gradient(to top, rgb(10 22 40 / .8) 0%, rgb(10 22 40 / .35) 45%, rgb(10 22 40 / 0) 72%); }

/* Parallax suave (máx. 8 %) — CSS scroll-driven, sin JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-parallax] img { scale: 1.12; animation: parallax linear both; animation-timeline: view(); animation-range: cover; }
    [data-parallax="lento"] img { --par: 3%; }
    [data-parallax="rapido"] img { --par: 8%; }
  }
}
@keyframes parallax { from { translate: 0 calc(var(--par, 5%) * -1); } to { translate: 0 var(--par, 5%); } }


/* ==========================================================================
   09. Cabecera transparente → sólida
   .cab[data-estado="transparente"] sobre hero oscuro; .is-solida al pasar.
   ========================================================================== */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-cab);
  height: var(--cab-alto);
  display: flex; align-items: center; gap: var(--e-l);
  padding-inline: max(var(--margen), env(safe-area-inset-left));
  color: var(--noche);
  background: rgb(246 244 239 / 0);
  transition: background-color var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave), box-shadow var(--dur-media) var(--ease-suave), translate var(--dur-media) var(--ease-salida);
}
@media (min-width: 1200px) { .cab { padding-inline: var(--e-xl); } }
.cab--sobre-oscuro { color: var(--cal-0); --logo-acento: var(--cobre-claro); }
.cab.is-solida { background: rgb(246 244 239 / .94); color: var(--noche); --logo-acento: var(--cobre); box-shadow: 0 1px 0 var(--linea); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.cab.is-solida.is-oscura { background: rgb(10 22 40 / .9); color: var(--cal-0); --logo-acento: var(--cobre-claro); box-shadow: 0 1px 0 rgb(220 226 235 / .1); }
.cab.is-oculta { translate: 0 -100%; }
.cab::before { /* velo superior para legibilidad sobre video, solo transparente */
  content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(10 22 40 / .45), rgb(10 22 40 / 0));
  opacity: 0; transition: opacity var(--dur-media) var(--ease-suave);
}
.cab--sobre-oscuro:not(.is-solida)::before { opacity: 1; }

.cab__marca { display: inline-flex; align-items: center; flex: none; min-height: 44px; color: inherit; text-decoration: none; }
.cab__marca svg { width: auto; height: 2.15rem; }
.cab__marca .logo-simbolo { display: none; }
@media (max-width: 380px) { .cab__marca .logo-horizontal { display: none; } .cab__marca .logo-simbolo { display: block; height: 2rem; } }

.cab__nav { display: none; margin-left: auto; }
.cab__nav ul { display: flex; gap: clamp(.8rem, 1.6vw, 1.75rem); list-style: none; padding: 0; }
.cab__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-display); font-size: .95rem; font-weight: 600; font-stretch: 92%;
  text-decoration: none; color: inherit;
}
.cab__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-corta) var(--ease-suave); }
.cab__nav a:hover::after, .cab__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.cab__acciones { display: flex; align-items: center; gap: var(--e-s); margin-left: auto; }
@media (min-width: 1180px) { .cab__nav + .cab__acciones { margin-left: 0; } }
.cab__cta { display: none; }
@media (min-width: 720px) { .cab__cta { display: inline-flex; } }
@media (min-width: 1180px) { .cab__nav { display: block; } }

.boton-menu {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; min-width: 44px; padding: 0 .25rem;
  font-family: var(--f-display); font-weight: 650; font-stretch: 90%; font-size: .95rem; color: inherit;
}
.boton-menu__ico { position: relative; width: 26px; height: 12px; }
.boton-menu__ico::before, .boton-menu__ico::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--dur-corta) var(--ease-vaiven), top var(--dur-corta) var(--ease-vaiven), width var(--dur-corta) var(--ease-vaiven); }
.boton-menu__ico::before { top: 0; }
.boton-menu__ico::after { top: 10px; width: 70%; left: auto; }
.boton-menu:hover .boton-menu__ico::after { width: 100%; }
.boton-menu[aria-expanded="true"] .boton-menu__ico::before { top: 5px; transform: rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__ico::after { top: 5px; width: 100%; transform: rotate(-45deg); }
@media (max-width: 480px) { .boton-menu__txt { display: none; } }


/* ==========================================================================
   10. Menú overlay (mega)
   Pantalla completa en Azul Noche: enlaces grandes a la izquierda con su
   número de tramo, vista previa de foto a la derecha, secundarios y contacto.
   ========================================================================== */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid; grid-template-rows: var(--cab-alto) 1fr;
  background: var(--noche-950); color: var(--cal-0);
  --tinta: var(--cal-0); --tinta-2: var(--noche-100); --tinta-3: var(--noche-300); --foco: var(--cobre-claro); --logo-acento: var(--cobre-claro);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 640ms var(--ease-salida), visibility 0s linear 640ms;
  overflow: hidden;
}
.menu.is-abierto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 720ms var(--ease-salida), visibility 0s; }
.menu__barra { display: flex; align-items: center; gap: var(--e-l); padding-inline: max(var(--margen), 1rem); }
@media (min-width: 1200px) { .menu__barra { padding-inline: var(--e-xl); } }
.menu__barra .cab__marca { color: var(--cal-0); }
.menu__barra .boton-menu { margin-left: auto; }
.menu__cuerpo {
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--e-xl); align-content: start;
  padding: var(--e-l) max(var(--margen), 1rem) var(--e-2xl);
}
@media (min-width: 1024px) {
  .menu__cuerpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-2xl); align-content: center; padding-block: var(--e-xl); }
}
.menu__principal { list-style: none; padding: 0; counter-reset: menu; }
.menu__principal li { border-top: 1px solid rgb(220 226 235 / .12); }
.menu__principal li:last-child { border-bottom: 1px solid rgb(220 226 235 / .12); }
.menu__principal a {
  display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: var(--e-s);
  padding-block: clamp(.55rem, 1.3vh, 1rem);
  text-decoration: none; color: var(--cal-0);
}
.menu__principal .n { font-family: var(--f-display); font-size: .78rem; font-weight: 650; font-stretch: 78%; letter-spacing: .12em; color: var(--noche-300); font-variant-numeric: tabular-nums; }
.menu__principal .t { font-family: var(--f-display); font-size: clamp(1.9rem, 3.7vw, 3.6rem); font-weight: 760; font-stretch: 104%; line-height: 1; letter-spacing: -.03em; transition: transform var(--dur-media) var(--ease-salida), color var(--dur-corta) var(--ease-suave); }
.menu__principal .d { display: none; font-size: var(--t-chico); color: var(--noche-300); max-width: 22ch; text-align: right; }
@media (min-width: 720px) { .menu__principal .d { display: block; } }
.menu__principal a:hover .t, .menu__principal a:focus-visible .t { transform: translateX(.6rem); color: var(--cobre-claro); }
.menu.is-abierto .menu__principal li { animation: menu-entra 700ms var(--ease-salida) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); }
@keyframes menu-entra { from { opacity: 0; transform: translateY(1.2rem); } }

.menu__lateral { display: grid; gap: var(--e-l); align-content: start; }
.menu__vista { display: none; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden; background: var(--noche-800); }
.menu__vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity var(--dur-media) var(--ease-suave), transform 1.2s var(--ease-salida); }
.menu__vista img.is-activa { opacity: 1; transform: scale(1); }
@media (min-width: 1024px) { .menu__vista { display: block; } }
.menu__secundario { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem var(--e-m); }
.menu__secundario a { display: inline-flex; min-height: 44px; align-items: center; color: var(--noche-100); text-decoration: none; }
.menu__secundario a:hover { color: var(--cal-0); text-decoration: underline; }
.menu__contacto { display: grid; gap: var(--e-s); padding-top: var(--e-m); border-top: 1px solid rgb(220 226 235 / .12); }
body.menu-abierto { overflow: hidden; }


/* ==========================================================================
   11. Odómetro fijo
   Escritorio ≥ 1200: riel vertical en el margen izquierdo (la línea
   central de la vía que se dibuja con el scroll) + marcador KM · hora · tramo.
   Móvil/tableta: barra inferior de 44 px. Decorativo: aria-hidden.
   ========================================================================== */
.odometro {
  --p: 0;
  position: fixed; z-index: var(--z-odometro);
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .9rem;
  height: calc(2.75rem + env(safe-area-inset-bottom)); padding: 0 var(--margen) env(safe-area-inset-bottom);
  background: rgb(10 22 40 / .94); color: var(--cal-0);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--f-display); font-variant-numeric: tabular-nums;
  translate: 0 110%; transition: translate var(--dur-media) var(--ease-salida);
  pointer-events: none;
}
.odometro.is-visible { translate: 0 0; }
.odometro__km { display: inline-flex; align-items: baseline; gap: .3rem; }
.odometro__km small { font-size: .66rem; font-weight: 700; font-stretch: 80%; letter-spacing: .14em; color: var(--noche-300); }
.odometro__km b { font-size: 1.25rem; font-weight: 800; font-stretch: 70%; letter-spacing: .02em; }
.odometro__digitos { display: inline-flex; }
.odometro__digito { display: inline-block; width: .62em; height: 1em; overflow: hidden; line-height: 1; text-align: center; }
.odometro__rodillo { display: block; transition: transform 380ms var(--ease-salida); }
.odometro__rodillo span { display: block; height: 1em; }
.odometro__hora { font-size: .95rem; font-weight: 600; font-stretch: 82%; color: var(--cobre-claro); }
.odometro__tramo { font-family: var(--f-texto); font-size: .8125rem; color: var(--noche-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.odometro__barra { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(220 226 235 / .12); }
.odometro__barra i { position: absolute; inset: 0; background: var(--cobre); transform-origin: left; transform: scaleX(var(--p)); }
.odometro__via { display: none; }

@media (min-width: 1200px) {
  .odometro {
    left: calc((var(--margen) - 4.25rem) / 2); right: auto; top: calc(var(--cab-alto) + 1.5rem); bottom: 1.5rem;
    width: 4.25rem; height: auto; padding: 0;
    flex-direction: column; justify-content: flex-end; align-items: stretch; gap: .75rem;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    translate: -140% 0;
  }
  .odometro.is-visible { translate: 0 0; }
  .odometro__barra { display: none; }
  .odometro__via { /* línea central de la vía: discontinua, se llena con el progreso */
    display: block; position: relative; flex: 1; width: 2px; margin-inline: auto;
    background: repeating-linear-gradient(to bottom, var(--via-color, rgb(58 63 68 / .28)) 0 10px, transparent 10px 22px);
  }
  .odometro__via i { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--cobre) 0 10px, transparent 10px 22px); clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
  .odometro__marcador {
    display: grid; justify-items: center; gap: .3rem; padding: .7rem .3rem .65rem;
    background: var(--noche); border-radius: var(--r-s); box-shadow: var(--sombra-2);
  }
  .odometro__km { flex-direction: column; align-items: center; gap: .1rem; }
  .odometro__km b { font-size: 1.6rem; }
  .odometro__hora { font-size: .9rem; }
  .odometro__tramo { white-space: normal; text-align: center; font-size: .68rem; line-height: 1.25; max-width: 4rem; color: var(--noche-300); }
  .odometro.sobre-oscuro { --via-color: rgb(220 226 235 / .3); }
}
@media (max-width: 1199px) { .odometro__marcador { display: contents; } body.con-odometro { padding-bottom: 2.75rem; } }


/* ==========================================================================
   12. Hero video «Salida» (portada) y hero interior
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  background: var(--noche-950); color: var(--cal-0);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 60%); }
.hero__media video { opacity: 0; transition: opacity 1.2s var(--ease-suave); }
.hero__media video.is-lista { opacity: 1; }
.hero__velo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(10 22 40 / .55) 0%, rgb(10 22 40 / 0) 30%),
    linear-gradient(to right, rgb(10 22 40 / .45) 0%, rgb(10 22 40 / 0) 62%),
    linear-gradient(to top, rgb(10 22 40 / .9) 0%, rgb(10 22 40 / .62) 36%, rgb(10 22 40 / .16) 68%, rgb(10 22 40 / .05) 100%); }
.hero__contenido {
  position: relative; z-index: 1; align-self: end;
  display: grid; gap: clamp(1.25rem, 3vh, 2.25rem);
  padding-top: calc(var(--cab-alto) + var(--e-xl));
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
.hero__etiqueta { display: inline-flex; align-items: center; gap: .8rem; color: var(--noche-100); }
.hero__titulo { max-width: 20ch; font-size: clamp(2.65rem, 6.5vw + .2rem, 8.25rem); font-weight: 800; line-height: .88; letter-spacing: -.04em; font-stretch: 108%; }
.hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__titulo .linea > span { display: inline-block; }
.hero__titulo .linea--acento { color: var(--cal-0); }
.hero__titulo .linea--acento > span { position: relative; }
.hero__titulo .punto { color: var(--cobre); }
.js .hero__titulo .linea > span { transform: translateY(105%); }
.js .hero__titulo.is-listo .linea > span { transform: none; transition: transform 1.1s var(--ease-salida); transition-delay: calc(var(--n, 0) * 110ms + 100ms); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__titulo { font-stretch: 78%; }
  .js .hero__titulo.is-listo { font-stretch: 108%; transition: font-stretch 1.6s var(--ease-salida) 200ms; }
}
.hero__pie { display: grid; gap: var(--e-l); align-items: end; }
@media (min-width: 1024px) { .hero__pie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-2xl); } }
.hero__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--noche-100); max-width: 40ch; }

/* Dos puertas: empresa / transportista */
.puertas { display: grid; gap: var(--e-xs); }
@media (min-width: 560px) { .puertas { grid-template-columns: 1fr 1fr; } }
.puerta {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem var(--e-s);
  min-height: 6.25rem; padding: 1rem 1.15rem 1.05rem;
  border-radius: var(--r-s); text-decoration: none; color: var(--cal-0);
  background: rgb(16 34 61 / .55); border: 1px solid rgb(220 226 235 / .28);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  transition: background-color var(--dur-corta) var(--ease-suave), border-color var(--dur-corta) var(--ease-suave), transform var(--dur-media) var(--ease-salida);
}
.puerta small { grid-column: 1 / -1; align-self: start; font-family: var(--f-display); font-size: .72rem; font-weight: 650; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--noche-300); }
.puerta span { font-family: var(--f-display); font-size: clamp(1.35rem, 1.6vw + .8rem, 1.85rem); font-weight: 740; font-stretch: 100%; line-height: 1; letter-spacing: -.015em; }
.puerta i { font-style: normal; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgb(220 226 235 / .4); font-size: 1.1rem; transition: transform var(--dur-corta) var(--ease-suave), background-color var(--dur-corta) var(--ease-suave); }
.puerta:hover { transform: translateY(-3px); border-color: rgb(220 226 235 / .6); }
.puerta:hover i { transform: translateX(3px); background: var(--cal-0); color: var(--noche); }
.puerta--principal { background: var(--cobre-600); border-color: var(--cobre-600); }
.puerta--principal small { color: rgb(251 250 247 / .82); }
.puerta--principal i { border-color: rgb(251 250 247 / .55); }
.puerta--principal:hover { background: var(--cobre-700); border-color: var(--cobre-700); }

.pruebas { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; list-style: none; padding: 0; font-size: var(--t-chico); color: var(--noche-100); }
.pruebas li { display: inline-flex; align-items: center; gap: .55rem; }
@media (max-width: 559px) {
  .hero__lead { font-size: 1.0625rem; }
  .pruebas { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; font-size: .8125rem; }
  .puerta { min-height: 4.6rem; padding: .8rem 1rem; }
  .puerta span { font-size: 1.3rem; }
  .puerta i { width: 2.1rem; height: 2.1rem; }
  .hero__contenido { gap: 1.1rem; padding-bottom: 1rem; }
}

.hero__barra {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--e-m); flex-wrap: wrap;
  padding-block: .9rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(220 226 235 / .16);
  font-size: .8125rem; color: var(--noche-300);
}
.hero__barra .dato { font-variant-numeric: tabular-nums; }
.hero__barra .bajar { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--cal-0); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-stretch: 90%; }
.hero__barra .bajar span { display: inline-block; animation: bajar 2.2s var(--ease-vaiven) infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.boton-pausa { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .9rem 0 .7rem; border: 1px solid rgb(220 226 235 / .3); border-radius: var(--r-pill); color: var(--cal-0); font-size: .8125rem; }
.boton-pausa:hover { background: rgb(220 226 235 / .1); }
.boton-pausa__ico { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.boton-pausa[aria-pressed="true"] .boton-pausa__ico { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
@media (max-width: 600px) { .hero__barra .dato--opcional { display: none; } }

/* Hero interior (cada página elige su variante; ver GUIA_DE_PAGINAS.md) */
.hero-int { position: relative; isolation: isolate; padding-top: calc(var(--cab-alto) + clamp(3rem, 8vw, 7rem)); padding-bottom: var(--tramo-corto); background: var(--bg); }
.hero-int__titulo { font-size: var(--t-1); font-weight: 780; font-stretch: 106%; line-height: .93; letter-spacing: -.03em; max-width: 16ch; }
.hero-int--foto { min-height: min(92svh, 56rem); display: grid; align-items: end; color: var(--cal-0); background: var(--noche-950); padding-bottom: var(--e-2xl); }
.hero-int--foto > .foto { position: absolute; inset: 0; z-index: -1; border-radius: 0; }
.hero-int--partido .rejilla { align-items: end; }


/* Video de sección dentro de una .foto (mismo recorte que una foto):
   <figure class="foto foto--video" data-video-caja> <img póster> <video data-video …> <button class="boton-pausa">
   El póster es la imagen; el video aparece con fundido cuando puede reproducirse. */
.foto--video > img, .foto--video > picture { position: absolute; inset: 0; }
.foto--video > video { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1s var(--ease-suave); }
.foto--video > video.is-lista { opacity: 1; }
.foto--video { aspect-ratio: var(--ar, 16 / 9); }
.foto--video .boton-pausa { position: absolute; z-index: 3; left: .6rem; bottom: .6rem; min-height: 36px; padding: 0 .75rem 0 .6rem; font-size: .75rem; background: rgb(10 22 40 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ==========================================================================
   13. Cinta / marquee de cifras
   Dos filas en sentidos opuestos (una en móvil). Se pausa con hover/foco.
   La copia duplicada lleva aria-hidden (la crea base.js).
   ========================================================================== */
.cinta { position: relative; overflow: hidden; padding-block: clamp(1.75rem, 3.5vw, 3rem); background: var(--bg); border-block: 1px solid var(--borde); }
.cinta__fila { display: flex; width: max-content; gap: 0; }
.cinta__fila + .cinta__fila { margin-top: clamp(1rem, 2vw, 1.6rem); }
.cinta__pista { display: flex; align-items: baseline; flex: none; list-style: none; padding: 0; }
.cinta__pista li { display: inline-flex; align-items: baseline; gap: .75rem; padding-inline: clamp(1.25rem, 2.6vw, 2.5rem); white-space: nowrap; }
.cinta__pista b { font-family: var(--f-display); font-size: clamp(2.4rem, 4.6vw, 4.6rem); font-weight: 800; font-stretch: 70%; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cinta__pista span { font-size: var(--t-chico); color: var(--tinta-2); max-width: 16ch; white-space: normal; line-height: 1.25; }
.cinta__fila--b .cinta__pista b { font-weight: 300; font-stretch: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .cinta.is-animada .cinta__fila { animation: cinta var(--dur-cinta) linear infinite; }
  .cinta.is-animada .cinta__fila--b { animation-direction: reverse; animation-duration: calc(var(--dur-cinta) * 1.15); }
  .cinta:hover .cinta__fila, .cinta:focus-within .cinta__fila, .cinta.is-pausada .cinta__fila { animation-play-state: paused; }
}
@keyframes cinta { to { transform: translateX(-50%); } }
@media (max-width: 719px) { .cinta__fila--b { display: none; } }


/* ==========================================================================
   14. Manifiesto sticky — palabra a palabra
   El texto completo está en el DOM desde el inicio (lectores de pantalla
   y reduced motion lo leen entero); base.js envuelve palabras en .w.
   ========================================================================== */
.manifiesto { position: relative; background: var(--bg); }
.manifiesto__pin { position: relative; }
@media (min-width: 1024px) {
  .manifiesto { height: 260svh; }
  .manifiesto__pin { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: hidden; }
}
.manifiesto__rejilla { padding-block: var(--tramo); }
@media (min-width: 1024px) { .manifiesto__rejilla { padding-block: calc(var(--cab-alto) + 1rem) 2rem; align-items: center; } }
.manifiesto__titulo { font-size: clamp(3.2rem, 6.4vw, 7.5rem); font-weight: 820; font-stretch: 112%; line-height: .86; letter-spacing: -.04em; }
.manifiesto__titulo .punto { color: var(--cobre); }
.manifiesto__texto { font-family: var(--f-display); font-size: clamp(1.3rem, 1vw + .8rem, 1.8rem); font-weight: 560; font-stretch: 98%; line-height: 1.24; letter-spacing: -.012em; max-width: 34ch; }
.manifiesto__texto p + p { margin-top: .7em; }
.manifiesto__texto .w { transition: color 380ms var(--ease-suave), opacity 380ms var(--ease-suave); }
.js .manifiesto__texto.is-palabras .w { color: color-mix(in srgb, var(--tinta) 20%, transparent); }
.js .manifiesto__texto.is-palabras .w.on { color: var(--tinta); }
.js .manifiesto__texto.is-palabras .w.clave.on { color: var(--cobre); }
.manifiesto__firma { margin-top: var(--e-l); display: flex; align-items: center; gap: var(--e-s); font-size: var(--t-chico); color: var(--tinta-3); }
.manifiesto__progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--borde); }
.manifiesto__progreso i { position: absolute; inset: 0; background: var(--cobre); transform-origin: left; transform: scaleX(var(--p, 0)); }


/* ==========================================================================
   15. Cifras con contador y fuente
   ========================================================================== */
.cifras { display: grid; gap: var(--e-xl) var(--medianil); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: cifra; }
.cifras__item { display: grid; gap: var(--e-xs); align-content: start; padding-top: var(--e-m); border-top: 1px solid var(--borde); }
.cifras__valor { font-family: var(--f-display); font-size: var(--t-cifra); font-weight: 800; font-stretch: 70%; line-height: .88; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifras__valor small { font-size: .42em; font-weight: 700; font-stretch: 80%; letter-spacing: 0; margin-left: .08em; }
.cifras__item--manda .cifras__valor { color: var(--acento); }
.cifras__txt { font-size: var(--t-cuerpo); color: var(--tinta-2); max-width: 30ch; }
.cifras__fuente { font-size: var(--t-nota); color: var(--tinta-3); }


/* ==========================================================================
   16. Tarjetas de servicio con foto
   Composición asimétrica: 1 grande + 3. Toda la tarjeta es un enlace;
   el detalle (lo que incluye el estándar) se revela al hover/foco y en
   táctil siempre está visible.
   ========================================================================== */
.servicios { display: grid; gap: var(--medianil); }
@media (min-width: 720px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .servicios { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); }
  .servicios > :nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .servicios > :nth-child(2) { grid-column: 8 / 13; }
  .servicios > :nth-child(3) { grid-column: 8 / 13; }
  .servicios > :nth-child(4) { grid-column: 1 / 13; }
}
.serv {
  position: relative; isolation: isolate; display: grid; align-content: end;
  min-height: 22rem; padding: clamp(1.25rem, 2.2vw, 2rem);
  border-radius: var(--r-s); overflow: hidden;
  color: var(--cal-0); text-decoration: none; background: var(--noche);
}
.serv > .foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.serv::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 22 40 / .9) 0%, rgb(10 22 40 / .5) 45%, rgb(10 22 40 / .05) 80%); transition: opacity var(--dur-media) var(--ease-suave); }
.serv__cuerpo { display: grid; gap: var(--e-xs); max-width: 36rem; padding-top: 2.5rem; }
.serv .foto__ref { top: auto; bottom: .6rem; right: .6rem; }
.serv:has(.foto__ref) { padding-bottom: calc(clamp(1.25rem, 2.2vw, 2rem) + 1.6rem); }
.serv__top { position: absolute; top: clamp(1rem, 2vw, 1.5rem); left: clamp(1.25rem, 2.2vw, 2rem); right: clamp(1.25rem, 2.2vw, 2rem); display: flex; justify-content: space-between; align-items: center; gap: var(--e-s); }
.serv__n { font-family: var(--f-display); font-size: .8rem; font-weight: 700; font-stretch: 78%; letter-spacing: .14em; }
.serv .estado { color: var(--cal-0); background: rgb(10 22 40 / .5); border-color: rgb(251 250 247 / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.serv h3 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.6rem); font-weight: 760; font-stretch: 100%; line-height: 1; letter-spacing: -.02em; }
.serv p { color: var(--noche-100); max-width: 44ch; }
.serv__mas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-media) var(--ease-salida); }
.serv__mas > ul { overflow: hidden; list-style: none; padding: 0; display: grid; gap: .3rem; font-size: var(--t-chico); color: var(--cal-0); }
.serv__mas li { display: flex; gap: .6rem; align-items: baseline; }
.serv__ir { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--e-2xs); font-family: var(--f-display); font-weight: 650; font-stretch: 94%; }
.serv__ir::after { content: "→"; transition: transform var(--dur-corta) var(--ease-suave); }
.serv:hover .serv__ir::after, .serv:focus-visible .serv__ir::after { transform: translateX(5px); }
@media (hover: hover) {
  .serv:hover .serv__mas, .serv:focus-visible .serv__mas, .serv:focus-within .serv__mas { grid-template-rows: 1fr; }
  .serv:hover .serv__mas > ul { padding-top: .5rem; }
}
@media (hover: none) { .serv__mas { grid-template-rows: 1fr; } .serv__mas > ul { padding-top: .5rem; } }
@media (min-width: 1024px) {
  .servicios > :nth-child(1) { min-height: 40rem; }
  .servicios > :nth-child(1) h3 { font-size: clamp(2.2rem, 2.6vw + 1rem, 3.6rem); }
  .servicios > :nth-child(4) { min-height: 18rem; }
  .servicios > :nth-child(4)::after { background: linear-gradient(90deg, rgb(10 22 40 / .9) 0%, rgb(10 22 40 / .55) 45%, rgb(10 22 40 / .1) 80%); }
}
/* Variante sin foto (sobre piedra) */
.serv--plano { background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--borde); }
.serv--plano::after { display: none; }
.serv--plano p { color: var(--tinta-2); }
.serv--plano .estado { color: var(--tinta-2); background: transparent; border-color: var(--borde); }


/* ==========================================================================
   17. Cómo funciona — scroll horizontal
   Escritorio: sección alta + panel sticky; base.js traduce scroll vertical
   en translateX. Móvil: carrusel con scroll-snap. Reduced: lista vertical.
   ========================================================================== */
.horizontal { position: relative; background: var(--bg); color: var(--tinta); }
.horizontal__pin { position: relative; padding-block: var(--tramo); overflow: hidden; }
.horizontal__ventana { position: relative; margin-top: clamp(2rem, 4vw, 3.5rem); }
.horizontal__pista {
  display: flex; align-items: flex-start; gap: var(--medianil); list-style: none; padding: 0 var(--margen) var(--e-m);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.horizontal__pista::-webkit-scrollbar { display: none; }
.paso {
  position: relative; flex: none; width: min(84vw, 26rem); scroll-snap-align: start;
  display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--e-s); align-content: start;
  padding: clamp(1.25rem, 2vw, 1.75rem); padding-top: 2.6rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-s);
}
.paso__n { position: absolute; top: .55rem; right: .9rem; font-family: var(--f-display); font-size: clamp(4.5rem, 7vw, 7rem); font-weight: 800; font-stretch: 66%; line-height: .8; color: color-mix(in srgb, var(--tinta) 9%, transparent); font-variant-numeric: tabular-nums; pointer-events: none; }
.paso__quien { justify-self: start; }
.paso h3 { font-size: var(--t-3); font-weight: 720; font-stretch: 96%; line-height: 1.05; letter-spacing: -.015em; }
.paso p { color: var(--tinta-2); }
.paso .foto { --ar: 16 / 10; margin-top: var(--e-xs); align-self: end; }
.horizontal__via { position: relative; height: 2px; margin: var(--e-l) var(--margen) 0; background: repeating-linear-gradient(90deg, var(--borde) 0 18px, transparent 18px 34px); }
.horizontal__via i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--cobre) 0 18px, transparent 18px 34px); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.horizontal__ayuda { margin: var(--e-s) var(--margen) 0; font-size: var(--t-nota); color: var(--tinta-3); }
@media (min-width: 1024px) {
  .horizontal.is-fijada .horizontal__pin { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--cab-alto) + 2rem) 2.5rem; display: flex; flex-direction: column; justify-content: center; }
  .horizontal.is-fijada .horizontal__pista { align-items: stretch; overflow: visible; scroll-snap-type: none; will-change: transform; padding-left: calc((100vw - min(100vw - 2 * var(--margen), var(--ancho-max))) / 2); padding-right: 22vw; }
  .horizontal.is-fijada .horizontal__ayuda { display: none; }
  .paso { width: clamp(22rem, 27vw, 27rem); min-height: min(30rem, 56svh); }
  .paso--foto { width: clamp(26rem, 34vw, 34rem); }
}


/* ==========================================================================
   18. Collage editorial
   2–3 fotos de tamaños distintos que se solapan; una cifra encima del
   solape. Parallax con data-parallax (CSS scroll-driven).
   ========================================================================== */
.collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); aspect-ratio: var(--ar-collage, 1 / 1.05); }
.collage > .foto { position: relative; box-shadow: var(--sombra-3); }
.collage__a { grid-column: 1 / 10; grid-row: 1 / 9; z-index: 1; }
.collage__b { grid-column: 6 / 13; grid-row: 6 / 13; z-index: 2; }
.collage__c { grid-column: 1 / 6; grid-row: 9 / 13; z-index: 3; }
.collage__dato { position: absolute; z-index: 4; left: 0; bottom: 34%; padding: .9rem 1.1rem; max-width: 15rem; background: var(--noche); color: var(--cal-0); border-radius: var(--r-s); box-shadow: var(--sombra-2); }
.collage__dato b { display: block; font-family: var(--f-display); font-size: 2.6rem; font-weight: 800; font-stretch: 70%; line-height: .95; color: var(--cobre-claro); font-variant-numeric: tabular-nums; }
.collage__dato span { font-size: var(--t-nota); color: var(--noche-100); }
@media (max-width: 719px) {
  .collage { aspect-ratio: auto; display: block; }
  .collage > .foto { --ar: 4 / 3; }
  .collage__b, .collage__c { display: none; }
  .collage__dato { position: relative; left: auto; bottom: auto; margin: -2.5rem 0 0 1rem; max-width: 80%; }
}


/* ==========================================================================
   19. Panel Torre JM (simulación ilustrativa)
   ========================================================================== */
.torre { position: relative; }
.torre__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); }
@media (min-width: 1024px) { .torre__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.panel {
  position: relative; display: grid; gap: var(--e-m);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--noche); border: 1px solid rgb(220 226 235 / .12); border-radius: var(--r-m);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .55);
  color: var(--cal-0);
}
@media (min-width: 1024px) { .panel { position: sticky; top: calc(var(--cab-alto) + 1.5rem); } }
.panel__barra { display: flex; justify-content: space-between; align-items: center; gap: var(--e-s); flex-wrap: wrap; padding-bottom: var(--e-s); border-bottom: 1px solid rgb(220 226 235 / .12); }
.panel__titulo { font-family: var(--f-display); font-weight: 680; font-stretch: 90%; font-size: 1rem; display: flex; align-items: center; gap: .6rem; }
.panel__mapa { width: 100%; height: auto; overflow: visible; }
.panel__mapa .base { fill: none; stroke: rgb(220 226 235 / .16); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.panel__mapa .ruta { fill: none; stroke: var(--cobre); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.panel__mapa .nodo { fill: var(--noche); stroke: var(--noche-300); stroke-width: 2; }
.panel__mapa .punto { fill: var(--cobre-claro); }
.panel__mapa .halo { fill: var(--cobre); opacity: .25; transform-box: fill-box; transform-origin: center; animation: halo 2s var(--ease-suave) infinite; }
.panel__mapa .etq { font-family: var(--f-display); font-size: 13px; font-weight: 600; font-stretch: 86%; fill: var(--noche-300); }
.panel__mapa .alt { fill: none; stroke: rgb(220 226 235 / .1); stroke-width: 1; }
@keyframes halo { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(2.6); opacity: 0; } }
.telemetria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(220 226 235 / .12); border-radius: var(--r-s); overflow: hidden; }
@media (min-width: 560px) { .telemetria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.telemetria > div { padding: .8rem .9rem; background: var(--noche-800); }
.telemetria dt { font-family: var(--f-display); font-size: .7rem; font-weight: 650; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--noche-300); }
.telemetria dd { margin-top: .2rem; font-family: var(--f-display); font-size: 1.6rem; font-weight: 760; font-stretch: 72%; font-variant-numeric: tabular-nums; line-height: 1.05; }
.telemetria dd small { font-size: .55em; font-weight: 600; color: var(--noche-300); margin-left: .15em; }
.torre.is-alerta .telemetria [data-tel="vel"] { color: var(--cobre-claro); }
.torre.is-alerta .panel { border-color: rgb(229 138 95 / .5); }
.eventos { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: ev; }
.evento { position: relative; display: grid; grid-template-columns: 4.2rem 1fr; gap: var(--e-s); padding: 1.15rem 0 1.15rem; border-top: 1px solid var(--borde); transition: opacity var(--dur-media) var(--ease-suave); }
.js .evento { opacity: .38; }
.js .evento.on { opacity: 1; }
.evento time { font-family: var(--f-display); font-weight: 700; font-stretch: 78%; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.evento.on time { color: var(--acento-tinta); }
.evento b { display: block; font-family: var(--f-display); font-weight: 700; font-stretch: 94%; font-size: 1.1rem; color: var(--tinta); }
.evento p { color: var(--tinta-2); font-size: var(--t-chico); margin-top: .15rem; }
.evento--alerta b { color: var(--cobre-claro); }
@media (min-width: 1024px) { .eventos .evento { padding-block: clamp(1.4rem, 5vh, 2.6rem); } }


/* ==========================================================================
   20. Mapa de corredores — se traza al entrar
   La lista de corredores (botones) es la vía principal; el mapa acompaña.
   ========================================================================== */
.mapa__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .mapa__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.corredores { display: grid; gap: .5rem; margin-top: var(--e-l); }
.corredor {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-s);
  min-height: 3.6rem; padding: .7rem 1rem; text-align: left;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-s);
  transition: background-color var(--dur-corta) var(--ease-suave), border-color var(--dur-corta) var(--ease-suave), transform var(--dur-corta) var(--ease-suave);
}
.corredor::before { content: ""; width: 1.6rem; height: 3px; border-radius: 2px; background: var(--linea-2); transition: background-color var(--dur-corta) var(--ease-suave); }
.corredor span { font-family: var(--f-display); font-size: 1.12rem; font-weight: 700; font-stretch: 94%; }
.corredor small { font-size: var(--t-nota); color: var(--tinta-3); text-align: right; }
.corredor:hover { border-color: var(--linea-2); transform: translateX(3px); }
.corredor[aria-pressed="true"] { background: var(--noche); color: var(--cal-0); border-color: var(--noche); }
.corredor[aria-pressed="true"]::before { background: var(--cobre); }
.corredor[aria-pressed="true"] small { color: var(--noche-300); }
.corredor--fase1::before { background: var(--noche); }
.corredor--proximo span { font-weight: 600; }
.ficha-corredor { margin-top: var(--e-m); padding: var(--e-m); background: var(--superficie-2); border-radius: var(--r-s); min-height: 9.5rem; }
.ficha-corredor__via { font-family: var(--f-display); font-weight: 720; font-stretch: 92%; font-size: 1.2rem; }
.ficha-corredor__txt { color: var(--tinta-2); margin-top: .35rem; }
.ficha-corredor .estado { margin-top: var(--e-s); }

.peru { width: 100%; height: auto; max-height: 82svh; margin-inline: auto; overflow: hidden; }
.peru .peru-deps path { fill: var(--piedra); stroke: var(--cal-50); stroke-width: 1.2; }
.peru .peru-pais { fill: none; stroke: var(--linea-2); stroke-width: 1.4; }
.peru .pr-borde { fill: none; stroke: var(--cal-50); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.peru .pr { fill: none; stroke: var(--noche-500); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; cursor: pointer; transition: stroke var(--dur-corta) var(--ease-suave), stroke-width var(--dur-corta) var(--ease-suave), opacity var(--dur-corta) var(--ease-suave); }
.peru .pr[data-fase="1"] { stroke: var(--noche); opacity: 1; stroke-width: 4.5; }
.peru .pr[data-fase="proximo"] { stroke-dasharray: .012 .014; }
.peru .pr.is-activa { stroke: var(--cobre); opacity: 1; stroke-width: 6; }
.mapa.is-visible .peru .pr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-salida), stroke var(--dur-corta), stroke-width var(--dur-corta), opacity var(--dur-corta); }
.mapa.is-visible .peru .pr[data-ruta="norte"] { transition-delay: .1s; }
.mapa.is-visible .peru .pr[data-ruta="central"] { transition-delay: .35s; }
.mapa.is-visible .peru .pr[data-ruta="pucallpa"] { transition-delay: .7s; }
.mapa.is-visible .peru .pr[data-ruta="sur"] { transition-delay: .9s; }
.mapa.is-visible .peru .pr[data-ruta="cusco"] { transition-delay: 1.1s; }
.mapa.is-visible .peru .pr[data-fase="proximo"] { stroke-dashoffset: 0; }
.peru .pn { fill: var(--cal-0); stroke: var(--noche); stroke-width: 2; }
.peru .pn--principal { fill: var(--cobre); stroke: var(--cal-0); stroke-width: 3; }
.peru .pn--fin { fill: var(--noche); stroke: var(--cal-0); stroke-width: 2.5; }
.peru .me { font-family: var(--f-display); font-size: 15px; font-weight: 600; font-stretch: 88%; fill: var(--grafito); paint-order: stroke; stroke: var(--cal-50); stroke-width: 4px; stroke-linejoin: round; }
.peru .me--principal { font-size: 19px; font-weight: 800; fill: var(--noche); }
.peru .me--fin { font-size: 16px; font-weight: 720; fill: var(--noche); }
.mapa__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: var(--e-s); font-size: var(--t-nota); color: var(--tinta-3); }
.mapa__leyenda span { display: inline-flex; align-items: center; gap: .5rem; }
.mapa__leyenda i { width: 1.5rem; height: 3px; background: var(--noche); }
.mapa__leyenda i.prox { background: repeating-linear-gradient(90deg, var(--noche-500) 0 5px, transparent 5px 9px); }
@media (max-width: 1023px) { .mapa__lienzo { max-width: 30rem; margin-inline: auto; } }


/* ==========================================================================
   21. Red JM — comparativa / calculadora (instrumento)
   ========================================================================== */
.red { position: relative; overflow: clip; }
.red__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); }
@media (min-width: 1024px) { .red__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; } }
.red__foto { --ar: 4 / 5; }
@media (min-width: 1024px) { .red__foto { --ar: auto; height: 100%; min-height: 40rem; } }
.calc { display: grid; gap: var(--e-m); padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); }
.calc__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-s); flex-wrap: wrap; }
.calc__label { font-family: var(--f-display); font-weight: 650; font-stretch: 90%; }
.calc__flete { font-family: var(--f-display); font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem); font-weight: 800; font-stretch: 72%; font-variant-numeric: tabular-nums; line-height: 1; }
.rango { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; --r: 25%; }
.rango::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--noche) var(--r), var(--linea) var(--r)); }
.rango::-moz-range-track { height: 6px; border-radius: 3px; background: var(--linea); }
.rango::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--noche); }
.rango::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: calc(3px - .8rem); border-radius: 50%; background: var(--cobre-600); border: 3px solid var(--cal-0); box-shadow: var(--sombra-2); }
.rango::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cobre-600); border: 3px solid var(--cal-0); box-shadow: var(--sombra-2); }
.barras { display: grid; gap: var(--e-m); }
.barra { display: grid; grid-template-columns: 1fr auto; gap: .4rem var(--e-s); align-items: baseline; }
.barra__nombre { font-weight: 700; }
.barra__nombre small { display: block; font-weight: 400; font-size: var(--t-nota); color: var(--tinta-3); }
.barra__valor { font-family: var(--f-display); font-size: 1.5rem; font-weight: 780; font-stretch: 74%; font-variant-numeric: tabular-nums; }
.barra__pista { grid-column: 1 / -1; height: .9rem; background: var(--piedra); border-radius: 2px; overflow: hidden; }
.barra__pista i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--v, .5)); background: var(--noche); transition: transform var(--dur-media) var(--ease-salida); }
.barra--jm .barra__pista i { background: var(--cobre); }
.barra--com .barra__pista i { background: repeating-linear-gradient(-45deg, var(--grafito-2) 0 6px, var(--linea-2) 6px 9px); }
.calc__dif { padding-top: var(--e-s); border-top: 1px solid var(--borde); }
.calc__dif b { font-family: var(--f-display); font-weight: 780; font-stretch: 80%; font-size: 1.25rem; }


/* ==========================================================================
   22. Furgón y banda de delineadores (recurso gráfico de identidad)
   La banda es el chevrón oficial (M0 0H44L94 50L44 100H0L50 50Z) repetido
   como máscara: toma el color de currentColor.
   ========================================================================== */
.banda {
  --alto: 1.25rem;
  height: var(--alto); width: 100%;
  color: var(--noche);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0H44L94 50L44 100H0L50 50Z'/%3E%3C/svg%3E") left center / var(--alto) var(--alto) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0H44L94 50L44 100H0L50 50Z'/%3E%3C/svg%3E") left center / var(--alto) var(--alto) repeat-x;
}
.banda--cobre { color: var(--cobre); }
.banda--piedra { color: var(--piedra-2); }
.banda--clara { color: rgb(251 250 247 / .9); }
.banda--chica { --alto: .75rem; }
.banda--grande { --alto: 2.5rem; }
.banda--izq { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .banda--viva { animation: banda-avanza 2.4s linear infinite; }
}
@keyframes banda-avanza { to { -webkit-mask-position: var(--alto) center; mask-position: var(--alto) center; } }
/* Banda «rotulado»: 9 chevrones noche que se desvanecen + 1 cobre al frente */
.banda-rotulado { display: flex; gap: calc(var(--alto, 2rem) * .06); height: var(--alto, 2rem); }
.banda-rotulado i { flex: none; width: calc(var(--alto, 2rem) * .94); height: 100%; background: var(--noche); clip-path: polygon(0 0, 44% 0, 94% 50%, 44% 100%, 0 100%, 50% 50%); opacity: var(--o, 1); }
.banda-rotulado i:last-child { background: var(--cobre); }

.furgon { position: relative; overflow: hidden; }
.furgon__escena { position: relative; padding-block: var(--e-xl) 0; }
.furgon__carretera { position: relative; height: clamp(3rem, 6vw, 5rem); background: var(--grafito); }
.furgon__carretera::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; translate: 0 -50%; background: repeating-linear-gradient(90deg, var(--cal-0) 0 40px, transparent 40px 80px); opacity: .7; }
.furgon__img { position: relative; z-index: 1; width: min(100%, 72rem); margin-inline: auto; margin-bottom: -1.2%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
    .furgon__img { animation: furgon-llega linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .furgon__carretera::before { animation: carretera-pasa linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes furgon-llega { from { translate: -55% 0; } to { translate: 0 0; } }
@keyframes carretera-pasa { from { background-position: 0 0; } to { background-position: 1200px 0; } }
.furgon__pie { display: flex; justify-content: space-between; gap: var(--e-m); flex-wrap: wrap; padding-top: var(--e-s); }


/* ==========================================================================
   23. Timeline de compuertas (hoja de ruta)
   Cada fase es un tramo; entre fases hay una barrera que se levanta
   cuando la fase anterior se cumple. La fase actual lleva «Estamos aquí».
   ========================================================================== */
.compuertas { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
@media (min-width: 1024px) { .compuertas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.compuerta { position: relative; display: grid; gap: var(--e-xs); align-content: start; padding: var(--e-l) var(--e-m) var(--e-l) 0; border-top: 2px solid var(--borde); }
@media (max-width: 1023px) { .compuerta { padding-left: 2.25rem; border-top: 0; border-left: 2px solid var(--borde); padding-block: var(--e-m) var(--e-l); margin-left: .5rem; } }
.compuerta::before { /* poste/hito */
  content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--linea-2);
}
@media (max-width: 1023px) { .compuerta::before { top: 1.6rem; left: -9px; } }
.compuerta__barrera { /* barrera rayada entre fases */
  position: absolute; top: -6px; right: 1.25rem; width: 3.5rem; height: 10px; transform-origin: right center;
  background: repeating-linear-gradient(90deg, var(--cobre) 0 8px, var(--cal-0) 8px 16px); border: 1px solid var(--cobre); border-radius: 2px;
  transition: transform 900ms var(--ease-salida);
}
@media (max-width: 1023px) { .compuerta__barrera { display: none; } }
.compuerta.is-abierta .compuerta__barrera { transform: rotate(-70deg); }
.compuerta--hoy { border-color: var(--noche); }
@media (max-width: 1023px) { .compuerta--hoy { border-left-color: var(--noche); } }
.compuerta--hoy::before { background: var(--cobre); border-color: var(--cobre); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cobre) 22%, transparent); }
.compuerta__fase { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.compuerta h3 { font-size: var(--t-3); font-weight: 740; font-stretch: 96%; letter-spacing: -.015em; }
.compuerta__fecha { font-family: var(--f-display); font-weight: 600; font-stretch: 84%; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.compuerta p { color: var(--tinta-2); }
.compuerta__condicion { margin-top: var(--e-xs); padding: .75rem .9rem; background: var(--superficie-2); border-radius: var(--r-s); font-size: var(--t-chico); }
.compuerta__condicion b { display: block; font-family: var(--f-display); font-size: .7rem; font-weight: 700; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .2rem; }


/* ==========================================================================
   24. Ruta Talento (identidad respaldada: verde brote, solo aquí)
   ========================================================================== */
.talento { --acento: var(--brote); --acento-tinta: var(--brote-tinta); background: var(--cal-0); }
.talento__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .talento__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.talento__foto { --ar: 4 / 5; }
.talento__titulo { font-size: clamp(3rem, 7vw, 7.5rem); font-weight: 820; font-stretch: 108%; line-height: .88; letter-spacing: -.04em; }
.talento__titulo em { font-style: normal; color: var(--brote-tinta); }
.talento__marca { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 700; font-stretch: 90%; color: var(--brote-tinta); }
.talento__marca::before { content: ""; width: .8rem; height: .8rem; border-radius: 50% 50% 50% 0; background: var(--brote); transform: rotate(-45deg); }
.talento__pasos { list-style: none; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-s); overflow: hidden; counter-reset: tp; }
@media (min-width: 720px) { .talento__pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.talento__pasos li { counter-increment: tp; display: grid; gap: .35rem; align-content: start; padding: 1rem; background: var(--cal-0); font-size: var(--t-chico); color: var(--tinta-2); }
.talento__pasos li::before { content: "0" counter(tp); font-family: var(--f-display); font-weight: 700; font-stretch: 78%; font-size: .78rem; letter-spacing: .1em; color: var(--brote-tinta); }
.talento__pasos b { font-family: var(--f-display); font-size: 1.1rem; font-weight: 720; font-stretch: 94%; color: var(--tinta); }
.talento .boton--primario { --b-bg: var(--brote-tinta); --b-bd: var(--brote-tinta); }
.talento .boton--primario:hover { --b-bg: #175a51; --b-bd: #175a51; }
.nota-honesta { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px dashed var(--linea-2); border-radius: var(--r-s); font-size: var(--t-chico); color: var(--tinta-2); }
.nota-honesta::before { content: "i"; flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--tinta); color: var(--bg); font-family: var(--f-display); font-weight: 800; font-size: .8rem; }


/* ==========================================================================
   25. Compromisos y Garantía JM
   ========================================================================== */
.compromisos { list-style: none; padding: 0; counter-reset: cp; }
.compromisos li { counter-increment: cp; display: grid; grid-template-columns: 3rem 1fr; gap: var(--e-s); align-items: baseline; padding-block: clamp(1.1rem, 2.4vw, 1.9rem); border-top: 1px solid var(--borde); }
.compromisos li:last-child { border-bottom: 1px solid var(--borde); }
.compromisos li::before { content: "0" counter(cp); font-family: var(--f-display); font-weight: 700; font-stretch: 78%; letter-spacing: .1em; font-size: .85rem; color: var(--acento-tinta); }
.compromisos p { font-family: var(--f-display); font-size: clamp(1.45rem, 2.4vw + .6rem, 3rem); font-weight: 700; font-stretch: 100%; line-height: 1.04; letter-spacing: -.02em; max-width: 26ch; }
.garantia { display: grid; gap: var(--e-l); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--noche); color: var(--cal-0); border-radius: var(--r-m); --tinta: var(--cal-0); --tinta-2: var(--noche-100); --tinta-3: var(--noche-300); --borde: rgb(220 226 235 / .14); --acento-tinta: var(--cobre-claro); --foco: var(--cobre-claro); }
.garantia__cab { display: flex; justify-content: space-between; gap: var(--e-s); flex-wrap: wrap; align-items: center; }
.garantia__lista { list-style: none; padding: 0; display: grid; gap: 1px; background: rgb(220 226 235 / .14); grid-template-columns: 1fr; border-radius: var(--r-s); overflow: hidden; }
@media (min-width: 560px) { .garantia__lista { grid-template-columns: 1fr 1fr; } }
.garantia__lista li { display: grid; gap: .35rem; align-content: start; padding: 1.1rem 1rem; background: var(--noche); }
.garantia__lista b { font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 800; font-stretch: 72%; line-height: 1; color: var(--cal-0); font-variant-numeric: tabular-nums; }
.garantia__lista span { font-size: var(--t-chico); color: var(--noche-100); }


/* --- Pilares (casa de la marca): 4 columnas numeradas + cimiento --- */
.pilares { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-s); overflow: hidden; }
@media (min-width: 640px) { .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pilares a { position: relative; display: grid; gap: .45rem; align-content: start; height: 100%; min-height: 15rem; padding: 1.4rem 1.3rem 1.6rem; background: var(--bg); color: var(--tinta); text-decoration: none; transition: background-color var(--dur-corta) var(--ease-suave); }
.pilares a::after { content: "→"; position: absolute; right: 1.2rem; bottom: 1.2rem; font-family: var(--f-display); font-weight: 700; color: var(--acento-tinta); transition: transform var(--dur-corta) var(--ease-suave); }
.pilares a:hover { background: var(--superficie); }
.pilares a:hover::after { transform: translateX(4px); }
.pilares__n { font-family: var(--f-display); font-size: 3.4rem; font-weight: 800; font-stretch: 66%; line-height: .85; color: color-mix(in srgb, var(--tinta) 22%, transparent); font-variant-numeric: tabular-nums; }
.pilares__marca { margin-top: var(--e-s); font-family: var(--f-display); font-size: .78rem; font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.pilares b { font-family: var(--f-display); font-size: var(--t-3); font-weight: 720; font-stretch: 96%; line-height: 1.05; letter-spacing: -.015em; }
.pilares__txt { color: var(--tinta-2); font-size: var(--t-chico); max-width: 30ch; padding-right: 1.5rem; }
.pilares__cimiento { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-top: var(--e-m); padding: 1rem 1.3rem; border: 1px solid var(--borde); border-radius: var(--r-s); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--tinta) 4%, transparent) 10px 11px); font-family: var(--f-display); font-weight: 600; font-stretch: 96%; font-size: 1.1rem; }
.pilares__cimiento .etiqueta { color: var(--acento-tinta); }

/* --- Sello JM: foto a media sangre + distintivo como objeto --- */
.sello__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: center; }
@media (min-width: 1024px) { .sello__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-3xl); } }
.sello__media { position: relative; }
@media (min-width: 1024px) { .sello__media { margin-left: calc(var(--margen) * -1); } .sello__media .foto { border-radius: 0 var(--r-s) var(--r-s) 0; } }
.sello__distintivo { position: absolute; z-index: 3; right: -1.5rem; bottom: -2rem; width: clamp(7rem, 12vw, 10.5rem); height: auto; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .45)); rotate: -8deg; }
@media (max-width: 1023px) { .sello__distintivo { right: 1rem; } }
.sello__lista { list-style: none; padding: 0; margin-top: var(--e-xl); display: grid; gap: 0; counter-reset: sl; }
@media (min-width: 720px) { .sello__lista { grid-template-columns: 1fr 1fr; column-gap: var(--e-l); } }
.sello__lista li { counter-increment: sl; display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem; padding: 1rem 0; border-top: 1px solid var(--borde); color: var(--tinta-2); }
.sello__lista li::before { content: none; }
.sello__lista b { color: var(--tinta); font-weight: 700; }

/* --- Torre JM: dúo de fotos --- */
.torre__fotos { position: relative; padding-bottom: 12%; }
.torre__foto-a { width: 82%; margin-left: auto; }
.torre__foto-b { position: absolute; left: 0; bottom: 0; width: 44%; box-shadow: var(--sombra-3); outline: 6px solid var(--bg); }
.huella { display: grid; align-content: start; gap: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--borde); border-radius: var(--r-m); }

/* --- Red JM: foto alta --- */
.red__media { position: relative; }
@media (min-width: 1024px) { .red__media .foto { position: sticky; top: calc(var(--cab-alto) + 1.5rem); height: calc(100svh - var(--cab-alto) - 3rem); aspect-ratio: auto; } }
.red__foto { --ar: 4 / 5; }


/* ==========================================================================
   26. Acordeón (details/summary nativo; animado con ::details-content
   donde exista, sin JS)
   ========================================================================== */
.acordeon { border-top: 1px solid var(--borde); }
.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-m);
  min-height: 3.75rem; padding-block: var(--e-s); cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: var(--t-4); font-weight: 680; font-stretch: 94%;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--borde);
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transition: transform var(--dur-corta) var(--ease-vaiven), background-size var(--dur-corta) var(--ease-vaiven); }
.acordeon details[open] summary::after { transform: rotate(180deg); background-size: 10px 1.5px, 1.5px 0; }
.acordeon__cuerpo { padding-bottom: var(--e-m); color: var(--tinta-2); max-width: var(--medida); }
@supports selector(::details-content) {
  .acordeon details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-media) var(--ease-salida), content-visibility var(--dur-media) allow-discrete; }
  .acordeon details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }
}


/* ==========================================================================
   27. Pestañas (role=tablist; flechas ← → con base.js)
   ========================================================================== */
.pestanas__lista { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--borde); }
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestanas__tab {
  position: relative; flex: none; min-height: 3rem; padding: .7rem 1rem;
  font-family: var(--f-display); font-weight: 650; font-stretch: 92%; color: var(--tinta-3);
  transition: color var(--dur-corta) var(--ease-suave);
}
.pestanas__tab::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2.5px; background: var(--acento); transform: scaleX(0); transition: transform var(--dur-corta) var(--ease-salida); }
.pestanas__tab:hover { color: var(--tinta); }
.pestanas__tab[aria-selected="true"] { color: var(--tinta); }
.pestanas__tab[aria-selected="true"]::after { transform: scaleX(1); }
.pestanas__panel { padding-top: var(--e-l); animation: aparece var(--dur-corta) var(--ease-suave); }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }


/* ==========================================================================
   28. Formularios y formulario multi-paso
   ========================================================================== */
.campo { display: grid; gap: .4rem; }
.campo > span, .campo__label { font-family: var(--f-display); font-weight: 650; font-stretch: 92%; font-size: .95rem; }
.campo__ayuda { font-size: var(--t-nota); color: var(--tinta-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 3.1rem; padding: .7rem .9rem;
  background: var(--superficie); color: var(--tinta);
  border: 1.5px solid var(--borde); border-radius: var(--r-s);
  transition: border-color var(--dur-corta) var(--ease-suave), box-shadow var(--dur-corta) var(--ease-suave);
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--linea-2); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo__error { font-size: var(--t-nota); color: var(--error); font-weight: 700; }
[data-tema="noche"] .campo__error, [data-tema="madrugada"] .campo__error { color: #FFB4A8; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem; border: 1.5px solid var(--borde); border-radius: var(--r-pill); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background-color var(--dur-corta) var(--ease-suave), border-color var(--dur-corta) var(--ease-suave), color var(--dur-corta); }
.chips label:hover span { border-color: var(--linea-2); }
.chips input:checked + span { background: var(--tinta); color: var(--bg); border-color: var(--tinta); }
.chips input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: var(--t-chico); color: var(--tinta-2); }
.consent input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--cobre-600); }
.consent a { color: var(--tinta); }

.pasos-form { display: grid; gap: var(--e-l); padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--r-m); box-shadow: var(--sombra-3); }
.pasos-form__ruta { position: relative; display: flex; justify-content: space-between; align-items: center; }
.pasos-form__ruta::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--borde) 0 10px, transparent 10px 18px); }
.pasos-form__ruta::after { content: ""; position: absolute; left: 1rem; top: 50%; height: 2px; width: calc((100% - 2rem) * var(--p, 0)); background: var(--cobre); transition: width var(--dur-media) var(--ease-salida); }
.pasos-form__hito { position: relative; z-index: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde); font-family: var(--f-display); font-weight: 760; font-size: .9rem; color: var(--tinta-3); transition: all var(--dur-corta) var(--ease-suave); }
.pasos-form__hito.is-hecho { background: var(--noche); border-color: var(--noche); color: var(--cal-0); }
.pasos-form__hito.is-actual { border-color: var(--cobre); color: var(--tinta); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cobre) 18%, transparent); }
.pasos-form__estado { font-family: var(--f-display); font-size: .8rem; font-weight: 650; font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.pasos-form fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--e-m); }
.pasos-form legend { font-family: var(--f-display); font-size: var(--t-3); font-weight: 740; font-stretch: 96%; letter-spacing: -.015em; padding: 0; margin-bottom: var(--e-s); }
.pasos-form legend:focus { outline: none; }
.js .pasos-form fieldset.is-entrando { animation: aparece var(--dur-corta) var(--ease-suave); }
.pasos-form__acciones { display: flex; justify-content: space-between; gap: var(--e-s); flex-wrap: wrap; }
.pasos-form__acciones .boton:last-child { margin-left: auto; }
.pasos-form__aviso { padding: .9rem 1rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--ok) 12%, var(--superficie)); color: var(--tinta); font-size: var(--t-chico); }
.pasos-form__error { color: var(--error); font-weight: 700; font-size: var(--t-chico); }
.no-js .pasos-form fieldset[hidden] { display: grid !important; } /* sin JS: formulario largo */
.dos-col { display: grid; gap: var(--e-m); }
@media (min-width: 560px) { .dos-col { grid-template-columns: 1fr 1fr; } }


/* ==========================================================================
   29. Llegada (cierre a pantalla completa)
   ========================================================================== */
.llegada { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; background: var(--noche-950); color: var(--cal-0); overflow: hidden; padding-block: calc(var(--cab-alto) + var(--e-2xl)) var(--e-2xl); }
.llegada > .foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.llegada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 22 40 / .92) 0%, rgb(10 22 40 / .62) 45%, rgb(10 22 40 / .25) 100%); }
.llegada__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: end; }
@media (min-width: 1024px) { .llegada__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.llegada__cartel { font-size: clamp(4rem, 13vw, 14rem); font-weight: 850; font-stretch: 114%; line-height: .82; letter-spacing: -.045em; }
.llegada__cartel .punto { color: var(--cobre); }
.llegada__lead { margin-top: var(--e-l); font-family: var(--f-display); font-size: clamp(1.4rem, 1.4vw + 1rem, 2.2rem); font-weight: 600; font-stretch: 98%; line-height: 1.15; max-width: 24ch; }


/* ==========================================================================
   30. Pie de página
   ========================================================================== */
.pie { position: relative; background: var(--noche-950); color: var(--noche-100); padding-block: 0 calc(var(--e-l) + env(safe-area-inset-bottom)); --tinta: var(--cal-0); --tinta-2: var(--noche-100); --tinta-3: var(--noche-300); --borde: rgb(220 226 235 / .12); --foco: var(--cobre-claro); --logo-acento: var(--cobre-claro); }
@media (max-width: 1199px) { body.con-odometro .pie { padding-bottom: calc(var(--e-l) + 2.75rem); } }
.pie .banda { color: var(--noche-800); }
.pie__alto { display: grid; gap: var(--e-xl) var(--medianil); padding-block: clamp(3.5rem, 7vw, 6.5rem) var(--e-2xl); border-bottom: 1px solid var(--borde); }
@media (min-width: 1024px) { .pie__alto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.pie__lema { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 5.25rem); font-weight: 800; font-stretch: 104%; line-height: .92; letter-spacing: -.035em; color: var(--cal-0); max-width: 14ch; }
.pie__lema .punto { color: var(--cobre); }
.pie__promesa { margin-top: var(--e-m); font-size: var(--t-lead); color: var(--noche-100); }
.pie__marca { color: var(--cal-0); width: min(18rem, 70%); }
.pie__marca svg { width: 100%; height: auto; }
.pie__columnas { display: grid; gap: var(--e-xl) var(--medianil); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--e-2xl); border-bottom: 1px solid var(--borde); }
@media (min-width: 900px) { .pie__columnas { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); } }
.pie__col h2 { font-family: var(--f-display); font-size: .78rem; font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--noche-300); margin-bottom: var(--e-s); }
.pie__col ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.pie__col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--noche-100); text-decoration: none; }
.pie__col a:hover { color: var(--cal-0); text-decoration: underline; }
.pie__sello { grid-column: 1 / -1; display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-m); align-items: center; padding: var(--e-m); background: var(--noche); border: 1px solid var(--borde); border-radius: var(--r-m); }
@media (min-width: 900px) { .pie__sello { grid-column: auto; grid-template-columns: 1fr; justify-items: start; } }
.pie__sello img { width: 6.5rem; height: auto; }
.pie__sello p { font-size: var(--t-chico); color: var(--noche-100); }
.pie__sello b { color: var(--cal-0); }
.pie__bajo { display: flex; flex-wrap: wrap; gap: var(--e-s) var(--e-xl); justify-content: space-between; align-items: center; padding-top: var(--e-l); font-size: var(--t-nota); color: var(--noche-300); }
.pie__talento { display: inline-flex; align-items: center; gap: .6rem; }
.pie__bajo a { color: var(--noche-100); }
.pie__creditos { max-width: 70ch; }


/* ==========================================================================
   31. Revelados y motion
   .revelar entra con IO (fade + 24px), escalonado con --i.
   ========================================================================== */
.js .revelar { opacity: 0; transform: translateY(1.5rem); }
.js .revelar.is-visible { opacity: 1; transform: none; transition: opacity var(--dur-larga) var(--ease-salida), transform var(--dur-larga) var(--ease-salida); transition-delay: calc(var(--i, 0) * var(--escalon)); }
.js .revelar--izq { transform: translateX(-2rem); }
.js .revelar--escala { transform: scale(.96); }
.js .revelar--cortina { opacity: 1; transform: none; }
.js .revelar--cortina > .foto { clip-path: inset(0 0 100% 0); }
.js .revelar--cortina.is-visible > .foto { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-salida); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progreso-lectura { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-cab) + 1); background: var(--cobre); transform-origin: left; animation: progreso linear both; animation-timeline: scroll(root); }
  }
}
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ==========================================================================
   32. Esquema oscuro opcional — SOLO páginas utilitarias
   (privacidad, recursos). Activar con <html data-esquema="auto">.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html[data-esquema="auto"] { background: var(--noche-950); }
  html[data-esquema="auto"] body { --bg: var(--noche-950); --superficie: var(--noche); --superficie-2: var(--noche-800); --tinta: var(--cal-0); --tinta-2: var(--noche-100); --tinta-3: var(--noche-300); --borde: rgb(220 226 235 / .14); --acento-tinta: var(--cobre-claro); --foco: var(--cobre-claro); color-scheme: dark; }
  html[data-esquema="auto"] .cab.is-solida { background: rgb(10 22 40 / .9); color: var(--cal-0); --logo-acento: var(--cobre-claro); }
}


/* ==========================================================================
   33. Reduced motion: todo legible y quieto; los estados se mantienen
   como fundido de 120 ms.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; }
  .js .revelar, .js .revelar--cortina, .js .revelar--cortina > .foto { opacity: 1; transform: none; clip-path: none; }
  .js .hero__titulo .linea > span { transform: none; }
  .manifiesto { height: auto; }
  .manifiesto__pin { position: relative; height: auto; }
  .js .manifiesto__texto.is-palabras .w { color: inherit; }
  .horizontal__pista { flex-direction: column; overflow: visible; padding-inline: var(--margen); }
  .paso { width: 100%; }
  .js .evento { opacity: 1; }
  .peru .pr { stroke-dashoffset: 0; }
  .cinta__fila { flex-wrap: wrap; width: auto; }
  .cinta__fila [aria-hidden="true"] { display: none; }
  .cinta__pista { flex-wrap: wrap; row-gap: 1rem; padding-inline: var(--margen); }
}


/* ==========================================================================
   34. Impresión
   ========================================================================== */
@media print {
  .cab, .odometro, .menu, .hero__barra, .boton-pausa, video { display: none !important; }
  body { background: #fff; color: #000; }
  .tramo, .hero, .llegada, .pie { background: #fff !important; color: #000 !important; min-height: 0 !important; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
}
/* v2.0.1 · color de texto correcto en calculadoras/tarjetas con tema propio dentro de tramos oscuros */
.calc[data-tema], [data-tema="cal"], [data-tema="piedra"] { color: var(--tinta); }

/* Torre (portada): la foto pequeña tapa la esquina inferior izquierda del video */
.torre__foto-a .boton-pausa { top: .6rem; bottom: auto; }


/* ==========================================================================
   35. Capa v3 (19 oct 2026)
   - Limpieza de señales «de IA» (01_Analisis §5.7): sin numeración repetida,
     sin marquee, sin guiones de color, sin puntos en las etiquetas.
   - Odómetro navegable: lista de paradas (saltar a un tramo).
   - Carril horizontal → vertical en móvil; sticky ≤ 150 vh.
   - Créditos de imágenes y video en el pie de cada página.
   ========================================================================== */

/* Numeración: un solo bloque numerado por página. Fuera del menú, de las
   tarjetas de servicio y de los pilares; los pasos (.paso__n) se quedan. */
.menu__principal .n, .serv__n, .pilares__n { display: none; }
.menu__principal a { grid-template-columns: 1fr auto; }

/* <i> solo se usa como contenedor de glifos (flechas, celdas): nunca cursiva
   (además evita descargar la Atkinson itálica en la portada) */
i { font-style: normal; }

/* La banda de delineadores no se mueve sola (solo con scroll, ≤ 1 paso) */
.banda--viva { animation: none !important; }

/* Cinta de cifras: estática y legible (el marquee se retiró) */
.cinta__fila { width: auto; flex-wrap: wrap; animation: none !important; }
.cinta__fila [aria-hidden="true"] { display: none; }
.cinta__pista { flex-wrap: wrap; row-gap: var(--e-m); padding-inline: var(--margen); }
.cinta__pista li { white-space: normal; border-left: 0; }
@media (max-width: 719px) { .cinta__fila--b { display: flex; } }

/* Manifiesto fijado: 150 vh como máximo */
@media (min-width: 1024px) { .manifiesto { height: 150svh; } }

/* Carril horizontal: en móvil y tableta pasa a lista vertical */
@media (max-width: 1023px) {
  .horizontal__pista { flex-direction: column; overflow: visible; scroll-snap-type: none; padding-inline: var(--margen); gap: var(--e-s); }
  .paso { width: 100%; padding-top: clamp(1.25rem, 2vw, 1.75rem); }
  .paso__n { font-size: 3.2rem; }
  .horizontal__via, .horizontal__ayuda { display: none; }
}

/* Etiqueta de estado v3: texto con filete, sin punto ni píldora */
.estado { font-weight: 700; letter-spacing: .09em; }
.estado--vivo { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.estado--simulacion { border-style: dashed; }

/* Antetítulo: texto en el acento, sin rayita ni caja */
.hero__etiqueta { color: var(--noche-100); }
.hito { color: var(--tinta-2); }

/* Comillas y citas: comillas tipográficas “ ” en el texto, no «» */
q { quotes: "“" "”" "‘" "’"; }

/* --------------------------------------------------------------------------
   Odómetro navegable
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) { .odometro { opacity: 0; transition: translate var(--dur-media) var(--ease-salida), opacity var(--dur-media) var(--ease-suave); } .odometro.is-visible { opacity: 1; } }
.odometro__abrir {
  pointer-events: auto; margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .2rem; color: var(--cal-0);
  font-family: var(--f-display); font-size: .8rem; font-weight: 700; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase;
}
.odometro__abrir i { width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -135deg; translate: 0 .15rem; transition: rotate var(--dur-corta) var(--ease-suave); }
.odometro.is-abierto .odometro__abrir i { rotate: 45deg; translate: 0 -.1rem; }
.odometro__paradas {
  pointer-events: auto; position: absolute; left: 0; right: 0; bottom: 100%;
  max-height: min(70svh, 34rem); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e-s) var(--margen) var(--e-m);
  background: var(--noche-950); color: var(--cal-0); border-top: 1px solid rgb(220 226 235 / .14);
  visibility: hidden; opacity: 0; translate: 0 .75rem;
  transition: opacity var(--dur-corta) var(--ease-suave), translate var(--dur-corta) var(--ease-suave), visibility 0s linear var(--dur-corta);
}
.odometro.is-abierto .odometro__paradas { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.odometro__titulo { font-family: var(--f-display); font-size: .74rem; font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--noche-300); margin-bottom: var(--e-xs); }
.odometro__paradas ol { list-style: none; padding: 0; }
.odometro__paradas a {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: .1rem .8rem; align-items: baseline;
  min-height: 44px; padding: .55rem 0; border-top: 1px solid rgb(220 226 235 / .1);
  color: var(--cal-0); text-decoration: none;
}
.odometro__paradas a b { font-family: var(--f-display); font-weight: 800; font-stretch: 72%; font-variant-numeric: tabular-nums; font-size: 1rem; letter-spacing: .04em; }
.odometro__paradas a span:not(.odometro__t) { font-size: .84rem; color: var(--noche-300); }
.odometro__paradas a .odometro__t { grid-column: 2; font-size: .9rem; line-height: 1.3; color: var(--noche-100); }
.odometro__paradas a[aria-current] b { color: var(--cobre-claro); }
.odometro__paradas a:hover .odometro__t, .odometro__paradas a:focus-visible .odometro__t { color: var(--cal-0); text-decoration: underline; }

@media (min-width: 1200px) {
  .odometro__abrir { display: none; }
  /* En escritorio las paradas son marcas sobre la vía: un clic y salta. */
  .odometro__paradas {
    position: absolute; inset: 0 auto 0 0; width: 100%; max-height: none; overflow: visible;
    padding: 0; background: none; border: 0; visibility: visible; opacity: 1; translate: none;
  }
  .odometro__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .odometro__paradas ol { position: absolute; left: 50%; top: 0; bottom: 11rem; width: 0; }
  .odometro__paradas li { position: absolute; top: calc(var(--f, 0) * 100%); left: 0; }
  .odometro__paradas a {
    position: absolute; left: -11px; top: -11px; display: block; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0;
  }
  .odometro__paradas a::before { content: ""; position: absolute; left: 5px; top: 9px; width: 12px; height: 4px; border-radius: 1px; background: var(--via-color, rgb(58 63 68 / .45)); transition: background-color var(--dur-corta), width var(--dur-corta); }
  .odometro__paradas a[aria-current]::before { background: var(--cobre); }
  .odometro__paradas a:hover::before, .odometro__paradas a:focus-visible::before { background: var(--cobre); width: 16px; left: 3px; }
  .odometro__paradas a b, .odometro__paradas a span:not(.odometro__t) {
    position: absolute; left: 28px; white-space: nowrap; pointer-events: none;
    opacity: 0; translate: -.4rem 0; transition: opacity var(--dur-corta) var(--ease-suave), translate var(--dur-corta) var(--ease-suave);
  }
  .odometro__paradas a b { top: -6px; padding: .3rem .5rem .25rem; background: var(--noche); color: var(--cal-0); border-radius: var(--r-xs) var(--r-xs) 0 0; font-size: .82rem; }
  .odometro__paradas a span:not(.odometro__t) { top: 18px; padding: .1rem .5rem .35rem; background: var(--noche); color: var(--noche-300); border-radius: 0 0 var(--r-xs) var(--r-xs); font-size: .74rem; }
  .odometro__paradas a .odometro__t { display: none; }
  .odometro__paradas a:hover :is(b, span:not(.odometro__t)), .odometro__paradas a:focus-visible :is(b, span:not(.odometro__t)) { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .odometro__paradas, .odometro__paradas a * { transition: none; } }

/* --------------------------------------------------------------------------
   Créditos de imágenes y video (pie de todas las páginas)
   Lo genera _herramientas/creditos.py entre <!-- creditos:inicio/fin -->.
   -------------------------------------------------------------------------- */
.creditos { width: 100%; margin-top: var(--e-m); border-top: 1px solid var(--borde); font-size: var(--t-nota); color: var(--noche-300); }
.creditos summary {
  display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 650; font-stretch: 84%; letter-spacing: .02em; color: var(--noche-100);
}
.creditos summary::-webkit-details-marker { display: none; }
.creditos summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -.15rem; transition: rotate var(--dur-corta) var(--ease-suave); }
.creditos[open] summary::after { rotate: -135deg; translate: 0 .1rem; }
.creditos summary small { font-family: var(--f-texto); font-weight: 400; color: var(--noche-300); letter-spacing: 0; }
.creditos__lista { list-style: none; padding: 0 0 var(--e-m); display: grid; gap: .1rem var(--medianil); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.creditos__lista li { padding-block: .45rem; border-top: 1px solid rgb(220 226 235 / .08); line-height: 1.4; }
.creditos__lista b { color: var(--noche-100); font-weight: 600; }
.creditos__lista a { color: var(--noche-100); }
.creditos__pie { padding-bottom: var(--e-s); }
.creditos__pie a { color: var(--noche-100); }
/* El rótulo de lugar va pegado a la foto (P1: la foto con nombre del lugar) */
.rotulo-lugar { font-family: var(--f-display); font-size: .78rem; font-weight: 650; font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; }

/* Tabla de créditos (creditos.html) */
.creditos-tabla table { width: 100%; min-width: 46rem; font-size: var(--t-chico); border-top: 1.5px solid var(--tinta); }
.creditos-tabla th, .creditos-tabla td { text-align: left; vertical-align: top; padding: .65rem 1rem .65rem 0; border-bottom: 1px solid var(--borde); }
.creditos-tabla thead th { font-family: var(--f-display); font-size: .78rem; font-weight: 700; font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.creditos-tabla tbody th { font-weight: 600; max-width: 22rem; }
.creditos-tabla small { color: var(--tinta-3); font-weight: 400; }
.creditos-tabla a { color: var(--acento-tinta); }