/* ==========================================================================
Arício Andrade Advocacia Especializada — camada de modernização visual
Este arquivo é ADITIVO: carrega depois de main.min.css e apenas refina
(cores, sombras, espaçamento, transições, tipografia). Nenhuma classe do
tema original foi removida ou renomeada, então nada deixa de funcionar.
========================================================================== */
:root {
--brand: #b70d19;
--brand-dark: #8c0a13;
--brand-light: #d94550;
--ink: #1f2023;
--muted: #6b6b6f;
--surface: #ffffff;
--surface-alt: #f7f5f4;
--radius-sm: 6px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-sm: 0 2px 8px rgba(20, 20, 20, .06);
--shadow-md: 0 10px 30px rgba(20, 20, 20, .10);
--shadow-lg: 0 20px 45px rgba(20, 20, 20, .16);
--ease: cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Tipografia — Montserrat/Maven Pro já eram pedidas pelo tema original,
agora chegam carregadas corretamente pelo de fontes. */
.title, .numero, .product-item-name, .profissional-name, .contact-subtitle {
letter-spacing: .2px;
}
.sub-title { color: var(--muted); line-height: 1.7; }
/* Cabeçalho: leve profundidade ao fixar/scrollar, sem alterar layout */
#header { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
#header.colored { box-shadow: 0 1px 0 rgba(0,0,0,.05); }
#header .header-top { border-bottom: 1px solid rgba(255,255,255,.12); }
#header .redes img.icon { transition: transform .2s var(--ease), opacity .2s var(--ease); }
#header .redes:hover img.icon { transform: translateY(-2px); opacity: .85; }
/* Menu principal com sublinhado animado moderno */
.nav-main > li > a { position: relative; }
.nav-main > li > a::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 6px;
height: 2px;
background: currentColor;
opacity: 0;
transform: scaleX(.4);
transform-origin: center;
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-main > li:hover > a::after,
.nav-main > li.active > a::after { opacity: .85; transform: scaleX(1); }
/* Botões e links de ação: leve elevação no hover */
.link-mais, .more-institutional, .btn, a.redes, .footer-redes-sociais {
transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.link-mais:hover { transform: translateX(4px); }
.more-institutional:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* Cards de áreas de atuação: sombra e cantos suaves modernos */
.list-atuacao > li {
border-radius: var(--radius-md);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
padding: 18px 12px;
}
.list-atuacao > li:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
background-color: var(--surface-alt);
}
.list-atuacao img { transition: transform .3s var(--ease); }
.list-atuacao > li:hover img { transform: scale(1.06); }
/* Seção de números: destaque com leve textura de profundidade */
#numeros { position: relative; }
#numeros .numero { text-shadow: 0 2px 12px rgba(0,0,0,.25); }
#numeros .numero-valor { font-variant-numeric: tabular-nums; display: inline-block; }
/* Slider da home: mesmas imagens do desktop no mobile, com enquadramento
consistente por viewport (object-fit cover em vez do recorte fixo antigo,
que só funcionava para uma imagem de exatamente 1920px de largura). */
.slider-home, .slider-home-mobile { overflow: hidden; }
.slider-home .slick-slide, .slider-home-mobile .slick-slide {
height: 420px;
overflow: hidden;
position: relative;
}
.slider-home .slick-slide > div, .slider-home-mobile .slick-slide > div,
.slider-home .slick-slide a, .slider-home-mobile .slick-slide a {
display: block;
height: 100%;
}
.slider-home .slick-slide img, .slider-home-mobile .slick-slide img {
position: static !important;
left: auto !important;
margin-left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center 30%;
box-shadow: none;
}
@media screen and (max-width: 991px) {
.slider-home .slick-slide, .slider-home-mobile .slick-slide { height: 300px; }
}
@media screen and (max-width: 480px) {
.slider-home .slick-slide, .slider-home-mobile .slick-slide { height: 220px; }
}
.slider-home .slick-dots li button:before,
.slider-home-mobile .slick-dots li button:before { transition: opacity .2s var(--ease); }
/* Cartões de profissionais: elevação sutil, sem tocar no grid */
.profissional-item {
padding: 24px;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.profissional-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.profissional-name { color: var(--brand) !important; }
/* Foto de cada profissional: qualquer resolução/proporção enviada é
automaticamente recortada e centralizada no mesmo formato, sem distorcer. */
.foto-wrapper {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--surface-alt);
margin: 0 0 20px;
}
.foto-wrapper .foto-profissional {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center top;
margin: 0 !important;
border-radius: var(--radius-md);
transition: transform .3s var(--ease);
}
.profissional-item:hover .foto-profissional { transform: scale(1.04); }
/* Notícias/artigos: cards com respiro e hover consistente */
.notice-group-itens .notice-item,
.product-item {
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.notice-group-itens .notice-item:hover,
.product-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.notice-item-title, .link-noticia { transition: color .18s var(--ease); }
/* Links úteis: logos ganham leve destaque no hover */
.list-links-uteis img { filter: grayscale(35%); opacity: .85; transition: filter .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease); }
.list-links-uteis a:hover img { filter: grayscale(0%); opacity: 1; transform: translateY(-2px); }
/* ==========================================================================
Rodapé — mais hierarquia visual, ícones sociais em destaque e uma barra
de copyright mais equilibrada, sem alterar a estrutura HTML existente.
========================================================================== */
#footer {
background-image: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
position: relative;
}
#footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--brand-light), var(--brand-dark) 70%);
}
/* Títulos das colunas: mais destaque, com linha divisória sutil */
#footer h3 {
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
padding-bottom: 14px;
margin: 0 0 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
#footer h3 a { color: #fff !important; }
#footer h3 a:hover { color: rgba(255,255,255,.8) !important; }
/* Garante que os ícones flutuantes (pull-right) fiquem contidos antes da
linha divisória, sem cortar os círculos ao meio */
#footer h3::after { content: ""; display: table; clear: both; }
/* Texto institucional e endereço: mais legível, com ícone de localização */
#footer p, #footer .list-unstyled { opacity: .88; line-height: 1.75; }
#footer .list-unstyled li {
display: flex;
align-items: flex-start;
gap: 8px;
}
#footer .list-unstyled li::before {
content: "\f041";
font-family: FontAwesome;
font-size: 15px;
opacity: .75;
line-height: 1.5;
flex-shrink: 0;
}
/* Botão "+ detalhes": vira um pill discreto, coerente com o resto do site */
#footer .more-institutional {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, .12);
padding: 9px 18px !important;
border-radius: 999px;
font-size: 13px !important;
letter-spacing: .3px;
}
#footer .more-institutional:hover { background: rgba(255, 255, 255, .22); }
/* Redes sociais: ícones dentro de círculos, com leve elevação no hover */
#footer h3 .pull-right { display: flex; gap: 10px; align-items: center; }
#footer .footer-redes-sociais {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
margin-right: 0 !important;
transition: transform .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease);
}
#footer .footer-redes-sociais i { opacity: 1; }
#footer .footer-redes-sociais:hover {
transform: translateY(-3px);
background-color: rgba(255, 255, 255, .26);
opacity: 1;
}
/* Barra de copyright: divisão sutil e melhor comportamento no mobile */
.footer-copyright { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-copyright .copyright { opacity: .75; font-weight: 500 !important; }
/* Selo do desenvolvedor: badge circular com "M", linkando para o Instagram */
.footer-copyright .dev-credit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: var(--brand, #b70d19);
color: #fff !important;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 1;
float: right;
margin: 11px 12px 0 0;
transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.footer-copyright .dev-credit:hover {
transform: translateY(-3px);
background-color: #fff;
color: var(--brand, #b70d19) !important;
}
@media screen and (max-width: 767px) {
.footer-copyright .container .row > div {
text-align: center;
float: none !important;
width: 100%;
}
.footer-copyright .copyright { float: none !important; margin: 8px 0 0; }
.footer-copyright .dev-credit { float: none !important; display: inline-flex; margin: 10px auto 0; }
}
/* Botão flutuante do WhatsApp: pulso sutil para chamar atenção sem ser irritante.
O pulso é um anel (::after) animado só com opacity/transform — animar a
box-shadow redesenhava a tela a cada quadro e pesava na rolagem. */
.floating-whats a {
box-shadow: 0 4px 14px rgba(37, 211, 102, .45);
}
.floating-whats a::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(37, 211, 102, .35);
opacity: 0;
pointer-events: none;
animation: whats-pulse 2.6s ease-in-out infinite;
}
.floating-whats a:hover { transform: scale(1.08); }
.floating-whats a:hover::after { animation-play-state: paused; }
@keyframes whats-pulse {
0%, 100% { opacity: 0; transform: scale(.92); }
50% { opacity: 1; transform: scale(1); }
}
/* Formulários: foco acessível e bordas mais suaves */
.form-control {
border-radius: var(--radius-sm);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(183, 13, 25, .15);
}
/* Foco visível para navegação por teclado (acessibilidade) */
a:focus-visible, button:focus-visible, .btn:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Seção "Siga-nos no Instagram" */
#instagram-feed { padding: 60px 0 70px; background: var(--surface-alt); }
#instagram-feed .sub-title a { color: var(--brand); font-style: normal; font-weight: 600; }
#instagram-feed .sub-title a:hover { color: var(--brand-dark); text-decoration: underline; }
.instagram-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 0; margin-bottom: 30px; }
.instagram-grid > div { display: flex; justify-content: center; margin-bottom: 20px; }
.instagram-grid iframe.instagram-media,
.instagram-grid blockquote.instagram-media {
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-md) !important;
margin: 0 !important;
}
/* Seção "Onde Estamos" (mapa) */
#onde-estamos { padding: 60px 0; }
#onde-estamos .google-map, .google-map {
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
/* Links Úteis: seção com fundo próprio + esteira (marquee) animada e contínua com os
logos dos tribunais, sem texto, tamanho visual uniforme, em P&B com cor no hover. */
#links-uteis {
background: #f3ece4;
padding: 60px 0 66px;
}
#links-uteis .title { color: var(--brand); }
.tribunais-marquee {
overflow: hidden;
width: 100%;
margin-top: 10px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tribunais-track {
display: flex;
width: max-content;
animation-name: tribunais-scroll;
animation-duration: 17s;
animation-timing-function: linear;
animation-iteration-count: infinite !important;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
will-change: transform;
}
.tribunais-marquee:hover .tribunais-track { animation-play-state: paused; }
/* Respeita quem prefere menos movimento, mas mantém o loop rodando (bem mais devagar) em vez de travar a animação */
@media (prefers-reduced-motion: reduce) {
.tribunais-track { animation-duration: 140s; }
}
@keyframes tribunais-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tribunais-group {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 8px 20px;
list-style: none;
padding: 0;
margin: 0;
}
.link-tribunal {
display: flex;
align-items: center;
justify-content: center;
width: 168px;
height: 84px;
border-radius: var(--radius-md);
text-decoration: none !important;
transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.link-tribunal:hover { transform: translateY(-4px); background: rgba(183, 13, 25, .05); }
.link-tribunal .logo-tribunal {
max-width: 132px;
max-height: 52px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: .55;
transition: filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.link-tribunal:hover .logo-tribunal {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.08);
}
/* Logo oficial do TST é uma versão clara (texto branco); precisa de fundo escuro para ficar legível mesmo em P&B */
.link-tribunal.tst-badge .logo-tribunal {
background: #1a3c34;
border-radius: 6px;
padding: 10px 16px;
max-width: 150px;
max-height: 60px;
}
/* Imagens de conteúdo com cantos levemente suavizados por padrão */
.img-responsive { border-radius: var(--radius-sm); }
#header .logo img, .footer-copyright .logo img, .redes img, .footer-redes-sociais i, .icon { border-radius: 0; }
/* ==========================================================================
Cabeçalho, barra superior e logotipo
O tema original é um "multi-skin" com várias regras conflitantes vindas de
layouts diferentes (algumas só dentro de @media, outras fora). Isso fazia
o logotipo ser esticado/achatado (a proporção real da arte é ~1.47:1, mas
o HTML antigo declarava caixas como 208x50 ou 165x42, bem mais "achatadas").
As regras abaixo garantem a proporção correta em qualquer largura de tela,
nos estados normal e fixo (sticky), sem remover nada do tema original.
========================================================================== */
/* Barra de contato + redes sociais: fundo neutro (em vez do branco que se
misturava com o restante da página), respiro e alinhamento consistentes.
Corrige também uma regra do CSS de base com um ponto e vírgula faltando
(".header-top p{font-weight:400 color:#b70d19}"), que fazia o navegador
descartar peso da fonte e cor por inteiro nesse texto. */
#header .header-top {
position: relative;
min-height: 46px;
padding: 5px 0;
background-color: var(--surface-alt) !important;
border-bottom: 1px solid rgba(183, 13, 25, .08);
}
/* Filete vermelho no topo da barra, igual ao usado no rodapé */
#header .header-top::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-light), var(--brand-dark) 80%);
}
#header .header-top .container { display: flex; }
#header .header-top p.pull-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 8px 22px;
float: none;
line-height: 1.5;
font-weight: 400;
color: var(--brand);
}
#header .header-top .dados-fone-email {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
position: relative;
}
#header .header-top .dados-fone-email + .dados-fone-email {
padding-left: 22px;
}
#header .header-top .dados-fone-email + .dados-fone-email::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 14px;
background: rgba(183, 13, 25, .22);
}
#header .header-top .dados-fone-email a {
color: var(--brand) !important;
font-weight: 500;
transition: color .18s var(--ease);
}
#header .header-top .dados-fone-email a:hover { color: var(--brand-dark) !important; }
#header .header-top .redes { display: inline-flex; margin-left: 4px; }
/* Em telas pequenas, mantém a barra visível (o tema original a escondia
totalmente abaixo de 480px) só que mais compacta e centralizada */
@media screen and (max-width: 479px) {
#header .header-top { display: block !important; padding: 8px 0; }
#header .header-top p.pull-right { justify-content: center; text-align: center; gap: 6px 14px; }
#header .header-top .dados-fone-email { font-size: 11px; }
#header .header-top .dados-fone-email + .dados-fone-email { padding-left: 14px; }
}
@media screen and (max-width: 767px) {
#header .header-top p.pull-right { justify-content: center; text-align: center; }
}
/* Logotipo: proporção real preservada, sem mexer no display do
(o tema usa display:table/table-cell nele para o cabeçalho se sustentar;
trocar para flex tirava a altura da linha e derrubava o menu por cima).
A index usa
, as demais páginas usam — por isso os dois seletores abaixo. */
#header h1.logo img,
#header strong.logo img {
max-width: 230px;
width: auto;
height: auto;
}
/* Estado fixo (sticky): o tamanho reduzido já vem correto e proporcional
pelos atributos data-sticky-width/height (110x75, mesma proporção da
arte original), então a própria animação do tema já funciona bem —
só suavizamos a transição para não parecer um "salto" brusco. */
body.sticky-menu-active #header .logo img,
#header .logo img {
transition: width .15s var(--ease), height .15s var(--ease);
}
/* Barra fixa que aparece ao rolar a página (sticky): mantida como estava
no tema original — só acrescenta o mesmo filete vermelho da barra de
contato e do rodapé. Como position:fixed é usado com valores próprios do
tema para o "top", o filete usa position:fixed (e não relativo ao
cabeçalho) para sempre ficar colado no topo real da tela. */
body.sticky-menu-active #header::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-light), var(--brand-dark) 80%);
z-index: 1002;
}
/* O tema original sobe o logotipo 12px (margin-top:-12px) nesse estado —
some com o filete, isso cortava o topo do logo. Só compensa essa subida,
descendo-o um pouco para caber inteiro. */
body.sticky-menu-active #header .logo img {
margin-top: 13px !important;
}
/* ==========================================================================
Nova barra de navegação (do zero): fica escondida por padrão em qualquer
tamanho de tela e some ao lado do logo; some quando você clica no botão
de menu (☰), que agora fica sempre visível, e aparece como um painel
moderno, com fundo vinho, suspenso logo abaixo do cabeçalho.
========================================================================== */
/* No computador (≥992px), o menu continua estático ao lado do logotipo —
formato mais moderno (cápsula com cantos suaves, tipografia versalete
com espaçamento entre letras, leve elevação no hover) e um pouco mais
alto, para acompanhar melhor a altura do logotipo. */
@media screen and (min-width: 992px) {
/* O deslocamento precisa ser no bloco de fora (.nav-main-collapse), não
no
— ele tem overflow:hidden herdado do tema, então um "top"
no
só recortava o conteúdo por cima, sem mover nada visualmente.
Aqui a margem negativa move o bloco inteiro para cima de verdade.
Esse deslocamento grande só vale para o cabeçalho normal (mais alto);
no estado fixo (ao rolar a página) o cabeçalho fica bem mais baixo, e
o mesmo valor jogava o menu para fora da tela — por isso ele é bem
menor nesse estado, logo abaixo. */
#header .navbar-collapse.nav-main-collapse {
overflow: visible !important;
}
body:not(.sticky-menu-active) #header .navbar-collapse.nav-main-collapse {
margin-top: -130px !important;
}
body.sticky-menu-active #header .navbar-collapse.nav-main-collapse {
margin-top: -6px !important;
}
/* Uma peça única (não ladrilhos separados), mas em formato de paralelogramo
— cantos cortados na diagonal em vez do retângulo/pílula comum — para
dar um ar mais arrojado. */
#header ul.nav-main {
display: flex;
align-items: stretch;
gap: 0;
position: relative;
overflow: hidden;
background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
padding: 0 36px !important;
box-shadow: var(--shadow-lg);
animation: navBarIn .55s var(--ease) both;
}
@keyframes navBarIn {
from { opacity: 0; transform: translateX(26px); }
to { opacity: 1; transform: translateX(0); }
}
/* Brilho diagonal que atravessa a barra inteira uma única vez, ao carregar */
#header ul.nav-main::before {
content: "";
position: absolute;
top: 0;
left: -30%;
width: 26%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
transform: skewX(-20deg);
animation: navShineOnce 1.3s .65s ease-out 1;
}
@keyframes navShineOnce {
to { left: 130%; }
}
#header ul.nav-main > li { position: relative; }
#header ul.nav-main > li + li::before {
content: "";
position: absolute;
left: 0;
top: 26%;
width: 1px;
height: 48%;
background: rgba(255, 255, 255, .22);
}
#header ul.nav-main > li > a {
display: block;
position: relative;
color: #fff !important;
text-shadow: none !important;
background: transparent !important;
padding-top: 17px !important;
padding-bottom: 17px !important;
padding-left: 22px !important;
padding-right: 22px !important;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 12.5px;
letter-spacing: .8px;
text-transform: uppercase;
transition: background-color .3s var(--ease), text-shadow .3s var(--ease);
}
/* O sublinhado animado padrão do site (definido lá em cima) fica
desligado aqui — usamos um indicador próprio, que cresce do centro,
junto com um brilho suave no texto para destacar o botão selecionado */
#header ul.nav-main > li > a::after {
content: "";
position: absolute;
left: 50%;
bottom: 10px;
width: 0;
height: 2px;
background: #fff;
border-radius: 2px;
opacity: 0;
transform: translateX(-50%);
transition: width .3s var(--ease), opacity .3s var(--ease);
}
#header ul.nav-main > li:hover > a,
#header ul.nav-main > li.active > a {
background-color: rgba(255, 255, 255, .18) !important;
text-shadow: 0 0 14px rgba(255, 255, 255, .55) !important;
}
#header ul.nav-main > li:hover > a::after,
#header ul.nav-main > li.active > a::after {
width: 24px;
opacity: 1;
}
}
/* No computador (≥992px) o menu continua estático ao lado do logotipo,
exatamente como no tema original — nada aqui é sobrescrito fora do
media query abaixo, então a posição do logotipo, imagens e slides
não é afetada. O painel suspenso (com o botão ☰) vale só para
tablet/celular, que é onde o tema já escondia o menu de texto. */
@media screen and (max-width: 991px) {
#header .nav-main-collapse {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0;
right: 0;
width: 100%;
max-height: none !important;
overflow: visible !important;
background: linear-gradient(165deg, var(--brand) 0%, var(--brand-dark) 100%);
box-shadow: var(--shadow-lg);
border-radius: 0 0 var(--radius-md) var(--radius-md);
z-index: 1000;
opacity: 0;
transform: translateY(-10px);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
#header .nav-main-collapse.in {
display: block !important;
opacity: 1;
transform: translateY(0);
}
/* O plugin de collapse do Bootstrap anima a altura antes de adicionar a
classe "in" — como já animamos com opacidade/deslocamento, pulamos essa
etapa intermediária para o menu abrir na hora, sem atraso perceptível. */
#header .nav-main-collapse.collapsing {
display: block !important;
height: auto !important;
transition: none !important;
opacity: 1;
transform: translateY(0);
}
#header .nav-main-collapse > .container { padding: 10px 15px 14px; max-width: 1170px; }
#header ul.nav-main {
display: flex !important;
flex-direction: column;
float: none !important;
margin: 0 !important;
padding: 6px 0 !important;
width: 100%;
}
#header ul.nav-main > li {
float: none !important;
width: auto;
border-bottom: 1px solid rgba(255,255,255,.12);
}
#header ul.nav-main > li:last-child { border-bottom: 0; }
#header ul.nav-main > li > a {
display: block;
color: #fff !important;
background: transparent !important;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 13.5px;
letter-spacing: .5px;
text-transform: uppercase;
text-shadow: none !important;
border: 0 !important;
border-radius: var(--radius-sm);
padding: 14px 18px !important;
transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
#header ul.nav-main > li > a:hover,
#header ul.nav-main > li > a:focus {
background-color: rgba(255,255,255,.16) !important;
color: #fff !important;
}
/* Botão de menu (☰): visível só nessa faixa (tablet/celular), onde o
texto do menu fica escondido até o clique */
#header .btn-responsive-nav {
display: flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
top: 50% !important;
right: 20px !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%);
width: 46px;
height: 46px;
margin: 0;
padding: 0;
background: var(--surface-alt) !important;
border: 1px solid rgba(183,13,25,.15);
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
#header .btn-responsive-nav:hover {
background-color: var(--surface) !important;
box-shadow: var(--shadow-md);
}
#header .btn-responsive-nav:active { transform: translateY(-50%) scale(.94); }
#header .btn-responsive-nav .fa-bars {
color: var(--brand);
font-size: 19px;
line-height: 1;
}
}
/* ==========================================================================
Banners do topo de cada página interna (exceto a index): fotos novas,
pesquisadas para combinar com o tema de cada página, com um véu escuro
por cima para manter o título em branco sempre legível.
========================================================================== */
.page-top {
background-size: cover !important;
background-position: center top !important;
}
#area {
background-image:
linear-gradient(rgba(20, 10, 10, .55), rgba(20, 10, 10, .55)),
url("https://images.unsplash.com/photo-1636652966850-5ac4d02370e9?auto=format&fit=crop&w=1920&h=500&q=70") !important;
}
#escritorio {
background-image:
linear-gradient(rgba(20, 10, 10, .55), rgba(20, 10, 10, .55)),
url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1920&h=500&q=70") !important;
}
#profissionais {
background-image:
linear-gradient(rgba(20, 10, 10, .55), rgba(20, 10, 10, .55)),
url("https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&w=1920&h=500&q=70") !important;
}
#contato {
background-image:
linear-gradient(rgba(20, 10, 10, .55), rgba(20, 10, 10, .55)),
url("https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?auto=format&fit=crop&w=1920&h=500&q=70") !important;
}
#index-noticias {
background-image:
linear-gradient(rgba(20, 10, 10, .55), rgba(20, 10, 10, .55)),
url("https://images.unsplash.com/photo-1521587760476-6c12a4b040da?auto=format&fit=crop&w=1920&h=500&q=70") !important;
}
#politica-privacidade {
background-image:
linear-gradient(rgba(20, 10, 10, .55), rgba(20, 10, 10, .55)),
url("https://images.unsplash.com/photo-1479142506502-19b3a3b7ff33?auto=format&fit=crop&w=1920&h=500&q=70") !important;
}
/* ==========================================================================
Seção Áreas de Atuação — index (grid de cards modernos)
========================================================================== */
/* Reset do container */
#area-atuacao { padding: 70px 0 60px; }
#area-atuacao .list-atuacao { height: auto !important; margin-top: 0; }
/* Grid de cards */
.areas-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 40px 0 20px;
padding: 0;
list-style: none;
}
@media (max-width: 1199px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .areas-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 479px) { .areas-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* Card individual */
.area-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 22px 14px 20px;
background: var(--surface);
border: 1.5px solid rgba(183, 13, 25, .10);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
text-decoration: none !important;
color: inherit;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
transform .28s var(--ease),
box-shadow .28s var(--ease),
border-color .28s var(--ease),
background-color .28s var(--ease);
}
/* Brilho que sobe de baixo no hover */
.area-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(183,13,25,.04) 0%, rgba(183,13,25,.10) 100%);
opacity: 0;
transition: opacity .28s var(--ease);
}
.area-card:hover::before,
.area-card:focus-visible::before { opacity: 1; }
/* Linha de cor em baixo que cresce no hover */
.area-card::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-light), var(--brand-dark));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.area-card:hover::after,
.area-card:focus-visible::after { transform: scaleX(1); }
/* Estado hover do card */
.area-card:hover,
.area-card:focus-visible {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(183, 13, 25, .25);
background-color: var(--surface-alt);
text-decoration: none !important;
color: inherit;
outline: none;
}
/* Ícone */
.area-card img {
display: block;
width: 50px;
height: 50px;
object-fit: contain;
transition: transform .3s var(--ease);
position: relative;
}
.area-card:hover img { transform: scale(1.12) translateY(-2px); }
/* Texto */
.area-card span {
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--brand);
text-align: center;
line-height: 1.4;
letter-spacing: .2px;
position: relative;
}
/* Botão "Todas as áreas de atuação" — versão mais destacada */
#area-atuacao .btn-areas {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 32px;
padding: 13px 30px;
background: var(--brand);
color: #fff !important;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: .5px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 4px 18px rgba(183,13,25,.30);
transition:
background-color .22s var(--ease),
transform .22s var(--ease),
box-shadow .22s var(--ease);
}
#area-atuacao .btn-areas:hover {
background: var(--brand-dark);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(183,13,25,.40);
}
#area-atuacao .btn-areas svg {
flex-shrink: 0;
transition: transform .22s var(--ease);
}
#area-atuacao .btn-areas:hover svg { transform: translateX(4px); }
@media (max-width: 767px) {
.area-card { padding: 18px 10px 16px; gap: 10px; }
.area-card img { width: 40px; height: 40px; }
.area-card span { font-size: 12px; }
#area-atuacao .btn-areas { font-size: 13px; padding: 11px 22px; }
}
/* ==========================================================================
Rodapé — CNPJ (barra de copyright)
========================================================================== */
.footer-copyright .cnpj-footer {
display: inline;
font-size: 11px;
color: #fff;
opacity: .65;
letter-spacing: .4px;
font-weight: 400;
white-space: nowrap;
}
/* ---------- Rolagem fluida ---------- */
/* O cabeçalho troca de estado (fixed/sticky) a cada scroll; promovê-lo à sua
própria camada de composição evita repaint do restante da página. */
#header {
will-change: transform;
backface-visibility: hidden;
}
/* ==========================================================================
Banner do topo das páginas internas: o logotipo (no cabeçalho fixo)
descia por cima do título. O título agora começa abaixo do logo.
========================================================================== */
.main > .page-top {
min-height: 0;
padding: 210px 0 26px;
}
@media (max-width: 991px) {
.main > .page-top { padding-top: 232px; }
}
/* ==========================================================================
Rolagem: links para seções da mesma página param abaixo do
cabeçalho fixo (rolagem padrão do navegador).
========================================================================== */
/* Sem scroll-behavior:smooth no html: o tema já anima a rolagem via jQuery
(voltar ao topo, links internos) e as duas coisas juntas travavam a barra. */
.product-group-itens .product-item { scroll-margin-top: 130px; }
/* ==========================================================================
Áreas de Atuação (página interna) — lista de atalhos.
O tema fixava a altura em 230px e centralizava o conteúdo; com 12 itens
a lista transbordava por cima do texto de abertura e das seções abaixo.
Agora é uma grade que cresce conforme o conteúdo.
========================================================================== */
.list-atuacao-products.col-xs-12 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px;
height: auto !important;
margin: 36px 0 72px !important;
padding: 0 15px;
float: none;
}
.list-atuacao-products a.list-atuacao-item {
display: flex !important;
align-items: center;
gap: 14px;
float: none;
width: auto;
max-width: none;
height: auto;
min-height: 54px;
margin: 0;
padding: 8px 18px;
background: var(--surface);
border: 1px solid rgba(183, 13, 25, .10);
border-radius: 10px;
box-shadow: var(--shadow-sm);
transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.list-atuacao-products a.list-atuacao-item:hover,
.list-atuacao-products a.list-atuacao-item:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(183, 13, 25, .28);
outline: none;
}
.list-atuacao-products a.list-atuacao-item img { margin: 0; flex: none; }
.list-atuacao-products a .list-atuacao-nome { line-height: 1.35; }
@media (max-width: 767px) {
.list-atuacao-products.col-xs-12 {
grid-template-columns: 1fr;
gap: 10px;
margin: 28px 0 44px !important;
}
}
/* Seções de cada área: blocos de largura total não "pulam" no hover
(o movimento em blocos tão grandes deixava a rolagem trêmula). */
.product-group-itens .product-item:hover { transform: none; box-shadow: none; }
/* No celular/tablet, imagem sempre antes do texto — antes isso era feito
com uma cópia escondida de metade das seções. */
@media (max-width: 991px) {
.product-group-itens .product-item.direita > .container > .row {
display: flex;
flex-direction: column-reverse;
}
.product-group-itens .product-item { padding: 28px 0; }
.product-group-itens .product-item .row { margin-top: 0; }
.product-group-itens .product-item figure { text-align: center; margin: 0 0 8px; }
.product-group-itens .product-item .product-item-texto { padding: 20px 0 8px; }
}
/* Espaçamentos da página de áreas: o tema compensava a lista transbordando
com margens enormes (160px acima das seções e -150px abaixo, que
encavalava o rodapé). Com a lista em fluxo normal, ritmo regular. */
.area.sub-title { display: block; margin: 0; }
ul.product-group-itens { margin: 0 0 56px !important; padding: 0; }
@media (max-width: 767px) {
ul.product-group-itens { margin-bottom: 32px !important; }
}
/* Celular: logotipo um pouco menor no topo (ocupava ~1/4 da tela, fixo)
e banner da página inicial começando abaixo dele — antes o logo cobria
o texto da arte do banner. A faixa escura mantém o texto branco do
logo legível, como nos banners das páginas internas. */
@media (max-width: 767px) {
body:not(.sticky-menu-active) #header .logo img {
width: 165px !important;
height: auto !important;
}
.main > .page-top { padding-top: 196px; }
.slider-home-mobile {
padding-top: 186px;
background: linear-gradient(rgba(20, 10, 10, .92), rgba(20, 10, 10, .92)), #171717;
}
}
/* Profissionais: todos os cartões na mesma linha, centralizados; com mais
de três pessoas, quebram para a linha de baixo em vez de espremer. */
#section-profissionais .row-eq-height {
flex-wrap: wrap;
justify-content: center;
}
/* #numeros pedia img/bg-numeros.jpg, que não existe (erro 404 em toda
visita à página inicial); o fundo preto do tema é o que já aparecia. */
#numeros { background-image: none; }