@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
/*primera parte de css para celulares, mobile first*/

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

body {
    font-family: 'Montserrat', sans-serif;
    color: #197699;
    background-color:#DDFFF6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* centrado en la horizontal */
    justify-content: center;
}

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

h1 {
   font-weight:700; 
   font-size: 1.8em;
   letter-spacing: normal;
}

h2 {
   font-weight: 500;   
   font-size: 1.3em;
}

h3 {
  font-style: italic;
  font-size: 1em;
}

header .menu {
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
}

.menu {
    
    max-width: 50rem;
}

header ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-top: 3em;
}

header ul li {
    width: 5em;
    height: 3em;
    display: flex;
}
ul{margin:0 3em;justify-content: center;}
header ul li a {
    width: 100%;
    height: 100%;
    background-color: #013054;
    color: #DDFFF6;
    text-decoration: none;
    font-weight:500;
    display: flex;
    border-radius: 20px;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
}


main {
    padding: .5em;
    margin: .5em 2em .5em 2em;
    /* crece para "llenar" la caja contenedora */
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.comitente{
    margin: auto;
    text-align: center;
    max-width: 50em;
    word-spacing: 0.05em;
    padding: 1.3em 0 1.3em 0;
    line-height: 1.5;
}

.comitente p {
    padding: 1em;line-height: 1.5;
}

.integrantes {
    margin: auto;
    max-width: 20em;
}

.integrantes h2 {
    text-align: center;
    max-width: 20em;
}

.integrantes h1 {
    text-align: center;
}

.integrantes img {
    border-radius: 50%;
    width: 50vw;
    height: 50vw;
    max-width: 15em;
    max-height: 15em;
    margin: 1.6em 0 1em 0;
}

.integrantes a {
    text-decoration: none;
    font-weight:500;
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
    color: #197699;
}

aside{
    background-color: #197699;
    color: #DDFFF6;
    flex-wrap: nowrap;
    flex-direction: column;
    line-height: 1.5em;
    border-radius: 20px;
    padding: 2em;
    margin: 1em 2em .5em 2em;
}

aside h3 {
    display: inline;   
}

aside img { /*no se por q me quedan tan chiquitos los logos*/
    width: 30vw;
    height: auto;
    max-width: 10vw;
    max-height: 10vw;
    margin-top: 1.5em;
    margin-bottom: .5em;
}

footer {
    color: #DDFFF6;
    background-color: #013054;
    padding: 2em 3.5em 2em 3.5em;
    margin: .5em 3em 1em 3em;
    flex-wrap: wrap;
    flex-grow: .5;
    font-size: 0.6em;
    font-style: italic;
    border-radius: 20px;
}










/* a partir de un ancho de 600px (tabletas) */

/*@media screen and ( min-width: 600px ) {
    .integrantes {
        display: flex;
        flex-wrap: nowrap;
    }
    
}
   
/* a partir de un ancho de 1200px (computadoras)  */ 

/*@media screen and ( min-width: 1200px ) {
    
    

}