@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500;700&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400&display=swap');

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

.html{ scroll-behavior: smooth;}
body {
    font-family: 'Barlow Condensed', sans-serif;
    background-color: #fdbb2d;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'header'
        'main'
        'footer';
    width: 100%;}
header {
        display: flex;
        background: black;
        padding: 1em;
        width: 100%;}
nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;}

header ul {
        font-family: 'Barlow Condensed', sans-serif;
        display: flex;
        gap: 1.5em;
        align-items: center;}
header a { color: #fd6e2d;
font-weight: 400;}
ul,li {list-style: none;}
li {padding: 0em 3em 0em 3em;}
a {text-decoration: none; width: 100%;}
#logodgpc {width: 10em;}
#logowebapp {width: 1em;}
#poster {width: 90%; margin-top: 1em;}
.webapp figure {
    margin-bottom: 2em;
    display: flex;
    justify-content: center;}
.webapp {
    color: white;
    font-size: 0.8em;
    font-weight: 300;
    grid-area: 2/1/3/3;
    display: grid;
    margin: 2em;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;}
h1 {color: white;
    font-weight: 300;
    grid-area: 1/2/2/3;
    font-size: 2em;;}
h3 {font-weight: 400;}
h2 {margin-top: 3em;
    font-weight: 400;
    text-align: left;
    margin-left: 4em;}
footer {
    background: black;
    color: #9fd283;
    font-family: 'Rubik Regular', sans-serif;
    font-size: 0.8em;
    padding: 2em 6em 2em 6em;
    text-align: left;
    width: 100%;}
section {padding: 0.5em;}
li {
    padding: 0em 1em 0em 1em}
.integrantes {
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-template-rows: auto auto;
    text-align: right;
    color: white;
    padding: 0em 5em 0em 5em;
    gap: 0.5em;
    margin-top: 2em;
    grid-area: 1/1/2/3;
    width: auto;}
.presentacionzoe {grid-area: 2/1/2/2;}
.presentacionbarbi {grid-area: 2/2/2/3;}
#titulovm04 {grid-area: 1/2/2/3;}
header li:hover {-webkit-text-fill-color: white;}
.presentacionzoe, .presentacionbarbi {
    display: flex;
    flex-direction: column;}
#fotobarbi, #fotozoe {width: 100%;}

/*WEB PLAN*/
#h1plan {text-align: right;font-weight: 400;}
.plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0fr 1fr;
    margin: 2em;}
figure.fotosplan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-area: 2/1/3/3;
    gap: 0.5em;}
#persona, #mvp {width: 100%;}
#empatia {width: 100%; grid-area: 2/1/3/3;}
#persona {grid-area: 1/2/2/3;}
#mvp {grid-area: 1/1/2/2;}
aside ul {
    display: flex;
    padding: 0.5em 0em 3em 0em;
    justify-content: space-evenly;}
aside li {
        display: flex;
        background: black;
        border-radius: 0.5em;
        height: 2em;
        width: 20%;
        align-items: center;
        text-align: center;
    }
#bodyplan {background: #fd6e2d;}
main aside a {
    width: 100%;
    color: white;} 
li:hover {background:linear-gradient(90deg, rgba(38,240,242,1) 0%, #9fd283 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%); color: white; border-radius: 0.5em;}
.grillanecesariamuy {display: grid;
grid-template-columns: 2fr 2fr;
grid-template-rows: auto 2fr;}

main.recorrido {display: grid;
    grid-template-columns: auto;
    grid-template-rows: 2fr 2fr;}
main.recorrido aside {margin-top: 5em;}
section.mapaderecorrido {grid-area: 1/1/2/2;margin-top: 5em;}
#maparecorrido {width: 100%;}
.mapaderecorrido h1 {margin:0em;}
@media screen and (min-width: 768px){
    #fotobarbi, #fotozoe {width: 15.5em;}
}

    @media screen and (min-width: 992px){
.integrantes {grid-template-columns: 2fr 2fr 2fr 2fr; margin: 2em 1em 0em 1em;}
.webapp {margin-left: 7%;}
.presentacionzoe {grid-area: 2/3/3/4;}
.presentacionbarbi {grid-area: 2/4/3/5}
#titulovm04 {grid-area: 1/4/2/5}
}