/* ══════════════════════════════════════════════════════════════
   iTura studio — Component: Proceso
   Iconos de línea del kit (retícula 48 px). Un conector se dibuja
   entre pasos: vertical en móvil, horizontal en escritorio.
   ══════════════════════════════════════════════════════════════ */

.process {
  padding-block: var(--section-y);
}

.process__header { margin-bottom: var(--sp-16); }

.process__steps {
  display: grid;
  gap: var(--sp-12) var(--gutter);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  align-content: start;   /* las filas no se estiran si el paso es más alto */
}
.step__icon {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
}
.step__num {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: var(--ls-label);
  color: var(--label-color);
}
.step__title {
  margin-block: var(--sp-2) var(--sp-3);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: var(--fw-light);
  color: var(--fg);
}
.step__desc {
  max-width: 32ch;
  color: var(--fg-muted);
}

/* Conector hacia el paso siguiente */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block: 64px calc(-1 * var(--sp-12) + 16px);
  inset-inline-start: 23.5px;
  width: 1px;
  background-color: var(--line);
  transform-origin: top;
  transition: transform 1.2s var(--ease-in-out) 0.3s;
}
.js .step:not(:last-child)::after         { transform: scaleY(0); }
.js .step.visible:not(:last-child)::after { transform: none; }

/* ── Escritorio: tres columnas sobre una línea de recorrido ─── */
@media (min-width: 1024px) {
  .process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-6);
  }
  .step__icon { grid-row: auto; }
  .step__title { margin-top: calc(-1 * var(--sp-4)); }

  .step:not(:last-child)::after {
    inset-block: 23.5px auto;
    inset-inline: 72px calc(-1 * var(--gutter) + 24px);
    width: auto;
    height: 1px;
    transform-origin: left;
  }
  .js .step:not(:last-child)::after { transform: scaleX(0); }
}