*{
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
}

    :root {
        --color-textos: #000;
        --color-fondo: #f2f2f2;
        --color-1: #d7df23;
        --color-2: #333333;
        --color-3: #63635c;
        --color-5: #50b8b1;
        --color-6: #9283be;
        --textos-cuerpo: sans-serif;
        --textos-titulos: sans-serif;
    }

    /*HEADER---------------------------*/       
img {
    max-width: 30%;
}
a {
        text-decoration: none;
        color: var(--color-6);
        font-family: var(--tipo-titulos);
        font-weight: bold;
}
ul, ol {
    list-style: none;
    padding: 0px;
}
header .lista{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .contenedora{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}
header img{
        width: 20%;
        height: auto;
        margin: 1em;
}
header, footer {
        background-color: var(--color-1);
        margin-inline: 0%;
}
header nav a {
        color: var(--color-fondos1);
        background-color: var(--color-4);
        display: block;
        width: max-content;
        margin: .125rem;
        padding-block: .25em;
        padding-inline: 1em;
        border-radius: 0.25em;
}
header nav a:hover {
    background-color: var(--color-1);
    color: var(--color-6);
}

/*CUERPO---------------------------*/
body {
    width: min( 100rem, 100%);
    margin-inline: auto;
    margin-block-start: 0%;
    margin-block-end: 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: var(--color-fondo);
}
    
    p {
        margin-block-end: 0%;
        font-family: var(--textos-cuerpo);
        color: var(--color-textos);
        text-align: center;
    }

    h1{
        font-family: var(--textos-titulos);
        color: var(--color-textos);
        text-align: center;
        font-size: xx-large;
    }

h3{
        font-family: var(--textos-titulos);
        color: var(--color-3);
        text-align: center;
        
    }
h2{
        width: 100%;
        padding-inline-start: 1em;
        text-align: center;
        font-size: x-large;
        font-family: var(--textos-titulos);
        color: var(--color-2)
    }

    
.integrante{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: space-evenly;
        align-items: center;
    }

    .img {
        max-width: 30%;
        width: 100px;
        height: 100px;
    }

.bosquejos{
    display: flex;
    align-items: center;
}    
.primero{
    padding: 1em;
    margin: 1em;
    background-color: var(--color-5);
}
.primero ul{ 
    background-color: var(--color-fondo);
    margin-block: .5em;
    padding: 1em;
    border-radius: .25em;
    flex-wrap: wrap;
}
.primero li{
    color: var(--color-textos);
    background-color: var(--color-fondo);
    width: min( 100rem, 100%);
    text-align: center;
    margin-inline: auto;
}
.segundo{
    padding: 1em;
    margin: 1em;
    background-color: var(--color-5);
}
.segundo ul{ 
    background-color: var(--color-fondo);
    margin-block: .5em;
    padding: 1em;
    border-radius: .25em;
    flex-wrap: wrap;
}
.segundo li {
    color: var(--color-textos);
    background-color: var(--color-fondo);
    text-align: center;
    margin-inline: auto;
}
.academicos{ 
    background-color: var(--color-5);
    margin-block: .5em;
    padding: 1em;
    border-radius: .25em;
    flex-wrap: wrap;
}  
.academicos ul{
    flex-wrap: wrap;
    margin-block: .5em;
    padding: 1em;
    border-radius: .25em;
}
.academicos h3{
    text-align: center;
}

.logos{
    display: flex;
}
.logos ul {
    margin: 0 0 0 1em;
    border-color: solid 1em var(--color-5);
    background-color: var(--color-fondo);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0,0,0, 1em;
    gap: 1em;
}

.logos img {
    text-align: center;
    height: 5em;
    margin: 1em 0;
}

.logos ul li {
    margin: 1em 1em 3em 0em;
    padding: 0 0 0 1em;
}

.textos {
    font-size: 0.8em;
}

@media screen and (min-width:768px) {
    .header nav,
    .header nav ul {
            display: contents;
    }
    .header nav ul li:first-of-type{
            margin-inline-start: auto;
    }
    
    }