/* ═══════════════════════════════════════════════════════════════
ESCRITORIO — folha unica da pagina institucional e dos perfis
═══════════════════════════════════════════════════════════════
Uma folha para as TRES paginas do escritorio: o hub em
`/escritorio/` e os dois perfis em `/escritorio/advogados/`.
Nao contem nenhum valor de cor da marca: consome os tokens que a
pagina declara carregando, ANTES desta, o arquivo de paleta. E a
irma de `area-pages.css` e de `lead-pages.css`, que fazem o mesmo
pelos hubs de area e pelas paginas de especialidade.
Uso na pagina — a paleta primeiro, a estrutura depois:
...
<- o hub
<- os perfis
O `` PRECISA da classe: as duas metades desta folha moram no
mesmo arquivo e disputam os mesmos nomes genericos — `h1`, `footer`,
`.card`, `.link`, `.chip`. Cada regra e escopada por uma das duas
classes, entao sem ela a pagina fica sem estilo nenhum.
── De onde veio ────────────────────────────────────────────────
Da unificacao de `escritorio/escritorio-pages.css` (1181 linhas) e
`escritorio/advogados/advogado-pages.css` (427). As duas moravam ao
lado das paginas, com `:root` proprio, e eram as ultimas folhas do
site fora de `assets/css/` — o que tambem significava duas copias
da paleta institucional, digitadas a mao, livres para divergir do
resto do site sem que nada acusasse.
Nenhuma medida mudou na unificacao. O que mudou foi de onde a cor
vem: os `:root` locais sairam e cada `var(--navy)` virou
`var(--marca)`, cada `rgba(3,28,45,0.12)` virou
`rgb(var(--tinta-rgb) / 0.12)`, e assim por diante.
── Os seletores de `.js` ───────────────────────────────────────
A classe `js` mora no ``, ACIMA do ``. Por isso as
regras de animacao leem `html.js body.page-escritorio .revela`, e
nao `body.page-escritorio .js .revela` — que nunca casaria.
── Os nomes de classe ──────────────────────────────────────────
`.faixa--navy` e `.btn--navy` guardam o nome de uma cor, como o
`.sec--navy` das folhas irmas. O nome ficou; a cor que ele pinta
agora vem de `--marca`, e acompanha a paleta que a pagina carregar.
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* ── TRILHO DE CONTEUDO ───────────────────────────────────────
A largura util da pagina e a margem que a centraliza. Mesmo
par de `site.css`, com os mesmos valores: as duas paginas
precisam parar no mesmo x, porque o visitante chega no hub
vindo da home. O `100%` dentro de um custom property so e
resolvido no elemento que o usa, entao `--gutter` mede a
largura da propria faixa — por isso serve para todas. */
--coluna: 1240px;
--gutter: max(6vw, calc((100% - var(--coluna)) / 2));
/* ── O QUE A PALETA COMPARTILHADA NAO TEM ─────────────────────
Quatro papeis que so existem aqui. Ficam nesta folha, e nao em
`cores-institucional.css`, porque nenhuma outra pagina os usa:
leva-los para a paleta obrigaria as cinco areas institucionais
a carregar token que nao consomem. No dia em que o escritorio
precisar de paleta propria, este bloco e o que muda de casa. */
/* Pantone 7505 C. Marca o filete sob os titulos das faixas
CLARAS, o numero do metodo e o papel do advogado no cartao da
equipe. NAO serve de acento sobre o navy: ali rende 1,9:1.
Sobre as faixas claras chega a 5,6:1. Onde o navy e que e o
fundo, quem separa e `--claro` — veja `.faixa--navy h2::after`. */
--filete: #864b34;
/* O 296 C fechado, so no rodape do hub. A paleta tem `--rodape`,
que e o 296 C puro; aqui o rodape assenta um degrau abaixo da
faixa navy que vem logo acima dele, e sem essa diferenca as
duas superficies encostam sem costura visivel. */
--rodape-fundo: #02141f;
/* Corpo de texto sobre superficie escura, em duas forcas. Sao
branco em transparencia, e nao um cinza opaco, porque passam
por cima de fotografia no hero e no fundo dos perfis: o alfa
deixa a imagem respirar por baixo, o opaco a apagaria. */
--sobre-escuro: rgb(var(--branco-rgb) / 0.78);
--sobre-escuro-fraco: rgb(var(--branco-rgb) / 0.5);
/* ── FOTOGRAFIA DE FUNDO ──────────────────────────────────────
Nao e cor, mas muda junto com a identidade da pagina, entao
vira token pelo mesmo criterio de `--foto-equipe` na paleta: a
folha de estrutura nao guarda caminho de arquivo.
Caminho ABSOLUTO, sempre. Esta folha vive em `/assets/css/`, e
um caminho relativo passaria a resolver a partir dali. Note que
este arquivo NAO e `assets/images/fundo.jpg`: sao fotos
diferentes, apesar do nome igual. */
--foto-capa: url('/escritorio/images/fundo.jpg');
/* ── ACABAMENTO COMPARTILHADO ────────────────────────────────
Mesmo vocabulário visual das folhas irmãs: três degraus de
raio, três de elevação, duas curvas de movimento e um anel de
foco consistente entre hub, perfis e páginas de área/lead. */
--r-1: 10px;
--r-2: 16px;
--r-3: 22px;
--sombra-1: 0 1px 2px rgb(var(--tinta-rgb) / 0.04),
0 2px 8px rgb(var(--tinta-rgb) / 0.05);
--sombra-2: 0 2px 4px rgb(var(--tinta-rgb) / 0.04),
0 14px 32px rgb(var(--tinta-rgb) / 0.10);
--sombra-3: 0 4px 10px rgb(var(--tinta-rgb) / 0.06),
0 28px 64px rgb(var(--tinta-rgb) / 0.18);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
--t-1: 0.18s;
--t-2: 0.34s;
--anel: 0 0 0 3px rgb(var(--marca-rgb) / 0.22);
--anel-claro: 0 0 0 3px rgb(var(--branco-rgb) / 0.35);
}
/* ═══════════════════════════════════════════════════════════════
PARTE 1 — O HUB (`/escritorio/`) body.page-escritorio
═══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
body.page-escritorio {
font-family: var(--font-texto);
color: var(--tinta);
background: var(--branco);
-webkit-font-smoothing: antialiased;
}
body.page-escritorio img { display: block; max-width: 100%; }
body.page-escritorio a { color: inherit; text-decoration: none; }
body.page-escritorio [id] { scroll-margin-top: 24px; }
/* ─── LINK DE SALTO ────────────────────────────────────────*/
body.page-escritorio .pular {
position: absolute; left: -9999px; z-index: 100;
background: var(--filete); color: var(--branco);
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
font-size: 0.9rem; padding: 14px 22px;
}
body.page-escritorio .pular:focus { left: 24px; top: 24px; }
/* ─── FAIXAS ───────────────────────────────────────────────
Coluna de 1240px: o padding lateral cresce para centrar o
conteudo, entao os titulos alinham de uma secao para a outra. */
body.page-escritorio .shell { max-width: var(--coluna); margin: 0 auto; }
body.page-escritorio .faixa { padding: 96px 6vw; }
@media (min-width: 1024px) {
body.page-escritorio .faixa,
body.page-escritorio .credenciais,
body.page-escritorio .rodape {
padding-inline: var(--gutter);
}
}
body.page-escritorio .faixa--branca { background: var(--branco); }
body.page-escritorio .faixa--navy { background: var(--marca); color: var(--branco); }
/* ─── TIPOGRAFIA DE SECAO ──────────────────────────────────*/
body.page-escritorio .eyebrow {
font-size: 1.06rem; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 16px;
}
body.page-escritorio .faixa--navy .eyebrow { color: var(--claro); }
body.page-escritorio h1,
body.page-escritorio h2,
body.page-escritorio h3 { font-family: var(--font-titulo); font-weight: 300; letter-spacing: -0.015em; }
body.page-escritorio .faixa h2 {
font-size: clamp(2.3rem, 3vw, 2.9rem);
line-height: 1.18;
color: var(--marca);
}
body.page-escritorio .faixa--navy h2 { color: var(--branco); }
body.page-escritorio .faixa h2::after {
content: ''; display: block; width: 56px; height: 1px;
background: var(--filete); margin-top: 26px;
}
/* sobre o navy o terracota afunda (1,9:1): quem separa e o cinza claro */
body.page-escritorio .faixa--navy h2::after { background: var(--claro); }
/* cabeca de secao: titulo a esquerda, texto de apoio a direita */
body.page-escritorio .cabeca {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
gap: 24px 60px;
align-items: end;
margin-bottom: 64px;
}
body.page-escritorio .cabeca p { font-size: 1.32rem; line-height: 1.8; color: var(--tinta-suave); }
body.page-escritorio .faixa--navy .cabeca p { color: var(--sobre-escuro); }
body.page-escritorio .cabeca--equipe {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
align-items: start;
margin-bottom: 72px;
}
body.page-escritorio .cabeca--equipe > div {
max-width: 820px;
}
body.page-escritorio .cabeca--equipe h2 {
max-width: none;
white-space: nowrap;
text-wrap: balance;
}
body.page-escritorio .cabeca--equipe > p {
max-width: none;
width: 100%;
font-size: 1.32rem;
line-height: 1.8;
}
/* ─── BOTOES ───────────────────────────────────────────────*/
body.page-escritorio .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: fit-content;
min-height: 54px; padding: 0 34px;
font-size: 1.06rem; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; cursor: pointer; border: none;
border-radius: var(--r-1);
box-shadow: var(--sombra-1);
transition: background var(--t-1) var(--ease),
color var(--t-1) var(--ease),
border-color var(--t-1) var(--ease),
transform var(--t-2) var(--ease-saida),
box-shadow var(--t-2) var(--ease-saida);
}
body.page-escritorio .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
body.page-escritorio .btn:hover {
transform: translateY(-2px);
box-shadow: var(--sombra-2);
}
body.page-escritorio .btn:active {
transform: translateY(0);
box-shadow: var(--sombra-1);
}
body.page-escritorio .btn:focus-visible {
outline: 2px solid var(--marca);
outline-offset: 2px;
box-shadow: var(--anel);
}
body.page-escritorio .btn--navy { background: var(--marca); color: var(--branco); }
body.page-escritorio .btn--navy:hover { background: var(--marca-hover); }
/* sobre a faixa navy o botao inverte, como a home faz no FAQ */
body.page-escritorio .btn--claro { background: var(--branco); color: var(--marca); }
body.page-escritorio .btn--claro:hover { background: var(--superficie); }
body.page-escritorio .btn--claro:focus-visible {
outline-color: var(--branco);
box-shadow: var(--anel-claro);
}
body.page-escritorio .btn--linha {
background: transparent; color: var(--branco);
border: 1px solid rgb(var(--claro-rgb) / 0.55);
box-shadow: none;
}
body.page-escritorio .btn--linha:hover { background: var(--claro); color: var(--marca); }
body.page-escritorio .btn--linha:focus-visible {
outline-color: var(--branco);
box-shadow: var(--anel-claro);
}
/* ─── BARRA DO TOPO ────────────────────────────────────────
Sobre a foto, transparente: logo a esquerda, navegacao a
direita. Nao e `sticky` — acompanha a capa e sai com ela. */
/* So o logotipo restou aqui: a navegacao do topo foi removida a
pedido. Quem navega usa o logo (volta para a home) e os links
do rodape. */
body.page-escritorio .topo {
position: absolute; top: 0; left: 0; right: 0; z-index: 4;
display: flex; align-items: center;
padding: 34px 6vw;
}
body.page-escritorio .topo__logo img {
height: 40px; width: auto;
display: block;
opacity: 1;
filter: none;
mix-blend-mode: normal;
}
/* ─── CAPA ─────────────────────────────────────────────────
Foto sangrando, texto direto sobre ela — sem card. O veu
existe porque a foto tem picos claros (max 234/255) e o
titulo e branco: sem ele o contraste cairia nas colunas. */
body.page-escritorio .capa {
position: relative; overflow: hidden;
min-height: 100vh; min-height: 100svh;
display: flex; align-items: center;
padding: 150px 6vw 110px;
background: var(--marca);
}
body.page-escritorio .capa__bg {
position: absolute; inset: 0;
background: var(--foto-capa) center/cover no-repeat;
}
body.page-escritorio .capa__bg::after {
content: ''; position: absolute; inset: 0;
background:
/* faixa superior: a foto tem a claraboia justamente atras da
navegacao, e ali o branco caia para 2,8:1 */
linear-gradient(to bottom, rgb(var(--tinta-rgb) / 0.78) 0%, rgb(var(--tinta-rgb) / 0.30) 14%, transparent 24%),
linear-gradient(to right, rgb(var(--tinta-rgb) / 0.82) 0%, rgb(var(--tinta-rgb) / 0.52) 55%, rgb(var(--tinta-rgb) / 0.42) 100%),
linear-gradient(to top, rgb(var(--tinta-rgb) / 0.55) 0%, transparent 45%);
}
body.page-escritorio .capa__inner {
position: relative;
z-index: 1;
max-width: var(--coluna);
margin: 0 auto;
width: 100%;
padding-right: 12vw;
}
body.page-escritorio .capa h1 {
font-size: clamp(3.3rem, 6.4vw, 5.5rem);
font-weight: 300; line-height: 1.06; letter-spacing: -0.02em;
color: var(--branco); margin-bottom: 22px;
}
body.page-escritorio .capa__titulo {
max-width: none;
white-space: nowrap;
text-shadow: 0 14px 34px rgb(var(--sombra-rgb) / 0.28);
}
body.page-escritorio .capa__titulo-linha {
display: inline-block;
}
body.page-escritorio .capa__tag span {
display: block;
}
body.page-escritorio .capa__titulo-linha--aux {
margin-left: 0.28ch;
}
body.page-escritorio .capa__tag {
position: relative;
padding-left: 24px;
}
body.page-escritorio .capa__tag::before {
content: '';
position: absolute;
left: 0;
top: 0.32em;
width: 1px;
height: calc(100% - 0.64em);
background: linear-gradient(to bottom, rgb(var(--branco-rgb) / 0.9), rgb(var(--branco-rgb) / 0.18));
transform-origin: top;
}
body.page-escritorio .capa__tag {
font-size: clamp(1.24rem, 1.7vw, 1.6rem);
line-height: 1.6; color: rgb(var(--branco-rgb) / 0.88); max-width: 46ch;
}
html.js body.page-escritorio .capa__titulo-linha,
html.js body.page-escritorio .capa__tag,
html.js body.page-escritorio .capa__tag::before {
opacity: 0;
}
html.js body.page-escritorio .capa__titulo-linha {
transform: translate3d(0, 42px, 0);
filter: blur(8px);
}
html.js body.page-escritorio .capa__tag {
transform: translate3d(0, 28px, 0);
filter: blur(6px);
}
html.js body.page-escritorio .capa__tag::before {
transform: scaleY(0.2);
}
html.js.hero-animado body.page-escritorio .capa__titulo-linha {
animation: tituloHero 1.15s cubic-bezier(.19,1,.22,1) forwards;
}
html.js.hero-animado body.page-escritorio .capa__titulo-linha--aux {
animation-delay: 0.16s;
}
html.js.hero-animado body.page-escritorio .capa__tag {
animation: subtituloHero 1s cubic-bezier(.22,.61,.36,1) 0.42s forwards;
}
html.js.hero-animado body.page-escritorio .capa__tag::before {
animation: fileteHero 0.8s cubic-bezier(.19,1,.22,1) 0.52s forwards;
}
@keyframes tituloHero {
0% {
opacity: 0;
transform: translate3d(0, 42px, 0);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes subtituloHero {
0% {
opacity: 0;
transform: translate3d(0, 28px, 0);
filter: blur(6px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes fileteHero {
0% {
opacity: 0;
transform: scaleY(0.2);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
/* ─── CREDENCIAIS ──────────────────────────────────────────*/
body.page-escritorio .credenciais { padding: 56px 6vw; background: var(--superficie); }
body.page-escritorio .credenciais__grid {
max-width: var(--coluna); margin: 0 auto;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px;
}
body.page-escritorio .credencial {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: center;
text-align: left;
width: 100%;
}
body.page-escritorio .credencial--expansivel {
display: block;
width: 100%;
}
body.page-escritorio .credencial__botao {
width: 100%;
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
}
body.page-escritorio .credencial__link {
width: 100%;
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: center;
color: inherit;
text-align: left;
}
body.page-escritorio .credencial__conteudo {
min-width: 0;
}
body.page-escritorio .credencial__ic {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: var(--branco); border: 1px solid rgb(var(--tinta-rgb) / 0.12);
display: flex; align-items: center; justify-content: center;
color: var(--marca);
box-shadow: var(--sombra-1);
transition: background var(--t-1) var(--ease),
color var(--t-1) var(--ease),
border-color var(--t-1) var(--ease),
transform var(--t-2) var(--ease-saida),
box-shadow var(--t-2) var(--ease-saida);
}
body.page-escritorio .credencial__ic svg { width: 20px; height: 20px; }
body.page-escritorio .credencial b {
display: block; font-family: var(--font-titulo); font-weight: 400;
font-size: 1.32rem; color: var(--marca); margin-bottom: 4px; line-height: 1.25;
}
body.page-escritorio .credencial span { font-size: 1.14rem; line-height: 1.5; color: var(--tinta-suave); }
body.page-escritorio .credencial__mapa-miniatura {
position: relative;
overflow: hidden;
width: 100%;
min-height: 104px;
border-radius: var(--r-2);
border: 1px solid rgb(var(--tinta-rgb) / 0.12);
background: var(--superficie);
box-shadow: var(--sombra-1);
}
body.page-escritorio .credencial__painel-mapa {
display: block;
text-decoration: none;
width: 100%;
}
body.page-escritorio .credencial__seta {
width: 14px;
height: 14px;
margin-top: 4px;
flex-shrink: 0;
color: var(--tinta-suave);
transition: transform var(--t-2) var(--ease-saida), color var(--t-1) var(--ease);
}
body.page-escritorio .credencial__painel {
max-height: 0;
overflow: hidden;
opacity: 0;
width: 100%;
margin: 0;
transition: max-height var(--t-2) var(--ease-saida),
opacity var(--t-1) var(--ease),
margin-top var(--t-1) var(--ease);
}
body.page-escritorio .credencial__painel-conteudo {
margin-top: 14px;
padding: 16px 18px;
border-radius: var(--r-2);
background: rgb(var(--branco-rgb) / 0.72);
border: 1px solid rgb(var(--tinta-rgb) / 0.1);
box-shadow: var(--sombra-2);
}
body.page-escritorio .credencial__painel ul {
list-style: none;
display: grid;
gap: 10px;
}
body.page-escritorio .credencial__painel li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 8px 0;
font-size: 1.02rem;
line-height: 1.5;
color: var(--tinta-suave);
}
body.page-escritorio .credencial__painel li.credencial__painel-item--acao {
justify-content: flex-start;
}
body.page-escritorio .credencial__painel-nome {
min-width: 0;
flex: 1;
}
body.page-escritorio .credencial__painel-oab {
white-space: nowrap;
flex-shrink: 0;
}
body.page-escritorio .credencial__painel strong {
color: var(--marca);
font-weight: 700;
}
body.page-escritorio .credencial__painel a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgb(var(--tinta-rgb) / 0.28);
text-underline-offset: 0.18em;
transition: color var(--t-1) var(--ease), text-decoration-color var(--t-1) var(--ease);
}
body.page-escritorio .credencial__painel .credencial__painel-nome {
color: var(--marca);
}
body.page-escritorio .credencial__painel a.credencial__painel-nome {
display: block;
width: 100%;
text-decoration: none;
font-weight: 600;
}
body.page-escritorio .credencial__painel a:hover,
body.page-escritorio .credencial__painel a:focus-visible {
color: var(--marca);
text-decoration-color: currentColor;
}
body.page-escritorio .credencial__painel li:hover a.credencial__painel-nome,
body.page-escritorio .credencial__painel li:focus-within a.credencial__painel-nome {
text-decoration: underline;
text-decoration-color: currentColor;
}
body.page-escritorio .credencial--aberta .credencial__ic,
body.page-escritorio .credencial__link:hover .credencial__ic,
body.page-escritorio .credencial__link:focus-visible .credencial__ic,
body.page-escritorio .credencial__botao:hover .credencial__ic,
body.page-escritorio .credencial__botao:focus-visible .credencial__ic {
background: var(--marca);
border-color: var(--marca);
color: var(--branco);
transform: scale(1.04);
}
body.page-escritorio .credencial--aberta .credencial__seta,
body.page-escritorio .credencial__botao:hover .credencial__seta,
body.page-escritorio .credencial__botao:focus-visible .credencial__seta {
color: var(--marca);
}
body.page-escritorio .credencial--aberta .credencial__seta {
transform: rotate(180deg);
}
body.page-escritorio .credencial--aberta .credencial__painel {
opacity: 1;
max-height: 420px;
margin-top: 14px;
}
body.page-escritorio .credencial__botao:focus-visible {
outline: 2px solid var(--marca);
outline-offset: 8px;
border-radius: var(--r-2);
box-shadow: var(--anel);
}
body.page-escritorio .credencial__link:focus-visible {
outline: 2px solid var(--marca);
outline-offset: 8px;
border-radius: var(--r-2);
box-shadow: var(--anel);
}
body.page-escritorio .credencial__link:hover .credencial__mapa-miniatura,
body.page-escritorio .credencial__link:focus-visible .credencial__mapa-miniatura {
border-color: rgb(var(--tinta-rgb) / 0.2);
box-shadow: inset 0 1px 0 rgb(var(--branco-rgb) / 0.65), var(--sombra-1);
}
body.page-escritorio .credencial__painel-mapa:hover .credencial__mapa-miniatura,
body.page-escritorio .credencial__painel-mapa:focus-visible .credencial__mapa-miniatura {
border-color: rgb(var(--tinta-rgb) / 0.2);
box-shadow: var(--sombra-2);
}
body.page-escritorio .credencial__painel-mapa .credencial__mapa-miniatura {
aspect-ratio: 1.35 / 1;
min-height: 0;
}
body.page-escritorio .credencial__mapa-frame {
width: 100%;
height: 100%;
min-height: 240px;
border: 0;
display: block;
}
/* ─── SOBRE NÓS ────────────────────────────────────────────
Blocos empilhados, todos com a MESMA largura da secao. Foi o
que resolveu o desalinhamento: antes cada bloco tinha o seu
`max-width` (1000 no texto, 800 nos numeros, coluna fixa de 470
na cabeca) e as bordas direitas caiam em pontos diferentes.
Sem `display: contents` desta vez: ele alinhava as colunas mas
obrigava o texto corrido a caber em tres colunas de ~43
caracteres, que e medida de jornal, nao de pagina institucional. */
body.page-escritorio .sobre__titulo { max-width: none; width: 100%; }
body.page-escritorio .sobre__titulo h2 {
display: inline-block;
transform-origin: left center;
transition: transform 0.28s ease;
}
body.page-escritorio .sobre__titulo:hover h2 {
transform: scale(1.035);
}
/* o texto de apoio e um lead: medida confortavel, nao coluna */
body.page-escritorio .sobre__apoio {
font-size: 1.44rem; line-height: 1.75; color: var(--tinta-suave);
max-width: none; width: 100%; margin-top: 32px;
display: inline-block;
transform-origin: left center;
transition: transform 0.28s ease;
}
body.page-escritorio .sobre__apoio.visivel:hover,
body.page-escritorio .sobre__apoio:hover { transform: scale(1.02); }
/* a narrativa em duas colunas, largura cheia da secao */
body.page-escritorio .sobre__texto {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 44px; margin-top: 64px;
}
body.page-escritorio .sobre__texto p {
font-size: 1.22rem;
line-height: 1.82;
color: var(--tinta-suave);
padding: 30px 30px 32px;
background: linear-gradient(180deg, rgb(var(--branco-rgb) / 0.98), rgb(var(--superficie-rgb, 242 244 245) / 0.94));
border: 1px solid rgb(var(--tinta-rgb) / 0.1);
border-radius: var(--r-2);
box-shadow: var(--sombra-1);
transform-origin: left center;
transition: transform var(--t-2) var(--ease-saida),
box-shadow var(--t-2) var(--ease-saida),
border-color var(--t-1) var(--ease);
}
body.page-escritorio .sobre__texto p.visivel:hover,
body.page-escritorio .sobre__texto p:hover {
transform: translateY(-4px);
border-color: rgb(var(--marca-rgb) / 0.14);
box-shadow: var(--sombra-2);
}
/* os tres numeros, em linha, mesma largura da secao */
body.page-escritorio .meta {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px; margin-top: 72px;
padding-top: 26px; border-top: 1px solid rgb(var(--tinta-rgb) / 0.16);
}
body.page-escritorio .meta .revela {
transform-origin: left center;
transition: transform 0.28s ease;
}
body.page-escritorio .meta .revela.visivel:hover,
body.page-escritorio .meta .revela:hover {
transform: scale(1.035);
}
body.page-escritorio .meta dt {
font-family: var(--font-titulo); font-size: 1.88rem; font-weight: 400;
color: var(--marca); line-height: 1.1; margin-bottom: 6px;
}
body.page-escritorio .meta dd {
font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--tinta-suave);
}
/* os tres valores, mesma grade dos numeros — as colunas coincidem */
body.page-escritorio .valores {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px; margin-top: 64px;
}
body.page-escritorio .valor h3 {
font-size: 1.36rem; font-weight: 400; color: var(--marca); margin-bottom: 10px;
}
body.page-escritorio .valor p { font-size: 1.26rem; line-height: 1.8; color: var(--tinta-suave); }
body.page-escritorio .sobre__acao { margin-top: 64px; }
/* ─── EQUIPE ────────────────────────────────────────────────
A secao deixa de ser "dois cards iguais" e passa a ler como um
diptico editorial: retrato, ficha e narrativa no mesmo plano,
com mais contraste entre suporte visual e informacao. */
body.page-escritorio .equipe-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
body.page-escritorio .equipe-carousel {
position: relative;
}
body.page-escritorio .equipe-carousel__nav,
body.page-escritorio .equipe-carousel__dots {
display: none;
}
body.page-escritorio .equipe-carousel__botao {
border: 0;
width: 44px;
height: 44px;
border-radius: 999px;
background: rgb(var(--branco-rgb) / 0.96);
color: var(--marca);
box-shadow: var(--sombra-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--t-2) var(--ease-saida),
background var(--t-1) var(--ease),
opacity var(--t-1) var(--ease),
box-shadow var(--t-2) var(--ease-saida);
}
body.page-escritorio .equipe-carousel__botao:hover {
transform: translateY(-2px);
background: var(--branco);
box-shadow: var(--sombra-3);
}
body.page-escritorio .equipe-carousel__botao:disabled {
opacity: 0.48;
cursor: default;
}
body.page-escritorio .equipe-carousel__botao svg {
width: 18px;
height: 18px;
}
body.page-escritorio .equipe-carousel__dots {
justify-content: center;
align-items: center;
gap: 2px;
margin-top: 18px;
}
body.page-escritorio .equipe-carousel__dot {
width: 36px;
height: 30px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-1);
-webkit-tap-highlight-color: transparent;
}
body.page-escritorio .equipe-carousel__dot::after {
content: '';
width: 20px;
height: 3px;
border-radius: 999px;
background: rgb(var(--branco-rgb) / 0.38);
transition: width var(--t-2) var(--ease-saida), background var(--t-1) var(--ease);
}
body.page-escritorio .equipe-carousel__dot.is-active ~ .equipe-carousel__dot::after {
background: rgb(var(--branco-rgb) / 0.15);
}
body.page-escritorio .equipe-carousel__dot.is-active::after {
background: var(--branco);
width: 32px;
}
body.page-escritorio .equipe-carousel__dot:focus-visible {
outline: 2px solid var(--branco);
outline-offset: 2px;
box-shadow: var(--anel-claro);
}
body.page-escritorio .equipe-card {
display: grid;
grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.25fr);
min-height: 100%;
background:
linear-gradient(180deg, rgb(var(--branco-rgb) / 0.08), rgb(var(--branco-rgb) / 0.02)),
linear-gradient(135deg, rgb(var(--branco-rgb) / 0.04), transparent 45%);
border: 1px solid rgb(var(--branco-rgb) / 0.14);
border-radius: var(--r-3);
overflow: hidden;
color: var(--tinta);
box-shadow: 0 24px 56px rgb(var(--sombra-rgb) / 0.18);
transition: transform var(--t-2) var(--ease-saida),
border-color var(--t-1) var(--ease),
box-shadow var(--t-2) var(--ease-saida);
}
body.page-escritorio .equipe-card__midia {
position: relative;
z-index: 0;
min-height: 100%;
min-height: 520px;
padding: 0;
background:
radial-gradient(circle at 50% 18%, rgb(var(--branco-rgb) / 0.18), transparent 38%),
linear-gradient(180deg, rgb(var(--branco-rgb) / 0.08), rgb(var(--tinta-rgb) / 0.14));
display: flex;
align-items: stretch;
justify-content: center;
overflow: hidden;
}
body.page-escritorio .equipe-card__midia::after {
content: '';
position: absolute;
inset: auto 28px 26px;
height: 1px;
background: linear-gradient(to right, transparent, rgb(var(--branco-rgb) / 0.24), transparent);
}
body.page-escritorio .equipe-card__foto {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center top;
filter:
saturate(1.02)
contrast(1.02);
transition: transform var(--t-2) var(--ease-saida), filter var(--t-2) var(--ease-saida);
}
body.page-escritorio .equipe-card__corpo {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 24px;
padding: 34px 34px 36px;
background:
linear-gradient(180deg, rgb(var(--branco-rgb) / 0.98), rgb(var(--superficie-rgb, 242 244 245) / 0.96));
border-left: 1px solid rgb(var(--tinta-rgb) / 0.08);
transition: box-shadow var(--t-2) var(--ease-saida),
border-color var(--t-1) var(--ease);
}
body.page-escritorio .equipe-card:hover {
transform: translateY(-6px);
border-color: rgb(var(--branco-rgb) / 0.24);
box-shadow: 0 30px 70px rgb(var(--sombra-rgb) / 0.24);
}
body.page-escritorio .equipe-card:hover .equipe-card__foto {
transform: scale(1.03);
filter:
saturate(1.05)
contrast(1.03);
}
body.page-escritorio .equipe-card:hover .equipe-card__corpo {
border-color: rgb(var(--tinta-rgb) / 0.12);
}
body.page-escritorio .equipe-card:focus-within .equipe-card__corpo {
border-color: rgb(var(--marca-rgb) / 0.22);
}
body.page-escritorio .equipe-card__topo {
padding-bottom: 20px;
border-bottom: 1px solid rgb(var(--tinta-rgb) / 0.1);
}
body.page-escritorio .equipe-card__papel {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--filete);
margin-bottom: 14px;
}
body.page-escritorio .equipe-card__papel::before {
content: '';
width: 30px;
height: 1px;
background: currentColor;
}
body.page-escritorio .equipe-card__nome {
font-size: clamp(2rem, 3vw, 2.45rem);
line-height: 1.02;
color: var(--marca);
margin-bottom: 8px;
}
body.page-escritorio .equipe-card__oab {
font-size: 0.94rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tinta-suave);
}
body.page-escritorio .equipe-card__lead {
font-size: 1.14rem;
line-height: 1.82;
color: var(--tinta);
max-width: 34ch;
}
body.page-escritorio .equipe-card__detalhes {
display: grid;
gap: 16px;
}
body.page-escritorio .equipe-card__bloco {
padding: 18px 0 0;
border-top: 1px solid rgb(var(--tinta-rgb) / 0.08);
}
body.page-escritorio .equipe-card__bloco:first-child {
padding-top: 0;
border-top: 0;
}
body.page-escritorio .equipe-card__bloco h4 {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--marca);
margin-bottom: 12px;
}
body.page-escritorio .equipe-card__bloco p {
font-size: 1.02rem;
line-height: 1.78;
color: var(--tinta-suave);
}
body.page-escritorio .equipe-card__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.page-escritorio .equipe-card__chip {
padding: 9px 13px;
border: 1px solid rgb(var(--marca-rgb) / 0.12);
background: rgb(var(--marca-rgb) / 0.06);
color: var(--marca);
border-radius: var(--r-1);
font-size: 0.92rem;
font-weight: 600;
line-height: 1.3;
}
body.page-escritorio .equipe-card__acoes {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 4px;
}
body.page-escritorio .equipe-card__acoes .btn {
min-height: 50px;
padding-inline: 24px;
font-size: 0.88rem;
}
body.page-escritorio .equipe-card__acoes .btn:last-child {
background: transparent;
color: var(--marca);
border: 1px solid rgb(var(--marca-rgb) / 0.2);
box-shadow: none;
}
body.page-escritorio .equipe-card__acoes .btn:last-child:hover {
background: rgb(var(--marca-rgb) / 0.08);
color: var(--marca);
box-shadow: var(--sombra-1);
}
/* ─── MÉTODO ───────────────────────────────────────────────*/
body.page-escritorio .metodo__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 52px; }
body.page-escritorio .passo__num {
font-family: var(--font-titulo); font-size: 2.4rem; font-weight: 300;
line-height: 1; color: var(--filete);
/* sem isso o "1" fica mais estreito que o "3" e a fileira dança */
font-variant-numeric: tabular-nums;
margin-bottom: 16px;
}
body.page-escritorio .passo h3 { font-size: 1.52rem; font-weight: 400; color: var(--marca); margin-bottom: 10px; }
body.page-escritorio .passo p { font-size: 1.28rem; line-height: 1.85; color: var(--tinta-suave); }
/* ─── CONVITE ──────────────────────────────────────────────*/
body.page-escritorio .convite {
display: grid; grid-template-columns: minmax(0,1fr) auto;
gap: 32px 56px; align-items: center;
}
body.page-escritorio .convite h2 { margin-bottom: 20px; }
body.page-escritorio .convite h2::after { display: none; }
body.page-escritorio .convite p { font-size: 1.34rem; line-height: 1.8; color: var(--sobre-escuro); max-width: 60ch; }
/* ─── RODAPÉ ───────────────────────────────────────────────
Mesmo arranjo do `rodape-legal` das páginas de especialidade:
marca à esquerda, links utilitários à direita e a nota legal
ocupando a largura total na fileira de baixo. */
body.page-escritorio .rodape {
background: var(--rodape);
color: var(--branco);
padding-block: clamp(40px, 4vw, 60px);
padding-inline: var(--gutter);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px 64px;
align-items: start;
}
body.page-escritorio .rodape__marca {
min-width: 0;
}
body.page-escritorio .rodape__conteudo {
display: contents;
}
body.page-escritorio .rodape__logo {
height: 40px;
width: auto;
max-width: none;
margin-bottom: 18px;
}
body.page-escritorio .rodape__sobre,
body.page-escritorio .rodape__atalhos,
body.page-escritorio .rodape__nota {
font-size: 0.96rem;
line-height: 1.7;
}
body.page-escritorio .rodape__sobre {
color: rgb(var(--branco-rgb) / 0.7);
max-width: 42ch;
}
body.page-escritorio .rodape__atalhos {
color: rgb(var(--branco-rgb) / 0.7);
}
body.page-escritorio .rodape__atalhos a {
display: inline-block;
padding-block: 5px;
}
body.page-escritorio .rodape__atalhos a,
body.page-escritorio .rodape__nota a,
body.page-escritorio .rodape__sobre a {
color: rgb(var(--branco-rgb) / 0.82);
border-bottom: 1px solid rgb(var(--branco-rgb) / 0.28);
transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
body.page-escritorio .rodape__atalhos a:hover,
body.page-escritorio .rodape__nota a:hover,
body.page-escritorio .rodape__sobre a:hover {
color: var(--branco);
border-bottom-color: var(--branco);
}
body.page-escritorio .rodape__atalhos a:focus-visible,
body.page-escritorio .rodape__nota a:focus-visible,
body.page-escritorio .rodape__sobre a:focus-visible {
outline: 2px solid var(--branco);
outline-offset: 3px;
border-radius: 2px;
}
body.page-escritorio .rodape__nota {
grid-column: 1 / -1;
margin-top: 0;
padding-top: 26px;
border-top: 1px solid rgb(var(--branco-rgb) / 0.12);
font-size: 0.88rem;
color: rgb(var(--branco-rgb) / 0.5);
}
body.page-escritorio .rodape__social { display: flex; gap: 12px; margin-top: 22px; }
body.page-escritorio .rodape__social a {
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid rgb(var(--claro-rgb) / 0.3);
display: flex; align-items: center; justify-content: center;
color: var(--claro);
transition: background var(--t-1) var(--ease),
color var(--t-1) var(--ease),
border-color var(--t-1) var(--ease),
transform var(--t-2) var(--ease-saida),
box-shadow var(--t-2) var(--ease-saida);
}
body.page-escritorio .rodape__social a:hover {
background: var(--branco);
color: var(--marca);
border-color: var(--branco);
transform: translateY(-2px);
box-shadow: var(--sombra-1);
}
body.page-escritorio .rodape__social a:focus-visible {
outline: 2px solid var(--branco);
outline-offset: 2px;
box-shadow: var(--anel-claro);
}
body.page-escritorio .rodape__social svg { width: 17px; height: 17px; }
/* ─── ANIMAÇÃO ─────────────────────────────────────────────
So esconde quando ha JS. Sem a classe `js` no o conteudo
aparece normalmente — animacao nunca pode sequestrar conteudo. */
html.js body.page-escritorio .revela {
opacity: 0; transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
transform 0.7s cubic-bezier(.22,.61,.36,1);
}
html.js body.page-escritorio .revela.visivel { opacity: 1; transform: none; }
/* ─── RESPONSIVO ───────────────────────────────────────────*/
@media (max-width: 1080px) {
body.page-escritorio .credenciais__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 40px; }
body.page-escritorio .metodo__grid { grid-template-columns: 1fr; gap: 40px; }
/* o `.sobre__acao` tem `span 3` no desktop: sem zerar aqui ele
sozinho reconstroi a grade de tres colunas, e os terceiros
itens de cada grupo voltavam a cair na coluna 3 */
body.page-escritorio .cabeca { grid-template-columns: minmax(0,1fr); align-items: start; margin-bottom: 48px; }
body.page-escritorio .cabeca--equipe { margin-bottom: 52px; }
body.page-escritorio .cabeca--equipe h2,
body.page-escritorio .cabeca--equipe > p {
max-width: none;
}
body.page-escritorio .cabeca--equipe h2 {
white-space: normal;
}
body.page-escritorio .equipe-card {
grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1fr);
}
body.page-escritorio .equipe-card__corpo {
padding: 28px 26px 30px;
}
body.page-escritorio .convite { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
body.page-escritorio .equipe-carousel {
margin-inline: -5vw;
}
body.page-escritorio .equipe-grid {
display: flex;
grid-template-columns: none;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 5vw;
padding: 0 5vw 10px;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.page-escritorio .equipe-grid::-webkit-scrollbar {
display: none;
}
body.page-escritorio .equipe-card {
flex: 0 0 calc(100vw - 10vw);
scroll-snap-align: center;
grid-template-columns: 1fr;
}
body.page-escritorio .equipe-carousel__nav {
position: absolute;
inset: 152px 5vw auto;
z-index: 4;
display: flex;
justify-content: space-between;
pointer-events: none;
}
body.page-escritorio .equipe-carousel__botao {
pointer-events: auto;
}
body.page-escritorio .equipe-carousel__dots {
display: flex;
}
body.page-escritorio .equipe-card__midia {
min-height: 360px;
}
body.page-escritorio .equipe-card__foto {
object-position: center 18%;
}
body.page-escritorio .equipe-card__corpo {
padding: 26px 22px 28px;
}
}
@media (max-width: 768px) {
/* `100vh` no celular conta a area atras da barra do navegador, que
so some ao rolar: centralizado, o card afundava para fora da tela */
body.page-escritorio [id] { scroll-margin-top: 16px; }
body.page-escritorio .faixa { padding: 64px 5vw; }
body.page-escritorio .credenciais { padding: 44px 5vw; }
body.page-escritorio .rodape {
grid-template-columns: 1fr;
padding: 36px 5vw;
}
body.page-escritorio .rodape__atalhos {
padding-top: 24px;
border-top: 1px solid rgb(var(--branco-rgb) / 0.12);
}
body.page-escritorio .rodape__nota {
padding-top: 22px;
}
body.page-escritorio .topo {
padding: 24px 5vw;
}
body.page-escritorio .topo__logo img {
width: min(46vw, 168px);
height: auto;
opacity: 1;
filter: none;
mix-blend-mode: normal;
transform: translateZ(0);
}
body.page-escritorio .capa {
min-height: auto;
padding: 118px 5vw 72px;
}
body.page-escritorio .capa__inner { padding-right: 0; }
body.page-escritorio .capa__titulo {
white-space: nowrap;
max-width: none;
}
body.page-escritorio .capa__titulo-linha {
display: inline;
}
body.page-escritorio .capa__titulo-linha--aux {
margin-left: 0.28ch;
}
body.page-escritorio .capa__tag {
padding-left: 18px;
max-width: 34ch;
}
body.page-escritorio .cabeca,
body.page-escritorio .cabeca--equipe {
gap: 18px;
margin-bottom: 36px;
}
body.page-escritorio .cabeca p,
body.page-escritorio .cabeca--equipe > p {
font-size: 1.08rem;
line-height: 1.72;
}
body.page-escritorio .sobre__apoio {
max-width: none;
margin-top: 24px;
font-size: 1.16rem;
line-height: 1.74;
}
body.page-escritorio .sobre__texto {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 42px;
}
body.page-escritorio .sobre__texto p,
body.page-escritorio .valor p,
body.page-escritorio .passo p,
body.page-escritorio .convite p,
body.page-escritorio .rodape__sobre {
font-size: 1.06rem;
line-height: 1.76;
}
body.page-escritorio .sobre__texto p {
padding: 22px 20px 24px;
}
body.page-escritorio .meta,
body.page-escritorio .valores {
grid-template-columns: 1fr;
gap: 24px;
}
body.page-escritorio .meta {
margin-top: 48px;
padding-top: 20px;
}
body.page-escritorio .valores {
margin-top: 42px;
}
body.page-escritorio .sobre__acao {
margin-top: 42px;
}
body.page-escritorio .credenciais__grid { grid-template-columns: 1fr; }
body.page-escritorio .credencial {
justify-content: flex-start;
padding: 2px 0;
}
body.page-escritorio .credencial__botao,
body.page-escritorio .credencial__link {
gap: 14px;
align-items: center;
}
body.page-escritorio .credencial b {
font-size: 1.18rem;
margin-bottom: 2px;
}
body.page-escritorio .credencial span {
font-size: 1rem;
line-height: 1.45;
}
body.page-escritorio .credencial__painel-conteudo {
margin-top: 12px;
padding: 14px;
}
body.page-escritorio .credencial__painel li {
gap: 12px;
padding: 4px 0;
font-size: 0.98rem;
}
body.page-escritorio .credencial__painel-mapa .credencial__mapa-miniatura {
aspect-ratio: 1 / 1;
}
body.page-escritorio .credencial__mapa-frame {
min-height: 280px;
}
body.page-escritorio .equipe-card {
overflow: hidden;
}
body.page-escritorio .equipe-card__midia {
min-height: 320px;
}
body.page-escritorio .equipe-card__corpo {
gap: 18px;
padding: 22px 20px 24px;
}
body.page-escritorio .equipe-card__topo {
padding-bottom: 14px;
}
body.page-escritorio .equipe-card__nome {
font-size: 1.82rem;
}
body.page-escritorio .equipe-card__lead {
font-size: 1.04rem;
line-height: 1.68;
}
body.page-escritorio .equipe-card__bloco p {
font-size: 1rem;
line-height: 1.68;
}
body.page-escritorio .equipe-card__acoes {
flex-direction: column;
}
body.page-escritorio .equipe-card__acoes .btn,
body.page-escritorio .convite .btn,
body.page-escritorio .sobre__acao .btn {
width: 100%;
}
body.page-escritorio .passo__num {
margin-bottom: 12px;
}
body.page-escritorio .passo h3 {
font-size: 1.34rem;
}
body.page-escritorio .convite {
gap: 24px;
}
}
@media (max-width: 560px) {
body.page-escritorio .equipe-carousel__nav {
inset: 132px 5vw auto;
}
body.page-escritorio .equipe-carousel__botao {
width: 40px;
height: 40px;
}
body.page-escritorio .faixa h2 {
font-size: clamp(2rem, 9vw, 2.35rem);
line-height: 1.14;
}
body.page-escritorio .capa h1 {
font-size: clamp(1.9rem, 7vw, 2.7rem);
line-height: 1.04;
}
body.page-escritorio .capa__tag {
font-size: 1.02rem;
line-height: 1.62;
}
body.page-escritorio .eyebrow {
font-size: 0.92rem;
letter-spacing: 0.16em;
}
body.page-escritorio .credencial__painel li {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
body.page-escritorio .credencial__painel-oab {
white-space: normal;
}
body.page-escritorio .meta dt {
font-size: 1.56rem;
}
body.page-escritorio .meta dd {
font-size: 0.92rem;
letter-spacing: 0.08em;
}
body.page-escritorio .valor h3 {
font-size: 1.2rem;
margin-bottom: 8px;
}
body.page-escritorio .equipe-card__papel {
font-size: 0.74rem;
letter-spacing: 0.15em;
}
body.page-escritorio .equipe-card__papel::before {
width: 22px;
}
body.page-escritorio .equipe-card__chip {
font-size: 0.84rem;
padding: 7px 11px;
}
}
@media (max-width: 480px) {
body.page-escritorio .btn {
min-height: 50px;
font-size: 0.92rem;
letter-spacing: 0.08em;
padding: 0 18px;
}
body.page-escritorio .topo__logo img {
width: min(42vw, 146px);
height: auto;
opacity: 1;
filter: none;
mix-blend-mode: normal;
transform: translateZ(0);
}
body.page-escritorio .capa {
padding-top: 108px;
padding-bottom: 64px;
}
body.page-escritorio .credencial__ic {
width: 40px;
height: 40px;
}
body.page-escritorio .credencial__ic svg {
width: 18px;
height: 18px;
}
body.page-escritorio .credencial__mapa-frame {
min-height: 240px;
}
body.page-escritorio .equipe-card__midia {
min-height: 280px;
}
body.page-escritorio .equipe-card__corpo { padding: 22px 18px 22px; }
body.page-escritorio .equipe-card__nome { font-size: 1.68rem; }
body.page-escritorio .equipe-card__lead { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.js body.page-escritorio .capa__titulo-linha,
html.js body.page-escritorio .capa__tag,
html.js body.page-escritorio .capa__tag::before {
opacity: 1;
transform: none;
filter: none;
animation: none;
}
html.js body.page-escritorio .revela { opacity: 1; transform: none; transition: none; }
}
/* ═══════════════════════════════════════════════════════════════
PARTE 2 — OS PERFIS (`/escritorio/advogados/`) body.page-advogado
═══════════════════════════════════════════════════════════════
As duas paginas de perfil sao a mesma folha. O unico ponto em que
elas divergem e o `h1` nos dois pontos de quebra do celular:
"Dr. Felippe Gambarra" tem 20 caracteres contra os 18 do outro
perfil e quebrava em duas linhas. Esse ajuste e a classe extra
`perfil-felippe`, no fim do arquivo — a pagina do Dr. Felippe
escreve ``. Sem ela,
vale a medida do nome curto.
═══════════════════════════════════════════════════════════════ */
body.page-advogado {
min-height: 100vh;
font-family: var(--font-texto);
color: var(--branco);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 18px 20px 56px;
background:
linear-gradient(to bottom, rgb(var(--tinta-rgb) / 0.95), rgb(var(--tinta-rgb) / 0.985)),
var(--foto-capa) center/cover no-repeat fixed;
-webkit-font-smoothing: antialiased;
}
body.page-advogado img { display: block; max-width: 100%; }
body.page-advogado a { color: inherit; text-decoration: none; }
body.page-advogado .card {
width: 100%;
max-width: 1280px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
border-radius: var(--r-3);
}
body.page-advogado .brand { margin-bottom: 34px; }
body.page-advogado .brand img {
max-width: 166px; height: auto;
display: block;
opacity: 1;
filter: none;
mix-blend-mode: normal;
transition: opacity 0.2s ease;
}
body.page-advogado .brand:hover img { opacity: 1; }
body.page-advogado .profile-row {
width: 100%;
display: grid;
grid-template-columns: 460px minmax(0, 680px);
gap: 36px 46px;
align-items: center;
justify-content: center;
}
body.page-advogado .portrait {
position: relative;
min-height: 780px;
height: 780px;
align-self: start;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: visible;
padding-top: 0;
}
body.page-advogado .portrait::before {
content: '';
position: absolute;
left: 50%; top: 44%;
transform: translate(-50%, -50%);
width: 470px; height: 470px;
background: radial-gradient(circle, rgb(var(--claro-rgb) / 0.18), transparent 62%);
pointer-events: none;
}
body.page-advogado .portrait::after {
content: '';
position: absolute;
bottom: 14px; left: 50%;
transform: translateX(-50%);
width: 58%; height: 26px; border-radius: 50%;
background: radial-gradient(ellipse at center, rgb(var(--sombra-rgb) / 0.5), transparent 72%);
filter: blur(6px);
}
body.page-advogado .portrait img {
position: absolute;
left: 50%;
bottom: 37px;
transform: translateX(-47%);
z-index: 1;
width: min(100%, 670px);
height: 122%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center bottom;
filter:
drop-shadow(0 0 26px rgb(var(--branco-rgb) / 0.16))
drop-shadow(0 26px 38px rgb(var(--sombra-rgb) / 0.34));
}
body.page-advogado .info {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
width: 100%;
max-width: 680px;
}
body.page-advogado .role {
display: inline-flex; align-items: center; gap: 10px;
font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase;
font-weight: 700; color: var(--claro);
border: 1px solid rgb(var(--claro-rgb) / 0.36);
background: rgb(var(--branco-rgb) / 0.04);
padding: 8px 18px; border-radius: 999px;
box-shadow: var(--sombra-1);
margin-bottom: 22px;
}
body.page-advogado .role::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--claro);
}
body.page-advogado h1 {
font-family: var(--font-titulo);
font-weight: 300;
font-size: clamp(2.9rem, 5vw, 4.6rem);
line-height: 1.02;
margin-bottom: 8px;
}
body.page-advogado .oab {
font-size: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--claro);
font-weight: 600;
margin-bottom: 26px;
}
body.page-advogado .bio {
font-size: 1.18rem;
line-height: 1.88;
color: rgb(var(--branco-rgb) / 0.92);
max-width: 680px;
margin-bottom: 28px;
}
body.page-advogado .chips {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
width: 100%;
max-width: 680px;
margin-bottom: 34px;
}
body.page-advogado .chip {
border: 1px solid rgb(var(--claro-rgb) / 0.34);
background: rgb(var(--branco-rgb) / 0.04);
color: rgb(var(--branco-rgb) / 0.92);
padding: 8px 16px;
border-radius: var(--r-1);
font-size: 0.98rem;
line-height: 1.3;
}
body.page-advogado .links {
width: 100%;
max-width: 680px;
display: flex;
flex-direction: column;
gap: 14px;
}
body.page-advogado .link {
display: flex; align-items: center; gap: 16px;
width: 100%;
min-height: 64px;
padding: 16px 22px;
border: 1px solid rgb(var(--claro-rgb) / 0.26);
background: rgb(var(--branco-rgb) / 0.06);
color: var(--branco);
border-radius: var(--r-2);
box-shadow: var(--sombra-1);
font-size: 1.07rem; font-weight: 600;
letter-spacing: 0.01em;
transition: transform var(--t-2) var(--ease-saida),
background var(--t-1) var(--ease),
border-color var(--t-1) var(--ease),
box-shadow var(--t-2) var(--ease-saida),
color var(--t-1) var(--ease);
}
body.page-advogado .link svg {
width: 20px; height: 20px; flex-shrink: 0;
color: var(--claro);
transition: color var(--t-1) var(--ease), transform var(--t-2) var(--ease-saida);
}
body.page-advogado .link span {
flex: 1;
min-width: 0;
text-align: left;
}
body.page-advogado .link .arrow {
width: 16px; height: 16px;
color: rgb(var(--branco-rgb) / 0.42);
}
body.page-advogado .link:hover {
transform: translateY(-2px);
background: rgb(var(--branco-rgb) / 0.1);
border-color: rgb(var(--claro-rgb) / 0.45);
box-shadow: var(--sombra-2);
}
body.page-advogado .link:hover svg {
color: var(--branco);
transform: translateX(2px);
}
body.page-advogado .link:focus-visible {
outline: 2px solid var(--branco);
outline-offset: 2px;
box-shadow: var(--anel-claro);
}
body.page-advogado .link.primary {
background: var(--branco);
border-color: var(--branco);
color: var(--marca);
box-shadow: var(--sombra-2);
}
body.page-advogado .link.primary svg,
body.page-advogado .link.primary .arrow { color: var(--marca); }
body.page-advogado .link.primary:hover {
background: var(--superficie);
border-color: var(--superficie);
box-shadow: var(--sombra-3);
}
body.page-advogado footer {
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: 0.94rem;
color: var(--sobre-escuro-fraco);
}
/* Como `` em linha o "Ver equipe" rendia 18px de altura
clicável. O padding cria o alvo de dedo e a margem negativa
devolve o espaço, para o rodapé não engordar. */
body.page-advogado footer a {
color: var(--claro);
font-weight: 600;
display: inline-block;
padding: 11px 3px;
margin: -11px -3px;
}
body.page-advogado footer a:hover { color: var(--branco); }
body.page-advogado footer a:focus-visible {
outline: 2px solid var(--branco);
outline-offset: 3px;
border-radius: 3px;
}
@media (max-width: 900px) {
body.page-advogado {
padding: 16px 18px 40px;
background-attachment: scroll;
}
body.page-advogado .profile-row {
grid-template-columns: minmax(0,1fr);
gap: 14px;
}
body.page-advogado .portrait {
min-height: 300px;
height: auto;
width: 100%;
align-self: center;
align-items: flex-start;
}
/* O halo tem 470px FIXOS. Na coluna de 328px de um celular
ele sobra 71px de cada lado, e como `.portrait` é
`overflow: visible` esse excesso empurrava a página
inteira: 415px de conteúdo numa tela de 360.
Encolhê-lo não custa nada visualmente — o gradiente já
chega a `transparent` em 62% do raio, ou seja aos 146px
do centro, e os 71px que vazavam eram transparência
pura. No desktop, onde a coluna tem 460px, nada muda. */
body.page-advogado .portrait::before {
width: min(470px, 100%);
height: min(470px, 100%);
}
body.page-advogado .portrait img {
position: relative;
left: auto;
bottom: 0;
transform: none;
width: min(100%, 300px);
height: auto;
max-width: 100%;
max-height: 360px;
margin-top: -12px;
}
body.page-advogado .info {
padding-top: 0;
max-width: 100%;
}
body.page-advogado .links,
body.page-advogado .bio,
body.page-advogado .chips { max-width: 100%; }
}
@media (max-width: 760px) {
body.page-advogado { padding: 14px 16px 34px; }
body.page-advogado .card { align-items: center; text-align: center; }
body.page-advogado .brand {
margin-bottom: 18px;
align-self: flex-start;
}
body.page-advogado .brand img {
width: min(46vw, 170px);
max-width: none;
height: auto;
opacity: 1;
filter: none;
mix-blend-mode: normal;
transform: translateZ(0);
}
body.page-advogado .profile-row { gap: 10px; }
body.page-advogado .info { align-items: center; text-align: center; }
body.page-advogado h1 {
font-size: clamp(2rem, 8.2vw, 2.85rem);
line-height: 1;
margin-bottom: 6px;
}
body.page-advogado .oab {
font-size: 0.92rem;
letter-spacing: 0.08em;
margin-bottom: 18px;
}
body.page-advogado .portrait {
min-height: 270px;
}
body.page-advogado .portrait img {
width: min(100%, 272px);
max-height: 320px;
margin-top: -6px;
}
body.page-advogado .bio { max-width: 38ch; }
body.page-advogado .chips { justify-content: center; }
body.page-advogado .links { max-width: 100%; }
body.page-advogado .link {
min-height: 58px;
padding: 14px 18px;
gap: 14px;
font-size: 1rem;
}
body.page-advogado .link svg {
width: 18px;
height: 18px;
}
body.page-advogado .link .arrow {
width: 14px;
height: 14px;
}
body.page-advogado .link[href^="mailto:"] {
font-size: 0.92rem;
}
body.page-advogado footer {
margin-top: 24px;
gap: 4px;
font-size: 0.88rem;
}
body.page-advogado footer { align-items: center; text-align: center; }
body.page-advogado .role,
body.page-advogado .bio,
body.page-advogado .chips { display: none; }
}
@media (max-width: 420px) {
body.page-advogado .brand img {
width: min(42vw, 148px);
opacity: 1;
filter: none;
mix-blend-mode: normal;
transform: translateZ(0);
}
body.page-advogado h1 {
font-size: clamp(1.86rem, 8.4vw, 2.3rem);
margin-bottom: 4px;
}
body.page-advogado .oab {
font-size: 0.86rem;
margin-bottom: 16px;
}
body.page-advogado .portrait {
min-height: 248px;
}
body.page-advogado .portrait img {
width: min(100%, 230px);
max-height: 286px;
}
body.page-advogado .link {
min-height: 54px;
padding-inline: 16px;
font-size: 0.95rem;
}
body.page-advogado .link[href^="mailto:"] {
font-size: 0.84rem;
}
}
/* ─── AJUSTE DO NOME LONGO ──────────────────────────────────────
"Dr. Felippe Gambarra" tem 20 caracteres contra os 18 do outro
perfil. Com a mesma medida, ele quebrava em duas linhas no
celular — dai o `nowrap` e o `vw` menor no clamp. */
@media (max-width: 760px) {
body.page-advogado.perfil-felippe h1 { white-space: nowrap; font-size: clamp(2rem, 7.2vw, 2.7rem); }
}
@media (max-width: 420px) {
body.page-advogado.perfil-felippe h1 { white-space: nowrap; font-size: clamp(1.72rem, 6vw, 2.08rem); }
}