header {border-top: 9px solid var(--azul);}
header .logo {max-width: 294px; width: 100%; min-width: 123px; height: auto; display: flex; justify-content: center; align-items: center; margin: 19px 0;}
header .logo img {width: 100%; height: 100%;}

header .conteudo {display: flex; flex-direction: row; justify-content: space-between; gap: 30px;}

header .info {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 796px; position: relative; background-color: var(--branco); min-width: auto; gap: 20px;}

header .links {max-width: 100%; width: fit-content; height: 100%; width: 433px; min-width: 417px;}
header .links ul {display: flex; justify-content: center; align-items: center; width: 100%; gap: 0; position: relative; height: 100%; width: 100%;}
header .links li {height: fit-content; width: 100%;}
header .links .pagina {font: 400 15px / 18px montserrat; color: var(--cinza); display: flex; gap: 7px; align-items: center; cursor: pointer; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; height: fit-content;}
header .links .pagina p::before {content: ''; width: 80%; height: 3px; background-color: var(--azul); position: absolute; bottom: -5px; transform: scaleX(0); padding: 0 20px; transition: 0.4s;}
header .links .pagina p {transition: 0.2s; position: relative; display: flex; justify-content: center; align-items: center;}
header .links .pagina.ativo p::before,
header .links .pagina:hover p::before {transform: scaleX(1);}

header .redes {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; gap: 12px; position: relative; width: 317px; height: 100%;}
header .redes .ext {display: flex; gap: 8px;}

header .redes a {display: flex; justify-content: space-between; align-items: center; gap: 9px; transition: 0.4s;}
header .redes a.whatsapp .texto {font: 400 16.8px / 19px montserrat; color: var(--cinza);}
header .redes a.whatsapp .texto strong {font-size: 18.91px;}
header .redes a.whatsapp .icone {width: 17px; height: 17px;}
header .redes a.email:hover .texto {color: var(--azul);}
header .redes a.email .icone {width: 18px; height: 14px;}
header .redes a.whatsapp .texto, header .redes a.whatsapp strong {transition: 0.4s;}
header .redes a.whatsapp:hover .texto, header .redes a.whatsapp:hover strong {color: var(--verde);}
header .redes a.instagram:hover, header .redes a.facebook:hover {transform: scale(1.06);}

header .redes .texto {font: 400 15.46px / 18px montserrat; color: var(--cinza); transition: 0.4s;}
header .redes .icone {width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;}
header .redes .icone svg {width: 100%; height: 100%;}
header .bar {max-width: 107px; width: 100%; height: 2px; background: var(--cinza); position: relative;}


.mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; height: 100vh; background-color: var(--branco); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; z-index: 999; overflow-y: auto; }
.mobile-menu.active { right: 0; }
.mobile-nav { padding: 5rem 2rem 2rem; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav ul li { margin-bottom: 1.5rem; }
.mobile-nav ul li .pagina { text-decoration: none; color: var(--preto); font: 400 15px var(--font1); display: block; padding: 5px 0; transition: color 0.3s ease, padding-left 0.3s ease; cursor: pointer;}
.mobile-nav ul li .pagina:hover, .mobile-nav ul li .pagina.ativo { color: var(--azul); padding-left: 1rem; }

.menu-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; cursor: pointer; z-index: 1001; transition: all 0.3s ease; }
/* .menu-hamburger.active span {background-color: var(--preto);} */
.menu-hamburger span { display: block; width: 100%; height: 3px; background-color: var(--preto); border-radius: 3px; transition: all 0.3s ease;}
.menu-hamburger.active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg);}
.menu-hamburger.active span:nth-child(2) { opacity: 0;}
.menu-hamburger.active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg);}


@media (min-width: 990px) {    
    .nav-menu { display: block ; }
    .menu-hamburger { display: none; }
    .mobile-menu { display: none; }
}

@media (max-width: 1200px) {
    header .info {justify-content: flex-end;}
    header .redes {flex-direction: row; width: fit-content; align-items: center;}
    header .redes a .texto {display: none;}
    header .links .pagina {font-size: 14px;}
    header .redes a.whatsapp .icone {width: 20px; height: 20px;}
    header .redes a.email .icone {width: 22px; height: 18px;}

} 
@media (max-width: 990px) {
    header .conteudo {align-items: center;}

    header .info::after {content: none;}

    header .links, header .bar, header .redes a.instagram, header .redes a .texto {display: none;}

    header .redes .ext, header .redes a.email {display: none;}

    header .logo {margin: 15px 0; max-width: 200px;}

    header .info {justify-content: flex-end; width: fit-content; min-width: fit-content;}
    header .redes {padding: 0;}
    header .redes {width: fit-content; max-width: 100%; flex-direction: row;}
    header .redes a.whatsapp .icone {width: 25px; height: 25px;}
    header .redes a.whatsapp:hover {transform: scale(1.1);}

    .header .btn-telefone {display: block}
    .header .btn-whats {display: none;}    
    .header .logo {max-width: 180px;}
    .header .btn-whats {padding: 0; border-radius: 100%; gap: 0;}
    .header .btn-whats .icone {display: flex; }
    .header .btn-whats .icone svg {width: 17px; height: 17px;}
    .header .btn-whats p {display: none;}
}