/* ============================================================================
   rutas-puesto.css — RUTAS POR PUESTO (1.10.42 · vitrina nueva, agente VD).
   La pieza de includes/partials/rutas-puesto.php: la portada (sección #rutas, la carga index.php en $page_css) y su
   página rutas.php. Referencias del dueño: inicio-02-rutas-y-resenas (Operador de campo elegido) y
   rutas-04-al-tocar-supervisor (la ruta crece con sus cursos). Medidas tomadas de la referencia a 1440 px.
   Todo bajo .vd-rp / .vd-rutas: las reglas viejas de «Rutas por rol» (.rutas, .ruta-rol… en sections.css) no se
   tocan ni aplican aquí. Tipografía: títulos, nombres y precios en Plus Jakarta Sans; textos de apoyo en Inter.
   ============================================================================ */

.vd-rutas {
  --vd-verde: #16A34A;
  --vd-verde-tinta: #166534;
  --vd-verde-fondo: #F1FAF4;
  --vd-verde-pill: #E7F6EC;
  --vd-tinta: #0F172A;
  --vd-gris: #64748B;
  --vd-gris-2: #475569;
  --vd-linea: #E2E8F0;
  --vd-azul: #1C3D6C;
  background: #fff;
  padding: 47px 0 50px;
}
/* El ancho lo pone el contenedor de la casa (assets/css/vitrina-ancho.css, del coordinador: ≈4,5 % de margen a cada
   lado en cualquier monitor). Aquí no se fija ningún ancho propio: las tarjetas y la ruta se estiran con la pantalla. */
.vd-rp { position: relative; color: var(--vd-tinta, #0F172A); }
.vd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Cabecera ---------- */
.vd-rp__cab { text-align: center; margin: 0 auto 21.5px; max-width: 760px; }
.vd-rp__eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vd-verde);
}
.vd-rp__titulo {
  margin: 6.5px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 30.1px; line-height: 1.2;
  letter-spacing: -.02em; color: var(--vd-tinta); text-wrap: balance;
}
.vd-rp__lead { margin: 6px 0 0; font-family: var(--font-cuerpo); font-weight: 400; font-size: 14.7px; line-height: 1.45; color: var(--vd-gris); }

/* ---------- Tarjetas de puesto (grupo de opciones) ---------- */
.vd-puestos { display: grid; grid-template-columns: repeat(var(--vd-cols, 4), minmax(0, 1fr)); gap: 16px; margin: 0 auto; }
/* Con uno o dos puestos, la tarjeta no se estira a media pantalla: conserva su tamaño y el grupo va al centro. */
.vd-puestos[data-cols="1"], .vd-puestos[data-cols="2"] { max-width: calc(var(--vd-cols) * 340px + (var(--vd-cols) - 1) * 16px); }
.vd-puesto {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 187px;
  padding: 17px 20px 18px; background: #fff; border: 1px solid var(--vd-linea); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03); color: var(--vd-tinta); text-decoration: none; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.vd-puesto:hover { border-color: #BFE3CB; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .14); }
.vd-puesto:focus-visible { outline: 3px solid var(--vd-verde); outline-offset: 3px; border-radius: 12px; }
.vd-puesto.is-on {
  background: var(--vd-verde-fondo); border-color: var(--vd-verde);
  box-shadow: inset 0 0 0 .5px var(--vd-verde), 0 12px 24px -10px rgba(22, 163, 74, .32);
}
/* La muesca que apunta a la ruta de abajo: un rombo blanco con el borde verde en sus dos lados de abajo. */
.vd-puesto.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 22px; height: 22px; z-index: 2;
  background: #fff; border-right: 1.5px solid var(--vd-verde); border-bottom: 1.5px solid var(--vd-verde);
  transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 2px; pointer-events: none;
}
/* Solo en la última fila de tarjetas (vd-ult-*: ver el parcial). */
.vd-puesto.is-on:not(.vd-ult-d)::after { display: none; }
@media (max-width: 1279px) {
  .vd-puestos[data-cols="5"] .vd-puesto.is-on::after { display: none; }
  .vd-puestos[data-cols="5"] .vd-puesto.is-on.vd-ult-3::after { display: block; }
}
@media (max-width: 1099px) {
  .vd-puestos .vd-puesto.is-on::after { display: none; }
  .vd-puestos .vd-puesto.is-on.vd-ult-2::after { display: block; }
}
@media (max-width: 359px) {
  .vd-puestos .vd-puesto.is-on.vd-ult-2::after { display: none; }
  .vd-puestos .vd-puesto.is-on:last-child::after { display: block; }
}
.vd-puesto__marca {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1.5px solid #CFD8E3; background: #fff; color: #fff;
}
.vd-puesto__marca svg { width: 15px; height: 15px; opacity: 0; }
.vd-puesto.is-on .vd-puesto__marca { background: var(--vd-verde); border-color: var(--vd-verde); }
.vd-puesto.is-on .vd-puesto__marca svg { opacity: 1; }
.vd-puesto__nombre {
  position: relative; z-index: 1; max-width: 58%; margin-top: 8.75px; font-family: var(--font-display); font-weight: 700;
  font-size: 18.2px; line-height: 21px; letter-spacing: -.01em; color: var(--vd-tinta);
}
.vd-puesto__linea {
  position: relative; z-index: 1; max-width: 58%; margin-top: 8px; font-family: var(--font-cuerpo); font-weight: 400;
  font-size: 13.2px; line-height: 16.8px; color: var(--vd-gris);
}
.vd-puesto--sinfig .vd-puesto__nombre, .vd-puesto--sinfig .vd-puesto__linea { max-width: none; }
/* El personaje: abajo a la derecha, cortado por el borde de la tarjeta (como la referencia). El recorte lo hace este
   marco y no la tarjeta, para que la muesca de abajo no se corte. */
.vd-puesto__figura { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.vd-puesto__fig {
  position: absolute; right: 7px; bottom: -27px; width: auto; height: 148px; max-width: 46%; object-fit: contain;
  object-position: right bottom; opacity: .56; filter: saturate(.75);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.vd-puesto:hover .vd-puesto__fig { opacity: .8; filter: none; }
.vd-puesto.is-on .vd-puesto__fig { opacity: 1; filter: none; }

/* ---------- La ruta del puesto elegido ---------- */
/* La columna de «Tu ruta»: 331 px, la de la referencia (ahí la división cae en el hueco entre la primera y la segunda
   tarjeta, y la nota de abajo cabe en un renglón); en pantallas más anchas crece con las tarjetas (una tarjeta + 4 px). */
.vd-ruta {
  --vd-izq: max(331px, calc((100% - 48px) / 4 + 4px));
  display: grid; grid-template-columns: var(--vd-izq) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "info lista" "compra lista";
  margin-top: 26.5px; border: 1.5px solid var(--vd-verde); border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, var(--vd-verde-fondo) 0 var(--vd-izq), #D6EBDD var(--vd-izq) calc(var(--vd-izq) + 1px), #fff calc(var(--vd-izq) + 1px));
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .22);
}
.vd-ruta[hidden] { display: none; }
.vd-ruta__eyebrow {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 11.5px; line-height: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vd-verde);
}
.vd-ruta__eyebrow--gris { color: #556071; }

.vd-ruta__info { grid-area: info; padding: 25px 24px 0 25px; }
.vd-ruta__nombre {
  margin: 11px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25;
  letter-spacing: -.01em; color: var(--vd-tinta);
}
.vd-ruta__datos { margin: 7.5px 0 0; font-family: var(--font-cuerpo); font-size: 13px; line-height: 1.4; color: var(--vd-gris); }
.vd-ruta__datos b { font-weight: 700; color: var(--vd-tinta); }

.vd-ruta__compra { grid-area: compra; align-self: end; padding: 21px 25px 23px 26px; }
.vd-ruta__lbl { display: block; font-family: var(--font-cuerpo); font-size: 12.4px; line-height: 16px; color: var(--vd-gris); }
.vd-ruta__total {
  display: block; margin-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 29.5px; line-height: 30px;
  letter-spacing: -.01em; color: var(--vd-tinta);
}
.vd-ruta__form { margin: 13px 0 0; }
.vd-ruta__cta {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 18px;
  border: 0; border-radius: 12px; background: var(--vd-verde); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 18px -8px rgba(22, 163, 74, .55); transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.vd-ruta__cta { margin-top: 13px; }
.vd-ruta__cta:hover { background: #15913F; box-shadow: 0 12px 22px -8px rgba(22, 163, 74, .6); }
.vd-ruta__cta:active { transform: translateY(1px); }
.vd-ruta__cta:focus-visible { outline: 3px solid var(--vd-tinta); outline-offset: 3px; border-radius: 12px; }
.vd-ruta__nota {
  margin: 10.5px 0 0; font-family: var(--font-cuerpo); font-size: 11.8px; line-height: 1.4; color: var(--vd-gris); text-align: center;
}
.vd-ruta__aula {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #EEF4FB; border: 1px solid #D5E2F2;
  font-family: var(--font-cuerpo); font-size: 12px; line-height: 1.45; color: #1F3A5F;
}

.vd-ruta__lista { grid-area: lista; padding: 19.5px 33px 18px 21px; min-width: 0; }
.vd-pasos { list-style: none; margin: 6px 0 0; padding: 0; }
.vd-paso { position: relative; }
/* El hilo: de la base de un número hasta un poco antes del siguiente. Los números van a una altura FIJA de su fila (no
   centrados), así el hilo mide bien aunque una fila crezca (un título o una línea en dos renglones). */
.vd-paso:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 54px; height: calc(100% - 38px); width: 2px;
  background: #EBEEF3; border-radius: 1px; pointer-events: none;
}
.vd-paso__a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 123px 80px 9px; column-gap: 15px; align-items: start;
  min-height: 76px; padding: 0 0 16px; color: inherit; text-decoration: none; border-radius: 10px;
}
.vd-paso__n {
  display: grid; place-items: center; width: 32px; height: 32px; margin-top: 22px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--vd-azul); color: var(--vd-azul); font-family: var(--font-display); font-weight: 800;
  font-size: 12.5px; line-height: 1;
}
.vd-paso.is-primero .vd-paso__n { background: var(--vd-verde); border-color: var(--vd-verde); color: #fff; }
.vd-paso__txt { min-width: 0; display: block; margin-top: 17.5px; }
.vd-paso__tit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.vd-paso__t {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 20px; letter-spacing: -.005em;
  color: var(--vd-tinta);
}
.vd-paso__t sub, .vd-paso__d sub { font-size: .68em; line-height: 0; vertical-align: -.28em; }
.vd-paso__pill {
  display: inline-flex; align-items: center; height: 16px; padding: 0 7px; border-radius: 999px;
  background: var(--vd-verde-pill); color: var(--vd-verde-tinta); font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.vd-paso__pill--aula { background: #EEF4FB; color: #1F3A5F; }
.vd-paso__d {
  display: block; margin-top: 2px; font-family: var(--font-cuerpo); font-size: 12.6px; line-height: 17px; color: var(--vd-gris);
}
/* Horas, precio y flecha: a la altura del centro del número. */
.vd-paso__meta { margin-top: 29.7px; font-family: var(--font-cuerpo); font-size: 12.8px; line-height: 1.3; color: var(--vd-gris-2); white-space: nowrap; }
.vd-paso__precio {
  justify-self: end; margin-top: 28.9px; font-family: var(--font-display); font-weight: 800; font-size: 15.2px; line-height: 1.2;
  color: var(--vd-tinta); white-space: nowrap;
}
.vd-paso__ir { width: 9px; height: 13px; margin: 31.5px 0 0 -.5px; color: var(--vd-verde); transition: transform .16s ease; }
.vd-paso__a:hover .vd-paso__t { color: #15803D; }
.vd-paso__a:hover .vd-paso__ir { transform: translateX(3px); }
.vd-paso__a:focus-visible { outline: 3px solid var(--vd-verde); outline-offset: 2px; border-radius: 10px; }

/* Cinco puestos: en una fila desde 1280 px; más angosto, 3 + 2. */
@media (max-width: 1279px) { .vd-puestos[data-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

/* ---------- Hasta 1099 px: tarjetas 2 × 2; en cada curso, las horas pasan debajo de su línea ---------- */
@media (max-width: 1099px) {
  .vd-puestos, .vd-puestos[data-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .vd-ruta { --vd-izq: 260px; }
  .vd-ruta__info { padding: 22px 20px 0; }
  .vd-ruta__compra { padding: 22px 20px 18px; }
  .vd-ruta__lista { padding: 20px 22px 12px 18px; }
  .vd-paso__a { grid-template-columns: 32px minmax(0, 1fr) auto 9px; grid-template-rows: auto auto; column-gap: 12px; min-height: 0; padding: 0 0 14px; }
  .vd-paso__n { grid-column: 1; grid-row: 1 / span 2; margin-top: 14px; }
  .vd-paso__txt { grid-column: 2; grid-row: 1; margin-top: 10px; }
  .vd-paso__meta { grid-column: 2; grid-row: 2; margin-top: 3px; white-space: normal; }
  .vd-paso__precio { grid-column: 3; grid-row: 1; margin-top: 21px; }
  .vd-paso__ir { grid-column: 4; grid-row: 1; margin-top: 23.5px; }
  .vd-paso:not(:last-child)::after { top: 46px; height: calc(100% - 38px); }
}

/* ---------- Hasta 899 px: la ruta apilada — quién, en qué orden y, al final, comprar ---------- */
@media (max-width: 899px) {
  .vd-ruta {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "info" "lista" "compra";
    background: #fff;
  }
  .vd-ruta__info { padding: 20px 22px 16px; background: var(--vd-verde-fondo); border-bottom: 1px solid #D6EBDD; }
  .vd-ruta__nombre { margin-top: 7px; }
  .vd-ruta__lista { padding: 18px 22px 6px 18px; }
  .vd-pasos { margin-top: 2px; }
  .vd-ruta__compra {
    align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    grid-template-areas: "lbl form" "total form" ". nota" "aula aula"; column-gap: 20px; align-items: center;
    padding: 18px 22px 20px; background: var(--vd-verde-fondo); border-top: 1px solid #D6EBDD;
  }
  .vd-ruta__lbl { grid-area: lbl; align-self: end; }
  .vd-ruta__total { grid-area: total; align-self: start; }
  .vd-ruta__form, a.vd-ruta__cta { grid-area: form; margin: 0; }
  .vd-ruta__nota { grid-area: nota; margin-top: 8px; }
  .vd-ruta__aula { grid-area: aula; margin-top: 12px; }
}

/* ---------- Teléfono (hasta 767 px): tarjetas 2 × 2 compactas ---------- */
@media (max-width: 767px) {
  .vd-rutas { padding: 36px 0 40px; }
  .vd-rp__cab { margin-bottom: 18px; }
  .vd-rp__eyebrow { font-size: 11.5px; }
  .vd-rp__titulo { font-size: 24px; line-height: 1.22; }
  .vd-rp__lead { font-size: 14px; }
  .vd-puestos { gap: 10px; }
  .vd-puesto { min-height: 152px; padding: 12px 12px 12px; }
  .vd-puesto__marca { width: 24px; height: 24px; }
  .vd-puesto__marca svg { width: 12px; height: 12px; }
  .vd-puesto__nombre { max-width: 64%; margin-top: 8px; font-size: 15px; line-height: 18px; }
  .vd-puesto__linea { max-width: 62%; margin-top: 6px; font-size: 12px; line-height: 15px; }
  .vd-puesto__fig { right: 4px; bottom: -22px; height: 108px; max-width: 44%; }
  .vd-puesto.is-on::after { width: 16px; height: 16px; bottom: -9px; }
  .vd-ruta { margin-top: 22px; }
  .vd-ruta__info { padding: 18px 16px 14px; }
  .vd-ruta__nombre { font-size: 20px; margin-top: 6px; }
  .vd-ruta__lista { padding: 16px 14px 4px 14px; }
  .vd-paso__a { grid-template-columns: 28px minmax(0, 1fr) auto 8px; column-gap: 10px; padding: 0 0 12px; }
  .vd-paso__n { width: 28px; height: 28px; margin-top: 12px; font-size: 12px; }
  .vd-paso:not(:last-child)::after { left: 13px; top: 40px; height: calc(100% - 34px); }
  .vd-paso__txt { margin-top: 8px; }
  .vd-paso__t { font-size: 14.5px; line-height: 19px; }
  .vd-paso__d { font-size: 12.5px; line-height: 16px; }
  .vd-paso__meta { font-size: 12px; }
  .vd-paso__precio { font-size: 14.5px; margin-top: 17.3px; }
  .vd-paso__ir { margin-top: 19.5px; }
}
/* La compra, en una columna: el total, el botón a todo lo ancho y la nota debajo. */
@media (max-width: 559px) {
  .vd-ruta__compra { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lbl" "total" "form" "nota" "aula"; padding: 16px 16px 18px; }
  .vd-ruta__total { font-size: 26px; line-height: 30px; }
  .vd-ruta__form, a.vd-ruta__cta { margin-top: 12px; }
}
@media (max-width: 359px) {
  .vd-puestos { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .vd-puesto, .vd-puesto__fig, .vd-ruta__cta, .vd-paso__ir { transition: none; }
  .vd-paso__a:hover .vd-paso__ir { transform: none; }
}