/* Onda 17 — formulario em etapas (progressive enhancement).
   Sem JS: todos os .meca-step ficam visiveis (form longo).
   Com JS: o componente adiciona .is-enhanced e mostra um passo por vez. */
.meca-stepped .meca-step + .meca-step { margin-top: 1.25rem; }

.meca-stepped.is-enhanced .meca-step { display: none; }
.meca-stepped.is-enhanced .meca-step.is-active { display: block; }

.meca-stepper {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: meca-step;
}
.meca-stepper__item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--meca-muted);
  padding: .3rem .75rem; border-radius: 999px; background: rgba(0,0,0,.05);
}
.meca-stepper__item::before {
  counter-increment: meca-step; content: counter(meca-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgba(0,0,0,.18); color: var(--meca-on-primary); font-weight: 600; font-size: .78rem;
}
.meca-stepper__item.is-active { color: var(--meca-primary); background: rgba(0,26,77,.10); font-weight: 600; }
.meca-stepper__item.is-active::before { background: var(--meca-primary); }
.meca-stepper__item.is-done { color: var(--meca-success); }
.meca-stepper__item.is-done::before { background: var(--meca-success); content: "\2713"; }

.meca-stepper-nav { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.meca-stepper-nav__spacer { flex: 1 1 auto; }