/* Roadmap · recipe canvas-quiet · variantes: horizontal (default), timeline.
   Bubble "now" en --recipe-accent (patagonia con peso); done en accent;
   axis progress fill en accent; lemon highlight para "now". */

section.slide.s-roadmap {
  background: var(--recipe-surface);
  color: var(--recipe-ink);
  display: flex; flex-direction: column; justify-content: center;
}
.s-roadmap .eb {
  font-family: var(--font-mono); font-size: 22px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--recipe-accent);
}
.s-roadmap h2 {
  font-family: var(--font-display); font-size: 120px; line-height: 0.95;
  margin: 22px 0 56px; letter-spacing: -0.01em;
}

/* Horizontal · steps alternan arriba/abajo de la línea. */
.s-roadmap .track { position: relative; padding: 280px 0; }
.s-roadmap .track .axis {
  height: 4px;
  background: color-mix(in srgb, var(--recipe-ink) 20%, transparent);
  position: relative;
}
.s-roadmap .track .axis .done {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--recipe-accent);
}
.s-roadmap .steps {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: grid;
}
.s-roadmap .step {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 20px;
}
.s-roadmap .step::before {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--recipe-surface);
  border: 4px solid color-mix(in srgb, var(--recipe-ink) 30%, transparent);
  transform: translate(-50%, -50%);
}
.s-roadmap .step.done::before {
  background: var(--recipe-accent);
  border-color: var(--recipe-accent);
}
.s-roadmap .step.now::before {
  background: var(--recipe-em);
  border-color: var(--recipe-em);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--recipe-em) 20%, transparent);
}

.s-roadmap .step:nth-child(odd)  { padding-bottom: 18px; justify-content: flex-end; }
.s-roadmap .step:nth-child(even) { padding-top: 18px;    justify-content: flex-start; }

.s-roadmap .step .q {
  font-family: var(--font-mono); font-size: 22px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.s-roadmap .step.done .q { color: var(--recipe-accent); }
.s-roadmap .step.now  .q { color: var(--recipe-em); }
.s-roadmap .step:not(.done):not(.now) .q { opacity: 0.5; }
.s-roadmap .step .t {
  font-family: var(--font-display); font-size: 28px;
  line-height: 1.05; margin-top: 6px; letter-spacing: -0.005em;
}
.s-roadmap .step .d {
  font-family: var(--font-editorial); font-style: italic;
  font-size: 22px; line-height: 1.3; opacity: 0.7;
  margin-top: 4px; max-width: 24ch;
}
.s-roadmap .legend {
  margin-top: 64px; display: flex; gap: 36px;
  font-family: var(--font-mono); font-size: 18px;
  letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.6;
}
.s-roadmap .legend span::before { content: '●'; margin-right: 8px; }
.s-roadmap .legend .a::before { color: var(--recipe-accent); }
.s-roadmap .legend .b::before { color: var(--recipe-em); }
.s-roadmap .legend .c::before { color: color-mix(in srgb, var(--recipe-ink) 30%, transparent); }

/* Timeline · vertical con bubbles · mismo recipe canvas-quiet. */
.s-roadmap.timeline .eb { color: var(--recipe-accent); }
.s-roadmap.timeline h2 { font-size: 120px; }
.s-roadmap.timeline .tl { position: relative; padding-left: 0; }
.s-roadmap.timeline .tl::before {
  content: ''; position: absolute;
  left: 48px; top: 26px; bottom: 26px; width: 4px;
  background: color-mix(in srgb, var(--recipe-ink) 18%, transparent);
  transform: translateX(-50%);
}
.s-roadmap.timeline .item {
  display: flex; gap: 48px; align-items: flex-start; margin-bottom: 44px;
}
.s-roadmap.timeline .item:last-child { margin-bottom: 0; }
.s-roadmap.timeline .item .bubble {
  width: 96px; height: 96px; border-radius: 50%;
  color: var(--recipe-ink);
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
}
.s-roadmap.timeline .item .txt {
  padding-top: 22px;
  font-family: var(--font-ui); font-size: 26px; line-height: 1.35;
}