/* ==========================================================================
   JM Rutas · v3.0 · Portada «Salida 05:40 Lima → Trujillo 18:10»
   Solo piezas de la portada. Tokens y componentes base: base.css (§01b y §35).
   Cada tramo tiene una gramática distinta (01_Analisis §5.7):
   0 video a sangre · 1 lista editorial con filetes · 2 manifiesto fijado ·
   3 foto a sangre + gráfico · 4 panel de instrumento · 5 lista con casillas ·
   6 recorrido fijo con teléfono · 7 mapa por capas · 8 foto + comparador ·
   9 cierre centrado.
   ========================================================================== */

.antetitulo { font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 680; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.portada-v3 .tramo { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.portada-v3 .cifra, .portada-v3 output { word-spacing: .16em; }
.portada-v3 .pie__alto { padding-block: clamp(3rem, 5vw, 4.5rem) var(--e-xl); }
.portada-v3 .pie__columnas { padding-block: var(--e-xl); }
.portada-v3 h2.t-2 { max-width: 18ch; }
.fuente-plegable summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: .25em; }
.fuente-plegable p { font-size: var(--t-nota); color: var(--tinta-3); max-width: 52ch; padding-bottom: .5rem; }
.fuente-plegable a { color: var(--acento-tinta); }

/* --------------------------------------------------------------------------
   Tramo 0 · Salida
   -------------------------------------------------------------------------- */
.salida { min-height: 100svh; }
.salida .hero__media picture, .salida .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.salida .hero__media video { object-position: 30% 50%; }
/* Velo por capas, localizado donde vive el texto (P2) */
.salida__velo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --velo-movil: linear-gradient(to bottom, rgb(10 22 40 / 0), rgb(10 22 40 / 0));
  background:
    linear-gradient(to bottom, rgb(10 22 40 / .6) 0%, rgb(10 22 40 / 0) 26%),
    radial-gradient(120% 90% at 0% 100%, rgb(10 22 40 / .88) 0%, rgb(10 22 40 / .55) 38%, rgb(10 22 40 / 0) 68%),
    linear-gradient(to top, rgb(10 22 40 / .7) 0%, rgb(10 22 40 / 0) 30%); }
.salida__contenido { position: relative; z-index: 1; align-self: end; display: grid; gap: clamp(1rem, 2.6vh, 2rem); padding-top: calc(var(--cab-alto) + var(--e-xl)); padding-bottom: clamp(1.25rem, 3vh, 2.5rem); }
.salida__marca { color: var(--cal); font-size: clamp(.9rem, .5vw + .75rem, 1.15rem); text-shadow: 0 1px 2px rgb(10 22 40 / .55), 0 0 18px rgb(10 22 40 / .45); }
.salida__titulo, .salida__lead { text-shadow: 0 1px 24px rgb(10 22 40 / .35); }
.salida__titulo { font-size: clamp(2.9rem, 7.4vw + .2rem, 9.5rem); font-weight: 850; font-stretch: 112%; line-height: .86; letter-spacing: -.04em; max-width: 13ch; margin-left: -.04em; }
.salida__titulo .linea { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.salida__titulo .linea > span { display: inline-block; }
.salida__titulo .punto { color: var(--cobre); }
.js .salida__titulo .linea > span { transform: translateY(105%); }
.js .salida__titulo.is-listo .linea > span { transform: none; transition: transform 700ms var(--ease-salida); transition-delay: calc(var(--n, 0) * 110ms + 80ms); }
.salida__pie { display: grid; gap: var(--e-l); align-items: end; }
@media (min-width: 1024px) { .salida__pie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-2xl); } }
.salida__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--noche-100); max-width: 40ch; }
/* Dos puertas como texto con flecha, no como tarjetas */
.dos-puertas { display: grid; border-top: 1px solid rgb(247 244 238 / .28); }
@media (min-width: 640px) { .dos-puertas { grid-template-columns: 1fr 1fr; column-gap: var(--medianil); } }
.dos-puertas a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .15rem 1rem; padding: .9rem 0 1rem; border-bottom: 1px solid rgb(247 244 238 / .28); color: var(--cal); text-decoration: none; }
.dos-puertas small { grid-column: 1 / -1; font-family: var(--f-display); font-size: .74rem; font-weight: 680; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-claro); }
.dos-puertas span { font-family: var(--f-display); font-size: clamp(1.15rem, .9vw + .9rem, 1.5rem); font-weight: 700; font-stretch: 92%; line-height: 1.15; }
.dos-puertas i { font-style: normal; font-family: var(--f-display); font-size: 1.4rem; transition: translate var(--dur-corta) var(--ease-suave); }
.dos-puertas a:hover i, .dos-puertas a:focus-visible i { translate: .35rem 0; }
.dos-puertas a:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.salida__barra { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: .9rem 1.5rem; color: var(--noche-100); }
.salida__lugar { display: flex; flex-wrap: wrap; gap: .35rem .5rem; color: var(--cal); }
.salida__ref { color: var(--noche-300); letter-spacing: .06em; text-transform: none; font-family: var(--f-texto); font-weight: 400; font-size: .78rem; margin-left: .35rem; }
.salida .bajar { margin-left: auto; color: var(--cal); font-size: var(--t-chico); text-decoration: none; display: inline-flex; gap: .4rem; min-height: 44px; align-items: center; }
.salida__banda { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; opacity: .5; }
@media (max-width: 639px) {
  .salida__velo { background: linear-gradient(to bottom, rgb(10 22 40 / .55) 0%, rgb(10 22 40 / .5) 30%, rgb(10 22 40 / .72) 55%, rgb(10 22 40 / .9) 100%); }
  .salida__barra { padding-bottom: 1.25rem; }
  .salida .bajar { display: none; }
}

/* --------------------------------------------------------------------------
   Tramo 1 · Tres respuestas (lista editorial con filetes, sin cajas)
   -------------------------------------------------------------------------- */
.respuestas__cab { display: grid; gap: var(--e-s); max-width: 60rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1024px) { .respuestas__cab { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-2xl); align-items: end; } .respuestas__cab .antetitulo { grid-column: 1 / -1; } }
.respuestas__nota { font-size: var(--t-chico); color: var(--tinta-3); max-width: 40ch; }
.respuestas__lista { list-style: none; padding: 0; border-top: 1.5px solid var(--tinta); }
.respuesta { display: grid; gap: .4rem var(--medianil); padding-block: clamp(1.1rem, 1.8vw, 1.6rem); border-bottom: 1px solid var(--borde); }
@media (min-width: 900px) {
  .respuesta { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); align-items: start; }
}
.respuesta__q { font-size: var(--t-3); font-weight: 720; font-stretch: 94%; line-height: 1.1; letter-spacing: -.015em; max-width: 16ch; }
.respuesta__cifra { font-size: clamp(3.4rem, 6vw, 6rem); line-height: .82; color: var(--tinta); letter-spacing: -.02em; }
.respuesta__cifra small { font-size: .32em; font-weight: 700; font-stretch: 85%; letter-spacing: .02em; margin-left: .15em; }
.respuesta:first-child .respuesta__cifra { color: var(--acento); }
.respuesta__a p { color: var(--tinta-2); max-width: 46ch; }
.respuesta__a b { color: var(--tinta); }
.respuesta__estado { margin-top: .6rem; display: inline-block; margin-right: 1rem; }
.respuesta__a .fuente-plegable { display: inline-block; vertical-align: middle; }
.respuesta__a .fuente-plegable[open] { display: block; }

/* --------------------------------------------------------------------------
   Tramo 2 · Manifiesto con espacio honesto para los fundadores
   -------------------------------------------------------------------------- */
.manifiesto-v3 { color: var(--tinta); }
.manifiesto-v3__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); padding-block: clamp(4rem, 8vw, 6rem); }
@media (min-width: 1024px) {
  .manifiesto-v3__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; padding-block: calc(var(--cab-alto) + 1rem) 2rem; }
}
.manifiesto-v3 .manifiesto__texto { margin-top: var(--e-l); max-width: 30ch; }
.manifiesto-v3 .manifiesto__firma { margin-top: var(--e-l); font-family: var(--f-display); font-stretch: 90%; font-weight: 650; color: var(--arcilla-tinta); }
.fundadores { display: grid; gap: var(--e-s); max-width: 26rem; justify-self: end; width: 100%; }
@media (max-width: 1023px) { .fundadores { justify-self: start; max-width: 22rem; } }
.fundadores__hueco { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center;
  background: var(--adobe) var(--topo-svg) center / 360px; border-radius: var(--r-xs);
  outline: 1.5px dashed color-mix(in srgb, var(--noche) 45%, transparent); outline-offset: -10px; }
.fundadores__marca { position: absolute; left: 1.25rem; top: 1.25rem; width: 2.2rem; height: 1.25rem; background: var(--noche); -webkit-mask: var(--banda-svg) left center / 1.25rem 1.25rem repeat-x; mask: var(--banda-svg) left center / 1.25rem 1.25rem repeat-x; opacity: .8; }
.fundadores__aviso { font-family: var(--f-display); font-size: clamp(1.4rem, 1.6vw + .8rem, 2rem); font-weight: 800; font-stretch: 92%; line-height: 1.05; color: var(--noche); }
.fundadores__aviso span { font-weight: 500; font-stretch: 100%; color: var(--arcilla-tinta); }
.fundadores figcaption { font-size: var(--t-nota); color: var(--tinta-3); max-width: 36ch; }

/* --------------------------------------------------------------------------
   Tramo 3 · Mercado: foto a sangre con velo localizado + cuadrícula
   -------------------------------------------------------------------------- */
.mercado { position: relative; isolation: isolate; overflow: hidden; background: var(--noche-950); color: var(--cal); padding-block: clamp(4.5rem, 9vw, 8rem) 1.5rem; }
.mercado__foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.mercado__foto img { object-position: 50% 62%; }
.mercado__velo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 22 40 / .9) 0%, rgb(10 22 40 / .72) 42%, rgb(10 22 40 / .35) 70%, rgb(10 22 40 / .55) 100%), linear-gradient(to top, rgb(10 22 40 / .55), rgb(10 22 40 / 0) 40%); }
@media (max-width: 1023px) { .mercado__velo { background: linear-gradient(to bottom, rgb(10 22 40 / .55), rgb(10 22 40 / .88) 45%, rgb(10 22 40 / .94)); } }
.mercado__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: end; }
@media (min-width: 1024px) { .mercado__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.mercado .t-2 { margin-top: var(--e-s); max-width: 15ch; }
.mercado .lead { margin-top: var(--e-m); color: var(--noche-100); }
.mercado__otras { margin-top: var(--e-xl); display: grid; gap: var(--e-m); max-width: 34rem; }
.mercado__otras div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-s); align-items: baseline; padding-top: var(--e-s); border-top: 1px solid rgb(247 244 238 / .2); }
.mercado__otras dt { font-size: 2.4rem; line-height: .9; color: var(--ocre-claro); }
.mercado__otras dd { color: var(--noche-100); }
.mercado__otras .fuente { display: block; margin-top: .2rem; color: #8A9AB2; }
.cuadricula { padding: clamp(1.25rem, 2vw, 1.75rem); background: rgb(10 22 40 / .78); border: 1px solid rgb(220 226 235 / .14); border-radius: var(--r-s); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cuadricula__titulo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: var(--e-s); font-size: var(--t-chico); color: var(--noche-300); }
.cuadricula__titulo b { font-family: var(--f-display); font-stretch: 88%; color: var(--cal); }
.cuadricula__malla { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; aspect-ratio: 1; max-width: 22rem;
  /* Sin JS: 81 % en cobre claro, 19 % en contorno (degradado duro, no decorativo) */
  background: linear-gradient(to bottom, var(--cobre-claro) 0 81%, rgb(220 226 235 / .16) 81% 100%); border-radius: 2px; }
.cuadricula.is-pintada .cuadricula__malla { background: none; }
.cuadricula__malla i { aspect-ratio: 1; border-radius: 1px; border: 1px solid rgb(220 226 235 / .35); }
.cuadricula__malla i.si { background: var(--cobre-claro); border-color: var(--cobre-claro); }
.js .cuadricula.is-pintada .cuadricula__malla i.si { background: transparent; border-color: rgb(220 226 235 / .35); transition: background-color 260ms var(--ease-suave), border-color 260ms var(--ease-suave); transition-delay: calc(var(--i) * 9ms); }
.js .cuadricula.is-pintada.is-visible .cuadricula__malla i.si { background: var(--cobre-claro); border-color: var(--cobre-claro); }
.cuadricula__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: var(--e-s); font-size: var(--t-nota); color: var(--noche-100); }
.cuadricula__leyenda i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -.1rem; border: 1px solid rgb(220 226 235 / .5); }
.cuadricula__leyenda i.si { background: var(--cobre-claro); border-color: var(--cobre-claro); }
.como-leerlo { margin-top: var(--e-m); padding-top: var(--e-s); border-top: 1px solid rgb(220 226 235 / .14); display: grid; gap: .5rem; font-size: var(--t-chico); color: var(--noche-100); }
.como-leerlo__t { font-family: var(--f-display); font-weight: 700; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; color: var(--ocre-claro); }
.como-leerlo .fuente { color: #8A9AB2; }
.mercado__lugar { margin-top: var(--e-xl); color: var(--noche-300); }

/* --------------------------------------------------------------------------
   Tramo 4 · Instrumento para la empresa (papel claro)
   -------------------------------------------------------------------------- */
.costo__cab { display: grid; gap: var(--e-s); margin-bottom: var(--e-xl); }
@media (min-width: 1024px) { .costo__cab { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-2xl); align-items: end; } .costo__cab .antetitulo { grid-column: 1 / -1; } }
.instrumento { display: grid; background: var(--cal-0); border: 1px solid var(--borde); border-radius: var(--r-s); box-shadow: var(--sombra-1); }
@media (min-width: 1024px) { .instrumento { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.instrumento__entradas { border: 0; padding: clamp(1.25rem, 2.6vw, 2.25rem); display: grid; gap: var(--e-l); align-content: start; min-width: 0; }
.instrumento__ayuda { font-size: var(--t-chico); color: var(--tinta-3); }
.campo-grupo__t, .campo-rango label { font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: 1rem; }
.campo-grupo .chips { margin-top: .6rem; }
.campo-rango { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: baseline; }
.campo-rango output { font-family: var(--f-display); font-weight: 800; font-stretch: 72%; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.campo-rango .rango { grid-column: 1 / -1; }
.instrumento__salida { padding: clamp(1.25rem, 2.6vw, 2.25rem); display: grid; gap: var(--e-s); align-content: start; background: var(--piedra); border-top: 1px solid var(--borde); border-radius: 0 0 var(--r-s) var(--r-s); }
@media (min-width: 1024px) { .instrumento__salida { border-top: 0; border-left: 1px solid var(--borde); border-radius: 0 var(--r-s) var(--r-s) 0; } }
.resultado { display: grid; gap: .25rem; padding-bottom: var(--e-s); border-bottom: 1px solid var(--borde); }
.resultado__t { font-family: var(--f-display); font-weight: 700; font-stretch: 88%; color: var(--tinta-2); }
.resultado__v { font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: .95; color: var(--grana); }
.resultado--jm .resultado__v { color: var(--noche); }
.resultado__u { font-size: var(--t-chico); color: var(--tinta-3); max-width: 44ch; }
.resultado__dif { font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; }
.resultado__dif b { color: var(--cobre-tinta); font-family: var(--f-display); font-stretch: 88%; }
.desglose__t { font-size: var(--t-nota); color: var(--tinta-3); margin-bottom: .35rem; }
.desglose ul { list-style: none; padding: 0; }
.desglose li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-top: 1px solid var(--borde); font-size: var(--t-chico); }
.desglose li b { font-family: var(--f-display); font-stretch: 84%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resultado__nota { font-size: var(--t-nota); color: var(--tinta-3); }
.instrumento__salida .boton { justify-self: start; white-space: normal; }
.supuestos { margin-top: var(--e-m); border-top: 1px solid var(--borde); }
.supuestos summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-family: var(--f-display); font-weight: 680; font-stretch: 92%; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: .25em; }
.supuestos__cuerpo { display: grid; gap: var(--e-s); padding-bottom: var(--e-m); font-size: var(--t-chico); color: var(--tinta-2); }
.supuestos__cuerpo > p { max-width: 70ch; }
.supuestos table { width: 100%; font-size: var(--t-nota); border-top: 1.5px solid var(--tinta); display: block; overflow-x: auto; }
.supuestos th, .supuestos td { text-align: left; vertical-align: top; padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--borde); }
.supuestos thead th { font-family: var(--f-display); font-stretch: 84%; color: var(--tinta); }
.supuestos code { font-size: .92em; }

/* --------------------------------------------------------------------------
   Tramo 5 · Sello JM contra su proveedor
   -------------------------------------------------------------------------- */
.chequeo__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); }
@media (min-width: 1024px) { .chequeo__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } .chequeo__cab { position: sticky; top: calc(var(--cab-alto) + 1.5rem); } }
.chequeo__cab .lead { margin-top: var(--e-m); }
.chequeo__cab .t-2 { margin-top: var(--e-s); }
.chequeo__inicio { margin-top: var(--e-s); font-size: var(--t-chico); color: var(--tinta-3); }
.chequeo__resultado { margin-top: var(--e-l); padding-top: var(--e-m); border-top: 1.5px solid var(--tinta); display: grid; gap: .6rem; }
.chequeo__cuenta { display: flex; align-items: baseline; gap: .6rem; }
.chequeo__cuenta b { font-size: clamp(4rem, 7vw, 6.5rem); line-height: .8; color: var(--acento); }
.chequeo__cuenta span { font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; font-stretch: 80%; color: var(--tinta-2); }
.chequeo__manda { font-family: var(--f-display); font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); font-weight: 700; font-stretch: 92%; line-height: 1.15; }
.chequeo__manda b { color: var(--cobre-tinta); }
.chequeo__prom { font-size: var(--t-chico); color: var(--tinta-2); max-width: 40ch; }
.frentes { list-style: none; padding: 0; margin-top: var(--e-s); display: grid; gap: .45rem; }
.frentes li { display: grid; grid-template-columns: 9.5rem 1fr 3.4rem; gap: .75rem; align-items: center; font-size: var(--t-nota); color: var(--tinta-2); }
.frentes i { height: .5rem; background: color-mix(in srgb, var(--tinta) 12%, transparent); border-radius: 1px; position: relative; overflow: hidden; }
.frentes i::after { content: ""; position: absolute; inset: 0; background: var(--noche-600); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 500ms var(--ease-salida); }
.frentes li.is-manda { color: var(--cobre-tinta); font-weight: 700; }
.frentes li.is-manda i { outline: 1.5px solid var(--cobre); outline-offset: 2px; }
.frentes li.is-manda i::after { background: var(--cobre); }
.frentes b { font-family: var(--f-display); font-stretch: 84%; text-align: right; font-variant-numeric: tabular-nums; }
.chequeo__lista { border: 0; padding: 0; min-width: 0; border-top: 1.5px solid var(--tinta); }
.punto-sello { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: center; padding-block: .95rem; border-bottom: 1px solid var(--borde); cursor: pointer; }
.punto-sello input { position: absolute; opacity: 0; width: 2.6rem; height: 2.6rem; margin: 0; cursor: pointer; }
.punto-sello__caja { width: 2.6rem; height: 2.6rem; border: 2px solid var(--noche); border-radius: var(--r-xs); background: var(--cal-0); display: grid; place-items: center; transition: background-color var(--dur-corta) var(--ease-suave); }
.punto-sello__caja::after { content: ""; width: .8rem; height: 1.35rem; border-right: 3px solid var(--cal); border-bottom: 3px solid var(--cal); rotate: 45deg; translate: 0 -.15rem; scale: 0; transition: scale var(--dur-corta) var(--ease-salida); }
.punto-sello input:checked + .punto-sello__caja { background: var(--noche); }
.punto-sello input:checked + .punto-sello__caja::after { scale: 1; }
.punto-sello input:focus-visible + .punto-sello__caja { outline: 3px solid var(--foco); outline-offset: 3px; }
.punto-sello__t { font-family: var(--f-display); font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); font-weight: 620; font-stretch: 94%; line-height: 1.25; }
.punto-sello:hover .punto-sello__caja { border-color: var(--cobre); }
.chequeo__fuente { margin-top: var(--e-m); }

/* --------------------------------------------------------------------------
   Tramo 6 · Torre JM: recorrido fijo con teléfono en HTML
   -------------------------------------------------------------------------- */
.torre-v3 { overflow: clip; }
.torre-v3__rejilla { display: grid; gap: var(--e-xl) var(--medianil); }
@media (min-width: 1024px) {
  .torre-v3__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "cab tel" "pasos tel"; align-items: start; }
  .torre-v3__cab { grid-area: cab; }
  .torre-v3__pasos { grid-area: pasos; }
  .telefono-caja { grid-area: tel; position: sticky; top: calc(var(--cab-alto) + 2rem); justify-self: center; }
}
.torre-v3 .lead { margin-top: var(--e-m); color: var(--noche-100); }
.torre-v3 .t-2 { margin-top: var(--e-s); }
.torre-v3__pasos { list-style: none; padding: 0; border-left: 2px dashed var(--noche-700); margin-left: .4rem; }
.torre-paso { position: relative; padding: 0 0 0 clamp(1.25rem, 2.5vw, 2.25rem); min-height: 25svh; opacity: .42; transition: opacity 400ms var(--ease-suave); }
.torre-paso:last-child { min-height: 0; padding-bottom: .5rem; }
.torre-paso::before { content: ""; position: absolute; left: -9px; top: .45rem; width: 16px; height: 16px; border-radius: 2px; background: var(--noche-950); border: 2px solid var(--noche-300); transition: background-color 300ms, border-color 300ms; }
.torre-paso.is-activo { opacity: 1; }
.torre-paso.is-activo::before { background: var(--cobre-claro); border-color: var(--cobre-claro); }
.torre-paso__h { font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 800; font-stretch: 70%; line-height: 1; color: var(--cobre-claro); font-variant-numeric: tabular-nums; }
.torre-paso h3 { margin-top: .35rem; font-size: var(--t-3); font-weight: 720; font-stretch: 94%; }
.torre-paso p { margin-top: .4rem; color: var(--noche-100); max-width: 40ch; }
.telefono-caja { display: grid; gap: var(--e-s); justify-items: center; }
.telefono { width: min(19rem, 78vw); aspect-ratio: 9 / 18.5; padding: .7rem; border-radius: 2.4rem; background: #05101F; border: 1px solid var(--noche-700); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .6), inset 0 0 0 5px #0d1a2e;
  display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; }
.telefono__barra { display: flex; justify-content: space-between; padding: .7rem 1rem .5rem; font-family: var(--f-display); font-size: .78rem; font-weight: 700; font-stretch: 80%; letter-spacing: .06em; color: var(--noche-300); }
.telefono__barra span:first-child { color: var(--cal); }
.telefono__mapa { position: relative; margin: 0 .35rem; height: 7.5rem; border-radius: 1rem; background: var(--noche); overflow: hidden; }
.telefono__mapa svg { width: 100%; height: 100%; }
.tm-base { fill: none; stroke: var(--noche-700); stroke-width: 3; stroke-linecap: round; }
.tm-ruta { fill: none; stroke: var(--cielo-claro); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transition: stroke-dashoffset 700ms var(--ease-salida); }
.tm-nodo { fill: var(--cal); }
.tm-etq { position: absolute; font-size: .66rem; color: var(--noche-300); font-family: var(--f-display); font-stretch: 85%; }
.tm-etq--a { left: 1.6rem; bottom: .3rem; } .tm-etq--b { right: 1.6rem; top: .3rem; }
.telefono__pantallas { position: relative; margin: .5rem .35rem .35rem; }
.pantalla { position: absolute; inset: 0; display: grid; align-content: start; gap: .45rem; padding: 1rem; border-radius: 1rem; background: var(--noche); opacity: 0; translate: 0 .6rem; transition: opacity 380ms var(--ease-suave), translate 380ms var(--ease-salida); }
.pantalla.is-activa { opacity: 1; translate: 0 0; }
.pantalla__etq { font-family: var(--f-display); font-size: .72rem; font-weight: 700; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; color: var(--noche-300); }
.pantalla__dato { font-size: 3rem; line-height: .9; color: var(--cal); }
.pantalla__txt { font-size: .86rem; line-height: 1.4; color: var(--noche-100); }
.pantalla__ok { margin-top: .3rem; font-size: .78rem; color: var(--yareta-claro); }
.pantalla__senal { justify-self: start; font-size: .78rem; }
.pantalla--alerta .pantalla__dato { color: var(--senal); }
.pantalla__evidencia { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.pantalla__evidencia span { aspect-ratio: 1; display: grid; place-items: end start; padding: .4rem; border-radius: .5rem; font-size: .7rem; color: var(--noche-300); background: var(--noche-800); }
.ev-foto { background: linear-gradient(160deg, var(--noche-700), var(--noche-800)) !important; }
.ev-firma { background: var(--noche-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M8 40c10-18 18-26 22-20s-6 22 2 20 12-26 18-22-4 22 4 20 14-16 18-14 6 10 20 4' fill='none' stroke='%23F7F4EE' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat !important; }
.telefono__nota { max-width: 19rem; text-align: center; font-size: var(--t-nota); color: var(--noche-300); display: grid; gap: .4rem; justify-items: center; }
.torre-v3.is-alerta .telefono { border-color: var(--senal); }
@media (max-width: 1023px) {
  /* Móvil: el teléfono queda fijo arriba sobre una banda opaca; los pasos
     pasan por debajo y se leen en la mitad inferior de la pantalla. */
  .telefono-caja { position: sticky; top: var(--cab-alto); z-index: 2; order: 2; margin-inline: calc(var(--margen) * -1); padding: .6rem var(--margen) .5rem; background: var(--noche-950); box-shadow: 0 14px 18px -10px var(--noche-950); }
  .torre-v3__pasos { order: 3; }
  .telefono { width: min(12rem, 52vw); aspect-ratio: 9 / 12.5; border-radius: 1.6rem; padding: .5rem; }
  .telefono__barra { padding: .45rem .8rem .35rem; }
  .telefono__mapa { height: 3.4rem; }
  .tm-etq { display: none; }
  .pantalla__dato { font-size: 1.9rem; }
  .pantalla { padding: .7rem; gap: .3rem; }
  .pantalla__txt { font-size: .76rem; }
  .pantalla__evidencia { display: none; }
  .telefono__nota { font-size: .72rem; }
  .telefono__nota span:not(.estado) { display: none; }
  .torre-paso { min-height: 42svh; padding-block: 1rem 2rem; }
  .torre-paso:last-child { min-height: 30svh; }
}


/* --------------------------------------------------------------------------
   Tramo 7 · Mapa de corredores por capas
   -------------------------------------------------------------------------- */
.mapa-v3__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: start; }
@media (min-width: 1024px) { .mapa-v3__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.mapa-v3 .t-2 { margin-top: var(--e-s); }
.capas { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--e-l); border-bottom: 1.5px solid var(--tinta); }
.capa { position: relative; min-height: 48px; padding: .5rem 1.1rem .5rem 0; margin-right: 1.1rem; font-family: var(--f-display); font-size: 1.12rem; font-weight: 700; font-stretch: 92%; color: var(--tinta-3); }
.capa small { font-weight: 800; font-stretch: 72%; font-size: .85rem; margin-left: .25rem; color: var(--tinta-3); }
.capa[aria-pressed="true"] { color: var(--tinta); }
.capa[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 1.1rem; bottom: -1.5px; height: 4px; background: var(--acento); }
.corredores-v3 { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-m); }
.corredor-v3 { min-height: 44px; padding: .45rem .9rem; border: 1.5px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: var(--r-xs); font-family: var(--f-display); font-weight: 700; font-stretch: 92%; text-align: left; }
.corredor-v3 small { font-family: var(--f-texto); font-weight: 400; font-stretch: 100%; color: var(--tinta-3); margin-left: .3rem; }
.corredor-v3[aria-pressed="true"] { background: var(--noche); color: var(--cal); border-color: var(--noche); }
.corredor-v3[aria-pressed="true"] small { color: var(--noche-300); }
.ficha-v3 { margin-top: var(--e-m); display: grid; background: var(--cal-0); border: 1px solid var(--borde); border-radius: var(--r-s); overflow: hidden; }
@media (min-width: 560px) { .ficha-v3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.ficha-v3__foto { position: relative; aspect-ratio: 4 / 3; border-radius: 0; }
@media (min-width: 560px) { .ficha-v3__foto { aspect-ratio: auto; min-height: 100%; } }
.ficha-v3__foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .7rem .55rem; font-size: .66rem; letter-spacing: .06em; color: var(--cal); background: linear-gradient(to top, rgb(10 22 40 / .8), rgb(10 22 40 / 0)); }
.ficha-v3__cuerpo { padding: var(--e-m); display: grid; gap: .6rem; align-content: start; }
.ficha-v3__t { font-size: var(--t-3); font-weight: 750; font-stretch: 92%; line-height: 1.05; }
.ficha-v3__t small { display: block; font-family: var(--f-texto); font-size: var(--t-chico); font-weight: 400; color: var(--tinta-3); margin-top: .25rem; }
.ficha-v3__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding-block: .6rem; border-block: 1px solid var(--borde); }
.ficha-v3__datos dt { font-size: .7rem; font-family: var(--f-display); font-weight: 700; font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.ficha-v3__datos dd { font-family: var(--f-display); font-weight: 750; font-stretch: 80%; font-size: 1.05rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ficha-v3__control { font-size: var(--t-chico); color: var(--tinta-2); }
.ficha-v3__control b { color: var(--tinta); }
.aliados-vacio { margin-top: var(--e-m); padding: var(--e-m); border: 1.5px dashed color-mix(in srgb, var(--tinta) 35%, transparent); border-radius: var(--r-s); display: grid; gap: .6rem; }
.aliados-vacio__n { font-size: 4.5rem; line-height: .8; color: var(--acento); }
.mapa-v3__lienzo { position: relative; }
.mapa-v3 .peru { max-height: 78svh; }
.mapa-v3 .peru .peru-deps path { fill: color-mix(in srgb, var(--ocre) 22%, var(--cal)); stroke: var(--ocre-100); }
.mapa-v3 .peru .pr-borde { stroke: var(--ocre-100); }
.mapa-v3 .peru .pr.is-oculta, .mapa-v3 .peru .pr-borde.is-oculta { opacity: .12; pointer-events: none; }
.mapa-v3[data-capa-activa="aliados"] .peru .pr { opacity: .28; }
.peru .peru-hito { opacity: 0; transition: opacity var(--dur-corta) var(--ease-suave); }
.peru .peru-hito.is-activo { opacity: 1; }
.peru .peru-hito path { stroke: var(--noche); stroke-width: 1.5; }
.peru .peru-hito text { font-family: var(--f-display); font-size: 13px; font-weight: 750; font-stretch: 85%; fill: var(--noche); }
.mapa-v3 .fuente { margin-top: var(--e-xs); }

/* --------------------------------------------------------------------------
   Tramo 8 · Para transportistas: foto a sangre a la izquierda + comparador
   -------------------------------------------------------------------------- */
.transportistas { display: grid; padding: 0; }
@media (min-width: 1024px) { .transportistas { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .flete__filas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil); } }
.transportistas__foto { position: relative; border-radius: 0; aspect-ratio: 3 / 2; }
@media (min-width: 1024px) {
  .transportistas__foto { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--cab-alto) + 1.5rem); margin-block: clamp(3rem, 5vw, 4.5rem); align-self: start; }
  .transportistas__foto img { position: absolute; inset: 0; object-position: 76% 80%; }
}
.transportistas__rotulo { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .2rem; padding: 2.5rem var(--margen) 1rem; color: var(--cal); font-size: var(--t-nota); background: linear-gradient(to top, rgb(10 22 40 / .82), rgb(10 22 40 / 0)); }
@media (min-width: 1024px) { .transportistas__rotulo { padding-inline: 1.5rem; } }
.transportistas__cuerpo { padding: clamp(3rem, 5vw, 4.5rem) var(--margen); display: grid; gap: var(--e-m); align-content: start; }
@media (min-width: 1024px) { .transportistas__cuerpo { padding-inline: clamp(2rem, 4vw, 4.5rem) var(--margen); } }
.transportistas .t-2 { margin-top: calc(var(--e-l) * -1 + var(--e-s)); }
.flete { display: grid; gap: var(--e-s); padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--cal-0); border: 1px solid var(--borde); border-radius: var(--r-s); }
.flete__filas { display: grid; gap: var(--e-s); }
.flete__fila { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: baseline; }
.flete__fila label { font-family: var(--f-display); font-weight: 700; font-stretch: 90%; }
.flete__fila output { font-family: var(--f-display); font-weight: 800; font-stretch: 72%; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.flete__fila .rango { grid-column: 1 / -1; }
.flete__comp { display: grid; gap: var(--medianil); }
@media (min-width: 560px) { .flete__comp { grid-template-columns: 1fr 1fr; } }
.flete__col { display: grid; gap: .3rem; align-content: start; padding-top: var(--e-s); border-top: 1.5px solid color-mix(in srgb, var(--tinta) 30%, transparent); }
.flete__col--jm { border-top-color: var(--cobre); }
.flete__t { font-family: var(--f-display); font-weight: 700; font-stretch: 88%; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.flete__v { font-size: clamp(2rem, 3vw, 2.8rem); line-height: .95; }
.flete__col--jm .flete__v { color: var(--cobre-tinta); }
.flete__u { font-size: var(--t-nota); color: var(--tinta-3); }
.flete__dias { margin-top: .4rem; display: flex; align-items: baseline; gap: .45rem; font-size: var(--t-chico); }
.flete__dias b { font-size: 1.8rem; line-height: 1; }
.flete__espera { font-size: var(--t-chico); color: var(--tinta-2); }
.flete__espera b { font-family: var(--f-display); font-stretch: 85%; color: var(--tinta); }
.flete__dif { font-size: var(--t-lead); line-height: 1.35; max-width: 40ch; }
.flete__dif b { color: var(--cobre-tinta); font-family: var(--f-display); font-stretch: 88%; }
.reglas { list-style: none; padding: 0; display: grid; border-top: 1.5px solid var(--tinta); }
@media (min-width: 720px) { .reglas { grid-template-columns: 1fr 1fr; column-gap: var(--medianil); } }
.reglas li { padding-block: .8rem; border-bottom: 1px solid var(--borde); color: var(--tinta-2); font-size: var(--t-chico); }
.reglas b { color: var(--tinta); }
.transportistas__talento { font-size: var(--t-chico); color: var(--tinta-2); }
.transportistas__talento a { color: var(--yareta-tinta); font-weight: 700; }

/* --------------------------------------------------------------------------
   Tramo 9 · Llegada (el único momento centrado)
   -------------------------------------------------------------------------- */
.cierre { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 56rem); display: grid; align-items: center; background: var(--noche-950); color: var(--cal); text-align: center; }
.cierre__foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.cierre__foto img { object-position: 60% 55%; }
.cierre__velo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 48%, rgb(10 22 40 / .62) 0%, rgb(10 22 40 / .3) 70%, rgb(10 22 40 / .15) 100%), linear-gradient(to top, rgb(10 22 40 / .55), rgb(10 22 40 / 0) 35%); }
.cierre__cuerpo { display: grid; justify-items: center; gap: var(--e-l); padding-block: calc(var(--cab-alto) + var(--e-2xl)) var(--e-xl); }
.cierre__cartel { font-size: clamp(3.2rem, 9vw, 9rem); font-weight: 850; font-stretch: 112%; line-height: .86; letter-spacing: -.04em; }
.cierre__cartel .punto { color: var(--cobre-claro); }
.cierre__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--noche-100); max-width: 40ch; }
.tres-puertas { display: grid; width: min(100%, 60rem); border-top: 1px solid rgb(247 244 238 / .3); text-align: left; }
@media (min-width: 800px) { .tres-puertas { grid-template-columns: repeat(3, 1fr); column-gap: var(--medianil); } }
.puerta-v3 { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: end; padding: 1rem 0 1.1rem; border-bottom: 1px solid rgb(247 244 238 / .3); color: var(--cal); text-decoration: none; cursor: pointer; }
.puerta-v3 small { grid-column: 1 / -1; font-family: var(--f-display); font-size: .74rem; font-weight: 680; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-claro); }
.puerta-v3 span { font-family: var(--f-display); font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); font-weight: 750; font-stretch: 92%; }
.puerta-v3 i { font-style: normal; font-size: 1.4rem; transition: translate var(--dur-corta) var(--ease-suave); }
.puerta-v3:hover i, .puerta-v3:focus-visible i { translate: .35rem 0; }
.puerta-v3:hover span { text-decoration: underline; text-underline-offset: .2em; }
.cierre__alt { font-size: var(--t-chico); color: var(--noche-100); }
.cierre__alt a { color: var(--cal); }
.cierre__lugar { color: var(--noche-300); margin-top: var(--e-l); }

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .salida__titulo .linea > span { transform: none; }
  .torre-paso { opacity: 1; }
  .pantalla { transition: none; }
  .js .cuadricula.is-pintada .cuadricula__malla i.si { background: var(--cobre-claro); border-color: var(--cobre-claro); transition: none; }
}
@media (min-width: 1200px) { .transportistas__rotulo { padding-left: 6.5rem; } }