@media (max-width:1024px){
    .menu{
        gap:24px;
        font-size:.95rem;
    }

    .hero-texto h1{
        font-size:4rem;
    }

    .badge{
        right:40px;
        top:70px;
        transform:scale(.9);
    }
}

@media (max-width:768px){

    html{
        scroll-behavior:smooth;
    }

    body{
        overflow-x:hidden;
    }

    .topbar{
        display:none;
    }

    header{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        border:none !important;
        background:transparent !important;
        box-shadow:none !important;
        z-index:9999;
    }

    header::before,
    header::after,
    .navbar::before,
    .navbar::after{
        display:none !important;
        content:none !important;
        border:none !important;
        box-shadow:none !important;
    }

    .navbar{
        height:90px;
        display:grid;
        grid-template-columns:60px 1fr 60px;
        align-items:center;
        padding:0 15px;
        position:relative;
        z-index:10000;
        border:none !important;
        box-shadow:none !important;
    }

    .logo{
        order:2;
        position:relative;
        justify-self:center;
        display:flex;
        align-items:center;
        transform:none;
        margin-top:18px;
    }

    .logo img:first-child{
        width:110px;
    }

    .logo-nombre{
        position:absolute;
        left:12px;
        top:125%;
        transform:translateY(-50%) scale(1.25);
        transform-origin:center;
    }

    .menu-movil{
        order:1;
        justify-self:start;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:2.2rem;
        color:#b62025;
        z-index:10002;
    }

    .btn-pedir{
        order:3;
        justify-self:end;
        background:none;
        padding:0;
        box-shadow:none;
        font-size:0;
        color:#b62025;
    }

    .btn-pedir i{
        font-size:2rem;
        transform:none;
    }

    .btn-pedir:hover{
        transform:none;
    }

.menu{
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    min-height:100svh;

    background:
        linear-gradient(
            rgba(245,237,220,.75),
            rgba(245,237,220,.75)
        ),
        url("Recursos/FondoM.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

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

    transition:.35s;
    z-index:9998;
}

.menu.activo{
    left:0;
}
    .menu a{
        font-size:1.1rem;
    }

.hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:760px;
    max-height:900px;
    overflow:hidden;
}
.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}
.hero-overlay{
    background:linear-gradient(
        to bottom,
        rgba(245,237,220,.60) 0%,
        rgba(245,237,220,.30) 25%,
        rgba(245,237,220,.03) 55%,
        rgba(0,0,0,.12) 100%
    );
}
.hero-contenido{
    position:relative;
    z-index:10;
    width:100%;
    height:100%;
    padding:190px 20px 25px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    box-sizing:border-box;
}
.hero-texto{
    width:100%;
    max-width:370px;
    text-align:left;
    display:flex;
    flex-direction:column;
}
.hero-texto h1{
    order:1;
    width:100%;
    max-width:350px;
    margin:0 0 16px;
    font-size:clamp(2.65rem,11vw,3.5rem);
    line-height:.95;
    color:#22264a;
}
.hero-texto span{
    color:#b62025;
}
.hero-texto p{
    order:2;
    width:100%;
    max-width:335px;
    margin:0 0 12px;
    color:#111;
    font-size:clamp(.88rem,3.8vw,1rem);
    font-weight:500;
    line-height:1.45;
}
.detalle{
    order:3;
    width:min(230px,68vw);
    margin:0;
    transform:none;
}

.hero-botones{
    position:absolute;
    left:20px;
    bottom:70px;
    margin:0;
    display:flex;
    justify-content:flex-start;
    z-index:30;
}

.btn-rojo{
    width:135px;
    height:52px;
    padding:0;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0;
    font-weight:700;
}
.btn-rojo::after{
    content:"MENÚ";
    font-size:1rem;
    font-weight:700;
    color:#fff;
}
.btn-video,
.plato-slider,
.platillo,
.humo{
    display:none;
}
.slider-dots{
    position:absolute;
    left:50%;
    bottom:35px;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:30;
}
.slider-dots span{
    width:13px;
    height:13px;
}

    .badge{
        width:100px;
        top:420px;
        right:15px;
    }

    .badge-texto{
        position:absolute;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        inset:0;
        transform:translateY(-25px);
    }

    .badge-texto span{
        font-size:13px;
        margin-bottom:2px;
    }

    .badge-texto h3{
        font-size:18px;
        line-height:1;
        margin:2px 0;
    }

    .badge-texto p{
        font-size:15px;
        margin-top:2px;
    }

    .usuario-logueado{
        order:3;
        justify-self:end;
        display:flex;
        align-items:center;
        gap:5px;
    }

    .nombre-usuario{
        font-size:0;
        display:flex;
        align-items:center;
    }

    .nombre-usuario i{
        font-size:2rem;
        color:#b62025;
    }

    .btn-cerrar-sesion{
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#b62025;
        color:#fff;
        border-radius:50%;
    }

    .btn-cerrar-sesion i{
        font-size:1.25rem;
    }
}

@media (max-width:380px){

    .hero-contenido{
        padding-left:18px;
        padding-right:18px;
    }

    .hero-texto h1{
        font-size:2.7rem;
    }

    .hero-texto p{
        max-width:290px;
        font-size:.86rem;
    }

    .logo img:first-child{
        width:105px;
    }

    .hero-botones{
        left:18px;
    }
}