/* Barra com as 5 etapas da Scoop (mesmo roteiro dos cards de "Como funciona") */
.steps { max-width:1100px; margin:1.5rem auto 2.5rem; padding:0 3rem; }
.steps ol { list-style:none; display:grid; grid-template-columns:repeat(5,1fr); counter-reset:step; }
.step { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.6rem; padding:0 0.5rem; }
.step::before {
  content:''; position:absolute; top:19px; left:calc(-50% + 26px); right:calc(50% + 26px); height:2px;
  background:rgba(112,150,127,0.18); border-radius:2px;
}
.steps li:first-child .step::before { display:none; }
.step.done::before, .step.current::before { background:var(--gold-gradient); }
.step-dot {
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--text-muted);
  background:rgba(255,255,255,0.8); border:1.5px solid rgba(112,150,127,0.2);
  transition:all 0.4s var(--ease-out);
}
.step-dot svg { width:16px; height:16px; }
.step-label { font-size:0.78rem; font-weight:600; color:var(--text-muted); line-height:1.35; }
.step.done .step-dot { background:var(--green); border-color:var(--green); color:var(--white); }
.step.done .step-label { color:var(--green-deep); }
.step.current .step-dot {
  background:var(--gold-gradient); border-color:transparent; color:var(--green-darkest);
  box-shadow:0 0 0 5px rgba(224,201,138,0.25), 0 8px 24px rgba(196,162,101,0.35);
}
.step.current .step-label { color:var(--charcoal); }
a.step:hover .step-dot { transform:scale(1.08); }
@media (max-width:640px) {
  .steps { padding:0 1rem; margin-bottom:2rem; }
  .step { padding:0 0.15rem; }
  .step-dot { width:32px; height:32px; font-size:0.9rem; }
  .step::before { top:15px; left:calc(-50% + 20px); right:calc(50% + 20px); }
  .step-label { font-size:0.62rem; }
}