/* VisionPass — capa de movimiento (complemento a vp.css, no lo reemplaza)
   Cargar DESPUÉS de vp.css. Todo respeta prefers-reduced-motion. */

/* 1. Barra de progreso de lectura */
.vp-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, var(--c-brand-dark), var(--c-brand), #d9a8f0);
  transform-origin: left; transform: scaleX(0);
  pointer-events: none; will-change: transform;
}

/* 2. Escalonado entre tarjetas hermanas (el JS asigna --vp-d) */
.vp-reveal { transition-delay: var(--vp-d, 0ms); }

/* 3. Pasos: línea que se dibuja conectando 1 → 2 → 3 */
.vp-steps { position: relative; }
.vp-steps::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--sp-6) + 24px - 1px);   /* centro del círculo numérico */
  top: calc(var(--sp-6) + 48px); bottom: calc(var(--sp-6) + 48px);
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--c-brand), rgba(145,23,191,.35));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1100ms cubic-bezier(.22,.61,.36,1) 250ms;
}
.vp-steps.is-drawn::before { transform: scaleY(1); }
.vp-step { position: relative; z-index: 1; }
.vp-step__num { position: relative; transition: background 300ms, color 300ms, box-shadow 300ms; }
.vp-step.is-visible .vp-step__num {
  animation: vpStepOn 700ms cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--vp-d, 0ms) + 250ms);
}
@keyframes vpStepOn {
  0%   { box-shadow: 0 0 0 0 rgba(145,23,191,.45); }
  60%  { background: var(--c-brand); color: var(--c-on-dark); }
  100% { box-shadow: 0 0 0 14px rgba(145,23,191,0); background: var(--c-brand); color: var(--c-on-dark); }
}

/* 4. Calculadora: flash suave en la fila que cambió */
@keyframes vpFlash {
  0%   { background: rgba(145,23,191,.22); }
  100% { background: transparent; }
}
.vp-flash { animation: vpFlash 650ms ease-out both; border-radius: 6px; }
#vph-calc [data-out] { font-variant-numeric: tabular-nums; transition: color 200ms; }
#vph-calc [data-out="dif"] { display: inline-block; }
.vp-calc__result { transition: opacity 180ms; }
.vp-calc__result.is-updating { opacity: .85; }

/* 5. Plan destacado: un pulso, una sola vez, al entrar */
@keyframes vpPulse {
  0%   { box-shadow: 0 1px 0 rgba(237,227,204,.75) inset, 0 16px 44px rgba(145,23,191,.14), 0 0 0 0 rgba(145,23,191,.35); }
  100% { box-shadow: 0 1px 0 rgba(237,227,204,.75) inset, 0 16px 44px rgba(145,23,191,.14), 0 0 0 22px rgba(145,23,191,0); }
}
.vp-plan--featured.is-visible { animation: vpPulse 1300ms cubic-bezier(.22,.61,.36,1) 500ms 1; }

/* 6. Micro-interacciones */
.vp-card__arrow { display: inline-block; transition: transform 200ms cubic-bezier(.22,.61,.36,1); }
.vp-card:hover .vp-card__arrow { transform: translateX(5px); }
.vp-btn--primary:hover { transform: translateY(-2px); }
.vp-btn--primary:active { transform: translateY(0); transition-duration: 60ms; }
.vp-plan__price { font-variant-numeric: tabular-nums; }
.vp-nav a { position: relative; }
.vp-nav a::after {
  content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: 4px; height: 2px;
  background: var(--c-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.vp-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 960px) { .vp-nav a::after { display: none; } }

/* 7. Botón VisionPass Cloud: brillo que recorre una vez al cargar y en hover */
.vp-btn--glow { position: relative; overflow: hidden; }
.vp-btn--glow::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); animation: vpShine 2400ms ease-in-out 1200ms 1;
}
.vp-btn--glow:hover::before { animation: vpShine 900ms ease-in-out 1; }
@keyframes vpShine { 0% { left: -60%; } 100% { left: 130%; } }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .vp-progress { display: none; }
  .vp-steps::before { transform: none; transition: none; }
  .vp-reveal { transition-delay: 0ms; }
  .vp-step.is-visible .vp-step__num { animation: none; background: var(--c-brand); color: var(--c-on-dark); }
}