/* ============================================================
   FX3D MOBILE — capa de rendimiento para móvil/tablet
   Última en la cascada: apaga lo caro (blur, sombras enormes,
   animaciones perpetuas, tilt CSS) sin tocar el estilo desktop.
   Activación: pointer: coarse O viewport <= 820px.
   ============================================================ */

/* ---------- 1. Animaciones perpetuas decorativas: OFF ---------- */
@media (pointer: coarse), (max-width: 820px) {
  /* Barrido de brillo de títulos (repinta constantemente) */
  .lusive-cats__title::after,
  .section-heading h2::after { animation: none !important; content: none; }

  /* Logo/CTA/trust flotante: pulsos infinitos */
  .premium-hero__trust i,
  .premium-footer__glow,
  [class*="fx-cta-pulse"],
  [class*="fx-trust-float"] { animation: none !important; }

  /* Anillo giratorio perpetuo del icono hero */
  .hero-orbit::after { animation: none !important; }

  /* Entrada palabra a palabra: mostrar sin animar */
  .fx3d-word { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* Marquee de pagos: mostrar estático y en varias líneas */
  .payment-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }

  /* Estrellas del tema nativo (si las hubiera) */
  #snow { display: none !important; }
}

/* ---------- 2. Blur / glassmorphism: reducir en móvil ---------- */
@media (pointer: coarse), (max-width: 820px) {
  header.component { background: rgba(6, 9, 13, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .theme-background--animated.theme-background--aurora .theme-background-effects,
  .theme-background--animated.theme-background--spotlight .theme-background-effects { animation: none !important; }
}

/* ---------- 3. Sombras y glows enormes: versión ligera ---------- */
@media (pointer: coarse), (max-width: 820px) {
  .review-card,
  .feature-card,
  .lusive-cat,
  .catalog-mega,
  .exit-offer__dialog,
  #fx3d-top { box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important; }

  .premium-hero__glow { filter: none; width: 340px; height: 340px; }
}

/* ---------- 4. Tilt/parallax CSS en hover: no existen en táctil ---------- */
@media (pointer: coarse) {
  .fx3d, .fx3d-max-tilt, .lusive-game { will-change: auto !important; transform: none !important; }
  .fx3d-glare, .fx3d-edge { display: none !important; }
  .fx3d-layer { transform: none !important; }
  /* Tiles de juego: sin capas 3D en táctil (el arte plano ya es correcto) */
  .lusive-game__art { transform: none !important; transition: none !important; }
  .lusive-game::after { display: none !important; }
  .lusive-game.is-tilting .lusive-game__tag,
  .lusive-game.is-tilting .lusive-game__stock,
  .lusive-game.is-tilting .lusive-game__cta,
  .lusive-game.is-tilting .lusive-game__name { transform: none !important; }
}

/* ---------- 5. Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .payment-track, .fx3d-word { animation: none !important; }
}

/* ============================================================
   6. content-visibility: auto — render diferido de secciones largas
   El navegador no pinta lo que está fuera del viewport: scroll y
   primer render mucho más rápidos en móvil. La estimación de alto
   (contain-intrinsic-size) evita saltos de scrollbar; "auto"
   recuerda el alto real tras el primer render.

   Excluido a propósito (se romperían o miden mal si están ocultos):
   - carruseles Splide (.product-review-carousel, feedback grid con marquee)
   - secciones con sticky interno o targets de ancla (#support-page)
   - componentes con medición Alpine en carga (buybox, carrito)
   ============================================================ */
@media (pointer: coarse), (max-width: 820px) {
  .faq-premium,
  .premium-feedbacks,
  .sa-features,
  .sa-steps,
  .sa-stats,
  .why-us-section,
  .payments-section,
  .premium-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
  }
}