/* ============================================================
   STEPS — cómo funciona en 3 pasos
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.step {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.8rem 1.8rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.step .n  { font-family: 'Fraunces', serif; font-size: 2.6rem; color: var(--gold); line-height: 1 }
.step h3  { font-size: 1.2rem; font-weight: 600; margin: .5rem 0 .4rem; color: var(--ink) }
.step p   { color: var(--slate); font-size: .97rem }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr }
}