* {
    margin: 0;
    padding: 0;
    border: 0;
    scroll-behavior: smooth;
}
body {
    font-family: "Gidole", sans-serif;
    position: relative;
}
a {
    text-decoration: none;
    color: black;
}
ul > li {
    list-style: none;
}
header {
    padding-inline: 2rem;
    padding-block: .5rem;
    background-color: black;
    color: white;
}
header {
    top: 0px;
    position: sticky;
    z-index: 1000;
}
main {
    position: relative;
}

#ul-mess {
    padding-inline: 1rem;
}
#ul-mess > li {
    list-style-type: disc;
    text-align: justify;
}

.grid {
    display: grid;
}
.flex { 
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.center {
    display: grid;
    place-content: center;
}
.center-align {
    text-align: center;
}
.center-right {
    display: flex;
    align-items: center;
    justify-content: right;
}
.display-none {
    display: none;
}
.flex-space {
    justify-content: space-between;
}
.gap-car {
    gap: 1rem;
}
.grid-row {
    grid-template-rows: 4rem 1fr auto;
}
.cat {
    padding-bottom: 2rem;
}

@view-transition {
    navigation: auto;
}

/*--------------  HEADER -----------------*/
.column-header {
    grid-template-columns: repeat(2, auto);
}
.title-logo {
    flex-direction: row;
    gap: .5rem;
}
.title-logo img {
    width: 15rem;
}
.navegation {
    flex-direction: row-reverse;
}
.navegation ul > li > a {
    font-size: clamp(15px, 3vw, 16px);
    text-transform: uppercase;
    color: white;
    transition: all .3s ease-in-out;
}
.gap2rem {
    gap: 2rem
}
#burgercheck {
    display: none;
}
.title-logo div > h1 {
    color: #401e08;
}

/*------------- MI CARRITO ---------------*/
.burger-icon {
    color: white;
}
.burger-icon {
    display: inline-block;
    position: absolute;
    top: 33px;
    right: 30px;
    font-size: 1.5rem;
    cursor: pointer;
}
.navegation > ul {
    position: fixed;
    background-color: black;
    top: 0;
    padding-block: 1rem;
    padding-inline: 1.5rem;
    width: 50%;
    max-width: 300px;
    height: 100vh;
    left: -100%;
    z-index: 999;
    transition: all .5s ease-in-out;
}
#mi-carrito {
    overflow: scroll;
    scrollbar-width: none;
}
.p {
    width: 100%;
}
#burgercheck:checked ~ ul  {
    left: 0;
}
.navegation ul .burger-center{
    padding-left: 1rem;
}
.navegation ul li > a {
    color: white;
} 
.flex-row-2 {
    flex-direction: column;
}
.center-nav {
    display: flex;
    place-content: center;
}
.gap5rem {
    gap: 3rem;
}
.burger-center {
    display: flex;
    justify-content: left;
    align-items: center;
}
.fa-cart-shopping {
    transition: all .3s ease-in-out;
}
.fa-cart-shopping:hover {
    color: rgb(185, 185, 185);
}
.total, .igv, .subtotal {
    font-size: clamp(15px, 3vw, 20px);
}
.gap-total {
    gap: .4rem;
}
.icon-side-bar {
    cursor: pointer;
}
.icon-side-bar .ic {
    font-size: clamp(20px, 3vw, 25px);
}

/*--------- ITEMS CARRITO --------*/
.title-carrito {
    color: white;
    font-size: clamp(20px, 3vw, 25px);
    padding-block: 1rem;
}
.item-carrito-img img {
    width: 100px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 0 .5px white);
}
.item-carrito-producto {
    font-size: clamp(15px, 3vw, 20px);
    text-transform: uppercase;
}
.item-carrito-formato,
.item-carrito-cantidad,
.item-carrito-subtotal {
    font-size: clamp(10px, 3vw, 15px);
}
#carrito-for,
#carrito-cant,
#carrito-sub,
#carrito-sabor {
    font-size: clamp(13px, 3vw, 18px);
    text-transform: uppercase;
}
#carrito-duo {
    font-size: clamp(13px, 3vw, 16px);
    /* text-transform: uppercase; */
}
.item-carrito-gap {
    gap: .8rem;
}
.item-carrito-gap-2 {
    gap: .5rem;
}
.item-carrito-gap-3 {
    gap: .3rem;
}
.item-delete {
    height: 5%;
    background-color: red;
    color: white;
    padding-inline: .4rem;
    padding-block: .3rem;
    border-radius: 100%;
    /* font-size: clamp(11px, 3vw, 16px); */
    cursor: pointer;
}
.item-carrito {
    position: relative;
}
.btn-delete {
    position: absolute;
    right: 3%;
    top: 0%;
}

/*----- NÚMERO DE PRODUCTOS CARRITO -----*/
#n-items {
    position: relative;
    font-size: 16px;
    top: -42px;
    left: 30px;
}

/*-------- PRODUCTOS ---------*/
.productos {
    padding: 5rem;
}
.title-productos {
    margin-bottom: 5rem;
    text-transform: uppercase;
    color: #401e08;
    font-size: clamp(30px, 3vw, 35px);
    font-family: 'Bilcase Demo', sans-serif;
    letter-spacing: 2px;
}
.gap-carrito {
    gap: 5rem;
}
.grid-column-3 {
    grid-template-columns: repeat(3, auto);
}
.grid-column-2 {
    grid-template-columns: repeat(2, auto);
}
.item-producto {
    border-radius: 15px;
    background-color: #ffa500;
    padding: 1.5rem;
}
.productos-img img {
    width: 230px;
    height: 230px;
    filter:  drop-shadow(0 0 2px white);
    object-fit: contain;
}
.productos-gap {
    gap: 1.2rem;
}
.productos-gap-2 {
    gap: 1rem;
}
.productos-gap-3 {
    gap: 1.8rem;
}
.productos-gap-4 {
    gap: 2rem;
}
.productos-gap-5 {
    gap: .5rem;
}
.productos-name {
    text-transform: uppercase;
    font-size: clamp(22px, 3vw, 27px);
    font-weight: bold;
}
.productos-precio {
    font-size: clamp(15px, 3vw, 18px);
}
.productos-precio span {
    font-size: clamp(25px, 3vw, 30px);
    width: 200px;
    font-weight: bold;
}
.productos-formato {
    gap: .3rem;
}
.formato {
    background-color: rgb(24, 23, 23);
    color: white;
    padding: .6rem; 
    border-radius: 5px;
    text-transform: uppercase; 
    font-size: clamp(10px, 3vw, 14px);
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.formato:hover {
    opacity: .7;
}
.formato-selected {
    background-color: white;
    color: black;
}
.formato-selected:disabled {
    background-color: #6d4905;
    color: white;
}
.productos-button-enviar button {
    width: 100%;
    background-color: black;
    color: white;
    padding-block: 1rem;
    text-transform: uppercase;
    font-size: clamp(13px, 3vw, 15px);
    border-radius: 1.5rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.select-sabor select:valid {
    /* color: white; */
    border: .5px solid #b97b09;
}
.gap-sabores {
    gap: .5rem;
}

/*-------- DESHABILITADO ---------*/
*:disabled {
    background-color: #b97b09;
    color: white;
}
.productos-button-enviar button:disabled {
    background-color: #b97b09;
    color: white;
}
.productos-button-enviar button:hover:disabled {
    background-color: #b97b09;
    color: white;
    box-shadow: 0 0 0px white;
}
.btn-plus:disabled, .btn-minus:disabled {
    background-color: #b97b09;
    color: white;
}
.btn-plus:hover:disabled, .btn-minus:hover:disabled {
    background-color: #b97b09;
    color: white;
    scale: 1;
    box-shadow: 0 0 0px white;
}

.productos-button-enviar button:hover {
    background-color: white;
    color: black;
    box-shadow: 0 0 8px black;
}
.btn-plus, .btn-minus {
    font-size: 30px;
    width: 35px;
    border-radius: 5px;
    padding-inline: 1rem;
    padding-block: .02rem;
    background-color: black;
    color: white;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.btn-plus:hover, .btn-minus:hover {
    background-color: white;
    color: black;
    box-shadow: 0 0 5px black;
    scale: 1.2;
}
.producto-cantidad {
    font-size: 25px;
    width: 20px;
}
.gap-stock {
    justify-content: space-between;
}
.gap-stock2 {
    gap: .5rem;
}
.productos-stock {
    color: #481a00;
}
.productos-igv {
    font-size: 1rem; 
    color: #481a00;
}

/*--------- MENSAJE ---------*/
.message-carrito {
    height: 100vh;
}
.mess-text-1 {
    font-size: clamp(15px, 3vw, 20px);
}
.mess-text-2 {
    font-size: clamp(10px, 3vw, 15px);
}
.gap-message {
    gap: 1.2rem;
}
.mess-text-3 {
    font-size: clamp(10px, 3vw, 15px);
    color: rgb(172, 168, 168);
}
.mess-btn {
    background-color: white;
    color: black;
    padding: .6rem;
    font-size: clamp(13px, 3vw, 16px);
    margin-inline: 1rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
    border-radius: 5px;
}
.mess-btn:hover {
    background-color: black;
    color: white;
    box-shadow: 0 0 3px white;
}

/*------- MENSAJE EMERGENTE -------*/
.box {
    position: absolute;
    top: 1%;
    right: 0%;
}
.emerge-msg {
    position: fixed;
    right: 5%;
    gap: .6rem;
    z-index: 9999;
}
.add {
    background-color: rgb(57, 182, 20);
    color: white;
    padding-block: .5rem;
    padding-inline: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 5px black;
    cursor: default;
    font-size: clamp(15px, 3vw, 18px);
}
.delete {
    background-color: red;
    color: white;
    padding-block: .5rem;
    padding-inline: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 5px black;
    cursor: default;
    font-size: clamp(15px, 3vw, 18px);
}

.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
                transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}

/*------------- FINALIZAR COMPRA -------------*/
/* .finalizar {
    position: absolute;
    right: 0%;
} */
.finalizar button {
    /* position: fixed;
    z-index: 9999;
    right: 1%;
    bottom: 2%; */
    width: 100%;
    background-color: black;
    border: 1px solid rgb(48, 48, 48);
    padding-block: 1rem;
    /* padding-inline: 5rem; */
    border-radius: 5px;
    color: white;
    font-size: clamp(14px, 3vw, 16px);
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.finalizar button:hover {
    background-color: white;
    color: black;
}

/*-------- POPUP -------*/
.alert {
    position: sticky;
    top: 0%;
    z-index: 10000;
}
.myalert {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: black;
    opacity: .8;
}
.alert-finalizar {
    position: absolute;
    width: 100%;
    height: 100vh;    
}
.container {
    background-color: white;
    border-radius: 15px;
    padding: 1.5rem;
}
.alert-title {
    font-size: clamp(20px, 3vw, 25px);
}
.alert-text {
    font-size: clamp(13px, 3vw, 16px);
}
.alert-text-2 {
    font-size: clamp(10px, 3vw, 14px);
    font-weight: 600;
}
.gap-alert {
    gap: 1rem;
}
.gap-alert-2 {
    gap: .5rem;
}
.btn-submit {
    font-family: "Gidole", sans-serif;
    color: white;
    padding-block: .7rem;
    padding-inline: 1.2rem;
    border-radius: 5px;
    font-size: clamp(14px, 3vw, 16px);
    cursor: pointer;
    background-color: rgb(32, 32, 219);
    border: 1px solid rgb(32, 32, 219);
    transition: all .3s ease-in-out;
}
.btn-submit:hover {
    background-color: white;
    color: rgb(32, 32, 219);
}
.btn-volver {
    font-size: clamp(14px, 3vw, 16px);
    text-decoration: underline;
    cursor: pointer;
}

select {
    width: 100%;
    padding-block: .5rem;
    padding-left: .2rem;
    font-family: "Gidole", sans-serif;
    font-size: 15px;
    border: 1px solid black;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}
#ubicacion:valid,
#distrito:valid,
#telefono:valid {
    border: 1px solid green;
    outline: 1px solid green;
}
#ubicacion:invalid,
#distrito:invalid,
#telefono:invalid {
    border: 1px solid red;
    outline: 1px solid red;
}
input[type="tel"],
input[type="text"] {
    border: 1px solid red;
    outline: 1px solid red;
    padding-block: .5rem;
    padding-left: .5rem;
}

#ubicacion {
    width: 97%;
    font-family: "Gidole", sans-serif;
    font-size: 15px;
    border: 1px solid black;
    border-radius: 5px;
}
#telefono {
    width: 97%;
    font-family: "Gidole", sans-serif;
    font-size: 15px;
    border: 1px solid black;
    border-radius: 5px;
}

.texto {
    font-size: clamp(13px, 3vw, 16px);
}
#pay-delivery,
#pay,
#pay-total {
    font-size: clamp(16px, 3vw, 21px);
}
#pay {
    font-weight: 200;
}
#pay-delivery,
#pay-total {
    font-weight: bold;
}

.message2 img {
    width: 100%;
    height: 165px;
    object-fit: contain;
    position: absolute;
    top: -9rem;
}
.message2 {
    position: relative;
    width: 380px;
}
.gap-message-2 {
    gap: 1rem;
}
.btn-msg2 {
    font-family: "Gidole", sans-serif;
    background-color: rgb(32, 32, 219);
    border: 1px solid rgb(32, 32, 219);
    color: white;
    padding-inline: 1.2rem;
    padding-block: .5rem;
    font-size: clamp(15px, 3vw, 17px);
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.btn-msg2:hover {
    background-color: white;
    color: rgb(32, 32, 219);
}

/*-------- TUTORIAL --------*/
.title {
    text-transform: uppercase;
    font-size: clamp(30px, 3vw, 35px);
    font-family: 'Bilcase Demo', sans-serif;
    letter-spacing: 2px;
}
.tutorial {
    position: relative;
    width: 400px;
    height: 500px;
    z-index: 0;
    background-color: black;
    border-radius: 15px;
}
.tutorial-img {
    width: 400px;
    position: absolute;
    z-index: -1;
    top: 0%;
    opacity: .3;
}
.tutorial-img img {
    width: 400px;
    height: 500px;
    border-radius: 15px;
}
.tutorial-enlace > a > img {
    width: 6.5rem;
}
.texto-tu {
    font-size: clamp(15px, 3vw, 18px);
}
.gap-tu {
    gap: 2rem;
    padding: 3rem; 
}

/*------- FRECUENTES --------*/
.frecuentes {
    padding: 5rem;
}
details {
    width: 500px;
    font-size: clamp(15px, 3vw, 18px);
    background-color: #f5a004;
    border: 1px solid #775008;
    border-radius: 4px;
    padding: 0.2rem;
}
summary {
    cursor: pointer;
    border-radius: 10px; 
    font-weight: bold;
    padding: .5rem;
}
details p {
    width: fit-content;
    text-align: justify;
    border-radius: 10px; 
    padding: .5rem;
}   
.gap-tu-2 {
    gap: 1rem;
}
.del-price {
    font-weight: bold;
}
.enla-pre {
    text-decoration: underline;
    font-weight: 600;
}
.img-pago {
    margin: .7rem;
}
.img-pago img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/*------------- ANIMATION BUTTON -------------*/
.pulsate-fwd {
	-webkit-animation: pulsate-fwd 1s ease-in-out infinite both;
	        animation: pulsate-fwd 1s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-fwd {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}
@keyframes pulsate-fwd {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}

/*--------------  FOOTER -----------------*/
footer {
    background-color: #FDFAE9;
}
.flex-2 {
    flex-direction: column;
}
.flex-2 h2 {
    font-size: clamp(18px, 3vw, 20px);
    text-transform: uppercase;
    color: #401e08;
    margin-top: 1rem;
    margin-bottom: 2.3rem;
}
.flex-2 > a {
    font-size: clamp(14px, 3vw, 16px);
    color: #401e08;
}
.footer {
    padding: 5rem;
}
.title-footer {
    font-size: clamp(22px, 3vw, 30px);
    color: white;
    text-transform: uppercase;
}
.text-footer {
    font-size: clamp(15px, 3vw, 22px);
    color: white;
    text-align: justify;
}
.footer-flex {
    gap: 2rem;
}
.footer-column-2 {
    grid-template-columns: 470px 350px;
    gap: 4rem;
}
.button-footer button {
    font-size: clamp(15px, 3vw, 20px);
    background-color: #f4e493;
    color: #401e08;
    padding-block: .8rem;
    padding-inline: 3rem;
    border-radius: 5rem;
    text-transform: uppercase;
    transition: all .3s
}
.button-footer button:hover {
    cursor: pointer;
    background-color: #efd15a;
}
.img-footer {
    position: relative;
}
.img-footer img {
    width: 30rem;
    position: absolute;
    left: -79px;
    top: -170px;
}
.footer-column-2-2 {
    grid-template-columns: repeat(2, auto);
    gap: 3.4rem;
}
.footer-column-3 {
    grid-template-columns: repeat(3, auto);
    gap: 8rem;
}
.fa-phone, .fa-envelope {
    font-size: clamp(27px, 3vw, 30px);
    color: #4E2A14;
}
.text-logo {
    font-size: clamp(15px, 3vw, 22px);
    color: #401e08;
}
.title-telefono {
    gap: 1.4rem;
    padding: 1rem;
    padding-inline: 1.4rem;
    color: #401e08;
}
.title-telefono div > a {
    font-size: clamp(18px, 3vw, 20px);
}
.title-email {
    gap: 1.4rem;
    padding: 1rem;
    padding-inline: 1.4rem;
    color: #401e08;
}
.title-email div > a {
    font-size: clamp(18px, 3vw, 20px);
}
.social-media {
    padding: 1rem;
}
.gap-footer {
    gap: 3rem;
}
.gap-footer-2 {
    gap: 5rem;
}
.gap-footer-3 {
    gap: 1.5rem;
}
.social {
    color: #4E2A14;
    background-color: #efd15a;
    font-size: 19px;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    transition: all .4s ease-in-out;
}
.social-f:hover {
    background-color: #3b5998;
    color: #fdfbed;
}
.social-i:hover {
    background: #C13584;
    color: #fdfbed;
}
.social-w:hover {
    background-color: #25d366;
    color: #fdfbed;
}

@media (min-width: 1013px) {
    /*------------- FOOTER -------------*/
    .my-footer {
        background-color: #6F2601;
        border-radius: 15px;
        padding-inline: 3.2rem;
        padding-block: 2.5rem;
        height: 100%;
    }
    .my-footer2 {
        padding-top: 12rem;
        padding-inline: 3.6rem;
    }
} 
@media (850px < width < 1012px) {
    /*-------------- HEADER --------------*/ 
    header {
        top: 0px;
        position: sticky;
        z-index: 1000;
    }
    .burger-icon {
        display: inline-block;
        position: absolute;
        top: 29px;
        right: 30px;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .navegation > ul {
        position: fixed;
        background-color: black;
        top: 0;
        padding: 1rem;
        width: 50%;
        max-width: 300px;
        height: 100vh;
        left: -100%;
        transition: all .5s ease-in-out;
    }
    #burgercheck:checked ~ ul  {
        left: 0;
    }
    .navegation ul .burger-center{
        padding-left: 1rem;
    }
    .navegation ul li > a {
        color: white;
    } 
    .flex-row-2 {
        flex-direction: column;
    }
    .center-nav {
        display: flex;
        place-content: center;
    }
    .logo-burger {
        display: inline-block;
    }
    .logo-burger-img img {
        width: 15rem;
    }
    .logo-burger-text {
        font-size: clamp(10px, 3vw, 19px);
    }
    .gap5rem {
        gap: 3rem;
    }
    .burger-center {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    /*------ PRODUCTO -------*/
    .grid-column-3 {
        grid-template-columns: repeat(2, auto);
    }

    /*-------------- FOOTER --------------*/ 
    .footer-column-2 {
        grid-template-columns: repeat(1, auto);
    }
    .img-footer {
        display: none;
    }
    .my-footer {
        background-color: #6F2601;
        padding: 0;
        height: 100%;
        border-radius: 15px;
    }
    .footer-flex {
        padding: 3rem;
    }
    .center-text-footer {
        text-align: center;
    }
    .center-footer {
        display: grid;
        place-content: center;
    }

    .footer-column-2-2 {
        grid-column:inherit;
        grid-template-columns: repeat(1, auto);
        gap: 4rem;
    }
    .footer-column-3 {
        grid-template-columns: repeat(3, auto);
        gap: 3rem;
    }
    .my-footer2 {
        flex-direction: column-reverse;
        padding-top: 4rem;
        padding-inline: 3.6rem;
    }
}
@media (650px < width < 849px) {
    /*-------------- HEADER --------------*/ 
    header {
        top: 0px;
        position: sticky;
        z-index: 1000;
    }
    .burger-icon {
        display: inline-block;
        position: absolute;
        top: 29px;
        right: 30px;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .navegation > ul {
        position: fixed;
        background-color: black;
        top: 0;
        padding: 1rem;
        width: 50%;
        max-width: 300px;
        height: 100vh;
        left: -100%;
        transition: all .5s ease-in-out;
    }
    #burgercheck:checked ~ ul  {
        left: 0;
    }
    .navegation ul .burger-center{
        padding-left: 1rem;
    }
    .navegation ul li > a {
        color: white;
    } 
    .flex-row-2 {
        flex-direction: column;
    }
    .center-nav {
        display: flex;
        place-content: center;
    }
    .logo-burger {
        display: inline-block;
    }
    .logo-burger-img img {
        width: 15rem;
    }
    .logo-burger-text {
        font-size: clamp(10px, 3vw, 19px);
    }
    .gap5rem {
        gap: 3rem;
    }
    .burger-center {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    /*------ PRODUCTO -------*/
    .grid-column-3 {
        grid-template-columns: repeat(2, auto);
    }

    /*-------------- FOOTER --------------*/ 
    .footer-column-2 {
        grid-template-columns: repeat(1, auto);
    }
    .img-footer {
        display: none;
    }
    .my-footer {
        border-radius: 0;
        padding: 0;
        height: 100%;
    }
    .footer-flex {
        background-color: #6F2601;
        border-radius: 15px;
        padding: 3rem;
    }
    .center-text-footer {
        text-align: center;
    }
    .center-footer {
        display: grid;
        place-content: center;
    }

    .footer-column-2-2 {
        grid-column: inherit;
        grid-template-columns: repeat(1, auto);
        gap: 4rem;
    }
    .footer-column-3 {
        grid-template-columns: repeat(2, auto);
        gap: 3rem;
    }
    .my-footer2 {
        flex-direction: column-reverse;
        padding-top: 4rem;
        padding-inline: 3.6rem;
    }
}

@media (max-width: 649px) {
    /*-------------- HEADER --------------*/ 
    header {
        top: 0px;
        position: sticky;
        z-index: 1000;
        padding-inline: 1rem;
    }
    .burger-icon {
        display: inline-block;
        position: absolute;
        top: 29px;
        right: 30px;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .navegation > ul {
        position: fixed;
        background-color: black;
        top: 0;
        padding: 1rem;
        width: 50%;
        max-width: 300px;
        height: 100vh;
        left: -100%;
        transition: all .5s ease-in-out;
    }
    #burgercheck:checked ~ ul  {
        left: 0;
    }
    .navegation ul .burger-center{
        padding-left: 1rem;
    }
    .navegation ul li > a {
        color: white;
    } 
    .flex-row-2 {
        flex-direction: column;
    }
    .center-nav {
        display: flex;
        place-content: center;
    }
    .logo-burger {
        display: inline-block;
    }
    .logo-burger-img img {
        width: 15rem;
    }
    .logo-burger-text {
        font-size: clamp(10px, 3vw, 19px);
    }
    .gap5rem {
        gap: 3rem;
    }
    .burger-center {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    /*------ PRODUCTO -------*/
    .productos {
        padding: 3rem;
    }
    .grid-column-3 {
        grid-template-columns: repeat(1, auto);
    }

    /*-------- ITEMS CARRITO -------*/
    .item-carrito-img img {
        width: 80px;
        height: 120px;
        object-fit: contain;
        filter: drop-shadow(0 0 .5px white);
    }
    /* .flex-direction-item {
        flex-direction: column;
    } */

    /*---- TUTORIAL ----*/
    .tutorial {
        width: 350px;
        height: 500px;
    }
    .tutorial-img {
        width: 350px;
    }
    .tutorial-img img {
        width: 350px;
        height: 500px;
    }

    /*---- FRECUENTES ----*/
    .frecuentes {
        padding: 3rem;
    }
    details {
        width: 360px;
    }

    /*-------------- FOOTER --------------*/ 
    .footer {
        padding: 3rem;
    }
    .footer-column-2 {
        grid-template-columns: repeat(1, auto);
    }
    .img-footer {
        display: none;
    }
    .my-footer {
        height: 100%;
    }
    .footer-flex {
        background-color: #6F2601;
        padding: 3rem;
        border-radius: 15px;
    }
    .center-text-footer {
        text-align: center;
    }
    .center-footer {
        display: grid;
        place-content: center;
    }

    .footer-column-2-2 {
        grid-column:inherit;
        grid-template-columns: repeat(1, auto);
        gap: 4rem;
    }
    .footer-column-3 {
        grid-template-columns: repeat(2, auto);
        gap: 2rem;
    }
    .my-footer2 {
        flex-direction: column-reverse;
        padding-top: 4rem;
        padding-inline: 3.6rem;
    }
}

@media (max-width: 450px) {
    /*-------------- HEADER --------------*/ 
    header {
        top: 0px;
        position: sticky;
        z-index: 1000;
        padding-inline: 1rem;
    }
    .title-logo img {
        width: 10rem;
    }
    .burger-icon {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .navegation > ul {
        position: fixed;
        background-color: black;
        top: 0;
        padding: 1rem;
        width: 50%;
        max-width: 300px;
        height: 100vh;
        left: -100%;
        transition: all .5s ease-in-out;
    }
    #burgercheck:checked ~ ul  {
        left: 0;
    }
    .navegation ul li > a {
        color: white;
    } 
    .navegation ul .burger-center{
        padding-left: 1rem;
    }
    .flex-row-2 {
        flex-direction: column;
    }
    .center-nav {
        display: flex;
        place-content: center;
    }
    .logo-burger {
        display: inline-block;
    }
    .logo-burger-img img {
        width: 10rem;
    }
    .logo-burger-text {
        font-size: clamp(10px, 3vw, 19px);
    }
    .gap5rem {
        gap: 3rem;
    }
    .burger-center {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    /*------ PRODUCTO -------*/
    .productos {
        padding: 3rem;
    }
    .grid-column-3 {
        grid-template-columns: repeat(1, auto);
    }

    /*-------- ITEMS CARRITO -------*/
    .item-carrito-img img {
        width: 60px;
        height: 100px;
        object-fit: contain;
        filter: drop-shadow(0 0 .5px white);
    }
    .item-carrito-gap {
        gap: .5rem;
    }

    /*----- MENSAJE EMERGENTE -----*/
    .container {
        padding: 1rem;
    }
    .message2 {
        width: 300px;
    }

    /*---- TUTORIAL ----*/
    .tutorial {
        width: 300px;
        height: 400px;
    }
    .tutorial-img {
        width: 300px;
    }
    .tutorial-img img {
        width: 300px;
        height: 400px;
    }

     /*---- FRECUENTES ----*/
    .frecuentes {
        padding: 3rem;
    }
    details {
        width: 300px;
    }

    /*-------------- FOOTER --------------*/ 
    .footer {
        padding: 3rem;
    }
    .footer-column-2 {
        grid-template-columns: repeat(1, auto);
    }
    .img-footer {
        display: none;
    }
    .my-footer {
        height: 100%;
    }
    .footer-flex {
        background-color: #6F2601;
        border-radius: 15px;
        padding: 3rem;
        width: 230px;
    }
    .title-footer {
        text-align: center;
    }
    .center-text-footer {
        text-align: center;
    }
    .center-footer {
        display: grid;
        place-content: center;
    }

    .footer-column-2-2 {
        grid-column:inherit;
        grid-template-columns: repeat(1, auto);
        gap: 4rem;
    }
    .footer-column-3 {
        grid-template-columns: repeat(2, auto);
        gap: 2rem;
    }
    .my-footer2 {
        flex-direction: column-reverse;
        padding-top: 2rem;
        padding-inline: 1rem;
    }
}

@media (max-width: 350px) {
    /*-------------- HEADER --------------*/ 
    header {
        top: 0px;
        position: sticky;
        z-index: 1000;
        padding-inline: 1rem;
    }
    .title-logo img {
        width: 10rem;
    }
    .burger-icon {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .navegation > ul {
        position: fixed;
        background-color: black;
        top: 0;
        padding: 1rem;
        width: 50%;
        max-width: 300px;
        height: 100vh;
        left: -100%;
        transition: all .5s ease-in-out;
    }
    #burgercheck:checked ~ ul  {
        left: 0;
    }
    .navegation ul li > a {
        color: white;
    } 
    .navegation ul .burger-center{
        padding-left: 1rem;
    }
    .flex-row-2 {
        flex-direction: column;
    }
    .center-nav {
        display: flex;
        place-content: center;
    }
    .logo-burger {
        display: inline-block;
    }
    .logo-burger-img img {
        width: 10rem;
    }
    .logo-burger-text {
        font-size: clamp(10px, 3vw, 19px);
    }
    .gap5rem {
        gap: 3rem;
    }
    .burger-center {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    /*------ PRODUCTO -------*/
    .productos {
        padding: 3rem;
    }
    .grid-column-3 {
        grid-template-columns: repeat(1, auto);
    }

    /*-------- ITEMS CARRITO -------*/
    .item-carrito-img img {
        width: 50px;
        height: 80px;
        object-fit: contain;
        filter: drop-shadow(0 0 .5px white);
    }
    .item-carrito-gap {
        gap: 0.4rem;
    }
    .item-carrito-gap-2 {
        gap: 0.3rem;
    }
    .item-carrito-gap-3 {
        gap: 0.2rem;
    }

    .item-delete {
        height: 5%;
        background-color: red;
        color: white;
        padding-inline: .3rem;
        padding-block: .2rem;
        border-radius: 100%;
        /* font-size: clamp(11px, 3vw, 16px); */
        cursor: pointer;
    }

    /*----- MENSAJE EMERGENTE -----*/
    .container {
        padding: 1rem;
    }
    .message2 {
        width: 250px;
    }

    /*---- TUTORIAL ----*/
    .tutorial {
        width: 250px;
        height: 350px;
    }
    .tutorial-img {
        width: 250px;
    }
    .tutorial-img img {
        width: 250px;
        height: 350px;
    }

     /*---- FRECUENTES ----*/
    .frecuentes {
        padding: 3rem;
    }
    details {
        width: 250px;
    }

    /*-------------- FOOTER --------------*/ 
    .footer {
        padding: 3rem;
    }
    .footer-column-2 {
        grid-template-columns: repeat(1, auto);
    }
    .img-footer {
        display: none;
    }
    .my-footer {
        height: 100%;
    }
    .footer-flex {
        background-color: #6F2601;
        border-radius: 15px;
        padding: 3rem;
        width: 180px;
    }
    .title-footer {
        text-align: center;
    }
    .center-text-footer {
        text-align: center;
    }
    .center-footer {
        display: grid;
        place-content: center;
    }

    .footer-column-2-2 {
        grid-column:inherit;
        grid-template-columns: repeat(1, auto);
        gap: 4rem;
    }
    .footer-column-3 {
        grid-template-columns: repeat(2, auto);
        gap: 1rem;
    }
    .my-footer2 {
        flex-direction: column-reverse;
        padding-top: 4rem;
        padding-inline: 1rem;
    }
}

@media (max-width: 320px) {
    /*-------------- HEADER --------------*/ 
    header {
        top: 0px;
        position: sticky;
        z-index: 1000;
        padding-inline: 1rem;
    }
    .title-logo img {
        width: 10rem;
    }
    .burger-icon {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .navegation > ul {
        position: fixed;
        background-color: black;
        top: 0;
        padding: 1rem;
        width: 50%;
        max-width: 300px;
        height: 100vh;
        left: -100%;
        transition: all .5s ease-in-out;
    }
    #burgercheck:checked ~ ul  {
        left: 0;
    }
    .navegation ul li > a {
        color: white;
    } 
    .navegation ul .burger-center{
        padding-left: 1rem;
    }
    .flex-row-2 {
        flex-direction: column;
    }
    .center-nav {
        display: flex;
        place-content: center;
    }
    .logo-burger {
        display: inline-block;
    }
    .logo-burger-img img {
        width: 10rem;
    }
    .logo-burger-text {
        font-size: clamp(10px, 3vw, 19px);
    }
    .gap5rem {
        gap: 3rem;
    }
    .burger-center {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    /*------ PRODUCTO -------*/
    .productos {
        padding-block: 3rem;
        padding-inline: 0;
    }
    .grid-column-3 {
        grid-template-columns: repeat(1, auto);
    }

    /*----- MENSAJE EMERGENTE -----*/
    .container {
        padding: .8rem;
    }
    .message2 {
        width: 220px;
    }

     /*---- FRECUENTES ----*/
    .frecuentes {
        padding-block: 3rem;
        padding-inline: 0;
    }
    details {
        width: 230px;
    }

    /*-------------- FOOTER --------------*/ 
    .footer {
        padding: 3rem;
    }
    .footer-column-2 {
        grid-template-columns: repeat(1, auto);
    }
    .img-footer {
        display: none;
    }
    .my-footer {
        height: 100%;
    }
    .footer-flex {
        background-color: #6F2601;
        border-radius: 15px;
        padding: 3rem;
        width: 180px;
    }
    .title-footer {
        text-align: center;
    }
    .center-text-footer {
        text-align: center;
    }
    .center-footer {
        display: grid;
        place-content: center;
    }

    .footer-column-2-2 {
        grid-column:inherit;
        grid-template-columns: repeat(1, auto);
        gap: 4rem;
    }
    .footer-column-3 {
        grid-template-columns: repeat(2, auto);
        gap: 1rem;
    }
    .my-footer2 {
        flex-direction: column-reverse;
        padding-top: 4rem;
        padding-inline: 1rem;
    }
}