/* ---------------------------------------------------------------
   Step Path (Scrolltide), sitio Marca, oct-2026.
   Ver step-path.js para el marcado (data-step-path).

   Los pasos son una grilla común; cada uno baja --spth-drop por su
   índice (escalera). El SVG se dibuja encima con las posiciones
   medidas. El trazo es una sola transición sobre una máscara; cada
   paso y su punto esperan a la línea con un transition-delay que
   pone el JS. Sin JS (o sin .is-vivo) todo se ve desde el principio.
   El apilado del celular sale de un @container, no del JS: la página
   llega ya con su forma final y no hay salto de diseño.
   Cifras (el 01, 02…) en Inter gruesa, nunca en Pirulen.
--------------------------------------------------------------- */
.spth { --spth-drop: 7.1cqw; --spth-line: var(--navy, #0b2578); --spth-c: var(--magenta, #9d0067); position: relative; width: 100%; container-type: inline-size; }
.spth__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.spth__steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 2.4cqw; margin: 0; padding: 7.5cqw 0 1cqw; list-style: none; }
.spth__step { margin-top: calc(var(--spth-drop) * var(--spth-i, 0)); }
.spth__step:nth-child(2) { --spth-i: 1; }
.spth__step:nth-child(3) { --spth-i: 2; }
.spth__step:nth-child(4) { --spth-i: 3; }
.spth__step:nth-child(5) { --spth-i: 4; }
.spth__title { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: clamp(17px, 1.9cqw, 22px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--navy, #0b2578); }
.spth__number { display: inline-block; margin-right: 0.2em; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--spth-c); }
.spth__text { margin: 0.5em 0 0; max-width: 24em; font-size: clamp(14.5px, 1.45cqw, 16px); line-height: 1.55; color: var(--texto, #3a3b4c); }

/* --- la línea ----------------------------------------------------------- */
.spth__line { stroke: var(--spth-line); stroke-width: 1.5; stroke-dasharray: 7 7; opacity: 0.45; }
.spth__draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--spth-draw, 1.8s) linear; }
.spth.is-shown .spth__draw { stroke-dashoffset: 0; }
.spth__dot { fill: var(--spth-c); }
.spth.is-vivo .spth__dot { scale: 0; transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.spth.is-vivo.is-shown .spth__dot { scale: 1; }
.spth.is-vivo .spth__step { opacity: 0; translate: 0 12px; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.spth.is-vivo.is-shown .spth__step { opacity: 1; translate: 0 0; }

/* --- apilado (celular) -------------------------------------------------- */
@container (max-width: 639px) {
  .spth__steps { grid-auto-flow: row; grid-auto-columns: auto; row-gap: 30px; padding: 6px 0 4px 34px; }
  .spth__step { margin-top: 0; }
  .spth__title { font-size: 19px; }
  .spth__text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .spth.is-vivo .spth__step, .spth.is-vivo .spth__dot, .spth__draw { transition: none; }
}