/* Mobile First */
#roadmap_container {
  /* Fondo Sutilmente Distinto (Usamos tu color claro) */
  background-color: var(--lila-3); 
  
  position: sticky;
  top: var(--header-height);
  z-index: 1;
  width: 100%;
  padding: 1vh 0%;

  /* Bordes para separación visual */
  border-bottom: 1px solid var(--lila-2); /* Borde más oscuro del mismo tono */
  border-top: 1px solid var(--lila-2); 
}

.roadmap-progress {
  display: flex;
  flex-direction: row;   /* apilado en mobile */
  justify-content: center;
  padding: 0 2%;
  font-size: var(--fs-small);
}

.step-item {
  display: flex;
  align-items: center;
}

.step {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-2);
  color: #fff;
  font-weight: bold;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.step-text {
  font-weight: 500;
  color: #333;
}

/* Estados */
.step-item.active {
  /* Usar el fondo del contenedor, pero con padding */
  background-color: transparent; 
  border-radius: 8px;
  padding: 5px;
}

.step-item.active span {
  color: var(--lila-1); 
  font-weight: 700;
}

.step-item.active .step  {
  /* El círculo ACTIVO ahora usa el color lila como fondo y mantiene el borde */
  background-color: var(--lila-1); 
  color: #fff; /* El número debe ser blanco */
  border: 1px solid var(--lila-1);
}

/* .checked .step {
  background-color: var(--green-3);
  color: #333;
} */

.separator {
  display: flex;
  align-items: center;
  padding: 0 1vw;
  color: #999;
  font-weight: bold;
}

/* Desktop */
@media (min-width: 768px) {
  
    #roadmap_container {
        padding: 1vh 0;
        gap: 12px;
    }
}