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

body {
    background-color:#f2f2f2;
    display: flex ;
    flex-direction: column ;
    font-family: 'Roboto', sans-serif;
    min-height: 100vh ;
}

/* ----- main ----- */

#integrantes ul {
list-style: none;
margin: 1em;
padding: 1em;
display: flex;
justify-content: space-around ;
align-items: center;
flex-wrap: wrap ;

}

#integrantes ul li a {
text-decoration: none ;
color: red
}

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

#datosacademicos {
padding: 1em ;
background-color: rgb(224, 43, 43) ;
border-radius: 2em ;
max-width: 90% ;
text-align: center ;
align-self: center;
color: ghostwhite ;
}

#datosacademicos h2 {
margin-bottom: .5em  
}

#integrantes ul .int4 h6 {
text-align: center ;
}

#integrantes ul .int4 a img {
border-radius: 2em ;
border-color: aqua ;
}

#integrantes ul .int3 h6 {
text-align: center ;
}

#integrantes ul .int3 a img {
border-radius: 2em ;
border-color: aqua ;
}

#integrantes ul .int2 h6 {
text-align: center ;
}

#integrantes ul .int2 a img {
border-radius: 2em ;
border-color: aqua ;
}

#integrantes ul .int1 h6 {
text-align: center ;
}

#integrantes ul .int1 a img {
border-radius: 2em ;
border-color: aqua ;
}

main {
display: block ;
align-self: center ;
margin-bottom: 2em ;
}

#index {
display: flex ;
flex-direction: column ;
flex-grow: 1 ;
justify-content: center ;

}

/* ----------- header ----------- */

header{
    background-color: rgb(224, 43, 43);
    display: flex;
    flex-direction: column;
    }

header .logodgpc img {
display: block ;
padding: .2em;
}

.logo {
align-self: center ;
max-width: 
}

.logo img {
max-width: 5.40em;
height: auto ;
}

.logodgpc {
display: flex ;
padding: 1rem;
background-color: #ffffff ;
border-radius: 2em ;
justify-content: center ;
margin: auto ;
margin-top: 1em ;
margin-bottom: 1em ;
}

/* ----- nav ----- */



header nav ul li a {
list-style: none;
color: #ffffff;
text-decoration: none;
}

nav ul {
    list-style: none ;
    padding: .25em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: .5em ;
}

nav ul li {
    flex-basis: 24.5%;
}

nav ul li a {
    background-color: rgba(255, 255, 255, 0.61);
    font-weight: bold;
    display: block;
    text-align: center;
    padding: .3em;
    border-radius: 4px;
    
}

nav ul li a:hover {
    background-color: white;
    color: black;
}

/* ----- footer ----- */

footer{
    background-color: black;
    color: white;
    padding: 1em;
}

/* ----- main plan ----- */

#plan h1 {
margin: .5em ;
display: block ;
}

#plan main {
display: flex ;
flex-direction: column ;
flex-grow: 1 ;
justify-content: space-around ;
margin: .7em ;
}

#plan main .secciones h2 {
margin-bottom: .5em ;
}

#plan #usuarios {
padding: 1em ;
background-color: rgb(224, 43, 43) ;
border-radius: 2em ;
max-width: 97% ;
text-align: center ;
align-self: center;
margin-bottom: 1em ;
}

#plan #usuarios h2 {
padding-bottom: .3em ;
}

#plan .secciones {
padding: 1em ;
background-color: rgb(224, 43, 43) ;
border-radius: 2em ;
max-width: 97% ;
text-align: center ;
align-self: center;
margin-bottom: 1em ;
}

#plan .secciones ul {
list-style: none ;
}

#plan .secciones ul li {
margin-bottom: 1em ;
}

#plan .secciones ul li h3 {
margin-bottom: .2em ;
}

#plan .redes  {
padding: 1em ;
background-color: rgb(224, 43, 43) ;
border-radius: 2em ;
margin-bottom: .5em ;
margin: .5em ;

}

#plan .redes ul {
display: flex ;
flex-grow: 1 ;
justify-content: space-between ;
list-style: none ;
}

#plan .redes ul li a {
display: block ;
}

/* ----- main mapa ----- */

#mapa figure picture img {
max-width: 100% ;
}

#mapa {
display: flex ;
flex-direction: column ;
flex-grow: 1 ;
max-width: 100% ;
}

.capturas ul {
list-style: none ;
display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center;
}

.capturas ul li {
margin-bottom: 2em ;

}

#mapa .titulo h1 {
display: block ;

color: #f2f2f2 ;




}
   
#mapa .titulo {
    
background-color: rgb(224, 43, 43) ; 
align-self: center ;
padding: 1em ;
margin: 1em 0em 1em 0em ;
border-radius: 2em ;
    
}