/* ==========================================================================
   JM Rutas · v3.0 · red.html «Lima → Huancayo por la Carretera Central»
   Solo piezas de esta página. Usa tokens de base.css y componentes de
   portada.css (.antetitulo, .dos-puertas, .flete, .reglas, .fuente-plegable,
   .campo-rango). Cada tramo con su gramática: foto a sangre · libro en dos
   columnas · índice por grupos · cifras de cartel + malla de 100 · comparador ·
   orden numerado (único bloque numerado) · escalera · pausa · peldaños ·
   tarjeta de cabina · ficha · postes · instrumento · papel · acordeón · llegada.
   ========================================================================== */

.pagina-red .tramo { padding-block: clamp(4rem, 8vw, 7rem); }
.pagina-red .fuente .estado { margin-right: .45rem; }

/* Cabecera de tramo: titular a la izquierda, bajada a la derecha */
.r-cab { display: grid; gap: var(--e-s); margin-bottom: clamp(2rem, 4.5vw, 3.75rem); }
.r-cab .t-2 { max-width: 19ch; }
@media (min-width: 1024px) {
  .r-cab { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-2xl); align-items: end; }
  .r-cab > .antetitulo { grid-column: 1 / -1; }
  .r-cab > .t-2 { grid-column: 1; grid-row: 2 / span 2; }
  .r-cab > :not(.antetitulo):not(.t-2) { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Apertura: camión peruano real a sangre, velo localizado abajo a la izquierda
   -------------------------------------------------------------------------- */
.r-hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--noche-950); color: var(--cal); }
.r-hero__foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.r-hero__foto img { object-position: 45% 72%; }
.r-hero__velo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(10 22 40 / .55) 0%, rgb(10 22 40 / 0) 22%),
    linear-gradient(to right, rgb(10 22 40 / .84) 0%, rgb(10 22 40 / .66) 40%, rgb(10 22 40 / .22) 70%, rgb(10 22 40 / .1) 100%),
    radial-gradient(115% 85% at 0% 100%, rgb(10 22 40 / .85) 0%, rgb(10 22 40 / .5) 45%, rgb(10 22 40 / 0) 78%),
    linear-gradient(to top, rgb(10 22 40 / .82) 0%, rgb(10 22 40 / .35) 40%, rgb(10 22 40 / 0) 60%); }
.r-hero p, .r-hero a { text-shadow: 0 1px 14px rgb(10 22 40 / .55); }
/* Móvil: la foto es una franja alta arriba; el texto sigue sobre noche */
@media (max-width: 639px) {
  .r-hero { display: block; }
  .r-hero__foto, .r-hero__velo { bottom: auto; height: min(84svh, 44rem); }
  .r-hero__velo { background: linear-gradient(to bottom, rgb(10 22 40 / .5) 0%, rgb(10 22 40 / .1) 22%, rgb(10 22 40 / .55) 58%, var(--noche-950) 100%); }
  .r-hero .r-hero__cuerpo { padding-top: min(50svh, 26rem); }
}
.r-hero__cuerpo { align-self: end; display: grid; gap: clamp(1rem, 2.4vh, 1.75rem); padding-top: calc(var(--cab-alto) + var(--e-xl)); padding-bottom: var(--e-l); }
.r-hero .antetitulo { color: var(--cobre-claro); }
.r-hero__titulo { font-size: clamp(3.1rem, 8.2vw, 10rem); font-weight: 850; font-stretch: 114%; line-height: .85; letter-spacing: -.045em; margin-left: -.04em; }
.r-hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.r-hero__titulo .linea > span { display: inline-block; }
.r-hero__titulo .punto { color: var(--cobre); }
.js .r-hero__titulo .linea > span { transform: translateY(105%); }
.js .r-hero__titulo.is-listo .linea > span { transform: none; transition: transform 700ms var(--ease-salida); transition-delay: calc(var(--n, 0) * 110ms + 80ms); }
.r-hero__pie { display: grid; gap: var(--e-l); align-items: end; }
@media (min-width: 1024px) { .r-hero__pie { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: var(--e-2xl); } }
.r-hero__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--noche-100); max-width: 44ch; margin-bottom: var(--e-m); }

/* Placa esmaltada: las tres reglas que más preguntan */
.r-placa { --tinta: var(--noche); --tinta-2: var(--noche-600); justify-self: start; width: min(100%, 25rem); padding: 1rem 1.2rem .55rem; background: var(--cal-0); color: var(--noche); border-radius: var(--r-s);
  box-shadow: inset 0 0 0 4px var(--cal-0), inset 0 0 0 5.5px var(--noche), 0 18px 40px -18px rgb(5 12 24 / .7); }
@media (min-width: 1024px) { .r-placa { justify-self: end; } }
.r-placa dl { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: .5rem .9rem; }
.r-placa dt { font-family: var(--f-display); font-size: .66rem; font-weight: 700; font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; color: var(--noche-600); max-width: 9ch; }
.r-placa dd { margin-top: .4rem; font-size: clamp(2.3rem, 3.2vw, 3.1rem); line-height: .9; }
.r-placa dd small { font-size: .45em; margin-left: .04em; }
.r-placa div:first-child dd { color: var(--cobre-tinta); }
.r-placa__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1rem; margin-top: .8rem; padding-top: .3rem; border-top: 1px solid var(--piedra-300); font-size: var(--t-chico); }
.r-placa__pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--noche); font-weight: 700; text-decoration-color: var(--cobre); }
.r-hero__barra { display: grid; gap: .6rem var(--e-xl); padding-block: var(--e-s) calc(var(--e-m) + env(safe-area-inset-bottom)); border-top: 1px solid rgb(247 244 238 / .2); font-size: var(--t-nota); color: var(--noche-100); }
@media (min-width: 1024px) { .r-hero__barra { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } }
.r-hero__honesto { max-width: 70ch; }
.r-hero__honesto .estado { margin-right: .5rem; }
.r-hero__lugar { display: grid; gap: .15rem; color: var(--noche-300); }
.r-hero__lugar .rotulo-lugar { color: var(--cal); }

/* --------------------------------------------------------------------------
   Lo que duele: libro en dos columnas (hoy / en la red), sin cajas
   -------------------------------------------------------------------------- */
.r-cab__fuente { align-self: start; }
.r-libro__cab { display: none; }
.r-libro { border-top: 1.5px solid var(--tinta); }
.r-libro__fila { display: grid; gap: .6rem var(--medianil); padding-block: clamp(1.1rem, 2vw, 1.75rem); border-bottom: 1px solid var(--borde); }
.r-libro__cifra { font-size: clamp(2.6rem, 4.4vw, 4.3rem); line-height: .85; }
.r-libro__cifra small { display: block; margin-top: .45rem; font-size: max(.28em, .75rem); font-weight: 700; font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.r-libro__fila:first-child .r-libro__cifra { color: var(--acento); }
.r-libro__hoy h3 { font-size: var(--t-4); font-stretch: 94%; margin-bottom: .35rem; }
.r-libro__hoy > p:not(.fuente) { color: var(--tinta-2); max-width: 50ch; }
.r-libro__hoy .fuente { margin-top: .6rem; }
.r-libro__red { color: var(--tinta-2); max-width: 42ch; }
.r-libro__red b { display: block; margin-bottom: .2rem; font-family: var(--f-display); font-size: 1.1rem; font-stretch: 94%; color: var(--tinta); }
.r-libro__red::before { content: "En la Red JM"; display: block; margin-bottom: .35rem; font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
@media (min-width: 900px) {
  .r-libro__cab, .r-libro__fila { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--medianil); }
  .r-libro__cab { display: grid; padding-bottom: .6rem; font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
  .r-libro__cab span:first-child { grid-column: 1 / 3; }
  .r-libro__cab span:last-child { color: var(--acento-tinta); padding-left: var(--medianil); }
  .r-libro__fila { align-items: start; }
  .r-libro__red { align-self: stretch; padding-left: var(--medianil); border-left: 1px solid var(--borde); }
  .r-libro__red::before { display: none; }
}

/* --------------------------------------------------------------------------
   Lo que ofrecemos: grupos con nombre fijo a la izquierda
   -------------------------------------------------------------------------- */
.r-grupos { border-top: 1.5px solid var(--tinta); }
.r-grupo { display: grid; gap: var(--e-m) var(--medianil); padding-block: var(--e-l); border-bottom: 1px solid var(--borde); }
.r-grupo__t { font-size: var(--t-3); font-stretch: 96%; letter-spacing: -.015em; }
.r-grupo__lista { display: grid; gap: var(--e-l) var(--e-xl); }
.r-grupo__lista > li { display: grid; gap: .45rem; align-content: start; justify-items: start; }
.r-grupo__lista h4 { font-family: var(--f-display); font-size: var(--t-4); font-weight: 700; font-stretch: 92%; line-height: 1.2; }
.r-grupo__lista p { color: var(--tinta-2); font-size: var(--t-chico); max-width: 52ch; }
.r-grupo__lista p a { color: var(--tinta); }
.r-sublista { list-style: none; padding: 0; width: 100%; }
.r-sublista li { padding-block: .45rem; border-top: 1px solid var(--borde); font-size: var(--t-chico); color: var(--tinta-2); }
@media (min-width: 720px) { .r-grupo__lista { grid-template-columns: 1fr 1fr; } .r-grupo__ancho { grid-row: span 2; } }
@media (min-width: 1024px) {
  .r-grupo { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .r-grupo__t { position: sticky; top: calc(var(--cab-alto) + 1.5rem); align-self: start; }
}
.r-no { display: grid; gap: var(--e-m) var(--medianil); margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 1024px) { .r-no { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.r-no__t { font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 800; font-stretch: 104%; line-height: .95; letter-spacing: -.03em; max-width: 12ch; }
.r-no__t .punto { color: var(--cobre); }
.r-no__lista { list-style: none; padding: 0; border-top: 1.5px solid var(--tinta); }
@media (min-width: 720px) { .r-no__lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--medianil); } }
.r-no__lista li { padding-block: .9rem; border-bottom: 1px solid var(--borde); color: var(--tinta-2); font-size: var(--t-chico); }
.r-no__lista b { display: block; margin-bottom: .2rem; font-family: var(--f-display); font-size: 1.15rem; font-stretch: 94%; color: var(--tinta); text-decoration: line-through; text-decoration-color: var(--cobre); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Reglas (#reglas): cifras de cartel + malla de 100 soles
   -------------------------------------------------------------------------- */
.r-topes { display: grid; gap: var(--e-l) var(--medianil); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--borde); }
@media (min-width: 900px) { .r-topes { grid-template-columns: 1fr 1fr; } .r-topes__nota { grid-column: 1 / -1; } }
.r-tope { display: grid; gap: .7rem; align-content: start; }
.r-tope__v { font-size: clamp(6rem, 16vw, 14rem); line-height: .78; letter-spacing: -.04em; color: var(--cal); }
.r-tope:first-child .r-tope__v { color: var(--cobre-claro); }
.r-tope__v small { font-size: .38em; margin-left: .05em; }
.r-tope p:not(.r-tope__v) { color: var(--noche-100); max-width: 36ch; }
.r-tope b { color: var(--cal); }
.r-topes__nota { color: var(--tinta-2); max-width: 74ch; font-size: var(--t-chico); }
.r-topes__nota .estado { margin-right: .5rem; }
.r-reglas__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); padding-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1024px) { .r-reglas__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.r-cien { display: grid; gap: var(--e-s); align-content: start; }
.r-cien__cab { display: flex; flex-wrap: wrap; gap: var(--e-s); justify-content: space-between; align-items: end; }
.r-cien__modo { display: inline-flex; padding: 3px; border: 1px solid var(--borde); border-radius: var(--r-s); }
.r-cien__modo button { min-height: 44px; padding: 0 1rem; border-radius: 2px; font-family: var(--f-display); font-size: var(--t-chico); font-weight: 650; font-stretch: 90%; color: var(--noche-100); }
.r-cien__modo button[aria-pressed="true"] { background: var(--cal); color: var(--noche); }
.r-cien__malla { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
@media (max-width: 559px) { .r-cien__malla { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.r-cien__malla i { aspect-ratio: 1; border-radius: 1px; background: color-mix(in srgb, var(--cal) 82%, transparent); transition: background-color var(--dur-media) var(--ease-salida); }
.r-cien__malla i:nth-child(n+89), .r-cien[data-modo="15"] .r-cien__malla i:nth-child(n+86) { background: var(--cobre); }
.r-cien__leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: var(--t-chico); color: var(--noche-100); }
.r-cien__leyenda span { display: inline-flex; align-items: center; gap: .5rem; }
.r-cien__leyenda i { width: .9rem; height: .9rem; border-radius: 1px; background: var(--cal); }
.r-cien__leyenda i.jm { background: var(--cobre); }
.r-cien__leyenda b { font-family: var(--f-display); font-size: 1.4rem; font-stretch: 72%; color: var(--cal); }
.r-cien__vivo { color: var(--noche-100); max-width: 54ch; }
.r-cien__cubre { font-size: var(--t-chico); color: var(--noche-300); max-width: 62ch; }
.r-cien__cubre b { color: var(--cal); }
.r-aparte { display: grid; gap: var(--e-m); align-content: start; }
.r-aparte__lista { border-top: 1.5px solid var(--cal); }
.r-aparte__lista div { display: grid; gap: .15rem; padding-block: .8rem; border-bottom: 1px solid var(--borde); }
.r-aparte__lista dt { font-family: var(--f-display); font-weight: 700; font-stretch: 92%; }
.r-aparte__lista dd { color: var(--noche-300); font-size: var(--t-chico); }
.r-aparte__nota { font-size: var(--t-chico); color: var(--noche-100); }

/* --------------------------------------------------------------------------
   Flete + días de cobro
   -------------------------------------------------------------------------- */
.r-flete__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: start; }
@media (min-width: 1024px) { .r-flete__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .r-flete__texto { position: sticky; top: calc(var(--cab-alto) + 1.5rem); } }
.r-flete__texto { display: grid; gap: var(--e-s); }
.r-flete__inicio { font-size: var(--t-chico); color: var(--tinta-3); }
.r-flete .flete { box-shadow: var(--sombra-1); }
.r-flete .flete > .boton { justify-self: start; white-space: normal; }
.r-dias { margin-top: var(--e-l); display: grid; gap: .5rem; }
.r-dias__t { font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.r-dias__pista { position: relative; height: 6rem; border-bottom: 1.5px solid var(--tinta); }
.r-dias__barra { position: absolute; bottom: 0; left: calc(var(--de) / 90 * 100%); width: calc((var(--a) - var(--de)) / 90 * 100%); height: 1rem; }
.r-dias__barra--jm { background: var(--cobre); }
.r-dias__barra--mercado { background: repeating-linear-gradient(-45deg, var(--noche-600) 0 2px, transparent 2px 6px); }
.r-dias__ley { position: absolute; bottom: 0; top: 0; left: calc(var(--en) / 90 * 100%); border-left: 1px dashed var(--tinta-2); }
.r-dias__pista > span > span { position: absolute; bottom: calc(100% + .35rem); left: 0; white-space: nowrap; font-size: var(--t-nota); line-height: 1.15; color: var(--tinta-2); }
.r-dias__ley > span { top: 0; bottom: auto !important; left: auto !important; right: .45rem; text-align: right; }
.r-dias__pista b { display: block; font-family: var(--f-display); font-size: 1.3rem; font-weight: 800; font-stretch: 72%; line-height: 1; color: var(--tinta); }
.r-dias__barra--jm b { color: var(--cobre-tinta); }
.r-dias__escala { position: relative; height: 1.2rem; font-size: var(--t-nota); color: var(--tinta-3); }
.r-dias__escala span { position: absolute; top: 0; translate: -50% 0; }
.r-dias__escala span:nth-child(1) { left: 0; translate: none; }
.r-dias__escala span:nth-child(2) { left: 33.333%; }
.r-dias__escala span:nth-child(3) { left: 66.667%; }
.r-dias__escala span:nth-child(4) { right: 0; translate: none; }

/* --------------------------------------------------------------------------
   Asignación (único bloque numerado de la página) + regla del 80 %
   -------------------------------------------------------------------------- */
.r-orden { border-top: 1.5px solid var(--tinta); }
.r-orden li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .2rem var(--e-s); align-content: start; padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
.r-orden__n { grid-row: span 2; font-size: clamp(3rem, 5vw, 4.6rem); line-height: .8; }
.r-orden li:first-child .r-orden__n { color: var(--acento); }
.r-orden h3 { font-size: var(--t-4); font-stretch: 94%; }
.r-orden p { font-size: var(--t-chico); color: var(--tinta-2); }
@media (min-width: 900px) {
  .r-orden { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .r-orden li { grid-template-columns: 1fr; gap: .5rem; padding-right: var(--e-m); border-bottom: 0; }
  .r-orden__n { grid-row: auto; margin-bottom: .4rem; }
  .r-orden li + li { padding-left: var(--e-s); border-left: 1px solid var(--borde); }
}
.r-asig__notas { display: grid; gap: var(--e-m) var(--medianil); margin-top: var(--e-l); font-size: var(--t-chico); color: var(--tinta-2); }
@media (min-width: 900px) { .r-asig__notas { grid-template-columns: 1fr 1fr; } }
.r-asig__notas b { color: var(--tinta); }
.r-asig__notas .estado { margin-inline: .2rem .35rem; }
.r-ochenta { display: grid; gap: var(--e-l) var(--medianil); margin-top: clamp(3rem, 6vw, 5rem); padding-top: var(--e-l); border-top: 1.5px solid var(--tinta); }
@media (min-width: 1024px) { .r-ochenta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.r-ochenta__texto { display: grid; gap: var(--e-s); align-content: start; }
.r-ochenta__texto p { color: var(--tinta-2); max-width: 50ch; }
.r-ochenta__texto b { color: var(--tinta); }
.r-ochenta__texto .r-ochenta__inicio { font-size: var(--t-chico); color: var(--tinta-3); }
.r-ochenta__panel { 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); box-shadow: var(--sombra-1); }
.r-ochenta__mes { position: relative; display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; margin-top: .6rem; }
.r-ochenta__mes::after { content: ""; position: absolute; top: -.5rem; bottom: -.5rem; left: calc(80% - 1.5px); width: 2px; background: var(--cobre); }
.r-ochenta__mes i { height: 2.4rem; border-radius: 1px; background: color-mix(in srgb, var(--tinta) 10%, transparent); transition: background-color var(--dur-corta) var(--ease-suave); }
.r-ochenta__mes i.si { background: var(--noche-600); }
.r-ochenta__mes.is-entra i.si { background: var(--noche); }
.r-ochenta__eje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; font-size: var(--t-nota); color: var(--tinta-3); }
.r-ochenta__eje span:last-child { color: var(--cobre-tinta); }
.r-ochenta__res { display: grid; gap: .2rem; color: var(--tinta-2); }
.r-ochenta__res b, .r-bandas__res b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 750; font-stretch: 92%; line-height: 1.15; color: var(--tinta); }

/* --------------------------------------------------------------------------
   Comité + escalera de desacuerdos (sube de izquierda a derecha)
   -------------------------------------------------------------------------- */
.r-comite__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); }
@media (min-width: 1024px) { .r-comite__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.r-comite__voz { display: grid; gap: var(--e-s); }
.r-comite__voz > p:not(.lead):not(.antetitulo):not(.fuente) { color: var(--tinta-2); }
.r-comite__sub { margin-top: var(--e-l); }
.r-comite__voz .lista-raya li { font-size: var(--t-chico); color: var(--tinta-2); }
.r-escalera li { display: grid; gap: .25rem; padding-block: 1rem; border-top: 1.5px solid var(--tinta); }
.r-escalera em { font-style: normal; font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.r-escalera b { font-family: var(--f-display); font-size: var(--t-4); font-stretch: 94%; }
.r-escalera p { font-size: var(--t-chico); color: var(--tinta-2); max-width: 46ch; }
@media (min-width: 1024px) { .r-escalera { display: flex; flex-direction: column-reverse; } .r-escalera li { margin-left: calc(var(--k) * 9%); } }
.r-retiene { margin-top: var(--e-xl); display: grid; gap: .6rem; }
.r-retiene figcaption { font-size: var(--t-chico); color: var(--tinta-2); max-width: 54ch; }
.r-retiene figcaption b { color: var(--tinta); }
.r-retiene__barra { display: flex; height: 3.4rem; border-radius: var(--r-xs); overflow: hidden; font-size: var(--t-nota); }
.r-retiene__barra span { display: flex; flex-direction: column; justify-content: center; padding-inline: .75rem; line-height: 1.1; }
.r-retiene__paga { flex: 19; background: var(--noche); color: var(--cal); }
.r-retiene__disc { flex: 3; min-width: 4.4rem; background: repeating-linear-gradient(-45deg, var(--cobre-100) 0 5px, var(--adobe) 5px 10px); color: var(--noche); }
.r-retiene__barra b { font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; font-stretch: 74%; }

/* --------------------------------------------------------------------------
   Pausa a sangre
   -------------------------------------------------------------------------- */
.r-pausa { position: relative; isolation: isolate; min-height: min(88svh, 52rem); display: grid; align-items: end; overflow: hidden; background: var(--noche-950); color: var(--cal); }
.r-pausa__foto { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.r-pausa__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 22 40 / .86) 0%, rgb(10 22 40 / .38) 42%, rgb(10 22 40 / 0) 68%); }
.r-pausa__txt { padding-block: var(--e-3xl) var(--e-xl); }
.r-pausa__frase { font-size: clamp(2.4rem, 6.4vw, 7rem); font-weight: 820; font-stretch: 108%; line-height: .9; letter-spacing: -.035em; max-width: 14ch; }
.r-pausa__frase .punto { color: var(--cobre-claro); }
.r-pausa__frase > span:not(.punto) { display: block; max-width: 22ch; margin-top: .45em; font-size: .46em; font-weight: 620; line-height: 1.05; letter-spacing: -.015em; color: var(--noche-100); }
.r-pausa__lugar { margin-top: var(--e-l); color: var(--noche-300); }

/* --------------------------------------------------------------------------
   Niveles: tres peldaños que suben de izquierda a derecha
   -------------------------------------------------------------------------- */
.r-peldanos { display: grid; gap: var(--e-xl) var(--medianil); }
@media (min-width: 1024px) { .r-peldanos { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .r-peldano { margin-top: calc((2 - var(--k)) * 3.5rem); } }
.r-peldano { display: grid; gap: var(--e-s); align-content: start; padding-top: var(--e-m); border-top: 4px solid var(--tinta); }
.r-peldano--sello { border-top-color: var(--cobre); }
.r-peldano header { display: grid; gap: .3rem; }
.r-peldano__et, .r-peldano h4 { font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--acento-tinta); }
.r-peldano h4 { margin-top: .4rem; color: var(--tinta-3); }
.r-peldano h3 { font-size: var(--t-3); font-stretch: 96%; }
.r-peldano__para { color: var(--tinta-2); font-size: var(--t-chico); }
.r-peldano__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem var(--e-s); padding-block: .8rem; border-block: 1px solid var(--borde); }
.r-peldano__datos dt { font-size: var(--t-nota); color: var(--tinta-3); }
.r-peldano__datos dd { font-family: var(--f-display); font-weight: 750; font-stretch: 84%; line-height: 1.15; }
.r-peldano__lista { list-style: none; padding: 0; }
.r-peldano__lista li { padding-block: .4rem; border-top: 1px solid var(--borde); font-size: var(--t-chico); color: var(--tinta-2); }
.r-movimiento { display: grid; gap: var(--e-m) var(--medianil); margin-top: var(--e-2xl); padding-top: var(--e-m); border-top: 1.5px solid var(--tinta); }
@media (min-width: 900px) { .r-movimiento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.r-movimiento dt { margin-bottom: .25rem; font-family: var(--f-display); font-weight: 750; font-stretch: 92%; }
.r-movimiento dd { font-size: var(--t-chico); color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Sello JM: la tarjeta de cabina como objeto
   -------------------------------------------------------------------------- */
.r-sello__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: start; }
@media (min-width: 1024px) { .r-sello__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.r-tarjeta { padding: clamp(1.25rem, 2.6vw, 2.25rem); background: var(--cal); color: var(--noche); border-radius: var(--r-m); box-shadow: 0 34px 60px -30px rgb(5 12 24 / .75); }
.r-tarjeta::before { content: ""; display: block; width: 3.2rem; height: .55rem; margin: -.35rem auto 1rem; border-radius: 1rem; background: var(--noche-950); }
@media (min-width: 1024px) { .r-tarjeta { rotate: -1.2deg; } }
.r-tarjeta__cab { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 3px solid var(--noche); font-family: var(--f-display); font-size: .82rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; }
.r-tarjeta__cab span:last-child { color: var(--cobre-tinta); }
.r-tarjeta__lista li { padding-block: .7rem; border-bottom: 1px solid var(--piedra-300); font-size: var(--t-chico); color: var(--noche-600); }
.r-tarjeta__lista b { font-family: var(--f-display); font-size: 1.02rem; font-stretch: 92%; color: var(--noche); }
.r-tarjeta__pie { margin-top: .9rem; font-size: var(--t-nota); color: var(--piedra-600); }
.r-sello__lado { display: grid; gap: var(--e-xl); }
.r-faltas { display: grid; gap: var(--e-s); }
.r-faltas__sub { color: var(--noche-100); }
.r-faltas__lista { border-top: 1.5px solid var(--grana-claro); }
.r-faltas__lista li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; padding-block: .7rem; border-bottom: 1px solid var(--borde); font-size: var(--t-chico); color: var(--cal); }
.r-faltas__lista li::before { content: "×"; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--grana-claro); }
.r-distintivo { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-m); align-items: center; padding-top: var(--e-m); border-top: 1px solid var(--borde); }
.r-distintivo img { width: 6.5rem; height: auto; }
.r-distintivo p { font-size: var(--t-chico); color: var(--noche-100); }
.r-distintivo .estado { margin-right: .4rem; }
.r-distintivo .enlace-flecha { color: var(--cal); }

/* --------------------------------------------------------------------------
   Ficha de desempeño + bandas
   -------------------------------------------------------------------------- */
.r-ficha__rejilla { display: grid; gap: var(--e-2xl) var(--medianil); align-items: start; }
@media (min-width: 1024px) { .r-ficha__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .r-bandas { position: sticky; top: calc(var(--cab-alto) + 1.5rem); margin-top: 7rem; } }
.r-ficha__izq { display: grid; gap: var(--e-s); }
.r-ficha__izq .t-2 { max-width: 16ch; }
.r-pesos { display: flex; gap: 2px; height: 3.6rem; margin-top: var(--e-l); }
.r-pesos span { flex: var(--w) 1 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.35rem; font-weight: 800; font-stretch: 72%; color: var(--cal-0); }
.r-pesos .p1, .r-pesos__dim .p1 { background: var(--dato-1); }
.r-pesos .p2, .r-pesos__dim .p2 { background: var(--cobre-600); }
.r-pesos .p3, .r-pesos__dim .p3 { background: var(--dato-4); }
.r-pesos .p4, .r-pesos__dim .p4 { background: var(--dato-3); }
.r-pesos .p5, .r-pesos__dim .p5 { background: var(--noche-600); }
.r-pesos__dim div { display: grid; gap: .2rem; padding-block: .8rem; border-top: 1px solid var(--borde); }
@media (min-width: 640px) { .r-pesos__dim div { grid-template-columns: 15rem 1fr; gap: var(--e-m); } }
.r-pesos__dim dt { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 700; }
.r-pesos__dim dt b { margin-left: auto; font-size: 1.3rem; font-stretch: 72%; }
.r-pesos__dim i { width: .9rem; height: .9rem; border-radius: 1px; }
.r-pesos__dim dd { font-size: var(--t-chico); color: var(--tinta-2); }
.r-bandas { 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); box-shadow: var(--sombra-1); }
.r-bandas__inicio { font-size: var(--t-chico); color: var(--tinta-3); }
.r-bandas__pista { position: relative; display: flex; gap: 2px; height: 2.6rem; font-family: var(--f-display); font-size: .72rem; font-weight: 700; font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; }
.r-bandas__pista span { flex: var(--d) 1 0; display: grid; place-items: center; min-width: 0; }
.r-bandas__pista .b0 { background: repeating-linear-gradient(-45deg, var(--piedra-300) 0 2px, var(--piedra) 2px 7px); color: var(--noche-600); }
.r-bandas__pista .b1 { background: var(--adobe); color: var(--noche); }
.r-bandas__pista .b2 { background: var(--noche-600); color: var(--cal-0); }
.r-bandas__pista .b3 { background: var(--noche); color: var(--cal-0); }
.r-bandas__pista { margin-bottom: .7rem; }
.r-bandas__pista i { position: absolute; inset: auto 0 -.75rem 0; height: .6rem; pointer-events: none; transform: translateX(calc((var(--p, .5) - 1) * 100%)); transition: transform var(--dur-media) var(--ease-salida); }
.r-bandas__pista i::after { content: ""; position: absolute; top: 0; right: -.45rem; border-inline: .45rem solid transparent; border-bottom: .6rem solid var(--cobre); }
.r-bandas__res { display: grid; gap: .2rem; color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Ingreso: postes kilométricos sobre la línea de la vía
   -------------------------------------------------------------------------- */
.r-via { position: relative; display: grid; }
.r-via li { position: relative; display: grid; grid-template-columns: 6.6rem 1fr; gap: var(--e-s); align-items: start; padding-block: .9rem; }
.r-via li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3.3rem; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--noche) 40%, transparent) 0 10px, transparent 10px 22px); }
.r-via .hito-poste { position: relative; z-index: 1; justify-self: center; font-size: .74rem; white-space: nowrap; }
.r-via h3 { font-size: var(--t-4); font-stretch: 94%; }
.r-via p { font-size: var(--t-chico); color: var(--tinta-2); max-width: 46ch; }
@media (min-width: 1024px) { .r-via { grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: 1fr 1fr; column-gap: var(--e-2xl); } }

/* --------------------------------------------------------------------------
   Autodiagnóstico
   -------------------------------------------------------------------------- */
.diag { display: grid; gap: var(--e-xl) var(--e-2xl); align-items: start; }
@media (min-width: 1024px) { .diag { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .diag__res { align-self: stretch; } .diag__fijo { position: sticky; top: calc(var(--cab-alto) + var(--e-m)); } }
.diag__preguntas { display: grid; }
.diag__grupo { margin: var(--e-l) 0 var(--e-xs); font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.diag__grupo:first-child { margin-top: 0; }
.preg { display: grid; gap: .6rem; min-width: 0; margin: 0; padding: var(--e-m) 0; border: 0; border-top: 1px solid var(--borde); }
.preg legend { float: left; width: 100%; font-family: var(--f-display); font-size: 1.15rem; font-weight: 680; font-stretch: 96%; line-height: 1.25; }
.preg legend + * { clear: both; }
.preg__ayuda { font-size: var(--t-chico); color: var(--tinta-3); }
.preg[data-resp="no"] input:checked + span { background: var(--grana); border-color: var(--grana); color: var(--cal-0); }
.diag__preguntas > .boton { justify-self: start; margin-top: var(--e-m); }
.diag__fijo { --tinta: var(--cal); --tinta-2: var(--noche-100); --tinta-3: var(--noche-300); --borde: rgb(220 226 235 / .16); --foco: var(--ocre-claro); --acento-tinta: var(--cobre-claro);
  display: grid; gap: var(--e-s); padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--noche); color: var(--cal); border-radius: var(--r-s); }
.diag__progreso { height: 4px; border-radius: 2px; background: var(--noche-700); overflow: hidden; }
.diag__progreso i { display: block; height: 100%; background: var(--cobre); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-media) var(--ease-salida); }
.diag__contador { font-size: var(--t-nota); color: var(--noche-300); }
.diag__et { font-family: var(--f-display); font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--noche-300); }
.diag__fijo h3 { margin-top: .3rem; font-size: var(--t-3); }
.diag__nivel { margin-top: .35rem; font-weight: 700; font-size: var(--t-chico); color: var(--cobre-claro); }
.diag__escala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.diag__escala li { display: grid; place-items: center; min-height: 2.6rem; padding: .4rem .3rem; background: var(--noche-800); font-family: var(--f-display); font-size: .68rem; font-weight: 700; font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; text-align: center; color: var(--noche-300); transition: background-color var(--dur-corta) var(--ease-suave), color var(--dur-corta) var(--ease-suave); }
.diag__escala li.is-activo { background: var(--cal); color: var(--noche); }
.diag__escala li[data-e="rojo"].is-activo { background: var(--grana-claro); color: var(--noche-950); }
.diag__escala li[data-e="ambar"].is-activo { background: var(--ocre-claro); color: var(--noche-950); }
.diag__escala li[data-e="certificado"].is-activo { background: var(--cobre-claro); color: var(--noche-950); }
.diag__texto { color: var(--noche-100); }
.diag__lista { display: grid; gap: var(--e-s); margin-top: var(--e-xs); max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }
.diag__lista li { display: grid; gap: .25rem; justify-items: start; font-size: var(--t-chico); color: var(--noche-100); }
.diag__lista b { color: var(--cal); }
.diag__fijo .boton { justify-self: start; white-space: normal; }

/* --------------------------------------------------------------------------
   Contrato marco: un papel con dos caras
   -------------------------------------------------------------------------- */
.r-contrato .r-cab > p:last-child { align-self: start; }
.r-papel { --tinta: var(--noche); --tinta-2: var(--noche-600); --borde: var(--piedra-300); display: grid; background: var(--cal); color: var(--noche); border-radius: var(--r-s); box-shadow: 0 30px 60px -34px rgb(5 12 24 / .7); }
@media (min-width: 900px) { .r-papel { grid-template-columns: 1fr 1fr; } .r-papel__cara + .r-papel__cara { border-left: 1px dashed var(--piedra-300); } }
@media (max-width: 899px) { .r-papel__cara + .r-papel__cara { border-top: 1px dashed var(--piedra-300); } }
.r-papel__cara { display: grid; gap: var(--e-s); align-content: start; padding: clamp(1.25rem, 3vw, 2.5rem); }
.r-papel .lista-raya li { font-size: var(--t-chico); color: var(--noche-600); }
.r-contrato__bajo { display: grid; gap: var(--e-2xl) var(--medianil); margin-top: var(--e-2xl); }
@media (min-width: 1024px) { .r-contrato__bajo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.r-captacion { display: grid; grid-template-columns: auto 1fr; gap: var(--e-m); align-items: start; }
.r-captacion__v { font-size: clamp(4rem, 7vw, 6.5rem); line-height: .8; color: var(--cobre-claro); }
.r-captacion__v small { display: block; margin-top: .5rem; font-size: max(.22em, .75rem); letter-spacing: .1em; text-transform: uppercase; color: var(--noche-300); }
.r-captacion div p { margin-top: .4rem; font-size: var(--t-chico); color: var(--noche-100); }
.r-e2e { display: grid; gap: var(--e-s); align-content: start; }
.r-contrato .reglas { border-top-color: var(--cal); }

/* --------------------------------------------------------------------------
   Preguntas y llegada
   -------------------------------------------------------------------------- */
.r-preguntas__rejilla { display: grid; gap: var(--e-xl) var(--medianil); }
.r-preguntas__cab { display: grid; gap: var(--e-s); align-content: start; }
@media (min-width: 1024px) { .r-preguntas__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .r-preguntas__cab { position: sticky; top: calc(var(--cab-alto) + 1.5rem); align-self: start; } }
.r-llegada .antetitulo { color: var(--cobre-claro); }
.r-llegada__cartel { margin-top: var(--e-m); font-size: clamp(3.2rem, 8vw, 8.5rem); }
.r-llegada__cupos { max-width: 44ch; margin-top: var(--e-l); border-top: 1px solid rgb(247 244 238 / .25); }
.r-llegada__cupos li { padding-block: .6rem; border-bottom: 1px solid rgb(247 244 238 / .25); font-size: var(--t-chico); color: var(--noche-100); }
.r-llegada__texto .acciones { margin-top: var(--e-l); }
.r-llegada__texto .enlace-flecha { color: var(--cal); }
.r-llegada__lugar { margin-top: var(--e-xl); color: var(--noche-300); }
.r-adjunto { font-size: var(--t-chico); font-weight: 650; color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .js .r-hero__titulo .linea > span { transform: none; }
  .r-tarjeta { rotate: none; }
}