/* ===========================================
   RESPONSIVO - TABLETS
=========================================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:58px;

}

.hero p{

    font-size:22px;

}

.about-grid{

    gap:40px;

}

.footer-grid{

    grid-template-columns:repeat(2,1fr);

}

}

/* ===========================================
   TABLETS
=========================================== */

@media (max-width:992px){

#menuPrincipal{

    display:none;

}

.menu-mobile{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border:none;

    border-radius:12px;

    background:#d9a441;

    color:#111;

    font-size:28px;

    cursor:pointer;

}



.hero{

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero-logo{

    margin:auto;

    margin-bottom:25px;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:20px;

}

.hero-buttons{

    justify-content:center;

}

.info-grid{

    grid-template-columns:repeat(2,1fr);

}

.about-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:repeat(2,1fr);

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    margin:auto;

    margin-bottom:20px;

}

}

/* ===========================================
   CELULARES
=========================================== */

@media (max-width:768px){

header{

    height:75px;

}

.logo img{

    width:70px;

}

.hero{

    min-height:90vh;

    padding:120px 0 60px;

}

.hero h1{

    font-size:38px;

    line-height:1.2;

}

.hero p{

    font-size:18px;

    margin-bottom:30px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,
.btn-secondary{

    width:100%;

    max-width:320px;

}

.section{

    padding:70px 0;

}

.section-title h2{

    font-size:34px;

}

.section-title p{

    font-size:16px;

}

.info-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

#menuContainer{

    grid-template-columns:1fr;

}

.featured-grid{

    grid-template-columns:1fr;

}

#promotionsContainer{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.about-items{

    grid-template-columns:1fr;

}

.about-content h2{

    font-size:36px;

}

.modalBox{

    width:95%;

}

.modalBox img{

    height:240px;

}

.modalContent{

    padding:25px;

}

.modalContent h2{

    font-size:30px;

}

.modalButtons{

    flex-direction:column;

}

.modalButtons a,

.modalButtons button{

    width:100%;

}

.map-box iframe{

    height:320px;

}

.floating-order{

    left:15px;

    bottom:15px;

    padding:14px 22px;

    font-size:14px;

}

.floating-whatsapp{

    right:15px;

    bottom:15px;

    width:60px;

    height:60px;

}

#backTop{

    right:15px;

    bottom:90px;

}

}

/* ===========================================
   CELULARES PEQUENOS
=========================================== */

@media (max-width:480px){

.container{

    width:94%;

}

header{

    height:70px;

}

.logo img{

    width:60px;

}

.hero{

    min-height:100vh;

    padding-top:110px;

}

.hero-logo{

    width:120px;

}

.hero-small{

    font-size:12px;

    letter-spacing:2px;

}

.hero h1{

    font-size:30px;

    line-height:1.2;

}

.hero p{

    font-size:16px;

}

.btn-primary,

.btn-secondary{

    width:100%;

    padding:15px;

    font-size:15px;

}

.section{

    padding:60px 0;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:15px;

}

.food-title,

.menu-info h3,

.promotion-title{

    font-size:24px;

}

.about-content h2{

    font-size:30px;

}

.contact-card{

    padding:25px;

}

.info-card{

    padding:25px;

}

.modalContent{

    padding:20px;

}

.modalContent h2{

    font-size:26px;

}

.modalContent p{

    font-size:15px;

}

.floating-order{

    left:10px;

    bottom:10px;

    padding:12px 18px;

    font-size:13px;

}

.floating-whatsapp{

    width:55px;

    height:55px;

    right:10px;

    bottom:10px;

}

.floating-whatsapp img{

    width:28px;

}

#backTop{

    width:48px;

    height:48px;

    right:10px;

    bottom:75px;

    font-size:20px;

}

.footer-copy{

    font-size:13px;

}

}

/* ===========================================
   MENU MOBILE
=========================================== */

.menu-mobile{

    display:none;

}

@media (max-width:992px){

nav.open{

    display:flex !important;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    position:absolute;

    top:75px;

    left:0;

    right:0;

    width:100%;

    background:#111;

    padding:30px 0;

    gap:25px;

    z-index:1000;

    border-top:1px solid rgba(255,255,255,.08);

}


nav.open a{

    font-size:18px;

    text-align:center;

}

}

@media (max-width:768px){

    .menu-table{

        width:100%;
        margin-top:20px;
        font-size:13px;

    }


    .menu-table th{

        padding:10px 5px;
        font-size:13px;

    }


    .menu-table td{

        padding:10px 5px;

    }


    .menu-table td:first-child{

        font-size:14px;

    }


    .menu-table td:nth-child(2){

        font-size:12px;

    }


    .menu-table td:nth-last-child(-n+2){

        font-size:13px;

    }

}

/* =========================
   AJUSTE MENU MOBILE FINAL
========================= */

@media (max-width:992px){

    .menu-mobile{

        display:flex !important;

        align-items:center;

        justify-content:center;

    }


    #menuPrincipal.open{

        display:flex !important;

        flex-direction:column;

        align-items:center;

        position:absolute;

        top:75px;

        left:0;

        width:100%;

        background:#111;

        padding:30px 0;

        gap:25px;

        z-index:9999;

    }


    #menuPrincipal.open a{

        color:#fff;

        text-align:center;

        font-size:18px;

    }

}