/* =====================================================================
   §4 · Cómo funciona
   ===================================================================== */
.como { background: var(--bg); }

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.step { position: relative; }

.step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--on-dark);
  background-image: var(--brand-gradient);
  margin-bottom: var(--space-4);
}

.step__icon {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--brand-lila);
  margin-bottom: var(--space-3);
}
.step__icon svg { width: 100%; height: 100%; }

.step__title { margin-bottom: var(--space-2); }
.step__desc { color: var(--ink-soft); }

/* Conector horizontal (desktop) */
@media (min-width: 761px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px;
    left: calc(48px + var(--space-4));
    right: calc(-1 * clamp(1.5rem, 4vw, 3rem) + var(--space-2));
    height: 2px;
    background: linear-gradient(90deg, var(--brand-lila), transparent);
  }
}

/* Timeline vertical (móvil) */
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding-left: calc(48px + var(--space-5)); padding-bottom: var(--space-8); }
  .step__num { position: absolute; left: 0; top: 0; margin: 0; }
  .step__icon { margin-top: 0; }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(var(--brand-lila), transparent);
  }
}