/* ===== Fondos animados del hero (Vanta) =====
   El canvas lo inyecta js/fondo-hero.js como primer hijo de la sección hero.
   Se apoya en que el hero sea el contexto de posicionamiento.

   El mismo script mide la luminancia del color de fondo del efecto y marca el
   hero con .fondo-oscuro o .fondo-claro, para que el texto se adapte solo. */

.con-fondo-efecto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.fondo-efecto {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fondo-efecto canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* En el hero el efecto reemplaza al color de fondo: sin esto, el degradado
   verde seguiría pintando debajo del canvas. En las demás secciones NO se hace,
   porque cada una conserva su color (crema, blanco, verde del cierre) y el
   efecto se dibuja encima sobre un canvas transparente. */
.fondo-en-hero { background: none; }

/* Todo lo que no sea el canvas va por encima. Importante: solo se toca el
   z-index. Poner position aquí rompería .hero-media y .hero-overlay, que son
   absolutos y colapsan si pasan a relative. */
.con-fondo-efecto > *:not(.fondo-efecto) {
  z-index: 1;
}

/* Los contenedores estáticos (el .qs-inner de las secciones de texto)
   necesitan posicionarse para que el z-index tenga efecto. */
.con-fondo-efecto > .qs-inner,
.con-fondo-efecto > .blog-inner,
.con-fondo-efecto > .donation-intro,
.con-fondo-efecto > .donation-presets,
.con-fondo-efecto > .donation-flexible {
  position: relative;
  z-index: 1;
}

/* ---- Texto según el brillo del efecto ----
   Solo aplica a los heros de texto: los heros con foto ya tienen su overlay
   oscuro y su texto en crema, y no dependen del efecto. */
.qs-hero.con-fondo-efecto.fondo-oscuro .qs-title,
.qs-hero.con-fondo-efecto.fondo-oscuro .qs-text {
  color: var(--crema);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.qs-hero.con-fondo-efecto.fondo-claro .qs-title {
  color: #1d1d1b;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6);
}

.qs-hero.con-fondo-efecto.fondo-claro .qs-text {
  color: #3a3a37;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .fondo-efecto { display: none; }
}