/* ==========================================================================
   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; }

/* El degradado y el grano se sobredimensionan 220px por lado.
   Sin esto, al desplazarlos con el scroll se despegan del borde y asoma un
   hueco: el desplazamiento supera al margen en cuanto bajas más de una
   pantalla. El parallax limita el movimiento a ±200px, así que con 220px de
   margen nunca se agota.

   Los halos NO se sobredimensionan: son círculos con blur y estirarlos a
   pantalla completa borraría el fondo marfil. */
.bg__gradient {
  position: fixed;
  inset: -220px;
  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%);
}

/* Sin opacidad de conjunto: cada trazo trae la suya, calibrada por el
   diseñador. Una opacidad aquí las multiplicaría y apagaría el dibujo. */
.bg__lines {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* El viewBox va en unidades de píxel del viewport, así que el grosor del
   trazo ya es el real; non-scaling-stroke lo mantiene si algún grupo se
   escala. */
.bg__lines path,
.bg__lines circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}

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