.header {
    position: relative;
    width: 100%;
    height: 100vh; /* Altura completa de la pantalla */
    overflow: hidden; /* Evita que el video se desborde */
}


.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra completamente el contenedor */
    z-index: -1; /* Coloca el video detrás del contenido */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.726); /* Negro semitransparente (50% de opacidad) */
    z-index: 0; 
}

#inicio {
    position: relative;
    z-index: 10; /* Mantiene el contenido encima del video y la capa */
}

#animatedDiv {
    position: relative;
    transform: translateX(100%); /* Comienza fuera de la pantalla, hacia la derecha */
    opacity: 0; /* Invisible al principio */
    animation: slideIn 0.5s ease-in-out forwards; /* Duración de 1 segundo, animación suave */
  }
  
  /* Animación: deslizar de derecha a izquierda */
  @keyframes slideIn {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0); /* Termina en su posición original */
      opacity: 1; /* Aparece completamente */
    }
  }

  #animatedDiv2 {
    position: relative;
    transform: translateY(100%); /* Comienza fuera de la pantalla, hacia la derecha */
    opacity: 0; /* Invisible al principio */
    animation: slideIn 0.5s ease-in-out forwards; /* Duración de 1 segundo, animación suave */
  }
  
  /* Animación: deslizar de derecha a izquierda */
  @keyframes slideIn {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0); /* Termina en su posición original */
      opacity: 1; /* Aparece completamente */
    }
  }


  
  /* Elementos visibles al entrar en pantalla */
  .visible {
    opacity: 1;
    transform: translateY(0);
  }