/* Lujo FX AutomatizaWPP — efectos premium portados de la web Yohann Le Gac
   (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 suave global + margen para anclas bajo nav fija ===== */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

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

/* ===== Nav cristal al hacer scroll (clase puesta por lujo-fx.js) ===== */
.lujo-nav-scrolled {
  background: rgba(7, 10, 8, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(25, 195, 176, 0.14) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: background .5s ease, box-shadow .5s ease, border-color .5s ease;
}

/* ===== 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;
  }
  @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; }
  .lujo-nav-scrolled { background: none !important; box-shadow: none !important; }
}