@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

/*--------------------------HEADER----------------------------------*/

#header {
    position:fixed;
    top:0px;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0px;
    /* padding:10px 0px; */
    background: #c3c3c1;
    color: #f1f1f1;
    min-height: 100px;
    align-items: center;
    z-index: 500;
    /* box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.736); */
}

/*-------------------------MENU PRINCIPAL---------------------------*/
#header a{
    text-decoration: none;
    color:#f1f1f1;
}

/* #baseheader{
    position:absolute;
    top: 100px;
} */

#header a:hover{font-size:large;font-weight: bolder;}

/*--------------MENU RESPONSIVE PARA TABLET Y CELULAR----------------*/
#btn-menu {
    display: none;
}

header label{
    display: none;
    width: 30px;
    height: 30px;
    padding:10px;
}

header label:hover{
    cursor:pointer;
}

.menu ul{
    margin: 0;
    list-style: none;
    padding:0;
    display:flex;
    width: 100%;
    top: -100%;
    background-color: #c3c3c1;
}

.menu li{
    flex-grow:1;
}

.menu li a{
    display:block;
    padding:15px 20px;
    text-decoration: none;
    font-size: larger;
}

.logo {
    display: flex;
    border: none; 
    cursor: pointer;
    align-items: center;
}

.logo img {
    margin-right: 15px;
    margin-left: 15px;
}

#header a{
    text-decoration: none;
    color:black;
}

/*-----------------------------NAV---------------------------------------*/

nav{
    display: flex;
    flex-direction: row;
}
nav a{
    font-weight: 600;
    padding: 10px;
}

/*------------------------------BODY---------------------------------*/
body{
    background-color: #f2f1f1;
    display:flex;
    flex-direction: column;
}
/*------------------------------INDEX---------------------------------*/

.imagenPre{
    background-image: url("files/time-gb45738420_1280.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    width: 100%;
    height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top:0px;
    /* justify-content:end; */
    /* opacity: 0.7; */
}

#hero_textos{
    width: 100%;
    align-items: center;
    background-color:var(--color_shadow);
    position: absolute;
}    

.textoPrincipal{
    font-size: 2.5em;
    font-weight: bolder;
    text-align: center;
    color: rgb(14, 15, 15);
    background-color:rgba(97, 157, 226, 0.7);
}
    
/*--------------------------ANIMACION-----------------------------*/

.textoPrincipal {
    animation-name: cambiarColor;
    animation-duration: 1s;
    animation-timing-function: linear;
}

@keyframes cambiarColor {
    0% {color: rgba(12,3,71,0);background-color:rgba(246, 247, 248, 0);}
    25% {color: rgba(12,3,71,0.25);background-color:rgba(246, 247, 248, 0.1);}
    50% {color: rgba(12,3,71,0.5);background-color:rgba(246, 247, 248, 0.2);}
    75%{color: rgba(12,3,71,0.75);background-color:rgba(246, 247, 248, 0.3);}
    100% {color: rgba(12,3,71,1);background-color:rgba(246, 247, 248, 0.4);}
}

/*--------------------------TITULO DE PAGINA---------------------------*/

.tituloprincipal{
    position:relative;
    top:100px;
    margin:10px;
    padding: 16px;
    font-size: 2.5em;
    font-weight:bolder;
    /* text-align: center; */
    color:#0c0349;
    /* border-radius: 10px; */
    border-style:solid none solid none;
    border-color:#c3c3c1 ;
}

.tituloprincipal {
    animation-name: cambiarColorTexto;
    animation-duration: 1.5s;
    animation-timing-function: linear;
}

@keyframes cambiarColorTexto {
    0% {color: rgba(12,3,71, 0);}
    25% {color:rgba(12,3,71, 0.25);}
    50% {color: rgba(12,3,71,0.5);}
    75%{color: rgba(12,3,71,0.75);}
    100% {color: rgba(12,3,71,1);}
}

/*----------------------------QUIENES SOMOS------------------------------*/

#quienes{
    position:relative;
    top:100px;
    /* height:fit-content; */
    /* width: fit-content; */
    margin:20px;
    /* font-size: 35px; */
    font-weight:bolder;
    color:#0c0349;
    display:flex;
    flex-direction: column;
    row-gap: 20px;
    margin-bottom: 50px;
}
#texto_quienes{
    font-size: 1.3em;
}
.quienes-art{
    display: flex;
    flex-direction: row;
    height:auto;
    align-items: center;
}

.quienes-art-img{
    box-sizing: content-box;
    text-align:left;
    width: 45%;
    height: 30%;
    /* height:max-content; */
    margin: 20px;
    border-radius: 5px;
    border-style:inset;
}

.quienes-art-txt>div{
    font-size: 1.5em;
    text-align: center;
    font-weight:bolder;
    color:#0c0349;
    /* background-color:rgba(246, 247, 248, 0.5); */
    padding: 10px;
}

.quienes-art-txt{
    box-sizing: content-box;
    height:fit-content;
    width: 70%;
    padding: 0px 0px 20px 20px;
    font-size: 1em;
    color: #0c0349;
    text-align:left;
}

#ultimo{
    margin-bottom: 100px;
}

/*---------------------------------ASIDE--------------------------------*/

aside{
    display: block;
    position:relative;
    top:40px;
    height: 200px;
    margin: 50px 20px;
    padding: 20px;
    border-style:inset none inset none;
}

/*--------------------FOOTER--------------------------------*/

.email-direccion{
    /* padding-left: 50px; */
    font-size: 20px;
    text-align: center;
}
/* .pie-pagina #footlogo{
    max-width: 80%;
} */

.pie-pagina {
    position:relative;
    width: 100%;
    background-color: #91918e;
    color:black;
}

/* .pie-pagina .grupo-1{
    width: 100%;
    height: 35%;
    display:grid;
    grid-template-columns: auto auto;
    grid-gap:25px;
    padding: 25px 0px 0px 0px;
} */

.pie-pagina .grupo-1{
    /* grid-row: 1/3; */
    display:flex;
    flex-direction: row;
    justify-content:center;
    /* text-align: center; */
    /* font-size: 20px;
    font-weight: bolder;*/
    align-items: center;
    padding: 25px 0px 0px 0px;
}

.pie-pagina .grupo-1 .box{
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    align-items: center;
    padding: 0px 60px 0px 60px;
}

.pie-pagina .grupo-1 .box a{
    text-decoration: none;
    color:black;
}
/* .pie-pagina .grupo-1 .box b{
    font-size: x-large;
} */

.pie-pagina .grupo-2{
    margin: 25px 10px;
    text-align: center;
    color: black;
    font-size:small;
    border-color: rgb(93, 92, 92);
    border-style:solid none solid none;
    border-width: 1px;
}

.pie-pagina .grupo-2 a{
    text-decoration: none;
    color:black;
}

/*-------------------------RESPONSIVE--------------------------------*/

@media (max-width:1024px){
    .imagenPre{
            background-image: url("files/time-tablet.jpg");
            width:auto;
    }
    .textoPrincipal{
        font-size:3em ;
    }
    #quienes{
        row-gap: 10px;
    }
    .quienes-art-img{
        width:30%;
        margin: 0px;
    }
    .quienes-art-txt{
        width: 70%;
        font-size: 0.75em;
    }
    .pie-pagina .grupo-1{
        font-size: 16px;
    }
}

/*--------------------*/

@media (max-width:769px){
    header label{
        display: block;
        margin:30px;
    }
    .menu{
        display: none;
        position: absolute;
        top: 100%;
        width: 100%;
        height: 100%;
        /* margin-top: -100%; */
        transition: all 2s;
    }
    .menu ul{
        flex-direction: column;
    }
    .menu li{
        border-top:#f1f1f1 solid 1px;
        text-align: center;
    }
    #btn-menu:checked ~ .menu{
        margin:0;
        display: block;
    }
    .imagenPre{
        height: 600px;
    }
    .textoPrincipal{
        font-size:2em ;
    }
    .tituloprincipal{
        font-size: 1.5em;
    }
    #texto_quienes{
        font-size: 1em;
    }
    /* #subtitulo{
        font-size:1.5em ;
    } */
    .exc-img{
        width: fit-content;
        align-items: center;
    }
    .exc-txt{
        height: auto;
    }
    #quienes{
        margin:20px;
    }
    .quienes-art{
        flex-direction: column;
    }
    .quienes-art-img, .quienes-art-txt{
        width: 100%;
        padding: 0px;        
    }
    .imagenPre{
        background-image: url("files/time-tablet2.jpg")
    }
    #header>img{
        opacity: 0;
        background-image: url("files/logo_simple.png");
    }
    .menu li a{
        padding:10px 20px;
        font-size: medium;
    }
    aside{
        padding:0px;
        height: 150px;
    }
    .pie-pagina .grupo-1{
        width: 100%;
        flex-direction: column;
        /* grid-template-columns: repeat(1, 1fr);
        grid-gap:20px; */
        padding: 5px 0px 0px 0px;
        /* font-size: 10px; */
    }
    .pie-pagina .grupo-1 .box{
        font-size: small;
    }
    .email-direccion{
        font-size: small;
        text-align: center;   
    }
    .pie-pagina .grupo-2{
        font-size: xx-small;
        text-align: center;
        margin: 15px 10px;
    }
}

@media (max-width:700px){
    
    .nav-link{
        /* flex-direction: column;*/
        /* align-items: center; */
        display:none;
    }
    .dropbtn{
        display: block;
    }
    .dropmenu{
        position:relative;
        display:block;
        width: 100%;
        float: left;
    }
    aside{
        height: 130px;
    }
    #footarg, #footlogo{
        max-width: 40%;
    }
    .imagenPre{
        background-image: url("files/time-tablet2.jpg")
    }
    
}

@media (max-width:500px){
    .textoPrincipal{
        font-size:1.5em ;
    }
    .menu li a{
        padding:10px 20px;
        font-size: medium;
    }
    aside{
    height: 100px;
    }
    .pie-pagina .grupo-1 a{
        font-size: 13px;
    }
    
}

@media (max-width:425px){
    .imagenPre{
        background-image: url("files/time-celu.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        background-position: center;
        width: 100%;
        height: 550px;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
    }
    /* .imagenPre{
        height:450px;
    } */
    .textoPrincipal{
        font-size:25px;
    }
    .excursiones{
        grid-template-columns: 100%;
    }
    .tituloprincipal, #subtitulo{
        padding:0px;
    }
    .pie-pagina .grupo-1 .box{
        font-size: small;
    }
}

@media (max-width:400px){
    .form-datos{
        display:flex;
        flex-direction: column;
        align-items: center;
    }
    .form-titulo, .form-datos, .form-motivo, .form-comentario{
        font-size: 0.75em;
    }
    .pie-pagina .grupo-1 .box{
        font-size: small;
    }
}

@media (max-width:375px){
    aside{
        height: 60px;
    }
    .imagenPre .textoPrincipal{
        font-size: 1em;
    }
    .pie-pagina .grupo-1 .box{
        font-size: small;
    }
}