/* =====================================================================
   PrimOffice · Fondo atmosférico continuo (premium, tipo Spline)
   ---------------------------------------------------------------------
   UNA sola atmósfera animada (canvas liviano) detrás de toda la landing.
   Reemplaza el viejo fondo por secciones (auras/cajas: ELIMINADO).
   - Secciones OSCURAS: transparentes → se ve la atmósfera (texto claro).
   - Secciones CLARAS: panel "frosted" legible cuyos bordes se funden en
     la atmósfera (texto oscuro siempre legible).
   - Un único sistema de scroll-reveal (repetible).
   - Respeta prefers-reduced-motion. No toca copy, layout ni lógica.
   El <canvas> lo inyecta js/pulido-visual.js.
   ===================================================================== */

html{background:radial-gradient(120% 95% at 50% -12%, #163463 0%, #0d1f3f 42%, #081229 72%, #060d1d 100%) fixed, #0a1224}
body{background:transparent!important}

/* ---------- ATMÓSFERA GLOBAL (capa fija única) ---------- */
#pv-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 95% at 50% -12%, #163463 0%, #0d1f3f 42%, #081229 72%, #060d1d 100%);
}
#pv-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* ---------- SECCIONES OSCURAS: dejar ver la atmósfera ---------- */
.hero,.quiz-section,.cta-section,footer{background:transparent!important}
/* El viejo fondo decorativo del hero lo reemplaza la atmósfera global */
.hero__grid,.hero__glow{display:none!important}

/* ---------- SECCIONES CLARAS: vidrio legible que se funde en la atmósfera ---------- */
.section--alt,.combos-section,#beneficios{
  background:linear-gradient(180deg,
    rgba(247,250,253,.66) 0%,
    rgba(247,250,253,.94) 13%,
    rgba(247,250,253,.94) 87%,
    rgba(247,250,253,.66) 100%)!important;
}

/* ---------- SCROLL REVEAL (único sistema, repetible) ---------- */
.pv-rv{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.pv-rv.pv-rv--left{transform:translateX(-26px)}
.pv-rv.pv-rv--right{transform:translateX(26px)}
.pv-rv.pv-rv--scale{transform:scale(.96)}
.pv-rv.pv-in{opacity:1;transform:none}

/* ---------- PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .pv-rv{opacity:1!important;transform:none!important;transition:none!important}
}