/* General */
html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Poppins', sans-serif;
}
h1{
    font-size: 1.6875rem;
    line-height: 1.6875rem;
    letter-spacing: 0.4px;
}
h1,
h2,
h3,
h4,
h5,
h6{
    font-weight: 700;
    color: #616161;
}
p{
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.4px;
    color: #434242;
}
.pt-section{
    padding-top: 6%;
}
.hr-section{
    opacity: 1;
    width: 25%;
    border-bottom: 2px solid #E1BAAE;
}
.vr{
    width: 2px;
    color: #A4CE90;
    padding: 0;
    opacity: 1;
}
footer{
    background-color: #A4CE90;
    margin: 5% 0 0 0;
}
.flotante {
    position: fixed;
    width: 56px;
    height: 56px;
    bottom: 56px;
    right: 8px;
    background-color: #A4CE90;
    border-radius: 50px;
    box-shadow: 2px 2px 3px black;
    z-index: 6;
    padding: 10px;
}
.flotante img{
    width: 40px;
}
/* Header */
.headerNav {
    background-color: #A4CE90;
    padding: 2.5px 0;
}
.headerNav ul li > .active{
    color: #719E5B !important;
}
.redesHeader ul li {
    list-style: none;
    transition: 150ms ease-in;
}
.redesHeader ul li:hover {
    background-color: #D4DFBD;
    border-radius: 100%;
}
.btn--hero {
    width: 365px;
    background-color: #E1BAAE;
    transition: 150ms ease;
}
.btn--hero:hover {
    background-color: #E29E88;
}
.btn--hero > img{
    width: 2.25rem;
}
.hero{
    margin-top: 72px;
    width: 100%;
    height: 73vh;
    background-size: cover;
    background-position: center;
}

/* Section: Quienes Somos  */
.quienesSomos__bg{
    position: absolute;
    z-index: -1;
    width: 100%;
    height:100%;
    background-repeat:no-repeat;
    background-image: url(../img/bg-quienes-somos.png);
    background-position: left top;
    top: -100px;
}

/* Section: Productos */
.product{
    position: relative;
    width: 100%;
    padding-top: 106.06%;
    background-repeat:no-repeat;
    background-size:contain;
    box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #F2F2F2;
}
.product__hover{
    position: absolute;
    width: 100%;
    bottom: 0;
    border-radius: 0 0 8px 8px;
    background-color: #E29E88;
    cursor: pointer;
}
.products__group--1{
    margin-top: 72px;
}
.products__group--3{
    margin-top: 160px;
}
.products__group--4{
    margin-top: 324px;
}
.products__background{
    position: absolute;
    z-index: -1;
    width: 100%;
    height:100%;
    background-size: 25%;
    background-repeat:no-repeat;
}
.products__background--1{
    right: 5%;
    top: 110px;
    background-image: url(../img/bg-products-1.png);
    background-position: right top;
}
.products__background--2{
    left: 4%;
    bottom: -10px;
    background-image: url(../img/bg-products-2.png);
    background-position: left bottom;
}
.modal-img{
    width: 100%;
    max-width: 70vh;
    border-radius: 8px;
}

/* Section: Como comprar  */
.comoComprar__bg{
    position: absolute;
    z-index: -1;
    width: 100%;
    height:100%;
    background-size: 100%;
    background-repeat:no-repeat;
    background-image: url(../img/bg-comoComprar.png);
    background-position: center;
}
.hr-comprar{
    opacity: 1;
    border-bottom: 2px solid #A4CE90;
}
.comoComprar__redes {
    transition: 150ms ease-in;
}
.comoComprar__redes:hover {
    background-color: #D4DFBD;
    border-radius: 100%;
}

/* Section: mapa o ubicacion  */
.ubicacion__bg{
    position: absolute;
    z-index: -1;
    width: 100%;
    height:100%;
    background-repeat:no-repeat;
    background-image: url(../img/bg-ubicacion.png);
    background-position: left top;
    left: 68px;
    top: -68px;
}
.hr-ubicacion{
    padding: 8px;
    background-color: #A4CE90;
    opacity: 1;
}


/* MEDIA QUERIES */
@media (max-width: 575px){
    .navbar-nav{
        background-color: #D4DFBD;
        width:60%;
        box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.25);
        margin-top: 2.5px;
    }
    .headerNav{
        max-height: 72px;
    }
    .products__group--1{
        margin-top: 0;
    }
    .products__group--3{
        margin-top: 0;
    }
    .products__group--4{
        margin-top: 0;
    } 
    .products__background{
        background-size: 190px;
    }
    .products__background--2{
        left: 0;
        bottom: -75px;
    }
    .btn-mas{
        z-index: 1;
        color: #719E5B;
        padding: 10px 12px;
        background: #D4DFBD;
        border-radius: 8px;
    }
    .product__hover > h1{
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.25rem;
    }
    .btn-llegar{
        background: #A4CE90;
        box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        padding: 7px;
    }
    .pt-section{
        padding-top: 70px;
    }
    .ubicacion__bg{
        background-position: right center;
        left: -40px;
        top:0;
    }
}

@media (min-width: 576px) and (max-width: 991px){
    .products__group--3{
        margin-top: 64px;
    }
    .products__background{
        background-size: 35%;
    }
    .products__background--1{
        top: 0;
    }
    .product__hover > h1{
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.25rem;
    }
    .ubicacion__bg{
        left: 0;
    }
}

@media (min-width: 992px){
    .m-page{
        margin: 0 5.55%;
    }
    .product__hover{
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        border-radius: 8px;
        transition: ease-in 250ms;
    }
    .product:hover > .product__hover {
        opacity: 1;
        visibility: visible;
    }
}