@import url('https://fonts.googleapis.com/css?family=Raleway:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:500&display=swap');

body {
  background-color: #171717;
  overflow: hidden;
  margin: 0;
  padding: 0;
}


/* Estilos para el loader */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  font-family: poppins;
  background-color: #202020;
  color: whitesmoke;
  font-size: 70px;
  width: 100%;
  transition: opacity 0.10s ease, visibility 0.10s ease;
}
a{
 text-decoration: none;
 color:#fff;
}
.Botonnosotro{
  border-color: #33aecc;

  background-color: transparent;
  border: 2px solid #33aecc;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;

}
.loader img {
  width: 300px;
  height: auto;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
}


.cursor {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.623);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cursor-inner {
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}



  .menu {
    display: flex;
    justify-content: flex-end; /* Alinear los elementos a la derecha */
    align-items: center;
    padding: 10px;
margin-top: -60px;
font-family: poppins;

}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    z-index: 999;

}

.menu-list li {
    font-size: 14px;
    opacity: 0.8;
}

.menu-list a {
    color: whitesmoke;
    text-decoration: none;
    padding: 10px;
    z-index: 9999;

}

.menu-list a:hover {
    color: #33aecc;
}

.hamburger-menu {
    display: none;
    font-size: 2em;
    color: white;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.boton-cerrar {
  display: none; /* Ocultar el botón de cerrar por defecto */
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  background: none;
  border: none;
  z-index: 9999; /* Asegurar que esté por encima del contenido */
}




.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin-top: -100px;

}

.content .central-image {
  margin: 20px 0;
}

.content-button {
  margin-top: 20px;
}

.boton-dorado {
  background-color: transparent;
  border: 2px solid #33aecc;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}


.boton-dorado-cerrar {
  background-color: transparent;
  border: 2px solid #33aecc;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin-left: 90%;
}

.close-menu-mobile{
  background-color: transparent;
  border: 2px solid #33aecc;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin-left: 70%;
  margin-top: 40px;

}

#silent-closing{
  display: none;
}



.secondline {
  z-index: 2;
  font-size: 30px;
  padding-top: 20px;
  font-weight: 500;
  color: rgb(255, 255, 255, .8);
  font-family: raleway;
}

.secondline span.txt-rotate.color span {
color: #33aecc;
}

.slash {
  animation-name: animateslash;
  animation-duration: .8s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}



.social-right {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: .6;


}



.social-right {
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
}


.social-right img {
  color: #33aecc;
  transition: transform 0.3s ease;
  margin: 10px;
  width: 30px; /* Ajusta el ancho de las imágenes */
  height: 30px; /* Ajusta la altura de las imágenes */

}

.social-right img:hover {
  transform: scale(1.2);
}

.social-right-mobile  {
  margin-top: 40px;
}

.social-right-mobile a {
  margin-bottom: 10px; /* Espacio entre cada enlace */
  padding: 5px;

}
.social-right-mobile img {
  width: 30px; /* Ajusta el ancho de las imágenes */
  height: 30px; /* Ajusta la altura de las imágenes */
  transition: transform 0.3s ease; /* Transición suave de 0.3 segundos en la propiedad transform */
}

.social-right-mobile img:hover {
  transform: scale(1.2); /* Zoom del 20% al pasar el mouse por encima */
}




.content.hidden {
    display: none;
  }

  .background-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1; /* Ensure it is behind all other elements */
}

.background-image {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the entire container */
object-position: center; /* Centers the image */
opacity: 0.5; /* Añade opacidad a la imagen */

}


  

@keyframes animateslash {
  0% {
    opacity: 1;
    z-index: 2;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}




#particles {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover; /* Asegúrate de que la imagen cubra todo el fondo */
}


.boton-direccion{
margin-top: 20px;
}

.container-modal-V-centered {
  display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con opacidad */
z-index: 999; /* Asegura que el modal esté encima de todo */
display: none; /* El modal está oculto por defecto */
}

.container-modal-V-centered.active {
  display: flex; /* Mostramos el modal cuando se añade la clase 'active' */
}

.container-modal-V {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 4px #33aecc;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  max-width: 80%;
  max-height: 80%;
  background-color: #000;
}

.container-modal-V::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.video-container {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  background-color: #000;
  position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  border: none;
  padding: 10px;
}

.video-container p {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  color: white;
}

.video-container:hover p {
  opacity: 1;
}


.x-cerrar{
color: white;
margin-top: 10px;
top: 10px;
margin-left: 60%;
cursor: pointer;
font-size: 57px;

}

.x-cerrar:hover{
  color: #cc9933;

}

.anteriorD,
.siguienteI {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 57px;
  cursor: pointer;

}

.anteriorD {
  left: 100px;
}

.siguienteI {
  right: 96px;
}

.anteriorD:hover {
  color: #33aecc;
}

.siguienteI:hover {
  color: #33aecc;
}



.button-container {
  margin-top: 40px;
  display: flex;
  gap: 20px;
}


.control1{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #33aecc;
  color: rgb(0, 0, 0);
  font-size: 23px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: 2px solid #33aecc;

}

.control2{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #33aecc;
  color: rgb(0, 0, 0);
  font-size: 23px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: 2px solid #33aecc;
}



#control-hidden{
display: none;
}





/* Estilos básicos para el modal */
.modal-ws {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 400px;
  margin-top: 150px;
  z-index: 999; /* Asegura que el modal esté encima de todo */

}

.modal-content-whatSapp {
  background-color: black; /* Fondo oscuro semi-transparente */
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  text-align: center;
  border-radius: 10px;
  
}








  .cerrar-modal{
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    padding: 10px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    float: right;
    cursor: pointer;
    
    }
    
    
    .cerrar-modal:hover{
      color:#cc9933;
    }






#title-modal{
  font-family: poppins;
  font-weight: 800;
  
}

#message-area{
  color:white;
  font-family: poppins;
  font-size: 14px;
  margin: 30px;
  
}

.message-fade {
  color:white;
  opacity: 0;
  animation: fade-in 2s ease-in-out forwards;
  animation-fill-mode: forwards; /* Mantiene la opacidad final */
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}




/*Whatsapp Button Modal*/
.whatsapp-button {
  background-color: #33aecc; /* Verde de WhatsApp */
  color: white;
  padding: 15px 20px;
  border: none;
  border-radius: 50px; /* Borde redondeado */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Animación de hover */
}

.whatsapp-button:hover {
  background-color: #33aecc; /* Verde más oscuro al pasar el cursor */
}

.whatsapp-button i {
  font-size: 24px; /* Tamaño del icono */
  margin-right: 10px; /* Espacio entre el icono y el texto */
}

.whatsapp-button span {
  font-size: 16px; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
}








.active-link {
  background-color:#ffffff38;
  border-radius: 10px;

  }
  
  
 
    #barra-navegacion {
        display: flex;
        justify-content: right;
        align-items: center;
        padding: 10px 20px;
        color: #fff;
        margin-top: -70px;

    }

    .enlaces-navegacion {
        display: flex;
    }

    .enlaces-navegacion a {
        color: white;
        text-decoration: none;
        padding: 10px 10px;
        transition: background 0.3s;
        font-family: poppins;
        opacity: .6;
        text-transform: uppercase;
        font-size: 14px;
    }

    .enlaces-navegacion a:hover {
        color: #33aecc;
        border-radius: 10px;

    }

    .boton-menu {
        font-size: 30px;
        color: white;
        display: none;
    }



    

    /* Estilos para el menú hamburguesa */
    @media (max-width: 768px) {
      .boton-menu {
          display: block;
      }

      .enlaces-navegacion {
          position: fixed;
          width: 100%;
          height: 100vh;
          backdrop-filter: blur(30px);
          top: 0;
          left: -100%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transition: left 0.3s ease;
          background-color:blur(30px)  rgba(33, 32, 32, 0.103);
          -webkit-backdrop-filter: blur(20px); /* Soporte para Safari */
          backdrop-filter: blur(20px);
          z-index: 9999;

      }

      .enlaces-navegacion a {
          display: block;
          width: 88%;
          text-align: center;
          padding: 20px;
          z-index: 9999;
          color: white;


      }

      .enlaces-navegacion a:hover, .enlaces-navegacion a.active {
        background-color:#ffffff38;
        color: #33aecc;
        border-radius: 10px;

    }

      #verificar:checked ~ .enlaces-navegacion {
          left: 0;
      }

      .boton-cerrar {
          display: block;
          position: absolute;
          top: 20px;
          right: 20px;
          font-size: 30px;
          color: white;
          background: none;
          border: none;
      }


    

    body.menu-open {
        overflow: hidden;
    }
  }

  /* Ocultar el botón de cerrar por defecto */
  .boton-cerrar {
      display: none;
  }

  /* Mostrar el botón de cerrar cuando el menú está abierto */
  #verificar:checked ~ .enlaces-navegacion .boton-cerrar {
      display: block;
  }




@media screen and (max-width: 768px) {

  

  .content {
    margin-top: 0;
  }

 

    .content.mobile-hidden {
      display: none;
    }

    .hamburger-menu {
      display: block;
  }
  
  .menu-list {
      width: 100%; /* Ancho del menú en móviles */
      height: 100vh;
      transition: left transform 1.5s ease-in-out; /* Transición de desplazamiento */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translateX(-100%);
      background-color:blur(30px)  rgba(33, 32, 32, 0.103);
              -webkit-backdrop-filter: blur(20px); /* Soporte para Safari */
              backdrop-filter: blur(20px);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      line-height: 6;
  }
  
  
  
  .menu-list.visible {
    transform: translateX(0);
  }
  
  .menu-list li{
    width: 100%;
    text-align: center;
    color: white;
  }
  
  .close-menu-mobile {
    display: block;
  }
  
  .menu {
    justify-content: flex-end;
  }
  
  .menu-list {
    display: none;
  }
  
  
  
  .menu-list li.active {
    background-color: #88888841;
  }
  
  .menu-list a:hover {
    color: #33aecc
  
  }
  
  
  
  .menu-list.visible {
    display: flex;
  }
  
  .hamburger-menu.hidden {
    display: none;
  }
  
  .boton-cerrar.visible {
    display: block;
  }
  
  
  

 

/* Estilos para el video dentro del modal en dispositivos móviles */
.video-container {
  max-width: auto;
  max-height: auto;
  width: auto; /* Permitimos que el video se ajuste automáticamente */
  height: auto; /* Permitimos que el video se ajuste automáticamente */
  background-color: transparent; /* Hacemos el fondo transparente */
  border: none; /* Quitamos el borde */
  padding: 0; /* Quitamos el padding */
  position: relative;
}

.video-container video {
  width: 100%;
  height: auto;
  border: none;
  padding: 0;
}

.x-cerrar {
  font-size: 24px; /* Reducimos el tamaño del botón de cerrar */
  margin-top: 5px; /* Ajustamos el margen superior */
  margin-left: 64%;

}



/* CSS para el fondo oscuro del modal */
.container-modal-V-centered {
cursor: pointer; /* Hacemos que el fondo oscuro sea clicleable */
}



.anteriorD,
.siguienteI {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  color: #ff5e00;
  font-size: 18px;
  cursor: pointer;

}

.anteriorD {
  left: -10%;
}

.siguienteI {
  right: -10%;
}

.anteriorD:hover {
  color: #33aecc;
}

.siguienteI:hover {
  color: #33aecc;
}

}