/*======================================================
TABLET
======================================================*/

@media(max-width:991px){

.hero-logo{

width:250px;

}

.hero-content h1{

font-size:42px;

}

.hero-categorias{

font-size:18px;

}

.section-title h2{

font-size:38px;

}

.local{

grid-template-columns:1fr;

gap:40px;

margin-bottom:90px;

}

.local.invertido .local-imagen,
.local.invertido .local-info{

order:initial;

}

.local-imagen img{

height:450px;

}

.online-content h2{

font-size:46px;

}

.historia-box h2{

font-size:40px;

}

}

/*======================================================
CELULARES
======================================================*/

@media(max-width:768px){

/*=========================
NAVBAR
=========================*/

#navbar{

    padding:14px 0;

}

#navbar.scrolled{

    padding:14px 0;

}

#navbar .container{

    padding:0 20px;

}

.logo img{

    height:46px;

    opacity:1;

    visibility:visible;

}

.menu-toggle{

    display:block;

    font-size:42px;

    color:white;

}

#navbar.scrolled .menu-toggle{

    color:white;

}

/*=========================
MENU
=========================*/

#menu{

    display:none;

}

#menu.show{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    position:fixed;

    top:78px;

    left:0;

    width:100%;

    background:rgba(35,26,55,.98);

    backdrop-filter:blur(12px);

    padding:28px;

    gap:22px;

    box-shadow:0 15px 35px rgba(0,0,0,.20);

    z-index:10001;

}

#menu.show a{

    color:#fff;

    font-size:18px;

    font-weight:600;

}

#menu.show a:hover{

    color:var(--accent);

}

/*=========================
HERO
=========================*/

#hero{

    min-height:100svh;

    padding-top:95px;

    padding-bottom:70px;

}

.hero-logo{

    width:250px;

    margin-bottom:10px;

}

.hero-desde{

    margin-top:0;

    margin-bottom:15px;

    font-size:14px;

    letter-spacing:3px;

}

.hero-categorias{

    font-size:16px;

    gap:12px;

    margin-bottom:35px;

}

.hero-content h1{

    font-size:48px;

    line-height:1.12;

    padding:0 20px;

    margin-bottom:55px;

}

.hero-scroll{

    bottom:25px;

}

.hero-scroll span{

    font-size:15px;

}

.hero-scroll i{

    font-size:28px;

}

/*=========================
TITULOS
=========================*/

.section-title h2{

    font-size:34px;

}

.section-title p{

    font-size:17px;

}


/*=========================
LOCALES
=========================*/

.local{

    grid-template-columns:1fr;

    gap:35px;

    margin-bottom:70px;

}

.local-imagen img{

    height:auto;

    aspect-ratio:4/3;

    border-radius:22px;

}

.local-info{

    padding:0 5px;

}

.local-info h3{

    font-size:28px;

    line-height:1.1;

    margin-bottom:18px;

}

.local-direccion{

    font-size:18px;

    margin-bottom:28px;

}

/*=========================
HORARIOS
=========================*/

.local-horarios li{

    display:block;

    padding:15px 0;

}

.local-horarios strong{

    display:block;

    margin-bottom:8px;

    font-size:18px;

}

.local-horarios span{

    display:block;

    font-size:17px;

    line-height:1.5;

}

/*=========================
BOTONES
=========================*/

.local-botones{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:30px;

}

.btn-whatsapp,
.btn-maps,
.btn-galeria{

    width:100%;

    justify-content:center;

    min-height:58px;

    font-size:18px;

    border-radius:40px;

}

.btn-whatsapp i,
.btn-maps i,
.btn-galeria i{

    margin-right:10px;

}

/*=========================
CARLITOS ONLINE
=========================*/

.online{

    min-height:75vh;

    padding:90px 20px;

}

.online-content{

    max-width:100%;

}

.online-content h2{

    font-size:34px;

    line-height:1.15;

    margin-bottom:18px;

}

.online-content p{

    font-size:18px;

    line-height:1.7;

    margin-bottom:35px;

}

.btn-online{

    width:100%;

    max-width:320px;

    min-height:58px;

    font-size:18px;

}


/*=========================
HISTORIA
=========================*/

.historia{

    padding:90px 20px;

}

.historia-box{

    padding:40px 28px;

    border-radius:22px;

}

.historia-box h2{

    font-size:32px;

    line-height:1.15;

}

.historia-box p{

    font-size:17px;

    line-height:1.9;

}


/*=========================
CONTACTO
=========================*/

.contacto-box{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:45px;

}

.contacto-item{

    width:100%;

    padding:28px;

    border-radius:22px;

}

.contacto-item i{

    font-size:42px;

}

.contacto-item strong{

    font-size:18px;

}

.contacto-item span{

    font-size:16px;

}


/*=========================
FOOTER
=========================*/

footer{

    padding:70px 20px 110px;

}

.footer-logo{

    width:170px;

    margin-bottom:5px;

}

.footer-desde{

    margin-top:0;

    margin-bottom:18px;

}

footer p{

    font-size:17px;

    line-height:1.7;

    margin-bottom:30px;

}

.footer-redes{

    gap:18px;

}

.footer-redes a{

    width:52px;

    height:52px;

}

footer small{

    display:block;

    margin-top:30px;

    line-height:1.8;

}


/*=========================
BOTON SUBIR
=========================*/

#backTop{

    width:60px;

    height:60px;

    right:18px;

    bottom:18px;

}

#backTop i{

    font-size:22px;

}

/*======================================================
CELULARES PEQUEÑOS
======================================================*/

@media(max-width:480px){

.hero-content h1{

font-size:24px;

}

.online-content h2{

font-size:28px;

}

.section-title h2{

font-size:26px;

}

.local-imagen img{

height:300px;

}

}