/* Assis Passos & Advogados. Folha única.
   Um só HTML por página, dois desenhos: de 760 px para cima, B; até 759 px, C.
   Ordem: 1 fontes, 2 tokens, 3 base, 4 cabeçalho, 5 peças comuns, 6 abertura, 7 áreas, 8 blocos,
   9 sócios, 10 ficha de contato, 11 páginas internas, 12 sumário e Política, 13 rodapé,
   14 faixas de largura, 15 hover e movimento, 16 impressão. */

/* 1. Fontes */
@font-face{font-family:"EB Garamond";src:url("fontes/eb-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fontes/eb-garamond-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fontes/eb-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fontes/eb-garamond-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fontes/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fontes/source-sans-3-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fontes/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* Reserva: fonte do sistema com a medida da fonte real, para reduzir o salto enquanto a fonte chega.
   Times e Arial valem no Mac, no iPhone e no Windows. O Android não tem nenhuma das duas: nele valem
   Noto Serif e Roboto. size-adjust medido sobre o texto do site; ascent e descent são os da fonte real
   divididos por ele. As faces de Android foram medidas nos arquivos das fontes, sem teste em aparelho. */
@font-face{font-family:"Reserva Serifa";src:local("Times New Roman"),local("TimesNewRomanPSMT");font-weight:400;font-style:normal;size-adjust:93.7%;ascent-override:107.5%;descent-override:31.8%;line-gap-override:0%}
/* Peso 500 dos títulos: a mesma Times, com a medida da EB Garamond 500, que é mais larga que a 400 */
@font-face{font-family:"Reserva Serifa";src:local("Times New Roman"),local("TimesNewRomanPSMT");font-weight:500;font-style:normal;size-adjust:97.5%;ascent-override:103.3%;descent-override:30.6%;line-gap-override:0%}
@font-face{font-family:"Reserva Serifa";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT");font-weight:400;font-style:italic;size-adjust:90.8%;ascent-override:110.9%;descent-override:32.8%;line-gap-override:0%}
@font-face{font-family:"Reserva Sans";src:local("Arial"),local("ArialMT");font-weight:400;font-style:normal;size-adjust:91.9%;ascent-override:111.4%;descent-override:43.5%;line-gap-override:0%}
@font-face{font-family:"Reserva Sans";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;font-style:normal;size-adjust:89.1%;ascent-override:114.9%;descent-override:44.9%;line-gap-override:0%}
@font-face{font-family:"Reserva Android Serifa";src:local("Noto Serif"),local("NotoSerif");font-weight:400;font-style:normal;size-adjust:79.2%;ascent-override:127.1%;descent-override:37.6%;line-gap-override:0%}
@font-face{font-family:"Reserva Android Serifa";src:local("Noto Serif Italic"),local("NotoSerif-Italic");font-weight:400;font-style:italic;size-adjust:78.5%;ascent-override:128.3%;descent-override:38%;line-gap-override:0%}
@font-face{font-family:"Reserva Android Sans";src:local("Roboto"),local("Roboto-Regular");font-weight:400;font-style:normal;size-adjust:92.8%;ascent-override:110.3%;descent-override:43.1%;line-gap-override:0%}
@font-face{font-family:"Reserva Android Sans";src:local("Roboto Medium"),local("Roboto-Medium"),local("Roboto Bold"),local("Roboto-Bold");font-weight:600;font-style:normal;size-adjust:94.5%;ascent-override:108.3%;descent-override:42.3%;line-gap-override:0%}

/* 2. Tokens */
:root{
  /* Cor */
  --petroleo:#233F49; --ouro:#D9BF62; --ouro-texto:#7A5B24; --filete:#B8975A;
  --marfim:#F5F1E6; --papel:#F7F6F2; --branco:#FFFFFF; --tinta:#14181C; --prata:#BFC3C9;
  --linha:#E5E1D9; --linha-2:#DDD8CC; --texto:#1D1F23; --texto-2:#5F5B53;

  /* Família */
  --serifa:"EB Garamond","Reserva Serifa","Reserva Android Serifa",Garamond,"Times New Roman",serif;
  --sans:"Source Sans 3","Reserva Sans","Reserva Android Sans","Helvetica Neue",Arial,sans-serif;

  /* Escala em 1440; a seção 14 troca os valores por faixa de largura */
  --h1:48px; --h1-int:42px; --h2:34px; --nome:24px; --nome-socio:26px;
  --corpo:17px; --respiro:72px;
  --margem:clamp(20px,4vw,120px); --vao:clamp(20px,2.4vw,32px);

  /* Superfície */
  --fundo:var(--branco); --fundo-faixa:var(--papel);

  /* Função: .escuro redefine estes nomes */
  --titulo:var(--petroleo); --cor:var(--texto); --cor-2:var(--texto-2); --rotulo:var(--ouro-texto);
  --elo:var(--petroleo); --sublinha:var(--filete); --fio:var(--linha); --foco:var(--petroleo);
  --botao-fundo:var(--petroleo); --botao-texto:var(--marfim);
  --botao-sobre:var(--tinta); --botao-sobre-texto:var(--marfim); --linha-sobre-texto:var(--marfim);
}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--cor);font:400 var(--corpo)/1.6 var(--sans);font-kerning:normal;font-variant-numeric:lining-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
b,strong{font-weight:600}
a{color:inherit}
p,li,dd,td{text-wrap:pretty}
h1{font:500 var(--h1)/1.12 var(--serifa);letter-spacing:-.004em;color:var(--titulo);max-width:17em;text-wrap:balance}
h2{font:500 var(--h2)/1.16 var(--serifa);letter-spacing:-.002em;color:var(--titulo);text-wrap:balance}
h3{font:500 var(--nome)/1.2 var(--serifa);color:var(--titulo);text-wrap:balance}
.nb,a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pular{position:absolute;left:var(--margem);top:-100vh;z-index:20;padding:10px 16px;background:var(--tinta);color:var(--marfim);font-weight:600}
.pular:focus{top:8px}
.faixa{width:min(1200px,100% - 2*var(--margem));margin-inline:auto}

/* 4. Cabeçalho. Dois menus no HTML: lista no computador, details no celular */
.topo{position:relative;z-index:10;background:var(--branco);border-bottom:1px solid var(--filete)}
.topo__linha{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px}
.topo__marca{flex:none;display:block}
.topo__marca img{width:206px}
/* Com o texto espaçado do WCAG 1.4.12, a lista desce para uma segunda linha em vez de sair da tela */
.menu-largo{min-width:0}
.menu-largo ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 clamp(14px,2.4vw,34px)}
.menu-largo a{display:block;padding:8px 0;border-bottom:1px solid transparent;font-size:16px;line-height:1.3;color:var(--tinta);text-decoration:none;white-space:nowrap}
.menu-largo a[aria-current]{border-bottom-color:var(--filete)}
.menu-curto{display:none}
.menu-curto summary{display:flex;align-items:center;justify-content:center;min-width:76px;min-height:44px;padding:0 16px;border:1px solid var(--petroleo);color:var(--petroleo);font:600 16px/1 var(--sans);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.menu-curto summary::-webkit-details-marker{display:none}
.menu-curto[open] summary{background:var(--petroleo);color:var(--marfim)}
.menu-curto nav{position:absolute;left:0;right:0;top:calc(100% + 1px);background:var(--papel);border-bottom:1px solid var(--filete);padding:4px var(--margem) 12px}
.menu-curto li+li{border-top:1px solid var(--linha)}
.menu-curto a{display:flex;align-items:center;min-height:45px;font-size:16px;line-height:1.3;color:var(--texto);text-decoration:none}
.menu-curto a[aria-current]{color:var(--petroleo);font-weight:600}

/* 5. Peças comuns */
.escuro{background:var(--petroleo);color:var(--marfim);--titulo:var(--marfim);--cor:var(--marfim);--cor-2:var(--prata);--rotulo:var(--ouro);--elo:var(--marfim);--sublinha:var(--ouro);--fio:rgba(191,195,201,.32);--foco:var(--ouro);--botao-fundo:var(--ouro);--botao-texto:var(--tinta);--botao-sobre:var(--marfim);--botao-sobre-texto:var(--tinta);--linha-sobre-texto:var(--petroleo)}
.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--vao);align-items:baseline}
.grade__resto{grid-column:2 / -1;min-width:0}
.botoes{display:flex;flex-wrap:wrap;gap:12px}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid var(--botao-fundo);background:var(--botao-fundo);color:var(--botao-texto);font:600 16px/1.2 var(--sans);text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.botao--linha{background:transparent;border-color:var(--elo);color:var(--elo)}
.so-curto{display:none}
.rotulo{font:600 16px/1.35 var(--sans);letter-spacing:0;color:var(--rotulo)}
.lista{border-top:1px solid var(--fio)}
.lista li{padding-block:9px 10px;border-bottom:1px solid var(--fio);line-height:1.5}
.lista+.lista{border-top:0}
.lista--elos li{padding-block:0}
.lista--elos a{display:flex;align-items:center;min-height:44px;padding-block:6px;color:var(--elo);text-decoration:none}
.rotulado b,.lista b{color:var(--titulo)}

/* 6. Abertura. Petróleo no computador, clara no celular: os tokens de .abertura mudam na seção 14 */
.abertura .faixa{padding-block:60px 64px}
.abertura__apoio{margin-top:20px;max-width:37em;font-size:18px;line-height:1.6}
.abertura__apoio+.abertura__apoio{margin-top:10px}
.abertura__apoio a{color:var(--elo);text-decoration-color:var(--sublinha);text-underline-offset:3px;text-decoration-thickness:1px}
.abertura__botoes{margin-top:32px}
.tempo-linha{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.sede{font:600 17px/1.35 var(--sans);color:var(--rotulo);text-wrap:balance}
.tempo20{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border:1.5px solid var(--rotulo);border-radius:50%;color:var(--titulo)}
.tempo20 b{font:500 34px/.92 var(--serifa)}
.tempo20 i{font:500 17px/1 var(--serifa)}
.abertura--interna h1{font-size:var(--h1-int);max-width:20em}
.abertura--interna .faixa{padding-block:44px 52px}
.trilha{margin-bottom:18px;font-size:16px;line-height:1.4;color:var(--cor-2)}
.trilha ol{display:flex;flex-wrap:wrap;gap:0 8px}
.trilha li+li::before{content:"/";margin-right:8px;color:var(--rotulo)}
.trilha a{color:inherit;text-decoration-color:var(--sublinha);text-underline-offset:3px;text-decoration-thickness:1px}

/* 7. Áreas: início e página das áreas */
.areas{padding-block:52px 72px}
.areas__intro{margin:26px 0 18px;max-width:760px;font-size:17px;line-height:1.55}
.areas__destaque{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--vao)}
.area{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px;padding-top:16px;border-top:2px solid var(--titulo)}
.area h3{text-wrap:balance}
.area h3 a,.linha-area h3 a{color:inherit;text-decoration-color:var(--sublinha);text-decoration-line:none;text-decoration-thickness:1px;text-underline-offset:4px}
.area p,.linha-area p{font-size:16px;line-height:1.55}
.areas__demais{margin-top:36px;border-top:1px solid var(--filete)}
.linha-area{padding-block:13px;border-bottom:1px solid var(--linha)}
.linha-area h3{font-size:20px;line-height:1.25}
.saiba a{color:var(--elo);font-weight:600;text-decoration-color:var(--sublinha);text-underline-offset:3px;text-decoration-thickness:1px}
.areas--hub .areas__destaque{grid-template-rows:auto auto auto}
.areas--hub .area{grid-row:span 3}
.areas--hub .saiba{margin-top:-4px}
.areas--hub .linha-area .saiba{margin-top:4px}
.areas__nota{margin-top:40px;max-width:760px;font-size:17px}

/* 8. Blocos */
.bloco{padding-block:var(--respiro)}
.bloco--papel{background:var(--fundo-faixa)}
.fila + .fila{margin-top:48px;padding-top:48px;border-top:1px solid var(--linha)}
.fila + .fila--fim{margin-top:40px;padding-top:0;border-top:0}
.texto{max-width:43em;font-size:18px;line-height:1.62}
#escritorio{scroll-margin-top:var(--respiro)}
#atuacao .texto{text-wrap:balance}
.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--vao);row-gap:20px}
.duas--uma{grid-template-columns:minmax(0,1fr);max-width:760px;row-gap:16px}
.bloco.escuro p{line-height:1.62}

/* 9. Sócios */
.socio{padding-top:16px;border-top:2px solid var(--titulo)}
.socio__nome{font-size:var(--nome-socio);line-height:1.2;color:var(--titulo)}
.socio__papel{margin-top:2px;font-size:16px;font-weight:600;line-height:1.4;color:var(--rotulo)}
.socio__papel::first-letter{text-transform:uppercase}
.socio__texto{margin-top:12px;line-height:1.6}
.socios-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:clamp(32px,4vw,64px)}
/* Linhas alinhadas: nome, cargo, atuação (os três parágrafos juntos), Formação e docência, formação */
.socios-lista .socio{display:grid;grid-row:span 5;grid-template-rows:subgrid}
.socios-lista .socio__nome{font-size:var(--h2)}
.socios-lista .socio__papel{margin-top:6px}
.socios-lista .socio__texto{margin-top:18px}
.socios-lista p+p:not(.socio__texto):not(.socio__papel){margin-top:14px}
.socio__bloco{margin-top:22px;padding-top:16px;border-top:1px solid var(--linha);font:600 16px/1.35 var(--sans);color:var(--rotulo)}
.socios-lista .socio__bloco+p{margin-top:6px}
.socios-fim{margin-top:40px}

/* 10. Ficha de contato: início e página de contato */
.ficha{border-top:1px solid var(--filete)}
.ficha__linha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--vao);align-items:baseline;padding-block:15px;border-bottom:1px solid var(--linha-2)}
.ficha--pagina .ficha__linha{grid-template-columns:repeat(4,minmax(0,1fr))}
.ficha__linha>:first-child{font:600 16px/1.35 var(--sans);color:var(--rotulo)}
.ficha__valor{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;min-width:0}
.ficha__valor p{line-height:1.55}
.ficha__valor a:not(.botao){color:var(--petroleo);text-decoration-color:var(--filete);text-decoration-thickness:1px;text-underline-offset:4px}
/* Com o texto ampliado, o e-mail parte em vez de alargar a página. No tamanho normal a quebra não muda */
.ficha__valor a[href^="mailto:"],.rp a[href^="mailto:"]{overflow-wrap:anywhere}
.ficha .forte{font:500 24px/1.25 var(--serifa)}
.ficha__nota p{font-size:16px;color:var(--texto-2)}
.ficha__linha--destaque{align-items:center;padding-block:20px}
.ficha__linha--destaque .ficha__valor{align-items:center}
.ficha__linha--destaque .forte{font-size:var(--h2);line-height:1.2}

/* 11. Páginas internas */
.prosa{max-width:43em}
.prosa>*+*{margin-top:14px}
.prosa>h3{margin-top:30px}
.prosa>h3:first-child{margin-top:0}
.prosa>.lista{margin-top:12px}
.prosa>.lista+*{margin-top:18px}
.prosa>.lista+.lista{margin-top:0}
.prosa>.botoes{margin-top:28px}
.prosa a:not(.botao),.lista a:not(.botao){color:var(--elo);text-decoration-color:var(--sublinha);text-decoration-thickness:1px;text-underline-offset:3px}
.colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.2vw,48px);row-gap:36px;align-items:start}
.colunas .prosa{max-width:none;min-width:0}
.dados{border-top:1px solid var(--filete)}
.dados>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--vao);padding-block:12px 13px;border-bottom:1px solid var(--linha-2)}
.dados dt{font:600 16px/1.5 var(--sans);color:var(--rotulo)}
.dados dd{line-height:1.5}
.proxima{padding-block:48px 56px;border-top:1px solid var(--filete)}
.proxima h2{font:600 16px/1.35 var(--sans);letter-spacing:0;color:var(--rotulo)}
.proxima__nome{font:500 var(--nome)/1.2 var(--serifa);color:var(--titulo)}
.proxima__nome a{color:inherit;text-decoration-color:var(--filete);text-decoration-thickness:1px;text-underline-offset:4px}
.proxima__resumo{margin-top:8px;max-width:43em;font-size:16px;line-height:1.55}
.proxima__todas{margin-top:12px;font-size:16px}
.proxima__todas a{color:var(--elo);font-weight:600;text-decoration-color:var(--sublinha);text-underline-offset:3px;text-decoration-thickness:1px}
.erro .botoes{margin-top:24px}
.erro p:not(.botoes){max-width:37em}

/* 12. Sumário e Política */
.corpo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--vao);align-items:start}
.indice{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;padding-right:4px}
.indice .rotulo{margin-bottom:10px}
.indice ol{counter-reset:item;border-bottom:1px solid var(--linha)}
.indice li{counter-increment:item;border-top:1px solid var(--linha)}
.indice a{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;min-height:44px;padding-block:6px;font-size:16px;line-height:1.25;color:var(--texto-2);text-decoration:none}
.indice a::before{content:counter(item);font:500 17px/1 var(--serifa);color:var(--ouro-texto)}
.indice a[aria-current="true"]{color:var(--petroleo);font-weight:600}
.indice a:focus-visible{outline-offset:-2px}
.politica{grid-column:2 / -1;min-width:0}
.politica section{scroll-margin-top:24px}
.politica section+section{margin-top:40px;padding-top:40px;border-top:1px solid var(--linha)}
.politica h2{font-size:var(--nome);line-height:1.25}
.politica h2+*{margin-top:12px}
.politica p+p{margin-top:12px}
.politica p{max-width:46em}
.politica a{color:var(--elo);text-decoration-color:var(--sublinha);text-decoration-thickness:1px;text-underline-offset:3px}
.quadro+p{margin-top:20px}
.quadro table{width:100%;border-collapse:collapse;table-layout:fixed}
.quadro th,.quadro td{padding:10px;border:1px solid var(--linha-2);vertical-align:top;text-align:left;font-size:16px;font-weight:400;line-height:1.4}
.quadro thead th{font-weight:600;color:var(--ouro-texto)}
.quadro tbody th{font-weight:600}

/* 13. Rodapé. Igual em todas as páginas; o filete tem altura fixa porque, sem ela, o WebKit escala o SVG em cunha */
.rp{background:var(--petroleo);color:var(--marfim);font:400 16px/1.55 var(--sans);text-align:center;padding:56px 32px 40px;--foco:var(--ouro)}
.rp-dentro{max-width:1080px;margin:0 auto}
.rp p{text-wrap:balance}
.rp-logo{width:190px;height:auto;margin:0 auto}
.rp-filete{display:block;width:100%;max-width:560px;height:6px;margin:22px auto 0}
.rp-colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:30px}
.rp .rp-rotulo{margin-bottom:6px;font-weight:600;color:var(--ouro)}
.rp a{color:var(--marfim);text-decoration-color:var(--filete);text-decoration-thickness:1px;text-underline-offset:3px}
.rp-socios,.rp-fim{margin-top:26px;padding-top:24px;border-top:1px solid rgba(217,191,98,.35)}
.rp-fim{color:var(--prata)}
.rp-fim p+p{margin-top:8px}
.rp-acesso{width:40px;height:40px;margin:20px auto 0}

/* 14. Faixas de largura */
@media (min-width:760px){
  /* Abertura em petróleo: os mesmos valores de .escuro */
  .abertura{background:var(--petroleo);color:var(--marfim);--titulo:var(--marfim);--cor:var(--marfim);--cor-2:var(--prata);--rotulo:var(--ouro);--elo:var(--marfim);--sublinha:var(--ouro);--foco:var(--ouro);--botao-fundo:var(--ouro);--botao-texto:var(--tinta);--botao-sobre:var(--marfim);--botao-sobre-texto:var(--tinta);--linha-sobre-texto:var(--petroleo)}
  .botao--linha-largo{background:transparent;border-color:var(--elo);color:var(--elo)}
}
@media (max-width:1199px){
  :root{--h1:42px;--h1-int:36px;--h2:30px;--nome:23px;--respiro:60px}
  .topo__linha{min-height:84px}
  .topo__marca img{width:178px}
  .abertura .faixa{padding-block:54px 58px}
  .abertura--interna .faixa{padding-block:38px 46px}
  .areas{padding-block:44px 60px}
  .duas--socios{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .colunas{grid-template-columns:minmax(0,1fr)}
  .quadro table,.quadro tbody,.quadro tr,.quadro th,.quadro td{display:block;width:auto}
  .quadro thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .quadro tbody tr{margin-bottom:18px;border-top:2px solid var(--petroleo)}
  .quadro tbody th{padding:10px 0 4px;border:0}
  .quadro tbody td{padding:8px 0;border-width:0 0 1px}
  .quadro tbody td::before{content:attr(data-rotulo);display:block;font-weight:600;color:var(--ouro-texto)}
}
@media (max-width:999px){
  .areas__destaque{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;row-gap:30px}
  .area,.areas--hub .area{display:block;grid-row:auto}
  .area h3{margin-bottom:10px}
  .areas--hub .saiba{margin-top:8px}
  .socios-lista{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:44px}
  .socios-lista .socio{display:block;grid-row:auto}
  .corpo{display:block}
  .indice{position:static;max-height:none;overflow:visible;padding:0 0 36px}
  .indice ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--vao)}
  .indice a[aria-current="true"]{color:var(--texto-2);font-weight:400}
}
@media (min-width:760px) and (max-width:819px){
  /* Em 760 o menu inteiro precisa caber numa linha, com folga para a fonte de reserva e para o alvo de toque */
  .topo__linha{gap:16px}
  .topo__marca img{width:164px}
  .menu-largo ul{column-gap:12px}
  /* Rodapé: o e-mail cabe numa linha da coluna de contato */
  .rp{padding-inline:24px}
  .rp-colunas{column-gap:20px}
}
@media (min-width:760px) and (max-width:799px){
  /* Coluna de título estreita: a palavra mais longa dos títulos cabe inteira. Em 800 vale a escala do desenho */
  .bloco .grade>h2,#t-areas{font-size:28px}
}
@media (max-width:759px){
  :root{--h1:min(33px,calc(3.2px + 7.66vw));--h1-int:min(30px,calc(2.4px + 7.08vw));--h2:27px;--nome:22px;--nome-socio:24px;--corpo:16px;--respiro:52px;--margem:24px;--fundo:var(--papel);--fundo-faixa:var(--marfim)}
  .topo{background:var(--papel)}
  .topo__linha{min-height:74px}
  .topo__marca img{width:176px}
  .menu-largo{display:none}
  .menu-curto{display:block}

  /* Abertura clara, botões Contato e Sobre nós */
  .so-largo{display:none}
  .so-curto{display:inline-flex}
  .botao{padding:0 28px}
  .abertura .faixa{padding-block:32px 28px}
  .abertura__apoio{margin-top:14px;font-size:17px}
  .abertura__botoes{margin-top:22px}
  h1{line-height:1.18}
  .abertura--interna .faixa{padding-block:32px 28px}
  .abertura--interna+.bloco:not(.bloco--papel){padding-top:8px}
  .trilha{margin:-12px 0 6px}
  .trilha a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  .trilha li{display:flex;align-items:center}
  /* A página atual repete o H1 logo abaixo. Fica só para leitor de tela, e a trilha não muda de linha com a fonte */
  .trilha li:last-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* Em primeiro nível sobraria só o link Início, e link escondido não pode receber foco */
  .trilha--curta{display:none}

  /* Áreas: destaques em painel escuro, demais em fundo claro */
  .areas{padding-block:0}
  .areas__painel{background:var(--petroleo);color:var(--marfim);--titulo:var(--marfim);--cor:var(--marfim);--cor-2:var(--prata);--rotulo:var(--ouro);--elo:var(--marfim);--sublinha:var(--ouro);--fio:rgba(191,195,201,.32);--foco:var(--ouro);--botao-fundo:var(--ouro);--botao-texto:var(--tinta);padding-block:24px 8px}
  .areas__intro{margin:10px 0 16px;font-size:16px}
  .areas__destaque{display:block;border-top:1px solid var(--filete)}
  .area,.areas--hub .area{padding:6px 0 8px;border-top:0;border-bottom:1px solid var(--fio)}
  .area:last-child{border-bottom:0}
  .area h3{margin-bottom:0}
  .area h3 a,.linha-area h3 a{display:flex;align-items:center;min-height:44px;padding-block:6px}
  .area p,.linha-area p{margin-top:0;line-height:1.5}
  .areas__demais{margin-top:0;padding-block:6px 20px;border-top:0}
  .linha-area{padding-block:6px 10px}
  .linha-area:last-child{border-bottom:0}
  .saiba a{display:inline-flex;align-items:center;min-height:44px}
  .areas--hub .saiba,.areas--hub .linha-area .saiba{margin-top:0}
  .areas__nota{margin-top:0;padding-top:24px;font-size:16px}

  /* Coluna única */
  .grade{display:block}
  .grade>h2{margin-bottom:16px}
  .fila + .fila{margin-top:32px;padding-top:0;border-top:0}
  .texto{font-size:16px;line-height:1.6;text-wrap:pretty}
  #atuacao .texto{text-wrap:pretty}
  #escritorio{scroll-margin-top:52px}
  .duas,.duas--uma{display:block;max-width:none}
  .duas--uma p+p{margin-top:16px}
  .duas--socios .socio+.socio{margin-top:32px}
  .socios-inicio>h2{margin-bottom:24px}
  .socio{padding-top:24px}
  .socio__papel{font-weight:400}
  .socios-lista .socio{padding-top:24px}

  /* Ficha: o aviso sobe para logo abaixo do título, e o telefone abre a lista */
  .ficha{display:flex;flex-direction:column;border-top:0}
  .ficha__linha{display:block;padding-block:16px 17px}
  .ficha__linha:first-child{border-top:2px solid var(--petroleo)}
  .ficha__linha:last-child,.ficha__linha--fim{border-bottom:0}
  .ficha__valor{display:block}
  .ficha__valor p+p{margin-top:0}
  .ficha__valor a:not(.botao){display:inline-block;padding-block:10px}
  .ficha__valor--juntos{display:flex;gap:0 20px;align-items:baseline}
  .ficha .forte{font-size:22px}
  .ficha__nota{order:-1;padding-block:0 20px;border-bottom:0}
  .ficha__nota h3{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ficha__linha--destaque .forte{font-size:var(--h2)}
  .ficha__linha--destaque .ficha__valor{display:block}
  .ficha__linha--destaque .botao{margin-top:10px}

  /* Páginas internas */
  .prosa,.colunas .prosa{max-width:none}
  .colunas{display:block}
  .colunas .prosa+.prosa{margin-top:32px}
  .dados>div{display:block}
  .proxima{padding-block:36px 40px}
  .proxima h2{margin-bottom:8px}
  .proxima__nome a{display:inline-flex;align-items:center;min-height:44px}
  .proxima__resumo{margin-top:2px}
  .proxima__todas a{display:inline-flex;align-items:center;min-height:44px}
  .indice ol{display:block}
  .politica section+section{margin-top:32px;padding-top:32px}

  /* Rodapé */
  .rp{padding:40px 24px 28px}
  .rp a{display:inline-block;padding:10px 0}
  .rp-filete{margin-top:18px}
  .rp-colunas{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
  .rp-socios,.rp-fim{margin-top:16px;padding-top:16px}
  .rp-fim p+p{margin-top:6px}
  .rp-socios p:not(.rp-rotulo){max-width:320px;margin-inline:auto}
}

@media (max-width:299px){
  /* Tela externa de dobrável e zoom de página: logo e Menu não cabem lado a lado */
  .topo__linha{flex-wrap:wrap;row-gap:8px;padding-block:10px}
}

/* 15. Hover e movimento */
@media (hover:hover){
  .menu-largo a:hover{border-bottom-color:var(--tinta)}
  .menu-curto a:hover{color:var(--petroleo)}
  .area h3 a:hover,.linha-area h3 a:hover{text-decoration-line:underline}
  .botao:hover{background:var(--botao-sobre);border-color:var(--botao-sobre);color:var(--botao-sobre-texto)}
  .botao--linha:hover{background:var(--elo);border-color:var(--elo);color:var(--linha-sobre-texto)}
  .ficha__valor a:not(.botao):hover{color:var(--tinta);text-decoration-color:currentColor}
  .indice a:hover{color:var(--petroleo)}
  .rp a:hover{color:var(--ouro)}
}
@media (hover:hover) and (min-width:760px){
  .botao--linha-largo:hover{background:var(--elo);border-color:var(--elo);color:var(--linha-sobre-texto)}
}
@media (hover:none){
  /* Sem ponteiro, o nome da área precisa dizer que é link */
  .area h3 a,.linha-area h3 a{text-decoration-line:underline}
}
@media (pointer:coarse) and (min-width:760px){
  /* Celular deitado e tablet: o desenho é o do computador, mas o alvo continua sendo o dedo */
  .topo__marca{display:flex;align-items:center;min-height:44px}
  .menu-largo a{min-width:44px;padding-block:12px;text-align:center}
  .trilha a{min-width:44px}
  .trilha a,.area h3 a,.linha-area h3 a,.saiba a,.ficha__valor a:not(.botao),.proxima__nome a,.proxima__todas a,.rp a{display:inline-flex;align-items:center;min-height:44px}
  /* A primeira linha fica onde estaria sem o alvo: nomes de área na mesma altura e colunas do rodapé niveladas */
  .area h3 a,.linha-area h3 a,.rp a{align-items:flex-start}
}
@media (forced-colors:active){
  /* Cores forçadas pintam a borda transparente: só a página atual fica sublinhada */
  .menu-largo a{border-bottom-color:Canvas}
  .menu-largo a[aria-current]{border-bottom-color:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* 16. Impressão */
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact;scroll-behavior:auto}
  .pular,.menu-largo,.menu-curto,.abertura__botoes,.trilha,.indice{display:none}
  .rp-filete{height:6px}
  .area,.socio,.ficha__linha,.linha-area,.quadro tr,.dados>div,.rp{break-inside:avoid}
  h2,h3{break-after:avoid}
  .indice+.politica{grid-column:1 / -1}
  /* Rodapé compacto, para não ocupar uma folha sozinho */
  .rp{padding:20px 16px;font-size:13px}
  .rp-logo,.rp-filete,.rp-acesso{display:none}
  .rp-colunas{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:0}
  .rp a{padding:0}
  .rp-socios,.rp-fim{margin-top:12px;padding-top:12px}
}