.bg-video-wrapper{
  position:absolute;
  inset:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  z-index:0;
  background:#000;
}

.bg-fallback{
  position:absolute;
  inset:0;
  background:#000;
  z-index:0;
}

.bg-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.5s ease-in-out;
  pointer-events:none;
  z-index:1;
}

.bg-image.visible{
  opacity:1;
}

/* Overlay/sombra POR CIMA das imagens (usa #hero-overlay já existente no layout) */
#hero{
  position:relative;
}

#hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.48) 35%,
    rgba(0,0,0,.54) 65%,
    rgba(0,0,0,.60) 100%
  );
}

/* Conteúdo do hero acima da sombra */
#hero > .col-1,
#hero > .col-2,
#hero .LayoutGrid,
#hero [id^="wb_"]{
  position:relative;
  z-index:3;
}

/* Evita escurecimento por trás (a sombra agora está no overlay correto) */
#wb_hero{
  background-color:transparent !important;
  background-image:none !important;
}