/* ============================================================ G&F Advogados — Design System v5.0 Guimarães & Ferreira Sociedade de Advogados Estética: Editorial Premium ============================================================ */ /* ---- Reset ---- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* ---- Tokens ---- */ :root{ --white:#FFFFFF; --black:#1A1A1A; --red:#9B1B30; --red-dark:#7A1425; --gray-25:#F7F7F6; --gray-50:#FAFAFA; --gray-100:#F5F5F3; --gray-200:#EDEDEB; --gray-300:#D6D6D2; --gray-400:#B8B8B3; --gray-500:#8A8A86; --gray-600:#6B6B67; --gray-700:#4A4A47; --gray-800:#2D2D2B; --font-head:'Playfair Display',Georgia,serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:80px;--space-5xl:96px;--space-6xl:120px; --container:1120px;--container-sm:680px; --radius:6px; --cut:33px; --cut-img:15%; --transition:all 0.3s ease; /* "Véu" das seções neutras (.section--white/.section--gray/.sobre/ .lp-section--tint) — mesmas cores de sempre, só que translúcidas, para o fundo fixo de rede neural (.site-bg) aparecer por baixo do texto solto e dos vãos entre os cards. Cards, botões, header, rodapé, CTA vermelho, Hero e a seção Números continuam 100% opacos de propósito — só a "parede" das seções neutras ganhou o véu. Opacidade reduzida de .92 pra .58/.62 em 19/08/2026 a pedido do cliente — a textura estava "apagada demais" atrás do véu antigo. A legibilidade do texto solto (fora de card) que antes dependia desse .92 alto passa a vir do novo ".frost" (ver mais abaixo), que protege só onde tem texto de verdade, não a seção inteira. */ --veil:rgba(247,247,246,.58); /* gray-25 a 58% */ --veil-alt:rgba(250,250,250,.62); /* gray-50 a 62% */ /* "Vidro fosco" — proteção de texto solto (19/08/2026). Com o véu da seção mais fraco (textura mais visível, ver --veil acima), o texto que fica FORA de card (cabeçalho de seção, texto corrido de Quem Somos, coluna de contato) precisa da própria camada de legibilidade — em vez de reforçar a seção inteira de novo. Um halo translúcido com blur, não uma caixa: ver .section__header mais abaixo pra como é aplicado (::before com mask radial). */ --frost:rgba(255,255,255,.66); } /* ---- Assinatura visual: corte de canto assimétrico ---- Superior esquerdo reto, os outros 3 arredondados — aplicado em imagens (Hero, Números, Quem Somos) e botões/cards de destaque. */ .corner-cut{border-radius:0 var(--cut) var(--cut) var(--cut)} .corner-cut--img.photo,.corner-cut--img{border-radius:0 var(--cut-img) var(--cut-img) var(--cut-img)} /* ---- Base ---- */ html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} body{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--gray-700);background:var(--gray-25);overflow-x:hidden} ::selection{background:var(--red);color:var(--white)} /* ---- Fundo fixo: rede neural ---- Ajuste de 18/08/2026. Imagens usadas exatamente como entregues pelo cliente (fundo-neural-claro/escuro), sem filtro/tom/overlay — só convertidas de RGBA pra RGB (o canal alfa era 100% opaco em toda a imagem, então nenhum pixel visível muda) e recomprimidas sem perda, pra não carregar ~4MB de PNG em cada página. 19/08/2026 (investigação de performance): PNG ainda pesava ~900KB/ ~830KB mesmo já otimizado — é a imagem mais pesada carregada em TODA página do site (fundo fixo, não só na Hero). Convertida pra WebP qualidade 92: ~77KB/~83KB (queda de ~91%). Comparação pixel a pixel confirma diferença imperceptível (diferença média de 0.55 em 256 níveis, só 0.03% dos pixels com diferença visível) — mesmo arquivo original em PNG mantido em disco, só não é mais referenciado. .site-bg é o PRIMEIRO elemento de em cada página (ver HTML). position:fixed + z-index:-1 é escolhido de propósito em vez de background-attachment:fixed no body: fixed-attachment tem suporte historicamente instável no Safari/iOS (trava a rolagem em alguns iOS mais antigos, ou o fundo "cola" errado atrás de elementos com transform); uma camada própria em position:fixed funciona igual em qualquer navegador mobile. Como não tem transform/filter/ isolation, z-index:-1 nesta camada garante que ela fique atrás de TODO o conteúdo normal (header, main, footer) sem precisar dar z-index a cada um deles — só o necessário pra criar esse empilha- mento já existe (ver comentário completo na seção de temas). */ .site-bg{ position:fixed;inset:0;z-index:-1; background-image:url('../images/fundo/fundo-neural-claro.webp?v=2'); background-size:cover;background-position:center center;background-repeat:no-repeat; pointer-events:none } [data-theme="dark"] .site-bg{background-image:url('../images/fundo/fundo-neural-escuro.webp?v=2')} a{color:var(--black);text-decoration:none;transition:var(--transition)} a:hover{color:var(--red)} a:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px} ul{list-style:none} .skip-link{ position:fixed;top:-100%;left:16px;z-index:9999; background:var(--black);color:var(--white);padding:12px 24px;border-radius:var(--radius); font-weight:500;transition:top 0.3s ease } .skip-link:focus{top:16px} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px} @media(max-width:767px){.container{padding:0 20px}} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:.03em; padding:14px 28px;border-radius:0 var(--radius) var(--radius) var(--radius);border:1px solid transparent; cursor:pointer;transition:var(--transition);text-decoration:none;line-height:1 } .btn:focus-visible{outline:2px solid var(--red);outline-offset:2px} .btn--primary{ background:var(--red);color:var(--white);border-color:var(--red) } .btn--primary:hover{background:var(--red-dark);color:var(--white);border-color:var(--red-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(155,27,48,.2)} .btn--secondary{ background:transparent;color:var(--black);border-color:var(--gray-300) } .btn--secondary:hover{background:var(--gray-100);border-color:var(--black);transform:translateY(-1px)} .btn--outline-light{ color:var(--white);border-color:rgba(255,255,255,.3) } .btn--outline-light:hover{background:rgba(255,255,255,.08);border-color:var(--white);color:var(--white);transform:translateY(-1px)} .btn--whatsapp{ background:#25D366;color:var(--white);border-color:#25D366 } .btn--whatsapp:hover{background:#20BD5D;color:var(--white);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,211,102,.25)} .btn--full{width:100%} @media(max-width:767px){.btn{padding:12px 24px;font-size:13px}} /* ---- Section ---- */ .section{padding:var(--space-5xl)0} .section--white{background:var(--veil)} .section--gray{background:var(--veil-alt)} .section--red{background:var(--red);color:var(--white)} .section__header{text-align:center;max-width:var(--container-sm);margin:0 auto var(--space-4xl)} .section__tag{ display:block;font-family:var(--font-body);font-size:11px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:var(--space-md) } .section__tag--light{color:rgba(255,255,255,.6)} .section__title{ font-family:var(--font-head);font-size:clamp(28px,3vw,36px);font-weight:700; line-height:1.2;letter-spacing:-.01em;color:var(--black);margin-bottom:var(--space-sm) } .section__desc{font-size:16px;line-height:1.75;color:var(--gray-500);max-width:540px;margin:0 auto} .section__line{ width:32px;height:2px;background:var(--red);margin:var(--space-md) auto var(--space-md) } .section__line--left{margin-left:0} @media(max-width:767px){ .section{padding:40px 0} .section__header{margin-bottom:28px} .section__title{font-size:24px} .section__tag{margin-bottom:6px} .section__line{margin:8px auto 14px} } /* ---- Header — nav flutuante (estilo caragua.tur.br) ---- Fixa, flutuante com margem das bordas, cantos arredondados (24px), fundo translúcido com blur. Transparente/escura sobre o Hero (texto branco); ganha fundo claro sólido ao rolar (.scrolled), texto escuro. Logo é o PNG oficial (nunca recriado) com filter invert quando precisa aparecer branco sobre o Hero — mesma técnica já usada no logo do rodapé. */ .header{ position:fixed;top:32px;left:32px;right:32px;z-index:1000; border-radius:24px;background:rgba(20,19,18,.32); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 8px 30px -12px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.14); transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,top .35s ease } .header.scrolled{ background:rgba(255,255,255,.92);border-color:var(--gray-200); box-shadow:0 8px 24px -14px rgba(0,0,0,.18) } .header__inner{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--space-lg)} .header__logo{display:flex;align-items:center;text-decoration:none} .header__logo-img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .35s ease} .header.scrolled .header__logo-img{filter:none} @media(max-width:767px){.header__logo-img{height:36px}} .header__nav-list{display:flex;align-items:center;gap:var(--space-xl)} .header__nav-link{ font-size:14px;font-weight:500;color:rgba(255,255,255,.82);text-decoration:none; padding:4px 0;position:relative;transition:color .25s ease } .header__nav-link::after{ content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px; background:var(--red);transition:width .3s ease } .header__nav-link:hover{color:var(--white)} .header__nav-link.active{color:var(--white)} .header.scrolled .header__nav-link{color:var(--gray-600)} .header.scrolled .header__nav-link:hover,.header.scrolled .header__nav-link.active{color:var(--black)} .header__nav-link:hover::after,.header__nav-link.active::after{width:100%} .header__actions{display:flex;align-items:center;gap:var(--space-lg)} .header__phone{ display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500; color:rgba(255,255,255,.92);text-decoration:none;transition:color .2s } .header.scrolled .header__phone{color:var(--gray-700)} .header__phone:hover{color:var(--red)} .header__phone svg{color:var(--red);flex-shrink:0} .header__menu-toggle{ display:none;flex-direction:column;justify-content:center;gap:5px; width:28px;height:28px;background:none;border:none;cursor:pointer;padding:0 } .header__menu-bar{display:block;width:100%;height:1.5px;background:var(--white);border-radius:1px;transition:all .3s ease} .header.scrolled .header__menu-bar{background:var(--black)} .header__menu-toggle[aria-expanded=true] .header__menu-bar:nth-child(1){transform:rotate(45deg)translate(5px,5px)} .header__menu-toggle[aria-expanded=true] .header__menu-bar:nth-child(2){opacity:0} .header__menu-toggle[aria-expanded=true] .header__menu-bar:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)} /* ---- Toggle claro/escuro — controle segmentado (lua/sol) ---- */ .theme-toggle{ display:inline-flex;align-items:center;gap:2px;padding:3px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2); border-radius:999px;transition:background-color .35s ease,border-color .35s ease } .header.scrolled .theme-toggle{background:var(--gray-100);border-color:var(--gray-200)} .theme-toggle__btn{ display:flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:50%;border:none;background:none;color:rgba(255,255,255,.75); cursor:pointer;transition:background-color .25s ease,color .25s ease } .theme-toggle__btn svg{width:14px;height:14px} .theme-toggle__btn[aria-pressed="true"]{background:rgba(255,255,255,.92);color:var(--red)} .header.scrolled .theme-toggle__btn{color:var(--gray-500)} .header.scrolled .theme-toggle__btn[aria-pressed="true"]{background:var(--white);color:var(--red);box-shadow:0 1px 4px rgba(0,0,0,.1)} [data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)} [data-theme="dark"] .header.scrolled{background:var(--frost);border-color:var(--gray-600)} [data-theme="dark"] .header.scrolled .theme-toggle{background:var(--gray-700);border-color:var(--gray-600)} [data-theme="dark"] .header.scrolled .theme-toggle__btn{color:var(--gray-400)} [data-theme="dark"] .header.scrolled .theme-toggle__btn[aria-pressed="true"]{background:var(--gray-600);color:var(--white)} /* .header__phone (telefone) ficou de fora da cobertura de tema escuro original: ".header.scrolled .header__phone{color:var(--gray-700)}" é um cinza escuro pensado pro header CLARO do estado "scrolled"; sobre o --frost escuro (quase preto) do mesmo estado no tema escuro, o texto ficava próximo de preto sobre preto. Mesmo tom já usado ao lado, no ícone do toggle no mesmo estado (linha acima). */ [data-theme="dark"] .header.scrolled .header__phone{color:var(--gray-400)} /* ---- Redes sociais na barra (25/08/2026) ---- Mesma família de cor/estado do telefone e do theme-toggle ao lado (translúcido sobre a Hero, cinza sobre o header "scrolled" claro, cinza claro sobre o header "scrolled" escuro) — nenhuma cor nova. Hover é só um leve fundo circular + a mesma cor de destaque (red) já usada no hover do telefone/nav — sem preencher com marca/cor da rede social, pra não pesar a barra. */ .header__social{display:flex;align-items:center;gap:4px} .header__social-link{ display:flex;align-items:center;justify-content:center;width:28px;height:28px; border-radius:50%;color:rgba(255,255,255,.75);transition:background-color .25s ease,color .25s ease } .header__social-link:hover{background:rgba(255,255,255,.14);color:var(--white)} .header.scrolled .header__social-link{color:var(--gray-500)} .header.scrolled .header__social-link:hover{background:var(--gray-100);color:var(--red)} [data-theme="dark"] .header.scrolled .header__social-link{color:var(--gray-400)} [data-theme="dark"] .header.scrolled .header__social-link:hover{background:var(--gray-700);color:var(--white)} /* Corrigido em 18/08/2026: o toggle ficava só dentro do menu hambúrguer no mobile — fácil de não notar, já que no desktop ele é sempre visível na barra. Agora fica sempre visível na barra, igual ao desktop (a versão duplicada que existia dentro do painel do menu foi removida do HTML). Em telas bem pequenas, só encolhe um pouco. */ @media(max-width:480px){ .header__actions{gap:var(--space-sm)} .theme-toggle{padding:2px} .theme-toggle__btn{width:24px;height:24px} .theme-toggle__btn svg{width:13px;height:13px} .header__social{gap:0} .header__social-link{width:24px;height:24px} .header__social-link svg{width:14px;height:14px} } @media(max-width:1023px){ .header__nav{ position:fixed;top:calc(64px + 48px);left:16px;right:16px;background:var(--white); border:1px solid var(--gray-200);border-radius:16px;padding:var(--space-lg) var(--space-md); transform:translateY(-16px);opacity:0;transition:all .3s ease;z-index:999;pointer-events:none; box-shadow:0 20px 40px -16px rgba(0,0,0,.2) } .header__nav.open{transform:translateY(0);opacity:1;pointer-events:all} .header__nav-list{flex-direction:column;gap:var(--space-lg);align-items:flex-start} .header__nav-link{color:var(--gray-600)!important;font-size:16px} .header__nav-link:hover,.header__nav-link.active{color:var(--black)!important} .header__menu-toggle{display:flex} /* Fundo escuro do PAINEL dropdown mobile/tablet (".header__nav" só vira painel fechado aqui, via position:fixed acima) — precisa ficar dentro desta media query. Solto no escopo global (como estava) essa regra também pegava o desktop, onde ".header__nav" é só a lista inline dentro do header: sobrava um retângulo cinza- escuro sólido atrás do menu, sem cobrir a largura toda do header, lendo como uma faixa preta remendada atrás do texto. */ [data-theme="dark"] .header__nav{background:var(--gray-800);border-color:var(--gray-600)} } @media(max-width:767px){ .header{top:16px;left:16px;right:16px} .header__inner{height:64px;padding:0 var(--space-md)} .header__phone span{display:none} } [data-theme="dark"] .header__nav-link{color:var(--gray-400)!important} [data-theme="dark"] .header__nav-link:hover,[data-theme="dark"] .header__nav-link.active{color:var(--white)!important} /* ============================================================ HERO — carrossel real (substitui a antiga composição estática) Slide horizontal, autoplay, pausa em hover/foco, indicadores, overlay em gradiente, entrada em cascata do texto por slide. ============================================================ */ .hero{ position:relative;height:100vh;min-height:600px;max-height:960px; overflow:hidden;background:var(--black) } /* Causa real do "3º slide não aparece" (corrigido em 19/08/2026): o track é flex, então cada slide JÁ nasce deslocado pela sua própria posição natural (slide 2 nasce em 2×100% da largura, por exemplo). A versão antiga aplicava OUTRO deslocamento por slide, calculado em cima disso — (slide-index − active-index)×100% —, ou seja, somava o deslocamento da flexbox com o do calc() em vez de substituir um pelo outro; o slide 3 acabava duas vezes mais longe do que devia e nunca chegava a ficar visível. A correção certa é mover o TRACK inteiro (um único translateX, aplicado via JS — ver "Hero: carrossel" em script.js), e deixar cada slide na posição que a própria flexbox já calcula sozinha, sem transform individual nenhum. */ .hero__track{display:flex;width:100%;height:100%;transition:transform .9s cubic-bezier(.65,0,.35,1)} .hero__slide{position:relative;flex:0 0 100%;width:100%;height:100%} /* Integração fotografia ↔ fundo (19/08/2026) — a composição em si não mudou (mesmas 3 fotos, mesmo enquadramento, mesmo carrossel); só a BORDA da foto deixou de ser um corte reto contra o preto do Hero. Uma máscara suave dissolve o topo e a base da imagem no preto de fundo (mesma técnica — e as mesmas proporções, 6%/94% — já usada nas bordas laterais dos carrosséis de Momentos e Galeria, pra soar como o mesmo "sistema" do site, não um efeito novo isolado). É o conceito de adesivo perfurado em vidro (a imagem "aparece" aos poucos a partir do fundo, sem ficar 100% opaca borda a borda) sem nenhum furo literal — só gradiente. */ .photo.hero__media{ position:absolute;inset:0;z-index:0;margin:0;border-radius:0;width:100%;height:100%; /* fundo preto (não o gradiente cinza de .photo): a borda dissolvida pela máscara passa a fundir no preto do .hero, não numa faixa cinza — some o aspecto "lavado" no topo/base da foto (01/09/2026). */ background:#0a0908; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%) } /* O radial branco de .photo::before lavava o topo da foto assim que ela ficou mais clara — desligado só na Hero (01/09/2026). */ .photo.hero__media::before{background:none} /* Placeholder (silhueta de busto) NÃO aparece na Hero (01/09/2026): as 3 fotos da Hero estão sempre publicadas no manifesto, então o placeholder aqui é sempre transitório — só piscava no fundo escuro entre o 1º paint e o script.js injetar a . Nas outras seções ele continua (lá ele é o aviso proposital de "foto ainda não enviada"). */ .hero__media .photo__ph{display:none} /* Grading da foto (01/09/2026): antes saturate(.94) contrast(1.05) brightness(.86) — o brightness .86 era o principal responsável pelo aspecto escuro/apagado. Agora brilho neutro, leve ganho de contraste e saturação para devolver profundidade e vida, sem cores estouradas. */ .hero__media .photo__img{ filter:saturate(1.06) contrast(1.06) brightness(1); transform:scale(1.06);will-change:transform } /* Zoom-OUT cinematográfico (01/09/2026, ajustado): o cliente achou o 1.12 "zoom demais". Agora entra só levemente aproximada (1.06) e ABRE RÁPIDO até o quadro cheio (1.0) com uma curva forte de ease-out — nos primeiros ~2s já está no enquadramento completo e "descansa" aberta o resto do slide (8s). Vale para os 3 slides (regra única). O reflow em script.js reinicia a animação a cada troca. */ .hero__slide.is-active .hero__media .photo__img{animation:heroKenburns 6.8s cubic-bezier(.22,1,.36,1) forwards} @keyframes heroKenburns{from{transform:scale(1.06)}to{transform:scale(1)}} .hero__overlay{ position:absolute;inset:0;pointer-events:none; /* Overlay refinado (01/09/2026): a proteção de leitura fica só na faixa esquerda (onde vivem título/subtítulo/botões) e abre total antes dos 66% — a metade direita da foto fica limpa. Vinheta e base bem mais sutis. */ background: linear-gradient(90deg,rgba(8,7,6,.66) 0%,rgba(8,7,6,.40) 26%,rgba(8,7,6,.12) 48%,rgba(8,7,6,0) 66%), linear-gradient(to top,rgba(8,7,6,.42) 0%,rgba(8,7,6,0) 18%), radial-gradient(120% 92% at 50% 44%,transparent 66%,rgba(8,7,6,.16) 100%) } .hero__content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none} .hero__content-inner{max-width:576px;pointer-events:auto} /* Título não entra mais pelo heroCascade — ele tem o próprio sistema de digitação por caractere (ver .hero__title-char logo abaixo). Subtítulo e ações continuam no cascade de sempre, só que atrasados até a digitação do título terminar (título do slide mais longo termina digitar em ~2,9s com o passo de 55ms/letra — ver "--hero-char-i" abaixo — daí a folga até 3s/3,2s). */ .hero__subtitle,.hero__actions{opacity:0;transform:translateY(18px)} .hero__slide.is-active .hero__subtitle{animation:heroCascade .7s cubic-bezier(.16,1,.3,1) 3s forwards} .hero__slide.is-active .hero__actions{animation:heroCascade .7s cubic-bezier(.16,1,.3,1) 3.2s forwards} @keyframes heroCascade{to{opacity:1;transform:translateY(0)}} .hero__title{ font-family:var(--font-head);font-size:clamp(28px,4.4vw,48px);font-weight:700; line-height:1.1;color:var(--white);letter-spacing:-.01em;margin-bottom:var(--space-md); /* Sombra de legibilidade — necessária sobretudo em fotos mais claras (céu/água do slide do litoral), onde o gradiente sozinho não dava contraste suficiente. Corrigido em 18/08/2026. */ text-shadow:0 2px 16px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.7) } /* ---- Título: efeito de digitação ---- Cada letra do título (ver .hero__title-typed em index.html, dividido em por script.js — IIFE "Hero: efeito de digitação nos títulos") nasce com um leve desfoque e sobe alguns pixels, revelando-se em cascata da esquerda pra direita — sofisticado e lento o bastante pra ler, sem cursor piscando nem cara de terminal. Espaços continuam texto puro (nunca viram span), então a quebra de linha do título é sempre a nativa do navegador — sem risco de overflow no mobile. Reaproveita o MESMO mecanismo de restart do heroCascade acima (reflow + reclassificação de .is-active em script.js, IIFE "Hero: carrossel"): ao trocar de slide a animação simplesmente para (a classe some), sem timer nenhum pra cancelar. */ /* Guarda contra "flash" do título cru (25/08/2026): script.js é defer e vem depois do GSAP (CDN externo) no — se a rede demorar, existe uma janela real em que o navegador pode pintar o

inteiro, nítido, ANTES do JS dividir o texto em e a digitação começar. Esta regra mantém o texto invisível assim que .js existe (aplicada no por script inline, antes de qualquer pintura) e SÓ enquanto ainda não há nenhuma letra dividida dentro — no instante em que o primeiro .herotitle-char aparece, o próprio seletor :has() para de bater e o texto volta ao normal, revelado letra por letra como já acontece hoje. Sem isso dependeria de sincronizar JS com a chegada do CDN; com isso é puro CSS, e nunca pode deixar o título preso invisível (se JS não correr, a classe .js nunca existe e esta regra nunca vale). / .js .herotitle-typed:not(:has(.herotitle-char)){opacity:0} @media(prefers-reduced-motion:reduce){ .js .herotitle-typed:not(:has(.herotitle-char)){opacity:1!important} } / Cada PALAVRA é sua própria caixa inline-block (ver script.js, IIFE "Hero: efeito de digitação") — impede o navegador de quebrar linha no meio de uma palavra, o que acontecia quando só a letra (também inline-block, necessário pro translateY abaixo) definia os pontos de quebra possíveis. / .herotitle-word{display:inline-block} .herotitle-char{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(6px)} .heroslide.is-active .herotitle-char{ animation:heroTypeChar .55s cubic-bezier(.2,.7,.3,1) forwards; / 55ms/letra (25/08/2026 — era 30ms, achado rápido/tipo terminal demais pra proposta editorial). No título mais longo (44 letras) a digitação termina em ~2,9s — daí o subtítulo/ações empurrados pra 3s/3,2s logo abaixo, pra sempre entrarem DEPOIS da digitação nos 3 slides. / animation-delay:calc(var(--hero-char-i,0) 55ms) } @keyframes heroTypeChar{to{opacity:1;filter:blur(0);transform:translateY(0)}} .herosubtitle{ font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.9); max-width:36em;margin-bottom:var(--space-xl); text-shadow:0 1px 8px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.6) } /* ---- Logo animado dos 3 slides do Hero ---- REESCRITO em 18/08/2026 (2ª rodada de ajuste do Hero). O comportamento antigo estava errado: o logo entrava pela ESQUERDA (mesmo lado do texto), era escalado até 1.5x (perdia nitidez) e terminava em opacity:0 — ou seja, sumia em vez de ficar. PADRONIZADO nos 3 slides em 25/08/2026, com a troca pra arte oficial (Logo01 do cliente): o bloco .herologo-fx passou a existir também nos slides 2 e 3 (idêntico ao do slide 1, mesma imagem, mesmas regras abaixo) — é um único sistema, não três animações separadas. Comportamento correto agora: 1. nasce PEQUENO, no centro da tela; 2. cresce DEVAGAR (≈2,3s) até o tamanho de repouso; 3. só depois desliza para o ponto de repouso, do lado OPOSTO ao texto (direita no desktop, faixa superior no mobile); 4. fica FIXO ali enquanto o slide estiver ativo (fill-mode forwards). Como script.js remove e reaplica .is-active com reflow a cada troca de slide, a entrada toca de novo sempre que o usuário volta a este slide. O caminho do centro até o repouso vem de --hero-logo-dx/dy, MEDIDOS em script.js (IIFE "Hero: ponto de partida do logo"). É medição, e não conta em vh, porque o Hero tem min-height/max-height: em tela muito alta ou muito baixa a altura do Hero deixa de ser 100vh e qualquer fórmula em vh erraria o centro. NITIDEZ: hero-logo-oficial.png (1595×858) é o Logo01 oficial do cliente (LOGO ADVOGADO/oficial/logo 01.jpeg) com o fundo cinza-claro da foto removido — mesma marca, mesmas cores, mesmo traço, só o retângulo de fundo virou transparente. Recortado já na área real da marca, sem margem morta em volta. O repouso é scale(1) sobre --hero-logo-w (no máximo 380px CSS ≈ 1140px em telas 3x), então nunca há ampliação além do tamanho nativo. POSIÇÃO VERTICAL (desktop): o repouso fica na faixa alta da foto (22% da altura do Hero, nunca acima de 132px para não encostar no cabeçalho). Não é enfeite: no centro vertical o logo caía justamente sobre a serra escura da foto do litoral e a linha "SOCIEDADE DE ADVOGADOS" ficava ilegível; nessa faixa o fundo é céu limpo. MEDIDAS (desktop): --hero-logo-track é a largura útil do .container; --hero-text-w acompanha o bloco de texto; --hero-logo-w é o que sobra à direita menos uma folga fixa de 48px, para o logo nunca encostar na escrita. TETO DE --hero-text-w REDUZIDO DE 576 PRA 510px (25/08/2026): a 576px os títulos dos slides 1 e 2 quebravam em 5 palavras numa linha e só 1-2 na outra (ex.: "Toda causa começa por uma" / "boa conversa.") — linha final curta demais, nada elegante. Testado empiricamente: entre ~450px e 525px os 3 títulos quebram de forma equilibrada (~90%/80% de proporção entre as duas linhas, nunca uma palavra sozinha); acima de ~528px volta a ficar desbalanceado. 510px fica no meio dessa faixa segura, sem apertar o texto (redução de só 66px sobre o teto antigo) e sem mexer no logo (--hero-logo-w já estava no teto de 380px antes e depois — sobra de espaço não afeta ele). / .hero{ --hero-logo-track:calc(min(var(--container),100vw) - 48px); --hero-text-w:min(510px,calc(var(--hero-logo-track) .54)); /* Logo ~40% menor (01/09/2026): antes o teto era 380px; agora ~232px, colado no canto superior direito. / --hero-logo-w:clamp(150px,17vw,232px) } .herologo-fx{position:absolute;inset:0;z-index:1;pointer-events:none} / Repouso do logo colado no canto superior direito, com margem elegante do topo (livre do header sticky) e da lateral (01/09/2026). Sai das restrições de .container (max-width/padding/margin) para encostar mesmo no canto. / .herologo-fx-row{ position:absolute;top:clamp(90px,11vh,120px);right:clamp(24px,4.5vw,64px);left:auto; width:auto;max-width:none;margin:0;padding:0; display:flex;justify-content:flex-end } .herologo-fx-img{ width:var(--hero-logo-w);height:auto;display:block; transform-origin:50% 50%;opacity:0; / Antes: drop-shadow(0 0 22px rgba(255,255,255,.6)) — halo branco largo que dava o aspecto acinzentado/lavado sobre a foto. Agora só sombras escuras curtas: separam a marca do fundo SEM leite, mantendo o preto e o vermelho reais (01/09/2026). / filter:drop-shadow(0 1px 2px rgba(0,0,0,.28)) drop-shadow(0 8px 24px rgba(0,0,0,.30)); will-change:transform,opacity } / 4,6s total — cabe inteiro na janela do slide ativo (~5s: autoplay 5000ms + troca .9s), então NÃO depende do timing do carrossel nem o altera. A MESMA regra serve os 3 slides. (01/09/2026) / .heroslide.is-active .herologo-fx-img{animation:heroLogoFx 4.6s forwards} @keyframes heroLogoFx{ / 1. nasce pequeno, no centro da tela / 0% {opacity:0;transform:translate(var(--hero-logo-dx,0px),var(--hero-logo-dy,0px)) scale(.20); animation-timing-function:ease-out} 9% {opacity:1;transform:translate(var(--hero-logo-dx,0px),var(--hero-logo-dy,0px)) scale(.26); animation-timing-function:cubic-bezier(.37,0,.28,1)} / 2. cresce devagar, ainda no centro / 52% {opacity:1;transform:translate(var(--hero-logo-dx,0px),var(--hero-logo-dy,0px)) scale(1); animation-timing-function:cubic-bezier(.65,0,.35,1)} / 3. desliza até o repouso no canto superior direito (~3,6s do início) / 78% {opacity:1;transform:translate(0,0) scale(1);animation-timing-function:ease-in} / 4. apresenta a marca parada por um instante / 82% {opacity:1;transform:translate(0,0) scale(1)} / 5. fade-out suave (~0,65s) — sai de cena e deixa a foto respirar / 96% {opacity:0;transform:translate(0,0) scale(1.02)} / 6. fica fora até o slide trocar (forwards) / 100% {opacity:0;transform:translate(0,0) scale(1.02)} } / Texto do Hero: o teto de 576px continua valendo nas telas largas, mas abaixo de ~1070px ele passa a acompanhar o container (54%) para que sobre espaço real ao lado — é o que impede o logo de espremer ou encavalar a escrita em notebooks menores e tablets em retrato. / .herocontent-inner{max-width:var(--hero-text-w,510px)} / ---- Mobile ---- Mesmo comportamento do desktop (01/09/2026): o logo entra, assenta no canto superior direito e some no fade-out. Como ele não fica mais fixo na faixa superior, o recuo do conteúdo cai para um respiro modesto — sem o "buraco" que a faixa reservada deixava depois do logo sumir. O ciclo (nasce pequeno no centro → cresce → estaciona → fade-out) é o mesmo; só muda o ponto de repouso. / @media(max-width:767px){ .hero{ --hero-logo-w:clamp(104px,30vw,132px) / ~40% menor que os 196px antigos / } .herologo-fx-row{ top:clamp(68px,9vh,88px);right:clamp(14px,4vw,22px);left:auto; justify-content:flex-end } .heroslide--logo .herocontent{padding-top:clamp(88px,16vh,120px)} / Zoom-out MAIS presente no celular (01/09/2026): no desktop o cliente quer discreto (1.06, abre e segura); no mobile pediu movimento maior, "abrir mais a imagem". Range maior (1.16 -> 1.0) e curva mais espalhada, então a foto fica se abrindo durante quase todo o slide. / .heromedia .photoimg{transform:scale(1.16)} .heroslide.is-active .heromedia .photoimg{animation:heroKenburnsMob 7.4s cubic-bezier(.33,0,.6,1) forwards} @keyframes heroKenburnsMob{from{transform:scale(1.16)}to{transform:scale(1)}} } / Sem animação: o logo continua VISÍVEL, direto no ponto de repouso (antes ele era escondido por completo, o que tirava a marca do Hero de quem usa "reduzir movimento"). / @media(prefers-reduced-motion:reduce){ .herologo-fx-img,.heroslide.is-active .herologo-fx-img{ opacity:1;animation:none;transform:none } } .heroactions{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .btn--hero{ background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.6); border-radius:0 var(--radius) var(--radius) var(--radius);gap:10px } .btn--hero:hover{background:rgba(255,255,255,.1);border-color:var(--white);color:var(--white);transform:translateY(-1px)} .btn--hero svg{transition:transform .25s ease} .btn--hero:hover svg{transform:translateX(3px)} .herodots{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;display:flex;gap:9px} .herodot{ width:8px;height:8px;padding:0;border-radius:50%;border:none;cursor:pointer; background:rgba(255,255,255,.4);transition:width .3s ease,background-color .3s ease } .herodot:hover{background:rgba(255,255,255,.7)} .herodot.is-active{width:26px;border-radius:5px;background:var(--white)} .herodot:focus-visible{outline:2px solid var(--white);outline-offset:3px} @media(max-width:767px){ .hero{height:100svh;min-height:520px} / 80% (era 100% — 25/08/2026): mesmo motivo do --hero-text-w no desktop, testado empiricamente em 390px E 430px (a faixa "boa" muda um pouco entre as duas larguras; 80% é o valor que funciona nas duas). Em 100% os títulos quebravam com 5+ palavras numa linha e só 1-2 na outra — às vezes até uma palavra sozinha ("...defender o" / "que é seu."). .heroactions/.btn--hero continuam width:100% (dos BOTÕES, não do texto) — não mudam. / .herocontent-inner{max-width:80%} .heroactions{width:100%} .btn--hero{width:100%;justify-content:center} .herodots{bottom:20px} } @media(prefers-reduced-motion:reduce){ .herotrack{transition:none} / sem movimento: foto estática em scale(1), sem zoom nem animação heroKenburns. !important porque a base .heromedia .photoimg fixa um scale inicial (1.06) e tem especificidade maior que estes seletores (01/09/2026). / .heromedia .photoimg, .heroslide.is-active .heromedia .photoimg{ transition:none!important;transform:none!important;animation:none!important } .herotitle,.herosubtitle,.heroactions{opacity:1;transform:none;animation:none} .herotitle-char{opacity:1;filter:none;transform:none;animation:none} } / ---- Areas ---- 5 cards (Trabalhista, Civil, Previdenciário, Família, Empresarial — Penal removido em 18/08/2026). Flex (não grid) de propósito: com grid, uma grade de 3 colunas deixa a 2ª linha (2 cards) alinhada à esquerda com um vão vazio à direita, mesmo com justify-content — isso só centraliza as 3 faixas da grade, não os itens de uma linha incompleta. Com flex-wrap + justify-content:center cada linha quebrada centraliza de verdade (corrigido em 18/08/2026). / .areas-grid{ display:flex;flex-wrap:wrap;justify-content:center; gap:var(--space-lg) } .areas-grid .area-card{flex:0 1 320px} .area-card{ padding:var(--space-xl); border:1px solid var(--gray-200);border-top:3px solid var(--red);border-radius:var(--radius); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;background:var(--white) } .area-card:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.06);transform:translateY(-3px)} / Destaque discreto por hierarquia editorial (não por banner) — ênfase sutil em trabalhista pedida na Constituição do projeto: ordem + pequeno acento visual, sem selo, sem texto de "mais procurado". (border-top vermelho agora é padrão de todos os .area-card) / .area-cardicon{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; color:var(--red);background:rgba(155,27,48,.06);border-radius:50%; margin-bottom:var(--space-lg);transition:transform .3s ease } .area-card:hover .area-cardicon{transform:scale(1.08)} .area-cardtitle{ font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;color:var(--black); margin-bottom:var(--space-sm) } .area-carddesc{font-size:14px;line-height:1.6;color:var(--gray-500);margin-bottom:var(--space-lg)} .area-cardlink{ font-size:13px;font-weight:500;color:var(--red); background:none;border:none;padding:0;font-family:inherit;cursor:pointer; display:inline-flex;align-items:center;gap:6px;transition:gap .25s ease,color .25s ease } .area-cardlink:hover{color:var(--red-dark);gap:10px} .area-cardlink svg{width:14px;height:14px;transition:transform .25s ease} .area-cardlink:hover svg{transform:translateX(2px)} / ---- Modal de detalhe de área (ver comentário no HTML) ---- Mesma linguagem visual do lightbox da Galeria (fundo escuro, painel centralizado, fecha em Escape/clique fora/botão), mas com conteúdo de texto em vez de imagem — por isso um componente próprio, não um reaproveitamento direto do .lightbox. / .area-modal{ position:fixed;inset:0;z-index:2000; display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;pointer-events:none; transition:opacity .3s ease } / Sem visibility:hidden de propósito — opacity:0 + pointer-events:none já cobrem "invisível e não-interativo"; visibility com transição depende do timing exato do fade (flip discreto no início/fim da transição), e o JS já cuida de tirar/pôr o modal da árvore de acessibilidade via aria-hidden. Menos uma variável para dar errado. / .area-modal.active{opacity:1;pointer-events:all} .area-modalbackdrop{position:absolute;inset:0;background:rgba(20,19,18,.72);backdrop-filter:blur(2px)} .area-modalpanel{ position:relative;z-index:1;max-width:520px;width:100%;max-height:85vh;overflow-y:auto; background:var(--white);border-radius:0 var(--cut) var(--cut) var(--cut); padding:var(--space-2xl);box-shadow:0 30px 60px -20px rgba(0,0,0,.35); transform:translateY(12px) scale(.98);transition:transform .3s cubic-bezier(.22,.61,.36,1) } .area-modal.active .area-modalpanel{transform:translateY(0) scale(1)} [data-theme="dark"] .area-modalpanel{background:var(--gray-700)} / Painel dos Diferenciais: mesmo componente do modal de Áreas, só que com a foto institucional do escritório (mesma usada em "Quem Somos") como apoio visual bem discreto atrás do texto — um tapete translúcido (94%/93% de cor sólida) por cima da foto garante que a legibilidade nunca é afetada, em nenhum dos dois temas. / .diff-modalpanel{ background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)),url('../images/sobre/sobre-escritorio.jpg'); background-size:cover;background-position:center } [data-theme="dark"] .diff-modalpanel{ background-image:linear-gradient(rgba(74,74,71,.93),rgba(74,74,71,.93)),url('../images/sobre/sobre-escritorio.jpg') } .area-modalclose{ position:absolute;top:16px;right:16px;width:32px;height:32px; display:flex;align-items:center;justify-content:center;border-radius:50%; background:var(--gray-100);border:none;color:var(--gray-600);font-size:20px;line-height:1;cursor:pointer; transition:background-color .2s ease,color .2s ease } .area-modalclose:hover{background:var(--gray-200);color:var(--black)} [data-theme="dark"] .area-modalclose{background:var(--gray-600);color:var(--gray-300)} [data-theme="dark"] .area-modalclose:hover{background:var(--gray-500);color:var(--white)} .area-modalicon{ width:52px;height:52px;display:flex;align-items:center;justify-content:center; color:var(--red);background:rgba(155,27,48,.06);border-radius:50%;margin-bottom:var(--space-lg) } .area-modalicon svg{width:26px;height:26px} .area-modaltitle{ font-family:var(--font-head);font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--black); margin-bottom:var(--space-md);padding-right:32px } [data-theme="dark"] .area-modaltitle{color:var(--white)} .area-modaldesc{font-size:15px;line-height:1.75;color:var(--gray-600);margin-bottom:var(--space-xl)} [data-theme="dark"] .area-modaldesc{color:var(--gray-300)} .area-modalactions{display:flex;gap:var(--space-sm);flex-wrap:wrap} @media(max-width:480px){ .area-modalpanel{padding:var(--space-xl) var(--space-lg)} .area-modalactions{flex-direction:column} .area-modalactions .btn{width:100%;justify-content:center} } @media(prefers-reduced-motion:reduce){ .area-modal,.area-modalpanel{transition:none} } @media(max-width:1023px){.areas-grid .area-card{flex-basis:calc(50% - var(--space-lg)/2)}} / Abaixo de 767px o layout muda de flex pra grid — ver bloco ".areas-grid{display:grid...}" na seção "Mobile Composition" mais abaixo neste arquivo. Fica só lá pra não duplicar a regra em dois lugares diferentes. / / ============================================================ NÚMEROS — 3 estatísticas sobre fundo de rede/constelação (ícone do logo), claro/escuro conforme o tema, com um pulso de luz varrendo a imagem por cima (aproximação estilizada das linhas da rede — a imagem é um raster, não temos as coordenadas exatas de cada linha para "percorrê-las" ponto a ponto). ============================================================ / .numeros{position:relative;overflow:hidden;padding:var(--space-4xl) 0;background:var(--gray-800)} .numerosbg{ position:absolute;inset:0;z-index:0; background-image:url('../images/numeros/fundo-neural-claro.jpg?v=2'); background-size:cover;background-position:center } [data-theme="dark"] .numerosbg{background-image:url('../images/numeros/fundo-neural-escuro.jpg?v=2')} / Transição suave do preto do Hero para o fundo da seção (corrigido 18/08/2026 — o corte entre as duas seções estava brusco). Camada de "fumaça" só no topo, esmaece de escuro pra transparente; não altera a cor nem a rede de pontos do fundo, só amacia a costura. CAUSA DA FAIXA PRETA NO MODO ESCURO (corrigido 19/08/2026): esta fumaça foi calibrada pensando só no modo claro, onde o fundo por baixo (fundo-neural-claro.jpg) é claro e precisa mesmo de um degradê escuro por cima pra emendar com o preto do Hero. No modo escuro o fundo já É quase preto sozinho (fundo-neural-escuro.jpg tem luminância média ~7/255 — praticamente preto puro) — a MESMA fumaça escura por cima dele não suaviza nada, só empilha preto sobre preto e apaga a textura da rede de pontos nessa faixa, lida como uma tarja sólida indevida. A correção reduz a opacidade da fumaça no modo escuro (mesma forma/altura, só bem mais fraca), já que ali a costura já é naturalmente suave sem ajuda nenhuma. / .numeros::before{ content:'';position:absolute;top:0;left:0;right:0;height:min(22vh,180px); z-index:1;pointer-events:none; background:linear-gradient(to bottom,rgba(8,7,6,.65) 0%,rgba(8,7,6,.28) 45%,rgba(8,7,6,0) 100%) } [data-theme="dark"] .numeros::before{opacity:.3} / Corrigido 18/08/2026: pulso não era perceptível — mix-blend-mode multiply/screen sobre um fundo já claro/escuro ficava sutil demais a ponto de parecer parado. Trocado por um traço com opacidade própria (sem depender de blend-mode), sempre visível nos dois temas. / .numerospulse{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg, transparent 38%,rgba(130,130,126,.55) 47%,rgba(210,210,206,.9) 50%, rgba(130,130,126,.55) 53%,transparent 62%); background-size:260% 100%;background-repeat:no-repeat; animation:numerosPulse 6s ease-in-out infinite } [data-theme="dark"] .numerospulse{ background:linear-gradient(100deg, transparent 38%,rgba(180,40,66,.55) 47%,rgba(255,110,132,.85) 50%, rgba(180,40,66,.55) 53%,transparent 62%); background-size:260% 100%;background-repeat:no-repeat } @keyframes numerosPulse{ 0%{background-position:140% 0} 100%{background-position:-100% 0} } .numeros .container{position:relative;z-index:2} .numeros-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);max-width:1040px;margin:0 auto} .numero-card{ text-align:center;padding:var(--space-2xl) var(--space-lg); background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(26,26,26,.08);transition:transform .3s ease,background-color .3s ease } .numero-card:hover{transform:translateY(-3px)} [data-theme="dark"] .numero-card{background:rgba(45,45,43,.55);border-color:rgba(255,255,255,.12)} .numero-cardnum{ display:block;font-family:var(--font-head);font-size:clamp(34px,4vw,50px);font-weight:700; color:var(--red);line-height:1;margin-bottom:8px; / digitos de mesma largura: sem isso o numero "pula" enquanto conta / font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1 } .numero-cardlabel{display:block;font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--gray-700)} [data-theme="dark"] .numero-cardlabel{color:var(--gray-200)} @media(max-width:767px){ / Grade 2x2 (02/09/2026). Eram 3 colunas para 3 indicadores; com o quarto ("+3.000 processos ativos") isso deixaria um card orfao sozinho na segunda linha. 2x2 distribui os quatro de forma equilibrada e continua evitando a "coluna unica" que somava altura a rolagem (achado da auditoria de 18/08/2026). / .numeros{padding:var(--space-2xl) 0} .numeros-grid{grid-template-columns:repeat(2,1fr);gap:10px;max-width:400px} .numero-card{padding:16px 8px} .numero-cardlabel{font-size:11px} } @media(prefers-reduced-motion:reduce){ .numerospulse{animation:none;opacity:0} } / ============================================================ QUEM SOMOS — grid 50/50, foto real + texto oficial, corte assimétrico na foto, entrada cruzada (imagem da esquerda, texto da direita, simultâneas — ver .reveal--left/--right). ============================================================ / .sobre{padding:var(--space-5xl) 0;background:var(--veil);overflow:hidden} .sobregrid{ display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr); gap:var(--space-4xl);align-items:center;max-width:var(--container);margin:0 auto;padding:0 24px } .sobremedia{aspect-ratio:4/5;min-height:0} .sobretext-inner .sectionheader, .sobretext-inner{max-width:52ch} .sobretext-inner .sectiontag,.sobretext-inner .sectiontitle{text-align:left} .sobretext-inner .sectiondesc{text-align:left;margin:0 0 var(--space-lg);max-width:none;color:var(--gray-600)} [data-theme="dark"] .sobretext-inner .sectiondesc{color:var(--gray-400)} .sobretext-inner .sectiondesc strong{color:var(--black);font-weight:700} [data-theme="dark"] .sobretext-inner .sectiondesc strong{color:var(--white)} .sobretext-inner{margin-top:var(--space-lg)} .btn--dark-cut{ background:var(--black);color:var(--white);border-radius:0 var(--radius) var(--radius) var(--radius); margin-top:var(--space-md) } .btn--dark-cut:hover{background:var(--gray-800);color:var(--white);transform:translateY(-1px)} [data-theme="dark"] .btn--dark-cut{background:var(--gray-700)} [data-theme="dark"] .btn--dark-cut:hover{background:var(--gray-600)} @media(max-width:1023px){ .sobregrid{grid-template-columns:1fr;gap:var(--space-2xl);padding:0 20px} .sobremedia{order:-1;aspect-ratio:16/10} / Container fica mais baixo (16:10) que a foto de origem (4:5) — sem isso o corte central padrão cortava a placa "G&/Sociedade de Advogados" no topo da fachada. / .sobremedia .photoimg{object-position:50% 12%} } @media(max-width:767px){ .sobre{padding:var(--space-2xl) 0} .sobregrid{gap:var(--space-lg)} } / ---- Diferenciais ---- / .diffs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)} .diff-card{ padding:var(--space-xl);background:var(--white);border:1px solid var(--gray-200); border-top:3px solid var(--red);border-radius:var(--radius);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease } .diff-card:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.06);transform:translateY(-3px)} .diff-cardtitle{ font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;color:var(--black); margin-bottom:var(--space-xs) } .diff-carddesc{font-size:14px;line-height:1.6;color:var(--gray-500)} @media(max-width:1023px){.diffs-grid{grid-template-columns:repeat(2,1fr)}} / Abaixo de 767px o layout vira o mesmo grid de 2 colunas de Áreas de Atuação — ver bloco ".diffs-grid{display:grid...}" na seção "Mobile Composition" mais abaixo. Fica só lá pra não duplicar a regra em dois lugares diferentes (mesmo padrão já usado por .areas-grid). / / ---- CTA Section ---- / .cta-content{text-align:center} .cta-contenttitle{ font-family:var(--font-head);font-size:clamp(28px,3.5vw,40px);font-weight:700; line-height:1.15;letter-spacing:-.01em;color:var(--white);margin-bottom:var(--space-sm) } .cta-contentdesc{font-size:16px;line-height:1.75;color:rgba(255,255,255,.65);max-width:480px;margin:0 auto var(--space-xl)} .cta-contentactions{display:flex;align-items:center;justify-content:center;gap:var(--space-md);flex-wrap:wrap} / ---- Team ---- / / Grade um pouco mais apertada que antes (240 em vez de 280) — fotos menos dominantes, mais cards visíveis por linha, reforça que este nível (associados/apoio) é deliberadamente mais discreto que a vitrine dos sócios logo acima. / .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md);max-width:var(--container-sm);margin:0 auto;align-items:start} .team-card{ background:var(--white);border:1px solid var(--gray-200); border-top:3px solid var(--red);border-radius:var(--radius);overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; / coluna: foto no topo, corpo ocupando o resto — CTA (quando existe) ancora na base, mantendo os cards visualmente consistentes mesmo com textos de tamanhos diferentes. / display:flex;flex-direction:column } .team-card:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.06);transform:translateY(-3px)} .team-card>.photo{border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:3/4;flex-shrink:0} .team-cardbody{padding:var(--space-sm) var(--space-md) var(--space-md);display:flex;flex-direction:column;flex:1 1 auto;min-width:0} .team-cardname{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--black);margin-bottom:var(--space-xxs);line-height:1.25} .team-cardrole{font-size:11px;color:var(--red);font-weight:500;margin-bottom:var(--space-xs);line-height:1.4} .team-carddesc{font-size:14px;line-height:1.6;color:var(--gray-500);margin-bottom:var(--space-sm)} .team-cardcta{font-size:13px;font-weight:500;color:var(--red);margin-top:auto} .team-cardcta::after{content:'→';margin-left:4px;transition:margin .2s ease} .team-cardcta:hover::after{margin-left:8px} / Grupo de contatos por unidade — usado quando o profissional atende em mais de uma unidade e cada unidade tem seu próprio botão de WhatsApp (01/09/2026). Empilha os links; o margin-top:auto que antes ficava no .team-cardcta passa para o grupo, para os botões seguirem colados na base do card. / .team-cardctas{margin-top:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-start} .team-cardctas .team-cardcta{margin-top:0} .team-cardunit{font-size:11px;color:var(--gray-400);font-style:italic} .team-group{margin-bottom:var(--space-2xl)} .team-group:last-child{margin-bottom:0} .team-grouptitle{ font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;color:var(--black); text-align:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-sm); border-bottom:1px solid var(--gray-200);max-width:var(--container-sm);margin-left:auto;margin-right:auto } .team-groupdesc{ font-size:14px;line-height:1.6;color:var(--gray-500);text-align:center; max-width:var(--container-sm);margin:calc(var(--space-lg) -1) auto var(--space-lg) } /* Fernanda/Bruno/Rosa/Felipe: os 4 simétricos desde 25/08/2026 (fotos de Fernanda/Bruno/Rosa publicadas — antes só Felipe tinha foto, daí o grid ser 3 colunas com ele isolado sozinho numa linha própria, centralizado a 220px; ver histórico no HTML). Com os 4 iguais, 2 colunas fecha exatamente 2 linhas cheias, sem card sobrando sozinho. / .team-grid--support{grid-template-columns:repeat(2,1fr);max-width:var(--container-sm);margin-left:auto;margin-right:auto;justify-content:center} .team-card--support{background:var(--gray-50)} .team-card--support .photo{aspect-ratio:4/3} .team-card--support:hover{transform:none;box-shadow:none;border-color:var(--gray-200)} / ---- Equipe de apoio sem foto (corrigido 18/08/2026) ---- Cards mais simples e compactos — sem retrato nem placeholder, só nome, função/unidade e uma linha de disponibilidade. Corte assimétrico discreto para não ficar "quadrado demais" sem a foto. / .team-grid--support-noph{grid-template-columns:repeat(2,1fr);max-width:560px} .team-card--noph{ padding:var(--space-lg);text-align:center;border-radius:0 var(--radius) var(--radius) var(--radius) } .team-card--noph .team-cardbody{padding:0} .team-card--noph .team-cardname{font-size:15.5px;margin-bottom:4px} .team-card--noph .team-cardrole{font-size:11.5px;color:var(--gray-500);font-weight:500;margin-bottom:8px} .team-cardnote{font-size:12px;color:var(--red);font-style:italic} @media(max-width:480px){.team-grid--support-noph{grid-template-columns:1fr}} @media(max-width:767px){ / Sem foto, o layout genérico "linha horizontal com avatar" dos outros team-card não se aplica — mantém bloco centrado simples. / .team-card--noph{display:block;padding:var(--space-md)} .team-card--noph .team-cardbody{padding:0} } / ---- Team — mobile: cartão vira linha horizontal ---- Em vez de encolher a mesma composição vertical (retrato 3:4 em coluna única = foto enorme, um card por tela), o retrato vira uma miniatura fixa ao lado do texto — o mesmo padrão de "lista de perfis" usado em diretórios profissionais. Reduz drasticamente o peso visual sem perder nenhuma informação (nome, cargo e descrição continuam completos, só o card muda de forma). / @media(max-width:767px){ / Ajuste de 18/08/2026: avatar de 64px→56px e mais respiro nas laterais do texto (padding direito/esquerdo mais generoso) — pedido do cliente pra deixar os cards de Associados mais enxutos em altura sem perder informação nem ficar apertado. / .team-grid,.team-grid--support{ grid-template-columns:1fr;gap:8px;max-width:none } .team-card{display:flex;flex-direction:row;align-items:flex-start;gap:12px;border-radius:8px} .team-cardbody{display:block} .team-cardcta{margin-top:0} .team-card:hover{transform:none} .team-card>.photo{ flex-shrink:0;width:56px;height:56px;aspect-ratio:1/1; border-radius:50%;margin:12px 0 12px 14px } / Placeholder (para quem ainda não tem foto publicada) precisa caber numa miniatura de 56px — sem o rótulo de texto, só a silhueta. / .team-card>.photo .photoph-label{display:none} .team-card>.photo .photoph-figure{width:22px;height:22px} .team-card>.photo .photoph{gap:0} .team-cardbody{padding:12px 14px 12px 0;min-width:0} .team-cardname{font-size:14px} .team-cardrole{font-size:10.5px;margin-bottom:4px} / Descrição longa fica pesada numa linha estreita ao lado de uma miniatura — corta em 2 linhas com reticências; o texto completo segue disponível para quem tem página própria (só os sócios). / .team-carddesc{ font-size:12.5px;margin-bottom:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden } .team-cardunit{font-size:11px} } / ---- Equipe — intro com foto de ambiente real ---- Substitui o cabeçalho branco genérico (igual ao de outras seções) por uma faixa com foto real do escritório atrás do texto — dá peso próprio à abertura da seção e mostra a estrutura física, sem criar uma seção nova (é só o cabeçalho da #equipe já existente). / .equipe-intro{ overflow:hidden;border-radius:8px; margin-bottom:var(--space-3xl); display:flex;flex-direction:column } .equipe-introphoto{ width:100%;border-radius:8px 8px 0 0;overflow:hidden; aspect-ratio:16/7 } .equipe-introphoto .photoimg{filter:saturate(.94) contrast(1.04) brightness(.9);width:100%;height:100%;object-fit:cover} .equipe-introcontent{ text-align:center; max-width:var(--container-sm);margin:0 auto; padding:var(--space-2xl) var(--space-lg) 0 } .equipe-introdesc{ text-align:center; max-width:var(--container-sm);margin:0 auto; padding:var(--space-lg) var(--space-lg) var(--space-2xl) } .equipe-intro .sectiontag{color:var(--red)} .equipe-intro .sectiontitle{color:var(--black)} .equipe-intro .sectiondesc{color:var(--gray-600)} .equipe-intro .sectionline{background:var(--red)} @media(max-width:767px){ .equipe-intro{margin-bottom:var(--space-2xl);border-radius:6px} .equipe-introphoto{aspect-ratio:16/9;border-radius:6px 6px 0 0} .equipe-introcontent{padding:var(--space-xl) var(--space-md) 0} .equipe-introdesc{padding:var(--space-md) var(--space-md) var(--space-xl)} } / ============================================================ Momentos — faixa "Nosso Dia a Dia" (abaixo de Equipe de Apoio) Carrossel automático em loop contínuo, sem setas/controles — a trilha desloca-se via GSAP (ver IIFE "Momentos" em script.js) e o loop se repete de forma suave: o script duplica a sequência de fotos no HTML, então a trilha em si é sempre exatamente 2x a largura de uma sequência (daí "width:max-content" + o deslocamento de -50% no JS bater exatamente com o fim da 1ª cópia). ============================================================ / .momentos{padding-bottom:0;overflow:hidden} .momentos .sectionheader{margin-bottom:var(--space-2xl)} .momentos-viewport{ width:100%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%) } .momentos-track{display:flex;align-items:flex-end;gap:var(--space-md);width:max-content;padding:0 var(--space-md) var(--space-3xl)} .momentos-item{ flex:0 0 auto;height:380px;aspect-ratio:var(--ar,3/4); box-shadow:0 20px 40px -22px rgba(26,26,26,.35) } / border-radius precisa do reforço de especificidade ".momentos-track .momentos-item" (mesmo padrão de ".galeria-track .gallery-item" logo abaixo, na Galeria): a figura também carrega a classe ".photo", cuja regra base (mais abaixo no arquivo, mesma especificidade de classe única) sempre venceria o empate de cascata e anulava silenciosamente qualquer border-radius escrito só em ".momentos-item" — em qualquer largura de tela, inclusive antes deste ajuste. / .momentos-track .momentos-item{border-radius:var(--radius)} .momentos-item .photoph-label{display:none} @media(max-width:1023px){ .momentos-item{height:300px} } @media(max-width:767px){ .momentos .sectionheader{margin-bottom:var(--space-xl)} .momentos-track{gap:var(--space-sm);padding:0 var(--space-sm) var(--space-2xl)} .momentos-item{height:216px} .momentos-track .momentos-item{border-radius:4px} } @media(prefers-reduced-motion:reduce){ .momentos-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch} .momentos-track{padding-bottom:var(--space-2xl)} .momentos-item[aria-hidden="true"]{display:none} } / ---- Contato ---- / .contato-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-4xl);align-items:start} .contato-info .sectiontag{margin-bottom:var(--space-md)} .contato-info .sectiontitle{margin-bottom:0} .contato-infoitems{display:flex;flex-direction:column;gap:var(--space-lg);margin:var(--space-xl)0} .contato-item{display:flex;align-items:flex-start;gap:var(--space-md)} .contato-itemicon{ width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(155,27,48,.06);color:var(--red);border-radius:50% } .contato-itemlabel{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);margin-bottom:2px} .contato-itemvalue{font-size:14px;color:var(--gray-700);line-height:1.5;display:block} .contato-item a.contato-itemvalue{color:var(--gray-700)} .contato-item a.contato-itemvalue:hover{color:var(--red)} @media(max-width:1023px){.contato-grid{grid-template-columns:1fr;gap:var(--space-2xl)}} / ---- Form ---- / .contato-form{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:var(--space-2xl)} / Em seção cinza, o formulário sobe para branco para não sumir no fundo / .section--gray .contato-form{background:var(--white)} .contato-formheader{margin-bottom:var(--space-xl)} .contato-formtitle{font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--black);margin-bottom:4px} .contato-formsub{font-size:14px;color:var(--gray-500)} .contato-formgroup{margin-bottom:var(--space-lg);position:relative} .contato-formlabel{display:block;font-size:13px;font-weight:500;color:var(--gray-600);margin-bottom:6px} .contato-forminput,.contato-formtextarea{ width:100%;font-family:var(--font-body);font-size:15px; padding:12px 16px;border:1px solid var(--gray-200);border-radius:var(--radius); background:var(--white);color:var(--black);transition:var(--transition);outline:none } .contato-forminput::placeholder,.contato-formtextarea::placeholder{color:var(--gray-400)} .contato-forminput:focus,.contato-formtextarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(155,27,48,.08)} .contato-forminput.error,.contato-formtextarea.error,.contato-formselect.error{border-color:var(--red)} .contato-formtextarea{resize:vertical;min-height:100px} .contato-formselect-wrap{position:relative} .contato-formselect{ width:100%;font-family:var(--font-body);font-size:15px; padding:12px 16px;padding-right:40px;border:1px solid var(--gray-200); border-radius:var(--radius);background:var(--white);color:var(--black); transition:var(--transition);outline:none;appearance:none;cursor:pointer } .contato-formselect:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(155,27,48,.08)} .contato-formselect-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none} .contato-formerror{display:none;font-size:12px;color:var(--red);margin-top:4px} .contato-formerror.visible{display:block} @media(max-width:767px){.contato-form{padding:var(--space-lg)}} / ---- Footer ---- / .footer{background:var(--black);color:var(--gray-400);padding:var(--space-4xl)0 var(--space-xl)} .footertop{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--space-2xl);margin-bottom:var(--space-3xl)} .footerbrand{display:flex;flex-direction:column} .footercol{display:flex;flex-direction:column} .footerlogo-img{height:56px;width:auto;display:block;margin:0 auto var(--space-lg);filter:brightness(0) invert(1)} .footerdesc{font-size:13px;line-height:1.6;color:var(--gray-500);max-width:300px} .footertitle{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--white);margin-bottom:var(--space-lg)} .footerlinks{display:flex;flex-direction:column;gap:var(--space-sm)} .footerlinks a{font-size:13px;color:var(--gray-500);transition:color .2s} .footerlinks a:hover{color:var(--white)} .footerlinks--contact li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--gray-500)} .footerlinks--contact li svg{flex-shrink:0;margin-top:3px;color:var(--gray-600)} .footerlinks--contact a{color:var(--gray-300)} .footerlinks--contact a:hover{color:var(--red)} .footersocial{display:flex;gap:var(--space-sm);margin-top:var(--space-lg)} .footersocial-link{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gray-800);color:var(--gray-500);transition:var(--transition)} .footersocial-link:hover{background:var(--red);color:var(--white)} .footerbottom{padding-top:var(--space-xl);border-top:1px solid var(--gray-800);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap} .footerbottom p{font-size:12px;color:var(--gray-600)} .footerbottom-links{display:flex;gap:var(--space-lg)} .footerbottom-links a{font-size:12px;color:var(--gray-600);transition:color .2s} .footerbottom-links a:hover{color:var(--red)} @media(max-width:1023px){.footertop{grid-template-columns:repeat(2,1fr)}} @media(max-width:767px){ .footer{padding:var(--space-2xl)0 var(--space-lg)} .footertop{grid-template-columns:1fr;gap:var(--space-xl)} .footerlogo-img{height:50px;margin:0 auto var(--space-lg)} / Logo já era centralizada aqui, mas o texto abaixo ficava alinhado à esquerda em largura total — desalinhado (achado da auditoria). / .footerbrand{align-items:center;text-align:center} .footerdesc{max-width:320px} .footerbottom{flex-direction:column;text-align:center} } / ---- WhatsApp Float ---- / .whatsapp-float{ position:fixed;bottom:24px;right:24px;z-index:1300; width:52px;height:52px;display:flex;align-items:center;justify-content:center; background:#25D366;color:var(--white);border-radius:50%; box-shadow:0 2px 12px rgba(37,211,102,.3);transition:transform .3s ease,box-shadow .3s ease;text-decoration:none; animation:whatsappPulse 3s ease-in-out infinite } .whatsapp-float:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(37,211,102,.45);color:var(--white);animation:none} @keyframes whatsappPulse{ 0%,100%{box-shadow:0 2px 12px rgba(37,211,102,.3)} 50%{box-shadow:0 2px 12px rgba(37,211,102,.3),0 0 0 8px rgba(37,211,102,.08)} } @media(max-width:767px){.whatsapp-float{width:48px;height:48px;bottom:16px;right:16px}} / ---- Scroll Reveal ---- Os estados iniciais só valem quando o JS está ativo (classe .js aplicada no por um script inline no ). Sem JS, todo o conteúdo aparece normalmente, sem depender da animação. Reforçado em 25/08/2026 — a entrada era discreta demais (24px/16px, .6-.7s) pra ser percebida, principalmente no celular. Os valores viraram custom properties (--reveal-... e --stagger-...) exatamente pra poder existir UM valor "contido" no desktop e outro mais perceptível só no mobile (ver @media(max-width:767px) logo abaixo), sem duplicar nenhuma regra — é a MESMA transição, só troca a variável. Continua sendo o mesmo sistema de sempre (.reveal / .stagger + IntersectionObserver em script.js); nenhuma arquitetura nova. / :root{ --reveal-y:30px;--reveal-x:32px;--reveal-dur:.75s; --stagger-y:20px;--stagger-dur:.65s;--stagger-step:.08s; --reveal-ease:cubic-bezier(.16,.8,.24,1) } @media(max-width:767px){ / Mobile é a prioridade do reforço: deslocamento maior (dentro de 30-60px), duração mais longa (dentro de 700-1100ms) e passo de stagger maior (dentro de 80-180ms) — pra dar tempo do usuário realmente VER o elemento se movendo enquanto rola. / :root{ --reveal-y:48px;--reveal-x:36px;--reveal-dur:.95s; --stagger-y:36px;--stagger-dur:.85s;--stagger-step:.13s } } .js .reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--reveal-dur) var(--reveal-ease),transform var(--reveal-dur) var(--reveal-ease)} .js .reveal.visible{opacity:1;transform:translateY(0)} / Entrada cruzada (Quem Somos): imagem da esquerda, texto da direita, simultâneas — mesma transição/duração da base, só o eixo muda. / .js .reveal--left{transform:translateX(calc(var(--reveal-x) -1))} .js .reveal--left.visible{transform:translateX(0)} .js .reveal--right{transform:translateX(var(--reveal-x))} .js .reveal--right.visible{transform:translateX(0)} /* ---- Stagger Children ---- / .js .stagger>{opacity:0;transform:translateY(var(--stagger-y));transition:opacity var(--stagger-dur) var(--reveal-ease),transform var(--stagger-dur) var(--reveal-ease)} .js .stagger.visible>{opacity:1;transform:translateY(0)} .stagger.visible>:nth-child(1){transition-delay:calc(var(--stagger-step) * 0)} .stagger.visible>:nth-child(2){transition-delay:calc(var(--stagger-step) 1)} .stagger.visible>:nth-child(3){transition-delay:calc(var(--stagger-step) 2)} .stagger.visible>:nth-child(4){transition-delay:calc(var(--stagger-step) 3)} .stagger.visible>:nth-child(5){transition-delay:calc(var(--stagger-step) 4)} .stagger.visible>:nth-child(6){transition-delay:calc(var(--stagger-step) 5)} .stagger.visible>:nth-child(7){transition-delay:calc(var(--stagger-step) 6)} .stagger.visible>:nth-child(8){transition-delay:calc(var(--stagger-step) 7)} .stagger.visible>:nth-child(9){transition-delay:calc(var(--stagger-step) 8)} .stagger.visible>:nth-child(n+10){transition-delay:calc(var(--stagger-step) 9)} /* ============================================================ BLOG — artigos próprios e crédito das notícias ============================================================ / / Card de artigo escrito pela G&F / .artigo-card{ background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--red);border-radius:var(--radius); padding:var(--space-xl);display:flex;flex-direction:column; transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease } .artigo-card:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.06);transform:translateY(-3px)} .artigo-cardtitulo{ font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3; color:var(--black);margin-bottom:var(--space-sm) } .artigo-cardtitulo a{color:inherit} .artigo-cardtitulo a:hover{color:var(--red)} .artigo-cardresumo{font-size:14px;line-height:1.6;color:var(--gray-500);margin-bottom:var(--space-md);flex:1} .artigo-cardautor{ display:block;font-size:12px;color:var(--gray-400); margin-bottom:var(--space-md);padding-top:var(--space-sm); border-top:1px solid var(--gray-200) } / Estado do blog enquanto não há artigo publicado / .artigos-vazio{ max-width:var(--container-sm);margin:0 auto;text-align:center; background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius); padding:var(--space-3xl) var(--space-xl) } .artigos-vazioicone{ display:inline-flex;align-items:center;justify-content:center; width:64px;height:64px;border-radius:50%; background:rgba(155,27,48,.06);color:var(--red);margin-bottom:var(--space-lg) } .artigos-vaziotitulo{ font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;color:var(--black); margin-bottom:var(--space-sm) } .artigos-vaziotexto{ font-size:15px;line-height:1.7;color:var(--gray-500); max-width:52ch;margin:0 auto var(--space-xl) } @media(max-width:767px){ .artigos-vazio{padding:var(--space-2xl) var(--space-lg)} .artigo-card{padding:var(--space-lg)} } / Crédito da fonte no card de notícia / .news-cardfonte{ display:block;font-size:11px;color:var(--gray-400); margin-bottom:var(--space-sm);letter-spacing:.02em } / Nota de crédito ao pé da lista de notícias / .noticias-credito{ margin-top:var(--space-2xl);padding-top:var(--space-lg); border-top:1px solid var(--gray-200); font-size:12.5px;line-height:1.7;color:var(--gray-500); max-width:78ch } .noticias-credito a{color:var(--gray-600);text-decoration:underline;text-underline-offset:2px} .noticias-credito a:hover{color:var(--red)} / Chamada do blog na home / .blog-chamada{ display:flex;align-items:center;justify-content:center;gap:var(--space-md); flex-wrap:wrap;margin-top:var(--space-2xl); padding-top:var(--space-xl);border-top:1px solid var(--gray-200) } .blog-chamadatexto{font-size:14px;color:var(--gray-500)} / ---- Alvo de toque mínimo (WCAG 2.2 AA — 2.5.8) ---- Links de ação isolados (não os que ficam no meio de uma frase) precisam de pelo menos 24px de altura para serem tocáveis com segurança no celular. / .area-cardlink,.team-cardcta,.news-cardlink,.contato-itemvalue, .unit-blockrow a,.footerlinks a,.footerbottom-links a,.links-list a{ display:inline-flex;align-items:center;min-height:24px } .unit-blockrow span a{min-height:0} @media(max-width:767px){ .footerlinks a,.links-list a{min-height:28px} } / ---- Reduced Motion ---- / @media(prefers-reduced-motion:reduce){ ,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .js .reveal,.js .stagger>{opacity:1;transform:none} .unit-member:hover{transform:none} } / ---- Visual Quality Extras ---- / .sectionline{ transition:width .5s cubic-bezier(.4,0,.2,1) } .reveal.visible .sectionline{width:48px} / BUG corrigido em 25/08/2026: todo .sectionheader agora também é .stagger (cascata eyebrow→título→linha→texto — ver "Scroll Reveal"), e ".js .stagger>" redeclara a MESMA propriedade "transition" (é shorthand — não soma com a regra acima, uma vence a outra por inteiro) com maior especificidade (.js .stagger> = 3 seletores vs .sectionline sozinho = 1). Resultado: a lista vencedora era só opacity/transform, "width" nunca entrava em transição — a linha pulava de 32px pra 48px em vez de crescer. Esta regra é mais específica que ".js .stagger>" de propósito, pra reincluir "width" na lista sem tirar opacity/transform do stagger. / .js .stagger>.sectionline{ transition:opacity var(--stagger-dur) var(--reveal-ease),transform var(--stagger-dur) var(--reveal-ease),width .5s cubic-bezier(.4,0,.2,1) } .btn{ transition:all .25s cubic-bezier(.4,0,.2,1) } .btn:active{ transform:scale(0.98) } .area-cardlink,.team-cardcta,.news-cardlink{ transition:color .2s ease,transform .2s ease } .area-cardlink:hover,.team-cardcta:hover,.news-cardlink:hover{ transform:translateX(2px) } .contato-forminput:focus,.contato-formtextarea:focus{ border-color:var(--red);box-shadow:0 0 0 3px rgba(155,27,48,.1) } .contato-formselect:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(155,27,48,.1)} .footerlinks a{transition:color .2s ease,padding-left .2s ease} .footerlinks a:hover{padding-left:2px} .contato-itemicon{ transition:background .25s ease,transform .25s ease } .contato-item:hover .contato-itemicon{background:var(--gray-100);transform:scale(1.05)} .herotrust-number{transition:transform .3s ease} .herotrust-item:hover .herotrust-number{transform:scale(1.05)} /* ---- Mobile Composition ---- / @media(max-width:767px){ .sobre-values{margin:16px 0} / Áreas de Atuação — grid de 2 colunas. Como são 5 áreas (ímpar), o último card ficaria sozinho na última linha; a regra :last-child:nth-child(odd) resolve isso ocupando a linha toda SÓ quando o total de cards é ímpar — se um dia virar par, a regra some sozinha e a última linha fecha certinha com 2 cards, sem precisar lembrar de tirar isso daqui. / .areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .areas-grid .area-card:last-child:nth-child(odd){grid-column:1/-1} .area-card{padding:14px 12px} .area-cardicon{width:32px;height:32px;margin-bottom:10px} .area-cardicon svg{width:20px;height:20px} .area-cardtitle{font-size:14.5px;margin-bottom:4px;line-height:1.3} .area-carddesc{ margin-bottom:10px;font-size:12.5px;line-height:1.55; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden } / Diferenciais — ajuste de 19/08/2026: passou a seguir Áreas de Atuação como referência DIRETA (pedido explícito do cliente, substitui a decisão anterior de manter em coluna única) — mesma grade de 2 colunas, mesmo gap, mesmo padding, mesmo tamanho de ícone/título/descrição. São 6 diferenciais (par), então a regra de último-card-linha-toda não entra em ação hoje, mas fica pelo mesmo motivo da de Áreas: se o número de diferenciais virar ímpar no futuro, resolve sozinha, sem precisar editar CSS de novo. / .diffs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .diffs-grid .diff-card:last-child:nth-child(odd){grid-column:1/-1} .diff-card{padding:14px 12px} .diff-card .area-cardicon{width:32px;height:32px;margin-bottom:10px} .diff-card .area-cardicon svg{width:20px;height:20px} .diff-cardtitle{font-size:14.5px;margin-bottom:4px;line-height:1.3} .diff-carddesc{ margin-bottom:10px;font-size:12.5px;line-height:1.55; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden } .contato-grid{gap:20px} .contato-infoitems{gap:12px;margin:16px 0} .contato-itemicon{width:36px;height:36px} .contato-formgroup{margin-bottom:14px} .cta-contenttitle{font-size:22px} .cta-contentdesc{margin-bottom:16px;font-size:14px} .cta-contentactions{flex-direction:column;gap:8px} .cta-contentactions .btn{width:260px;max-width:80%;justify-content:center} / .team-grid/.team-card* já ficam definidos no bloco "Team — mobile: cartão vira linha horizontal" mais acima — removido daqui em 18/08/2026 porque essas mesmas regras, repetidas nesse bloco mais abaixo no arquivo, estavam ganhando a cascata e desfazendo parte da compactação (gap voltava de 8px pra 12px, padding lateral do texto dobrava). Achado da auditoria de responsividade. / .news-controls{margin-bottom:16px} .news-grid{gap:12px;margin-bottom:16px} .news-card{padding:16px} .news-cardtitle{font-size:14.5px;margin-bottom:6px;line-height:1.3} .news-carddesc{font-size:13px;margin-bottom:12px;line-height:1.6} .links-grid{gap:12px} .links-category{padding:16px} .links-categorytitle{font-size:14.5px;margin-bottom:12px;padding-bottom:10px;line-height:1.3} .portal-grid{gap:16px} .portal-card{padding:16px} .portal-carddesc{margin-bottom:16px} .footersocial{justify-content:center} } @media(max-width:480px){ .herotitle{font-size:26px} .herosubtitle{font-size:14px} .heroactions .btn{width:240px;font-size:12px;padding:11px 18px} .herotrust-number{font-size:22px} .herotrust-label{font-size:11px} .section{padding:32px 0} .sectiontitle{font-size:21px} .sectionheader{margin-bottom:24px} .sectiondesc{font-size:14px} .sobre-values{gap:4px;margin:12px 0} .sobre-value{font-size:12px} .area-card{padding:14px} .diff-card{padding:14px} .contato-form{padding:14px} .portal-card{padding:14px} .news-card{padding:14px} .links-category{padding:14px} .cta-contenttitle{font-size:20px} .cta-contentactions .btn{width:220px;font-size:12px} } / ---- Contact Map ---- / .contato-map{margin-top:var(--space-xl);border-radius:var(--radius);overflow:hidden} / O height="280" do iframe é atributo HTML, não CSS — em telas muito estreitas isso somava bastante rolagem antes do formulário completo logo abaixo (achado da auditoria). CSS tem prioridade sobre o atributo HTML, então isto reduz a altura só nos menores telefones. / @media(max-width:480px){.contato-map iframe{height:200px}} / ---- Gallery ---- Ajuste de 18/08/2026: a grade estática virou carrossel contínuo, mesma técnica de #momentos (ver .momentos-viewport/.momentos-track em "Momentos" acima) — trilha em flex, mask nas bordas, duplicada uma vez pro loop sem salto. .gallery-item continua sendo o mesmo botão de sempre (hover, overlay, ícone "+", clique abre o lightbox); só o contêiner ao redor mudou de grid pra trilha. / .galeria{padding-bottom:0;overflow:hidden} .galeria .sectionheader{margin-bottom:var(--space-2xl)} .galeria-viewport{ width:100%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%) } .galeria-track{display:flex;gap:var(--space-md);width:max-content;padding:0 var(--space-md) var(--space-3xl)} .galeria-track .gallery-item{flex:0 0 auto;height:380px;aspect-ratio:4/3;width:auto} .gallery-item{ position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius); cursor:pointer;background:var(--gray-100);border:none;padding:0; transition:transform .3s ease,box-shadow .3s ease } .gallery-item:hover{transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(0,0,0,.06)} .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .gallery-item:hover img{transform:scale(1.05)} .gallery-itemoverlay{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(26,26,26,.5);opacity:0;transition:opacity .3s ease } .gallery-item:hover .gallery-itemoverlay{opacity:1} .gallery-itemicon{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:var(--white);color:var(--black);border-radius:50%; font-size:20px;font-weight:700 } @media(max-width:1023px){.galeria-track .gallery-item{height:300px}} @media(max-width:767px){ .galeria .sectionheader{margin-bottom:var(--space-xl)} .galeria-track{gap:var(--space-sm);padding:0 var(--space-sm) var(--space-2xl)} .galeria-track .gallery-item{height:216px;border-radius:4px} } @media(prefers-reduced-motion:reduce){ .galeria-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch} .galeria-track{padding-bottom:var(--space-2xl)} .galeria-track [data-decorative]{display:none} } / ---- Lightbox ---- / .lightbox{ position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .3s ease,visibility .3s ease; / visibility (e não só opacity) tira os 3 botões internos da ordem de tabulação. Com opacity:0 apenas, o usuário de teclado atravessava botões invisíveis dentro de um contêiner aria-hidden. / visibility:hidden } .lightbox.active{opacity:1;pointer-events:all;visibility:visible} .lightboxclose{ position:absolute;top:20px;right:24px;background:none;border:none;color:var(--white); font-size:32px;cursor:pointer;z-index:2001;line-height:1 } .lightboxprev,.lightboxnext{ position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1); border:none;color:var(--white);width:48px;height:48px;display:flex;align-items:center; justify-content:center;border-radius:50%;cursor:pointer;transition:background .2s;z-index:2001 } .lightboxprev{left:20px} .lightboxnext{right:20px} .lightboxprev:hover,.lightboxnext:hover{background:rgba(255,255,255,.2)} .lightboxcontent{text-align:center;max-width:90vw;max-height:85vh} .lightboximg{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius)} .lightboxcounter{color:rgba(255,255,255,.6);font-size:13px;margin-top:var(--space-md)} @media(max-width:767px){.lightboxprev,.lightboxnext{width:40px;height:40px}} / ---- Links Úteis ---- / .links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)} .links-category{ background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--red);border-radius:var(--radius); padding:var(--space-xl);transition:border-color .3s ease,box-shadow .3s ease } .links-category:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.06)} .links-categorytitle{ display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-head); font-size:19px;font-weight:700;line-height:1.3;color:var(--black);margin-bottom:var(--space-lg); padding-bottom:var(--space-md);border-bottom:1px solid var(--gray-200) } .links-categorytitle svg{color:var(--red);flex-shrink:0} .links-list{display:flex;flex-direction:column;gap:var(--space-sm)} .links-list a{ font-size:14px;color:var(--gray-600);padding:6px 0;display:flex;align-items:center; gap:6px;transition:color .2s ease,padding-left .2s ease } .links-list a::before{content:'→';color:var(--red);font-size:12px;transition:transform .2s ease} .links-list a:hover{color:var(--red);padding-left:4px} .links-list a:hover::before{transform:translateX(2px)} @media(max-width:767px){.links-grid{grid-template-columns:1fr}} / ---- Notícias ---- / .news-controls{margin-bottom:var(--space-2xl)} .news-search{ display:flex;align-items:center;gap:var(--space-sm);background:var(--white); border:1px solid var(--gray-200);border-radius:var(--radius);padding:0 var(--space-md); margin-bottom:var(--space-lg);transition:border-color .2s } .news-search:focus-within{border-color:var(--red)} .news-search svg{color:var(--gray-400);flex-shrink:0} .news-searchinput{ flex:1;border:none;background:none;padding:12px 0;font-family:var(--font-body); font-size:15px;color:var(--black);outline:none } .news-searchinput::placeholder{color:var(--gray-400)} .news-filters{display:flex;flex-wrap:wrap;gap:var(--space-sm)} .news-filter{ font-family:var(--font-body);font-size:13px;font-weight:500; padding:8px 16px;border:1px solid var(--gray-200);border-radius:var(--radius); background:var(--white);color:var(--gray-600);cursor:pointer;transition:var(--transition) } .news-filter:hover{border-color:var(--gray-400);color:var(--black)} .news-filter.active{background:var(--red);color:var(--white);border-color:var(--red)} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-bottom:var(--space-2xl)} .news-card{ background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--red);border-radius:var(--radius); padding:var(--space-xl);display:flex;flex-direction:column; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease } .news-card:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.06);transform:translateY(-3px)} .news-card[hidden]{display:none} .news-cardmeta{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm)} .news-cardcategory{ font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--red);background:rgba(155,27,48,.06);padding:4px 10px;border-radius:20px } .news-carddate{font-size:12px;color:var(--gray-400)} .news-cardtitle{font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--black);margin-bottom:8px;line-height:1.3} .news-carddesc{font-size:14px;line-height:1.6;color:var(--gray-500);margin-bottom:var(--space-md);flex:1} .news-cardlink{font-size:13px;font-weight:500;color:var(--red);transition:color .2s} .news-cardlink:hover{color:var(--red-dark)} .news-pagination{display:flex;justify-content:center;gap:var(--space-sm)} .news-paginationbtn{ width:36px;height:36px;display:flex;align-items:center;justify-content:center; border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white); font-size:13px;font-weight:500;color:var(--gray-600);cursor:pointer;transition:var(--transition) } .news-paginationbtn:hover{border-color:var(--gray-400);color:var(--black)} .news-paginationbtn.active{background:var(--red);color:var(--white);border-color:var(--red)} .news-empty{ text-align:center;padding:var(--space-3xl) 0;color:var(--gray-500);font-size:15px } @media(max-width:1023px){.news-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:767px){.news-grid{grid-template-columns:1fr}} / ---- Controle de Processos (Portal) ---- / .portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:start} .portal-card{ background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--red);border-radius:var(--radius); padding:var(--space-xl) } .portal-cardicon{ width:56px;height:56px;display:flex;align-items:center;justify-content:center; background:rgba(155,27,48,.06);color:var(--red);border-radius:50%;margin-bottom:var(--space-lg) } .portal-cardtitle{font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.3;color:var(--black);margin-bottom:8px} .portal-carddesc{font-size:14px;line-height:1.6;color:var(--gray-500);margin-bottom:var(--space-xl)} .portal-formgroup{margin-bottom:var(--space-lg)} .portal-formlabel{display:block;font-size:13px;font-weight:500;color:var(--gray-600);margin-bottom:6px} .portal-forminput{ width:100%;font-family:var(--font-body);font-size:15px; padding:12px 16px;border:1px solid var(--gray-200);border-radius:var(--radius); background:var(--white);color:var(--black);transition:var(--transition);outline:none } .portal-forminput::placeholder{color:var(--gray-400)} .portal-forminput:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(155,27,48,.1)} .portal-forminput.error{border-color:var(--red)} .portal-formerror{display:none;font-size:12px;color:var(--red);margin-top:4px} .portal-formerror.visible{display:block} .portal-formnote{font-size:12px;color:var(--gray-400);margin-top:var(--space-md);text-align:center} .portal-steps{display:flex;flex-direction:column;gap:var(--space-lg)} .portal-step{display:flex;gap:var(--space-md);align-items:flex-start} .portal-stepnum{ width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(155,27,48,.06);color:var(--red);border-radius:50%; font-family:var(--font-head);font-size:14px;font-weight:700 } .portal-step strong{display:block;font-size:15px;color:var(--black);margin-bottom:2px} .portal-step p{font-size:13px;line-height:1.5;color:var(--gray-500)} @media(max-width:767px){.portal-grid{grid-template-columns:1fr}} / ============================================================ SISTEMA DE PLACEHOLDERS DE IMAGEM ------------------------------------------------------------ Uso:

O placeholder fica SEMPRE atrás da imagem. Quando o arquivo real for colocado no caminho indicado no src, ele passa a cobrir o placeholder automaticamente — sem tocar em HTML ou CSS. Proporções: --portrait (3:4) | --card (7:5) | --wide (16:9) | --square (1:1) ============================================================ / .photo{ position:relative;display:block;overflow:hidden;margin:0; border-radius:var(--radius); background:linear-gradient(150deg,var(--gray-100) 0%,var(--gray-200) 52%,var(--gray-100) 100%) } .photo::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(115% 85% at 50% 0%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 62%) } .photo--portrait{aspect-ratio:3/4} / 3:4 (não 7:5) — os retratos reais em assets/images/equipe/ (advogados associados e equipe de apoio) chegam em 900×1200, conforme assets/images/equipe/LEIA-ME.md; um recorte 7:5 cortava boa parte do enquadramento vertical desses retratos. / .photo--card{aspect-ratio:3/4} .photo--wide{aspect-ratio:16/9} .photoimg{position:relative;z-index:3;width:100%;height:100%;object-fit:cover;display:block} / fachada-sao-sebastiao (1184×1328, retrato) é bem mais estreita que o container onde aparece (.photo--wide: 16:9 no desktop, 4:5 no mobile) — object-fit:cover cortava as bordas da fachada pra preencher a caixa. A cliente pediu a fachada inteira, sem corte — contain mostra a foto completa, com a margem neutra do próprio fundo de .photo (mesmo gradiente cinza já usado como placeholder) nos espaços sobrando, em vez de cortar prédio. / [data-foto="fachada-sao-sebastiao"] .photoimg{object-fit:contain} / sobre-escritorio (21/08/2026) — abandonada a solução de "foto dentro de card retrato": a montagem é paisagem (592×349 já aparada, ~1,70:1) e forçá-la numa caixa 4:5/16:10 sempre sobrava espaço vazio (cover cortava, contain deixava faixas). Em vez disso, o container passa a ter a MESMA proporção da própria montagem — cover preenche 100% da caixa sem cortar nada, porque a caixa agora tem o formato da foto, não o contrário. Mesmo raciocínio já usado nos retratos dos sócios (.lp-heromedia .photo em socios.css): a moldura segue a foto, a foto não é espremida numa moldura genérica. Acabamento clonado 1:1 de .lp-heromedia .photo (mesmo arquivo, linha ~220): border 1px sutil (essa é a única diferença real que .sobremedia não tinha) + a MESMA sombra Nível B de duas camadas que .sobremedia já usa (herdada de style.css, sem mudança) + o MESMO corner-cut assimétrico (já herdado da classe .corner-cut--img no HTML, sem mudança). Sem hover/tilt, de propósito — inspecionado o componente de referência (.lp-heromedia .photo) e ele também não tem: fotos reais ficam com sombra estática nesta family toda do site (.sobremedia/.equipe-introphoto/.unit-blockmedia .photo/ retratos de sócio), só CARDS de dado (.lp-fact etc.) inclinam no hover — inventar um tilt aqui quebraria esse padrão, não o reproduziria. / .sobremedia[data-foto="sobre-escritorio"]{ aspect-ratio:592/349; border:1px solid rgba(26,26,26,.08) } [data-foto="sobre-escritorio"] .photoimg{object-fit:cover;object-position:50% 50%} / Quando a foto real é publicada no manifesto (assets/js/fotos.js), o script injeta a imagem e o placeholder sai de cena. / .photo.has-foto .photoph{display:none} .photoph{ position:absolute;inset:0;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md); padding:var(--space-md);text-align:center } / Silhueta de busto profissional, desenhada em CSS puro (sem imagem externa) / .photoph-figure{position:relative;display:block;width:58px;height:58px;opacity:.55} .photoph-figure::before{ content:'';position:absolute;left:50%;top:2px;width:24px;height:24px; transform:translateX(-50%);border:1.5px solid var(--gray-500);border-radius:50% } .photoph-figure::after{ content:'';position:absolute;left:50%;bottom:0;width:48px;height:28px; transform:translateX(-50%);border:1.5px solid var(--gray-500); border-bottom:none;border-radius:24px 24px 0 0 } .photoph-label{ display:inline-block;font-family:var(--font-body);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--gray-600); background:rgba(255,255,255,.75);border:1px solid var(--gray-300); padding:5px 12px;border-radius:999px;line-height:1.2 } .photo--wide .photoph-figure{width:70px;height:70px} @media(max-width:767px){ .photoph-figure{width:48px;height:48px} .photoph-label{font-size:10px;padding:4px 10px;letter-spacing:.1em} } / Galeria: enquanto a foto real não é publicada no manifesto, o item mostra o mesmo placeholder premium e não abre o lightbox. / .gallery-item:not(.has-foto){pointer-events:none} .gallery-item:not(.has-foto) .gallery-itemoverlay{display:none} .gallery-item:not(.has-foto)::after{ content:'Imagem institucional';position:absolute;inset:0; display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px; font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-600);z-index:0; background:linear-gradient(150deg,var(--gray-100) 0%,var(--gray-200) 52%,var(--gray-100) 100%) } .gallery-itemph{ position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center } .gallery-item.has-foto .gallery-itemph{display:none} / ============================================================ Sócios — vitrine editorial (Fase 2) Substitui os cards genéricos: retratos grandes, ritmo alternado (card do meio desce), nome/frase sempre legíveis (não dependem de hover — funciona em touch), hover só reforça. Card inteiro é um link único para a landing page do sócio. ============================================================ / .socios-showcase{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl); max-width:var(--container);margin:0 auto } .socio-card{ position:relative;display:block;overflow:hidden;border-radius:10px; aspect-ratio:5/6; / Sombra de contato reforçada (3ª rodada, 19/08/2026) — a receita anterior (4/16px, alfa .12) media a mesma "prova de zoom real no Chrome" que os outros cards: sombra difusa demais pra registrar contra o véu da página. Blur menor, alfa mais alto, mesma pegada. / box-shadow:0 3px 10px -4px rgba(26,26,26,.20),0 16px 30px -18px rgba(26,26,26,.22); transition:box-shadow .35s ease,transform .35s ease } .socio-card--2{margin-top:var(--space-2xl)} / !important no transform: mesmo achado do bloco de cards — .socio-card vive em ".socios-showcase stagger", cujo ".js .stagger.visible>" (3 classes) sempre superou a especificidade de ".socio-card:hover" (2 classes) e cancelava essa elevação — bug pré-existente (bem antes desta rodada), corrigido aqui. / .socio-card:hover,.socio-card:focus-visible{ box-shadow:0 4px 14px -4px rgba(26,26,26,.26),0 28px 52px -20px rgba(26,26,26,.32);transform:translateY(-4px)!important } /* No escuro, a sombra escura sozinha não teria contraste suficiente contra o fundo já escuro da seção — por isso o anel de luz fino (não halo) continua marcando a borda do card contra o fundo texturizado, agora com a foto em cor real (grayscale removido) por baixo do gradiente escuro do painel. / [data-theme="dark"] .socio-card{ box-shadow:0 0 0 1px rgba(255,255,255,.06),0 3px 10px -4px rgba(0,0,0,.4),0 16px 30px -18px rgba(0,0,0,.5) } [data-theme="dark"] .socio-card:hover,[data-theme="dark"] .socio-card:focus-visible{ box-shadow:0 0 0 1px rgba(255,255,255,.1),0 4px 14px -4px rgba(0,0,0,.5),0 28px 52px -20px rgba(0,0,0,.6) } / isolation:isolate corrige um bug real encontrado nesta rodada (confirmado ao vivo, não só lendo código): ".photoimg" tem z-index:3 (regra global da figura .photo, pensada pra ficar acima do PRÓPRIO placeholder da figura). Sem isolar, ".photo.socio-card photo" não cria contexto de empilhamento próprio (position:absolute sem z-index não basta), então o z-index:3 da imagem "escapava" pra competir direto com os irmãos dela dentro de .socio-card — o gradiente escuro (::after, z-index:1) e o painel de texto (.socio-cardpanel, z-index:2) — e a foto pintava por cima dos dois, escondendo nome/cargo/frase/CTA no desktop de forma intermitente (variava com o momento do repintar do navegador). isolation:isolate contém o z-index:3 da imagem DENTRO da própria figura, sem competir lá fora. / .photo.socio-cardphoto{position:absolute;inset:0;margin:0;border-radius:0;width:100%;height:100%;isolation:isolate} .socio-cardphoto .photoimg{ / Grayscale removido a pedido da cliente (rodada de padronização) — a foto aparece em cor real desde o carregamento, não só no hover. contrast(1.02) é um ajuste de cor independente do P&B, mantido. / filter:contrast(1.02); transition:transform .6s cubic-bezier(.16,1,.3,1) } .socio-card:hover .socio-cardphoto .photoimg,.socio-card:focus-visible .socio-cardphoto .photoimg{ transform:scale(1.045) } .socio-card::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(13,12,11,.92) 0%,rgba(13,12,11,.6) 30%,rgba(13,12,11,.08) 58%,transparent 72%) } .socio-cardpanel{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:var(--space-lg) var(--space-lg); display:flex;flex-direction:column;align-items:flex-start } .socio-cardname{ font-family:var(--font-head);font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.01em; color:var(--white);margin-bottom:6px;order:-1 } .socio-cardrole{ display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.7);margin-bottom:6px } / .socio-cardoab só existe pro card compacto do mobile (grid de 3 colunas) — no desktop o dado já está dentro de .socio-cardrole ("Sócio-fundador · OAB/SP ..."); repetir o texto todo não cabe em 3 colunas estreitas, por isso o número sozinho, num elemento à parte. / .socio-cardoab{display:none} .socio-cardcta-text--short{display:none} .socio-cardphrase{ font-family:var(--font-head);font-style:italic;font-size:13px;line-height:1.5; color:rgba(255,255,255,.82);margin-bottom:var(--space-md);max-width:26ch } .socio-cardcta{ display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600; letter-spacing:.02em;color:var(--white); padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08);backdrop-filter:blur(2px); transition:border-color .25s ease,background-color .25s ease,gap .25s ease } .socio-cardcta svg{transition:transform .25s ease} .socio-card:hover .socio-cardcta,.socio-card:focus-visible .socio-cardcta{ border-color:var(--white);background:var(--white);color:var(--black);gap:10px } .socio-card:hover .socio-cardcta svg,.socio-card:focus-visible .socio-cardcta svg{transform:translateX(3px)} .socio-card:focus-visible{outline:2px solid var(--red);outline-offset:3px} @media(max-width:1023px){ .socios-showcase{grid-template-columns:repeat(3,1fr);gap:var(--space-md)} .socio-card--2{margin-top:var(--space-lg)} .socio-cardname{font-size:20px} .socio-cardphrase{font-size:12px} } / ---- Sócios no mobile: grid de 3 colunas compacto ---- Ajuste de 18/08/2026. Antes, abaixo de 767px o grid virava 1 coluna e cada sócio ocupava um card de aspect-ratio 4/5 em largura quase total da tela — 3 cards empilhados somavam bastante rolagem antes mesmo de chegar aos Associados. Agora mantém a MESMA lógica visual do desktop (3 colunas, foto de cada sócio, link pro perfil individual), só que compacto: foto pequena em cima, e nome + OAB + "Saiba mais" abaixo dela (não mais sobrepostos em painel com gradiente — não cabe legível em ~110px de largura de coluna). / @media(max-width:767px){ .socios-showcase{grid-template-columns:repeat(3,1fr);gap:10px;max-width:none} .socio-card--2{margin-top:0} .socio-card{ aspect-ratio:auto;display:flex;flex-direction:column; border-radius:8px;box-shadow:none } .socio-card:hover,.socio-card:focus-visible{box-shadow:none;transform:none} .socio-card::after{display:none} .photo.socio-cardphoto{position:relative;inset:auto;aspect-ratio:3/4;border-radius:8px} .socio-cardphoto .photoimg{filter:none} .socio-card:hover .socio-cardphoto .photoimg,.socio-card:focus-visible .socio-cardphoto .photoimg{ transform:none;filter:none } .socio-cardpanel{ position:static;padding:8px 2px 0;align-items:center;text-align:center } .socio-cardname{font-size:12.5px;color:var(--black);margin-bottom:2px;line-height:1.25} / Refino 02/09/2026: em 3 colunas de ~105px, "Dra. Ana Luisa de Carvalho Sanchez" ocupa 4 linhas contra 2 dos outros dois nomes. Como o grid iguala a altura dos cards, a sobra saia da FOTO dela (140px contra 171px) e a fileira ficava visivelmente torta. Reservar a mesma altura de nome nos tres devolve fotos iguais; OAB e "Saiba mais" ja estavam alinhados. / .socio-cardname{min-height:calc(1.25em 4)} .socio-cardrole,.socio-cardphrase{display:none} .socio-cardoab{ display:block;font-size:10px;font-weight:500;color:var(--gray-500);margin-bottom:6px } .socio-cardcta{ position:static;font-size:11px;font-weight:600;color:var(--red); padding:0;border:none;background:none;backdrop-filter:none } .socio-card:hover .socio-cardcta,.socio-card:focus-visible .socio-cardcta{ border:none;background:none;color:var(--red-dark) } .socio-cardcta-text--full{display:none} .socio-cardcta-text--short{display:inline} /* Achado desta rodada: no card compacto do mobile, o painel vira estático (sem o gradiente escuro que dava contraste no desktop — ver ".socio-card::after{display:none}" acima) — mas a cor do nome ficou fixa em var(--black) (#1A1A1A), sem versão pro tema escuro. Sobre o fundo escuro da seção (--veil em gray-800), preto sobre quase-preto ficava ilegível. OAB também sobe de tom pra manter 4.5:1 de contraste (mesmo padrão já usado no resto do tema escuro pra texto secundário). CTA não precisa de ajuste — já usa var(--red), que o tema escuro já clareia sozinho. / [data-theme="dark"] .socio-cardname{color:var(--gray-50)} [data-theme="dark"] .socio-cardoab{color:var(--gray-400)} } @media(prefers-reduced-motion:reduce){ .socio-card,.socio-cardphoto .photoimg,.socio-cardcta,.socio-cardcta svg{transition:none} .socio-card:hover{transform:none!important} } / ============================================================ UNIDADES / ESCRITÓRIOS Estrutura preparada para adicionar ou remover profissionais: basta acrescentar/remover um
na lista .unit-team da unidade correspondente. ============================================================ / .unit-block{ display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:var(--space-2xl);align-items:start; padding-bottom:var(--space-3xl);margin-bottom:var(--space-3xl); border-bottom:1px solid var(--gray-200) } .unit-block:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0} .unit-block:nth-child(even) .unit-blockmedia{order:2} .unit-blockname{ font-family:var(--font-head);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--black); margin:var(--space-lg) 0 var(--space-xs) } .unit-blocktag{ display:inline-block;font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--red);background:rgba(155,27,48,.06); padding:4px 10px;border-radius:var(--radius) } .unit-blockdesc{font-size:14px;line-height:1.7;color:var(--gray-500);margin-bottom:var(--space-lg)} .unit-blockdata{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)} .unit-blockrow{display:flex;gap:var(--space-sm);align-items:flex-start;font-size:14px;color:var(--gray-600);line-height:1.5} .unit-blockrow svg{flex-shrink:0;color:var(--red);margin-top:3px} .unit-blockrow a{color:var(--gray-700);font-weight:500} .unit-blockrow a:hover{color:var(--red)} .unit-blockactions{display:flex;gap:var(--space-sm);flex-wrap:wrap} / ---- Vídeo da unidade (19/08/2026) ---- Desktop/tablet (≥768px): foto e vídeo ficam simplesmente empilhados, nesta ordem, dentro do MESMO lugar onde a foto já estava — o vídeo é só mais um bloco depois dela, sem carrossel. Mobile (≤767px): os dois viram slides de um carrossel de 2 telas (".unit-mediatrack" desliza, mesma técnica do carrossel da Hero — ver .herotrack). Fica a cargo da IIFE "Unidades: vídeo da fachada" em script.js: troca o slide, dá play/pause e só carrega o .mp4 (troca data-src→src) quando a unidade entra perto da área visível — nada baixa antes disso. / .unit-media{position:relative} .unit-mediatrack{display:block} .unit-mediaslide--video{margin-top:var(--space-md)} .unit-mediadots{display:none} .unit-media__hint{display:none} / Desktop/tablet (20/08/2026): o vídeo passou a ter uma capa ("cover") clicável por cima — foto de capa + ícone de play + legenda, no mesmo espaço/proporção que o