/* ==========================================================================
   JM Rutas · v3.0 · conductores.html «Manejar bien. Volver a casa.»
   Solo piezas de esta página; tokens de base.css y componentes de
   portada.css (.antetitulo, .campo-rango). Gramáticas: paisaje + voz
   reservada · tabla comparativa · señales · instrumento de jornada ·
   columnas por fecha · cartel tipográfico · pasos (único bloque numerado) ·
   acordeón · llegada con video.
   ========================================================================== */

.pagina-conductores .tramo { padding-block: clamp(4rem, 8vw, 7rem); }
.c-cab { display: grid; gap: var(--e-s); margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.c-cab .t-2 { max-width: 19ch; }
@media (min-width: 1024px) {
  .c-cab { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-2xl); align-items: end; }
  .c-cab > .antetitulo { grid-column: 1 / -1; }
}

/* Apertura: texto a la izquierda, paisaje alto y voz reservada a la derecha */
.c-hero { position: relative; padding-top: calc(var(--cab-alto) + clamp(2rem, 6vw, 5rem)); padding-bottom: clamp(3.5rem, 7vw, 6rem); background: var(--bg); }
.c-hero__rejilla { display: grid; gap: var(--e-xl) var(--medianil); align-items: end; }
@media (min-width: 1024px) { .c-hero__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-2xl); } }
.c-hero__texto { display: grid; gap: var(--e-m); align-content: end; }
.c-hero__titulo { font-size: clamp(3rem, 7.6vw, 8.8rem); font-weight: 850; font-stretch: 112%; line-height: .86; letter-spacing: -.045em; margin-left: -.04em; }
.c-hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.c-hero__titulo .linea > span { display: inline-block; }
.c-hero__titulo .linea + .linea { color: var(--noche-600); }
.c-hero__titulo .punto { color: var(--cobre); }
.js .c-hero__titulo .linea > span { transform: translateY(105%); }
.js .c-hero__titulo.is-listo .linea > span { transform: none; transition: transform 700ms var(--ease-salida); transition-delay: calc(var(--n, 0) * 110ms + 80ms); }
.c-hero__honesto { max-width: 56ch; font-size: var(--t-chico); color: var(--tinta-2); }
.c-hero__honesto .estado { margin-right: .5rem; }
.c-hero__lado { position: relative; }
.c-hero__foto { aspect-ratio: 4 / 5; border-radius: var(--r-xs); }
@media (max-width: 1023px) { .c-hero__foto { aspect-ratio: 4 / 3; } }
.c-hero__foto img { object-position: 40% 60%; }
.c-hero__lugar { position: absolute; left: 0; right: 0; top: 0; padding: .9rem 1rem 2rem; color: var(--cal); background: linear-gradient(to bottom, rgb(10 22 40 / .6), rgb(10 22 40 / 0)); }
.c-voz { position: relative; display: grid; gap: .6rem; margin: -4.5rem 0 0 auto; width: min(92%, 25rem); padding: 1.2rem 1.3rem 1.25rem; background: var(--cal-0); border-radius: var(--r-xs); outline: 1.5px dashed color-mix(in srgb, var(--noche) 45%, transparent); outline-offset: -8px; box-shadow: var(--sombra-2); }
@media (min-width: 1024px) { .c-hero { padding-bottom: clamp(5rem, 8vw, 7rem); } .c-voz { position: absolute; left: -4rem; bottom: -3rem; margin: 0; width: 22rem; } }
.c-voz__comilla { position: absolute; right: 1.1rem; top: .3rem; font-family: var(--f-display); font-size: 5rem; font-weight: 800; line-height: 1; color: var(--cobre); }
.c-voz blockquote p { max-width: 16ch; font-family: var(--f-display); font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); font-weight: 750; font-stretch: 94%; line-height: 1.12; color: var(--noche); }
.c-voz figcaption { display: grid; gap: .45rem; justify-items: start; font-size: var(--t-nota); color: var(--tinta-3); }

/* ¿Para quién maneja? */
.c-tabla { width: 100%; border-top: 1.5px solid var(--tinta); text-align: left; }
.c-tabla th, .c-tabla td { padding: .9rem var(--medianil) .9rem 0; vertical-align: top; border-bottom: 1px solid var(--borde); }
.c-tabla thead th { font-family: var(--f-display); font-size: var(--t-3); font-weight: 720; font-stretch: 94%; line-height: 1.1; padding-top: var(--e-m); }
.c-tabla__quien { display: block; margin-bottom: .45rem; font-size: var(--t-etiqueta); font-weight: 700; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); }
.c-tabla__quien--al { color: var(--arcilla-tinta); }
.c-tabla tbody th { width: 22%; font-family: var(--f-display); font-weight: 700; font-stretch: 92%; }
.c-tabla tbody td { width: 39%; color: var(--tinta-2); font-size: var(--t-chico); }
@media (max-width: 719px) {
  .c-tabla thead td { display: none; }
  .c-tabla thead tr, .c-tabla tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-s); }
  .c-tabla tbody th { grid-column: 1 / -1; width: auto; padding-bottom: .2rem; border-bottom: 0; }
  .c-tabla th, .c-tabla td { padding-right: 0; }
  .c-tabla thead th { font-size: 1.1rem; }
  .c-tabla tbody td { width: auto; padding-top: .25rem; }
}

/* Señales: seis reglas con su valor, sin cajas */
.c-senales { display: grid; border-top: 1.5px solid var(--tinta); }
@media (min-width: 720px) { .c-senales { grid-template-columns: 1fr 1fr; column-gap: var(--e-xl); } }
@media (min-width: 1100px) { .c-senales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-senales li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-s); align-items: start; padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
.c-senales__v { font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: .85; }
.c-senales__manda .c-senales__v { color: var(--acento); }
.c-senales h3 { font-size: var(--t-4); font-stretch: 94%; margin-bottom: .3rem; }
.c-senales p { font-size: var(--t-chico); color: var(--tinta-2); }
.c-perfil { display: grid; gap: var(--e-xl) var(--medianil); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 1024px) { .c-perfil { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-2xl); } }
.c-perfil__foto { aspect-ratio: 3 / 2; }
.c-perfil__texto { display: grid; gap: var(--e-m); }
.c-perfil__texto li { color: var(--tinta-2); }

/* Arme su jornada (instrumento sobre noche) */
.c-dia { display: grid; gap: var(--e-l); }
.c-dia__inicio { font-size: var(--t-chico); color: var(--noche-300); }
.c-dia__entradas { display: grid; gap: var(--e-m) var(--e-2xl); }
@media (min-width: 900px) { .c-dia__entradas { grid-template-columns: 1fr 1fr; } }
.c-dia .campo-rango output { color: var(--cobre-claro); }
.c-dia .rango::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--cal) var(--r), var(--noche-700) var(--r)); }
.c-dia .rango::-moz-range-track { background: var(--noche-700); }
.c-dia .rango::-moz-range-progress { background: var(--cal); }
.c-dia__fig { display: grid; gap: .6rem; }
.c-dia__barra { position: relative; height: 4rem; border-radius: var(--r-xs); background: var(--noche-800); overflow: hidden; }
.c-dia__b { position: absolute; top: 0; bottom: 0; left: calc(var(--de) / 24 * 100%); width: calc((var(--a) - var(--de)) / 24 * 100%); display: grid; place-items: center; overflow: hidden; white-space: nowrap; font-family: var(--f-display); font-size: .82rem; font-weight: 750; font-stretch: 80%; }
.c-dia__b--maneja { background: var(--cobre-600); color: var(--cal-0); }
.c-dia__b--pausa { background: var(--cal); }
.c-dia__b--descansa { background: var(--noche-600); color: var(--cal-0); }
.c-dia__b--veda { background: repeating-linear-gradient(-45deg, var(--noche-700) 0 6px, var(--noche-950) 6px 12px); color: var(--noche-100); }
.c-dia__b--fuera { box-shadow: inset 0 0 0 2px var(--senal); }
.c-dia__horas { display: flex; justify-content: space-between; font-size: var(--t-nota); color: var(--noche-300); font-variant-numeric: tabular-nums; }
.c-dia__ley { display: flex; flex-wrap: wrap; gap: .5rem var(--e-l); font-size: var(--t-chico); color: var(--noche-100); }
.c-dia__ley li { display: inline-flex; align-items: center; gap: .55rem; }
.c-dia__ley i { flex: none; width: 1rem; height: 1rem; border-radius: 2px; }
@media (max-width: 559px) { .c-dia__b { font-size: .66rem; } .c-dia__b--veda { font-size: 0; } }
.c-dia__salida { display: grid; gap: var(--e-s); padding-top: var(--e-m); border-top: 1px solid var(--borde); }
@media (min-width: 900px) { .c-dia__salida { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-2xl); } }
.c-dia__veredicto b { display: block; font-family: var(--f-display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 800; font-stretch: 96%; line-height: 1.05; letter-spacing: -.02em; color: var(--cal); }
.c-dia__veredicto[data-ok="no"] b { color: var(--grana-claro); }
.c-dia__veredicto[data-ok="torre"] b { color: var(--ocre-claro); }
.c-dia__veredicto span { display: block; margin-top: .5rem; color: var(--noche-100); max-width: 40ch; }
.c-dia__checks { border-top: 1.5px solid var(--cal); }
.c-dia__checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .4rem; padding-block: .6rem; border-bottom: 1px solid var(--borde); font-size: var(--t-chico); color: var(--noche-100); }
.c-dia__checks li::before { content: "✓"; font-weight: 800; color: var(--yareta-claro); }
.c-dia__checks li[data-ok="no"]::before { content: "×"; color: var(--grana-claro); }
.c-dia__checks li[data-ok="torre"]::before { content: "!"; color: var(--ocre-claro); }
.c-dia__fuente .estado { margin-right: .45rem; }

/* Lo que le aseguramos: columnas por fecha */
.c-tiempos { display: grid; gap: var(--e-xl) var(--medianil); }
@media (min-width: 1024px) { .c-tiempos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-tiempo__t { padding-bottom: .7rem; border-bottom: 3px solid var(--tinta); font-size: var(--t-3); font-stretch: 96%; }
.c-tiempo--proximo .c-tiempo__t { border-bottom-style: dashed; border-bottom-width: 2px; color: var(--tinta-2); }
.c-tiempo ul { display: grid; }
.c-tiempo li { display: grid; gap: .35rem; justify-items: start; padding-block: var(--e-s); border-bottom: 1px solid var(--borde); }
.c-tiempo h4 { font-family: var(--f-display); font-size: var(--t-4); font-weight: 700; font-stretch: 92%; }
.c-tiempo p { font-size: var(--t-chico); color: var(--tinta-2); }
.c-tiempo p b { color: var(--tinta); }
.c-tiempo p a { color: var(--tinta); }

/* Promesas: cartel tipográfico */
.c-promesas__lista { margin-top: var(--e-l); border-top: 1.5px solid var(--tinta); }
.c-promesas__lista li { padding-block: clamp(.9rem, 2vw, 1.5rem); border-bottom: 1px solid var(--borde); font-family: var(--f-display); font-size: clamp(1.9rem, 4.6vw, 4.6rem); font-weight: 800; font-stretch: 104%; line-height: .98; letter-spacing: -.03em; }
@media (min-width: 1024px) { .c-promesas__lista li:nth-child(even) { padding-left: 16%; } }
.c-promesas__lista .punto { color: var(--cobre); }

/* Proceso de selección (único bloque numerado) */
.c-pasos { display: grid; border-top: 1.5px solid var(--tinta); }
@media (min-width: 720px) { .c-pasos { grid-template-columns: 1fr 1fr; column-gap: var(--e-xl); } }
@media (min-width: 1100px) { .c-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-pasos li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .15rem var(--e-s); padding-block: var(--e-m); border-bottom: 1px solid var(--borde); }
.c-pasos__n { grid-row: span 2; font-size: clamp(2.8rem, 4vw, 3.8rem); line-height: .8; }
.c-pasos li:first-child .c-pasos__n { color: var(--acento); }
.c-pasos h3 { font-size: var(--t-4); font-stretch: 94%; }
.c-pasos p { font-size: var(--t-chico); color: var(--tinta-2); }
.c-proceso__aliado { max-width: 70ch; margin-top: var(--e-xl); color: var(--tinta-2); }
.c-proceso__aliado b { color: var(--tinta); }

/* Preguntas */
.c-preguntas__rejilla { display: grid; gap: var(--e-xl) var(--medianil); }
@media (min-width: 1024px) { .c-preguntas__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.c-preguntas__cab { display: grid; gap: var(--e-s); align-content: start; }

/* Llegada con video de cierre */
.c-llegada__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; aspect-ratio: auto; height: 100%; }
.c-llegada__media video, .c-llegada__media img { object-position: 50% 60%; }
.c-llegada::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, rgb(10 22 40 / .72) 0%, rgb(10 22 40 / .35) 55%, rgb(10 22 40 / 0) 80%); }
.c-llegada .antetitulo { color: var(--cobre-claro); }
.c-llegada__cartel { margin-top: var(--e-m); font-size: clamp(3.2rem, 8vw, 8.5rem); }
.c-llegada__notas { max-width: 44ch; margin-top: var(--e-l); border-top: 1px solid rgb(247 244 238 / .25); }
.c-llegada__notas li { padding-block: .6rem; border-bottom: 1px solid rgb(247 244 238 / .25); font-size: var(--t-chico); color: var(--noche-100); }
.c-llegada__texto .acciones { margin-top: var(--e-l); }
.c-llegada__texto .enlace-flecha { color: var(--cal); }
.c-llegada__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: var(--e-xl); }
.c-llegada__pie .rotulo-lugar { color: var(--noche-300); }

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