/* ---------- Pasos numerados ---------- */
/* .steps es una .row de Bootstrap (row-cols-* en el HTML). La línea punteada
   que une los 4 pasos solo tiene sentido cuando están en una misma fila (lg+). */
.steps { position: relative; }
.steps::before {
  display: none;
  content: "";
  position: absolute;
  top: 46px;
  left: 12.5%;
  right: 12.5%;
  border-top: 2px dotted var(--petroleo-claro);
  z-index: 0;
}
@media (min-width: 992px) {
  .steps::before { display: block; }
}
.step { text-align: center; position: relative; z-index: 1; }
.step-icon {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--petroleo-oscuro);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 16px;
  position: relative;
  box-shadow: var(--sombra);
}
.step-icon .num {
  position: absolute;
  top: -4px; left: -4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--petroleo-oscuro);
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-cuerpo);
  font-weight: 600;
  font-size: 0.7rem;
  box-shadow: 0 0 0 3px var(--blanco);
}
.step h4 { font-size: 1rem; margin-bottom: 8px; }
.step p { font-size: 0.88rem; color: var(--texto-suave); margin: 0; }