/* Componente único - Barra de progresso (etapas) */

.progress-bar-etapas{
  --bar-pad: 20px;
  --marker: 40px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;

  width:100%;
  max-width:1200px;
  margin:0 auto 40px;

  position:relative;
  padding:0 var(--bar-pad);
}

/* linha fina ao fundo (centro do 1º marcador até centro do último) */
.progress-bar-etapas::before{
  content:"";
  position:absolute;
  top:22px;
  left:calc(var(--bar-pad) + (var(--marker) / 2));
  right:calc(var(--bar-pad) + (var(--marker) / 2));
  height:3px;
  background:var(--trail-line, #d1d5db);
  z-index:0;
  border-radius:999px;
}

/* trilha grossa */
.progress-fill{
  position:absolute;
  top:20px;
  left:calc(var(--bar-pad) + (var(--marker) / 2));
  right:calc(var(--bar-pad) + (var(--marker) / 2));
  height:6px;
  background:var(--trail, #e5e7eb);
  z-index:0;
  border-radius:999px;
  overflow:hidden;
}

/* preenchimento animado */
#barra-progresso{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--brand, #ff8000), var(--brand-2, #ffaa00));
  background-size:200% 100%;
  border-radius:999px;
  transition:width .6s ease;
  animation:brilho 2s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  #barra-progresso{ animation:none; transition:none; }
}

@keyframes brilho{
  0%{ background-position:0% 0%; }
  100%{ background-position:100% 0%; }
}

/* etapas */
.etapa{
  flex:1 1 0;
  min-width:0;
  display:block;
  text-align:center;
  z-index:1;
  position:relative;
  text-decoration:none;
  color:inherit;
}

.etapa:hover{ opacity:.92; cursor:pointer; }

.etapa .marcador{
  width:var(--marker);
  height:var(--marker);
  margin:0 auto 6px;
  border-radius:50%;
  background:#c7c7c7;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.etapa span{
  font-size:13px;
  line-height:1.25;
  color:#9ca3af;
  display:block;
  user-select:none;
}

.etapa.concluida .marcador{ background:var(--text, #2a3e4e); }
.etapa.concluida span{ color:var(--text, #2a3e4e); }

.etapa.ativa .marcador{ background:var(--brand, #ff8000); }
.etapa.ativa span{ font-weight:700; color:var(--brand, #ff8000); }

/* pequenas telas */
@media (max-width:640px){
  .progress-bar-etapas{
    --bar-pad:12px;
    --marker:34px;
    gap:8px;
  }
  .etapa .marcador{ font-size:16px; }
  .etapa span{ font-size:12px; }
}

/* high contrast */
@media (forced-colors: active){
  #barra-progresso{ background: currentColor; }
  .etapa .marcador{
    forced-color-adjust:none;
    background:ButtonText;
    color:Canvas;
  }
}