@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Thai:wght@100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

*{
    padding: 0;
    margin: 0;
    border: none;
    text-decoration: none;
    outline: none;
    box-sizing: border-box;
    transition: all .2s linear;
    font-family: "Comfortaa", sans-serif;
    text-decoration: none;
}

:root{
    --black:#000;
    --midblack:#1d1d1d;
    --description:#9c9c9c;
    --red:#d10000;
    --orange:#ff9c11;
    --green:#5fdf10;
    --white:#fff;
    --softblack:#393939;
    --price:"Playpen Sans Thai", cursive;
    --titles:"Outfit", sans-serif;
    --yelloglovo:#FFC244;
    --greenglovo:#00A082;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: var(--midblack);
}
section{
    padding: 2rem 6%;
    min-height: 100vh;
}




/*Navbar Empieza */
.navbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border-bottom: 2px solid var(--red);
    box-shadow: 0 0 7px var(--black);
    z-index: 100;
}
.navbar .btnMenu i{
    color: var(--green);
    margin-right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}


.navbar a{
    margin-right: auto;
    color: var(--white);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}
.navbar h3 img{
    width: 3rem;
}

.navbar .domicilio{
    color: var(--white);
    margin-left: auto;
}

.navbar .domicilio i{
    color: var(--orange);
}

.navbar p{
    color: var(--green);
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin-right: 1rem;
}
.navbar h2{
    color: var(--orange);
    font-size: 2rem;
    cursor: pointer;
}
/*Navbar Termina*/


/*Sección Banner Empieza*/
.banner{
    position: fixed;
    top: 0;
    left: -105%;
    width: 100%;
    bottom: 0;
    background: var(--midblack);
    z-index: 102;
    flex-direction: column;
    align-items: center;
    display: flex;
    gap: .3rem;
    cursor: default;
    color: var(--yelloglovo);
    border: 2px solid rgb(66, 66, 66);
    border-radius: 5px;
}

.banner.active{
    left: 0;
}

.banner h1{
    color: var(--white);
    font-size: clamp(1.5rem, 5vw, 2rem);
    padding: .5rem 2rem;
    border-radius: 25px;
    background: var(--red);
    margin-bottom: 1.5rem;
}
.banner .textCont{
    display: flex;
    padding: .3rem;
    outline: 1px solid var(--softblack);
    width: 100%;
    gap: .3px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--midblack);
    border: 3px;
}

.banner .textCont p{
    color: var(--white);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-family: var(--titles);
}
.banner .timeCont{
    width: 100%;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--midblack);
    padding: .3rem;
    border-radius: 2px;
    /* outline: 1px solid rgb(70, 70, 70); */
    margin-bottom: .3rem;
}

.banner .timeCont h2{
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--white);

}
.banner .timeCont p{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--yelloglovo);
    font-family: var(--titles);
    font-weight: 500;
}

.banner .glovoCont{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: .5rem;
}

.banner .glovoCont img{
    background: var(--yelloglovo);
    width: 3rem;
    border-radius: 50%;
}

.banner .glovoCont p{
    color: var(--white);
}
.banner .contact{
    width: 100%;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.banner .contact a{
    color: var(--orange);
    font-size: clamp(.8rem, 2vw, 1.1rem);
}
.banner .contact a i{
    font-size: 1.5rem;
}
.banner .contact a:hover{
    color: var(--yelloglovo);
}

.banner .futbolCont{
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.banner .futbolCont img{
    height: 3.5rem;
    border-radius: 50%;
}

.banner .futbolCont p{
    color: var(--yelloglovo);
    font-size: .9rem;
}

.banner .payMethod{
    width: 100%;
    display: flex;
    gap:.3rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 2rem;
}

.banner .payMethod p{
    color: var(--white);
    font-size: .9rem;
}

.banner .payMethod p i{
    font-size: 1.5rem;
    margin-right: .5rem;
}

.banner .adressCont{
    width: 100%;
    text-align: center;
}
.banner .adressCont a{
    color: var(--white);
}

.banner .fakeBtn{
    margin-top: auto;
    padding: .5rem 3rem;
    background: var(--red);
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 2px;
    font-family: var(--titles);
    letter-spacing: 1px;
}
/*Sección Banner Termina*/



/*Sección Header Empieza*/
.header{
    margin-top: 4rem;
    width: 100%;
    text-align: center;
    padding: 2rem 6%;
    border-bottom: 1px solid var(--softblack);
}
.header h1{
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--orange);
    padding: .3rem 3rem;
    border-radius: 25px;
    background: var(--black);
    outline: 1px solid var(--softblack);
    margin-bottom: 1rem;
}
.header h2{
    font-size: clamp(1.3rem, 3vw, 1.5rem);
    color: var(--description);
}
/*Sección Header Termina*/



/*Banner Novedad Empieza*/
.novedad{
    min-height: 10vh;
    width: 100%;
    margin-top: 3rem;
}
.novedad h1{
    padding: .5rem 2rem;
    background: var(--orange);
    color: var(--white);
    width: max-content;
    margin-bottom: 1rem;
    border-radius: 0 7px 0 7px;
    font-size: clamp(2rem, 3vw, 3rem); 
}

.novedad img{
    width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 5px;
    outline: 1px solid var(--orange);
}

.novedad p{
    color: var(--description);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom: 1rem;
}
.novedad h2{
    width: 100%;
    display: flex;
    align-items: center;
    padding: .5rem 2rem;
    color: var(--yelloglovo);
    gap: 2rem;
    border: 1px solid var(--softblack);
}

.novedad h2 span{
    padding: .5rem 1rem;
    background: red;
    margin-left: auto;
    border-radius: 25px;
    color: var(--white);
}
/*Banner Novedad Termina*/






/*Sección Cards Empieza*/
.productosCard{
    background: var(--black);
}




.productosCard .imageBan{
    width: 100%;
}

.productosCard .titleEspecialidades::before{
    content: 'Especialidades';
    position: absolute;
    top: -2px;
    left: 2px;
    height: 100%;
    width: 100%;
    z-index: 0;
    color: red;
}
.productosCard .titleEspecialidades{
    text-align: center;
    font-size: clamp(2.5rem, 5vw, 3rem);
    color: var(--orange);
    font-family: var(--titles);
    margin-bottom: 1rem;
    position: relative;
}
.productosCard .descriptionTitle{
    font-size: clamp(.9rem, 2vw, 1.1rem);
    color: var(--description);
    padding: 0 0 1rem 0;
    border-bottom: 1px solid var(--yelloglovo);
}
.productosCard .cardsContainer{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.productosCard .cardsContainer .card{
    display: flex;
    min-height: 10vh;
    padding: .3rem;
    outline: 1px solid var(--orange);
    background: var(--midblack);
    width: 100%;
    border-radius: 2px;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.productosCard .cardsContainer .card .name{
    /* background: linear-gradient(45deg, #f83403 65%, #ff7300); */
    background: var(--white);
    color: var(--black);
    /* color: var(--white); */
    width: 100%;
    text-align: center;
    padding: .5rem 0;
    border-radius:7px;
    border: 1px solid var(--yelloglovo);
    font-size: clamp(1.6rem, 3vw, 1.9rem);
    font-family: var(--titles);
}
.productosCard .cardsContainer .card img{
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--softblack);
    box-shadow:-3px 3px 5px #000 ;
    background:linear-gradient(45deg,#313131, #000 );
    border-radius: 5px;
}
.productosCard .cardsContainer .card .description{
    color: var(--description);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-family: var(--titles);
}

.productosCard .cardsContainer .card .unit{
    width: 100%;
    color: var(--white);
    font-family: var(--price);
    font-weight: 900;
    padding: .3rem 1rem;
    border: 1px solid var(--description);
    border-radius: 2px;
}


.productosCard .cardsContainer .card .variant{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--white);
    background: var(--black);
    border-radius: 3px;
    border: 1px solid #313131;
    width: 100%;
    padding: .5rem 2%;
    text-align: center;
}

.productosCard .cardsContainer .card .sueltoCont,
.productosCard .cardsContainer .card .menuCont,
.productosCard .cardsContainer .card .menuEsp{
    width: 100%;
    /* flex-direction: column; */
    background:linear-gradient(45deg, #242424, #3a3a3a);
    padding:.5rem;
    display: flex;
    justify-content:center;
    align-items: center;
    border: 1px solid #4d4d4d;
    border-radius: 3px;
    box-shadow: -2px 2px 3px #000;


}

.productosCard .cardsContainer .card .sueltoCont .price,
.productosCard .cardsContainer .card .menuCont .menuPrice,
.productosCard .cardsContainer .card .menuEsp .specialPrice{
    font-weight: 800;
    font-size: clamp(1.9rem, 2vw, 2.5rem);
    box-shadow: -2px 2px 3px #202020;
    font-family: var(--price);
    padding: 0 2rem;
    border-radius: 25px;
    background: var(--black);
    min-height: max-content;
    border: 2px solid #414141;
    color: var(--white);
    margin-left: auto;
}
.productosCard .cardsContainer .card .sueltoCont .price span,
.productosCard .cardsContainer .card .menuCont .menuPrice span,
.productosCard .cardsContainer .card .menuEsp .specialPrice span{
    color: var(--orange);
}


.productosCard .cardsContainer .card .sueltoCont,
.productosCard .cardsContainer .card .menuCont,
.productosCard .cardsContainer .card .menuEsp{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}


.productosCard .cardsContainer .card .menuCont .menuText,
.productosCard .cardsContainer .card .sueltoCont .suelto,
.productosCard .cardsContainer .card .menuEsp .specialText{
    font-size: clamp(1.7rem, 3vw, 2rem);
    color: var(--white);
    font-family: var(--price);
    font-weight: 900;
    width: 100%;
    text-align: center;
    padding: .5rem;
    border-radius: 3px;
    text-shadow: -2px 2px 5px #000;
}


.productosCard .cardsContainer .card .menuCont .menuDes,
.productosCard .cardsContainer .card .menuEsp .specialDes{
    color: #d4d4d4;
    font-size: clamp(1rem, 3vw, 1.2rem);
}

/*Sección Cards Termina*/


/*Sección Pizzas Empieza*/
.sectionPizzas h3{
    color: var(--orange);
    position: relative;
    font-size: clamp(4rem, 3vw, 5rem);
}

.sectionPizzas h3::before{
    content: 'Pizzas';
    position: absolute;
    top: -2px;
    left: 2px;
    height: 100%;
    width: 100%;
    z-index: 0;
    color: red;
}

.sectionPizzas .gridPizzas{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .5rem;
}

.sectionPizzas .gridPizzas .card{
    min-height: unset;
    outline: 1px solid var(--white);
    background: var(--black);
}
.sectionPizzas .gridPizzas .card .name{
    background: unset;
    color: var(--yelloglovo);
    padding: 0;
    border: none;
    font-weight: 400;
}
.sectionPizzas .gridPizzas .card .image{
    display: none;
}
.sectionPizzas .gridPizzas .card .variant{
    display: none;
}

.sectionPizzas .gridPizzas .card .unit{
    display: none;
}
.sectionPizzas .gridPizzas .card .description{
    margin-bottom: auto;
}


.sectionPizzas .gridPizzas .card .menuCont,
.sectionPizzas .gridPizzas .card .sueltoCont{
    background:unset;
    padding: unset;
    display: unset;
    text-align: center;
    gap: 0;
}

.sectionPizzas .gridPizzas .card .menuCont .menuText,
.sectionPizzas .gridPizzas .card .sueltoCont .suelto{
    font-size: 1.2rem;
    font-weight: 400;
    padding: 0;
}


.sectionPizzas .gridPizzas .card .menuCont .menuPrice,
.sectionPizzas .gridPizzas .card .sueltoCont .price{
    font-size: 1.2rem;
    outline: none;
    border: none;
    box-shadow: none;
}
/*Sección Pizzas Termina*/





/*Sección Pizzas Especiales Empieza*/
.productosCard{
    background: var(--black);
}

.productosCard .titleEspecial::before{
    content: 'Pizzas Especiales';
    position: absolute;
    top: -2px;
    left: 2px;
    height: 100%;
    width: 100%;
    z-index: 0;
    color: red;
}
.productosCard h3{
    text-align: center;
    font-size: clamp(2.5rem, 5vw, 3rem);
    color: var(--orange);
    font-family: var(--titles);
    margin-bottom: 1rem;
    position: relative;
}
.productosCard .descriptionTitle{
    font-size: clamp(.9rem, 2vw, 1.1rem);
    color: var(--description);
    padding: 0 0 1rem 0;
    border-bottom: 1px solid var(--yelloglovo);
}
.productosCard .gridPizzasEspecial{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.productosCard .gridPizzasEspecial .card{
    display: flex;
    min-height: 10vh;
    padding: .3rem;
    outline: 1px solid var(--orange);
    background: var(--midblack);
    width: 100%;
    border-radius: 2px;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.productosCard .gridPizzasEspecial .card .name{
    /* background: linear-gradient(45deg, #f83403 65%, #ff7300); */
    background: var(--white);
    color: var(--black);
    /* color: var(--white); */
    width: 100%;
    text-align: center;
    padding: .5rem 0;
    border-radius:7px;
    border: 1px solid var(--yelloglovo);
    font-size: clamp(1.6rem, 3vw, 1.9rem);
    font-family: var(--titles);
}
.productosCard .gridPizzasEspecial .card img{
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--softblack);
    box-shadow:-3px 3px 5px #000 ;
    background:linear-gradient(45deg,#313131, #000 );
    border-radius: 5px;
}
.productosCard .gridPizzasEspecial .card .description{
    color: var(--description);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-family: var(--titles);
}

.productosCard .gridPizzasEspecial .card .unit{
    width: 100%;
    color: var(--white);
    font-family: var(--price);
    font-weight: 900;
    padding: .3rem 1rem;
    border: 1px solid var(--description);
    border-radius: 2px;
}


.productosCard .gridPizzasEspecial .card .variant{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--white);
    background: var(--black);
    border-radius: 3px;
    border: 1px solid #313131;
    width: 100%;
    padding: .5rem 2%;
    text-align: center;
}

.productosCard .gridPizzasEspecial .card .sueltoCont,
.productosCard .gridPizzasEspecial .card .menuCont,
.productosCard .gridPizzasEspecial .card .menuEsp{
    width: 100%;
    /* flex-direction: column; */
    background:linear-gradient(45deg, #242424, #3a3a3a);
    padding:.5rem;
    display: flex;
    justify-content:center;
    align-items: center;
    border: 1px solid #4d4d4d;
    border-radius: 3px;
    box-shadow: -2px 2px 3px #000;


}

.productosCard .gridPizzasEspecial .card .sueltoCont .price,
.productosCard .gridPizzasEspecial .card .menuCont .menuPrice,
.productosCard .gridPizzasEspecial .card .menuEsp .specialPrice{
    font-weight: 800;
    font-size: clamp(1.9rem, 2vw, 2.5rem);
    box-shadow: -2px 2px 3px #202020;
    font-family: var(--price);
    padding: 0 2rem;
    border-radius: 25px;
    background: var(--black);
    min-height: max-content;
    border: 2px solid #414141;
    color: var(--white);
    margin-left: auto;
}
.productosCard .gridPizzasEspecial .card .sueltoCont .price span,
.productosCard .gridPizzasEspecial .card .menuCont .menuPrice span,
.productosCard .gridPizzasEspecial .card .menuEsp .specialPrice span{
    color: var(--orange);
}


.productosCard .gridPizzasEspecial .card .sueltoCont,
.productosCard .gridPizzasEspecial .card .menuCont,
.productosCard .gridPizzasEspecial .card .menuEsp{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}


.productosCard .gridPizzasEspecial .card .menuCont .menuText,
.productosCard .gridPizzasEspecial .card .sueltoCont .suelto,
.productosCard .gridPizzasEspecial .card .menuEsp .specialText{
    font-size: clamp(1.7rem, 3vw, 2rem);
    color: var(--white);
    font-family: var(--price);
    font-weight: 900;
    width: 100%;
    text-align: center;
    padding: .5rem;
    border-radius: 3px;
    text-shadow: -2px 2px 5px #000;
}


.productosCard .gridPizzasEspecial .card .menuCont .menuDes,
.productosCard .gridPizzasEspecial .card .menuEsp .specialDes{
    color: #d4d4d4;
    font-size: clamp(1rem, 3vw, 1.2rem);
}
/*Sección Pizzas Especiales Termina*/







/*Sección Bebidas Empieza*/
.productosCard{
    background: var(--black);
}




.productosCard .imageBan{
    width: 100%;
}

.productosCard .titleBebidas::before{
    content: 'Cervezas, Cubatas y Vinos';
    position: absolute;
    top: -2px;
    left: 2px;
    height: 100%;
    width: 100%;
    z-index: 0;
    color: red;
}
.productosCard .titleBebidas{
    text-align: center;
    font-size: clamp(2.5rem, 5vw, 3rem);
    color: var(--orange);
    font-family: var(--titles);
    margin-bottom: 1rem;
    position: relative;
}
.productosCard .descriptionTitle{
    font-size: clamp(.9rem, 2vw, 1.1rem);
    color: var(--description);
    padding: 0 0 1rem 0;
    border-bottom: 1px solid var(--yelloglovo);
}
.productosCard .cardsContainer{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.productosCard .cardsContainer .card{
    display: flex;
    min-height: 10vh;
    padding: .3rem;
    outline: 1px solid var(--orange);
    background: var(--midblack);
    width: 100%;
    border-radius: 2px;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.productosCard .cardsContainer .card .name{
    /* background: linear-gradient(45deg, #f83403 65%, #ff7300); */
    background: var(--white);
    color: var(--black);
    /* color: var(--white); */
    width: 100%;
    text-align: center;
    padding: .5rem 0;
    border-radius:7px;
    border: 1px solid var(--yelloglovo);
    font-size: clamp(1.6rem, 3vw, 1.9rem);
    font-family: var(--titles);
}
.productosCard .cardsContainer .card img{
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--softblack);
    box-shadow:-3px 3px 5px #000 ;
    background:linear-gradient(45deg,#313131, #000 );
    border-radius: 5px;
}
.productosCard .cardsContainer .card .description{
    color: var(--description);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-family: var(--titles);
}

.productosCard .cardsContainer .card .unit{
    width: 100%;
    color: var(--white);
    font-family: var(--price);
    font-weight: 900;
    padding: .3rem 1rem;
    border: 1px solid var(--description);
    border-radius: 2px;
}


.productosCard .cardsContainer .card .variant{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: var(--white);
    background: var(--black);
    border-radius: 3px;
    border: 1px solid #313131;
    width: 100%;
    padding: .5rem 2%;
    text-align: center;
}

.productosCard .cardsContainer .card .sueltoCont,
.productosCard .cardsContainer .card .menuCont,
.productosCard .cardsContainer .card .menuEsp{
    width: 100%;
    /* flex-direction: column; */
    background:linear-gradient(45deg, #242424, #3a3a3a);
    padding:.5rem;
    display: flex;
    justify-content:center;
    align-items: center;
    border: 1px solid #4d4d4d;
    border-radius: 3px;
    box-shadow: -2px 2px 3px #000;


}

.productosCard .cardsContainer .card .sueltoCont .price,
.productosCard .cardsContainer .card .menuCont .menuPrice,
.productosCard .cardsContainer .card .menuEsp .specialPrice{
    font-weight: 800;
    font-size: clamp(1.9rem, 2vw, 2.5rem);
    box-shadow: -2px 2px 3px #202020;
    font-family: var(--price);
    padding: 0 2rem;
    border-radius: 25px;
    background: var(--black);
    min-height: max-content;
    border: 2px solid #414141;
    color: var(--white);
    margin-left: auto;
}
.productosCard .cardsContainer .card .sueltoCont .price span,
.productosCard .cardsContainer .card .menuCont .menuPrice span,
.productosCard .cardsContainer .card .menuEsp .specialPrice span{
    color: var(--orange);
}


.productosCard .cardsContainer .card .sueltoCont,
.productosCard .cardsContainer .card .menuCont,
.productosCard .cardsContainer .card .menuEsp{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}


.productosCard .cardsContainer .card .menuCont .menuText,
.productosCard .cardsContainer .card .sueltoCont .suelto,
.productosCard .cardsContainer .card .menuEsp .specialText{
    font-size: clamp(1.7rem, 3vw, 2rem);
    color: var(--white);
    font-family: var(--price);
    font-weight: 900;
    width: 100%;
    text-align: center;
    padding: .5rem;
    border-radius: 3px;
    text-shadow: -2px 2px 5px #000;
}


.productosCard .cardsContainer .card .menuCont .menuDes,
.productosCard .cardsContainer .card .menuEsp .specialDes{
    color: #d4d4d4;
    font-size: clamp(1rem, 3vw, 1.2rem);
}

/*Sección Bebidas Termina*/




/*Sección Refrescos Empieza*/

.refrescos{
    margin-bottom: 7rem;
}
.refrescos h1{
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--orange);   
}
.refrescos .container p{
    color: var(--description);
    font-size: clamp(1.5rem, 3vw, 1.7rem);
    margin-bottom: 1rem;
}

.refrescos .container .wrap{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.refrescos .container .wrap .item{
    flex: 1 1 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: .3rem;
    border: 1px solid var(--softblack);
    box-shadow: -3px 3px 5px #000;
}

.refrescos .container .wrap .item img{
    width: 100%;
        overflow: hidden;
    border-radius: 3px;
}
.refrescos .container .wrap .item p{
    font-size: clamp(.8rem, 2vw, 1rem);
    color: var(--white);font-family: var(--titles);
    font-weight: 200;
    margin-bottom: auto;
}

.refrescos .container h2{
    font-size: clamp(4rem, 5vw, 5rem);
    text-align: end;
    padding: 1rem 2rem;
    color: var(--yelloglovo);
    font-weight: 900;
    font-family: var(--titles);
}

.refrescos .container h2 span{
    color: var(--white);
    font-family: var(--price);
    font-weight: 800;
    text-shadow: -2px 2px 5px #00A082;
}

.refrescos .others{
    margin-top: 2rem;
    border-top: 1px solid var(--black);
    padding: 1rem 0 0 0;
}

.refrescos .others h1{
    font-size: clamp(4rem, 5vw, 5rem);
    color: var(--yelloglovo);
}
.refrescos .others .container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.refrescos .others .container .item{
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    border: 1px solid var(--softblack);
    box-shadow: -3px 3px 5px #000;
}

.refrescos .others .container .item img{
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.refrescos .others .container .item p{
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--white);
}

.refrescos .others .container .item p span{
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--yelloglovo);
}
/*Sección Refrescos Termina*/


.fastmenu{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    z-index: 99;
    box-shadow: 0 -3px 5px #000;
    border-top: 1px solid var(--white);
    padding: 0 0 1.5rem 0;
}

.fastmenu a{
    padding: .5rem;
    font-size: 2rem;
    color: var(--white);
    gap: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.fastmenu a:hover{
    color: var(--orange);
}

.fastmenu a span{
    font-size: clamp(.6rem, 2vw, .8rem);
    font-weight: 100;
    letter-spacing: 1px;
}












/*Quick Menú Empieza*/
.quickMenu{
    position: fixed;
    top: 0;
    left: -102%;
    height: 100%;
    width: 100%;
    bottom: 0;
    z-index: 200;
    background: var(--midblack);
    padding: 2rem 3%;
}
.quickMenu.active{
    left: 0;
}

.quickMenu .linkCont{
    display: flex; 
    flex-direction: column;
    align-items: center;
}

.quickMenu .linkCont a{
    margin-right: auto;
    padding: .5rem;
    width: 100%;
    color: var(--orange);
    border-left: 1px solid var(--softblack);
    border-top: 1px solid var(--softblack);
    border-right: 1px solid var(--softblack);
    background: var(--black);
}
.quickMenu .linkCont a:nth-child(4){
    border-bottom: 1px solid var(--softblack);
}


.quickMenu .linkCont span{
    width: max-content;
    text-align: center;
    padding: .3rem 2rem;
    margin-top: 5rem;
    background: var(--red);
    color: var(--white);
    cursor: pointer;
    border-radius: 2px;
}
/*Quick Menú Termina*/