/* =========================================================
   NEGRÃO & ADVOGADOS
   Claro dominante. Tipo pequeno. Muito ar. Acento raro.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --toga:#0F2019;          /* verde profundo — herói, tradição, contato, rodapé */
  --sarja:#1B3227;         /* verde elevado */
  --ambar:#EBA038;         /* acento oficial — raro */
  --brasa:#FF9A21;         /* laranja da logo — só símbolo e foco */
  --papel:#F8F9F7;         /* fundo principal */
  --pedra:#EBEDE8;         /* faixa alternada */
  --grafite:#4B584F;       /* texto de apoio */

  --ink:#12211A;
  --ink-2:var(--grafite);
  --ink-3:#8A968E;
  --regua:rgba(18,33,26,.14);
  --regua-fina:rgba(18,33,26,.07);
  --realce:#9C5F0C;        /* âmbar legível sobre claro */

  --claro:#EDF1EE;
  --claro-2:#A3B2A9;
  --regua-clara:rgba(237,241,238,.16);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;

  --goteira:clamp(20px,5vw,72px);
  --max:1240px;
  --ar:clamp(72px,10vw,148px);   /* respiro vertical das seções */
  --topo-h:70px;
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
/* [hidden] precisa vencer qualquer display de classe (grid/flex) */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-h) + 20px)}

body{
  margin:0;
  background:var(--papel);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-weight:400;line-height:1.12}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ambar);color:#20140A;
  font-size:14px;font-weight:500;padding:12px 20px;text-decoration:none;
}
.skip:focus{left:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--goteira)}

/* ---------- TIPOGRAFIA ---------- */
/* declarações: serifada, tamanho contido — não display gigante */
.stmt{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(27px,3.4vw,40px);
  line-height:1.16;letter-spacing:-.014em;
  text-wrap:balance;
}
.stmt--md{font-size:clamp(24px,2.6vw,32px)}
.stmt--grande{font-size:clamp(30px,4vw,48px)}
.stmt--heroi{
  font-size:clamp(31px,4.6vw,54px);
  font-weight:300;color:var(--claro);max-width:23ch;
}

.etiqueta{
  font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--ink-3);
  padding-bottom:14px;margin-bottom:clamp(40px,5.5vw,78px);
  border-bottom:1px solid var(--regua);
}
.faixa--toga .etiqueta{color:var(--claro-2);border-bottom-color:var(--regua-clara)}

/* bloco de duas colunas: declaração à esquerda, nota miúda à direita */
.dois{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,5vw,80px);align-items:start;
}
.dois__nota{display:flex;flex-direction:column;gap:14px;max-width:none;padding-top:6px}
.dois__nota p{color:var(--ink-2)}
.faixa--toga .dois__nota p{color:var(--claro-2)}
@media (max-width:820px){
  .dois{grid-template-columns:1fr;gap:22px}
}

/* declaração com foto: retrato do ambiente à esquerda, texto à direita */
.decl{
  display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:stretch;
}
/* o botão não pode esticar na coluna flex */
.decl__cta,.areas__cta{align-self:flex-start}
.areas__cta{margin-top:clamp(26px,3vw,36px)}
.trajeto__cta{align-self:flex-start;margin-top:clamp(12px,1.6vw,20px)}
/* quebra do título só no desktop; no estreito o texto se vira sozinho */
.quebra-desk{display:none}
@media (min-width:861px){.quebra-desk{display:inline}}
/* largura vem da coluna; altura vem do stretch da linha.
   Sem width:100% o aspect-ratio deduziria a largura da altura e invadiria o texto. */
.decl__foto{
  position:relative;overflow:hidden;
  width:100%;min-height:clamp(340px,40vw,580px);
}
.decl__txt{display:flex;flex-direction:column;gap:clamp(24px,3.2vw,38px);padding-top:4px}
/* sem teto: o texto acompanha a coluna e fecha na borda do grid */
.decl__nota{display:flex;flex-direction:column;gap:14px;max-width:none}
.decl__nota p{color:var(--ink-2)}


@media (max-width:820px){
  .decl{grid-template-columns:1fr;gap:30px}
  .decl__foto{min-height:0;aspect-ratio:16/11}
  .foto--decl{object-position:52% 30%}
}

/* ---------- SEÇÕES ---------- */
.faixa{padding-block:var(--ar);background:var(--papel);color:var(--ink)}
.faixa--pedra{background:var(--pedra)}
.faixa--toga{background:var(--toga);color:var(--claro)}
/* o contato encosta no rodapé, ambos escuros: menos respiro entre eles */
#contato{padding-bottom:clamp(46px,5.5vw,80px)}

.rodape-nota{margin-top:44px;font-size:13px;color:var(--ink-3);max-width:80ch}

/* ---------- FOTOS ---------- */
.foto{display:block;width:100%;height:100%;object-fit:cover}
/* 116% da moldura: a folga é o curso do parallax. O Dr. Ricardo está no centro da foto */
.foto--decl{position:absolute;left:0;top:-8%;height:116%;object-position:52% 40%}
@media (prefers-reduced-motion:no-preference){
  .foto--decl{will-change:transform}
}
/* herói: no estreito a foto corta pelas laterais — manter o advogado (centro-esquerda) no quadro */
.heroi__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:40% 25%}
/* 130% da faixa: a folga é o curso do parallax (10% de 130% = 13% para cada lado) */
.banda .foto{position:absolute;left:0;top:-15%;height:130%;object-position:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .banda .foto{will-change:transform}
}
.advogado__foto{position:relative}
.advogado__foto .foto{position:absolute;inset:0;object-position:50% 20%}

/* ---------- PLACEHOLDERS ---------- */
/* Trocar cada .ph por <img> quando as fotos chegarem — ver img/LEIA-ME.md */
.ph{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  width:100%;height:100%;min-height:140px;padding:20px;text-align:center;
  background:#E3E7E2;
}
.ph__tag{font-size:13px;font-weight:500;color:#6F7C74}
.ph__dim{font-size:11px;letter-spacing:.02em;color:#93A099;font-variant-numeric:tabular-nums}

.ph--heroi{position:absolute;inset:0;min-height:0;background:#22302A}
.ph--heroi .ph__tag{color:#7F8D85}
.ph--heroi .ph__dim{color:#66746C}

.ph--banda{min-height:0;height:100%}
.ph--mini{min-height:0;height:100%}

/* a foto da declaração é mais alta que a moldura: a folga é o curso do parallax */
.ph--decl{position:absolute;inset:-8% 0;height:auto;min-height:0}
.ph--avatar{min-height:0;height:100%;padding:0;border-radius:50%;background:rgba(237,241,238,.12)}
@media (prefers-reduced-motion:no-preference){
  .ph--decl{will-change:transform}
}

/* ---------- TOPO ---------- */
.topo{
  position:fixed;inset:0 0 auto;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform .3s ease,background-color .3s ease,border-color .3s ease;
}
.topo::before{
  content:"";position:absolute;inset:0;bottom:-30px;z-index:-1;
  background:linear-gradient(to bottom,rgba(11,23,18,.85) 0%,rgba(11,23,18,.5) 60%,rgba(11,23,18,.15) 85%,transparent 100%);
  pointer-events:none;
  opacity:1;
  transition:opacity .3s ease;
}
.topo__in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--goteira);
  min-height:var(--topo-h);display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.topo[data-solido="sim"]{
  background:rgba(248,249,247,.92);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom-color:var(--regua);
}
.topo[data-solido="sim"]::before{
  opacity:0;
}
.topo[data-oculto="sim"]{transform:translateY(-100%)}

.marca{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;position:relative}
.marca__logo{width:auto;height:41px}

/* o topo é transparente sobre o herói e sólido depois:
   a logo tem lettering branco numa versão e escuro na outra */
.marca__logo--escuro{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.topo[data-solido="sim"] .marca__logo--claro{opacity:0}
.topo[data-solido="sim"] .marca__logo--escuro{opacity:1}
.marca__logo--claro{transition:opacity .3s ease}

.nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav a{
  font-size:14px;color:rgba(237,241,238,.9);text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  padding-block:6px;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease,text-shadow .2s ease;
}
.nav a:hover{color:var(--claro);border-bottom-color:var(--ambar)}
.topo[data-solido="sim"] .nav a{color:var(--ink-2);text-shadow:none}
.topo[data-solido="sim"] .nav a:hover{color:var(--ink)}

/* CTA do topo: botão âmbar cheio, igual nos dois estados da barra */
.link-topo{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:14px;font-weight:500;text-decoration:none;
  padding:9px 17px;
  background:var(--ambar);border:1px solid var(--ambar);color:#20140A;
  transition:background-color .2s ease,border-color .2s ease;
}
.link-topo:hover{background:var(--brasa);border-color:var(--brasa)}
.link-topo .ico{width:16px;height:16px}

.burger{
  display:none;flex-direction:column;gap:5px;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:auto;background:none;
  border:1px solid var(--regua-clara);cursor:pointer;
}
.burger span{display:block;width:16px;height:1px;background:var(--claro);transition:transform .2s ease}
.topo[data-solido="sim"] .burger{border-color:var(--regua)}
.topo[data-solido="sim"] .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:920px){
  .link-topo{display:none}
  .burger{display:flex}
  .nav{
    position:absolute;inset:var(--topo-h) 0 auto;flex-direction:column;gap:0;margin:0;
    background:var(--toga);padding:6px var(--goteira) 22px;display:none;
  }
  .nav[data-aberto="sim"]{display:flex}
  .nav a{padding-block:14px;border-bottom:1px solid var(--regua-clara);font-size:17px;color:var(--claro)}
  .nav a:last-child{border-bottom:0}
  .topo[data-solido="sim"] .nav a{color:var(--claro)}
  .marca__logo{height:34px}
}

/* ---------- HERÓI ---------- */
/* imagem sangra de ponta a ponta; o texto fica no grid de 1240 */
.heroi{
  position:relative;isolation:isolate;
  min-height:100vh;          /* reserva para navegadores sem dvh */
  min-height:100dvh;         /* altura real da viewport, sem as barras do mobile */
  display:flex;align-items:flex-end;
  padding-top:calc(var(--topo-h) + clamp(28px,5vw,56px));
  padding-bottom:clamp(34px,5vw,64px);
  color:var(--claro);
  background:var(--toga);
}
.heroi::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(12,25,20,.82) 0%,rgba(12,25,20,.42) 140px,rgba(12,25,20,0) 300px),
    linear-gradient(to top,rgba(15,32,25,.92) 0%,rgba(15,32,25,.54) 44%,rgba(15,32,25,.18) 100%);
}
.ph--heroi{z-index:-2}

.heroi__in{width:100%}

/* base da imagem: declaração à esquerda, resumo e ação à direita */
.heroi__sobre{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(24px,4vw,72px);align-items:end;
}
.heroi__esq{display:flex;flex-direction:column;gap:clamp(14px,2vw,24px)}
.sobre-linha{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(237,241,238,.72);
}
.heroi__dir{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:5px}
.heroi__dir p{font-size:14px;line-height:1.6;color:rgba(237,241,238,.76);max-width:48ch}
.heroi__acao{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

/* faixa intermediária: a coluna da direita precisa de mais espaço
   para o resumo caber em duas linhas */
@media (min-width:961px) and (max-width:1200px){
  .heroi__sobre{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}

@media (max-width:960px){
  .heroi{padding-bottom:44px}
  .heroi__sobre{grid-template-columns:1fr;gap:28px;align-items:start}
}

/* ---------- BOTÕES E LINKS ---------- */
.btn{
  display:inline-block;font-size:14px;font-weight:500;
  padding:13px 24px;border:1px solid var(--ambar);background:var(--ambar);
  color:#20140A;text-decoration:none;border-radius:0;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--brasa);border-color:var(--brasa)}
/* variante com ícone: alinha glifo e texto sem mexer nos botões só de texto */
.btn--ico{display:inline-flex;align-items:center;gap:9px}
.btn--ico .ico{width:17px;height:17px}
.btn--claro{background:var(--claro);border-color:var(--claro);color:var(--toga)}
.btn--claro:hover{background:#fff;border-color:#fff}

.link-sub{
  font-size:14px;text-decoration:none;color:var(--claro);
  border-bottom:1px solid rgba(237,241,238,.35);padding-bottom:3px;
  transition:border-color .2s ease;
}
.link-sub:hover{border-bottom-color:var(--claro)}

/* ---------- BANDA DE IMAGEM ---------- */
.banda{position:relative;overflow:hidden;height:clamp(320px,58vw,860px);background:var(--papel)}

/* ---------- ACORDEÃO DE ÁREAS ---------- */
/* sem miniatura: a lista ocupa a largura inteira do grid */
.acordeao{display:block}
.acordeao__mini{position:sticky;top:calc(var(--topo-h) + 40px);aspect-ratio:3/4}
.acordeao__lista{display:flex;flex-direction:column;border-top:1px solid var(--regua)}

.linha{border-bottom:1px solid var(--regua)}
.linha h3{margin:0}
.linha [data-gatilho]{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(20px,2.3vw,27px);line-height:1.2;letter-spacing:-.01em;
  color:var(--ink-3);
  transition:color .2s ease;
}
.linha [data-gatilho]:hover{color:var(--ink)}
.linha [data-gatilho][aria-expanded="true"]{color:var(--ink)}
.linha [data-gatilho]::after{
  content:"";flex:0 0 auto;width:11px;height:11px;align-self:center;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.linha [data-gatilho][aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}

.linha__corpo{padding-bottom:24px;max-width:80ch}
.linha__corpo p{color:var(--ink-2)}

/* a nota fecha a lista: alinhada à coluna do acordeão, não solta na página */
.acordeao__lista .rodape-nota{margin-top:22px}

@media (max-width:820px){
  .acordeao{grid-template-columns:1fr}
  .acordeao__mini{position:static;aspect-ratio:16/10;max-height:280px}
  /* a miniatura passa a viver dentro da linha aberta */
  .linha__corpo .acordeao__mini{
    aspect-ratio:4/3;max-height:none;
    margin-bottom:18px;
  }
}

/* ---------- O ADVOGADO ---------- */
.advogado{background:var(--pedra)}
/* a foto é fundo: sangra até a borda. O texto respeita a goteira do grid. */
.advogado__in{
  max-width:none;padding-inline:0;
  display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  align-items:stretch;
}
.advogado__foto{min-height:clamp(360px,44vw,640px)}
.advogado__txt{
  display:flex;flex-direction:column;gap:18px;
  padding-block:var(--ar);
  padding-left:clamp(28px,4vw,64px);
  padding-right:max(var(--goteira),(100vw - var(--max)) / 2 + var(--goteira));
  max-width:none;
}
.advogado__txt .etiqueta{margin-bottom:26px}
.advogado__txt p{color:var(--ink-2);max-width:80ch}

.ficha{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--regua)}
.ficha > div{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:20px;
  padding-block:13px;border-bottom:1px solid var(--regua-fina);
}
.ficha dt{font-size:13px;color:var(--ink-3)}
.ficha dd{margin:0;font-size:14px;color:var(--ink)}

@media (max-width:900px){
  .advogado__in{grid-template-columns:1fr}
  .advogado__foto{min-height:clamp(300px,64vw,460px)}
  .advogado__txt{padding:clamp(44px,8vw,72px) var(--goteira)}
}
@media (max-width:460px){
  .ficha > div{grid-template-columns:1fr;gap:2px}
}

/* ---------- CITAÇÃO ---------- */
.citacao{margin-top:26px;max-width:62ch}
.citacao blockquote{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.1vw,24px);line-height:1.42;color:var(--ink);
}
.citacao blockquote::before{content:"\201C"}
.citacao blockquote::after{content:"\201D"}
.citacao figcaption{font-size:12px;color:var(--ink-3);margin-top:12px}


/* ---------- DEPOIMENTO ---------- */
.depo{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px);align-items:start;
  margin-top:clamp(44px,5vw,68px);
  padding:clamp(26px,3.2vw,42px);
  border:1px solid var(--regua-clara);
  background:rgba(237,241,238,.035);
}
.depo__aspas{
  width:clamp(24px,2.4vw,32px);height:auto;flex:0 0 auto;
  color:var(--ambar);
}
.depo blockquote{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.1vw,25px);line-height:1.45;
  color:var(--claro);
  max-width:60ch;
}
.depo__autor{
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(22px,2.6vw,30px);
  padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--regua-clara);
}
.depo__foto{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden}
.depo__nome{display:flex;flex-direction:column;gap:3px}
.depo__nome strong{font-size:14px;font-weight:500;color:var(--claro)}
.depo__nome > span{font-size:12px;line-height:1.5;color:var(--claro-2)}

/* variante para as faixas claras */
.depo--papel{border-color:var(--regua);background:rgba(18,33,26,.022)}
.depo--papel blockquote{color:var(--ink)}
.depo--papel .depo__autor{border-top-color:var(--regua)}
.depo--papel .depo__nome strong{color:var(--ink)}
.depo--papel .depo__nome > span{color:var(--ink-3)}

@media (max-width:560px){
  .depo{grid-template-columns:1fr;gap:16px}
  .depo__autor{align-items:flex-start;flex-direction:column;gap:12px}
}

/* ---------- LINHAGEM — acordeão de gerações ---------- */
/* fechada mostra só era + nome; clicar abre retrato e texto */
.linhagem{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--regua-clara)}
.ger{border-bottom:1px solid var(--regua-clara)}
.ger h3{margin:0}
.ger [data-gatilho]{
  width:100%;display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,48px);align-items:baseline;
  background:none;border:0;padding:20px 0;cursor:pointer;text-align:left;
  color:inherit;
}
.ger__era{font-size:12px;letter-spacing:.03em;color:var(--claro-2)}
.ger__nome{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(19px,2.1vw,25px);line-height:1.24;letter-spacing:-.012em;
  color:var(--claro-2);transition:color .2s ease;
}
.ger [data-gatilho]:hover .ger__nome{color:var(--claro)}
.ger [data-gatilho][aria-expanded="true"] .ger__nome{color:var(--claro)}
.ger--hoje .ger__era,.ger--hoje .ger__nome{color:var(--ambar)}
.ger--hoje [data-gatilho]:hover .ger__nome{color:var(--brasa)}

.ger [data-gatilho]::after{
  content:"";width:11px;height:11px;align-self:center;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  color:var(--claro-2);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.ger [data-gatilho][aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* mesmo gabarito do botão: tudo alinhado sob o nome, foto acima do texto */
.ger__corpo{
  display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);
  gap:16px clamp(18px,3vw,48px);
  padding-bottom:26px;
}
.ger__txt{grid-column:2;display:flex;flex-direction:column;gap:12px;max-width:none}
.ger__txt p{font-size:14px;line-height:1.65;color:var(--claro-2)}

@media (max-width:860px){
  .ger [data-gatilho]{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
  .ger__era{grid-column:1;font-size:11px}
  .ger__nome{grid-column:1}
  .ger [data-gatilho]::after{grid-column:2;grid-row:1 / span 2}
  .ger__corpo{grid-template-columns:1fr;gap:14px}
  .ger__txt{grid-column:1}
}

/* ---------- TRAJETÓRIA PÚBLICA ---------- */
/* dois grupos rotulados; cada cargo é uma linha com filete:
   papel à esquerda, órgão e período à direita */
.trajeto{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,4vw,52px);
  margin-top:clamp(40px,5vw,72px);
}
.trajeto__titulo{
  font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--regua);
}
.trajeto__lista{display:flex;flex-direction:column}
.trajeto__lista li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 20px;
  padding-block:15px;border-bottom:1px solid var(--regua-fina);
}
.trajeto__papel{font-size:15px;line-height:1.4;color:var(--ink)}
.trajeto__ctx{font-size:13px;line-height:1.5;color:var(--ink-3);text-align:right}

@media (max-width:760px){
  .trajeto{gap:30px}
  .trajeto__lista li{justify-content:flex-start;gap:2px}
  .trajeto__ctx{text-align:left;width:100%}
}

/* ---------- SEGMENTOS — cartões ---------- */
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(40px,5vw,72px);
}
.card{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--regua);
  background:rgba(18,33,26,.022);
  transition:border-color .2s ease,background-color .2s ease;
}
.card:hover{border-color:var(--regua-forte,rgba(18,33,26,.24));background:rgba(18,33,26,.04)}
.card__ico{width:24px;height:24px;flex:0 0 auto;color:var(--realce)}
.card__txt{font-size:15px;line-height:1.45;color:var(--ink)}

.faixa--toga .card{border-color:var(--regua-clara);background:rgba(237,241,238,.04)}
.faixa--toga .card__txt{color:var(--claro)}
.faixa--toga .card__ico{color:var(--ambar)}

@media (max-width:860px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- CONTATO ---------- */
.contato{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(34px,6vw,96px);align-items:start;
}
.contato__esq{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.contato__esq .etiqueta{margin-bottom:26px;width:100%}
.contato__lede{color:var(--claro-2);max-width:none}

.dados{
  display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;
  width:100%;margin-top:14px;padding-top:26px;border-top:1px solid var(--regua-clara);
}
.dados dt{font-size:12px;letter-spacing:.03em;color:var(--claro-2);margin-bottom:6px}
.dados dd{
  display:flex;align-items:flex-start;gap:9px;
  margin:0;font-size:14px;line-height:1.6;color:var(--claro);
}
.dados a{text-decoration:none;border-bottom:1px solid var(--regua-clara)}
.dados a:hover{border-bottom-color:var(--ambar)}

/* ícone herda a cor e o tamanho do texto ao redor */
.ico{
  width:1em;height:1em;flex:0 0 auto;
  stroke-width:1.75;
  vertical-align:-.14em;
}
/* alinha o ícone à primeira linha da resposta, não ao centro do bloco */
.dados dd > .ico{width:15px;height:15px;margin-top:.3em;color:var(--ambar)}

.dados__redes{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dados__redes a{display:inline-flex;align-items:center;gap:8px}
.dados__redes .ico{width:15px;height:15px;color:var(--claro-2);transition:color .2s ease}
.dados__redes a:hover .ico{color:var(--ambar)}

/* painel leve: separa o formulário do fundo sem virar caixa pesada */
.form{
  display:flex;flex-direction:column;gap:22px;
  padding:clamp(24px,3vw,38px);
  background:rgba(237,241,238,.04);
  border:1px solid var(--regua-clara);
}
.campo{display:flex;flex-direction:column;gap:6px}
.campo--par{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.campo--par > div{display:flex;flex-direction:column;gap:6px}
.form label{font-size:12px;letter-spacing:.03em;color:var(--claro-2)}
.form input,.form select,.form textarea{
  width:100%;background:transparent;color:var(--claro);
  border:0;border-bottom:1px solid var(--regua-clara);border-radius:0;
  padding:9px 0;font-size:15px;
  transition:border-color .2s ease;
}
.form textarea{resize:vertical;min-height:70px}
.form select{appearance:none}
.form select option{background:var(--toga);color:var(--claro)}
.form input:hover,.form select:hover,.form textarea:hover{border-bottom-color:rgba(237,241,238,.36)}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--ambar);outline-offset:4px}
.form .btn{align-self:flex-start;margin-top:4px}
.erro{font-size:12px;color:#F2A99C}
.erro:empty{display:none}
[aria-invalid="true"]{border-bottom-color:#C4685A !important}
.status{font-size:14px;line-height:1.5;color:var(--claro-2)}
.status:empty{display:none}
.status[data-ok="sim"]{color:var(--ambar)}

@media (max-width:900px){.contato{grid-template-columns:1fr}}
@media (max-width:520px){
  .campo--par{grid-template-columns:1fr}
  .dados{grid-template-columns:1fr}
}

/* ---------- PÁGINAS LEGAIS ---------- */
/* nessas páginas o topo é sólido desde o início: não há herói escuro atrás */
.legal{
  padding-top:calc(var(--topo-h) + clamp(44px,6vw,84px));
  padding-bottom:var(--ar);
  background:var(--papel);
}
.legal__cab{padding-bottom:clamp(30px,4vw,48px);border-bottom:1px solid var(--regua)}
.legal__data{font-size:13px;color:var(--ink-3);margin-top:14px}
.legal__corpo{display:flex;flex-direction:column;gap:clamp(30px,3.6vw,46px);margin-top:clamp(34px,4vw,56px)}
.legal__corpo section{display:flex;flex-direction:column;gap:12px;max-width:76ch}
.legal__corpo h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(20px,2.2vw,26px);line-height:1.24;letter-spacing:-.012em;
}
.legal__corpo p,.legal__corpo li{font-size:15px;line-height:1.7;color:var(--ink-2)}
.legal__corpo ul{display:flex;flex-direction:column;gap:9px;padding-left:18px;list-style:disc}
.legal__corpo li{padding-left:4px}
.legal__corpo a{color:var(--realce);text-decoration:none;border-bottom:1px solid var(--regua)}
.legal__corpo a:hover{border-bottom-color:var(--realce)}
.legal__volta{display:inline-block;margin-top:clamp(34px,4vw,52px);font-size:14px}

/* ---------- RODAPÉ ---------- */
.rodape{background:var(--toga);color:var(--claro);padding-block:clamp(34px,4vw,52px)}
.rodape__linha{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;padding-bottom:26px;border-bottom:1px solid var(--regua-clara);
}
.rodape .marca__logo{height:46px}
.rodape__nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px)}
.rodape__nav a{font-size:13px;color:var(--claro-2);text-decoration:none}
.rodape__nav a:hover{color:var(--claro)}
/* base do rodapé: copyright à esquerda, documentos legais à direita */
.rodape__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 28px;padding-top:24px;
}
.rodape__copy{font-size:13px;color:var(--claro-2)}
.rodape__legal{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,30px)}
.rodape__legal a{
  font-size:13px;color:var(--claro-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.rodape__legal a:hover{color:var(--claro);border-bottom-color:var(--ambar)}
.pendente{color:var(--ambar)}

/* ---------- ENTRADA DO HERÓI ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-heroi] [data-seq]{opacity:0;transform:translateY(12px)}
  [data-heroi][data-pronto="sim"] [data-seq]{
    opacity:1;transform:none;
    transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
  }
  [data-heroi][data-pronto="sim"] [data-seq="1"]{transition-delay:.06s}
  [data-heroi][data-pronto="sim"] [data-seq="2"]{transition-delay:.2s}
  [data-heroi][data-pronto="sim"] [data-seq="3"]{transition-delay:.36s}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}