/* ================================
   Efectos WebGL - Hero
   ================================ */

/* Ocultar SVG de filtros */
.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Fondo del hero con efecto distorsion agua */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/hero.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: url(#water-distortion);
  z-index: -1;
}

/* Canvas de humo */
#smoke-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.95;
}

/* Marco negro para tapar bordes deformados */
header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 4px #000;
  pointer-events: none;
  z-index: -1;
}