/* ============================================================
   STICKY — "Como funciona" como demo fija (todas las pantallas)
   El usuario scrollea, la escena queda pineada y va rotando
   pantalla + explicacion. En desktop: copy izquierda + ventana
   derecha. En mobile: copy arriba + ventana abajo, en columna.
   Sin JS: los pasos se apilan de forma normal (fallback).
   ============================================================ */

/* Fallback (sin JS): pasos apilados */
.proc-sticky { position: relative; }
.pstep {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  align-items: center; padding: 48px 0;
}
.proc-markers, .proc-progress { display: none; }

/* Version pineada: cuando JS confirma (fx-sticky-ready) */
html.fx-sticky-ready .proc-sticky { height: 460vh; }
html.fx-sticky-ready .proc-pin {
  position: sticky; top: 0; min-height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
}
html.fx-sticky-ready .proc-pin-grid { width: 100%; }
html.fx-sticky-ready .proc-steps {
  position: relative;
  height: min(560px, 74vh);
}
html.fx-sticky-ready .pstep {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 0.9fr 1.15fr;
  gap: clamp(36px, 5vw, 84px); align-items: center;
  padding: 0;
  opacity: 0; transform: translateY(26px);
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(.2,.7,.3,1), transform 0.55s cubic-bezier(.2,.7,.3,1);
}
html.fx-sticky-ready .pstep.is-active {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: 0.12s;
}
html.fx-sticky-ready .pstep .proc-shot-wrap,
html.fx-sticky-ready .pstep .proc-shot-wrap .window { height: 100%; }

html.fx-sticky-ready .proc-markers {
  display: grid; grid-template-rows: repeat(5, 1fr);
  position: absolute; inset: 0; z-index: -1;
}
html.fx-sticky-ready .proc-progress {
  display: flex; gap: 8px;
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
}
.proc-progress i {
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--line-2); transition: background 0.3s;
}
.proc-progress i.is-active { background: var(--primary); }

/* ---- Mobile: misma demo pineada, en columna ---- */
@media (max-width: 980px) {
  html.fx-sticky-ready .proc-pin {
    align-items: flex-start;
    padding: 86px 0 44px; /* deja libre la nav sticky (70px) */
  }
  html.fx-sticky-ready .proc-steps {
    height: min(640px, calc(100dvh - 150px));
  }
  html.fx-sticky-ready .pstep {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 14px;
  }
  html.fx-sticky-ready .pstep .proc-step-copy { max-width: none; }
  html.fx-sticky-ready .pstep .proc-step-copy h3 {
    font-size: clamp(22px, 6vw, 30px); margin-top: 6px;
  }
  html.fx-sticky-ready .pstep .proc-step-copy p {
    font-size: 14.5px; margin-top: 8px;
  }
  html.fx-sticky-ready .pstep .ps-feats { margin-top: 12px; }
  html.fx-sticky-ready .pstep .proc-shot-wrap { flex: 1; min-height: 0; }
  html.fx-sticky-ready .proc-progress { bottom: 16px; }
  html.fx-sticky-ready .proc-progress i { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html.fx-sticky-ready .pstep { transition: none; transform: none; }
}