@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');

/* -------------REGLAS MOBILE FIRST------------------ */

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

html{
    height: -webkit-fill-available;
}
img {
    max-width: 100%;
    height: auto;    
}

body { 
    font-family: 'Raleway', sans-serif;
    margin: 0;
    text-align: center;
    background-color: rgb(255, 235, 217);

    min-height: 100vh;
    min-height: -webkit-fill-available;  
    
    padding-left: 1em;
    padding-right: 1em;   
}

figure img {
    width: 60%;
    border-radius: 100%;
}

h1{
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.9em;
    margin: auto;
    padding: 0 0 1em 0;
}


h2{
    font-size: 1.5em;
    font-weight: 700;
    padding: 0.2em 0.2em 0.2em 0.2em;
    
    width: 100%;
    height: 100%;
}

h3{
    font-size: 1.2em;
    font-weight: 700;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

h4{
    font-weight: 700;
}

p{
    font-weight: 400;
    font-size: 1em;
    padding: 0.1em;
    line-height: 1.5em;
}

#bocetos {
    background-color: rgb(255, 196, 138);
    padding: 0.5em 0 1em 0;
}

.individuales{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: left;
    margin: 0 1em 0 1em;
}

.individuales h2{
    padding-bottom: 1em;
}

#bocetos{
    display: flex;
    flex-wrap:wrap;

    flex-direction: column;
    
    align-content: center;
    margin: auto;
    
}

#bocetos div{
    margin:auto;

    padding: 0.5em;
}

#mockupwebapp a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(0, 255, 213);
    
    color: rgb(42, 105, 95);
    padding: 0.2em;
    
    align-content: center;
    border-radius: 10%;
}

#analisis a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(0, 255, 213);
    
    color: rgb(42, 105, 95);
    padding: 0.2em;
    
    align-content: center;
    border-radius: 10%;
}

#mockuprotulo a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(0, 255, 213);
    
    color: rgb(42, 105, 95);
    padding: 0.2em;
    
    align-content: center;
    border-radius: 10%;
}

#presentacion{
    margin: auto;
    text-align: center;
    padding: 3em 0;
    line-height: 2em;

    background-color:rgb(255, 197, 139);

    width: 100%;
}

.historia{
    padding-top: 1em;
    padding-bottom: 0.5em;
    text-align: left;
    margin: 0 1em 0 1em;
}

header {
    background-color: rgb(255, 214, 176);
    padding: 0.8em 0 0.8em 0;
}

.menu nav ul{
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    align-items: center;
}


header div img {
    background-color: white;
    display: block;
    padding: 0.2em 0.2em 0.2em 0.2em;
    margin: auto;
    align-items: center;

    width: 25%;
}

header ul li{
    
    line-height: 2em;
    align-content: center;
    height: 2em;

    display: block;
     
    margin: 0 0 0 0;
            min-width: 8em;
    padding: 0.5em;
    
} 

header ul{
    margin: 5em 0 5em 0 5em;
}


header ul li a{
    color: rgb(42, 105, 95);
    font-size: 1.2em;
    background-color: rgb(0, 255, 213);
    border-radius: 8%;
    

    width: 100%;
    height: 100%;
    padding: 0.1em 1em 0.1em 1em;
      
}  

header ul li a:hover{
    color: rgb(255, 173, 96);
    background-color: white;
}

.contenedor {
    max-width: 50em;
    margin: 0 auto;
}

main {
    
    padding: 1em 0;
    
}

.integrante{
    background-color: rgb(230, 209, 189);
    padding: 1em;
    margin:1em 0 0 0;
    
}

.integrante img{
    width: 30%;
    border-radius: 100%;
}

#webapp{
    padding-top: 1em;
    padding-bottom: 0.5em;
    text-align: left;
    margin: 0 1em 0 1em;
}

#webapp h4{
    padding-top: 0.5em;
}

#datos{

    padding-top: 1em;
    padding-bottom: 0.5em;
    text-align: left;
    margin: 0 1em 0 1em;
    line-height: 1.5em;

}

#datos ul li{
    list-style: none;
}

.equipo h2{
    
    text-align: left;
    margin:0.5em;    
}


footer {
    background-color: rgb(255, 214, 176);
    padding: 0.2em;
    align-content: center;
    
} 
.redes {
    
    font-size: 0.9em;
    display: block;
    padding: 0.2em;
}

.redes h5{
    padding: 0 0 1em 0;    
}

footer article img {
    max-width: 07%;
    height: auto;
    
}

.bajada {
    
    font-size: 0.6em;
    padding:1em;
}


/* --------------------------- REGLAS DESKTOP -------------------------*/

/* ---------- Dispositivos 600 px de ancho / tablets ----------------*/

@media screen and (min-width: 600px) {



    figure img {
        width: 40%;
        border-radius: 100%;
    }

    .equipo a img{
        width: 50%;
        border-radius: 100%;
    
    }

    header ul li{
        
        line-height: 2em;
        height: 2em;
    
        display: flex;  
        
        margin: 0 0 0 0;
        min-width: 6em;
        
    } 
        
    header ul li a{
        color: rgb(42, 105, 95);
        font-size: 1.2em;
        background-color: rgb(0, 255, 213);
        border-radius: 8%;
        
    
        width: 95%;
        height: 100%;
    
        display: flex;
    
        justify-content: center;
    
        align-items: center;
        
    }

    #bocetos{

        display: flex;     
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        margin: auto;
        
    }
    
    .vm12{
        display: flex;
        flex-direction: row;
        justify-content:space-between;

        
        padding:10px;
        margin: auto;
 
    }

    .vm12 .integrante{
        margin: 0.5em;
        
    }

    .bajada {
        font-size: 0.7em;
    }

}

/* ---------- Dispositivos 992 px de ancho / desktops ----------------*/

@media screen and (min-width: 992px) {

    

    header section img{
        width: 10%;
    }

    header {
        
        padding: 0.8em 0 1.5em 0;
    }

    header ul li a{
        font-size: 1.5em;
        
        padding: 0.7em;
    }  

    figure img {
        width: 30%;
        border-radius: 100%;
    }

    body { 
    
        display: flex;
        
        flex-direction: column;
    
        justify-content: space-between;

        align-content: center;
        margin: auto;

        padding-left: 5em;
        padding-right: 5em;
       
    }

    h1{
        font-size: 3em;
    }

    #presentacion figure figcaption{
        padding: 1em 0 0 0;
    }


    .integrante img{
        width: 30%;
        border-radius: 100%;
    }

    .historia{
        display: flex;
        
        justify-content: space-between;
        
        
    }

    .historia div{
        width: 50%;
        padding-bottom: 0.5em;
        padding-top: 1em;
        padding: 0.5em;        
    }

       

    #webapp{
        display: flex;
        flex-direction: column;
               
    }


    #webapp > h3{
        width:100%;
        
    }


    .info{
        display: flex;
        justify-content:space-between;
        flex-direction: row;
        
        width: 100%;     
             
    }

    .info section{
        max-width: 33%;

    }
    

    #datos ul{
        display: flex;
        flex-direction: row;  
        justify-content: space-between;

        flex-wrap: wrap;
        
        padding-top: 1em;
    }

    

    .reconectate{
        display: flex;
        flex-direction: row;

        justify-content: space-between;
        flex-wrap: wrap;
        
    }

    .reconectate article{
        width: calc(50% - .5em);
    }

   
    footer article img {
        max-width: 04%;
        height: auto;
        
        margin: 1em;
    }

    .bajada{
        font-size: 0.9em;
    } 
    

   

   

    

    


    

}