/* ============================================================
   CÓMO FUNCIONA — pasos numerados del proceso de arriendo
   ============================================================ */

.pasos{
  background: var(--color-gray-100);
}

.pasos-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.paso{
  position: relative;
  background: #fff;
  padding: 30px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
}

.paso .num{
  position: absolute;
  top: -18px;
  left: 24px;
  background: var(--color-accent);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

@media (max-width: 900px){
  .pasos-grid{
    grid-template-columns: 1fr;
  }
}