/* ============================================================
   CBD · PERFORMANCE GUARD · v1
   Cristina Beauty Designer · Luxury sin lastre
   ------------------------------------------------------------
   Problema: decenas de reglas `will-change` permanentes
   ([data-reveal], .split-char, .hero-char, [data-luxe-reveal],
   cards, palabras divididas...) promueven cientos de elementos
   a capas GPU persistentes. Resultado: explosión de memoria
   del compositor → jank, scroll trabado y crashes del renderer
   en móviles y equipos modestos.

   Solución: ninguna capa GPU permanente. GSAP/JS pueden seguir
   animando transform/opacity sin pre-promoción; el navegador
   promueve capas durante la animación y las libera después.
   Este archivo se carga AL FINAL para ganar la cascada.
   ============================================================ */

/* — 1 · Liberar promociones permanentes de capa — */
.split-char, .split-word,
.hero-char,
[data-reveal],
[data-parallax],
[data-apple-reveal],
[data-scroll-scale],
[data-luxe-reveal],
[data-luxe-tilt],
[data-luxe-parallax],
[data-luxe-section-fade],
[data-jitter-card],
[data-jitter-tilt],
[data-jitter-magnetic],
[data-jx-parallax],
[data-magnetic],
.luxe-word > span,
.magnetic, .magnetic-pro, .magnetic-pro > *, .magnetic-target,
.cbd-lift,
.card-luxury, .ext-card, .net-pillar,
.card-3d-inner, .tilt-3d .card-content, .tilt-3d .tilt-inner,
.cejas-item, .addon-luxury-card, .vip-luxury-card, .service-card, .comp-card,
.srv-x-blob, .srv-x-ext-card, .srv-x-panel, .srv-x-depil, .srv-x-addon, .srv-x-vip,
.hero-v3-chip, .hero-v3-image-clip img,
.hero-mouse-layer,
.story-track, .h-drag-track,
.cbd-pin-slide,
.luxe-mesh-blob, .jx-orb,
.count-up,
.hyperframe-section [data-hf-reveal] {
  will-change: auto !important;
}

/* El cursor (2 elementos pequeños) y el orbe sí pueden mantener
   su capa: son diminutos y se mueven en cada frame. */
.cursor-dot, .cursor-ring { will-change: transform; }

/* — 2 · Blurs decorativos gigantes: bajar el radio.
   Un blur de 60-90px sobre un elemento de cientos de px cuesta
   varias texturas GPU completas; visualmente 36px es idéntico
   en estos halos de ambiente. — */
@media (max-width: 1023px) {
  .hero-mesh,
  .luxe-mesh-blob,
  .jx-orb,
  .qs-glow,
  .moment-x-glow,
  .lux-manifesto-glow,
  .cbd-turn-glow {
    filter: blur(36px) !important;
  }
}

/* — 3 · Móvil: apagar decoración costosa que no aporta en
   pantallas pequeñas (halos flotantes de fondo + partículas). — */
@media (max-width: 767px) {
  .hero-geom-layer,
  #cbd-particle-canvas,
  #hero-mesh-canvas,
  .cursor-trail-particle,
  #cbd-orb {
    display: none !important;
  }
  /* Sombras múltiples muy profundas → una sombra elegante */
  .hero-v3-chip {
    box-shadow: 0 10px 30px rgba(69, 7, 12, 0.16) !important;
  }
}

/* — 4 · Respeto absoluto por reduced-motion — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}