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

@media (max-width:992px){

    .container{

        width:92%;

    }

}


/* ==================================================
                MOBILE
================================================== */

@media (max-width:768px){

    .container{

        width:92%;

    }

    /* ================= HEADER ================= */

    header{

        height:75px;

    }

    .logo img{

        height:42px;

    }

    /* O menu hambúrguer será feito depois */

    nav{

        display:none;

    }

    /* ================= BOTÕES ================= */

    .btn{

        width:145px;
        height:50px;

        font-size:14px;

    }

    .btn-outline{

        padding:15px 30px;

        font-size:14px;

    }

    .subtitulo{

        font-size:12px;

        letter-spacing:.25em;

    }
/* ==========================================
            FOOTER MOBILE
========================================== */

footer{

    padding:20px 0 12px;

}

.footer-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

/* Logo */

.footer-logo{

    display:flex;

    justify-content:center;

    width:100%;

}

.footer-logo img{

    width:65px;

}

.footer-logo p{

    display:none;

}

/* Menu + Redes */

.footer-nav{

    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:flex-start;

}

.footer-links{

    text-align:left;

}

.footer-social{

    text-align:left;

}

/* Títulos */

.footer-links h3,
.footer-social h3{

    margin-bottom:12px;

    font-size:10px;

    font-weight:500;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#222;

    white-space:nowrap;

}

/* Listas */

.footer-links ul,
.footer-social ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.footer-links li,
.footer-social li{

    margin:0;

}

.footer-links a,
.footer-social a{

    font-size:14px;

    color:#5B5B5B;

    line-height:1.5;

}

/* Copyright */

.copyright{

    margin-top:18px;

    padding-top:12px;

    border-top:1px solid #E5DFD3;

    text-align:center;

    font-size:10px;

    line-height:1.6;

    color:#888;

}

.copyright a{

    color:#B89661;

}
}/* ==========================================
            MENU MOBILE
========================================== */

.menu-toggle{

    display:none;

    width:42px;

    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    position:relative;

    z-index:1002;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px auto;

    background:#555;

    transition:.35s;

}

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

@media(max-width:768px){

header{

    height:75px;

}

.logo img{

    height:45px;

}

.menu-toggle{

    display:block;

}

nav{

    position:fixed;

    top:0;

    right:-100%;

    width:280px;

    height:100vh;

    background:#F7F4ED;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.4s;

    z-index:999;

    box-shadow:-8px 0 30px rgba(0,0,0,.12);

}

nav ul{

    flex-direction:column;

    gap:30px;

    text-align:center;

}

nav a{

    font-size:15px;

    letter-spacing:3px;

}

nav.ativo{

    right:0;

}

.menu-overlay.ativo{

    opacity:1;

    visibility:visible;

}

.menu-toggle.ativo span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.ativo span:nth-child(2){

    opacity:0;

}

.menu-toggle.ativo span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

}