@font-face {
    font-family: "Catamaran-Medium";
    src: url(fuentes/Catamaran-Medium.ttf);
}

@font-face {
    font-family: "Catamaran-Regular";
    src: url(fuentes/Catamaran-Regular.ttf);
}

@font-face {
    font-family: "Inter-Bold";
    src: url(fuentes/Inter-Bold.ttf);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
   }
   
:root {
    --color-textos-1: hsl(0, 0%, 0%); 
    --color-textos-2: hsl(186, 88%, 13%);
    --color-textos-3: hsl(100, 100%, 100%);
    --color-textos-4: hsl(185, 7%, 32%);
    --color-textos-alfa: rgba(98, 98, 98, 0.527);
    --color-fondos: hsl(180, 8%, 85%);
    --color-fondos-2: hsl(189, 73%, 29%);
    --color-fondos-3:hsl(186, 88%, 13%);
    --color-fondos-4:hsl(185, 7%, 32%);
    --color-1: hsl(187, 73%, 24%);
    --color-2: hsl(194, 69%, 51%);
    --color-3: hsl(169, 44%, 88%);

    --sombras:
    0
    4px
    2px
    var(--color-textos-alfa); 
}


/** BODY **/
body {
    margin: 0;
    background-color: var(--color-fondos);
}

h1,
h2,
h3,
h4 {
    font-family: "Inter-Bold";
}

h1, 
h2 {
    color: var(--color-textos-3);
    font-size: 1.7em;
    background-color: var(--color-fondos-2);
    text-align: center; 
    padding-top: .45em;
    padding-bottom: .45em;
    width: 100%;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

section,
article {
    padding-bottom: 2rem;
}


/** HEADER **/
header {
    background: linear-gradient(to bottom, var(--color-1), var(--color-2));
    padding-top: .7em;
    padding-bottom: .7em;
}

header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin-inline: auto;
}

#logo img {
    background-color: var(--color-fondos);
    width: 5em;
    margin-top: .2em;
}

header nav ul {
    margin-block: 0;
    display: none;
}

header nav a {
    font-family: "Inter-Bold";
    text-transform: uppercase;
    color: var(--color-textos-3);
    background-color: var(--color-fondos-3);
    box-shadow: var(--sombras); 
    display: block;
    width: 5.7em;
    padding-block: .35em;
    border-radius: .5em;
    text-align: center;
}

header nav a:hover {
    background-color: var(--color-fondos-4);
}

.index .btn-index,
.plan .btn-plan,
.mapa .btn-mapa {
    background-color: var(--color-fondos-4);
}


/** MENU **/
.menu-btn {
    background-color: var(--color-fondos-3);
}

.menu-btn,
.menu-fondo {
    border-radius: 25%;
    padding: .4rem;
    padding-left: .5rem;
    width: 2.8rem;
    height: 2.8rem;
    cursor: pointer;
}

.menu-btn .btn-linea {
    width: 1.8em;
    height: 3px;
    margin-block: .4em; 
    background-color: var(--color-textos-3);
    transition: all 0.3s ease-out;
}


/** COMITENTE **/
.comitente {
    font-family: "Catamaran-Medium";
    font-size: 1em;
    margin-top: 2.5em;
}

.comitente div {
    width: 80%;
    margin-inline: auto;
    padding-top: 2.5em;
}

.comitente img {
    width: 13em;
    margin-top: 2em;
}


/** EQUIPO **/
.integrantes {
    width: 80%;
    margin-inline: auto;
}

.equipo article {
    display: block;
    text-align: center;
    margin-top: 2.5em;
}

.equipo article:not(:last-of-type) {
    border-bottom: solid 1px var(--color-fondos-3);
}

.equipo p {
    font-family: "Catamaran-Regular";
    margin-top: 1.3em;
}

.equipo img {
    border-radius: 50%;
    aspect-ratio: 1/1;
    box-shadow: var(--sombras);
    max-width: 14em;
    max-height: 14em;
    margin-bottom: 2em;
}

.equipo_textos a {
    font-family: "Inter-Bold";
    color: var(--color-textos-2);
    font-size: 1.6em;
}

.equipo_textos a:hover {
    color: var(--color-textos-4);
}



/** ACADEMICOS **/
.academicos > ul {
    width: 80%;
    margin-inline: auto;
    margin-top: 2em;
}

.academicos > ul > li:not(:last-of-type) {
    border-bottom: solid 1px var(--color-fondos-3);
    padding-block-end: 1.5em;
    margin-block-end: 1.5em;
}

.academicos {
    font-family: "Catamaran-Regular";
}

.academicos h3 {
    color: var(--color-textos-2);
    margin-top: 1em;
    margin-bottom: 1em;
}

.academicos img {
    width: 8em;
}
.uba img {
    border-radius: 50%;
    width: 8em;
    min-width: 8em;
}


/** MAPA **/
.mapa > div {
    width: 80%;
    margin-inline: auto;
    margin-top: 2em;
}

.mapa img {
    width: 100%;
}

.mapa {
    margin-top: 2.5em;
}


/** PLAN **/
.riocine {
    margin-top: 2.5em;
}

.plan {
    width: 80%;
    margin-inline: auto;
}

.plan p {
    font-family: "Catamaran-Medium";
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottom: 2em;
}

.MVP {
    display: flex;
    gap: 2em;
}

.MVP a {
    font-family: "Inter-Bold";
    text-transform: uppercase;
    color: var(--color-textos-3);
    background-color: var(--color-fondos-3);
    box-shadow: var(--sombras); 
    display: block;
    padding-block: .7em;
    padding-inline: 1em;
    border-radius: .5em;
    text-align: center; 
}

.funcioneswebapp {
    font-family: "Catamaran-Medium";
    font-size: 1em;
    list-style: disc;
    margin-left: 1em;
    margin-bottom: 2em;
}

.plan h4 {
    font-family: "Inter-Bold";
    margin-bottom: 1em;
}



/** FOOTER **/
footer {
    background-color: var(--color-fondos-3);
    color: var(--color-textos-3);
    font-family: "Catamaran-Regular";
    font-size: .6em;
}

footer p {
    width: 80%;
    margin-inline: auto;
    padding-top: 2em;
    padding-bottom: 2em;
}



/** A PARTIR DE 480 **/
@media (min-width:30em) {

    /** ACADEMICOS **/
        .uba {
            display: flex;
            align-items: center;
        }

        .uba {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
        }

        .uba .titulo {
            order: -1;
            width: 100%;
        }

        .uba img {
            margin-right: 1em;
        }

}


/** A PARTIR DE 640 **/
@media (min-width:40em) {

    /** MENU **/
    .menu-btn {
        display: none;
    }


    /** HEADER **/
    header {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    header nav,
    header nav ul {
        display: flex;
        gap: 1em;
    }
    
    /** no sé cómo hacer para que la descripción del comitente rodee el logo de acumar **/
     /** no me anda esto **/
     .comitente img {
        /** float: left;**/
    }
    

    /** EQUIPO **/
    .equipo_textos a {
        font-size: 1.3em;
    }

    .integrantes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1em;
    }

    .equipo article {
        margin-top: 2em;
    }


    /** ACADEMICOS **/
        .fadu {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
        }

        .fadu .titulo {
            order: -1;
            width: 100%;
        }

        .fadu ul {
            margin-left: 1em;
        }

        .dgpc {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
        }

        .dgpc .titulo {
            order: -1;
            width: 100%;
        }

        .dgpc ul {
            margin-left: 1em;
        }


    /** FOOTER **/
    footer {
        font-size: .7em;
    }

}



/** A PARTIR DE 880 **/
@media (min-width:55em) {
    /** EQUIPO **/
    .equipo article:not(:last-of-type) {
        border-bottom: none;
    }

    .equipo h2 {
        margin-bottom: 1em;
    }
}



/** A PARTIR DE 1120 **/
@media (min-width:70em) {

    /** HEADER **/
    header {
        padding-top: 1.3em;
        padding-bottom: 1.3em;
    }

    header .contenedora {
        width: 65%;
        margin-inline: auto;
    }

    /** BODY **/
    h1,
    h2 {
        width: 65%;
        margin-inline: auto;
        padding-top: .6em;
        padding-bottom: .6em;
    }

    .equipo h2 {
        width: 65%;
        margin-inline: auto;
        padding-top: .6em;
        padding-bottom: .6em;
    }
    

    /** COMITENTE **/
    .comitente div {
        width: 65%;
    }
  

    /** EQUIPO **/
    .integrantes {
        width: 65%;
    }

    .equipo_textos a {
        font-size: 1.5em;
    }

    .equipo p {
        font-size: 1.1em;
    }

    /** MAPA **/
    .mapa > div {
    width: 65%;
    margin-inline: auto;
    }


    /** PLAN **/
    .plan {
        width: 65%;
        margin-inline: auto;
    }

    /** ACADEMICOS **/
    .academicos > ul {
        display: flex;
        justify-content: space-between;
        width: 65%;
    }

    .academicos li {
        font-size: 1em;
    }

    .academicos .titulo {
        font-size: 1.3em;
    }

    .academicos h2 {
        font-size: 1.7em;
    }

    .uba {
        width: 30%;
    }

    .uba ul {
        display: flex;
        flex-direction: column;
    }

    .uba a {
        order: -2;
    }

    .fadu {
        width: 30%;
    }

    .fadu img {
        width: 13em;
    }

    .fadu a {
        order: -2;
    }

    .fadu ul {
        display: flex;
        flex-direction: column;
        margin-left: 0;
    }
 
    .dgpc {
        width: 30%;
    }

    .dgpc ul {
        display: flex;
        flex-direction: column;
        margin-left: 0;
    }

    .dgpc a {
        order: -2;
    }

    .academicos > ul > li:not(:last-of-type) {
        border-bottom: none;
    }

    .academicos h3 {
        margin-top: .1em;
        margin-bottom: .1em;
    }


    /** FOOTER **/
    footer {
        font-size: .8em;
    }

    footer p {
        width: 65%;
    }
}