/* =============================================
   MOTION — Microinteracciones globales (Etapa 1B)
   Hover refinado de botones + magnetic sutil
   via custom properties, sin pelearse con CSS base.
   ============================================= */

/* ─── Buttons: hover + magnetic via custom props ───
   El transform compone tres fuentes:
     --btn-mag-x/y  → magnetic JS (vive en motion.js)
     --btn-hover-y  → elevación CSS al hover/active
   Cada estado solo cambia sus vars; el formula
   compuesto se aplica en :hover/:active para ganarle
   a la translateY(-2px) que vive en variables.css. */
.btn--primary,
.btn--azul,
.btn--naranja,
.btn--outline,
.btn--outline-dark,
.nav__cta {
  --btn-mag-x: 0px;
  --btn-mag-y: 0px;
  --btn-hover-y: 0px;
  --btn-transform: translate3d(
    var(--btn-mag-x),
    calc(var(--btn-hover-y) + var(--btn-mag-y)),
    0
  );
  transform: var(--btn-transform);
  transition:
    transform    var(--dur-fast) var(--ease-out-expo),
    box-shadow   var(--dur-fast) var(--ease-out-expo),
    background   var(--dur-fast) ease,
    color        var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

/* Re-declarar transform en :hover y :active con la misma
   formula compuesta. Same specificity (0,2,0) que
   variables.css, pero motion.css carga después → wins. */
.btn--primary:hover,  .btn--primary:active,
.btn--azul:hover,     .btn--azul:active,
.btn--naranja:hover,  .btn--naranja:active,
.btn--outline:hover,  .btn--outline:active,
.btn--outline-dark:hover, .btn--outline-dark:active,
.nav__cta:hover,      .nav__cta:active {
  transform: var(--btn-transform);
}

/* ─── Hover states con elevation + color glow ─── */
.btn--primary:hover {
  --btn-hover-y: -3px;
  background: var(--c-rojo-dark);
  border-color: var(--c-rojo-dark);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 6px  12px rgba(227, 11, 23, 0.45);
}
.btn--azul:hover {
  --btn-hover-y: -3px;
  background: var(--c-azul-dark);
  border-color: var(--c-azul-dark);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 6px  12px rgba(4, 113, 154, 0.45);
}
.btn--naranja:hover {
  --btn-hover-y: -3px;
  background: var(--c-naranja-dark);
  border-color: var(--c-naranja-dark);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 6px  12px rgba(243, 146, 4, 0.45);
}
.btn--outline:hover {
  --btn-hover-y: -3px;
  background: var(--c-white);
  color: var(--c-dark);
  box-shadow: var(--depth-3);
}
.btn--outline-dark:hover {
  --btn-hover-y: -3px;
  background: var(--c-dark);
  color: var(--c-white);
  box-shadow: var(--depth-3);
}
.nav__cta:hover {
  --btn-hover-y: -2px;
  background: var(--c-rojo);
  color: var(--c-white);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.10),
    0 4px 10px rgba(227, 11, 23, 0.40);
}

/* ─── Active state (press) — más rápido, menos elevación ─── */
.btn--primary:active,
.btn--azul:active,
.btn--naranja:active,
.btn--outline:active,
.btn--outline-dark:active,
.nav__cta:active {
  --btn-hover-y: -1px;
  transition-duration: var(--dur-instant);
}

/* ─── Arrow icon: el .btn .arrow ya se mueve por variables.css,
       refino easing para sincronizar con la transition del botón. ─── */
.btn .arrow {
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

/* =============================================
   REDUCED MOTION
   Sin elevación ni magnetic. El cambio de color
   y la transition rápida quedan — siguen siendo
   feedback de interacción, no movimiento decorativo.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .btn--primary,
  .btn--azul,
  .btn--naranja,
  .btn--outline,
  .btn--outline-dark,
  .nav__cta {
    --btn-mag-x: 0px;
    --btn-mag-y: 0px;
    --btn-hover-y: 0px;
    transform: none;
  }
  .btn--primary:hover,  .btn--primary:active,
  .btn--azul:hover,     .btn--azul:active,
  .btn--naranja:hover,  .btn--naranja:active,
  .btn--outline:hover,  .btn--outline:active,
  .btn--outline-dark:hover, .btn--outline-dark:active,
  .nav__cta:hover,      .nav__cta:active {
    transform: none;
  }
}