/*@charset "utf-8"*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Raleway:ital,wght@0,300;0,400;0,600;0,800;1,600&display=swap');

* {
    box-sizing: border-box;
}

#logo {
    margin: auto;
    display: block;
    height: 6em;
}

body {
    background-color: #E6E6FA;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color:black;
}


.titulo {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #893FD7;
    font-size: 2em;
    border-bottom: .4rem solid #BE95E9;
    padding-bottom: .2em ;
    
}


ul,
li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

header, 
footer {
    background-color:#893FD7;

}

footer {
color: white;
padding: 1em;
margin: auto;
line-height: 1.5em;
font-weight: 300;
}



header {
display: flex;  
flex-direction: column;
justify-content:center;
align-items: center;
flex-wrap: wrap;

}

header nav ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
text-align: center;
justify-content: center;
padding: 0;

}

header nav ul li {
margin:.5em ;
display: flex;
}

header nav ul li a {
font-weight: 600;
background-color: #BE95E9;
color: white;
text-align: center;
padding: .25em .5em;
margin: auto;
text-decoration: none;
border-radius: 15px;
align-items: center;
justify-content: center;
display: block;
width: 7em;
}



.contenedora{
max-width: 700px;
margin: auto;
padding: 1em;

}


.joana article{
    display: flex;
    flex-direction: column;
}

.joana article div {
    display: flex;
    flex-direction: column;
}

.joana article div ul{
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: flex-start;
    padding: 0;
}

.joana li{
max-width: 50px;
width: 4em;
padding-right: 1em;
}

.joana figure {
    display: flex;
    justify-content: center;
}

.joana figure > img {
border-radius: 50%;
max-width: auto;
max-height: auto;
}



h3 {
    color:#BE95E9 ;
    font-size: 1.5em;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    margin-top: .5em;
    margin-bottom: .5em;
}


h4{
    font-size: 1.0em;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    margin-top: .5em;
    margin-bottom: .5em;
}

.historia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: wrap;
}

.historia .materias {
    background: #FBF8F6;
    border-radius: 5%;
    padding: .5em ;
    padding-top: .5em;
    width: calc(50% - .5em);
    align-content: space-between;
    align-items: flex-start;
    
 }



.materias h3 {
justify-content: center;
padding-left: .5em;
 }


.materias ul{
margin-top: 0;
padding-left: .5em;
}



.historia .trabajos{
background: #FBF8F6;
border-radius: 5%;
padding: 1em ;
padding-top: .5em;
align-items: flex-start;
height: auto;
width: 100%;
margin-top: 1em;
justify-content: center;
border-top: 1em;

}

.trabajos figcaption{
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.trabajos a {
text-decoration: none;
background-color: #BE95E9;
color: white;
text-align: center;
padding: .25em .5em;
margin: 0;
margin-top: .5em;
text-decoration: none;
border-radius: 15px;
display: block;
width: 7em;

}

.historia h2 {
    width: 100%;
}


.comitenteacumar figure {
display: flex;
flex-direction: column;
justify-content: center;
}
    
.comitenteacumar figure img{
margin-top: 1em;
margin-bottom: 1em;

}
    
.comitenteacumar figure a:hover{
background-color: white;
color: white;
border:solid .5px #BE95E9;
text-align: center;
padding: 1em;
box-shadow: .5em .5em .5em  #893FD7;
}

.equipo {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.estudiante {
display: flex;
flex-direction: column;
justify-content: center;
border:.5em;
}

.equipo h2{
width: 100%;
}

.equipo img{
border-radius: 50%;

}
.equipo a{
text-decoration: none;
font-size: 18px;
background-color: #FFFAF0;
padding: .5em;
color: #D4ABEF;
border-radius: 15px;
height: auto;
text-align: center;
font-family: 'Playfair Display', serif;
}

.equipo a:hover{
color: #893FD7;
box-shadow: .5em .5em .5em  #893FD7;
}

.datosAcademicos img{
width: 9em;
height: auto

}

.datosAcademicos h4{
margin-top: 1em;
margin-bottom: .5em;
}
.datosAcademicos h5{
margin: 0;
}

.datosAcademicos  ul{
padding: 0;
}

.datosAcademicos > ul > li{
margin-bottom: 2em;
}

.datosAcademicos > ul > li > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}

/* fin de mobile first*/

/* cambios a partir de los 610px*/

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

header nav ul {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    padding: 0;
    
   }


.joana article{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-right: 0;

}

.joana article div {
    flex-direction: column;
    justify-content: flex-start;
}

.joana figure {
justify-content:flex-start;
margin-left: 0;
}

.joana figure > img {
border-radius: 50%;
}

.bocetoIndividual a{
    text-decoration: none;
    background-color: #BE95E9;
    color: white;
    text-align: center;
    padding: .25em .5em;
    margin: 0;
    margin-top: .5em;
    text-decoration: none;
    border-radius: 15px;
    display: block;
    width: 7em;
}

.equipo {
flex-direction: row;
justify-content: space-around;
}

.equipo img{
border-radius: 50%;
width: 8em;
height: 8em;
}



.datosAcademicos img{
    width: 10em;
    height: auto
}

.datosAcademicos h4{
margin-top: 0em;
margin-bottom: .5em;
}   


.datosAcademicos > ul > li{
display: flex;
margin-bottom: 2.5em;

}
    
.datosAcademicos > ul > li > div {
margin-left: 2em;
align-items: flex-start;

}
            

}



/* cambios a partir de los 750px*/

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

.equipo {
justify-content: space-between;
}


.datosAcademicos > ul {
display: flex;
flex-direction:row ;
justify-content: space-between;
align-items: baseline;
}
        
.datosAcademicos > ul > li{
 flex-direction: column;
 padding: .5em;
 width: calc(33.33% - 1.5em);
}
        
.datosAcademicos > ul > li > div {
flex-direction: column;
margin-left: 0;
margin-top: 1em;
        
        }
        
.datosAcademicos  > ul > li img{
align-items: flex-end;
 }


}


/* cambios a partir de los 992px*/

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

.contenedora{
max-width: 800px;
}




}