* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    min-height: 100vh;
    margin: 0;
    background-size: cover;
    background-position: center;
}   

/* HEADER */

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.header::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    backdrop-filter: blur(50px);
    z-index: -1;
}

.header::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transition: .5s;
}

.header:hover::after{
    left: 100%;
}

.logo{
    background-color: white;
    border-radius: 5vh;
}

.logo img{
    margin-top: 1%;
    max-width: 110px;
    margin-bottom: 1%;
}

.navbar{
    flex-wrap: nowrap;
}

.navbar a{
    font-size: 1.15rem;
    color: #AB0000;
    text-decoration: none;
    font-weight: bolder;
    margin-left: 2.5rem;    
}

.navbar a:hover{
    color: red;
    text-decoration: underline;
}

#check{
    display: none;
}

.icons{
    right: 5%;
    position: absolute;
    font-size: 2.8rem;
    color: #AB0000;
    cursor: pointer;
    display: none;
}

/*Banner*/

.banner {
    display: flex;
    width: 100%;
    height: 45vw;
    min-height: 400px;
    margin-top: 1.5%;
}

.banner a{
    width: 10px;
    flex-grow: 1;
    opacity: .8;
    transition: 0.5s ease;
}

.banner a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 500ms ease-out;
}

/*Efecto de aparecer las letras*/

.banner a{
    position: relative;
}

.banner a .capa{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.305);
    transition: opacity 300ms ease, visibility 300ms ease;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 50px;
}

.banner a .capa h2{
    opacity: 0;
    margin: 0;
    color: white;
    font-weight: 900;
    transition: transform 300ms ease;
    transform: translateY(0);
}

.banner a:hover{
    cursor: crosshair;
    opacity: 1;
    filter: contrast(120%);
    flex-grow: 2;
}

.banner a:hover .capa{
    opacity: 1;
    visibility: visible;
}

.banner a:hover .capa h2{
    opacity: 1;
    margin-top: 44%;
}

/*Informacion*/

.fondoHorario {
    background-color: #FFEE55;
    padding: 10px 00px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.horario{
    background-color: #FFF8BC;
    padding: 30px 20px;
    text-align: center;
    gap: 10px;
    font-weight: bolder;
}

.horario h3{
    font-weight: bolder;
    text-align: center;
    justify-content: center;
}

.horario img{
    height: 111.37px;
}

.tituloVerde{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #004F1A;
    font-weight: 800;
}

.horaTitulo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
}

.horarioEspec{
    gap: 10px;
    color: var(--dark-green);
    margin-bottom: 20px;
}

.horario-principal {
    display: flex; /* Habilita el modo Flexbox */
    align-items: center; /* **Alinea el reloj y el texto H3 verticalmente** */
    justify-content: center; /* **Centra el par Reloj/Texto horizontalmente** */
    gap: 75px; /* Añade un pequeño espacio entre el reloj y el texto */
    padding-right: 200px;
}

.imgReloj{
    transform: translateY(33px);
}

.contactoInfo{
    margin-top: 50px;
}

.contactoEspec{
    margin-right: 13%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 75px;
}

/*Mapa*/

.ubicacion{
    margin: 50px;
}

.tituloUbi{
    font-weight: bolder;
    color: #004F1A;
    text-align: center;
}

.mapa{
    margin-top: 15px;
    margin-bottom: 100px;
}

.mapa iframe{
    margin: 0 auto;
    width: 80%;    
    height: 30vw; 
    display: block;
    border-style: double;
    border-radius: 7px;    /* Esquinas redondeadas para un toque suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra sutil para darle profundidad */
}

/*Footer*/

footer{
    padding-top: 25px;
    padding-bottom: 20px;
    font-family: sans-serif;
    text-align: center;
    color: white;
    background-color: #212121;
}

footer img{
    padding-left: 50px;
    padding-right: 50px;
}

footer a{
    text-decoration: none;
}


/* variable que almacenará la altura del header (la llenamos con JS) */
:root {
  --header-height: 70px; /* valor inicial por si acaso */
}

/* aplica offset de scroll a las secciones destino */
#Menu,
#Horario,
#Ubicacion {
  scroll-margin-top: calc(var(--header-height) + 25px); /* 10px extra de separación */
}

.flechas{
    display: none;
}

#carouselExampleCaptions {
    display: none;
    height: 45vw;
    min-height: 400px;
}

#carouselExampleCaptions .carousel-inner {
    height: 100%;
}

#carouselExampleCaptions .carousel-item {
    height: 100%;
}

#carouselExampleCaptions img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Show carousel captions on mobile */
#carouselExampleCaptions .carousel-caption {
    display: block !important;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}

#carouselExampleCaptions .carousel-caption h5 {
    font-weight: bolder;
    color: white;
    margin: 0;
}

/* Make carousel items clickeable */
#carouselExampleCaptions .carousel-item {
    cursor: pointer;
}

#carouselExampleCaptions h5{
    font-weight: bolder;
}


/* BREAKPOINTS */

@media(max-width: 992px){
    .header{
        padding: 1rem 5%;
    }
    
    #carouselExampleCaptions{
        display: block;
    }

    .flechas{
        display: block;
    }

    .banner{
        display: none;
    }

    .navbar a{
        font-size: 1rem; /* Reducir el tamaño de la fuente */
        margin-left: 1.5rem; /* Reducir la separación entre enlaces */
    }

    /* 3. Mapa */
    .mapa iframe{
        width: 95%; /* Asegura que no se pegue a los bordes y sea más pequeño que 900px */
        height: 400px; /* Reducir la altura fija del mapa */
    }

    /* 4. Información de Horarios y Contacto (Para que los elementos no estén tan separados) */
    .horario-principal, .contactoEspec {
        gap: 30px; /* Reducir la separación de los elementos con Flexbox */
        /* Si usaste padding-right: 200px; en .horario-principal, elimínalo o ajústalo mucho */
        padding-right: 0; 
    }
}

@media(max-width: 768px){

    .icons{
        display: inline-flex;
    }

    #check:checked~.icons #menu-icon{
        display: none;
    }

    .icons #close-icon{
        display: none;
    } 

    #check:checked~.icons #close-icon{
        display: block;
    }

    .navbar{
        position: absolute;
        flex-direction: column;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background: rgba(0, 0, 0, .1);
        backdrop-filter: blur(50px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
        overflow: hidden;
        transition: .3s ease;
    }

    #check:checked~.navbar{
        height: 17.7rem;
    }

    .navbar a{
        display: block;
        font-size: 1.1rem;
        margin: 1rem 0;
        opacity: 0;
        transform: translateY(-50px);
        transition: .3s ease;
    }

    #check:checked~.navbar a{
        opacity: 1;
        transform: translateY(0px);
        transition-delay: calc(.10s * var(--i));
    }

    /* 1. Logo */
    .logo img{
        width: 100px; /* Tamaño fijo para el logo en móviles */
    }
    
    /* 2. Banner */
    .banner {
        height: 20vw; /* Hacer el banner más corto para no consumir toda la pantalla */
    }

    .horario img{
        height: 55.37px;
    }

    /* 4. Títulos y Textos */
    .tituloVerde, .horario h3 {
        font-size: 1.1rem; /* Reducir el tamaño de los textos principales para que quepan */
    }
    
    /* 5. Mapa (Hacer que ocupe el ancho completo) */
    .mapa iframe{
        width: 90%; /* Ancho completo con un pequeño margen */
        height: 300px; /* Reducir la altura */
    }

    /* 6. Espacios (Margins/Paddings) */
    .ubicacion{
        margin: 20px; /* Reducir márgenes externos */
    }
}

@media(max-width: 995px){

    .imgReloj{
        transform: translateY(-10px);
    }
}

/*The MIT License (MIT)

Copyright (c) 2011-2025 The Bootstrap Authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.*/