/* ===================================================================
   pasos.css — cómo funciona / proceso de implementación
   Variantes: horizontal · vertical_timeline

   Aquí la numeración SÍ va, al revés que en `features`: el orden es
   el dato. Se compone como el cadenamiento de un plano —una línea
   continua con marcas y una cota en tipografía técnica— en lugar del
   círculo con número que trae cualquier plantilla.
   =================================================================== */

.pasos__cabeza {
  max-width: 44rem;
  margin-bottom: var(--e-7);
}

.pasos__titulo {
  font-size: clamp(var(--paso-3), 3.4vw, var(--paso-4));
  font-stretch: 106%;
}

.pasos__intro {
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tenue);
  margin-top: var(--e-4);
}

.pasos__lista {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paso__numero {
  font-family: var(--tipo-tecnica);
  font-size: var(--paso--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-acento);
}

.fondo--claro .paso__numero { color: var(--color-secundario); }

.paso__titulo {
  font-size: var(--paso-1);
  font-weight: var(--peso-fuerte);
  line-height: 1.25;
  margin-top: var(--e-3);
}

.paso__texto {
  color: var(--tenue);
  margin-top: var(--e-3);
}

.paso__imagen {
  margin-top: var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--radio-medio);
}

/* ── Variante: horizontal ──────────────────────────────────────
   La regla superior es continua entre pasos; la marca de acento
   sobre cada uno funciona como la marca de estación de una cota. */

.pasos--horizontal .pasos__lista {
  grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
  gap: var(--e-6);
}

.pasos--horizontal .paso {
  position: relative;
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
}

.pasos--horizontal .paso::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--color-acento);
}

/* ── Variante: línea de tiempo vertical ───────────────────────── */

.pasos--vertical_timeline .pasos__lista { grid-template-columns: 1fr; }

.pasos--vertical_timeline .paso {
  position: relative;
  padding: 0 0 var(--e-7) var(--e-7);
  border-left: 1px solid var(--linea);
}

.pasos--vertical_timeline .paso:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.pasos--vertical_timeline .paso::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--color-acento);
}

.pasos--vertical_timeline .paso__titulo { margin-top: var(--e-2); }
.pasos--vertical_timeline .paso__texto { max-width: 46rem; }

@media (max-width: 980px) {
  .pasos--horizontal .pasos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-6) var(--e-5);
  }
}

@media (max-width: 600px) {
  .pasos--horizontal .pasos__lista { grid-template-columns: 1fr; }
  .pasos--vertical_timeline .paso { padding-left: var(--e-5); }
}