/* animacion header */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  z-index: 4000;
}

.dropdown-content a {
  color: black;
  padding:12px 20px;
  text-decoration: none;
  display: block;
  background-color: white;
}
.dropdown-content a:hover {
background-color: #cccccc;
color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
  margin-top: 0;
  color: white;
}

/* Ajuste para mantener el menú desplegable visible al pasar sobre él */
.dropdown:hover .dropdown-content,
.dropdown-content:hover {
  display: block;
}
/* MENU */
  .fijarbody{
    overflow: hidden;
  }
  .contenedor-menu {
    position: fixed;
    background-color: #023867;
    width: 100%;
    height: 100%;
    top: 6rem;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    z-index: 2000;
  }

  @keyframes abrir {
    0%   {left: -500px;}
    100%  {left: 0px; }
  }

  @keyframes cerrar {
    0%   {left: 0px;}
    100%  {left: -500px; }
  }
  .contenedor-menu{
    margin-top: .7rem;
  }
  .contenedor-menu a {
    text-align: center;
    display: block;
    color: #FFF;
    padding:1rem;
    background-color: #0b3ec6;
    margin: .3rem 0;
  }
  .contenedor-menu a:hover {
    cursor: pointer;
    font-weight: bold;
    background-color: #062679;
  }
  .whatsapp-float {
    color: #fff;
    border-radius: 50px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
  }
  
  .whatsapp-float img {
    border-radius: 50%;
  }

  .animated-item {
    opacity: 0; /* Inicia con opacidad cero para que no sean visibles inicialmente */
    transition: opacity 1s ease, transform 1s ease; /* Agrega una transición suave */
    transform: translateY(20px); /* Desplazamiento inicial */
  }

  /* Agrega una clase para animar los elementos cuando son visibles */
  .animate {
    opacity: 1; /* Hace que los elementos sean visibles */
    transform: translateY(0); /* Mueve los elementos a su posición final */
  }
  
  /* Animar letras */
  .typing-text {
    overflow: hidden;
  }
  
  .typing {
    animation: typing-animation 3s steps(40, end);
  }
  
  @keyframes typing-animation {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
 
  #animated-list {
    list-style: none;
    padding: 0;
  }
  
  #animated-list li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  #animated-list li.active {
    opacity: 1;
    transform: translateY(0);
  }
  #animated-list2 div {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  #animated-list2 div.active {
    opacity: 1;
    transform: translateY(0);
  }

  
  .nav-fijo{
    position: fixed;
    width: 100%;
    z-index: 50000;
  }