/* AULÓPOLIS — Integración visual de las escenas Three.js del hero
   Pega esto en el <style> global de tu presentación (o en un .css importado). */

/* Canvas de fondo a pantalla completa dentro de cada sección */
.reveal section canvas.three-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Scrim de legibilidad: separa el canvas del texto sin apagar la escena */
.reveal section[id^="three-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 15, 0.55);
  backdrop-filter: blur(1px);
  z-index: 1;
  pointer-events: none;
}

/* El contenido (título, texto, CTA) siempre por encima del canvas + scrim */
.reveal section[id^="three-"] > *:not(canvas) {
  position: relative;
  z-index: 2;
}