/* ══════════════════════════════════════════════════════════════════
   La ruta del camión en la home (js/ruta-camion.js).
   Al dejar el hero, un camión chico baja por una ruta que va por los
   márgenes y por los espacios entre secciones, sin pisar texto, y se
   mete en un depósito arriba de "Trabajos de nuestro equipo".
   La capa va en coordenadas de la página (absoluta, adentro de
   #home-page): la ruta y el camión se mueven con el scroll nativo, sin
   temblar en el celular. Debajo del menú (z 50). Sin JS o con "reducir
   movimiento" no existe.
   Regla de marca: el celeste #53BDEB solo sobre fondo oscuro.
══════════════════════════════════════════════════════════════════ */
.rc{
  position:absolute;top:0;left:0;z-index:30;pointer-events:none;overflow:hidden;contain:strict;
  /* papel: solo los trazos de la ruta usan variables */
  --rc-borde:rgba(14,42,92,.32);--rc-raya:rgba(28,67,132,.62);
}
/* Fondo azul: el cuerpo pasa a oscuro al llegar a los casos (motion.js, data-theme-trigger) */
body[data-theme="dark"] .rc,.rc .rc--azul{
  --rc-borde:rgba(247,245,240,.3);--rc-raya:rgba(83,189,235,.75);
}
.rc-ruta{position:absolute;top:0;left:0;overflow:visible}
.rc-ruta path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc-borde{stroke:var(--rc-borde);stroke-width:1.2}
.rc-raya{stroke:var(--rc-raya);stroke-width:1.6;stroke-linecap:butt!important}
.rc-boca{stroke:var(--rc-borde);stroke-width:2}
.rc-camion{position:absolute;top:0;left:0;will-change:transform;opacity:0}
.rc-camion svg{display:block;overflow:visible}

/* ── el dibujo 3D (generador-3d/escenas/ruta.js): cada vista y cada depósito traen dos imágenes ──
   rc-i-p: caja de carga azul, para el papel. rc-i-a: blanca, como el del hero, para el azul. */
.rc .rc-i-p,.rc .rc-i-a{overflow:hidden}
.rc .rc-i-a{display:none}
body[data-theme="dark"] .rc .rc-i-a,.rc .rc--azul .rc-i-a{display:inline}
body[data-theme="dark"] .rc .rc-i-p,.rc .rc--azul .rc-i-p{display:none}
@media (prefers-reduced-motion:reduce){.rc{display:none!important}}