@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600&display=swap');

* { box-sizing: border-box;
margin: 0;
padding:0;
border:0;
font-family: "Rubik", sans-serif;
text-decoration: none;
list-style: none;
}

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

 a:link {  color: #fe4789;   
}
 a:visited {  color: #cb76eb;   
}
 a:hover {  color:  #fadc3c;
}

header { background-color: white;
        width: 100vw;         
}

header nav {font-weight: 600; 
                        }

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

header nav ul li {padding: 1em;
                width: 10em;
                display: flex;
                justify-content: center;}

body {color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	min-height: -webkit-fill-available;
    justify-content: center;
}

main {display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(#17d8ea, #fe4789);}


h1 {   
    font-size: 3em;
    font-weight: 600;
    margin-bottom: .2em;
    margin-top: 1em;
    text-transform: uppercase;
    
}

h2 {
    font-size: 1.7em;
    font-weight: 500;
    margin-bottom: 1em;
    text-align: center;
    
 }


.banner {margin-top: 1em;
        margin-bottom: 1em;}


#nosotras ol {display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }

#nosotras ol li {max-width: 43vw;
    margin: .25em;
    background-color: white;;
    font-weight: 600;
}

#nosotras figure {position: relative;
        overflow: hidden;
        margin-left: 0;}

#nosotras img {object-fit: cover;
            display: block;}

#nosotras figcaption {
                    padding: .7em;
                    padding-left: 2em;
                    font-size: 1.2em;
                    font-weight: 600;
}




#nosotras li:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: .2s; }


#nosotras li:hover figcaption {background-color: #fadc3c; transition: .3s ease;}

#nosotras a:hover {color: white; transition: ease;}

#academico {display: flex;
            flex-direction: column;
            align-items: center;}

h3 {
    color: black;
    background-color: white;
    margin-top: 2em;
    margin-bottom: 1.5em;
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 2em;
    width: 100vw;
    }


main p { min-width: 20em;
        max-width: 50em;
        margin-right: 2em;
        margin-left: 2em;
}

#academico { margin-bottom: 3em;}

#academico > ul li {
        margin-top: .2em;
        min-width: 20em;
        max-width: 50em;
        margin-right: 2em;
        margin-left: 2em;}

#academico ul h4 {
        margin-top: .6em;
        min-width: 20em;
        max-width: 50em;
        margin-right: 2em;
        margin-left: 2em;}

#academico strong {font-weight: 500;}


#plan {min-height: 85vh;
    justify-content: flex-start;}

#plan h3 {margin-top: 1em;}

#plan figure {margin-top: 2em;}

#plan p {margin-bottom: .7em;}

#mapa {min-height: 85vh;
        justify-content: flex-start;}

#mapa figure {margin-top: 1.5em;}

#mapa ul li {margin-bottom: .6em;}

#mapa ul {margin-left: 2em;
            margin-right: 2em;
            max-width: 60em;}


footer { 
    padding: 2em;
    padding-right: 2em;
    background-color: white;
    color: black;
    width: 100vw;
}


@media screen and (min-width: 56em) {
    h3 {padding-left: 10em;}
    
}


@media screen and (min-width:80em) {
    h3 {padding-left: 15em;}
    
}


@media screen and (min-width:100em) {
    h3 {padding-left: 25em;}
    
}