/* Overlay con gradiente vertical (transparente arriba -> oscuro abajo) */
#video-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradiente suave: permite ver el video pero da contraste al texto blanco */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Activar solo en móviles */
@media screen and (max-width: 767px) {
  #video-overlay {
    display: block;
  }
  
  /* Eliminamos las sombras agresivas ya que el gradiente hace el trabajo */
  h1, h2, h3, h4, h5, h6, p, span, div, a {
    text-shadow: none;
  }
}

/* Asegurar z-index correcto */
#myVideo {
  z-index: -1;
}

body > *:not(#myVideo):not(#video-overlay) {
  position: relative;
  z-index: 2;
}