/* Establece el margen y el relleno en 0 y la altura en 100% para el body y el html */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  header {
    width: 100%;
    
    position: relative;
  }
  ul{
    list-style: none;
  }
  
  
  
  
  /*-------------------------------------------------------------------------- VIDEO DE PORTADA ----------------------------------------------------------------------------- */
  
  #videoContainer {/* Establece la posición, el ancho, la altura y el desbordamiento para el contenedor del video */
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  }
  #fullscreenVideoDesktop, #fullscreenVideoTablet, #fullscreenVideoMobile {/* Establece la posición, la parte superior, la izquierda, el ancho, la altura y ajusta el video para cubrir todo el espacio disponible */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  #fullscreenVideoTablet, #fullscreenVideoMobile {/* Oculta los videos para tablet y móvil por defecto */
  display: none;
  }
  @keyframes pulse {
  0% {
  transform: scale(1); /* Comienza la animación con el botón en su tamaño original */
  }
  50% {
  transform: scale(1.1); /* Aumenta el tamaño del botón en un 10% en la mitad de la duración de la animación */
  }
  100% {
  transform: scale(1); /* Retorna el botón a su tamaño original al final de la animación */
  }
  }
  #hideVideoButton {
  position: absolute; /* Posiciona el botón en relación a su contenedor más cercano con posición relativa */
  bottom: 20px; /* Coloca el botón a 20px del borde inferior del contenedor */
  right: 20px; /* Coloca el botón a 20px del borde derecho del contenedor */
  width: 50px; /* Establece el ancho del botón */
  height: 50px; /* Establece la altura del botón */
  background-color: transparent; /* Establece un fondo transparente para el botón */
  border: 3px solid #e75373; /* Establece un borde de 3px de ancho y color #e75373 */
  border-radius: 50%; /* Redondea los bordes del botón, creando un círculo */
  font-size: 18px; /* Establece el tamaño de fuente del texto en el botón */
  cursor: pointer; /* Cambia el cursor a una mano cuando pasa por encima del botón */
  display: flex; /* Establece un contenedor flexible para centrar el contenido del botón */
  justify-content: center; /* Centra horizontalmente el contenido del botón */
  align-items: center; /* Centra verticalmente el contenido del botón */
  overflow: hidden; /* Oculta el contenido que sobresale del área del botón */
  animation: pulse 2s infinite; /* Aplica la animación "pulse" con una duración de 2 segundos y la repite infinitamente */
  }
  #hideVideoButton:before {
  content: ''; /* Agrega contenido vacío antes del botón */
  width: 12px; /* Establece el ancho del pseudo-elemento */
  height: 12px; /* Establece la altura del pseudo-elemento */
  border-left: 3px solid #e75373; /* Establece un borde izquierdo de 3px de ancho y color #e75373 */
  border-bottom: 3px solid #e75373; /* Establece un borde inferior de 3px de ancho y color #e75373 */
  transform: rotate(-45deg); /* Rota el pseudo-elemento -45 grados para formar la flecha */
  }
  @media (max-width: 1024px) {
  #fullscreenVideoDesktop {
  display: none;
  }
  #fullscreenVideoTablet {
  display: block;
  }
  }
  @media (max-width: 767px) {
  #fullscreenVideoTablet {
  display: none;
  }
  #fullscreenVideoMobile {
  display: block;
  }
  }
  
  
  
  /* ------------------------------------------------------------------------MENU DE NAVEGACIÓN------------------------------------------------------------------------- */
  /*-------------------------------------------------------------------------PANTALLA ORDENADOR---------------------------------------------------------------------------*/
  @media (min-width: 1200px) {  
  
  /*-------------------------------------------------------------------- Estilos para el header---------------------------------------------------------------------- */
                              
  /* Clase proporcionada por Bootstrap para crear una barra de navegación estilizada */
  .navbar {
  /* Establece el color de fondo para la barra de navegación */
  background-color: #f8f9fa;
  }
  /* Establece el tamaño de fuente y el margen izquierdo para el título de la página */
  .navbar-brand {
  font-size: 1.5rem;
  margin-left: 0.5rem;
  width: 89%;
  }
  .logo{
  width: 14%;
  }
  .logo2{
  width: 40%;
  }
  /*boton desplegable*/
  .navbar-toggler{
  align-items:center;
  }
  /* Establece el tamaño de fuente y el margen derecho para los enlaces del menú */
  .navbar-nav .nav-link {
  font-size: 1.2rem;
  margin-right: 1rem;
  }
  /* Establece el color de fondo para el menú desplegable */
  .dropdown-menu {
  background-color: #f8f9fa;
  }
  /* Establece el tamaño de fuente para los elementos del menú desplegable */
  .dropdown-item {
  font-size: 1.2rem;
  color:rgb(91, 92, 93);
  }
  /* Oculta la flecha del menú desplegable */
  .nav-item.dropdown .nav-link.dropdown-toggle::after {
  display: none;
  }
  .usuario1{
  display: none;
  }
  /* tamaño iccono usuario*/
  .usuario{
  width: 45px;
  }
  /*oculta el inicio de sesión de pantallas grandes*/
  .nav-item d-lg-none{
  display: none;
  }
  }
  
  
  /*---------------------------------------------------------------------------PANTALLA PEQUEÑA--------------------------------------------------------------------------*/
  @media screen and (max-width: 1200px) {
  
  /* ------------------------------------------------------------------------------Barra logos---------------------------------------------------------------------------------*/
  .navbar {
  /* Establece el color de fondo para la barra de navegación */
  background-color: #f8f9fa;
  }
  /* Establece el tamaño de fuente y el margen izquierdo para el título de la página */
  .navbar-brand {
  margin-left: 0.5rem;
  width: 75%;
  }
  .logo{
    width: 24%;
  }
  .logo2{
    width: 60%;
  }
  /*boton desplegable*/
  .navbar-toggler{
  align-items:center;
  }
  /* Establece el tamaño de fuente y el margen derecho para los enlaces del menú */
  .navbar-nav .nav-link {
  font-size: 1.2rem;
  margin-right: 1rem;
  }
  /* Establece el color de fondo para el menú desplegable */
  .dropdown-menu {
  background-color: #f8f9fa;
  
  }
  /* Establece el tamaño de fuente para los elementos del menú desplegable */
  .dropdown-item {
  font-size: 1.2rem;
  color:rgb(91, 92, 93);
  }
  /* Quita la flecha del menú desplegable */
  .nav-item.dropdown .nav-link.dropdown-toggle::after {
  border: none;
  }
  .usuario1{
  width: 7%;
  margin-left: 16%;
  }
  .usuario{
  display: none;
  }
  }
  
  
  /*-----------------------------------------------------------------------Estilos sección DESTINOS-----------------------------------------------------------------------*/
     .destinos-caribe{
      box-sizing: border-box;
      font-family: 'Montserrat', sans-serif;
      margin: 0;
      padding-right: 4%;
      padding-left: 4%;
      
  
    }
    .titulo_principal{
      padding-top: 3rem;
      padding: 2rem 0;
      text-align: center;
      font-weight: 10em;
      
    }
    .col {
      display: inline;
      margin-right:10px ;
      margin-left:10px ;
      margin-bottom: 2rem;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease-in-out;
      }
    .col:hover {
      transform: translateY(-10px);
    }
    .paquete-imagen {
      width: 100%;
      height: 170px;
      object-fit: cover;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .paquete-imagen:hover {
      transform: scale(1.05); /* La propiedad "transform" cambia a "scale(1.1)" para hacer que la imagen sea un 10% más grande */
    }
    .destino-link {
      padding: 1rem;
    }
    .destino-link h3 {
  
      font-size: 1.5rem;
      font-weight: 600;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      color: #666;
      text-align: center;
    }
    .paquete-info p {
      color: #666;
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    .a_detalles {
      background: linear-gradient(to right, #f697ad, #ee6580);
      color: #fff;
      padding: 0.75rem 1rem;
      display: inline-block;
      border-radius: 5px;
      
    }
    .a_detalles:hover {
      background: linear-gradient(to right, #f697ad, #ee6580);
      color: #ee6580;
      box-shadow: 0 0 5px #ef95b8;
      text-decoration: none;
    
    }
    .a_detalles::after {
    font-weight: 600;
    margin-left: 0.5rem;
    }






/* --------------------------------------------------------------------------------- SECCIÓN FORMULARIO DE BUSQUEDA DE FECHAS --------------------------------------------------------------------------------------- */
/* Establecer una imagen de fondo */
.sección_calendario {
  background-image: url('../../../imagenes/mauricio.jpg'); /* Define la imagen de fondo del formulario */
  background-size: cover; /* Asegura que la imagen de fondo cubra todo el espacio disponible */
  background-position: center; /* Centra la imagen de fondo */
  padding: 50px 0; /* Añade un espacio en blanco de 50px arriba y abajo del formulario */
}

/* Estilos del formulario de búsqueda */
#busqueda {
  background-color: rgba(255, 255, 255, 0.8); /* Define un color de fondo blanco con cierta transparencia */
  padding: 20px; /* Añade un espacio en blanco de 20px alrededor de los elementos internos del formulario */
  border-radius: 5px; /* Redondea las esquinas del formulario */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añade una sombra suave al formulario */
  max-width: 600px; /* Limita la anchura máxima del formulario a 600px */
  margin: 0 auto; /* Centra el formulario horizontalmente */
}


/* Estilos para campos de fecha */
#desde,
#hasta {
  cursor: pointer; /* Cambia el cursor a una mano cuando se pasa por encima */
}

/* Estilos para el botón de búsqueda */
.btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;
}

/* Cambio de color al pasar el mouse sobre el botón */
.btn:hover {
  background-color: #0069d9;
  color: white;
}
/*  define los estilos para cuando se selecciona un rango de fechas en el calendario. */
.dp-highlight .ui-state-default {
  background: #484848; /* Cambia el color de fondo de las fechas seleccionadas a un gris oscuro */
  color: white; /* Cambia el color del texto de las fechas seleccionadas a blanco */
}

/*--------------------------------------------------------------------------- Estilos responsivos para dispositivos móviles ---------------------------------------------------------------------------------------*/
@media (max-width: 767px) {
  /* Aumentar el tamaño de los campos de selección y botón en móviles */
  .form-control,
  .btn {
    font-size: 18px;
  }

  /* Aumentar el tamaño de las etiquetas de los campos en móviles */
  label {
    font-size: 18px;
  }
}


#busquedasRecientes {
  background-color: #f9f9f9; /* Un color de fondo suave */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 20px auto; /* Centrar la sección en la página y darle algo de margen */
}

#busquedasRecientes h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.busquedaReciente {
  display: flex;
  justify-content: space-between; /* Espaciar los elementos uniformemente a lo largo de la línea */
  align-items: center;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px; /* Dar algo de espacio entre los elementos de la lista */
}

.busquedaReciente div {
  flex-basis: 30%; /* Cada div tomará al menos el 30% del ancho total */
}

.busquedaReciente strong {
  margin-right: 5px;
}

@media (max-width: 767px) {
  /* En pantallas pequeñas, los elementos de la lista se muestran en bloques en lugar de en línea */
  .busquedaReciente {
    flex-direction: column;
  }

  .busquedaReciente div {
    margin-bottom: 10px;
  }
}




/*----------------------------------------------------------------------------- FOOTER PIE DE PÁGINA ------------------------------------------------------------------------*/
/* Estilos del footer */
.footer {
  padding: 50px 0; /* Espacio entre los contenidos y el borde inferior */
  display: flex; /* Los elementos hijos del contenedor se muestran en línea */
  
  
}
/* Logo del footer */
.footer-logo {
  margin-right: 25px; /* Margen derecho para separar el logo de otros contenidos */
  margin-left: 25px; /* Margen derecho para separar el logo de otros contenidos */
  float:left
}
.footer-logo img {
  width: 100%; /* Ancho completo de la imagen */
  max-width: 100px; /* Ancho máximo de la imagen */
}
/* Información del footer */
.footer-info {
 
  margin-right: 40px; /* Margen derecho para separar de otros contenidos */
} 
.footer-info h3 {
  font-size: 20px; /* Tamaño de fuente */
  margin-bottom: 10px; /* Margen inferior */
}
.footer-info p {
  font-size: 16px; /* Tamaño de fuente */
  line-height: 1.5; /* Espacio entre líneas */
  margin-bottom: 10px; /* Margen inferior */
}
/* Enlaces del footer */
.footer-links {
  float:left;
 
}
.footer-links h3 {
  font-size: 20px; /* Tamaño de fuente */
  margin-bottom: 10px; /* Margen inferior */
}
.footer-links p {
  margin-bottom: 10px; /* Margen inferior para separar de otros elementos */
}
  /* -----------------------------------------------------------------------------Redes sociales del footer--------------------------------------------------------------------- */
  /* Redes sociales del footer */ 
  .footer-social {
    display: flex;
    align-items: center; 
    margin-left: 30%; /* Margen derecho para separar de otros contenidos */  
  
  }
  .footer-social p{
    float: left;
    justify-content: center; /* Agregado para centrar los elementos horizontalmente */
  }
  .footer-social a {
    display: flex; /* Los contenidos se muestran en línea */
    align-items: center; /* Los contenidos se centran verticalmente */
    justify-content: center; /* Los contenidos se centran horizontalmente */
    height: 4em; /* Altura de los contenidos */
    width: 4em; /* Ancho de los contenidos */
    background-color: #fff; /* Color de fondo */  
    margin-right: 20px;
    margin-left: 2px;
  }
  .footer-social img {
    max-width: 100%;
    height: auto; /* Agregado para hacer la imagen responsive */
  
    
  }


  @media screen and (max-width: 1200px) {
/*--------------------------------------------------------------FOOTER---------------------------------------------------------- */
.footer {
  flex-direction: column; /* Los elementos hijos se muestran en una sola columna */
  text-align: center; /* El texto se centra horizontalmente */
  align-items: center;
  }
  .footer p{}
  .footer-logo,
  .footer-info,
  .footer-links,
  .footer-social {
  margin-bottom: 50px; /* Margen inferior para separar de otros elementos */
  align-items: center;
  }
  .footer-logo {
  margin-right: 0; /* Sin margen derecho */
  }
  .logo-footer{
    width: 100px;
  }
  .footer-info {
  margin-right: 0; /* Sin margen derecho */
  
  }
 
  .footer-links {
  margin-right: 0; /* Sin margen derecho */
  }
  .footer-social p{
    padding: 0;
    display: flex; /* Agregado para mostrar los elementos hijos en línea */
    justify-content: center; /* Agregado para centrar los elementos horizontalmente */
  }
  .footer-social {
    margin-left: 0px;
  }
  .footer-social a {
    display: flex; /* Los contenidos se muestran en línea */
    align-items: center; /* Los contenidos se centran verticalmente */
    justify-content: center; /* Los contenidos se centran horizontalmente */
    height: 5em; /* Altura de los contenidos */
    width: 5em; /* Ancho de los contenidos */
    background-color: #fff; /* Color de fondo */ 
    margin:auto;
    margin-left: 1em;
    margin-left: 1em;
  }
  .footer-social img {
    max-width: 100%;
    height: auto; /* Agregado para hacer la imagen responsive */
  }
  }
  @media (max-width: 568px) {
    .footer p{
      font-size: 11px
    }
    .footer h3{
      font-size: 12px
    } .footer-social a {
    height: 3em; /* Altura de los contenidos */
    width: 3em; /* Ancho de los contenidos */
  }
  }

  @media (min-width: 568px) and (max-width: 800px) {
  
  .footer h3{
    font-size: 14px
  }
  .footer p{
    font-size: 13px
  }
 
  }