@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');

* { 
    margin: 0;
    padding: 0;
    border:0;
   box-sizing: border-box;
    font-family: "Fira Sans", sans-serif;
    list-style: none;
    outline:none;
}

a {
    text-decoration: none;
    color:white;
    list-style: none;
  
}
img{
    max-width: 100%;
    height: auto;
}

#tommy {
    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: #f5f5da;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


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

header{
    background-color:rgb(171, 180, 232)
}

nav#menu {
    max-width: 50em;
    margin: 0;
    padding: 0;
    background-color:rgb(171, 180, 232);
   
   
    
    

}

nav#menu ul {
    list-style: none;
    padding: 1em;
    margin:.4em  1em 1em 1em;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color:#f5f5da;
    border-radius:15px;
    
}

nav#menu li{
    background-color: #f5f5da;
    padding:0;
    text-align:center;
    width:100%;
    
    

}
.menu li a{
    color:rgb(45, 47, 56);
    font-weight: 600;
}




#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;
    
}

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

#tommy {
    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;
        border-radius:15px;
    font-weight: 400;
}

.botonesdos ul li#ma{
    background-color: rgb(171, 180, 232);
    padding: 0.5em 1.5em 0.5em 1.5em;
    border-radius:15px;
    font-weight: 400;
}

.diseno{
    max-width: 40em;
    margin:0;
    padding:1em;
   display:flex;
    justify-content: space-between;

    margin-bottom: 2em;
    background-color: rgb(171, 180, 232)
    ;
    border-radius:15px;
   
    
}


.disenoap {
    
    max-width: 40em;
    margin: 0 .8em 0 .5em;
       
    
}

.disenoap ul{
    color:#fdfdee;
    font-weight: 200;
}

.disenodes{
    max-width: 40em;
    margin: 0 .5em 0 .8em;
    
    
   
}

.disenodes ul{
    color:#fdfdee;
    font-weight: 200;
}

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

.disenoap h4{
    margin-bottom: 1.5em;
}
p
 {
    margin-bottom: .9em;
}

h2{
    margin-bottom: .5em;
}


.preuba{
    
    margin:1em;
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2em;
}



.preuba h3 {
    margin-bottom:0;
}

.ulti{
    margin-bottom:0;
}



    




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

}

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

.integrantes ol{
    background-color: rgb(171, 180, 232);
    padding:1em;
    margin: .5em 1em 1em 1em;
    text-align:center;
    color: white;
    border-radius:15px;
    

}

.integrantes ol li {
    padding: 0 .5em
}

.plan{
    margin:1em;
}


footer{ 
text-align:justify;
    padding: 0.5em 0.5em 0.5em 0.5em;
    background-color: rgb(171, 180, 232);
    
}
footer p em{
    
    font-weight: 200;
    font-style:italic;
        color: rgba(255, 246, 225, 0.79)
}


/* plan */


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

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