/*MOVILE FIRST*/

body {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0;
    min-height: 100vh;
    justify-content: space-between;
}

header,
footer {
    background-color: #7fc2c2;
}

header {
    border-bottom: solid 9px #e1774b;
}

footer {
    padding: 1em;
    color: white;
    border-top: solid 9px #e1774b;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;

}

a {
    text-decoration: none;
}

header nav ul li:hover {
    background-color: #f4db60;
}

.activo {
    background-color: #f4db60;
}





/*NAVEGADOR PRINCIPAL*/

header nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}



header nav ul li {
    background-color: white;
    margin: 1em 0.2em 1em 0.2em;
    padding: 0.5em 1em;
}

header nav ul li a {
    color: #7fc2c2;
    font-weight: bold;
    font-size: 16px;
}





/*RÓTULO*/

h1 {
    font-size: 22px;
    margin: 0;
}

h6 {
    margin: 1em 2em;
}

#rotulo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border: solid 6px #f4db60;
    padding: 1em;
    margin: 1.5em 1.5em 3em 1.5em;
}


#datos {
    text-align: center;
}

#datos figure img {
    margin: 2em auto 3em auto;
    box-shadow: 10px 10px #f4db60;
}

#datos p spam {
    padding: 1em 2em;
    font-size: 12px;
    margin: 0 0 1em 0;
}

#datos p {
    padding: 0 2em;
    text-align: left;
    font-size: 15px;
}

#redes ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

#redes ul li {
    margin: .5em;
}

#aprobadas {
    padding: 0 2em;
}

#aprobadas h4 {
    padding: .3em;
    background-color: #7fc2c2;
    color: white;
}

#cursando {
    margin: 0 0 2em 0;
    padding: 0 2em;
}

#cursando h4 {
    padding: .3em;
    background-color: #e1774b;
    color: white;
}

#aprobadas ul li,
#cursando ul li {
    font-size: 16px;
}





/*TPS*/

#tps {
    margin: 3em 1.5em 3em 1.5em;
}

#tps h2 {
    display: block;
    margin: 0 0 3em 0;
    padding: .3em;
    background-color: #e1774b;
    color: white;
    border-left: solid 9px #f4db60;
    font-weight: bold;
    font-size: 16px;
}






/*---TP1------TP2---*/

#tp1,
#tp2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 1.5em 3em 1.5em;
    justify-content: center;
}

#tps figure {
    margin: 0 1.5em 3em 1.5em;
}

#tp1 img,
#tp2 img {
    box-shadow: 10px 10px #f4db60;

}

#texto_tp1,
#texto_tp2 {
    margin: 0;
    padding: 0 0 0 1em;
    border-left: solid 9px #7fc2c2;

}

#texto_tp1 h3,
#texto_tp2 h3 {
    margin: 0 0 1em 0;
    color: #7fc2c2;
    font-weight: bold;
    font-size: 16px
}

#texto_tp1 p,
#texto_tp2 p {
    margin: 0;
    font-size: 15px;
}





/*TEMAS*/

#enfoque {
    margin: 3em 0 3em 0;
    padding: 1.5em 0 3em 0;
    background-color: #f4db60;
}

#enfoque h2 {
    display: block;
    margin: 0 1.5em 3em 1.5em;
    padding: .3em;
    background-color: #7fc2c2;
    color: white;
    border-left: solid 9px #e1774b;
    font-weight: bold;
    font-size: 16px;
}

#texto_enfoque {
    margin: 0 3em;
    padding: 0 0 0 1em;
    border-left: solid 9px #e1774b;
}

#texto_enfoque h3 {
    margin: 0;
    color: #e1774b;
    font-size: 16px;
    font-weight: bold;

}

#texto_enfoque p {
    font-size: 15px;
    margin: 1em 0 0 0;
}





/*LINKS*/

#links {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    border-bottom: solid 9px #7fc2c2;
    border-top: solid 9px #7fc2c2;
}

#links {
    margin: 3em 0 0 0;
}


#links li {
    display: block;
    padding: 1em;
    margin: 1em;
}

#links a {
    display: block;
    padding: 1em 0;
    color: #7fc2c2;
    font-size: 20px;
    text-decoration: underline 3px;


}





/*EQUIPO*/

#equipo {
    margin: 3em 0 3em 0;
    background-color: #e1774b;
    color: #f4db60;
}

#equipo h2 {
    text-align: center;
    margin: 0;
    padding: 1em;
    font-size: 20px;
    font-weight: 600;
}

#equipo ul {
    padding: 0 1em 1em 1em;
}

#equipo ul li {
    display: block;
    border: solid 3px #f4db60;
    margin: 1em auto;
    padding: .5em 1em;
    max-width: 50%;
    text-align: center;
}

#equipo ul li a {
    color: #f4db60;
    font-weight: bold;
}





/*ACADÉMICOS*/

.academicos h2 {
    display: block;
    margin: 0 1.5em 3em 1.5em;
    padding: .3em;
    background-color: #f4db60;
    color: white;
    border-left: solid 9px #e1774b;
    font-weight: bold;
    font-size: 16px;
}

#logos ul {
    margin: 0 0 0 1.5em;
}

#logos ul li {
    margin: 1em 1em 3em 0em;
    padding: 0 0 0 1em;
    border-left: solid 9px #f4db60;
}

#logos img {
    max-width: 40%;
}

#logos h3 {
    font-size: 16px;
}

#logos p {
    font-size: 12px
}





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





/*RESPONSIVE TABLET*/

@media screen and (min-width:600px) {

    /*NAVEGACIÓN PRINCIPAL*/

    header nav ul li {
        background-color: white;
        margin: 1em 0.2em 1em 0.2em;
        padding: 0.5em 2em;
        font-size: 16px;
    }





    /*TPS*/

    #tps > figure {
        margin: 0 1.5em 3em 1.5em;
    }





    /*GRUPAL*/

    #tema {
        display: flex;
        justify-content: space-between;

    }

    #tema #enfoque {
        display: block;
        max-width: 60%;
        margin: 3em 0 0 0;

    }

    #tema #links {
        width: 40%;
    }

    #equipo ul li {
        max-width: 30%;
    }



    
    
    /*ACADÉMICOS*/

    #logos ul li a img {
        max-width: 40%;
    }
}





/*RESPONSIVE LAPTOP/DESKTOP*/

@media screen and (min-width: 992px) {

    /*NAVEGACIÓN PRINCIPAL*/

    header nav ul li {
        padding: .5em 3em;
        font-size: 20px;
    }





    /*PERFIL*/

    .perfil {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
    }





    /*TPS*/

    #tps h2 {
        font-size: 20px;
    }

    #tp1 h3,
    #tp2 h3 {
        font-size: 20px;
    }

    #tp1 p,
    #tp2 p {
        font-size: 16px;
    }





    /*GRUPAL*/

    #temas {
        display: flex;
        justify-content: space-between;
    }





    /*ENFOQUE*/

    #tema h2 {
        font-size: 20px;
    }

    #tema #enfoque {
        display: block;
        max-width: 50%;
        margin: 3em 0 0 0;
    }

    #texto_enfoque {
        margin: 6em 3em 3em 3em;
    }

    #texto_enfoque h3 {
        font-size: 20px;
    }

    #texto_enfoque p {
        font-size: 16px;
    }





    /*LINKS*/
    #tema #links {
        width: 50%;
    }





    /*EQUIPO*/

    #equipo {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #equipo h2 {
        font-size: 20px;
        font-weight: 600;
    }

    #equipo ul li a {
        font-size: 16px;
    }

    #equipo nav ul {
        display: flex;
        margin: 2em;
        padding: 0;

    }

    #equipo nav ul li {
        padding: 1em 3em;
        margin: 0 2em
    }





    /*ACADÉMICOS*/

    .academicos h2 {
        font-size: 20px;
    }

    #logos ul {
        display: flex;
        justify-content: space-between;
        margin: 0 2em;
    }

    #logos ul li a img {
        max-width: 90%;
    }

    #logos .textos {
        margin: auto 0 0 auto;
    }
}





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





/*MAPA.html*/

.mapa h1 {
    display: block;
    margin: 1em 1.5em 0 1.5em;
    padding: .3em;
    background-color: #f4db60;
    color: white;
    border-left: solid 9px #e1774b;
    font-weight: bold;
    font-size: 16px;
}





@media screen and (min-width:992px) {

    .mapa h1 {
        font-size: 20px;
    }
}





/*PLAN.html*/

#objetivos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: top;

}

#objetivos div {
    display: block;
    padding: 1em 2em;
    margin: 2em 1em 3em 1em;
    background-color: #e1774b;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10);
}

.plan h1 {
    display: block;
    margin: 1em 1.5em 0 1.5em;
    padding: .3em;
    background-color: #f4db60;
    color: white;
    border-left: solid 9px #e1774b;
    font-weight: bold;
    font-size: 16px;
}

.plan h2 {
    font-size: 15px;
    color: #7fc2c2;
    margin: 2em 2em 0 2em;
}

.plan h3 {
    color: #f4db60;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 2px #f4db60;
    padding: 0 0 .2em 0;
}

.plan h4 {
    color: #f4db60;
    font-weight: lighter;
}

.plan p {
    color: white;
}

.plan a {
    display: block;
    margin: 2em auto;
    padding: .5em;
    border: solid 2px #f4db60;
    color: #e1774b;
    font-size: 20px;
    font-weight: 600;
    background-color: #f4db60;
    text-align: center;
    max-width: 50%;
}

#div1 a {
    margin: 0 auto;
    max-width: 100%;
    background-color: #e1774b;
    border: none;
}





@media screen and (min-width:992px) {

    .plan h1 {
        font-size: 20px;
    }

    #objetivos {
        flex-direction: row;

    }

    #objetivos div {
        width: 100%;
        margin: 1.5em;
    }

    .plan a {
        display: block;
        margin: 3em auto;
        max-width: 75%;
    }

    #div1 a {
        max-width: 75%;
    }