/* Installation timeline. From the Instalación design.
   Reuses .reveal / .js-reveal from how-it-works.css and js/reveal.js. */

.timeline {
  background: var(--surface);
  color: var(--on-surface);
  padding-block: 48px 44px;
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.timeline__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.timeline__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-lime);
}
.timeline__eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
}

.timeline__title {
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.timeline__lead {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--on-surface-muted);
}

/* MOBILE: vertical line, one column of 44px for the dot + connector. */
.timeline__list {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.timeline__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
}
/* Stagger the reveal (5 steps, right at the cap); timing math lives in the
   shared rule in how-it-works.css. Desktop keeps this too — it layers under
   the separate scroll-scrubbed dot/line effect further down this file. */
.timeline__step:nth-child(2) { --reveal-i: 1; }
.timeline__step:nth-child(3) { --reveal-i: 2; }
.timeline__step:nth-child(4) { --reveal-i: 3; }
.timeline__step:nth-child(5) { --reveal-i: 4; }

.timeline__dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline__connector {
  flex: 1;
  width: 2px;
  margin-top: 6px;
  background: rgb(255 255 255 / 0.18);
}
.timeline__step:last-child .timeline__connector { display: none; }
/* Steps 1–2 (still gathering info) connect with a sky line. */
.timeline__step:nth-child(-n+2) .timeline__connector { background: rgb(157 196 213 / 0.4); }

.timeline__dot {
  display: block;
  flex: none;
  margin-top: 6px;
  border-radius: 50%;
}
.timeline__dot--sky { width: 16px; height: 16px; border: 2px solid var(--color-sky); background: var(--color-forest); }
.timeline__dot--plain { width: 10px; height: 10px; margin-top: 9px; background: rgb(255 255 255 / 0.4); }
.timeline__dot--milestone {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  background: var(--color-lime);
  box-shadow: 0 0 0 6px rgb(224 222 44 / 0.18);
}

.timeline__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 30px;
}
.timeline__step--plain .timeline__body { gap: 6px; }
.timeline__step--milestone .timeline__body { gap: 9px; }

.timeline__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.timeline__num {
  font-size: 1.625rem;
  font-weight: var(--fw-extralight);
  line-height: 1;
  color: var(--color-sky);
}
.timeline__step--plain .timeline__num { font-size: 1.375rem; color: rgb(255 255 255 / 0.62); }
.timeline__step--milestone .timeline__num { color: var(--color-lime); }

.timeline__badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-sky);
  color: var(--color-forest);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}
.timeline__milestone-tag {
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-lime);
}

.timeline__step-title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.timeline__step--plain .timeline__step-title { font-size: 1.1875rem; font-weight: var(--fw-semibold); }
.timeline__step--milestone .timeline__step-title { font-size: 1.375rem; line-height: 1.18; }

.timeline__step-text {
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.82);
}
.timeline__step--plain .timeline__step-text { color: rgb(255 255 255 / 0.78); }
.timeline__step--milestone .timeline__step-text { color: rgb(255 255 255 / 0.86); }

/* The "1–2 semanas" stat inside the milestone step. Number stacked above
   the sentence, not side by side — a row layout inside a narrow timeline
   column (5-across on desktop) squeezed the sentence into one word per
   line, the most visible break on the page (Andrés's feedback,
   2026-09-24). Stacked, the sentence gets the column's full width. */
.timeline__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--color-lime);
}
.timeline__stat-num {
  font-size: 2.125rem;
  font-weight: var(--fw-extralight);
  line-height: 1;
  color: var(--color-lime);
  white-space: nowrap;
}
.timeline__stat-text {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-white);
}

.timeline__close {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: 1.3125rem;
  font-weight: var(--fw-light);
  line-height: 1.35;
}

/* DESKTOP: horizontal line, 5 columns. */
@media (min-width: 900px) {
  .timeline { padding-block: 88px; }

  .timeline__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: end;
  }
  .timeline__title { line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
  .timeline__lead { max-width: 46ch; margin-bottom: 6px; font-size: 1.1875rem; line-height: 1.6; }

  .timeline__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    margin-top: 64px;
  }
  .timeline__list::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 0;
    top: 11px;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgb(157 196 213 / 0.55) 0%,
      rgb(157 196 213 / 0.55) 34%,
      rgb(224 222 44 / 0.85) 62%,
      rgb(255 255 255 / 0.18) 78%,
      rgb(255 255 255 / 0) 90%
    );
  }

  .timeline__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
  }
  .timeline__connector { display: none; }

  /* Every dot sits in a 24px box so they line up on the connector regardless of visible size. */
  .timeline__dot-col { display: block; }
  .timeline__dot { position: relative; z-index: 1; margin-top: 0; }
  .timeline__dot--sky { width: 24px; height: 24px; }
  .timeline__dot--plain {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 0;
    background: none;
    box-shadow: none;
  }
  .timeline__dot--plain::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.45);
    box-shadow: 0 0 0 6px var(--color-forest);
  }
  .timeline__dot--milestone { width: 24px; height: 24px; box-shadow: 0 0 0 7px rgb(224 222 44 / 0.2); }

  .timeline__badge,
  .timeline__milestone-tag { align-self: flex-start; }

  .timeline__num { font-size: 1.875rem; }
  .timeline__step--plain .timeline__num { font-size: 1.875rem; }
  .timeline__step-title { font-size: 1.3125rem; }
  .timeline__step--milestone .timeline__step-title { font-size: 1.4375rem; }
  .timeline__body { padding-bottom: 0; gap: 12px; }

  .timeline__stat { padding: 4px 0 4px 14px; }
  .timeline__stat-num { font-size: 2.5rem; }

  .timeline__close {
    margin-top: var(--space-16);
    padding-top: 32px;
    font-size: 1.875rem;
  }

  /* Scroll-scrubbed, not a one-shot reveal: js/reveal.js tracks how close
     .timeline__list is to the vertical center of the viewport and writes
     that as --draw (0-1) on the element and --dot-in (0-1, per dot) on each
     node, every scroll frame. The line and nodes build up as the section
     approaches center and undo again as you scroll past or back away, in
     either direction — see the comment in reveal.js for the math. The
     fallback value (1) is what shows with no JS, reduced motion, or on
     mobile (this whole block is desktop-only): fully drawn, same as before. */
  .timeline__list::before {
    transform: scaleX(var(--draw, 1));
    transform-origin: left;
  }
  .timeline__dot {
    opacity: var(--dot-in, 1);
    transform: scale(calc(0.4 + 0.6 * var(--dot-in, 1)));
  }
  /* Step 4 (milestone): grows a little more than the others and its lime
     halo widens as it comes into focus — the install-in-WhatsApp moment. */
  .timeline__step:nth-child(4) .timeline__dot {
    transform: scale(calc(0.4 + 0.75 * var(--dot-in, 1)));
    box-shadow: 0 0 0 calc(5px + 9px * var(--dot-in, 1)) rgb(224 222 44 / 0.2);
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .timeline__list::before { transform: none; }
  .timeline__dot { opacity: 1; transform: none; }
  .timeline__step:nth-child(4) .timeline__dot { box-shadow: 0 0 0 7px rgb(224 222 44 / 0.2); }
}