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

}