/* 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;
  }
  }
  
  





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

/* 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 */
  position: relative; /* Opcional: Cambia la posición a relative si no está establecida anteriormente */
  top: -30px; /* Ajusta la posición vertical hacia arriba */
}


/* 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;
  }
}




/*-------------------------------------------------------------------------------   INTRODUCCIÓN -------------------------------------------------------------------------- */
.destino-seleccionado {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  color: #333;
  text-align: center;
}

.destino-contenido {
  max-width: 600px;
  margin: 0 auto;
}

#titulo-destino {
  font-size: 24px;
  margin-bottom: 10px;
}

#descripcion-destino {
  font-size: 16px;
  line-height: 1.5;
}

.enlace-blog {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: transparent;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid #333;
  transition: color 0.3s ease;
}
.enlace-blog:hover {
  color: #555;
}

@media (max-width: 700px) {
  #titulo-destino {
    font-size: 20px;
    margin-bottom: 10px;
  }
  #descripcion-destino {
    font-size: 10px;
    line-height: 1.5;
  }
}










/*----------------------------------------------------------------------------- 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
  }
 
  }