/* ============================================================
   FEATURE: Como funciona (pasos)
   Mobile-first: pasos apilados en columna con numero + texto
   centrados; en pantallas anchas se muestran en fila con flechas.
   ============================================================ */
.steps{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}
@media (min-width:760px){
  .steps{ flex-direction:row; align-items:flex-start; justify-content:center; gap:0; }
}

.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:230px;
}
.step-num{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--navy-deep);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.step h3{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 8px; color:var(--text-dark); }
.step p{ font-size:.88rem; color:var(--text-muted); margin:0; line-height:1.5; }

.step-arrow{
  display:none;
  color:var(--line);
  font-size:1.4rem;
  align-self:center;
  margin-top:18px;
}
@media (min-width:760px){
  .step-arrow{ display:flex; padding:0 22px; color:#c7cfdd; }
}