/* ============================================================
   Viviana · Quiropraxia — movimiento propio
   Tres técnicas, no más:
     1. La señal que baja por el eje (encendido de vértebras)
     2. Los reveals con cascada (kit compartido)
     3. El cambio de paso de la ficha previa
   ============================================================ */

/* ---------- 1 · El encendido del eje ---------- */
/* El estado lo pone el JS con .is-on / .is-punta; acá sólo late la punta. */

@keyframes latido {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--senal), 0 0 14px 1px rgba(226,163,86,.55); }
  50%      { box-shadow: inset 0 0 0 1px var(--senal), 0 0 22px 4px rgba(226,163,86,.85); }
}
.vert.is-punta { animation: latido 2.6s ease-in-out infinite; }

/* La línea del eje se dibuja de arriba a abajo al cargar */
@keyframes trazo { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.eje-linea { transform-origin: top center; animation: trazo 1.5s cubic-bezier(.3,.75,.25,1) .15s both; }

/* ---------- 2 · Entrada del cuerpo de cada lámina ---------- */
/* El kit resuelve .m-reveal; acá sólo se ajusta el ritmo por sección. */
.cotejo .m-stagger  { --m-stagger: 70ms; }
.derivar            { --m-stagger: 65ms; }
.descenso .paso     { --m-slow: 720ms; }

/* El descenso entra desde la izquierda: cada paso se corre a su lugar */
.paso.m-reveal { transform: translate3d(-26px, 12px, 0); }
.paso.m-reveal.is-in { transform: none; }
.paso--2 { transition-delay: 60ms; }
.paso--3 { transition-delay: 120ms; }
.paso--4 { transition-delay: 180ms; }
.paso--5 { transition-delay: 240ms; }

/* ---------- 3 · El cambio de paso de la ficha ---------- */

@keyframes pasoEntra {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
.consulta-caja.is-cambiando > * {
  animation: pasoEntra .5s cubic-bezier(.2,.75,.3,1) both;
}
.consulta-caja.is-cambiando > *:nth-child(2) { animation-delay: .05s; }
.consulta-caja.is-cambiando > *:nth-child(3) { animation-delay: .09s; }
.consulta-caja.is-cambiando > *:nth-child(4) { animation-delay: .13s; }
.consulta-caja.is-cambiando > *:nth-child(5) { animation-delay: .17s; }

/* Las vértebras de la figura se encienden en cascada al elegir zona */
.columna rect.is-on { animation: vertebraEnciende .5s cubic-bezier(.2,.75,.3,1) both; }
@keyframes vertebraEnciende {
  from { fill-opacity: .26; transform: scaleX(1); }
  60%  { transform: scaleX(1.18); }
  to   { fill-opacity: 1; transform: scaleX(1); }
}
.columna rect { transform-box: fill-box; transform-origin: center; }

/* ---------- Respeto por quien no quiere movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eje-linea { animation: none; transform: none; }
  .vert.is-punta { animation: none; }
  .consulta-caja.is-cambiando > *,
  .columna rect.is-on { animation: none; }
  .paso.m-reveal { transform: none; }
}