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

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

.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;
}

/* El contenido del hero siempre por encima del fondo */
.con-fondo-efecto > *:not(.fondo-efecto) {
  position: relative;
  z-index: 1;
}

/* En los heros de texto (talleres, quiénes somos, etc.) el fondo es
   oscuro, así que el texto se aclara para que siga leyéndose. */
.qs-hero.con-fondo-efecto,
.nota-hero.con-fondo-efecto {
  overflow: hidden;
}

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