@import url('satoshi.css');

* {
    box-sizing: border-box;
    margin: 0;
    list-style: none;
} 

body {
    font-family: 'Satoshi', sans-serif;
}

a {
    text-decoration: none;
    color: #171222;
}

header {
    display: flex;
    width:100%;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-transform: uppercase;
    background-color: #FEFAEF;
    border-bottom:#171222 1px solid;
    position: fixed;
    z-index: 1;
}

header ::selection {
    background: #2142ff;
    color: #FBFAF7;
}

header img {
    width: 61px;
    height: auto;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 2.2rem;
    padding: 0;
    margin: 0;
    font-weight: 100;
}

.inicio :hover {
    color: #f71e1b;
    transition: .3s;
}

.plan :hover {
    color: #f87218;
    transition: .3s;
}

.mapa :hover {
    color: #fcc121;
    transition: .3s;
}

.webapp :hover {
    color: #2EBDEF;
    transition: .3s;
}

main {
    display: block;
    padding: 0;
    color: #171222;
    background-color:#FEFAEF;
}

/* Landing */

.landing {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    margin: 0;
}

video {
    width: 100%;
    height: auto;
    grid-column: 1;
    object-position: center;
}

/* Proyecto */

.proyecto {
    display: grid;
    grid-template-columns: 150px auto;
    padding-top: 5rem;
    gap: 6rem;
}

.proyecto ::selection {
    background: #2EBDEF;
    color: #FBFAF7;
}

.info-proyecto {
    padding-right: 4rem;
    justify-self: center;
}

.info-proyecto a {
    font-size: 1.25rem;
    font-weight: 700;
    transition: .5s;
}

.info-proyecto a:hover{
    color: #2EBDEF;
    transition: .3s;
}

.info-proyecto a:hover::after{
    content: " ←";
    transition: .3s;
}

h2 {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500;
    padding-top: 2pt;
    padding-left: 2rem;
}

h1 {
    font-size: 1.667rem;
}

.proyecto p {
    max-width: 69ch;
    padding-top: .5rem;
    padding-bottom: 1.5rem;
}

.proyecto span {
    font-weight: 500;
}

/* Nuestro equipo */

.nuestro-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    padding-top: 5.5rem;
    gap: 6rem;
}

.nuestro-equipo ::selection {
    background:#fcc121;
    color: #FBFAF7;
}

.nuestro-equipo .contenedora-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-width: 800px;
    min-width: 0;
    padding-right: 4rem;
    padding-top: 4pt;
    gap: 2rem;
    row-gap: 3rem;
}

.contenedora-equipo article {
    padding: 1rem;
    border:#171222 1px solid;
    text-align: center;
    max-width: 100%;
}

.nuestro-equipo img {
    width: 100%;
    height: auto;
}

.nuestro-equipo p{
    font-size: 0.833rem;
    padding-top: .2rem;
    opacity: 80%;
}

.nuestro-equipo h3{
    font-size: 1.083rem;
    padding-top: .2rem;
}

.nuestro-equipo a {
    display: inline-block;
    margin-top: .7rem;
    padding: .4rem 1rem;
    border: #171222 1px solid;
    text-transform: uppercase;
    font-size: 9pt;
    font-weight: 400;
    transition: .3s;
}

.nuestro-equipo a:hover {
    text-decoration: underline;
    transition: .3s;
    color:#fcaa13;
    border: #fcaa13 1px solid;
}

/* Datos académicos */

.datos-academicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    padding-top: 8rem;
    padding-bottom: 5rem;
    gap: 6.5rem;
}

.datos-academicos ::selection {
    background:#f87218;
    color: #FBFAF7;
}

.datos-academicos img {
    width: 90%;
    height: auto;
}

.datos-academicos .loguito {
    height: 38px;
    width: auto;
}

.datos-academicos h3 {
    font-size: 0.917rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
}

.datos-academicos ul li {
    font-size: 0.833rem;
    padding-bottom: .2rem;
}

.datos-academicos ul {
    padding: 0;
}

.datos-academicos>ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
    align-items: baseline;
    max-width: 850px;
    min-width: 0;
    padding-right: 4rem;
    gap: 2rem;
}

.datos-academicos>ul>li {
    max-width: 220px;
}

.datos-academicos .uba{
    padding-right: 0.75rem;
}


.datos-academicos a {
    display: inline-block;
    font-size: 0.917rem;
    padding-top: 1rem;
    padding-bottom: .5rem;
    font-weight: 600;
    transition: .3s;
}

.datos-academicos a:hover{
    text-decoration: underline;
    color:#f87218;
    transition: .3s;
}

.datos-academicos span {
    font-weight: 500;
}

.datos-academicos p {
    padding-bottom: .5rem;
    padding-top: .5rem;
    opacity: 60%;
}

.datos-academicos h4 {
    font-weight: 500;;
}

/*Mapa*/

.site-map {
    display: flex;
    padding-top: 6rem;
    padding-bottom: 4rem;
    gap: 6rem;
}

.site-map img {
    width: 70%;
    min-width: 400px;
    height: auto;
    padding-top: 1rem;
}

.site-map ::selection{
    background:#2EBDEF;
    color: #FBFAF7;
}

.separador-mapa {
    border-bottom: #171222 1px solid;
    margin-bottom: 2.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    opacity: 30%;
}

.mapa-empatia {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    padding-bottom: 4rem;
}

.mapa-empatia img {
    grid-row: 2;
    width: 80%;
    min-width: 400px;
    height: auto;
    justify-self: center;
    align-self: center;
    padding-left: 1.5rem;
}

.mapa-empatia h2 {
    padding-top: 1rem;
}

.mapa-empatia ::selection {
    background:#fcc121;
    color: #FBFAF7;
}

/* Plan */

.usuario-mvp {
    display: grid;
    grid-template-columns: 150px auto;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

.usuario-mvp ::selection {
    background: #2EBDEF;
    color: #FBFAF7;
}

.imagenes-usuario-mvp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 80%;
    gap: 2rem;
    justify-self: center;
    padding-top: .4rem;
}

.usuario-mvp img {
    width: 100%;
    height: auto;
}

.propuestas ::selection {
    background: #fcc121;
    color: #FBFAF7;
}

.propuestas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.propuestas img {
    width: 80%;
    height: auto;
    justify-self: center;
    align-self: center;
}

/* Footer */

footer {
    color:#FEFAEF;
    background-color: #171222;
}

footer p {
    padding: 2rem;
    text-align: center;
    font-size: 10pt;
    font-weight: 300;
}

footer ::selection {
    background: #f71e1b;
    color: #FBFAF7;
}