@charset "utf-8";

* { 
    margin: 0;
    padding: 0;
   box-sizing: border-box;
    font-family: "trebuchet ms" sans-serif;
    list-style: none;
}
#Malena {
    border-radius: 50%;
    width: 50vw;
    height: 50vw;
    max-width: 15em;
    max-height: 15em;
    border: .25em solid rgb(171, 180, 232);
    box-shadow: 0 .35em 0.5em rgba(0, 0, 0, 0.97)
    inset, 0 .35em 0.5em rgba(0, 0, 0, .97);
    
}



body {
 background-color: coral;
    
    min-height: 100vh;
    min-height: -webkit-fill-available;
    
    /* caja flexible*/
    display: flex;
    
    flex-direction: column;
    
    justify-content: space-between;
}

a{
    text-decoration: none;
    color: orange;
}

html {
    height: -webkit-fill-available;
}

img {border-radius: 100%;
    
}


header,
footer {
    background-color: darkgreen;
padding: .5em; 
flex-grow: 0
}

nav#menu {
    max-width: 50em;
    margin: 0;
   
   
    
    

}

nav#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    justify-content: space-between;
    
}

nav#menu li{
    background-color: #f5f5da;
    padding: 0.5 em 0.5em 0.5em 0.5em;
    margin: 0.8em 0em 0.8em 0;
    text-align:center;

}
nav#menu li a{
    color:rgb(45, 47, 56);
}
nav#menu li#a{
    padding: 1em 3.2em 1em 3.2em;
    
    
}

nav#menu li#b{
    padding: 1em 3.2em 1em 3.2em;

    
    
}

nav#menu li#c{
    padding: 1em 3.2em 1em 3.2em;
}

nav#menu li#d{
    padding: 1em 3.2em 1em 3.2em;
    color:red; 
}


#logo {
    display:block;
    width: 5em;
    
}

.contenedor {
    max-width: 40em;
    margin: 0 auto;
    

}





#logazo {
    display:flex;
    justify-content: center;
   
    
}



main {
    background-color: #f5f5da;
    flex-grow: 1;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.MALE{
    max-width: 40em;
margin: 1em auto;
    margin-bottom:1em;
    text-align: center;
    
    
}

#MALE {
    margin-bottom: 0.5em;
}
.botonesdos {
    max-width: 40em;
    margin: auto;
    font-weight: 600;
     
}

.botonesdos ul{
    text-align: center;
    margin-bottom: 2em;
}

.botonesdos ul li#pi{
  background-color: rgb(171, 180, 232);
    padding: 0.5em 1.5em 0.5em 1.5em;
    margin-bottom: 0.34em
}

.botonesdos ul li#ma{
    background-color: rgb(171, 180, 232);
    padding: 0.5em 1.5em 0.5em 1.5em
}

.diseno{
    max-width: 40em;
    margin: 0 0;
   display:flex;
    margin-bottom: 2em;
   
    
}


.disenoap {
    max-width: 40em;
    margin: 0 0;
    margin-right: 4em
   
    
    
        
    
}

.disenodes{
    max-width: 40em;
    margin: 0 0;
    margin-left: 4em;
    text-align: end;
    
   
}

.disenodes h4{
    margin-bottom: 1.5em;
}

.disenoap h4{
    margin-bottom: 1.5em;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5em;
}

.preuba{
    max-width: 40em;
    margin: 0;
    display:flex;
    justify-content: space-between;
    margin-bottom: 2em;
}


    
}

#uba{
    margin-right: 2em;
}

.integrantes{ 
    max-width:40em;
        margin: 0;
    text-align: center;
    
}
.integrantes ol {
    max-width: 50em;
    margin: 0;
   
   
    
    

}

.integrantes ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    justify-content: space-between;
    
}

.integrantes ol{
    background-color: rgb(171, 180, 232);
    padding: 0.5 em 0.5em 0.5em 0.5em;
    margin: 0.8em 0em 0.8em 0;
    text-align:center;
    color: white;

}

.integrantes ol #tom{
    padding: 1em 1em 1em 1em;
    margin: 0.3em;
    
    
}
.integrantes ol #tom a{
    color:white
}
 
.integrantes ol #mar{
    padding: 1em 1em 1em 1em;
    margin:0.3em;

    
    
}
.integrantes ol #mar a{
    color:white
}

.integrantes ol #luc{
    padding: 1em 1em 1em 1em;
    margin:0.3em;

    
}
.integrantes ol #luc a{
    color:white
}

.integrantes ol #mal{
    padding: 1em 1em 1em 1em;
    margin:0.3em;

    color:red; 
}
.integrantes ol #mal a{
    color:white
}


footer{ 
text-align:justify;
    padding: 0.5em 0.5em 0.5em 0.5em;
    background-color: rgb(171, 180, 232);
    
}
footer p em{
    font-family:serif;
    
        color: #727272
}


/* plan */


section#plan{
    max-width: 40em;
    text-align: center;
    display:flex;
    margin-bottom:3em;
    
}

section#mapaimagen{
    margin-bottom: 3em;
}