/* =====================================================================
   Etapa 2b — "El camino": el itinerario se dibuja al hacer scroll con una
   luz viajera que enciende cada hito. (Requiere GSAP + ScrollTrigger + JS.)
   Sin JS / con GSAP no disponible / reduce-motion → cae al dibujo simple
   de main.js. Todo bajo .timeline.camino para no tocar el resto.
   ===================================================================== */

/* La línea original pasa a ser un raíl tenue (todo el trayecto, apagado). */
.timeline.camino .timeline__linea{height:calc(100% - 60px);opacity:.2;
  background:var(--azul-tenue);transition:none}

/* Capa que se "pinta" sobre el raíl (crece con el scroll). */
.timeline__fill{position:absolute;left:31px;top:8px;width:2px;height:calc(100% - 60px);
  transform-origin:top center;transform:scaleY(0);pointer-events:none;z-index:1;
  background:linear-gradient(var(--oro-claro),var(--oro-vivo));
  box-shadow:0 0 10px rgba(201,162,78,.5)}

/* Luz viajera (cabeza del trazo). */
.timeline__comet{position:absolute;left:32px;top:8px;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;pointer-events:none;opacity:0;z-index:2;will-change:transform;
  background:radial-gradient(circle,#FFF7E0 0%,#E9D6A6 40%,rgba(201,162,78,.28) 66%,transparent 78%);
  box-shadow:0 0 22px 6px rgba(201,162,78,.5)}

/* La línea y la luz viajera pasan SIEMPRE por detrás de los hitos.
   Clave: el hito se atenúa con opacity (<1), y un opacity<1 CREA un contexto de
   apilado propio que atraparía al icono por debajo de la línea mientras está en
   penumbra (se veía "pasar por encima y luego por debajo"). Por eso el z-index
   va en el HITO ENTERO: así queda por encima del fill (1) y del comet (2) siempre. */
.timeline.camino .hito{position:relative;z-index:3}
.timeline.camino .hito__icono{position:relative;z-index:1}

/* Hitos: en penumbra hasta que la luz los alcanza. */
.timeline.camino .hito{opacity:.6;transition:opacity .6s ease}
.timeline.camino .hito.lit{opacity:1}
.timeline.camino .hito__icono{transition:box-shadow .55s ease, transform .55s ease}
.timeline.camino .hito.lit .hito__icono{transform:scale(1.06);
  box-shadow:0 0 0 6px rgba(201,162,78,.22), 0 0 24px 5px rgba(201,162,78,.5)}
.timeline.camino .hito__hora{transition:color .55s ease, text-shadow .55s ease}
.timeline.camino .hito.lit .hito__hora{color:var(--oro-claro);text-shadow:0 0 16px rgba(201,162,78,.4)}
.timeline.camino .hito__titulo{transition:text-shadow .55s ease}
.timeline.camino .hito.lit .hito__titulo{text-shadow:0 0 20px rgba(201,162,78,.3)}

@media (prefers-reduced-motion: reduce){
  .timeline.camino .hito{opacity:1}
  .timeline__fill,.timeline__comet{display:none}
}