/* ============================================================
   Cómo pedir: pasos numerados por CSS counter
   ============================================================ */
.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  counter-reset:step;
}
.step{ counter-increment:step; }
.step .num{
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid var(--accent);
  display:grid;
  place-items:center;
  font-family:var(--bo-display);
  font-weight:300;
  font-size:22px;
  color:var(--accent);
  margin-bottom:16px;
}
.step .num::before{ content:counter(step); }
.step h3{
  font-weight:500;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.step p{
  margin:0;
  font-size:14.5px;
  color:var(--text-soft);
  text-wrap:pretty;
}

@media (max-width:840px){
  .steps{
    grid-template-columns:1fr;
    max-width:440px;
    margin-inline:auto;
  }
}