/* ============================================================================
   Integración del FONDO CÓSMICO 3D (Three.js) en el sitio Trinity Pro.
   Coloca los dos canvas del fondo, fijos detrás de todo el contenido, y oculta
   el fondo espacial anterior (imágenes por sección + estrellas CSS + hero-canvas)
   para que el nuevo fondo cósmico se vea a través de cada sección.
   ============================================================================ */

/* Los dos lienzos del fondo cósmico: fijos, a pantalla completa, detrás de todo */
#cosmicCanvas2d,
#cosmicCanvasGl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
#cosmicCanvas2d { z-index: 0; } /* capa 2D: cielo, estrellas, nebulosas, galaxias */
#cosmicCanvasGl { z-index: 0; } /* capa WebGL: planetas con textura */

/* Oculta el fondo anterior por secciones (imágenes NASA + estrellas + halos) */
.space-bg-wrapper,
#hero-canvas {
  display: none !important;
}

/* Las secciones deben ser transparentes para dejar ver el fondo cósmico detrás.
   (Antes tenían halos radiales translúcidos propios del fondo viejo.) */
.hero-section,
.challenge-section,
.services-section,
.portfolio-section,
.quotes-section {
  background: transparent !important;
}

/* El footer es el único bloque sin posición/z-index, por lo que el canvas fijo
   (z-index:0) lo tapaba. Lo elevamos por encima del fondo cósmico para que se vea
   el footer de contacto. (Conserva su propio fondo sólido.) */
footer {
  position: relative;
  z-index: 1;
}