/* CF UI · Pasos con scroll · requiere pasos-scroll.js. Sin JS (o con pantalla estrecha) cada paso lleva su imagen debajo del texto. */
.cf-ss{--cf-ss-accent:#2a62e0;--cf-ss-line:#d9e0ea;--cf-ss-muted:#5a6a7d;--cf-ss-on:#fff;--cf-ss-bg:#fff;--cf-ss-top:12vh}
.cf-ss__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,6vw,56px)}
.cf-ss__step{position:relative;display:grid;gap:18px;padding-left:56px}
.cf-ss__step::before{counter-increment:cf-ss;content:counter(cf-ss);position:absolute;left:0;top:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cf-ss-bg);border:2px solid var(--cf-ss-line);color:var(--cf-ss-muted);font:700 16px/1 system-ui;transition:background .35s,border-color .35s,color .35s,transform .35s,box-shadow .35s}
.cf-ss__list{counter-reset:cf-ss}
.cf-ss__step::after{content:"";position:absolute;left:18px;top:44px;bottom:-30px;width:2px;background:var(--cf-ss-line)}
.cf-ss__step:last-child::after{display:none}
.cf-ss__txt h3{margin:0 0 6px;font-size:clamp(20px,2.6vw,26px);transition:color .35s}
.cf-ss__txt p{margin:0;color:var(--cf-ss-muted);font-size:17px;line-height:1.55}
.cf-ss__vis{margin:0}
.cf-ss__vis img{display:block;width:100%;height:auto}
/* con JS y pantalla ancha: texto a la izquierda y una imagen fija a la derecha que cambia con el paso */
@media (min-width:900px){
  .cf-ss.is-on .cf-ss__list{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:clamp(32px,5vw,72px);row-gap:0}
  .cf-ss.is-on .cf-ss__step{display:contents}
  .cf-ss.is-on .cf-ss__txt{grid-column:1;position:relative;padding:calc(var(--cf-ss-top) * 0.5) 0 calc(var(--cf-ss-top) * 3) 56px;min-height:34vh}
  .cf-ss.is-on .cf-ss__vis{grid-column:2;grid-row:1 / span var(--cf-ss-n);align-self:start;position:sticky;top:var(--cf-ss-top);opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .45s,visibility 0s .45s}
  .cf-ss.is-on .cf-ss__step.is-active .cf-ss__vis{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s}
  /* el número y la línea van pegados al texto, no al paso (que ahora no tiene caja) */
  .cf-ss.is-on .cf-ss__step::before,.cf-ss.is-on .cf-ss__step::after{content:none}
  .cf-ss.is-on .cf-ss__txt::before{counter-increment:cf-ss;content:counter(cf-ss);position:absolute;left:0;top:calc(var(--cf-ss-top) * 0.5);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cf-ss-bg);border:2px solid var(--cf-ss-line);color:var(--cf-ss-muted);font:700 16px/1 system-ui;transition:background .35s,border-color .35s,color .35s,transform .35s,box-shadow .35s;z-index:1}
  .cf-ss.is-on .cf-ss__txt::after{content:"";position:absolute;left:18px;top:calc(var(--cf-ss-top) * 0.5 + 44px);bottom:0;width:2px;background:var(--cf-ss-line)}
  .cf-ss.is-on .cf-ss__step:last-child .cf-ss__txt::after{display:none}
  .cf-ss.is-on .cf-ss__step.is-done .cf-ss__txt::after{background:var(--cf-ss-accent)}
  .cf-ss.is-on .cf-ss__step.is-active .cf-ss__txt::before{border-color:var(--cf-ss-accent);color:var(--cf-ss-accent);transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--cf-ss-accent) 20%,transparent)}
  .cf-ss.is-on .cf-ss__step.is-done .cf-ss__txt::before{content:"✓";background:var(--cf-ss-accent);border-color:var(--cf-ss-accent);color:var(--cf-ss-on)}
}
@media (max-width:899px){
  .cf-ss.is-on .cf-ss__step.is-active::before{border-color:var(--cf-ss-accent);color:var(--cf-ss-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cf-ss-accent) 20%,transparent)}
  .cf-ss.is-on .cf-ss__step.is-done::before{content:"✓";background:var(--cf-ss-accent);border-color:var(--cf-ss-accent);color:var(--cf-ss-on)}
  .cf-ss.is-on .cf-ss__step.is-done::after{background:var(--cf-ss-accent)}
}
@media (prefers-reduced-motion:reduce){.cf-ss__step::before,.cf-ss__txt::before,.cf-ss__vis{transition:none!important}.cf-ss.is-on .cf-ss__vis{transform:none!important}}