/* Lujo FX AutomatizaWPP — efectos premium
   (tilt 3D, nav cristal, zoom cinematográfico, tap scale, scroll suave).
   Marca intacta: todo usa el verde de AWPP. Acompaña a lujo-fx.js. */

/* scroll-behavior y scroll-margin-top se declaraban aqui y otra vez en
   styles.css. Se dejan solo en styles.css, que es el sistema. */

/* ===== Tarjetas con tilt 3D (la clase la pone lujo-fx.js solo en desktop) ===== */
.lujo-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* El nav "cristal" se declaraba aqui con cuatro !important y ganaba siempre a
   nav.site-nav.scrolled de styles.css, que hace exactamente lo mismo con la
   paleta de la marca. Dos sistemas para un solo efecto: se queda el del
   sistema de diseno y este parche desaparece. */

/* ===== Zoom cinematográfico lento en imágenes dentro de tarjetas/figuras ===== */
.card img, .feature img, figure img, .case-box img, .post-card img {
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.card:hover img, .feature:hover img, figure:hover img, .case-box:hover img, .post-card:hover img {
  transform: scale(1.05);
}

/* ===== Escala al pulsar (tap) en botones y enlaces-botón ===== */
@media (pointer: fine) {
  a.btn:active, button:active, .btn-primary:active, .btn-ghost:active,
  .nav-cta:active, .cta-email:active, .plan-cta:active, .cta-demo-link:active {
    transform: scale(0.97) !important;
    transition: transform .12s ease !important;
  }
}

/* ===== Respiración de brillo en CTAs primarios (sutil, 4s) ===== */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .nav-cta, .cta-email {
    animation: lujo-respira 4s ease-in-out infinite;
  }
  /* Una animacion gana en cascada a cualquier regla normal, asi que esta
     respiracion anulaba por completo el box-shadow de :hover del boton
     primario y del CTA del nav: pasabas el raton y no cambiaba nada.
     Hay que retirar la animacion (pausarla no basta: aunque se congele,
     sigue ganando a la regla :hover) para devolver el control al sistema. */
  .btn-primary:hover, .btn-primary:focus-visible,
  .nav-cta:hover, .nav-cta:focus-visible,
  .cta-email:hover, .cta-email:focus-visible {
    animation: none;
  }
  @keyframes lujo-respira {
    0%, 100% { box-shadow: 0 12px 40px rgba(25, 195, 176, 0.30); }
    50%      { box-shadow: 0 16px 52px rgba(25, 195, 176, 0.48); }
  }
}

/* En print, nada de esto aplica */
@media print {
  html { scroll-behavior: auto; }
  nav.site-nav, nav.site-nav.scrolled { background: none !important; box-shadow: none !important; }
}