:root {
    --primary: #d6dad6;
    --primaryDark: #a0a7a1;
    --secondary: #0c2e15;
    --White: rgb(253, 242, 242);
    --black: rgb(177, 177, 177);

    --mainFont: 'Staatliches', cursive;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* -------------------------------------------------------------------------- */
/*                                  Globales                                  */
/* -------------------------------------------------------------------------- */

body {
    max-width: 100%;
    background-color: var(--primary);
    font-size: 1.6rem;
    /* line-height: 1.5; */

}

p {
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(65, 64, 64);
    font-weight: bold;
}
@media (min-width: 768px) {
    p {
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        color: rgb(65, 64, 64);
        font-weight: bold;
    } 
} 


a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.container {
    max-width: 20rem;
    margin: 0 auto; /* centrar */
    display: block;
    text-align: center;
    
}

h2, h3 {
    text-align: center;
    color: rgb(65, 64, 64);
    font-family: var(--mainFont);
    letter-spacing: .3rem;   
}

h1 {
    text-align: center;
    font-size: 2rem;
    margin: 0;
    padding: .5rem;
    letter-spacing: 3px;
    color:rgb(65, 64, 64);
    font-family:'Rubik', sans-serif;

}

h2 {font-size: 3.2rem;}
h3 {font-size: 2.4rem;}

/* -------------------------------------------------------------------------- */
/*                                   Header                                   */
/* -------------------------------------------------------------------------- */

.header {
    display: flex;
    justify-content: space-between;

}

@media (min-width: 768px) {
    .header {
        display: flex;
        justify-content: space-between; 
        margin: 0 5rem;  
    } 
}

.header__logo {
    max-width: 15rem;
    margin-left: .5rem .5rem;
}

@media (min-width: 768px) {
    .header__logo {
        display: flex;
        padding-left: 1rem;
        margin: 1rem 0;
        max-width: 20rem;
    } 
}

.icon {
    max-width: 2rem;
    max-height: 2rem; 
    margin-top: 1rem; 
}

@media (min-width: 768px) {
     .icon { 
        max-width: 3rem;
        max-height: 3rem; 
        margin-top: 1rem; 
     }
}

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

@media (min-width: 768px) {
    .right {
        display: flex;
        justify-content: flex-end;
    }    
}



h4 {
    
    font-size: .8rem;
    margin: 1.5rem .5rem;
    font-family:'Rubik', sans-serif;
    text-transform: uppercase;
    color: var(--White);
    text-shadow: var(--secondary) .1rem .1rem 1rem;
    padding-bottom: 1.3rem;
}

@media (min-width: 768px) {
    h4 {
        position: relative;
        float: right;
    }
}

/* -------------------------------------------------------------------------- */
/*                                 Navegation                                 */
/* -------------------------------------------------------------------------- */

.margen {
    background-color: #5f7d95;
    height: .5rem;
}

.nav {
    background-color: var(--black);
    position: relative;
}


.return {
    width: 2rem;
    margin: .5rem 10rem;
    position: absolute;
}

@media (min-width: 390px) {
    .return {
    width: 2rem;
    margin: .5rem 8rem;
    position: absolute;
    }
}

@media (min-width: 540px) {
    .return {
    width: 2.5rem;
    margin: .3rem 0 0 18rem;
    position: absolute;
    }
}

@media (min-width: 768px) {
    .return {
        width: 2.5rem;
        margin-left: 30rem;
        position: absolute;
    }    
}

@media (min-width: 940px) {
    .return {
    width: 2.5rem;
    margin-left: 35rem;
    position: absolute;
    }
}

@media (min-width: 1200px) {
    .return {
    width: 2.5rem;
    margin-left: 55rem;
    position: absolute;
    }
}

/* -------------------------------------------------------------------------- */
/*                                  Body                                  */
/* -------------------------------------------------------------------------- */

.back {
        padding: 1rem; 
        color: rgb(65, 64, 64);
        max-width: 80%;
        max-height: 100%;
        margin: 0 auto;
        background-image: url(../img/nosotros4.jpg);
        background-repeat: no-repeat;
        background-size: cover;       
}

button {
    
    width: 100%;
    height: 5rem;
    background-color: rgb(177, 177, 177);
    border: none;
    color: rgb(255, 254, 254);
    font-family: 'Rubik', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: .07em;
    font-weight: bold;
    margin: 4px auto;
    transition: 0.3s;
    box-shadow:var(--secondary);
    border-radius: 5px;
}

.effect:hover {
    background-color: var(--White);
    color:var(--black);  
}


/* -------------------------------------------------------------------------- */
/*                                  Productos                                  */
/* -------------------------------------------------------------------------- */

.we {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
}

@media (min-width: 540px) {
    .we {
        display:flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
}

p {
    text-align: left;
    margin: 2rem;
    margin-top: 0;
}

@media (min-width: 768px) {
    p {
        text-align: left;
        margin: 2rem;
        font-size: 1.5rem;
        margin-top: 0;
    }
}

.esp p {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
    background-color: #5f7d9565;
    padding: 1rem; 
}

.pejerrey p {
    background-color: var(--primary);
    font-size: 14px;
    color: #5f7d95;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(8, auto);
    padding: 10px;
    text-align:left;
    align-items: center;
    justify-items: start;
    justify-content: center;
}

@media (max-width: 760px) {
     .grid {
         margin: auto;
         width: 90%;     
     }
}

.nls, .nlc, .nlv, .nlm, .nhs, .nhc, .nhm, .bc {
    text-transform: uppercase;
    grid-column: 1;}

.pls, .plc, .plv, .plm, .phs, .phc, .phm, .par {grid-column: 2;}

.par {grid-row: -9 / -8;}
.pls {grid-row: -7 / -8;}
.plc {grid-row: -7 / -6;}
.plv {grid-row: -6 / -5;}
.plm {grid-row: -5 / -4;}
.phs {grid-row: -4 / -3;}
.phc {grid-row: -3 / -2;}
.phm {grid-row: -2 / -1;}

.burger {
    display: block;
    justify-content: center;
    position: relative;
    width: 30%;
    height: 10%;
}

@media (min-width: 768px) {
    .burger {
        display: block;
        position: relative;
        width: 30%;
        height: 10%;
        justify-content: auto;   
    }
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */

.footer {
    background-color: var(--primaryDark);
    
}

.footer__texto {
    font-family:var(--mainFont);
    text-align: center;
    font-size: .8rem;
    color:var(--White);
    letter-spacing: .10rem;
    margin-left: 1rem;
    display: flex;
    justify-content: flex-end;
    padding: .5rem;
}