/* Línea dorada que avanza con el scroll y puntos que se encienden y pulsan (activo solo con JS: .tl-on) */

.tl-on { --tl: 0; position: relative; }
.tl-on .tl-fill {
  position: absolute; pointer-events: none; z-index: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(215,189,134,.55), #e9d3a1);
  box-shadow: 0 0 12px rgba(215,189,134,.55), 0 0 2px rgba(255,236,190,.9);
  will-change: transform;
}
.tl-on .tl-fill::after { /* cabeza luminosa de la línea */
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0 30%, rgba(233,211,161,.55) 60%, transparent 72%);
}

/* horizontal (Método y Proceso en escritorio) */
.process.tl-on .tl-fill { top: 4px; left: 0; right: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--tl)); }
.process.tl-on .tl-fill::after { right: -4px; top: -3.5px; }

/* vertical (móvil y Contacto) */
@media (max-width: 980px) {
  .process.tl-on .tl-fill { top: 7px; bottom: 10px; left: 3px; right: auto; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--tl)); background: linear-gradient(180deg, rgba(215,189,134,.55), #e9d3a1); }
  .process.tl-on .tl-fill::after { right: auto; left: -3.5px; top: auto; bottom: -4px; }
}
.contact-steps.tl-on .tl-fill { top: 14px; bottom: 14px; left: 12.5px; width: 2px; transform-origin: 50% 0; transform: scaleY(var(--tl)); background: linear-gradient(180deg, rgba(215,189,134,.55), #e9d3a1); }
.contact-steps.tl-on .tl-fill::after { left: -3.5px; bottom: -4px; }
.contact-steps.tl-on::before { z-index: 0; }

/* puntos: apagados hasta que la línea llega; al llegar se encienden y emiten un pulso */
.process.tl-on .step { opacity: .4; transition: opacity 600ms ease; }
.process.tl-on .step.is-lit { opacity: 1; }
.process.tl-on .step::before {
  background: rgba(215,189,134,.22); box-shadow: none; transform: scale(.8);
  transition: background 500ms ease, box-shadow 500ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}
.process.tl-on .step.is-lit::before { background: #e9d3a1; box-shadow: 0 0 16px rgba(215,189,134,.8); transform: scale(1); }
.process.tl-on .step::after {
  content: ""; position: absolute; top: 1px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(233,211,161,.9); opacity: 0; pointer-events: none;
}
.process.tl-on .step.is-pulse::after { animation: tlRing 1100ms cubic-bezier(.15,.7,.2,1) 1; }
@media (max-width: 980px) { .process.tl-on .step::after { top: 3px; } }

.contact-steps.tl-on li { opacity: .45; transition: opacity 600ms ease; }
.contact-steps.tl-on li.is-lit { opacity: 1; }
.contact-steps.tl-on li:not(.is-lit) .cs-node { border-color: rgba(215,189,134,.2); color: rgba(215,189,134,.55); box-shadow: none; background: rgba(10,14,20,.94); }
.contact-steps.tl-on li.is-lit .cs-node { border-color: #e9d3a1; background: #e9d3a1; color: #0b0f14; box-shadow: 0 0 18px rgba(215,189,134,.5); transition: background 500ms, color 500ms, box-shadow 500ms, border-color 500ms; }
.contact-steps.tl-on li.is-pulse .cs-node { animation: tlNode 1100ms cubic-bezier(.15,.7,.2,1) 1; }

@keyframes tlRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes tlNode { 0% { box-shadow: 0 0 0 0 rgba(233,211,161,.65), 0 0 18px rgba(215,189,134,.5); } 100% { box-shadow: 0 0 0 16px rgba(233,211,161,0), 0 0 18px rgba(215,189,134,.5); } }

@media (prefers-reduced-motion: reduce) {
  .process.tl-on .step, .contact-steps.tl-on li { opacity: 1; }
  .process.tl-on .step::after, .contact-steps.tl-on li .cs-node { animation: none !important; }
}