/* pasos-progreso — lista de pasos en ventana deslizante con el foco en el paso
   actual. La opacidad cae con la distancia, así el ojo va solo. */
.lui-pasos{
  --lui-paso-alto:38px;
  --lui-ventana:4;              /* cuántos pasos se ven a la vez */
  position:relative;overflow:hidden;
  /* La altura fija es imprescindible: sin ella la lista entera queda a la vista
     y el desplazamiento deja un hueco muerto debajo. */
  height:calc(var(--lui-paso-alto) * var(--lui-ventana));
  -webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);
          mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);
}

.lui-pasos-pista{
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  transform:translateY(calc(var(--lui-desliz,0) * var(--lui-paso-alto) * -1));
}

.lui-paso{
  display:flex;align-items:center;gap:10px;
  height:var(--lui-paso-alto);font-size:14px;
  color:var(--lui-atenuado,#8f8f88);
  opacity:var(--lui-op,.25);
  transition:opacity .5s ease,color .35s ease;
}

.lui-paso .lui-icono{
  flex:0 0 18px;width:18px;height:18px;
  color:var(--lui-atenuado,#8f8f88);
  transition:color .35s ease,transform .35s ease;
}

.lui-paso[data-estado="hecho"]{color:var(--lui-texto,#f3f3ee)}
.lui-paso[data-estado="hecho"] .lui-icono{color:var(--lui-ok,#46d17a)}
.lui-paso[data-estado="actual"]{color:var(--lui-acento,#c8a24a);opacity:1 !important}
.lui-paso[data-estado="actual"] .lui-icono{
  color:var(--lui-acento,#c8a24a);
  animation:lui-latido 1.4s ease-in-out infinite;
}
.lui-paso[data-estado="error"]{color:var(--lui-error,#ef5b5b);opacity:1 !important}
.lui-paso[data-estado="error"] .lui-icono{color:var(--lui-error,#ef5b5b)}

@keyframes lui-latido{
  0%,100%{transform:scale(1);opacity:.85}
  50%    {transform:scale(1.18);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .lui-pasos-pista{transition:none}
  .lui-paso[data-estado="actual"] .lui-icono{animation:none}
}