@import url('/styles/simple.css');
@import url('/styles/fuel-tokens.css');
.s-fuel-como { background: var(--bg); color: var(--ink); }
.s-fuel-como .s-simple__volanta { display: flex; justify-content: space-between; color: var(--muted); }
.s-fuel-como .s-fuel-como__bajada { max-width: 560px; margin: 0; color: var(--muted); text-wrap: pretty; }
.s-fuel-como .s-simple__step p { color: var(--muted); }
.s-fuel-como .s-simple__steps::before { background: var(--line); }
.s-fuel-como .s-simple__steps::after { background: var(--ink); }
.s-fuel-como .s-simple__node { border-color: var(--ink); background: var(--bg); }
.s-fuel-como .s-simple__node.is-on { background: var(--ink); }
.s-fuel-como .s-simple__odo { color: var(--ink); }
.s-fuel-como .s-fuel-como__index { display: block; margin-bottom: var(--s16); color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .s-fuel-como .s-simple__strip { transform: translateY(-1.8em); transition: none; }
  .s-fuel-como .s-simple__node { background: var(--ink); }
}
/* El índice pequeño ocupa 32 px antes del H3; el nodo acompaña su centro. */
.s-fuel-como .s-simple__steps { --node-y: calc(32px + var(--h1) * var(--h1-leading) / 2); }
/* El contador entra entero al leer el primer paso, incluso bajo la cabecera. */
.s-fuel-como .s-simple__stage { bottom: calc(3 * var(--s64)); }

@media (max-width: 1199px) {
  .s-fuel-como .s-simple__volanta { gap: var(--s16); }
}
@media (max-width: 809px) {
  .s-fuel-como { grid-template-columns: minmax(0, 1fr) 64px; gap: 0 var(--s12); }
  .s-fuel-como .s-simple__steps { --node-y: calc(32px + 28px * var(--h1-leading) / 2); gap: var(--s64); }
  .s-fuel-como .s-simple__step-title { font-size: 28px; text-wrap: normal; }
  .s-fuel-como .s-simple__stage { font-size: 56px; }
  .s-fuel-como .s-simple__cta { width: calc(100% + 76px); max-width: none; }
  .s-fuel-como .s-fuel-como__bajada { font-size: 18px; }
}