/* ==========================================================================
   CÓMO TRABAJAMOS (#como-funciona) — stages joined by a line
   Number of stages: --flow-steps on the <ol> (default 4).
   Desktop/tablet: horizontal · mobile: vertical. One markup for both.
   js/modules/scroll-flow.js sets:
     --flow-a / --flow-len  where the line starts and how long it is (px)
     --flow-progress        0 → 1 as the section scrolls through the viewport
     .is-active             on each step the line has reached
   Without JS the line is drawn full with CSS fallbacks.
   ========================================================================== */

.flow {
  --flow-progress: 1;
  --node: 1.6rem;
  --flow-steps: 4;
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--flow-steps), 1fr);
  column-gap: var(--grid-column-gap);
}

.js .flow {
  --flow-progress: 0;
}

/* Track + fill */
.flow::before,
.flow::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  left: var(--flow-a, calc(var(--node) / 2));
  /* fallback (no JS): from the first to the last column start */
  width: var(--flow-len, calc((100% + var(--grid-column-gap)) * (var(--flow-steps) - 1) / var(--flow-steps)));
  height: 1.5px;
  margin-top: -.75px;
  background: var(--line);
}

.flow::after {
  background: var(--ink-950);
  transform: scaleX(var(--flow-progress));
  transform-origin: left;
}

.flow__step {
  position: relative;
}

.flow__node {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--node);
  height: var(--node);
  border: 1.5px solid var(--color-border-strong);
  background: var(--bg1);
  transition: background-color .3s ease, border-color .3s ease, transform .4s var(--ease-out-quart);
}

.flow__num {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  transition: color .3s ease;
}

.flow__title {
  margin-top: var(--space-3);
}

.flow__text {
  max-width: 34rem;
  margin-top: var(--space-4);
  color: var(--muted);
  line-height: var(--leading-body);
}

.flow__step.is-active .flow__node,
.no-js .flow__node {
  border-color: var(--ink-950);
  background: var(--color-accent);
  transform: rotate(45deg);
}

.flow__step.is-active .flow__num {
  color: var(--color1);
}

@media (max-width: 1023px) {
  .flow__text {
    font-size: var(--text-small);
  }

  .flow__title {
    font-size: var(--text-h5);
  }
}

/* ---- Mobile: vertical ----------------------------------------------------- */
@media (max-width: 767px) {
  .flow {
    grid-template-columns: 1fr;
    row-gap: var(--space-7);
    padding-left: 4rem;
  }

  .flow::before,
  .flow::after {
    top: var(--flow-a, calc(var(--node) / 2));
    left: calc(var(--node) / 2);
    width: 1.5px;
    height: var(--flow-len, calc(100% - 14rem));
    margin: 0 0 0 -.75px;
  }

  .flow::after {
    transform: scaleY(var(--flow-progress));
    transform-origin: top;
  }

  .flow__node {
    position: absolute;
    top: .1rem;
    left: -4rem;
  }

  .flow__num {
    margin-top: 0;
  }

  .flow__title {
    margin-top: var(--space-2);
  }

  .flow__text {
    margin-top: var(--space-3);
  }
}