/* rutas-pagina.css — página «Rutas por puesto» (rutas.php). Solo la carga esa página ($page_css), DESPUÉS de
   rutas-puesto.css, que es la pieza compartida con la portada (tarjetas de puesto + la ruta del elegido).

   1.10.42 · La página pasa al diseño nuevo: fuera la cabecera navy, la lista de roles y las rutas apiladas de 1.10.14
   (.rp-*); queda la misma pieza de la portada con el título como h1, sus migas de pan y la salida para empresas. */

.vd-rutas--pagina { padding-top: 22px; }
.vd-migas ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 26px; padding: 0;
  font-family: var(--font-cuerpo); font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #64748B;
}
.vd-migas li { display: inline-flex; align-items: center; gap: 4px; }
.vd-migas li + li::before { content: "›"; color: #94A3B8; }
.vd-migas a { color: #64748B; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #B6C0CE; }
.vd-migas a:hover { color: #0F172A; }
.vd-migas [aria-current="page"] { color: #0F172A; font-weight: 600; }
.vd-rutas--pagina .vd-rp__titulo { font-size: 32px; }
.vd-rutas__vacio { margin: 12px 0 40px; color: #64748B; }
.vd-rutas__vacio a { color: #15803D; font-weight: 600; text-decoration: underline; }

/* La salida para empresas, debajo de la ruta (el ancho, el del contenedor de la casa, como la ruta). */
.vd-empresas { padding: 0 0 56px; background: #fff; }
.vd-empresas__caja {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: 12px; background: #F6F8FA; border: 1px solid #E2E8F0;
}
.vd-empresas__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: #0F172A; }
.vd-empresas__l { margin: 4px 0 0; font-family: var(--font-cuerpo); font-size: 14px; line-height: 1.5; color: #64748B; }
.vd-empresas__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: #fff;
  border: 1.5px solid #1C3D6C; color: #1C3D6C; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-decoration: none; white-space: nowrap; transition: background-color .16s ease, color .16s ease;
}
.vd-empresas__cta:hover { background: #1C3D6C; color: #fff; }
.vd-empresas__cta:focus-visible { outline: 3px solid #16A34A; outline-offset: 2px; border-radius: 10px; }

@media (max-width: 767px) {
  .vd-rutas--pagina { padding-top: 14px; }
  .vd-migas ol { margin-bottom: 18px; }
  .vd-rutas--pagina .vd-rp__titulo { font-size: 25px; }
  .vd-empresas { padding-bottom: 40px; }
  .vd-empresas__caja { padding: 18px 16px; }
  .vd-empresas__cta { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .vd-empresas__cta { transition: none; } }