* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: charlotte;
    src: url(../fuentes/charlotte.otf);
}

@font-face {
    font-family: poppins;
    src: url(../fuentes/Poppins-Regular.ttf);
}

html {
    scroll-behavior: smooth; /* es para que el scroll vaya lento*/
}


body{
    background-image: url(../imagenes/fondo_aviones.png);
    background-size: cover;
    overflow-x: hidden;
}

header{
    background-color: #ADA789;
    position: relative; 
    width: 100%;
    padding: 15px 0; 
    font-family: poppins;
    font-size: 1.25rem;
}

/* LOGO */ 
#logo {
    width: 100px;
    height: 70px;
    background-image: url(../imagenes/logo.png);
    background-size: cover;
    background-position: left;
    font-size: 0;
}

/* QUIENES SOMOS */
#quienes_somos {
    background-image: url(../imagenes/fondo_carta.png);
    background-size: cover;
    width: auto;
    height: 100%;
}

#quienes_somos h3{
    font-family: charlotte;
    font-size: 3.5rem;
}

#quienes_somos p{
    font-family: poppins;
    padding: 5px 20px;
    margin: 10px 120px ;
}

#quienes_somos div{
    padding: 0px 0px 100px 0px ;
}

/* LUGARES */
#lugares h2, .titulo{
    background-color: #ADA789;
    padding: 20px 0px;
    font-family: charlotte;
    font-size: 3.5rem;
}

/* CATEGORIAS */
.categorias h3{
    font-family: charlotte;
    font-size: 2.5rem;
}

.categoria {
    padding: 20px;
}

/* COLAPSABLES */
#colapsables p{
    font-family: poppins;
    padding: 5px 20px;
    margin: 10px 120px;
}

/* PLAN */
#plan h2{
    background-color: #ADA789;
    padding: 20px 0px;
    font-family: charlotte;
    font-size: 3.5rem;
}

#plan p{
    font-family: poppins;
}

#parrafo_plan{
    padding: 5px 20px;
    margin: 10px 120px;
}

#tr_agregar {
    font-family: poppins;
    width: 100%;
    margin-bottom: 1rem;
    margin-right: auto;
    margin-left: auto;
}

#tabla {
    font-family: poppins;
}

/* FLECHA */
.flecha{
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    background-color: white;
    position: fixed;
    right: 20px;
    bottom: 7.5px;
}

/* FOOTER */
footer {
    padding: 10px;
    font-family: poppins;
    text-align: center;
    background-color: #ADA789;
}

footer img{
    width: 150px;
    height: auto;
}

footer li img {
    height: 50px;
    width: 50px ;
}

/* MARQUESINA */

.marquee {
    width: 100%;
    height: auto;
    margin: auto;
    overflow: hidden;
    padding: 10px 0px;
}

.marquee .marquee-content {
    display: flex;
    height: 100%;
    align-items: center;
    animation-name: marquesina;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    width: 4500px; /* Calcular el width del slide y multiplicarlo por la cantidad total de imágenes por 2 */
}
.marquee .girada{
    animation-direction: reverse;
}
.marquee .slide {
    width: 250px;
    height: 180px;
}

.marquee .slide img {
    border: 1px solid black;
    height: 90%;
}

@keyframes marquesina {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-2250px); /* Calcular el width del slide y multiplicarlo por la cantidad total de imágenes */
    }
}

.presentacion iframe{
    width: 70vw;
    height: 40vh; 
}

@media (max-width: 991.98px) {
    h2{
        font-size: 2.75rem !important;
    }
    h3{
        font-size: 2.5rem !important;
    }
    h4{
        font-size: 1.25rem !important;
    }
    h5, a{
        font-size: 1rem !important;
    }
    p, li, input, textarea, th{
        font-size: 0.75rem !important;
    }
    #colapsables p, #parrafo_plan, #quienes_somos p{
        padding: 5px 20px;
        margin: 10px 50px;
    }
    .categorias h3{
        font-size: 1.5rem !important;
    }
    .form-control::placeholder, #plan h6 {
        font-size: 0 !important;
    }

}