@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
body, html {
    font-family: "Rubik", sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black; /* Fondo negro */
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
}
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1); /* Fondo blanco transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que el preloader esté encima de todo */
    transition: opacity 1s ease; /* Transición suave del preloader */
}
.preloader img {
    width: 100px; /* Tamaño de la imagen del preloader */
    height: auto;
}
.hidden {
    display: none; /* Oculta el contenido hasta que la página esté completamente cargada */
}
.popup-container {
    position: fixed;
    width: auto;
    max-width: 500px; /* Ancho máximo */
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    z-index: 999; /* Asegura que esté encima del carrusel */
}
.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-content img.logo {
    width: 50%;
    height: auto;
    margin-bottom: 20px;
}
.button-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}
.button-group .btn {
    width: 100%;
    padding: 10px;
	background-color: rgba(236,231,157,0.70);
    border: none;
    border-radius: 5px;
    color: black;
    text-align: center;
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}
.button-group .btn:hover {
    background-color: #9BDADD; /*efecto de botones principales tras pasar el mouse*/
}
.dropdown-menu {
    width: 100%;
    border-radius: 5px;
    padding: 0;
    background-color: #9BDADD; /* Fondo del menú desplegable */
}
.dropdown-menu .dropdown-item {
    padding: 10px;
    color: black;
    background-color: #79E7EC; /* Fondo de las opciones */
    border-radius: 5px;
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}
.dropdown-menu .dropdown-item:hover {
    background-color: #9BDADD;
}
.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Altura completa de la vista */
    overflow: hidden;
    opacity: 0; /* Oculta el carrusel inicialmente */
    transition: opacity 0.6s ease; /* Transición suave al mostrar el carrusel */
    z-index: 1; /* Asegura que esté encima del pop-up */
}
.carousel-inner {
    transition: transform 0.6s ease; /* Transición suave al cambiar diapositivas */
}
.carousel-item {
    float: left;
    width: 100%; /* Ancho de cada diapositiva */
    height: 100%;
    overflow: hidden; /* Evita el desbordamiento de contenido */
    position: relative; /* Permite posicionar el degradado */
}
.carousel-item img {
    max-width: none; /* Restablece el máximo ancho */
    width: 100vw; /* Ancho completo de la ventana */
    height: 1080px; /* Mantiene la proporción de la altura */
    object-fit: cover; /* Cubre todo el espacio disponible */
}
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    z-index: 1; /* Asegura que el degradado esté encima de la imagen */
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 10px 0;
    z-index: 1000; /* Asegura que el footer esté encima del carrusel */
}
footer img {
    width: 150px; /* Ajusta el tamaño de la imagen del footer */
    height: auto;
}
/* h1 y h2 para modificar los títulos*/
		h1 {
            margin: 0; /* Elimina los márgenes predeterminados del <h2> */
            color: lightgoldenrodyellow;
            font-size: 23px;
            text-transform: uppercase;
            text-shadow: 1px 1px 15px #17A2A9;
        }
        .btn h2 {
            margin: 0; /* Elimina los márgenes predeterminados del <h2> */
            color: black;
            font-size: 18px;
            text-transform: uppercase;
            /*text-shadow: 1px 1px 10px white;*/
        }
/**/
.main-header { /*Esto es para modificar el tamaño del header de arriba*/
    height: 60px;
    background-color: #79E7EC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    width: 100%;
    z-index: 10000;
    top: 0;
}
.header-logo {
    height: 40px;
}
.header-nav {
    display: flex;
    gap: 15px;
}
.header-nav .nav-list {
    display: flex;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-nav .nav-btn { /*Modificar el efecto de desvanecimiento del header*/
    color: white;
	font-size: 18px; /*tamaño de la fuente del header*/
    text-decoration: none;
    padding: 19px 35px; /*tamaño de costados de los botones del header*/
    transition: background-color 0.3s;
}
.header-nav .nav-btn:hover {
    background-color: #53A4A8;
    height: 15px; /* Establece una altura máxima de 25px */
}
.menu-icon {
    display: none;
    height: 20px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .popup-container {
        padding: 50px;
        width: 90%;
    }

    .button-group .btn {
        flex: 1 1 100%; /* Los botones del pop up */
        margin: 3px 3px;
    }

    .carousel-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Ajusta la altura según necesites */
    }

    .carousel {
        max-height: 100%; /* Ajusta el ancho máximo del carousel */
    }

    .carousel-inner {
        text-align: center; /* Centra los elementos internos del carousel */
    }

    .carousel-item img {
        max-hegiht: 100%; /* Asegura que las imágenes no se desborden */
        width: auto; /* Ajusta automáticamente la altura */
		height: 100vh;
    }

    .overlay-gradient {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    }

	.header-logo {
        height: 40px;/* Ajusta el tamaño del logo a 40px */
    }
	
    .main-header { /* Es el menú celeste */
        height: 50px; /* Aumenta la altura del encabezado a 50px */
    }

    .header-nav .nav-list {
        flex-direction: row; /* Asegura que los botones estén en una fila */
        justify-content: center; /* Centra los elementos de la lista */
        width: 100%;
    }
	
	
    .header-nav.visible {
        display: flex;
		height: 50px;
    }
    .header-nav {
        display: none;
        flex-direction: row; /* Cambia a fila para una disposición horizontal */
        justify-content: center; /* Centra los botones horizontalmente */
        position: absolute;
        top: 50px;
        left: 0;
        background-color: #53A4A8;
        width: 100%;
        padding: 0px 0; /* Ajusta el padding para mejor apariencia */
    }

    .header-nav .nav-btn { /*esto es para el efecto de desvanecimiento aumentar/disminuir*/
        flex: 1; /* Permite que los botones se expandan igualmente */
		font-size: 15px; /*tamaño de la fuente del header*/
		display:flex;
        text-align: center; /* Centra el texto de los botones */
        background-color: #53A4A8; /* Fondo inicial */
        color: white; /* Color del texto */
        height: 50px; /* Altura máxima de 25px */
        padding: 15px 35px; /* Ajusta el padding para mejor apariencia */
        margin: 0; /* Elimina cualquier margen para asegurar que no haya espacios */
        transition: background-color 0.3s, height 0.3s; /* Transición suave para color y altura */
    }
    .header-nav .nav-btn:hover { /*esto es para aumentar o disminuir el tamaño de los botones en versión móvil*/
        background-color: rgba(236,231,157,0.70); /* Fondo al hacer hover */
        height: 50px; /* Mantén la altura máxima de 25px al hacer hover */
        padding: 15px 35px; /* Asegura que el padding se mantenga durante el hover */
    }

    .menu-icon {
        display: block;
		height: 25px;
    }
	/* h1 y h2 para modificar los títulos*/
		h1 {
            margin: 0; /* Elimina los márgenes predeterminados del <h2> */
            color: lightgoldenrodyellow;
            font-size: 23px;
            text-transform: uppercase;
            text-shadow: 1px 1px 15px #17A2A9;
        }
        .btn h2 {
            margin: 0; /* Elimina los márgenes predeterminados del <h2> */
            color: black;
            font-size: 18px;
            text-transform: uppercase;
            /*text-shadow: 1px 1px 10px black;*/
        }
/**/
}