/* Establece el margen y el relleno en 0 y la altura en 100% para el body y el html, de esta forma tenemos la imagen de inicio ocupando el 100% de la pantalla */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  color: rgb(91, 92, 93);
}
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;
}
}


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



/* --------------------------------------------------------------------------------- CARRUSEL DE IMAGENES ------------------------------------------------------------------------------------------------------------ */
/* Establecer un alto fijo para el carrusel */
.carousel-inner {
  height: 30vh; /* 20% de la altura de la vista */
}

/* Hacer que las imágenes se ajusten al contenedor del carrusel */
.carousel-item img {
  object-fit: fill; /* Esto hará que la imagen se estire para llenar completamente el contenedor. */
  height: 100%; /* Esto asegura que la imagen ocupe todo el alto del contenedor. */
  width: 100%; /* Esto asegura que la imagen ocupe todo el ancho del contenedor. */
}

/* Estilos para las leyendas (descripciones) de las imágenes del carrusel */
.carousel-caption {
  background: rgba(0,0,0,0.6); /* Esto añadirá un fondo oscuro a los textos para mejorar su visibilidad. */
}

.carousel-caption h5 {
  font-size: 2em; /* Esto hará que los títulos sean más grandes. */
}

.carousel-caption p {
  font-size: 1.2em; /* Esto hará que los párrafos sean más grandes. */
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 767px) {
  .carousel-inner {
    height: 25vh; /* En dispositivos móviles, hacer que el carrusel ocupe un poco más de espacio para mejorar la visibilidad */
  }
}











/*----------------------------------------------------------------------------------------------------Estilos sección DESTINOS-------------------------------------------------------------------------------------------*/
.container2 {
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.titulo_principal{
  padding-top: 3rem;
  padding: 2rem 0;
  text-align: center;
  font-weight: 700;
}

.row { /* Estilo para la fila de paquetes */
  width: 85%;
  margin: auto;
  display: flex; /* Mostrar los paquetes en línea */
  flex-wrap: wrap; /* Permitir que los paquetes se ajusten a la pantalla */
    /* Estilos para las imágenes en los paquetes de viajes */
}

.col {
  width: 25%;
  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: 200px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
/* Al pasar el mouse sobre la imagen, se aplica una transformación que la hace un 10% más grande */
.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 */
}
.paquete-info {
  padding: 1rem;
}
.paquete-info 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;
  margin: 1em;
  
}
.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;
}


  

@media (min-width: 568px) and (max-width: 1050px) {
.col {
  flex: calc(50% - 2rem);
}
.footer h3{
  font-size: 14px
}
.footer p{
  font-size: 13px
}
}

@media (max-width: 720px) {
  .col {
    flex: 100%;
  }
  .footer p{
    font-size: 11px
  }
  .footer h3{
    font-size: 12px
  }
}




/*---------------------------------------------------------------------------------- FOOTER PIE DE PÁGINA -------------------------------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {  
  /* 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 {
    flex-direction: column; /* Los elementos hijos se muestran en una sola columna */
    text-align: center; /* El texto se centra horizontalmente */
    align-items: center;
    }
    .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 {
      
      display: flex;
      align-items: center;  
    }
    .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:auto;
      
    }
    .footer-social img {
      max-width: 100%;
      height: auto; /* Agregado para hacer la imagen responsive */
      margin-left: 30px;
    }
  }