/* Progressive enhancement keeps all six original descriptions readable. */
.method-timeline [hidden] { display: none !important; }
.method-timeline:not(.is-ready) :is(.timeline-kicker, .timeline-symbol, .timeline-route, .timeline-progress) { display: none; }
.method-timeline { --timeline-line: #5C896133; }
.timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.timeline-toolbar > p { display: inline-flex; align-items: center; gap: 9px; color: var(--prado); font-size: 10px; letter-spacing: .12em; }
.timeline-toolbar > p > span { color: var(--acero); font-size: 13px; letter-spacing: 0; margin: 0; }
.timeline-toolbar > p > .status-dot { width: 7px; height: 7px; flex-shrink: 0; }
.timeline-controls { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.timeline-controls .icon-button { width: 42px; height: 42px; flex-shrink: 0; background: transparent; border-color: var(--timeline-line); }
.timeline-controls .icon-button:disabled { opacity: .3; }
.timeline-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 15px; background: transparent; border: 1px solid #5C896150; border-radius: 999px; color: var(--acero); font: inherit; font-size: 11px; cursor: pointer; }
.timeline-play:disabled { cursor: default; }
.timeline-play-mark { width: 9px; height: 10px; border-left: 7px solid var(--prado); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.is-playing .timeline-play-mark { border: 0; border-left: 2px solid var(--prado); border-right: 2px solid var(--prado); }
.method-timeline :is(button, .process):focus-visible { outline: 3px solid var(--arandano); outline-offset: 5px; }

.method-timeline.is-ready .timeline-stage { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 24px; min-height: 310px; padding: 40px 42px; background: var(--perla); border: 1px solid var(--timeline-line); border-radius: 8px 76px 8px 8px; }
.method-timeline.is-ready .process { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; overflow: visible; margin: 0; padding: 0; min-width: 0; }
.method-timeline.is-ready .process > li:nth-child(n) { position: relative; grid-area: 1 / 1; display: flex; align-items: center; min-width: 0; padding: 0; border: 0; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity 700ms ease, transform 800ms cubic-bezier(.16,1,.3,1), visibility 700ms; }
.method-timeline.is-ready .process > li.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.method-timeline.is-ready .step-copy { max-width: 43ch; }
.method-timeline.is-ready .timeline-kicker { display: block; font-size: 10px; color: var(--forest); letter-spacing: .13em; margin-bottom: 24px; }
.method-timeline.is-ready .process h3 { font-size: clamp(37px, 4.2vw, 58px); font-weight: 500; letter-spacing: -.05em; line-height: 1.08; }
.method-timeline.is-ready .process p { max-width: 39ch; font-size: 14px; line-height: 1.85; margin: 18px 0 0; color: var(--acero); }
.method-timeline.is-ready :is(.step-number, .timeline-symbol) { display: none; }

.timeline-route { display: block; width: 100%; height: auto; overflow: visible; }
.timeline-route .route-base { fill: none; stroke: #5C896147; stroke-width: 1.4; }
.timeline-route .route-pulse { fill: none; stroke: var(--prado); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .08 .92; stroke-dashoffset: 1; }
.is-running .timeline-route .route-pulse { animation: timeline-signal 4600ms linear infinite; }
.timeline-route [data-station] { fill: var(--perla); stroke: #5C896188; stroke-width: 1.5; transition: fill 650ms ease, stroke 650ms ease, stroke-width 650ms ease; }
.timeline-route [data-station].is-complete { fill: var(--menta); stroke: var(--prado); }
.timeline-route [data-station].is-active { fill: var(--prado); stroke: var(--menta); stroke-width: 6; }
.timeline-route .route-halo { fill: none; stroke: #5C89611A; stroke-width: 1; }
.timeline-route text { fill: var(--prado); font: 10px Arial, Helvetica, sans-serif; letter-spacing: .08em; }
@keyframes timeline-signal { to { stroke-dashoffset: 0; } }

.timeline-progress { height: 2px; overflow: hidden; background: #5C89611A; margin-top: 15px; border-radius: 2px; }
.timeline-progress-fill { display: block; width: 100%; height: 100%; background: var(--prado); transform: scaleX(0); transform-origin: left; }
.timeline-navigation { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 13px 9px 10px; margin-top: 13px; }
.timeline-navigation > button { position: relative; display: flex; align-items: center; flex-direction: column; gap: 10px; min-width: 0; background: transparent; border: 0; border-radius: 4px; padding: 10px 4px 12px; color: var(--acero); font: inherit; cursor: pointer; }
.timeline-navigation > button::before { content: ''; position: absolute; left: 0; right: 0; top: 27px; border-top: 1px solid #5C896140; }
.timeline-navigation > button:first-child::before { left: 50%; }
.timeline-navigation > button:last-child::before { right: 50%; }
.timeline-navigation > button > span:first-child { position: relative; display: grid; place-items: center; width: 35px; height: 35px; font-size: 10px; border: 1px solid #5C896150; border-radius: 50%; background: var(--perla); transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.timeline-navigation > button > strong { max-width: 100%; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.timeline-navigation > button[aria-current='step'] > span:first-child { background: var(--forest); color: var(--perla); box-shadow: 0 0 0 5px #5C896112; }
.timeline-navigation > button.is-complete > span:first-child { background: var(--menta); }
.timeline-navigation > button:hover > span:first-child { border-color: var(--arandano); }
.timeline-meter { display: none; }

html.motion-paused .method-timeline :is(.process > li, [data-station]) { transition: none !important; }
html.motion-paused .method-timeline .route-pulse { animation: none !important; }
@media (max-width: 760px) {
  .timeline-toolbar { gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
  .timeline-toolbar > p { flex-basis: 100%; }
  .timeline-controls { width: 100%; }
  .timeline-play { margin-right: auto; }
  .method-timeline.is-ready .timeline-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; padding: 30px 26px 24px; border-top-right-radius: 48px; }
  .method-timeline.is-ready .process { min-height: 190px; }
  .method-timeline.is-ready .process h3 { font-size: 40px; }
  .method-timeline.is-ready .process p { font-size: 13px; max-width: 43ch; }
  .method-timeline.is-ready .timeline-kicker { margin-bottom: 22px; }
  .timeline-route { width: min(100%, 440px); max-height: 210px; justify-self: center; }
  .timeline-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 5px; margin-top: 9px; }
  .timeline-navigation > button:nth-child(3n+1)::before { left: 50%; }
  .timeline-navigation > button:nth-child(3n)::before { right: 50%; }
}
@media (max-width: 360px) {
  .timeline-play { padding: 10px 11px; font-size: 10px; }
  .timeline-controls { gap: 6px; }
  .method-timeline.is-ready .timeline-stage { padding: 27px 20px 20px; }
  .method-timeline.is-ready .process { min-height: 190px; }
  .method-timeline.is-ready .process h3 { font-size: 35px; }
  .timeline-navigation > button > strong { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .method-timeline *, .method-timeline *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}