/* =========================================================================
   PROCESO.CSS — "Cómo trabajamos": pasos numerados
   ========================================================================= */

.steps {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}
.step {
  position: relative; padding: 2.2rem 1.6rem 1.8rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step__num {
  counter-increment: step;
  font-family: var(--font-serif); font-weight: 700; font-size: 2.4rem;
  color: var(--blue-mid); line-height: 1; margin-bottom: .8rem;
}
.step__num::before { content: "0" counter(step); }
.step h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.step p { color: var(--text-muted); font-size: .96rem; }
/* Línea conectora en escritorio */
.steps .step:not(:last-child)::after {
  content: ""; position: absolute; top: 3.1rem; right: -.55rem; width: 1.1rem; height: 2px;
  background: var(--border);
}
@media (max-width: 720px) { .steps .step::after { display: none; } }