/* ==========================================================================
   Fondo de marca. Cuatro capas fijas detrás de todo el contenido:
   degradado marfil, dos halos turquesa difuminados, líneas orgánicas SVG
   y una capa de grano. La deriva lenta y el parallax los aplica
   js/modules/parallax.js sobre estos mismos elementos.
   ========================================================================== */

.bg { pointer-events: none; }

.bg__gradient {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--bg-page);
}

.bg__glow {
  position: fixed;
  z-index: -2;
  border-radius: var(--radius-full);
  filter: var(--blur-glow);
  pointer-events: none;
}

.bg__glow--top {
  top: -60px;
  right: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(138, 210, 230, .5), transparent 70%);
}

.bg__glow--mid {
  top: 44%;
  left: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(66, 150, 180, .22), transparent 70%);
}

.bg__lines {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: .7;
  pointer-events: none;
}

.bg__grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: soft-light;
  background-image: var(--grain-url);
}