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


    /* font-family: "Rubik", sans-serif;
 
    font-weight: 400;
    font-style: normal; */

    /* font-family: "Urbanist", sans-serif;

    font-weight: <weight>;
    font-style: normal; */
    font-family: "Urbanist", sans-serif;

    /* font-weight: 500; */
    font-style: normal;
    font-size: 1.2rem;

    /* color: aliceblue; */
    scroll-behavior: smooth;
}

body {
    background: rgb(224, 255, 192);
    background: linear-gradient(90deg, rgba(224, 255, 192, 1) 0%, rgba(137, 187, 88, 1) 100%);
}


.container-menu {

    width: 100%;
    display: flex;
    position: relative;
    top: 0;
    left: 0;

    align-items: center;
    justify-content: center;




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

    -webkit-box-shadow: 0px 11px 20px -9px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 11px 20px -9px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 11px 20px -9px rgba(0, 0, 0, 0.4);
}


.logo {
    max-height: 10vh;
    border-radius: 50%;
}

.home {
    width: 100%;
    height: 90vh;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 60px;

    overflow: hidden;


    padding: 10px 15px;

    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);

    -webkit-box-shadow: 0px 11px 20px -9px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 11px 20px -9px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 11px 20px -9px rgba(0, 0, 0, 0.5);
}

.home .home-text {

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 40px;
}

.home h1 {
    font-size: 3.5rem;
}



.imagen-portada {

    position: absolute;
    z-index: -5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-us {
    width: 100%;

}

.container-about-us {
    width: 100%;
    padding: 30px;

    display: flex;
    flex-direction: column;
    row-gap: 30px;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;


    text-align: center;

}

.intro-about-us {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    text-align: center;

    /* margin: 10px; */
}

.intro-about-us h2 {
    font-size: 1.6rem;
    font-weight: 700;
}

.intro-about-us p {
    font-size: 1.2rem;
    font-weight: 500;

}



.container-block {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    padding: 20px;

    background: rgb(91, 196, 153);
    background: linear-gradient(141deg, rgba(91, 196, 153, 1) 0%, rgba(52, 136, 75, 1) 100%);
    border-radius: 20px;

    -webkit-box-shadow: 0px 0px 13px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 13px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 13px -4px rgba(0, 0, 0, 0.75);
}

.dias-zonas,
.pagos {
    padding-bottom: 5px !important;
}

.container-block ul {

    list-style: none;

}

.container-block ul li {

    padding: 15px 0;
}

.container-block ul li span {

    font-weight: bold;

}

.container-block .hr-dias {

    border: 1px solid black;
}


.container-block h3 {

    font-weight: bold;
}

/* -------------------------------------Shop */

.container-shop {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: start !important;
    row-gap: 15px;
}

.container-shop h2 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 25px;


}


.container-shop .titulo-tienda {
    margin: 10px;
    width: 100%;
    text-align: center;
    background-color: #89898942;
    padding: 10px;
    /* border-radius: 10px;  */
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}



.container-shop .aclaraciones-productos {
    text-align: center;
    border-radius: 20px;
    margin-bottom: 15px;
    font-weight: 500;
}






.container-shop .container-shops-productos {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;

}

.container-shop .filtro-categoria {

    width: 80%;

    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

.container-shop .filtro-categoria .boton-filtro {
    background-color: transparent;
    border-style: none;
    width: 100%;
    color: black;
    cursor: pointer;

}



.container-shop .filtro-categoria .titulo-filtro-categoria {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 1.5rem;
    font-weight: 900;
    text-align: start;

}

.container-shop .filtro-categoria .titulo-filtro-categoria i {
    transition: transform 1s;

}


.rotacion-icono-filtro {
    transform: rotate(180deg);
}

.container-shop .filtro-categoria .separador-filto-categoria {
    border: 2px solid rgb(34, 75, 45);
    margin-bottom: 25px;
    width: 115%;
    -webkit-box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.3);
box-shadow:0px 2px 10px 2px rgba(0,0,0,0.3);
}



.container-shop .productos {

    width: 100%;

    grid-template-columns: repeat(auto-fit, minmax(100px, 400px));
    grid-template-rows: repeat(auto-fit, 1fr);
    justify-content: center;
    align-items: center;
    row-gap: 20px;
    column-gap: 20px;
    display: grid;

    padding: 10px 5px;
    display: grid;

    scroll-margin-top: 10px;


    overflow: hidden;
    transition: height 0.1s ease-in-out;

}

.container-shop .productos:not(.active) {
    display: none;
}



.display-none {
    display: none !important;
}


.container-shop .container-producto {


    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    min-height: 450px;

    /* margin: 5px; */

    border-radius: 20px;
    background-color: #a7c0b4bd;


    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

.container-shop .container-producto img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
}

.container-shop .container-producto .producto-text {


    max-width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 10px;


    padding: 10px 10px 0px 10px;

    margin-bottom: -5px;
    text-align: center;

}

.container-shop .container-producto .producto-text .nombre-producto {
    max-width: 100%;
    font-weight: 800;


}


.container-shop .container-producto .producto-text .presentacion-producto {

    color: darkslategrey;

}

.container-shop .container-producto .producto-text .precio-producto {
    font-weight: 700;

}


.container-shop .container-producto .producto-text .botones-producto {

    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;




}


.container-shop .container-producto .producto-text .boton-producto {

    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: none;

}



/* -------------------------------------SHOPPING LIST */



.wrapper-shopping-list {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;


}

.container-shopping-list {
    width: 50%;
    height: 95vh;

    position: fixed;
    top: 0;
    right: 0;


    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    row-gap: 15px;


    padding: 10px 15px;
    box-shadow: none;

    border-radius: 0px 0px 0px 50px;
    background-color: #ffffff;

    transform: translateX(120%);
    transition: transform 1s, box-shadow 1s;


}

.shopping-open {
    transform: translateX(0%);
    -webkit-box-shadow: -11px 9px 112px 12px rgba(0, 0, 0, 0.69);
    -moz-box-shadow: -11px 9px 112px 12px rgba(0, 0, 0, 0.69);
    box-shadow: -11px 9px 112px 12px rgba(0, 0, 0, 0.69);
}


.show {
    position: fixed;
    top: 0;
    right: 0;

    margin: 5%;
    padding: 20px;

    cursor: pointer;
    border-style: none;
    background-color: rgba(0, 0, 0, 0.624);
    border-radius: 50%;
    color: rgb(255, 255, 255);

    display: flex;
    justify-content: center;
    align-items: center;
}


.show i {
    font-size: 2rem;

}

.back-to-top {
    position: fixed;
    left: 0;
    bottom: 0;

    margin: 5%;
    padding: 10px;

    cursor: pointer;
    border-style: none;
    background-color: rgba(0, 0, 0, 0.624);
    border-radius: 5px;
    color: rgb(255, 255, 255);

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
}

.back-to-top-button {

    cursor: pointer;
    border-style: none;
    background-color: transparent;

    color: rgb(255, 255, 255);
    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;
}



.container-shopping-list .hide {
    position: absolute;
    top: 15px;
    left: -30px;
    color: black;

    padding: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.container-shopping-list .hide i {
    font-size: 2rem;
}

.container-shopping-list .shopping-list-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: large;
}

.container-shopping-list .shopping-list-text h2 {
    font-weight: 900;
    font-size: 1.5rem;

}

.container-shopping-list .shopping-list-text h3 {
    font-weight: 800;
}


.wrapper-lista-articulos-seleccionados {
    width: 100%;
    height: 100%;
    overflow: auto;
}


.lista-articulos-seleccionados {
    width: 100%;
    /* height: 100%; */
    margin: 10px 0 15px 0;
    border-collapse: collapse;
    font-size: 1rem;
}



tbody>tr:nth-of-type(even) {
    background-color: #9bb4a78f;
}


tbody>tr:nth-of-type(odd) {
    background-color: #a7c0b463;
}

.lista-articulos-seleccionados thead {
    background: rgb(91, 196, 153);
    background: linear-gradient(141deg, rgba(91, 196, 153, 1) 0%, rgba(52, 136, 75, 1) 100%);
}


.lista-articulos-seleccionados th,
.lista-articulos-seleccionados td {

    vertical-align: middle;
    text-align: center;

    border: 1px solid rgb(0, 0, 0);
    padding: 8px 10px;
    font-size: 1rem;

}


.remove-item-from-list {
    background-color: transparent;
    border-style: none;
    color: red;
    cursor: pointer;
}

.producto-en-lista {
    font-size: 1rem;

}

.presentacion-en-lista {
    color: gray;
    font-size: 1rem;

}
.precio-en-lista {
  display: none;
}



.botones-cantidad-producto {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 10px;
    font-size: 1rem;
}

.boton-cantidad-producto {
    background-color: rgb(147, 199, 255);
    padding: 5px 10px;
    border-radius: 10px;
    border-style: none;
    font-weight: 700;
    cursor: pointer;
}

.shop-confirm-button {
    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    background-color: rgb(49, 122, 88);
    border-style: none;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

/* 
rgb(101, 251, 180)
rgb(86, 213, 153)
rgb(80, 199, 143)
rgb(49, 122, 88)
*/


::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(42, 108, 77);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(86, 213, 153);
}






@media screen and (width > 500px) {

    .home {
        object-fit: contain;
    }

    .container-block {
        width: 75%;
    }
}

/* -------------------------------------CONFIRMACION PEDIDO */

.wrapper-info-cliente {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;


    transform: translateY(-105%);

    transition: transform 1s ease-in-out;
}



.show-info-cliente {
    transform: translateY(0%);
}



.wrapper-info-cliente .container-info-cliente {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    row-gap: 5px;
    padding: 15px;


    background: rgb(224, 255, 192);
    background: linear-gradient(90deg, rgba(224, 255, 192, 1) 0%, rgba(137, 187, 88, 1) 100%);
}

.container-info-cliente .text-info-cliente {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
    /* font-size: 1.5rem; */
}

.container-info-cliente .text-info-cliente h2 {

    font-size: 1.5rem;
}

.container-info-cliente .text-info-cliente h3 {
    margin-top: -10px;
    font-size: 1.3rem;
}



.container-info-cliente .text-info-cliente .formulario-cliente {
    display: flex;
    flex-direction: column;
}

.container-info-cliente .text-info-cliente .formulario-cliente input {
    margin-bottom: 8px;
    border-radius: 5px;
    padding: 5px;
    border-style: none;
    -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.75);
}

.container-info-cliente .text-info-cliente .formulario-cliente label {
    font-weight: bold;
    margin-bottom: 5px;
}


.container-info-cliente .final-shopping-list {
    width: 60%;
    height: 100%;
    background-color: azure;
    border-radius: 10px;
    overflow: auto;
    -webkit-box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);
}


.lista-articulos-seleccionados-confirm {
    margin: 0px;

}

.container-info-cliente .subtotal{
    font-weight: 700;
}

.container-info-cliente .botones-confirmacion-pedido {

    display: flex;
    flex-direction: column;
    row-gap: 8px;
    margin-top: 5px;

}

.container-info-cliente .boton-confirmacion-pedido {
    background-color: transparent;
    border-style: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 4px;

}

.container-info-cliente .realizar-pedido {
    background-color: rgba(62, 124, 95, 0.756);
    color: black;
    padding: 15px;
    font-weight: 600;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);

}

.container-info-cliente .volver-a-tienda {
    background-color: rgb(203 113 70);
    color: black;
    font-weight: 600;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);

}

/* Contacto */

.container-contacto {
    width: 100%;
    min-height: 20vh;
    background-color: #0b390a;
    -webkit-box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
    padding: 10px;
    color: wheat;
    letter-spacing: 2px;
    text-align: center;
}

.container-contacto h1{
    font-size: 1.5rem;
    margin-bottom: -10px;
    font-weight: 900;
}


.redes{
    margin: 8px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
}


.redes a i{
    color: white;
    font-size: 3rem;
}




@media screen and (width < 310px) {

    .container-shop .container-producto .producto-text .botones-producto {

        column-gap: 15px;

    }

    .container-shop .container-producto .producto-text .boton-producto {

        padding: 0;

        width: 35px;
        height: 35px;

    }
}



@media only screen and (max-device-width: 950px) and  (-webkit-min-device-pixel-ratio: 2){
    .container-shopping-list {
        width: 100%;
        height: 100%;
    }
    
    .container-shopping-list {
        width: 100%;
        height: 100%;
        border-radius: 0px;
        row-gap: 10px;
    }



    .show {
        padding: 15px;

    }

    .show i {
        font-size: 1.2rem;

    }


    .container-shopping-list .hide {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .container-shopping-list .hide i {
        font-size: 1.2rem;
    }


    .container-shopping-list .shopping-list-text h2 {
        font-size: 1.2rem;
    }

    .container-shopping-list .shopping-list-text h3 {
        font-weight: 800;
        font-size: 1rem;
    }

    .container-info-cliente .final-shopping-list {
        width: 90%;
    }


}







/* CSS */
.button-54 {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    border: 3px solid;
    padding: 0.25em 0.5em;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-54:active {
    box-shadow: 0px 0px 0px 0px;
    top: 5px;
    left: 5px;
}