/* Vista previa: fases del proceso con desplazamiento fijo (sticky) y arco numerado */
html:has(.pf) { overflow-x: clip; }
.pf-intro { padding: clamp(110px, 16vh, 160px) var(--gutter) clamp(24px, 4vh, 48px); max-width: 1500px; margin: 0 auto; background: var(--bg); }
.pf-intro .lp__lead { max-width: 20ch; }
.pf-intro p { max-width: 62ch; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.pf { position: relative; height: 420svh; margin-inline: calc(50% - 50vw); background: color-mix(in srgb, var(--indigo-velvet) 5%, var(--bg)); --p: 0; }
.pf__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); padding: 84px var(--gutter) 28px 0; box-sizing: border-box; }
.pf__arc { position: relative; align-self: stretch; }
.pf__arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf__track { fill: none; stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 1.5; }
.pf__prog { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
.pf__node { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pf__dot { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); font-family: var(--font-display); font-weight: 600; font-size: 14px; color: color-mix(in srgb, var(--fg) 70%, transparent); transition: transform .5s cubic-bezier(.34,1.42,.5,1), background .35s, color .35s, border-color .35s, box-shadow .35s; }
.pf__node.on .pf__dot { transform: scale(1.45); background: var(--indigo-ink); color: var(--white); border-color: var(--fg); box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--indigo-ink) 55%, transparent); }
.pf__stage { position: relative; align-self: stretch; }
.pf__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(28px); pointer-events: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.pf__panel.past { transform: translateY(-28px); }
.pf__panel.on { opacity: 1; transform: none; pointer-events: auto; }
.pf__eyebrow { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--burnt-peach); }
.pf__title { margin: 0 0 14px; font-family: var(--font-body); font-weight: 800; letter-spacing: -.04em; line-height: .98; font-size: clamp(44px, 6vw, 96px); color: var(--fg); }
.pf__sum { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; color: var(--fg); max-width: 28em; }
.pf__txt { margin: 0 0 20px; max-width: 34em; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.6; color: color-mix(in srgb, var(--fg) 74%, transparent); }
.pf__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf__chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); background: var(--bg); font-size: 13px; font-weight: 600; color: var(--fg); }
.pf__chipst { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; color: color-mix(in srgb, var(--fg) 55%, transparent); }
.pf__vis { position: relative; align-self: center; aspect-ratio: 4 / 5; max-height: calc(100svh - 150px); width: 100%; justify-self: center; }
.pf__img { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; background: var(--indigo-ink); opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform .9s cubic-bezier(.2,.8,.2,1); box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--indigo-ink) 45%, transparent); }
.pf__img.on { opacity: 1; transform: none; }
.pf__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf__count { position: absolute; left: 18px; bottom: 16px; z-index: 2; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--indigo-ink); font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.pf-end { padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(48px, 8vh, 90px); text-align: center; background: var(--bg); }
@media (max-width: 900px) {
  .pf { height: 380svh; }
  .pf__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 84px var(--gutter) 18px; align-items: start; }
  .pf__arc { height: 56px; align-self: start; display: flex; }
  .pf__arc svg { display: none; }
  .pf__node { position: static; width: auto; height: auto; transform: none !important; flex: 1; display: grid; place-items: center; }
  .pf__dot { position: static; }
  .pf__stage { min-height: 0; }
  .pf__vis { aspect-ratio: 16 / 9; max-height: 26svh; }
  .pf__panel { justify-content: flex-start; }
  .pf__title { font-size: clamp(36px, 11vw, 56px); }
}
@media (prefers-reduced-motion: reduce) { .pf__panel, .pf__img, .pf__dot { transition: none; } }
.pf-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.pf-intro .plan { margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.pf__btn { margin-top: 22px; align-self: flex-start; font-size: 15px; }
@media (max-width: 900px) { .pf-intro { grid-template-columns: minmax(0, 1fr); } .pf-intro .plan { justify-self: stretch; max-width: none; } .pf__btn { margin-top: 14px; } }