/* ==========================================================================
   LA'CARV ADVOGADOS ASSOCIADOS  ·  site.css  (estrutura e comportamento)
   Prefixo de dominio: lc-
   Cor NUNCA em hex aqui. Tudo vem de --s-* (tema de secao) ou dos tokens de
   branding.css. Se precisar de uma cor nova, ela nasce em branding.css e e
   revalidada por tools/verifica-contraste.php.
   Criado em 18/08/2026.

   SISTEMA DE EFEITOS, EM QUATRO CATEGORIAS.
   A regra antiga dizia "3 efeitos e so 3". Ela ja nao descrevia o codigo
   (pulse, marquee, spotlight, settle, barra de progresso e outros ja
   existiam), e documentacao que mente e pior do que documentacao nenhuma:
   ou faz a manutencao tratar efeito legitimo como violacao, ou serve de
   desculpa para empilhar efeito sem criterio.

   O limite real nao e a QUANTIDADE de efeitos na pagina. E quantos disputam
   a atencao AO MESMO TEMPO.

   1. IDENTIDADE   sempre presentes, discretos, nunca chamam atencao.
      grao, atmosfera, filetes, trilho, papel, luz dourada.
   2. ENTRADA      so quando o conteudo entra na viewport, uma vez.
      reveal Y/X, settle de imagem, desenho de linha, clip, stagger.
   3. INTERACAO    so quando o usuario age.
      spotlight local, resposta de icone, sublinhado, sheen do botao,
      micro lift, feedback de clique, acordeao.
   4. ASSINATURA   no maximo 5 na pagina inteira.
      hero, mapa da Assessoria, diagrama do Nucleo, linha da Trajetoria,
      ledger dos Projetos, fechamento do CTA.

   ESCALA DE INTENSIDADE por area (0 estatico, 4 momento assinatura):
      texto 1 · FAQ 2 · cards 2 · header 2 · trajetoria 3 · projetos 3
      CTA 3 · hero 4 · nucleo 4 · footer 1
   Nunca colocar tudo em 4.
   ========================================================================== */

/* ==========================================================================
   1. RESET E BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--deep);
  color:var(--text-1);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  font-feature-settings:"ss01" 1,"cv11" 1,"tnum" 0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Trava de corpo quando o drawer mobile esta aberto */
body.is-locked{overflow:hidden}

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:700;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin:0;
  color:var(--s-ink,var(--paper));
  text-wrap:balance;
}
p{margin:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

/* REGRA DE FERRO (§4.2): italico e serifa banidos. <em> nunca inclina, so   */
/* vira gancho de degrade na cor de destaque.                                */
em,i,cite,dfn,var,address{font-style:normal}

::selection{background:var(--gold);color:var(--deep)}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
[data-sec="brand"] :focus-visible,
[data-sec="paper"] :focus-visible,
[data-sec="paper-2"] :focus-visible{outline-color:var(--gold-ink)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  padding:12px 20px;border-radius:var(--r-sm);
  background:var(--gold);color:var(--deep);font-weight:700;
  transition:top var(--t) var(--e-out);
}
.skip:focus-visible{top:16px}

/* ==========================================================================
   2. CONTAINER UNICO (§5.4)
   Header, hero, toda secao e footer usam ESTA classe. Nunca redeclarar
   max-width ou padding lateral dentro de uma secao.
   ========================================================================== */

.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.container--narrow{max-width:var(--container-narrow)}

.sec[data-seam]{box-shadow:none}
.sec{
  position:relative;
  padding-block:var(--sec-pad);
  /* §30.2: toda secao declara fundo solido proprio. O body e petroleo, e um */
  /* vao transparente vazaria petroleo sobre petroleo e sumiria com o texto. */
  background:var(--s-bg);
  isolation:isolate;
  /* Aresta padrao. Seccoes com data-seam desenham a propria costura e
     dispensam este filete generico. */
  box-shadow:inset 0 1px 0 var(--s-edge,transparent);
}
/* CAMADA A e B: cor solida (--s-bg, no proprio .sec) + iluminacao (--s-atmo).
   A atmosfera fica ACIMA do fundo e ABAIXO do conteudo, entao nunca
   interfere na legibilidade nem intercepta o ponteiro.
   A emenda (--seam) entra como primeira camada da mesma pilha, o que evita
   criar um elemento so para desenhar a costura. */
.sec::before,
.foot::before{
  content:"";position:absolute;inset:0;z-index:var(--z-atmo);pointer-events:none;
  background:var(--seam,none),var(--s-atmo,none);
}

/* CAMADA C: estrutura quase invisivel.
   Opt-in por data-fx, nunca global. Vive no ::after para nao disputar com a
   atmosfera, e sempre com mascara, para morrer antes de chegar no texto.
   Nao e "blueprint azul": a linha nasce da propria tinta da secao. */
.sec::after{
  content:"";position:absolute;inset:0;z-index:var(--z-pattern);pointer-events:none;
  background:var(--s-pattern,none);
  -webkit-mask-image:var(--s-pattern-mask,none);
  mask-image:var(--s-pattern-mask,none);
}
[data-fx~="grid"]{
  --s-pattern:
    linear-gradient(color-mix(in srgb,var(--s-ink) var(--fx-grid-opacity),transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--s-ink) var(--fx-grid-opacity),transparent) 1px,transparent 1px);
  background-size:var(--fx-grid) var(--fx-grid);
  --s-pattern-mask:radial-gradient(128% 82% at 50% 0%,#000 8%,transparent 72%);
}
.sec[data-fx~="grid"]::after{background-size:var(--fx-grid) var(--fx-grid)}

/* SEAMS: a emenda entre duas secoes deixa de ser um corte de tinta.
   Alternar os tipos, nunca usar o mesmo tres vezes seguidas. */
/* A. escuro para escuro: um fio de luz, com o brilho no centro */
[data-seam="luz"]{
  --seam:
    radial-gradient(46% 2px at 50% 0,color-mix(in srgb,var(--gold) 52%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--gold) 16%,transparent) 0 1px,transparent 1px);
}
/* B. escuro para claro: dobra de papel, uma faixa que sugere mudanca de plano */
[data-seam="dobra"]{
  --seam:linear-gradient(180deg,
    color-mix(in srgb,var(--deep) 13%,transparent) 0,
    color-mix(in srgb,var(--deep) 4%,transparent) 9px,
    transparent 22px);
}
/* C. claro para escuro: corte editorial, assimetrico, sem diagonal gigante */
[data-seam="corte"]{
  --seam:
    linear-gradient(90deg,color-mix(in srgb,var(--gold) 46%,transparent) 0 96px,transparent 96px) no-repeat 0 0/100% 2px,
    linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,transparent) 0 1px,transparent 1px);
}
.sec--tight{padding-block:clamp(44px,6vw,84px)}

/* No mobile, #nucleo sobe pra logo depois do hero (era o 4o bloco, vira o
   2o). So reordena visualmente via flex order — o DOM e o desktop ficam
   intactos. Seguro pros seams: hero/nucleo/setor/assessoria sao
   deep/slate/paper/deep, e deep+slate contam como "escuro" pro par de
   data-seam (ver branding.css §dark bucket) — luz/dobra/corte de cada
   secao continuam corretos na nova ordem sem precisar trocar nenhum. */
@media (max-width:899px){
  #conteudo{display:flex;flex-direction:column}
  #conteudo .hero{order:-4}
  #conteudo #nucleo{order:-3}
  #conteudo #setor{order:-2}
  #conteudo #assessoria{order:-1}
}

/* ==========================================================================
   3. GRAIN (efeito 1 de 3)
   Ruido SVG fixo sobre a pagina inteira. Nao intercepta ponteiro.
   ========================================================================== */

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.048;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. TRILHO DA ESTRUTURA (efeito 2 de 3, o movimento-heroi)
   Fio dourado no rail esquerdo que cresce com o scroll. Nativo, 0 KB.
   ESTADO BASE SEGURO (§30.3): scaleY(0). Se a timeline nao resolver, o fio
   fica vazio, nunca cheio.
   ========================================================================== */

/* Ancorado na CALHA real do container, nunca espremido na borda da tela.   */
/* Por isso so aparece a partir de 1340px, onde existe calha de verdade:    */
/* mais estreito que isso ele viraria dois riscos soltos no canto.          */
.rail{
  position:fixed;
  left:calc((100vw - var(--container-w)) / 2 - 30px);
  top:calc(var(--header-h) + 48px);
  bottom:48px;
  width:16px;
  z-index:3;
  pointer-events:none;
  display:none;
}
.rail__track{
  position:absolute;left:7px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb,var(--gold) 26%,transparent) 12%,
    color-mix(in srgb,var(--gold) 26%,transparent) 88%,
    transparent);
}
.rail__fill{
  position:absolute;left:6px;top:0;bottom:0;width:3px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--gold-lift),var(--gold) 40%,var(--edge));
  transform:scaleY(0);
  transform-origin:top center;
  box-shadow:0 0 14px color-mix(in srgb,var(--gold) 46%,transparent);
}
.rail__cap{
  position:absolute;left:0;width:16px;height:16px;
  color:var(--gold);
  opacity:.85;
}
.rail__cap--top{top:-26px}
.rail__cap--bot{bottom:-26px}

@media (min-width:1340px){.rail{display:block}}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .rail__fill{
      animation:lc-rail linear both;
      animation-timeline:scroll(root block);
    }
  }
}
@keyframes lc-rail{to{transform:scaleY(1)}}

/* ==========================================================================
   5. TIPOGRAFIA DE APOIO
   ========================================================================== */

/* flex de nivel de bloco, nao inline-flex: com inline-flex o rotulo herda
   largura shrink-to-fit, o texto quebra cedo e o filete fica boiando ao
   lado da 1a linha. Bug real, 18/08/2026. */
/* CENTRAGEM DE ICONE, regra unica para a pagina inteira.
   grid + place-items resolve os dois eixos, e line-height:0 mata o espaco
   de linha que o inline-svg herda e que empurrava o glifo alguns pixels
   para baixo dentro do chip. Sem isso o icone fica "quase" no meio, que e
   pior do que estar visivelmente torto. */
/* Sem !important e SEM os controles que trocam de display por media query
   (.mhead__burger some no desktop, .dock__mid so existe no mobile). O
   !important daqui vencia o display:none do breakpoint e trazia o
   hamburguer de volta junto com o menu de desktop. Bug meu, 18/08/2026. */
.card__ico,.frente__i,.dif__i i,.mvv__c i,.chain__i i,.ct__i i,.inst i,
.mega__ico,.hero__badge i,.social a,.drawer__x,.dock__mid i{
  display:grid;
  place-items:center;
  line-height:0;
}
.mhead__burger{line-height:0}
.card__ico>svg,.frente__i>svg,.dif__i i>svg,.mvv__c i>svg,.chain__i i>svg,
.ct__i i>svg,.inst i>svg,.mega__ico>svg,.hero__badge i>svg,.social a>svg,
.dock__mid i>svg{display:block;margin:0}

.eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--f-display);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--s-accent);
  margin:0;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--s-accent-fill);
  flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--s-accent-fill) 60%,transparent);
  animation:lc-pulse 2.8s var(--e-out) infinite;
}
@keyframes lc-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--s-accent-fill) 55%,transparent)}
  55%{box-shadow:0 0 0 7px transparent}
}
/* O filete ocupa a sobra e encosta sempre no fim do rotulo. Sem isso, um   */
/* eyebrow longo quebra e deixa a linha boiando no meio do vazio (§26.8).   */
.eyebrow--line::after{
  content:"";flex:none;width:clamp(28px,5vw,64px);height:1px;
  background:linear-gradient(90deg,var(--s-accent-fill),transparent);
}

/* <em> = degrade na cor de destaque, jamais italico */
em{
  background:linear-gradient(96deg,var(--s-em-a,var(--gold-lift)),var(--s-em-b,var(--edge)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* Rede: se background-clip falhar, o texto cai numa cor solida legivel */
  text-shadow:none;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  em{-webkit-text-fill-color:currentColor;color:var(--s-accent);background:none}
}
/* Fim do degrade derivado por mistura, nao um hex novo: a paleta continua   */
/* fechada (§28.1) e o tom final fica mais escuro que o gold-ink, ou seja,   */
/* acima dos 4.66:1 ja medidos sobre papel.                                  */
[data-sec="paper"],[data-sec="paper-2"]{
  --s-em-a:var(--gold-ink);
  --s-em-b:color-mix(in srgb,var(--gold-ink) 72%,var(--deep));  /* 6.09:1 no papel composto */
}
[data-sec="brand"]{--s-em-a:var(--deep);--s-em-b:var(--ink)}

.shead{max-width:64ch}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .eyebrow{justify-content:center}
.shead__title{
  font-size:var(--fs-h2);
  font-weight:600;
  margin-top:var(--sp-3);
  color:var(--s-ink);
}
.shead__lead{
  font-size:var(--fs-lead);
  color:var(--s-ink-2);
  margin-top:var(--sp-4);
  max-width:58ch;
  line-height:1.6;
}
.shead--center .shead__lead{margin-inline:auto}

.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--s-ink-2)}

/* RITMO VERTICAL EM ESCALA.
   Antes cada bloco carregava seu proprio margin-top escrito no HTML
   (26px aqui, clamp(46px,5.4vw,72px) ali, 14px acola), entao nenhum respiro
   da pagina batia com o outro. Agora sao 8 degraus, e so eles. */
.mt-1{margin-top:var(--sp-1)}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}
.mt-8{margin-top:var(--sp-8)}
.measure-sm{max-width:52ch}
.measure-22{max-width:22ch}
.measure-24{max-width:24ch}
.mb-3{margin-bottom:var(--sp-3)}
.inst--full{flex:1 1 100%}
.measure{max-width:60ch}
.h3{font-size:var(--fs-h3)}
.muted{color:var(--s-ink-3)}
.tabular{font-variant-numeric:tabular-nums}

/* ==========================================================================
   6. BOTOES  (um sistema so, §14)
   ========================================================================== */

.btn{
  --btn-bg:var(--s-accent-fill);
  --btn-ink:var(--s-on-accent);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;
  border:0;border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-ink);
  font-family:var(--f-display);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out),
             background-color var(--t) var(--e-out),color var(--t) var(--e-out);
}
.btn svg{width:18px;height:18px;flex:none}

/* background-color solido POR BAIXO do degrade: se o gradiente nao pintar   */
/* (motor antigo, modo de alto contraste), o botao cai em dourado chapado,   */
/* nunca em transparente com tinta petroleo sobre fundo petroleo.            */
.btn--primary{
  background-color:var(--gold);
  background-image:linear-gradient(140deg,var(--gold-lift),var(--gold) 46%,var(--brand));
  color:var(--deep);
  box-shadow:var(--sh-gold);
}
/* SHINE SWEEP (efeito 3 de 3) - exclusivo do CTA primario */
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.62) 50%,transparent 62%);
  transform:translateX(-130%) skewX(-18deg);
}
.btn--ghost{
  background:transparent;
  color:var(--s-ink);
  box-shadow:inset 0 0 0 1px var(--s-line);
}
.btn--ghost:hover{
  background:color-mix(in srgb,var(--s-accent-fill) 12%,transparent);
  box-shadow:inset 0 0 0 1px var(--s-accent-fill);
  color:var(--s-ink);
}
.btn--solid{
  background:var(--s-ink);
  color:var(--s-bg);
}
.btn--sm{padding:11px 20px;font-size:var(--fs-micro)}
.btn--lg{padding:18px 34px;font-size:var(--fs-body)}
.btn--block{width:100%}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--primary:hover{
    box-shadow:
      0 3px 8px rgba(6,20,24,.30),
      0 18px 42px color-mix(in srgb,var(--gold) 34%,transparent),
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -1px 0 rgba(21,51,59,.22);
  }
  .btn--primary:hover::after{
    transform:translateX(130%) skewX(-18deg);
    transition:transform .78s var(--e-out);
  }
  .btn--solid:hover{background:var(--s-accent-fill);color:var(--s-on-accent)}
}
.btn:active{transform:translateY(0)}

/* Link com seta que anda */
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);
  color:var(--s-accent);
  white-space:nowrap;
}
.arrow-link{position:relative;padding-bottom:3px}
.arrow-link svg{width:16px;height:16px;transition:transform var(--t) var(--e-out)}
/* Sublinhado que desenha da esquerda, em vez de piscar inteiro. */
.arrow-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--e-out);
}
@media (hover:hover){
  .arrow-link:hover svg{transform:translateX(5px)}
  .arrow-link:hover::after{transform:scaleX(1)}
}

/* Chip / badge */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--s-accent-fill) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 30%,transparent);
  color:var(--s-accent);
  font-family:var(--f-display);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;
  white-space:nowrap;
}
.chip svg{width:14px;height:14px}

/* ==========================================================================
   7. CARD BASE
   Filete que acende no topo + hairline. Altura igualada pelo grid.
   ========================================================================== */

.card{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  padding:clamp(22px,2.6vw,32px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-1);
  overflow:hidden;
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out),
             background-color var(--t) var(--e-out);
}
[data-sec="paper"] .card,[data-sec="paper-2"] .card{box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-p1)}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--s-accent-fill),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--e-out);
}
@media (hover:hover){
  .card:hover{
    transform:translateY(-4px);
    background:var(--s-card-2);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 34%,transparent),var(--el-2);
  }
  [data-sec="paper"] .card:hover,[data-sec="paper-2"] .card:hover{
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 46%,transparent),var(--el-p2);
  }
  .card:hover::before{transform:scaleX(1)}
}

.card__ico{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  margin-bottom:18px;
  color:var(--s-accent);
  background:color-mix(in srgb,var(--s-accent-fill) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 26%,transparent);
  transition:background-color var(--t) var(--e-out),color var(--t) var(--e-out);
}
.card__ico svg{width:22px;height:22px;transition:transform var(--t) var(--e-spring)}
@media (hover:hover){
  .card:hover .card__ico{
    background:var(--s-accent-fill);color:var(--s-on-accent);
    box-shadow:inset 0 0 0 1px transparent,0 6px 16px color-mix(in srgb,var(--s-accent-fill) 34%,transparent);
  }
  .card:hover .card__ico svg{transform:scale(1.08)}
}
.card__title{font-size:var(--fs-h4);font-weight:700;color:var(--s-ink)}
.card__text{margin-top:10px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.62}
.card__foot{margin-top:auto;padding-top:20px}

/* BRILHO QUE SEGUE O PONTEIRO.
   Uma luz suave nasce sob o cursor dentro do card. E o unico efeito que
   responde ao movimento do mouse na pagina inteira (o cursor glow global
   ficou de fora de proposito, §26.2), entao ele nao compete com nada.
   Desliga em touch e em prefers-reduced-motion. */
@media (hover:hover) and (pointer:fine){
  .card,.qa__item,.proj__c,.mvv__c,.person,.def__card,.bignum{position:relative}
  .card::after,.qa__item::after,.proj__c::after,.mvv__c::after,
  .person::after,.def__card::after,.bignum::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    border-radius:inherit;
    opacity:0;transition:opacity var(--t-slow) var(--e-out);
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--s-accent-fill) 15%,transparent), transparent 62%);
  }
  .card:hover::after,.qa__item:hover::after,.proj__c:hover::after,
  .mvv__c:hover::after,.person:hover::after,.def__card:hover::after{opacity:1}
  /* .bignum ja usa ::after como filete lateral, entao fica fora do brilho */
  .bignum::after{opacity:1;background:linear-gradient(180deg,var(--s-accent-fill),transparent 82%)}
  .card > *,.qa__item > *,.proj__c > *,.mvv__c > *,.person > *,.def__card > *{position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .card::after,.qa__item::after,.proj__c::after,.mvv__c::after,
  .person::after,.def__card::after{display:none}
}

/* grid utilitario: cards da mesma linha com a MESMA altura */
.grid{display:grid;gap:var(--gap);align-items:stretch}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* ==========================================================================
   8. HEADER
   §5.3: nav NUNCA quebra linha. nowrap no link, nowrap no container.
   ========================================================================== */

.mhead{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-header);
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out),
             backdrop-filter var(--t) var(--e-out),height var(--t) var(--e-out);
}
.mhead::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 86%,transparent),transparent);
  transition:opacity var(--t) var(--e-out);
}
.mhead.is-scrolled{
  height:86px;
  background:color-mix(in srgb,var(--deep) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 1px 0 color-mix(in srgb,var(--gold) 18%,transparent),0 10px 34px rgba(6,20,24,.34);
}
.mhead.is-scrolled::after{opacity:0}

.mhead__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,32px);
  width:100%;
}
/* LOCKUP HORIZONTAL.
   A logo original empilha arvore sobre assinatura. Num header a assinatura
   sobra com poucos pixels e "ADVOGADOS ASSOCIADOS" fica ilegivel. Aqui a
   marca e a assinatura sao dois arquivos lado a lado, separados por um fio
   dourado, que e o mesmo arranjo da placa do escritorio. Ganho real: o
   "La'Carv" passa de ~18px de altura para ~31px no mesmo header. */
.mhead__brand{display:flex;align-items:center;gap:clamp(9px,1vw,14px);flex:none}
.mhead__mark{
  height:clamp(38px,4.2vw,54px);width:auto;
  transition:height var(--t) var(--e-out);
}
.mhead__word{
  height:clamp(28px,3vw,40px);width:auto;
  transition:height var(--t) var(--e-out);
}
.mhead__rule{
  width:1px;align-self:stretch;margin-block:clamp(6px,.8vw,10px);
  background:linear-gradient(180deg,transparent,
    color-mix(in srgb,var(--gold) 62%,transparent) 26%,
    color-mix(in srgb,var(--gold) 62%,transparent) 74%,transparent);
  flex:none;
}
.mhead.is-scrolled .mhead__mark{height:40px}
.mhead.is-scrolled .mhead__word{height:30px}

/* Mobile: piso do clamp() (38px/28px) era pequeno demais pro peso visual da
   marca sozinha no header estreito — +30% no conjunto (traço dourado
   acompanha via align-self:stretch, não precisa de regra própria). */
@media (max-width:640px){
  .mhead__mark{height:50px}
  .mhead__word{height:37px}
}

.mhead__nav{
  display:none;
  flex-wrap:nowrap;                       /* §5.3 nunca wrap */
  align-items:center;
  gap:clamp(4px,1.1vw,16px);
}
.mhead__nav a,.mhead__nav button{
  white-space:nowrap;                     /* §5.3 base da regra */
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;
  border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm);
  font-family:var(--f-display);
  font-size:clamp(.78rem,.68rem + .28vw,.875rem);
  font-weight:600;letter-spacing:-.005em;
  color:var(--text-1);
  transition:color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.mhead__nav a,.mhead__nav button{position:relative}
/* Marcador de secao ativa: um ponto sob o item, nao um bloco pintado.
   O bloco competia com o CTA dourado do canto por atencao. */
.mhead__nav a::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:4px;height:4px;margin-left:-2px;border-radius:var(--r-pill);
  background:var(--gold);
  transform:scale(0);
  transition:transform var(--t) var(--e-spring);
}
.mhead__nav a.is-active::after{transform:scale(1)}
.mhead__nav a:hover,.mhead__nav button:hover,
.mhead__nav a.is-active{color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,transparent)}
.mhead__nav .caret{width:13px;height:13px;flex:none;transition:transform var(--t) var(--e-out)}
.mhead__nav [aria-expanded="true"] .caret{transform:rotate(180deg)}
.mhead__nav [aria-expanded="true"]{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}

.mhead__act{display:flex;align-items:center;gap:10px;flex:none}
.mhead__cta{display:none}

/* barra de progresso de leitura */
.mhead__prog{
  position:absolute;left:0;right:0;bottom:0;height:5px;
  transform:scaleX(0);transform-origin:left center;   /* estado base vazio */
  background:linear-gradient(90deg,var(--edge),var(--gold),var(--gold-lift));
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .mhead__prog{animation:lc-prog linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes lc-prog{to{transform:scaleX(1)}}

/* A regra base do burger vem ANTES do media query. Se vier depois, ela vence
   por ordem de cascata (mesma especificidade) e o hamburguer aparece junto
   com o nav de desktop. Bug real, 18/08/2026. */
.mhead__burger{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);cursor:pointer;
  background:color-mix(in srgb,var(--gold) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent);
  color:var(--gold);
}
.mhead__burger svg{width:20px;height:20px}

@media (min-width:1120px){
  .mhead__nav{display:flex}
  .mhead__cta{display:inline-flex}
  .mhead__burger{display:none}
}

/* ==========================================================================
   9. MEGA-MENU (§5.5 variante B+C: grid de itens + sidebar com CTA)
   Painel sempre CLARO, mesmo com o site escuro. Contador ao vivo no eyebrow.
   ========================================================================== */

.mega{
  position:fixed;left:0;right:0;top:var(--header-h);z-index:var(--z-mega);
  display:none;
  background:var(--paper-2);
  color:var(--deep);
  box-shadow:0 26px 70px rgba(6,20,24,.42);
  border-top:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  /* Tema local: o painel e claro dentro de um site escuro */
  --s-bg:var(--paper-2);
  --s-ink:var(--deep);
  --s-ink-2:color-mix(in srgb,var(--deep) 80%,var(--paper-2));
  --s-ink-3:color-mix(in srgb,var(--deep) 62%,var(--paper-2));
  --s-accent:var(--gold-ink);
  --s-accent-fill:var(--gold);
  --s-on-accent:var(--deep);
  --s-card:var(--paper);
  --s-card-2:#FFFFFF;
  --s-line:color-mix(in srgb,var(--deep) 14%,var(--paper-2));
  --s-line-soft:color-mix(in srgb,var(--deep) 8%,var(--paper-2));
}
.mhead.is-scrolled + .mega{top:86px}
.mega.is-open{display:block;animation:lc-mega .34s var(--e-out) both}
@keyframes lc-mega{from{transform:translateY(-10px)}to{transform:none}}

.mega__in{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,3vw,44px);
  padding-block:clamp(26px,3vw,40px);
}
@media (min-width:980px){.mega__in{grid-template-columns:minmax(0,1fr) 296px}}

.mega__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--s-line);
}
.mega__grid{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));
}
.mega__item{
  display:flex;align-items:flex-start;gap:13px;
  padding:13px 14px;border-radius:var(--r-sm);
  transition:background-color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out);
}
@media (hover:hover){.mega__item:hover{background:var(--s-card);transform:translateX(3px)}}
.mega__ico{
  width:40px;height:40px;flex:none;
  border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--cat,var(--gold)) 15%,transparent);
  color:var(--cat-on);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--gold)) 30%,transparent);
  transition:transform var(--t) var(--e-spring),background-color var(--t) var(--e-out);
}
@media (hover:hover){.mega__item:hover .mega__ico{transform:scale(1.08) rotate(-3deg)}}
.mega__ico svg{width:19px;height:19px}
.mega__t{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);color:var(--s-ink);line-height:1.3}
.mega__d{font-size:var(--fs-micro);color:var(--s-ink-3);line-height:1.5;margin-top:3px}

.mega__side{
  padding:clamp(20px,2.4vw,26px);
  border-radius:var(--r);
  background:var(--deep);
  color:var(--text-1);
  /* dentro do aside o tema volta a ser escuro */
  --s-ink:var(--paper);--s-ink-2:var(--text-1);--s-ink-3:var(--text-2);
  --s-accent:var(--gold);--s-accent-fill:var(--gold);--s-on-accent:var(--deep);
  --s-line:color-mix(in srgb,#FFFFFF 14%,var(--deep));
  --s-line-soft:color-mix(in srgb,#FFFFFF 8%,var(--deep));
}
.mega__side .mega__t{color:var(--paper)}
.mega__side hr{border:0;height:1px;background:var(--s-line);margin:18px 0}

/* ==========================================================================
   10. DRAWER MOBILE + DOCK INFERIOR (§24)
   ========================================================================== */

.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:color-mix(in srgb,var(--deep) 72%,transparent);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--e-out),visibility var(--t);
}
.scrim.is-open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);
  width:min(400px,90vw);
  display:flex;flex-direction:column;
  background:var(--ink);
  box-shadow:-20px 0 60px rgba(6,20,24,.5);
  transform:translateX(102%);
  transition:transform .42s var(--e-out);
  overflow-y:auto;overscroll-behavior:contain;
  --s-ink:var(--paper);--s-ink-2:var(--text-1);--s-ink-3:var(--text-2);
  --s-accent:var(--gold);--s-accent-fill:var(--gold);--s-on-accent:var(--deep);
  --s-bg:var(--ink);
  --s-card:color-mix(in srgb,#FFFFFF 5%,var(--ink));
  --s-card-2:color-mix(in srgb,#FFFFFF 9%,var(--ink));
  --s-line:color-mix(in srgb,#FFFFFF 13%,var(--ink));
  --s-line-soft:color-mix(in srgb,#FFFFFF 7%,var(--ink));
}
.drawer.is-open{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--s-line);
  position:sticky;top:0;z-index:2;
  background:var(--ink);
}
.drawer__brand{display:flex;align-items:center;gap:11px}
.drawer__brand .mhead__mark{height:42px}
.drawer__brand .mhead__word{height:31px}
.drawer__x{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);cursor:pointer;
  background:color-mix(in srgb,var(--paper) 8%,transparent);
  color:var(--paper);
}
.drawer__x svg{width:19px;height:19px}
.drawer__body{padding:22px;flex:1}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav > a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 4px;
  font-family:var(--f-display);font-size:1.06rem;font-weight:700;
  color:var(--paper);
  border-bottom:1px solid var(--s-line-soft);
}
.drawer__nav > a svg{width:16px;height:16px;color:var(--gold);opacity:.55}
.drawer__nav > a:hover{color:var(--gold)}

.drawer details{border-bottom:1px solid var(--s-line-soft)}
.drawer summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 4px;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:1.06rem;font-weight:700;color:var(--paper);
}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{width:16px;height:16px;color:var(--gold);transition:transform var(--t) var(--e-out)}
.drawer details[open] summary svg{transform:rotate(180deg)}
.drawer details ul{padding:2px 4px 16px}
.drawer details a{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;font-size:var(--fs-sm);color:var(--text-1);
}
.drawer details a::before{
  content:"";width:5px;height:5px;border-radius:var(--r-pill);
  background:var(--gold);flex:none;opacity:.6;
}
.drawer details a:hover{color:var(--gold)}
.drawer__foot{
  padding:22px;border-top:1px solid var(--s-line);
  display:grid;gap:12px;
  background:var(--deep);
}
.drawer__meta{font-size:var(--fs-micro);color:var(--text-2);line-height:1.6}

/* dock inferior, estilo tab bar */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);
  height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 -1px 0 color-mix(in srgb,var(--gold) 16%,transparent),0 -10px 34px rgba(6,20,24,.4);
  transition:transform var(--t) var(--e-out);
}
.dock.is-hidden{transform:translateY(110%)}
.dock a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  height:100%;
  font-family:var(--f-display);font-size:.67rem;font-weight:600;letter-spacing:.01em;
  color:var(--text-1);
}
.dock a svg{width:20px;height:20px}
.dock a.is-active{color:var(--gold)}
.dock__mid{position:relative}
.dock__mid span.lbl{position:absolute;bottom:6px;font-size:.65rem;color:var(--gold)}
.dock__mid i{
  display:grid;place-items:center;
  width:54px;height:54px;border-radius:var(--r-pill);
  margin-bottom:14px;
  background-color:var(--gold);
  background-image:linear-gradient(140deg,var(--gold-lift),var(--gold) 48%,var(--brand));
  color:var(--deep);
  box-shadow:0 6px 20px color-mix(in srgb,var(--gold) 40%,transparent),
             inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(-14px);
}
.dock__mid i svg{width:25px;height:25px}

@media (min-width:1120px){.dock{display:none}}
@media (max-width:1119px){body{padding-bottom:var(--dock-h)}}

/* ==========================================================================
   11. WHATSAPP FLUTUANTE
   Some quando o rodape entra na viewport (JS).
   ========================================================================== */

/* Disco redondo, nao pilula: o glifo do app ja e o rotulo, e um circulo
   ocupa menos canto de tela. O rotulo aparece deslizando no hover, entao a
   informacao existe sem custar espaco o tempo todo.

   POR QUE O VERDE NAO E O #25D366 CRU: com glifo branco ele da 1.98:1, e o
   minimo para elemento grafico e 3:1. O disco usa um verde mais profundo
   (3.15:1) e o #25D366 fica no halo e no pulso, onde nao carrega o glifo.
   Assim o botao continua sendo lido como "WhatsApp" de longe sem reprovar. */
.wafloat{
  position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(20px,3vw,34px);
  z-index:var(--z-float);
  display:none;align-items:center;justify-content:center;
  width:60px;height:60px;padding:0;
  border-radius:var(--r-pill);
  background:
    radial-gradient(120% 120% at 30% 22%,color-mix(in srgb,#FFFFFF 22%,transparent),transparent 58%),
    linear-gradient(150deg,var(--wa),var(--wa-deep));
  color:#FFFFFF;
  box-shadow:
    0 2px 5px rgba(6,20,24,.28),
    0 10px 26px color-mix(in srgb,var(--wa) 42%,transparent),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.16);
  transition:transform var(--t-ui) var(--e-spring),
             box-shadow var(--t-ui) var(--e-out),
             width var(--t-ui) var(--e-emph);
}
.wafloat svg{width:29px;height:29px;flex:none;position:relative;z-index:2}

/* halo no verde vivo: e ele que da o reconhecimento a distancia */
.wafloat::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--wa-vivid) 46%,transparent),transparent 70%);
  filter:blur(7px);
  pointer-events:none;
}
/* anel de pulso: chama a atencao 4 vezes e para. Widget que pulsa para
   sempre vira alarme, e alarme o visitante aprende a ignorar. */
.wafloat::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--wa-vivid) 60%,transparent);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .wafloat::after{animation:lc-wa-pulse 2.9s var(--e-out) 2.2s 4}
}
@keyframes lc-wa-pulse{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--wa-vivid) 58%,transparent)}
  70% {box-shadow:0 0 0 17px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* rotulo que desliza: nasce atras do disco e sai pela esquerda */
.wafloat__lbl{
  position:absolute;right:52px;
  display:flex;align-items:center;
  height:44px;padding:0 20px 0 22px;
  border-radius:var(--r-pill);
  background:linear-gradient(150deg,var(--wa),var(--wa-deep));
  box-shadow:0 6px 18px rgba(6,20,24,.26);
  color:#FFFFFF;
  font-family:var(--f-display);font-size:.86rem;font-weight:700;
  white-space:nowrap;
  transform:translateX(14px) scaleX(.86);
  transform-origin:right center;
  opacity:0;visibility:hidden;
  transition:transform var(--t-ui) var(--e-emph),opacity var(--t-ui) var(--e-out),visibility var(--t-ui);
  z-index:1;
}
@media (hover:hover){
  .wafloat:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:
      0 3px 7px rgba(6,20,24,.30),
      0 16px 38px color-mix(in srgb,var(--wa) 54%,transparent),
      inset 0 1px 0 rgba(255,255,255,.36),
      inset 0 -1px 0 rgba(0,0,0,.18);
  }
  .wafloat:hover .wafloat__lbl{transform:none;opacity:1;visibility:visible}
}
.wafloat:active{transform:translateY(0) scale(.97)}
.wafloat:focus-visible .wafloat__lbl{transform:none;opacity:1;visibility:visible}

.wafloat.is-hidden{transform:translateY(140%) scale(.85);opacity:0;pointer-events:none}
@media (min-width:1120px){.wafloat{display:inline-flex}}

/* ==========================================================================
   12. HERO
   ========================================================================== */

/* ==========================================================================
   HERO
   Duas montagens da MESMA marcacao, sem duplicar conteudo:
   . mobile  -> .hero__stage e um bloco em fluxo, a midia abre a tela e o
                texto vem embaixo (padrao da referencia aprovada)
   . desktop -> .hero__stage vira fundo absoluto e o texto deita por cima
   O hero SOBRESCREVE o token de atmosfera em vez de criar um ::before
   proprio, senao ele brigaria com .sec::before pelo mesmo pseudo-elemento.
   ========================================================================== */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(34px,7vw,64px));
  padding-bottom:clamp(40px,5vw,64px);
  --s-atmo:
    radial-gradient(76% 62% at 88% 4%, color-mix(in srgb,var(--gold) 9%,transparent), transparent 58%),
    radial-gradient(72% 58% at 2% 96%, color-mix(in srgb,var(--slate) 92%,transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb,#FFFFFF 2.6%,transparent), transparent 26%, transparent 68%, rgba(6,20,24,.32));
  --s-edge:transparent;
}

/* ---- fundo animado ------------------------------------------------------
   Quatro planos, todos em transform e opacidade de gradiente, nada em
   layout. A regra que segura tudo: a camada dourada nunca passa de 9% de
   opacidade, que e o teto MEDIDO para o texto mais fraco do hero continuar
   acima de 4.5:1 (o teto real e 10.2%). Sem esse limite, fundo bonito vira
   texto ilegivel. Ver tools/verifica-contraste.php. */
.hero__fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

/* 1. massas de luz que respiram. O dourado fica no alto a DIREITA, longe da
      coluna de texto; a massa fria fica embaixo a esquerda, e escurece, o
      que so ajuda a leitura. */
.hero__aurora{
  position:absolute;inset:-24%;
  background:
    radial-gradient(36% 44% at 79% 16%, color-mix(in srgb,var(--gold) 9%,transparent), transparent 64%),
    radial-gradient(44% 42% at 8% 88%, color-mix(in srgb,var(--slate) 88%,transparent), transparent 68%),
    radial-gradient(30% 30% at 58% 96%, color-mix(in srgb,var(--ink) 90%,transparent), transparent 66%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__aurora{animation:lc-aurora 44s var(--e-in-out) infinite alternate}
}
@keyframes lc-aurora{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-2.6%,1.6%,0) scale(1.09)}
}

/* 2. a estrutura: hairlines verticais e horizontais deslizando muito devagar.
      E a arquitetura da marca aparecendo no fundo, sem virar grade de
      blueprint: a mascara mata as linhas antes de chegarem no texto. */
.hero__grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--gold) 7%,transparent) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg, color-mix(in srgb,var(--gold) 4%,transparent) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(96% 84% at 82% 26%,#000 4%,transparent 68%);
  mask-image:radial-gradient(96% 84% at 82% 26%,#000 4%,transparent 68%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__grid{animation:lc-grid 72s linear infinite}
}
@keyframes lc-grid{to{background-position:88px 88px,88px 88px}}


/* 3b. FUNDO FOTOGRAFICO.
   A imagem NAO ocupa a tela inteira: ela e um painel no lado direito, que e
   o lado livre da composicao. Fora o tamanho, duas coisas sairam:

   . o veu de cor em mix-blend-mode, que tingia a cena inteira de petroleo e
     deixava a foto com aspecto lavado, mais esverdeada do que a marca;
   . o zoom lento, que so chamava atencao para a foto quando o assunto e o
     texto ao lado.

   Ficou o essencial: um recorte menor, escurecido, e degrade em TODAS as
   bordas. E o degrade do topo que faz a imagem encostar no menu sem
   emenda, e o da esquerda que impede qualquer aresta reta perto do texto. */
.hero__bg{
  position:absolute;right:0;top:0;bottom:0;left:auto;
  width:58%;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 26%,#000 56%),
    linear-gradient(180deg,transparent 0,#000 16%,#000 62%,transparent 95%);
  mask-image:
    linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 26%,#000 56%),
    linear-gradient(180deg,transparent 0,#000 16%,#000 62%,transparent 95%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:72% 52%;
  filter:saturate(.6) contrast(1.05) brightness(.66);
}

@media (max-width:899px){
  /* FAIXA no alto, nao cobertura do hero inteiro.
     Cobrindo tudo (~900px de altura), o object-fit:cover ampliava a foto
     ate 697px de largura para preencher a altura, e sobrava uma fatia de
     54% da imagem: dai a sensacao de esticada e o enquadramento estranho.
     Com a faixa em 480px, a proporcao do recorte (0,774) bate quase exata
     com a da caixa, entao a foto entra quase inteira, sem ampliacao.
     As laterais sao as bordas da tela, e a imagem ocupa a largura toda:
     nao ha aresta ali. Em baixo, o degrade zera antes da borda do
     elemento, que era o que causava o corte visivel. */
  .hero__bg{
    inset:0 0 auto 0;
    width:auto;height:min(58vh,480px);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.38) 76%,transparent 99%);
    mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.38) 76%,transparent 99%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .hero__bg img{
    object-position:50% 42%;transform:none;
    /* mais apagada que no desktop: no celular a foto divide espaco com o
       texto em vez de ficar ao lado dele, entao ela precisa recuar mais. */
    filter:saturate(.42) contrast(1.02) brightness(.46);
  }
  /* PELICULA PROPRIA DO MOBILE, por cima da faixa da foto.
     O veu geral e desenhado para a composicao de desktop (opaco a esquerda,
     leve a direita). Aqui o texto passa por CIMA da imagem inteira, entao a
     faixa precisa de uma camada dedicada, mais densa no topo, onde ficam a
     logo e o rotulo. */
  .hero__bg::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--deep) 72%,transparent) 0,
      color-mix(in srgb,var(--deep) 52%,transparent) 34%,
      color-mix(in srgb,var(--deep) 62%,transparent) 70%,
      color-mix(in srgb,var(--deep) 86%,transparent) 100%);
  }
}


/* 4. PELICULA. Tres faixas, cada uma resolvendo um problema:
      a) FAIXA DO MENU. O nav pousa sobre a parte clara da foto (o ceu), e
         ali o texto do menu sumia. A faixa de topo cobre exatamente a altura
         do header mais uma folga.
      b) COLUNA DE TEXTO. Opaca a esquerda, onde o H1 e a copy vivem.
      c) LADO DIREITO. A janela com o por do sol e o ponto mais claro da
         cena inteira: sem pelicula ela puxa o olho para longe da mensagem e
         briga com o dourado da marca. O filme la e mais leve que a esquerda,
         so o bastante para a foto virar fundo em vez de assunto. */
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--deep) 90%,transparent) 0,
      color-mix(in srgb,var(--deep) 66%,transparent) calc(var(--header-h) * .78),
      transparent calc(var(--header-h) + 96px)),
    linear-gradient(100deg,
      var(--deep) 0 24%,
      color-mix(in srgb,var(--deep) 86%,transparent) 50%,
      color-mix(in srgb,var(--deep) 66%,transparent) 78%,
      color-mix(in srgb,var(--deep) 60%,transparent) 100%),
    /* a base fecha em petroleo CHEIO: e a outra metade do disfarce da
       emenda, junto com a mascara da propria foto. */
    linear-gradient(0deg,
      var(--deep) 0,
      color-mix(in srgb,var(--deep) 82%,transparent) 12%,
      transparent 38%);
}

.hero__grain{
  position:absolute;inset:0;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- copy --------------------------------------------------------------- */
.hero__in{position:relative;z-index:1}
.hero__copy{max-width:640px}

/* TARJA DE POSICIONAMENTO, nao um selo.
   Antes era pilula com vidro, borda dourada, sombra, ponto pulsante e uma
   varredura de luz: cinco tratamentos num rotulo de apoio, competindo com o
   H1 que vem logo abaixo. Agora e so o texto, e ele se comporta como o
   eyebrow do resto da pagina: caixa alta, tracking largo, um filete curto
   fechando. Discreto e uma linha so. */
.hero__badge{
  display:flex;align-items:center;gap:14px;
  margin:0 0 var(--sp-3);
  font-family:var(--f-display);
  font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  line-height:1.4;
  color:color-mix(in srgb,var(--gold) 88%,var(--paper));
  white-space:nowrap;
}
.hero__badge::after{
  content:"";flex:1 1 auto;max-width:clamp(28px,6vw,86px);height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 52%,transparent),transparent);
}
/* Abaixo de 640px a frase nao cabe em uma linha nem no menor corpo legivel,
   entao ali ela pode quebrar: melhor quebrar do que estourar a tela. */
@media (max-width:640px){
  .hero__badge{white-space:normal;font-size:.62rem;letter-spacing:.11em}
  .hero__badge::after{display:none}
}

.hero__title{
  font-size:var(--fs-h1);
  font-weight:600;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-tight);
  margin-top:var(--sp-4);
  text-transform:uppercase;
  text-wrap:balance;
}
/* Hierarquia pedida: linha 1 branca, linha 2 em destaque dourado, linha 3
   menor, fechando a mensagem. Tres frases, um acento so. */
.hero__l1{display:block;color:var(--paper)}
/* gold foil: a linha dourada recebe um deslize de luz UMA vez, na entrada.
   O degrade tem 4 paradas e 220% de largura, entao o brilho atravessa a
   palavra em vez de so clarear tudo junto. */
.hero__l2{display:block}
.hero__l2 em{
  --s-em-a:var(--gold-lift);--s-em-b:var(--edge);
  background:linear-gradient(96deg,
    var(--edge) 0%,var(--gold) 26%,var(--gold-lift) 44%,
    var(--gold) 62%,var(--edge) 100%);
  background-size:220% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
}
@media (prefers-reduced-motion:no-preference){
  .hero__l2 em{animation:lc-foil 1.5s var(--e-out) .55s both}
}
@keyframes lc-foil{from{background-position:100% 0}to{background-position:22% 0}}
.hero__l3{
  display:block;
  font-size:.56em;font-weight:500;letter-spacing:-.01em;
  color:var(--text-2);
  margin-top:.42em;
}

/* TITULO EM 3 LINHAS NO MOBILE.
   Uma frase por linha, que e a hierarquia desenhada: branca, dourada,
   fechamento. Em corpo maior "PROXIMIDADE PARA ENTENDER." quebra em duas e
   o bloco vira cinco linhas, perdendo o ritmo de tres tempos.
   O tamanho vem da conta: a linha mais longa tem 26 caracteres e a Archivo
   800 em caixa alta ocupa ~0,62em por caractere, entao ela pede ~16em de
   largura. Com o tracking em -.04em sobra folga na coluna do celular. */
@media (max-width:640px){
  .hero__title{
    font-size:clamp(1.15rem,5.15vw,1.58rem);
    letter-spacing:-.04em;
    line-height:1.1;
  }
  .hero__l3{font-size:.62em;margin-top:.5em}
}

.hero__lead{
  margin-top:var(--sp-4);max-width:52ch;
  font-size:var(--fs-lead);color:var(--text-1);line-height:1.62;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:var(--sp-5)}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:10px clamp(16px,2.4vw,30px);
  margin-top:var(--sp-5);
}
.hero__trust li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-sm);color:var(--text-2);line-height:1.4;
}
.hero__trust svg{
  width:17px;height:17px;flex:none;padding:3px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--gold) 18%,transparent);
  color:var(--gold);
}

/* ---- entrada encadeada -------------------------------------------------
   O hero conta uma sequencia, nao aparece de uma vez. Anima clip-path e
   transform, NUNCA opacity: se a animacao nao rodar, o pior caso e o texto
   ja estar no lugar certo. O clip termina em inset negativo para nao cortar
   sombra de botao nem o glow do CTA. */
@media (prefers-reduced-motion:no-preference){
  .hero__badge,.hero__l1,.hero__l2,.hero__l3,
  .hero__lead,.hero__acts,.hero__trust,.hero__stats{
    animation:lc-hero-in var(--t-enter) var(--e-emph) both;
  }
  .hero__badge{animation-delay:.10s}
  .hero__l1   {animation-delay:.20s}
  .hero__l2   {animation-delay:.28s}   /* a linha dourada 80ms depois da 1a */
  .hero__l3   {animation-delay:.36s}
  .hero__lead {animation-delay:.46s}
  .hero__acts {animation-delay:.54s}
  .hero__trust{animation-delay:.62s}
  .hero__stats{animation-delay:.70s}
}
@keyframes lc-hero-in{
  from{transform:translateY(14px);clip-path:inset(0 0 100% 0)}
  to  {transform:none;clip-path:inset(-45% -45% -45% -45%)}
}

/* ---- movimento de camera ------------------------------------------------
   Amplitude minima e ciclo longo: o video deve PARECER filmado, nao
   animado. Alternate evita o corte seco do reinicio. So no desktop, onde o
   video e fundo; no mobile ele e midia em fluxo e nao deve se mexer. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .hero__video{animation:lc-cam 19s var(--e-in-out) infinite alternate}
}
@keyframes lc-cam{
  from{transform:scale(1) translate3d(0,0,0)}
  to  {transform:scale(1.028) translate3d(0,-.55%,0)}
}

/* ---- faixa de numeros --------------------------------------------------- */
.hero__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(44px,5vw,66px);
  padding-top:clamp(28px,3vw,36px);
  border-top:1px solid var(--s-line);
}
/* hairline com preenchimento que acompanha a contagem: o numero sobe e a
   linha sobe junto, entao o dado ganha corpo sem virar card. */
.hero__stat{position:relative;padding-left:19px}
.hero__stat::before,.hero__stat::after{
  content:"";position:absolute;left:0;top:3px;width:2px;border-radius:var(--r-pill);
}
.hero__stat::before{bottom:3px;background:color-mix(in srgb,var(--gold) 18%,transparent)}
.hero__stat::after{
  height:var(--fill,0%);
  background:linear-gradient(180deg,var(--gold-lift),var(--gold));
  transition:height 1.5s var(--e-out);
}
@media (prefers-reduced-motion:reduce){.hero__stat::after{height:100%;transition:none}}
.hero__stat b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem);
  font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;              /* "R$ 1,18 mi" e uma unidade so */
}
/* FILHO DIRETO: sem o ">", esta regra tambem pega o <span data-count> que
   mora DENTRO do <b> e joga o numero para a linha de baixo em corpo de
   legenda. Bug real, ja corrigido uma vez, nao repetir. */
.hero__stat > span{
  display:block;margin-top:10px;
  font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;
  max-width:34ch;
}

/* ---- desktop: o palco vira fundo --------------------------------------- */
@media (min-width:900px){
  .hero{
    display:flex;flex-direction:column;justify-content:center;
    min-height:min(92svh,880px);
    padding-top:calc(var(--header-h) + clamp(52px,6.5vw,104px));
    padding-bottom:clamp(34px,4.4vw,64px);
  }
  /* A copy ocupa so a faixa coberta pelo veu, entao o texto nunca depende
     do que as camadas animadas estiverem fazendo naquele instante. */
  .hero__copy{max-width:min(700px,52vw)}
}
@media (min-width:1280px){
  .hero__copy{max-width:740px}
}

/* marquee de perfis atendidos */
.marq{
  position:relative;overflow:hidden;
  padding-block:16px;
  border-top:1px solid var(--s-line-soft);
  border-bottom:1px solid var(--s-line-soft);
  margin-top:clamp(36px,4.4vw,56px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marq__track{display:flex;width:max-content;animation:lc-marq 42s linear infinite}
/* desacelera em vez de congelar: parada seca no meio do movimento parece
   travamento, nao interacao. */
.marq:hover .marq__track{animation-duration:190s}
.marq__grp{display:flex;align-items:center;gap:clamp(26px,4vw,52px);padding-right:clamp(26px,4vw,52px)}
.marq__grp span{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-display);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;
}
.marq__grp span::after{
  content:"";width:5px;height:5px;border-radius:var(--r-pill);
  background:var(--gold);opacity:.55;flex:none;
}
@keyframes lc-marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   13. O SETOR: numeros + deficits com data-viz SVG a mao
   ========================================================================== */

.setor__top{display:grid;gap:clamp(30px,4vw,56px)}
@media (min-width:940px){.setor__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}

.bignums{
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-top:clamp(38px,4.6vw,58px);
}
.bignum{
  position:relative;
  padding:clamp(26px,3vw,36px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-p1);
  overflow:hidden;
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out);
}
.bignum::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--s-accent-fill),transparent 82%);
  transition:width var(--t) var(--e-out);
}
@media (hover:hover){
  .bignum:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 38%,transparent),var(--el-p2)}
  .bignum:hover::after{width:5px}
}
.bignum b{
  display:block;
  font-family:var(--f-display);
  font-size:var(--fs-stat);font-weight:800;letter-spacing:-.04em;line-height:.95;
  color:var(--s-ink);
  font-variant-numeric:tabular-nums;
}
.bignum b .suf{font-size:.46em;letter-spacing:-.01em;color:var(--s-accent);margin-left:.12em}
.bignum p{margin-top:12px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.5}
.bignum small{
  display:block;margin-top:10px;
  font-size:.72rem;color:var(--s-ink-3);letter-spacing:.02em;
}

/* cartao de deficit com barra/rosca SVG desenhada a mao */
.def{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:var(--gap)}
.def__card{
  display:flex;gap:20px;align-items:center;
  padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-p1);
  height:100%;
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out);
}
@media (hover:hover){
  .def__card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 40%,transparent),var(--el-p2)}
}
/* Sem @property o navegador trata --dash como string e nao interpola (§30.3) */
@property --dash{syntax:"<number>";inherits:true;initial-value:0}
.dial{width:88px;height:88px;flex:none;position:relative}
.dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dial__bg{fill:none;stroke:var(--s-line);stroke-width:8}
.dial__fg{
  fill:none;stroke:var(--s-accent-fill);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:var(--dash,0) 999;
  transition:stroke-dasharray 1.4s var(--e-out);
  filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--s-accent-fill) 42%,transparent));
}
.dial__v{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-size:1rem;font-weight:800;
  color:var(--s-ink);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.def__card h3{font-size:var(--fs-sm);font-weight:700;color:var(--s-ink);line-height:1.35}
.def__card p{margin-top:8px;font-size:var(--fs-micro);color:var(--s-ink-2);line-height:1.55}

.src{
  margin-top:clamp(26px,3vw,36px);
  font-size:.74rem;color:var(--s-ink-3);letter-spacing:.01em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.src svg{width:13px;height:13px;flex:none}

/* ==========================================================================
   14. ASSESSORIA: 4 blocos + frentes de atuacao
   ========================================================================== */

.qa{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:clamp(38px,4.4vw,56px)}
.qa__item{
  position:relative;height:100%;
  padding:clamp(24px,2.8vw,34px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-1);
  transition:transform var(--t) var(--e-out),background-color var(--t) var(--e-out);
}
@media (hover:hover){.qa__item:hover{transform:translateY(-4px);background:var(--s-card-2)}}
.qa__n{
  font-family:var(--f-display);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  color:var(--s-accent);
}
.qa__item h3{margin-top:14px;font-size:var(--fs-h4);color:var(--s-ink)}
.qa__item p{margin-top:11px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.6}

/* lista de frentes: duas colunas com filete, nao um grid de 6 quadradinhos */
/* MOMENTO ASSINATURA · MAPA DE ESTRUTURA.
   Duas colunas de linhas viravam catalogo. Agora e um eixo unico com as 8
   frentes ramificando dele: numero, no, conector e conteudo. A leitura passa
   a ser "isto tem arquitetura", nao "isto e uma lista".
   O eixo e um pseudo do container e os conectores sao pseudos de cada linha:
   zero markup novo. */
.frentes{
  position:relative;
  display:grid;gap:0;
  grid-template-columns:1fr;
  margin-top:var(--sp-6);
  padding-left:clamp(30px,4vw,58px);
  counter-reset:fr;
}
/* o tronco */
.frentes::before{
  content:"";position:absolute;left:clamp(5px,.9vw,11px);top:14px;bottom:14px;width:2px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb,var(--s-accent-fill) 42%,transparent) 6%,
    color-mix(in srgb,var(--s-accent-fill) 42%,transparent) 94%,
    transparent);
  transform:scaleY(0);transform-origin:top center;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .frentes::before{
      animation:lc-rv-liney linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 46%;
    }
  }
}
@media (prefers-reduced-motion:reduce){.frentes::before{transform:scaleY(1)}}
/* --cat-on: a cor da categoria puxada para a TINTA da secao. No tema escuro
   --s-ink e o papel, entao a cor clareia; no tema claro --s-ink e o petroleo,
   entao ela escurece. Uma expressao so cobre os dois casos. */
.frente__i,.dif__i i,.mega__ico{--cat-on:color-mix(in srgb,var(--cat,var(--s-accent-fill)) 62%,var(--s-ink))}

.frentes{counter-reset:fr}
/* So a lista de FRENTES recebe cor de categoria. A lista de checks em
   #diferenciais usa a mesma marcacao, mas check e STATUS, e cor de status
   nunca vira serie de categoria (§28.5): la o acento e uniforme. */
#assessoria .frentes .frente:nth-child(1){--cat:var(--cat-1)}
#assessoria .frentes .frente:nth-child(2){--cat:var(--cat-2)}
#assessoria .frentes .frente:nth-child(3){--cat:var(--cat-3)}
#assessoria .frentes .frente:nth-child(4){--cat:var(--cat-4)}
#assessoria .frentes .frente:nth-child(5){--cat:var(--cat-5)}
#assessoria .frentes .frente:nth-child(6){--cat:var(--cat-6)}
#assessoria .frentes .frente:nth-child(7){--cat:var(--cat-7)}
#assessoria .frentes .frente:nth-child(8){--cat:var(--cat-8)}
.mega__grid .mega__item:nth-child(1){--cat:var(--cat-1)}
.mega__grid .mega__item:nth-child(2){--cat:var(--cat-2)}
.mega__grid .mega__item:nth-child(3){--cat:var(--cat-3)}
.mega__grid .mega__item:nth-child(4){--cat:var(--cat-4)}
.mega__grid .mega__item:nth-child(5){--cat:var(--cat-5)}
.mega__grid .mega__item:nth-child(6){--cat:var(--cat-6)}
.mega__grid .mega__item:nth-child(7){--cat:var(--cat-7)}
.mega__grid .mega__item:nth-child(8){--cat:var(--cat-8)}
.dif .dif__i:nth-child(1){--cat:var(--cat-1)}
.dif .dif__i:nth-child(2){--cat:var(--cat-3)}
.dif .dif__i:nth-child(3){--cat:var(--cat-4)}
.dif .dif__i:nth-child(4){--cat:var(--cat-6)}
.dif .dif__i:nth-child(5){--cat:var(--cat-7)}
.dif .dif__i:nth-child(6){--cat:var(--cat-8)}
.frente{
  position:relative;
  display:flex;align-items:center;gap:clamp(13px,1.6vw,20px);
  padding:clamp(16px,1.8vw,22px) 4px;
  border-bottom:1px solid var(--s-line-soft);
  counter-increment:fr;
  transition:background-color var(--t-ui) var(--e-out);
}
/* conector: sai do tronco e encosta no no da linha */
.frente::before{
  content:"";position:absolute;
  left:calc(clamp(30px,4vw,58px) * -1 + clamp(6px,.9vw,12px));
  top:50%;height:2px;
  width:calc(clamp(30px,4vw,58px) - clamp(12px,1.6vw,22px));
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--cat,var(--s-accent-fill)) 52%,transparent),
    color-mix(in srgb,var(--cat,var(--s-accent-fill)) 18%,transparent));
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-ui) var(--e-out);
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .frente::before{
      animation:lc-rv-line linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 30%;
    }
  }
}
@media (prefers-reduced-motion:reduce){.frente::before{transform:scaleX(1)}}
/* o indice da frente, ancorado no eixo */
.frente__n{
  flex:none;width:26px;
  font-family:var(--f-display);font-size:.72rem;font-weight:800;
  letter-spacing:.04em;color:var(--cat-on,var(--s-accent));
  font-variant-numeric:tabular-nums;
  transition:color var(--t-ui) var(--e-out);
}
.frente__n::before{content:counter(fr,decimal-leading-zero)}
/* Filete que acende da esquerda no hover: responde ao ponteiro sem empurrar
   o texto, que era o que o padding-left animado fazia. */
.frente::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--s-accent-fill),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--e-out);
}
@media (hover:hover){.frente:hover::after{transform:scaleX(1)}}
/* a lista de checks em #diferenciais reusa .frentes, mas la nao ha eixo:
   e uma lista de status, nao um mapa. */
#diferenciais .frentes{padding-left:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));border-top:1px solid var(--s-line)}
#diferenciais .frentes::before{display:none}
#diferenciais .frente::before{display:none}
#diferenciais .frente__n{display:none}
.frente__i{
  width:44px;height:44px;flex:none;
  border-radius:var(--r-sm);
  color:var(--cat-on);
  background:color-mix(in srgb,var(--cat,var(--s-accent-fill)) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--s-accent-fill)) 30%,transparent);
  transition:background-color var(--t) var(--e-out),color var(--t) var(--e-out),
             transform var(--t) var(--e-spring),box-shadow var(--t) var(--e-out);
}
.frente__i svg{width:19px;height:19px}
.frente b{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);color:var(--s-ink);line-height:1.35}
/* ESCOPADO NO BLOCO DE TEXTO. ".frente span" tambem casava o chip do icone,
   que e um <span>, e sobrescrevia a cor da categoria com a cor de legenda.
   Terceira vez que um seletor descendente solto pega um filho que nao era
   para pegar (as outras foram .hero__stat span e .kpis div span). Regra da
   casa: descendente solto so quando o bloco nao tem componente aninhado. */
.frente > div span{display:block;font-size:var(--fs-micro);color:var(--s-ink-3);margin-top:3px;line-height:1.45}
@media (hover:hover){
  .frente:hover .frente__i{
    background:var(--cat-on);color:var(--s-bg);
    transform:scale(1.07) rotate(-3deg);
    box-shadow:0 6px 18px color-mix(in srgb,var(--cat,var(--s-accent-fill)) 40%,transparent);
  }
}

/* ==========================================================================
   15. NUCLEO: a cadeia jurídico + gestão + projetos + execução
   ========================================================================== */

/* No MOBILE a foto vem primeiro: e ela que apresenta o Nucleo, e ler quatro
   competencias antes de saber de quem se fala e ler no escuro. No desktop
   ela volta para a coluna da direita. Media e areas sao filhos DIRETOS do
   grid justamente para poderem ser reordenados por CSS, sem duplicar
   marcacao. */
.nucleo{display:grid;gap:clamp(28px,4vw,52px)}
.nucleo__media{order:-1}
@media (min-width:980px){
  .nucleo{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    align-items:start;
    column-gap:clamp(34px,4.4vw,60px);
  }
  .nucleo__txt  {grid-column:1;grid-row:1/3}
  .nucleo__media{grid-column:2;grid-row:1;order:0}
  .nucleo__areas{grid-column:2;grid-row:2}
}

/* MOMENTO ASSINATURA · DIAGRAMA DO NUCLEO.
   As quatro competencias descem de um no central, com as linhas se
   desenhando na entrada. E organograma sem parecer organograma: sem caixa
   no topo, sem seta, so o no, o tronco e os ramos. */
.chain{position:relative;display:grid;gap:12px;margin-top:clamp(30px,3.4vw,42px);padding-left:clamp(26px,3vw,40px)}
.chain::before{
  content:"";position:absolute;left:clamp(7px,.9vw,12px);top:38px;bottom:26px;width:2px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--s-accent-fill),color-mix(in srgb,var(--s-accent-fill) 20%,transparent));
  transform:scaleY(0);transform-origin:top center;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .chain::before{animation:lc-rv-liney linear both;animation-timeline:view();animation-range:entry 14% cover 44%}
  }
}
@media (prefers-reduced-motion:reduce){.chain::before{transform:scaleY(1)}}

.chain__hub{
  position:relative;margin:0 0 4px -4px;
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-display);font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--s-accent);
}
.chain__hub::before{
  content:"";position:absolute;left:calc(clamp(26px,3vw,40px) * -1 + clamp(4px,.9vw,9px));
  width:8px;height:8px;border-radius:var(--r-pill);
  background:var(--s-accent-fill);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--s-accent-fill) 18%,transparent);
}
.chain__i{
  display:flex;align-items:center;gap:16px;
  padding:17px 20px;
  border-radius:var(--r-sm);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-1);
  position:relative;
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out);
}
@media (hover:hover){
  .chain__i:hover{transform:translateX(4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 38%,transparent),var(--el-2)}
}
/* ramo horizontal saindo do tronco ate o cartao */
.chain__i::after{
  content:"";position:absolute;
  left:calc(clamp(26px,3vw,40px) * -1 + clamp(8px,.9vw,13px));
  top:50%;height:2px;
  width:calc(clamp(26px,3vw,40px) - clamp(10px,1.2vw,16px));
  background:linear-gradient(90deg,var(--s-accent-fill),color-mix(in srgb,var(--s-accent-fill) 22%,transparent));
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-ui) var(--e-out);
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .chain__i::after{animation:lc-rv-line linear both;animation-timeline:view();animation-range:entry 8% cover 34%}
  }
}
@media (prefers-reduced-motion:reduce){.chain__i::after{transform:scaleX(1)}}
.chain__i i{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--s-accent-fill) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 30%,transparent);
  color:var(--s-accent);
}
.chain__i i svg{width:19px;height:19px}
.chain__i b{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);color:var(--s-ink)}
.chain__i span{display:block;font-size:var(--fs-micro);color:var(--s-ink-3);margin-top:2px}

/* GRADACAO DE FOTO (§26.5).
   As fotos da equipe sao de estudio, fundo branco. Coladas cruas numa secao
   petroleo elas abrem um retangulo claro no meio do escuro e quebram a
   composicao. A correcao tem tres camadas: vinheta na cor da propria secao
   para a foto morrer nas bordas, um vidro frio por cima para puxar o branco
   para a familia da marca, e um filete dourado como moldura. */
.nucleo__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--el-3)}
/* A lista de areas ficava solta embaixo da foto, sem material nenhum, com
   cara de sobra de conteudo. Vira um painel com filete lateral, entao a
   coluna direita passa a ter dois blocos deliberados em vez de um bloco
   e um resto. */
.nucleo__areas{
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px) clamp(26px,3vw,34px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-1);
  position:relative;overflow:hidden;
}
.nucleo__areas::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--s-accent-fill),transparent 84%);
}
.nucleo__media img{
  width:100%;display:block;
  aspect-ratio:4/3;object-fit:cover;object-position:center 22%;
  filter:saturate(.92) contrast(1.04) brightness(.97);
}
.nucleo__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(122% 100% at 50% 6%, transparent 34%, color-mix(in srgb,var(--s-bg) 62%,transparent) 96%),
    linear-gradient(180deg, transparent 46%, color-mix(in srgb,var(--s-bg) 78%,transparent)),
    linear-gradient(0deg, color-mix(in srgb,var(--deep) 26%,transparent), color-mix(in srgb,var(--deep) 26%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent);
  border-radius:inherit;
}
/* .nucleo__badge removido: o cartao pisava na foto e, no celular, ficava
   cortado pela borda da imagem. A foto sozinha comunica melhor. */

/* ==========================================================================
   16. EQUIPE
   ========================================================================== */

.team{display:grid;gap:var(--gap);margin-top:clamp(38px,4.4vw,58px)}

.lead-card{
  display:grid;gap:0;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line),var(--el-p2);
}
@media (min-width:880px){.lead-card{grid-template-columns:minmax(0,clamp(300px,32%,400px)) minmax(0,1fr)}}
.lead-card__ph{position:relative;background:var(--s-card-2)}
.lead-card__ph img{width:100%;height:100%;min-height:clamp(320px,42vw,100%);object-fit:cover;object-position:center 14%}
.lead-card__body{padding:clamp(26px,3.2vw,40px)}
.lead-card__body h3{font-size:var(--fs-h3);color:var(--s-ink)}
.lead-card__role{
  margin-top:9px;font-family:var(--f-display);font-weight:600;
  font-size:var(--fs-sm);color:var(--s-accent);
}
.lead-card__body p{margin-top:16px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.65}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag{
  padding:6px 12px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:600;letter-spacing:.01em;
  color:var(--s-ink-2);
  background:color-mix(in srgb,var(--s-accent-fill) 9%,transparent);
  box-shadow:inset 0 0 0 1px var(--s-line);
  white-space:nowrap;
  transition:background-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
@media (hover:hover){
  .tag:hover{
    color:var(--s-ink);
    background:color-mix(in srgb,var(--s-accent-fill) 20%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 46%,transparent);
  }
}
/* subgrid alinha o rotulo de TODOS os kpis na mesma linha, mesmo quando um
   titulo ocupa 2 linhas e o vizinho so 1. Sem isto o bloco fica em degrau.
   Sem suporte a subgrid, degrada para o comportamento antigo. */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--s-line);
}
@supports (grid-template-rows:subgrid){
  .kpis{grid-template-rows:auto auto}
  .kpis > div{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:6px}
  .kpis > div > span{margin-top:0}
}
.kpis div b{
  display:block;font-family:var(--f-display);font-size:1.32rem;font-weight:800;
  letter-spacing:-.03em;color:var(--s-ink);line-height:1;
}
.kpis div > span{display:block;margin-top:6px;font-size:.74rem;color:var(--s-ink-3);line-height:1.45}

.person{
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--r);overflow:hidden;
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-p1);
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out);
}
.person__ph{position:relative;overflow:hidden;background:var(--s-card-2)}
.person__ph img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;
  filter:saturate(.95) contrast(1.03);
  transition:transform .8s var(--e-out),filter var(--t) var(--e-out);
}
/* Mesma gradacao dos retratos: o branco do estudio morre no rodape do card,
   emendando a foto no material do card em vez de recortar. */
.person__ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 58%, color-mix(in srgb,var(--s-card) 92%,transparent));
}
@media (hover:hover){.person:hover .person__ph img{filter:saturate(1.02) contrast(1.03)}}
@media (hover:hover){
  .person:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 42%,transparent),var(--el-p3)}
  .person:hover .person__ph img{transform:scale(1.045)}
}
.person__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.person__body h3{font-size:var(--fs-h4);color:var(--s-ink)}
.person__role{margin-top:7px;font-size:var(--fs-micro);font-weight:600;color:var(--s-accent);line-height:1.4}
.person__body p{margin-top:12px;font-size:var(--fs-micro);color:var(--s-ink-2);line-height:1.6}
.person__list{margin-top:var(--sp-3);display:grid;gap:12px}
/* BLOCO, nunca flex.
   Como flex, o <b> do titulo e o texto da descricao viravam DOIS itens lado
   a lado, e cada um quebrava na sua propria coluna estreita: o resultado era
   duas colunas de texto serrilhado, com a descricao comecando na altura
   errada. display:block com marcador absoluto deixa titulo e descricao
   fluirem como um paragrafo so. Bug real, 18/08/2026. */
.person__list li{
  display:block;position:relative;
  padding-left:17px;
  font-size:.78rem;color:var(--s-ink-3);line-height:1.55;
}
.person__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:var(--r-pill);
  background:var(--s-accent-fill);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--s-accent-fill) 15%,transparent);
}
/* O titulo ocupa a linha inteira e a descricao comeca na linha de baixo,
   alinhada na mesma margem. */
.person__list li b{
  display:block;margin-bottom:2px;
  font-size:.84rem;font-weight:700;letter-spacing:-.005em;
  color:var(--s-ink);
}

/* ==========================================================================
   17. TRAJETORIA (timeline)
   ========================================================================== */

.tl{position:relative;margin-top:clamp(38px,4.4vw,56px);padding-left:34px}
/* MOMENTO ASSINATURA · A LINHA DA TRAJETORIA SE DESENHA.
   Ela acompanha a leitura em vez de ja estar toda la. Estado base scaleY(0):
   se a timeline nao resolver, o pior caso e a linha nao aparecer, nunca uma
   linha cheia parada no lugar errado. */
.tl::before{
  content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--s-accent-fill) 62%,transparent),
    color-mix(in srgb,var(--s-accent-fill) 22%,transparent));
  transform:scaleY(0);transform-origin:top center;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tl::before{animation:lc-rv-liney linear both;animation-timeline:view();animation-range:entry 6% cover 62%}
  }
}
@media (prefers-reduced-motion:reduce){.tl::before{transform:scaleY(1)}}
.tl__i{position:relative;padding-bottom:clamp(24px,3vw,34px)}
.tl__i:last-child{padding-bottom:0}
/* cada no assenta quando a linha o alcanca. Escala, nao opacidade, e uma
   vez so: pulso em loop em oito nos seria um enxame. */
.tl__i::before{
  content:"";position:absolute;left:-30px;top:7px;
  width:11px;height:11px;border-radius:var(--r-pill);
  background:var(--s-accent-fill);
  box-shadow:
    0 0 0 4px var(--s-bg),
    0 0 0 5px color-mix(in srgb,var(--s-accent-fill) 46%,transparent),
    0 0 0 10px color-mix(in srgb,var(--s-accent-fill) 12%,transparent);
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tl__i::before{animation:lc-node linear both;animation-timeline:view();animation-range:entry 24% entry 62%}
  }
}
@keyframes lc-node{from{transform:scale(.3)}60%{transform:scale(1.22)}to{transform:scale(1)}}
.tl__y{
  font-family:var(--f-display);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  color:var(--s-accent);
}
.tl__i h3{margin-top:8px;font-size:var(--fs-h4);color:var(--s-ink)}
.tl__i p{margin-top:9px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.62;max-width:60ch}

/* ==========================================================================
   18. DIFERENCIAIS + CITACAO
   ========================================================================== */

/* O raio vive no CONTAINER com overflow, nunca no primeiro e no ultimo
   filho: com 6 itens em 3 colunas a lista quebra em 2 linhas e o raio caia
   nos cantos errados, deixando superior-direito e inferior-esquerdo em
   quadrado. Bug real, 18/08/2026. O gap de 1px sobre o fundo do container
   vira o filete que separa as celulas, de graca. */
.dif{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  margin-top:var(--sp-6);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--s-line);
  box-shadow:var(--el-p1);
  counter-reset:dif;
}
[data-sec="deep"] .dif,[data-sec="ink"] .dif,[data-sec="slate"] .dif{box-shadow:var(--el-1)}
.dif__i{
  position:relative;
  height:100%;padding:clamp(24px,2.8vw,34px);
  background:var(--s-card);
  counter-increment:dif;
  transition:background-color var(--t) var(--e-out);
}
/* O indice numerado tira este bloco do padrao "6 icones em quadradinho
   colorido", que e o componente mais generico que existe em web design.
   Aqui o numero e o elemento grafico e o icone vira acento. */
.dif__i::before{
  content:counter(dif,decimal-leading-zero);
  position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(20px,2.4vw,28px);
  font-family:var(--f-display);font-size:1.7rem;font-weight:800;
  letter-spacing:-.05em;line-height:1;
  color:color-mix(in srgb,var(--s-accent-fill) 28%,transparent);
  transition:color var(--t) var(--e-out);
}
@media (hover:hover){
  .dif__i:hover{background:var(--s-card-2)}
  .dif__i:hover::before{color:var(--s-accent)}
  .dif__i:hover i{color:var(--s-bg);background:var(--cat-on);transform:scale(1.07) rotate(-3deg)}
}
.dif__i i{
  width:42px;height:42px;
  border-radius:var(--r-sm);color:var(--cat-on);
  background:color-mix(in srgb,var(--cat,var(--s-accent-fill)) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--s-accent-fill)) 28%,transparent);
  transition:background-color var(--t) var(--e-out),color var(--t) var(--e-out),
             transform var(--t) var(--e-spring);
}
.dif__i i svg{width:19px;height:19px}
.dif__i h3{margin-top:var(--sp-3);font-size:var(--fs-h4);color:var(--s-ink);padding-right:46px}
.dif__i p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.62}

.quote{
  position:relative;
  margin-top:clamp(40px,5vw,68px);
  padding:clamp(32px,4.4vw,56px) clamp(26px,4vw,64px);
  border-radius:var(--r-lg);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line),var(--el-p2);
  text-align:center;
  max-width:900px;margin-inline:auto;
  overflow:hidden;
}
/* Um fio dourado atravessando o topo da citacao: marca o bloco como fala,
   nao como mais um card de conteudo. */
.quote::before{
  content:"";position:absolute;left:22%;right:22%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--s-accent-fill),transparent);
}
.quote svg{
  width:34px;height:34px;margin-inline:auto;margin-bottom:20px;
  color:var(--s-accent-fill);opacity:.8;
}
.quote p{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,1rem + 1.05vw,1.85rem);
  font-weight:700;line-height:1.34;letter-spacing:-.022em;
  color:var(--s-ink);text-wrap:balance;
}
.quote cite{
  display:block;margin-top:20px;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--f-display);font-weight:600;
  color:var(--s-ink-3);
}

/* ==========================================================================
   19. PROJETOS E INSTITUICOES
   ========================================================================== */

/* MOMENTO ASSINATURA · LEDGER INSTITUCIONAL.
   Projeto e prova documental, entao o card e uma FICHA, nao um card de
   conteudo. Ordem de leitura: registro e periodo na faixa de topo, nome,
   valor, e os dados em linhas alinhadas.

   O que estava errado antes: o codigo de registro era um pseudo posicionado
   no canto superior direito, exatamente onde ja morava o ano. Os dois se
   sobrepunham em todos os seis cards. Codigo e periodo agora dividem uma
   faixa com space-between, e nada mais disputa aquele canto.
   Bug real, 18/08/2026. */
/* As fichas viram carrossel tambem. Em grade, seis fichas altas viravam uma
   coluna de tela e meia no celular: a pessoa rolava por um cadastro, nao
   lia uma prova. */
.pjsw{padding-block:4px}
.pjsw.mt-6{margin-top:var(--sp-6)}
.pjsw.mt-5{margin-top:var(--sp-5)}
.pj{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-1);
  transition:box-shadow var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
/* filete que percorre o topo no hover: registro sendo conferido, nao card
   sendo levantado. */
.pj::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--s-accent-fill),transparent);
  transform:translateX(-100%);
  transition:transform var(--t-story) var(--e-draw);
}
@media (hover:hover){
  .pj:hover{
    background:var(--s-card-2);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 42%,transparent),var(--el-2);
  }
  .pj:hover::after{transform:translateX(100%)}
  .pj:hover .pj__code{color:var(--s-accent);background:color-mix(in srgb,var(--s-accent-fill) 20%,transparent)}
  .pj:hover .pj__v b{color:var(--s-accent)}
}

/* faixa de meta: registro a esquerda, periodo a direita */
.pj__hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(20px,2.4vw,26px);
  border-bottom:1px solid var(--s-line-soft);
  background:color-mix(in srgb,var(--s-accent-fill) 5%,transparent);
}
.pj__code{
  font-family:var(--f-display);font-size:.68rem;font-weight:800;letter-spacing:.12em;
  color:color-mix(in srgb,var(--s-accent-fill) 62%,var(--s-ink));
  background:color-mix(in srgb,var(--s-accent-fill) 12%,transparent);
  padding:5px 10px;border-radius:var(--r-xs);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.pj__meta{
  font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--s-ink-3);text-align:right;line-height:1.3;
}

.pj__t{
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,26px) 0;
  font-size:var(--fs-h4);font-weight:700;letter-spacing:-.018em;line-height:1.3;
  color:var(--s-ink);text-wrap:balance;
}

.pj__v{padding:clamp(14px,1.8vw,18px) clamp(20px,2.4vw,26px) 0}
.pj__v small{
  display:block;margin-bottom:5px;
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--s-ink-3);
}
.pj__v b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.34rem,1.08rem + .85vw,1.72rem);
  font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--s-ink);font-variant-numeric:tabular-nums;
  transition:color var(--t-ui) var(--e-out);
}

/* linhas de registro: rotulo e valor em duas colunas de verdade, com o
   rotulo travado. Antes era um min-width no dt, que empurrava o valor e
   deixava cada card com uma coluna diferente. */
.pj__dl{
  margin-top:auto;
  padding:clamp(16px,2vw,20px) clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px);
  display:grid;gap:0;
}
.pj__row{
  display:grid;
  grid-template-columns:minmax(84px,auto) 1fr;
  gap:14px;
  padding:9px 0;
  border-top:1px solid var(--s-line-soft);
}
.pj__row:first-child{border-top:0;padding-top:0}
.pj__row dt{
  font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--s-ink-3);line-height:1.45;
}
.pj__row dd{
  margin:0;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.5;
}
.proj__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.proj__c h3{font-size:var(--fs-h4);color:var(--s-ink);max-width:22ch}
.proj__yr{
  font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.09em;
  color:var(--s-accent);white-space:nowrap;padding-top:4px;
}
.proj__v{
  margin-top:18px;
  font-family:var(--f-display);
  font-size:clamp(1.28rem,1.05rem + .8vw,1.7rem);
  font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--s-ink);font-variant-numeric:tabular-nums;
}
.proj__v small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.09em;color:var(--s-ink-3);margin-bottom:7px;text-transform:uppercase}
.proj__dl{margin-top:var(--sp-3);display:grid;gap:10px;padding-top:var(--sp-3);border-top:1px solid var(--s-line-soft)}
.proj__dl--plain{border-top:0;padding-top:0}
.proj__dl div{display:flex;gap:10px;font-size:var(--fs-micro);line-height:1.5}
.proj__dl dt{color:var(--s-ink-3);flex:none;min-width:86px}
.proj__dl dd{margin:0;color:var(--s-ink-2)}

/* FLEX, nao grid: com 10 instituicoes em 4 colunas o grid deixava 2 celulas
   vazias e abria um buraco no canto do painel. No flex a ultima linha
   distribui a sobra entre os itens que existem. Bug real, 18/08/2026. */
.insts{
  display:flex;flex-wrap:wrap;gap:1px;
  margin-top:var(--sp-5);
  border-radius:var(--r);overflow:hidden;
  background:var(--s-line);
  box-shadow:var(--el-1);
}
[data-sec="paper"] .insts,[data-sec="paper-2"] .insts{box-shadow:var(--el-p1)}
/* indice institucional: numero, nome, metadado. Hover acende o indice e
   cresce a linha, sem mexer no layout. */
.insts{counter-reset:inst}
.inst{
  position:relative;
  flex:1 1 265px;
  display:flex;align-items:flex-start;gap:13px;
  padding:18px 20px;
  background:var(--s-card);
  counter-increment:inst;
  transition:background-color var(--t-ui) var(--e-out);
}
.inst::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--s-accent-fill),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-story) var(--e-draw);
}
@media (hover:hover){.inst:hover::after{transform:scaleX(1)}}
.inst i::after{
  content:counter(inst,decimal-leading-zero);
  position:absolute;top:-9px;left:-7px;
  font-family:var(--f-display);font-size:.56rem;font-weight:800;letter-spacing:.06em;
  color:color-mix(in srgb,var(--s-accent-fill) 55%,transparent);
  transition:color var(--t-ui) var(--e-out);
}
.inst i{position:relative;overflow:visible}
@media (hover:hover){.inst:hover i::after{color:var(--s-accent)}}
@media (hover:hover){.inst:hover{background:var(--s-card-2)}}
.inst i{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-xs);color:var(--s-accent);
  background:color-mix(in srgb,var(--s-accent-fill) 12%,transparent);
}
.inst i svg{width:15px;height:15px}
.inst b{display:block;font-family:var(--f-display);font-size:var(--fs-micro);font-weight:700;color:var(--s-ink);line-height:1.35}
.inst span{display:block;font-size:.7rem;color:var(--s-ink-3);margin-top:4px;line-height:1.45;font-variant-numeric:tabular-nums}

/* ==========================================================================
   20. ESCRITORIO: missao/visao/valores + historia
   ========================================================================== */

.mvv{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:clamp(36px,4.2vw,54px)}
.mvv__c{
  height:100%;padding:clamp(26px,3vw,36px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-p1);
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out);
}
@media (hover:hover){
  .mvv__c:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 40%,transparent),var(--el-p2)}
}
.mvv__c i{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);color:var(--s-accent);background:color-mix(in srgb,var(--s-accent-fill) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 26%,transparent)}
.mvv__c i svg{width:20px;height:20px}
.mvv__c h3{margin-top:18px;font-size:var(--fs-h4);color:var(--s-ink)}
.mvv__c p{margin-top:11px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.62}
.vals{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}

.story{display:grid;gap:clamp(34px,4.4vw,60px);margin-top:clamp(48px,5.6vw,84px)}
@media (min-width:980px){.story{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center}}
.story__media{position:relative}
.story__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--el-p3)}
.story__media img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;filter:saturate(.94) contrast(1.04)}
.story__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 92% at 50% 4%, transparent 46%, color-mix(in srgb,var(--deep) 26%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 26%,transparent);
}
.story__pull{
  margin-top:26px;padding:22px 26px;
  border-left:2px solid var(--s-accent-fill);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--s-card);
}
.story__pull p{font-size:var(--fs-body);color:var(--s-ink);line-height:1.6;font-weight:500}
.story__pull cite{display:block;margin-top:12px;font-size:var(--fs-micro);color:var(--s-ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ==========================================================================
   20b. FAIXA DE FOTO (a imagem que saiu do hero, reaproveitada aqui)
   ========================================================================== */

.bandshot{
  position:relative;margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--el-p3);
}
.bandshot img{
  width:100%;display:block;
  aspect-ratio:21/9;object-fit:cover;object-position:center 30%;
  filter:saturate(.96) contrast(1.04);
}
@media (max-width:700px){.bandshot img{aspect-ratio:4/3}}
/* O texto so comeca depois que o degrade ja atingiu 92% de petroleo. Assim
   a legenda nao depende do que a FOTO mostra atras dela: trocar a imagem
   nunca vira problema de leitura. O padding-top alto e proposital, e ele
   que garante a faixa opaca antes da primeira linha. */
.bandshot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(64px,9vw,120px) clamp(20px,3vw,34px) clamp(20px,3vw,34px);
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--deep) 62%,transparent) 34%,
    color-mix(in srgb,var(--deep) 92%,transparent) 54%,
    var(--deep) 100%);
  color:var(--paper);
}
.bandshot figcaption b{
  display:block;font-family:var(--f-display);
  font-size:var(--fs-h4);font-weight:700;letter-spacing:-.02em;
}
.bandshot figcaption span{
  display:block;margin-top:5px;
  font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;max-width:52ch;
}

/* ==========================================================================
   21. FAIXA DE CTA
   ========================================================================== */

.ctaband{padding-block:clamp(52px,6.4vw,86px);position:relative;overflow:hidden}
.ctaband__in{
  display:grid;gap:clamp(24px,3.4vw,44px);align-items:center;
  position:relative;z-index:1;
}
@media (min-width:900px){.ctaband__in{grid-template-columns:minmax(0,1fr) auto}}
.ctaband h2{font-size:var(--fs-h2);font-weight:600;color:var(--s-ink);max-width:20ch}
.ctaband p{margin-top:14px;font-size:var(--fs-lead);color:var(--s-ink-2);max-width:48ch;line-height:1.55}
.ctaband__acts{display:flex;flex-wrap:wrap;gap:12px}
.ctaband__tree{
  /* REMOVIDO em 18/08/2026: era o icone de traco do sistema ampliado ~15x,
     entao o traco engordava junto e virava um borrao sem leitura, cortado
     pela borda da secao. Ornamento solto no fundo e o erro mais amador que
     existe; a faixa fica mais forte sem nada. Classe mantida so como
     registro da decisao. */
  display:none;
}

/* ==========================================================================
   22. FAQ (details nativo, agrupado, com identidade)
   ========================================================================== */

.faq{display:grid;gap:clamp(30px,3.6vw,48px);margin-top:clamp(38px,4.4vw,56px)}
@media (min-width:900px){.faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq__grp > h3{
  display:flex;align-items:center;gap:11px;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--s-accent);font-weight:700;
  padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--s-line);
}
.faq__grp > h3 svg{width:15px;height:15px}
details.q{border-bottom:1px solid var(--s-line-soft)}
details.q summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 2px;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:var(--fs-sm);font-weight:700;
  color:var(--s-ink);line-height:1.45;
  transition:color var(--t-fast) var(--e-out);
}
details.q summary::-webkit-details-marker{display:none}
details.q summary:hover{color:var(--s-accent)}
details.q summary i{
  width:24px;height:24px;flex:none;margin-top:1px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--s-accent-fill) 14%,transparent);
  color:var(--s-accent);
  transition:transform var(--t) var(--e-out),background-color var(--t) var(--e-out);
}
details.q summary i svg{width:13px;height:13px}
details.q[open] summary i{transform:rotate(45deg);background:var(--s-accent-fill);color:var(--s-on-accent)}
details.q[open] summary{color:var(--s-accent)}
.q__a{padding:0 34px 20px 2px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.68}
.q__a p + p{margin-top:11px}
@media (prefers-reduced-motion:no-preference){
  details.q[open] .q__a{animation:lc-open .34s var(--e-out) both}
}
@keyframes lc-open{from{transform:translateY(-6px)}to{transform:none}}

/* ==========================================================================
   23. CONTATO
   ========================================================================== */

.ct{display:grid;gap:clamp(32px,4vw,58px);margin-top:clamp(38px,4.4vw,56px)}
@media (min-width:940px){.ct{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}}
.ct__list{display:grid;gap:1px;border-radius:var(--r);overflow:hidden;background:var(--s-line);box-shadow:var(--el-1)}
.ct__i{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;background:var(--s-card);
  transition:background-color var(--t) var(--e-out);
}
/* O hover clareia o fundo do item, entao o rotulo TEM de clarear junto:
   parado ele da 6.3:1, mas sobre o fundo do hover caia para 4.18:1. Todo
   estado que mexe no fundo precisa reconferir o texto que fica por cima. */
@media (hover:hover){
  a.ct__i:hover{background:var(--s-card-2)}
  a.ct__i:hover b{color:var(--s-ink-2)}
  a.ct__i:hover i{background:var(--s-accent-fill);color:var(--s-on-accent)}
}
.ct__i i{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--s-accent);
  background:color-mix(in srgb,var(--s-accent-fill) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 24%,transparent);
}
.ct__i i svg{width:19px;height:19px}
.ct__i b{display:block;font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--s-ink-3)}
.ct__i span{display:block;margin-top:6px;font-size:var(--fs-sm);color:var(--s-ink);line-height:1.5;word-break:break-word}
.ct__card{
  padding:clamp(28px,3.4vw,42px);
  border-radius:var(--r-lg);
  background:var(--s-card-2);
  box-shadow:inset 0 0 0 1px var(--s-line),var(--el-2);
  height:100%;display:flex;flex-direction:column;
}
.ct__card h3{font-size:var(--fs-h3);color:var(--s-ink)}
.ct__card p{margin-top:14px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.62}
.ct__card .btn{margin-top:auto}
.ct__card ul{margin-top:22px;display:grid;gap:12px}
.ct__card li{display:flex;gap:11px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.5}
.ct__card li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--s-accent)}

/* ==========================================================================
   24. FOOTER
   ========================================================================== */

.foot{
  position:relative;
  padding-top:clamp(52px,6vw,80px);
  padding-bottom:clamp(28px,3vw,40px);
  background:var(--deep);
  --s-bg:var(--deep);
  --s-ink:var(--paper);--s-ink-2:var(--text-1);--s-ink-3:var(--text-2);
  --s-accent:var(--gold);--s-accent-fill:var(--gold);--s-on-accent:var(--deep);
  --s-line:color-mix(in srgb,#FFFFFF 13%,var(--deep));
  --s-line-soft:color-mix(in srgb,#FFFFFF 7%,var(--deep));
  color:var(--text-1);
}
.foot__claim{
  text-align:center;
  padding-bottom:clamp(40px,5vw,64px);
  margin-bottom:clamp(38px,4.4vw,56px);
  border-bottom:1px solid var(--s-line);
}
.foot__claim img{width:84px;height:auto;margin-inline:auto;margin-bottom:26px;opacity:.95}
.foot__claim p{
  font-family:var(--f-display);
  font-size:clamp(1.32rem,1.05rem + 1.4vw,2.35rem);
  font-weight:600;letter-spacing:-.032em;line-height:1.22;
  color:var(--paper);
  max-width:22ch;margin-inline:auto;text-wrap:balance;
}
.foot__grid{display:grid;gap:clamp(28px,3.4vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.foot__col h4{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:16px;
}
.foot__col li + li{margin-top:10px}
.foot__col a,.foot__col p{font-size:var(--fs-sm);color:var(--text-1);line-height:1.55;transition:color var(--t-fast) var(--e-out)}
.foot__col a:hover{color:var(--gold)}
.foot__brand img{height:74px;width:auto;margin-bottom:20px}
.foot__brand p{font-size:var(--fs-sm);color:var(--text-2);max-width:34ch;line-height:1.6}
.social{display:flex;gap:10px;margin-top:20px}
.social a{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 11%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 26%,transparent);
  transition:background-color var(--t) var(--e-out),color var(--t) var(--e-out),transform var(--t) var(--e-out);
}
.social a svg{width:18px;height:18px}
@media (hover:hover){.social a:hover{background:var(--gold);color:var(--deep);transform:translateY(-2px)}}

.foot__bar{
  margin-top:clamp(38px,4.4vw,54px);padding-top:24px;
  border-top:1px solid var(--s-line);
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
}
.foot__bar p,.foot__bar a{font-size:.76rem;color:var(--text-2);line-height:1.6}
.foot__bar a:hover{color:var(--gold)}
.oab{
  max-width:76ch;font-size:.72rem;color:color-mix(in srgb,var(--text-2) 84%,var(--deep));
  line-height:1.6;
}

/* ==========================================================================
   24a. CARROSSEIS (Swiper 11)
   Tres usos, um so kit de controle (.swui): frentes de atuacao com imagem,
   mega-menu com miniatura e trajetoria compacta. O carrossel resolve dois
   problemas de uma vez: cabe imagem em cada item sem a pagina virar uma
   parede de cards, e a secao para de ocupar 8 telas de altura.
   ========================================================================== */

.swiper{width:100%;overflow:hidden}
.swiper-slide{height:auto}          /* cards da mesma linha com a mesma altura */

/* ---- controles compartilhados ------------------------------------------ */
.swui{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);
  margin-top:var(--sp-4);
}
.swui__b{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;line-height:0;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:color-mix(in srgb,var(--s-accent-fill) 11%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 30%,transparent);
  color:var(--s-accent);
  transition:background-color var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-spring),opacity var(--t-micro) var(--e-out);
}
.swui__b svg{width:19px;height:19px}
.swui__b:first-child svg{transform:rotate(180deg)}
@media (hover:hover){
  .swui__b:hover{background:var(--s-accent-fill);color:var(--s-on-accent);transform:scale(1.06)}
}
.swui__b:active{transform:scale(.95)}
.swui__b.swiper-button-disabled{opacity:.3;pointer-events:none}

.swui__pg{display:flex;align-items:center;justify-content:center;gap:8px;width:auto}
.swui__pg .swiper-pagination-bullet{
  width:7px;height:7px;margin:0 !important;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--s-accent-fill) 34%,transparent);
  opacity:1;
  transition:width var(--t-ui) var(--e-emph),background-color var(--t-ui) var(--e-out);
}
.swui__pg .swiper-pagination-bullet-active{
  width:26px;background:var(--s-accent-fill);
}

/* ---- 1. FRENTES DE ATUACAO --------------------------------------------- */
.fsw{padding-block:4px}
.fcard{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-1);
  transition:box-shadow var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.fcard__ph{position:relative;display:block;overflow:hidden;background:var(--s-card-2)}
.fcard__ph img{
  width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.96) contrast(1.04);
  transition:transform .9s var(--e-out);
}
/* scrim para o numero e o icone terem base, e para a foto emendar no card */
.fcard__ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--deep) 46%,transparent) 0,transparent 34%),
    linear-gradient(0deg,color-mix(in srgb,var(--s-card) 92%,transparent) 0,transparent 40%);
}
/* O numero e o chip de icone sairam. O chip ficava em bottom:-21px para
   pisar na borda da foto, mas o card tem overflow:hidden (precisa dele para
   a imagem respeitar o raio), entao ele aparecia cortado pela metade em
   todos os slides. Entre manter um enfeite mutilado e tirar o enfeite, a
   foto sozinha ja diz do que o card trata. */
.fcard__body{
  display:block;
  padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px) clamp(20px,2.4vw,26px);
}
.fcard__body b{
  display:block;
  font-family:var(--f-display);font-size:var(--fs-h4);font-weight:700;
  letter-spacing:-.018em;line-height:1.3;color:var(--s-ink);
  text-wrap:balance;
}
.fcard__body > span{
  display:block;margin-top:8px;
  font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.55;
}
@media (hover:hover){
  .fcard:hover{
    background:var(--s-card-2);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--s-accent-fill)) 48%,transparent),var(--el-2);
  }
  .fcard:hover .fcard__ph img{transform:scale(1.06)}
}
.fcard{--cat-on:color-mix(in srgb,var(--cat,var(--s-accent-fill)) 62%,var(--s-ink))}

/* ---- 2. MEGA-MENU ------------------------------------------------------- */
.msw{padding-block:2px}
.mega__item{
  display:flex;flex-direction:column;
  padding:0;border-radius:var(--r);
  overflow:hidden;
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft);
  transition:box-shadow var(--t-micro) var(--e-out),transform var(--t-micro) var(--e-out);
  --cat-on:color-mix(in srgb,var(--cat,var(--s-accent-fill)) 62%,var(--s-ink));
}
.mega__ph{position:relative;display:block;overflow:hidden;background:var(--s-card-2)}
.mega__ph img{
  width:100%;display:block;aspect-ratio:16/10;object-fit:cover;
  transition:transform .7s var(--e-out);
}
.mega__ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--s-card) 84%,transparent),transparent 52%);
}
.mega__item .mega__ico{
  position:absolute;left:10px;bottom:10px;z-index:2;
  width:32px;height:32px;
  border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--cat,var(--gold)) 22%,var(--s-card));
  color:var(--cat-on);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--gold)) 44%,transparent);
}
.mega__item .mega__ico svg{width:16px;height:16px}
.mega__t{display:block;padding:12px 13px 0;font-family:var(--f-display);font-weight:700;font-size:var(--fs-micro);color:var(--s-ink);line-height:1.3}
.mega__d{display:block;padding:4px 13px 13px;font-size:.7rem;color:var(--s-ink-3);line-height:1.45}
@media (hover:hover){
  .mega__item:hover{
    transform:translateY(-3px);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat,var(--s-accent-fill)) 50%,transparent),var(--el-p1);
  }
  .mega__item:hover .mega__ph img{transform:scale(1.06)}
}
.swui--mega{margin-top:var(--sp-3)}
.swui--mega .swui__b{width:38px;height:38px}
.swui--mega .swui__b svg{width:16px;height:16px}

/* ---- 3. TRAJETORIA ------------------------------------------------------ */
.tsw{padding-block:2px}
.tcard{
  display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,28px) clamp(18px,2.2vw,26px);
  border-radius:var(--r);
  background:var(--s-card);
  box-shadow:inset 0 0 0 1px var(--s-line-soft),var(--el-p1);
  position:relative;overflow:hidden;
  transition:box-shadow var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.tcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--s-accent-fill),transparent 84%);
}
.tcard__y{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-size:.74rem;font-weight:700;letter-spacing:.1em;
  color:var(--s-accent);font-variant-numeric:tabular-nums;
}
.tcard__y::before{
  content:"";width:7px;height:7px;border-radius:var(--r-pill);
  background:var(--s-accent-fill);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--s-accent-fill) 18%,transparent);
}
.tcard b{
  display:block;margin-top:12px;
  font-family:var(--f-display);font-size:var(--fs-h4);font-weight:700;
  letter-spacing:-.018em;line-height:1.3;color:var(--s-ink);
}
.tcard__t{display:block;margin-top:10px;font-size:var(--fs-sm);color:var(--s-ink-2);line-height:1.6}
@media (hover:hover){
  .tcard:hover{background:var(--s-card-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-accent-fill) 40%,transparent),var(--el-p2)}
}

/* ==========================================================================
   24c. BARRA DE ROLAGEM
   A barra padrao do sistema e o unico pedaco de interface que continuava
   cinza de fabrica no meio de uma pagina inteira desenhada.
   ========================================================================== */
html{
  scrollbar-color:color-mix(in srgb,var(--gold) 52%,var(--deep)) var(--deep);
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:color-mix(in srgb,#FFFFFF 4%,var(--deep))}
::-webkit-scrollbar-thumb{
  border-radius:var(--r-pill);
  border:3px solid transparent;
  background-clip:padding-box;
  background-color:color-mix(in srgb,var(--gold) 46%,var(--slate));
  transition:background-color var(--t-micro) var(--e-out);
}
::-webkit-scrollbar-thumb:hover{background-color:var(--gold)}
::-webkit-scrollbar-corner{background:var(--deep)}
/* areas claras e paineis com rolagem propria ficam com a barra na cor delas */
.drawer,.jc__card,.mega{scrollbar-color:color-mix(in srgb,var(--gold) 46%,var(--ink)) transparent}

/* ==========================================================================
   24a-2. DOWNLOAD DO PORTFOLIO
   Tres formatos para tres contextos, todos com peso e formato declarados:
   no hero um link contido, que nao pode disputar com o CTA de WhatsApp;
   no menu mobile um cartao com a capa real, porque ali ha espaco e a peca
   se apresenta melhor do que qualquer rotulo; no rodape uma linha da
   navegacao, onde quem procura documento vai olhar.
   O atributo download e o que faz o arquivo ser salvo em vez de abrir no
   leitor do navegador, que em celular costuma virar um beco sem volta.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.pdflink{
  display:inline-flex;align-items:center;gap:13px;
  margin-top:var(--sp-4);padding:10px 20px 10px 10px;
  border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 15%,transparent);
  color:var(--text-1);
  transition:box-shadow var(--t-micro) var(--e-out),
             background-color var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-out);
}
.pdflink__i{
  display:grid;place-items:center;line-height:0;
  width:36px;height:36px;flex:none;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--gold) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 32%,transparent);
  color:var(--gold);
  transition:background-color var(--t-micro) var(--e-out),
             color var(--t-micro) var(--e-out),transform var(--t-ui) var(--e-spring);
}
.pdflink__i svg{width:17px;height:17px}
.pdflink__t{
  display:block;font-family:var(--f-display);
  font-size:var(--fs-sm);font-weight:700;color:var(--paper);line-height:1.25;
}
.pdflink__t small{
  display:block;margin-top:3px;
  font-family:var(--f-body);font-size:.7rem;font-weight:400;
  letter-spacing:.04em;color:var(--text-2);
}
@media (hover:hover){
  .pdflink:hover{
    transform:translateY(-2px);
    background:color-mix(in srgb,var(--gold) 8%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent);
  }
  .pdflink:hover .pdflink__i{background:var(--gold);color:var(--deep);transform:translateY(2px)}
}

/* --- menu mobile --------------------------------------------------------- */
.pdfcard{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 14px;margin-bottom:var(--sp-2);
  border-radius:var(--r);
  background:color-mix(in srgb,var(--paper) 5%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 26%,transparent);
  transition:box-shadow var(--t-micro) var(--e-out),background-color var(--t-micro) var(--e-out);
}
.pdfcard__ph{display:block;flex:none;width:46px;border-radius:var(--r-xs);overflow:hidden;
  box-shadow:0 4px 12px rgba(6,20,24,.4)}
.pdfcard__ph img{width:100%;height:auto;display:block}
.pdfcard__eye{
  display:block;font-family:var(--f-display);
  font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);
}
.pdfcard b{display:block;margin-top:3px;font-family:var(--f-display);font-size:.94rem;font-weight:700;color:var(--paper)}
.pdfcard small{display:block;margin-top:2px;font-size:.72rem;color:var(--text-2)}
.pdfcard__i{
  display:grid;place-items:center;line-height:0;
  width:34px;height:34px;flex:none;border-radius:var(--r-pill);
  background:var(--gold);color:var(--deep);
}
.pdfcard__i svg{width:17px;height:17px}
.pdfcard:active{background:color-mix(in srgb,var(--gold) 12%,transparent)}

/* --- rodape -------------------------------------------------------------- */
.foot__dl{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold) !important;font-weight:600;
}
.foot__dl svg{width:15px;height:15px;flex:none}
.foot__dl small{font-size:.68rem;color:var(--text-2);letter-spacing:.04em}
@media (hover:hover){.foot__dl:hover{color:var(--gold-lift) !important}}

/* ==========================================================================
   24b. CARTAO DO DESENVOLVEDOR
   Mesmo cartao do bononi-cms em estrutura e comportamento, repintado nos
   tokens desta marca. O tema local e escuro e fechado, para o cartao ler
   como uma peca sobreposta e nao como mais uma secao do site.
   ========================================================================== */

/* O credito estava discreto demais para ser encontrado: texto cinza solto
   no rodape. Agora e um chip com borda, e o glifo verde de grafico em alta
   diz do que se trata antes da leitura. O verde vivo aqui e seguro: sobre
   petroleo da 6.75:1, bem acima do minimo. */
.foot__by{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 9px 10px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 4%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 16%,transparent);
  font-size:.78rem;color:var(--text-1);
  transition:color var(--t-micro) var(--e-out),
             background-color var(--t-micro) var(--e-out),
             box-shadow var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-out);
}
.foot__by strong{color:var(--paper);font-weight:700}
.foot__by-i{
  display:grid;place-items:center;line-height:0;
  width:26px;height:26px;flex:none;border-radius:var(--r-pill);
  color:var(--wa-vivid);
  background:color-mix(in srgb,var(--wa-vivid) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wa-vivid) 34%,transparent);
  transition:background-color var(--t-micro) var(--e-out),
             color var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-spring);
}
.foot__by-i svg{width:15px;height:15px}
@media (hover:hover){
  .foot__by:hover{
    transform:translateY(-2px);
    background:color-mix(in srgb,var(--wa-vivid) 10%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wa-vivid) 42%,transparent),
               0 8px 20px color-mix(in srgb,var(--wa-vivid) 18%,transparent);
  }
  .foot__by:hover .foot__by-i{
    background:var(--wa-vivid);color:var(--deep);
    transform:scale(1.08) rotate(-3deg);
  }
}

.jc-bd{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) + 6);
  background:color-mix(in srgb,var(--deep) 78%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--t-ui) var(--e-out);
}
.jc-bd.is-on{opacity:1}

/* OBRIGATORIO. O atributo hidden vale por display:none do navegador, que
   perde para QUALQUER display declarado pelo autor. Sem esta linha o
   .jc{display:grid} abaixo vence o hidden e deixa um overlay invisivel de
   tela cheia em z-index 88 por cima da pagina inteira: nao rola, nao
   clica. Bug real, 18/08/2026. Vale para todo dialogo que use hidden. */
.jc[hidden],.jc-bd[hidden]{display:none}

.jc{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) + 8);
  display:grid;place-items:center;padding:18px;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity var(--t-ui) var(--e-out);
  /* tema local escuro: o cartao nao herda o tema da secao onde nasceu */
  --s-ink:var(--paper);--s-ink-2:var(--text-1);--s-ink-3:var(--text-2);
  --s-accent:var(--gold);--s-accent-fill:var(--gold);--s-on-accent:var(--deep);
  --s-line:color-mix(in srgb,#FFFFFF 14%,var(--ink));
}
.jc.is-on{opacity:1}
.jc__card{
  position:relative;width:min(100%,440px);max-height:calc(100dvh - 36px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:26px 24px 22px;border-radius:var(--r-xl);
  background:linear-gradient(158deg,
    color-mix(in srgb,#FFFFFF 6%,var(--ink)),
    var(--deep) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent),var(--el-3);
  transform:translateY(14px) scale(.985);
  transition:transform var(--t-ui) var(--e-emph);
}
.jc.is-on .jc__card{transform:none}

.jc__x{
  position:absolute;top:16px;right:16px;
  width:34px;height:34px;display:grid;place-items:center;line-height:0;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:color-mix(in srgb,var(--paper) 9%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 15%,transparent);
  color:var(--paper);
  transition:background-color var(--t-micro) var(--e-out);
}
.jc__x svg{width:16px;height:16px}
.jc__x:hover{background:color-mix(in srgb,var(--paper) 17%,transparent)}

.jc__hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center;padding-right:40px}
.jc__f{position:relative;flex:none;width:74px;height:74px;display:block}
.jc__f img{
  width:100%;height:100%;border-radius:var(--r-pill);object-fit:cover;display:block;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 34%,transparent);
}
/* ponto de disponivel, encostado na borda da foto */
.jc__f i{
  position:absolute;right:2px;bottom:2px;width:13px;height:13px;
  border-radius:var(--r-pill);background:#2E9E6B;
  box-shadow:0 0 0 2.5px var(--ink);
}
.jc__eye{
  display:flex;align-items:center;gap:7px;margin:0 0 4px;
  font-family:var(--f-display);font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-2);
}
.jc__eye svg{width:13px;height:13px;color:var(--gold)}
.jc__hd h2{font-size:1.42rem;font-weight:800;letter-spacing:-.03em;color:var(--paper)}
.jc__role{
  display:flex;align-items:center;gap:9px;margin-top:4px;
  font-size:.8rem;color:var(--text-1);
}
.jc__role em{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#5FC79A;background:none;-webkit-text-fill-color:#5FC79A;
}
.jc__role em::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);background:#2E9E6B;
}

.jc__chave{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:var(--sp-3);
  font-family:var(--f-display);font-size:1.08rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--paper);
}
.jc__key{
  flex:none;display:grid;place-items:center;line-height:0;
  width:31px;height:31px;border-radius:var(--r-pill);
  color:var(--gold);
  background:color-mix(in srgb,var(--gold) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 32%,transparent);
}
.jc__key svg{width:16px;height:16px}
.jc__chave-p{
  color:var(--gold);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--gold) 52%,transparent);
}
.jc__tx{margin-top:var(--sp-2);font-size:.86rem;line-height:1.6;color:var(--text-1)}
.jc__tx strong{color:var(--paper);font-weight:700}

.jc__num{
  margin-top:var(--sp-3);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
.jc__num li{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:13px 8px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--paper) 5%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 12%,transparent);
}
.jc__num b{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--f-display);font-size:1.16rem;font-weight:800;letter-spacing:-.03em;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.jc__num b svg{width:12px;height:12px;color:var(--gold)}
.jc__num span{
  font-size:.58rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);line-height:1.35;
}

/* O verde do WhatsApp so aqui, e nos tons acessiveis do proprio app
   (#0E7C6F para #075E54 da 5.13:1 com texto branco). O par da marca
   #25D366 -> #128C7E daria 1.98:1, ilegivel. */
.jc__wa{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  margin-top:var(--sp-3);padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,#0E7C6F,#075E54);
  color:#FFFFFF;
  box-shadow:0 8px 22px rgba(7,94,84,.34),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform var(--t-micro) var(--e-out),box-shadow var(--t-micro) var(--e-out);
}
.jc__wa-i{width:38px;height:38px;padding:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.15)}
.jc__wa strong{display:block;font-family:var(--f-display);font-size:.96rem;font-weight:700}
.jc__wa small{display:block;font-size:.74rem;opacity:.86;margin-top:1px}
.jc__wa-a{width:17px;height:17px;transition:transform var(--t-micro) var(--e-out)}
@media (hover:hover){
  .jc__wa:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(7,94,84,.42),inset 0 1px 0 rgba(255,255,255,.2)}
  .jc__wa:hover .jc__wa-a{transform:translateX(4px)}
}
.jc__site{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:var(--sp-2);padding:9px;
  font-size:.78rem;color:var(--text-2);
  transition:color var(--t-micro) var(--e-out);
}
.jc__site svg{width:13px;height:13px}
.jc__site:hover{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .jc,.jc-bd,.jc__card{transition:none}
  .jc__card{transform:none}
}

/* ==========================================================================
   25. MOVIMENTO (§30)
   REGRA: reveal NUNCA controla visibilidade. opacity fica em 1 sempre.
   So transform anima. Se a timeline nao resolver, o conteudo esta la.
   Primeira opcao e scroll-driven nativo (0 KB, fora da main thread).
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   ANIMATE.CSS RECALIBRADA
   As distancias de fabrica sao pensadas para hero e landing curta:
   fadeInUp desloca 100% da ALTURA do elemento, o que num card de 500px
   significa meia tela de salto. Aqui as keyframes sao redefinidas com
   deslocamento fixo e curto. Como este arquivo carrega depois da
   animate.css, estas definicoes vencem, e o resto da biblioteca continua
   valendo. Nada de bounce, flip ou zoom: so deslocamento e opacidade.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --animate-duration:.86s;
  --animate-delay:.1s;
}
/* Amplitude AUMENTADA a pedido: o movimento agora se percebe sem virar
   salto. Cada entrada combina deslocamento com uma escala minima, que e o
   que da sensacao de peso: o bloco parece chegar, nao piscar.
   A curva e a mesma do resto do site (--e-emph), entao a pagina inteira
   desacelera do mesmo jeito. */
@keyframes fadeInUp   {from{opacity:0;transform:translate3d(0,42px,0)  scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeInDown {from{opacity:0;transform:translate3d(0,-34px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeInLeft {from{opacity:0;transform:translate3d(-46px,0,0) scale(.988)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(46px,0,0)  scale(.988)}to{opacity:1;transform:none}}
@keyframes zoomIn     {from{opacity:0;transform:scale(.93)} to{opacity:1;transform:none}}
@keyframes fadeIn     {from{opacity:0} to{opacity:1}}
/* uma curva so para toda a biblioteca */
.animate__animated{animation-timing-function:var(--e-emph);animation-fill-mode:both}

/* REDE DE SEGURANCA, a regra mais importante deste bloco.
   A WOW esconde o elemento com visibility:hidden e so revela no scroll. Se
   o CDN cair, a pagina fica em branco. Por isso a classe .wow NUNCA esta no
   HTML: o proprio main.js so a aplica depois de confirmar que a biblioteca
   carregou. E, ainda assim, este cinto garante que qualquer .wow que nao
   tenha sido animada em 2.5s volte a aparecer. */
html:not(.wow-on) .wow{visibility:visible !important;animation:none !important}
@media (prefers-reduced-motion:reduce){
  .wow,.animate__animated{visibility:visible !important;animation:none !important;opacity:1 !important;transform:none !important}
}

/* Com a WOW ativa, o reveal nativo sai de cena: dois sistemas animando o
   mesmo transform brigariam. */
html.wow-on .sec .shead > *,
html.wow-on .sec .card,html.wow-on .sec .qa__item,html.wow-on .sec .pj,
html.wow-on .sec .mvv__c,html.wow-on .sec .dif__i,html.wow-on .sec .person,
html.wow-on .sec .bignum,html.wow-on .sec .def__card,html.wow-on .sec .chain__i,
html.wow-on .sec .frente,html.wow-on .sec .quote,html.wow-on .sec .ct__i,
html.wow-on .sec .swiper{animation-timeline:none}

/* AUTO-REVEAL.
   Antes so o que carregava .rv no HTML entrava com movimento, e era pouco:
   a pagina aparecia de uma vez e o scroll ficava sem ritmo. Aqui os blocos
   de conteudo de toda secao ganham a entrada por seletor, sem tocar no
   HTML. Continua valendo a regra de ouro: so transform, nunca opacity, e o
   estado de falha e o conteudo no lugar certo.
   A escada de --rvd faz o item seguinte entrar um pouco depois do anterior,
   entao uma grade nao "estala" inteira de uma vez. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec .shead > *,
    .sec .eyebrow,
    .sec .card,.sec .qa__item,.sec .pj,.sec .mvv__c,.sec .dif__i,
    .sec .person,.sec .bignum,.sec .def__card,.sec .chain__i,
    .sec .frente,.sec .quote,.sec .ct__i,.sec .ct__card,.sec .lead-card,
    .sec .bandshot,.sec .story__pull,.sec .faq__grp,
    .foot__claim,.foot__col{
      animation:lc-rv linear both;
      animation-timeline:view();
      animation-range:entry 2% cover calc(26% + var(--rvd,0) * 3.5%);
    }
    /* o carrossel inteiro entra como peca unica, nunca slide a slide */
    .sec .swiper{animation:lc-rv-s linear both;animation-timeline:view();animation-range:entry 4% cover 30%}
  }
}

/* escada de atraso dentro das grades */
    .grid > :nth-child(1),
    .pjs > :nth-child(1),
    .mvv > :nth-child(1),
    .dif > :nth-child(1),
    .bignums > :nth-child(1),
    .def > :nth-child(1),
    .qa > :nth-child(1),
    .insts > :nth-child(1),
    .team > :nth-child(1),
    .faq > :nth-child(1),
    .ct__list > :nth-child(1),
    .foot__grid > :nth-child(1){--rvd:0}
    .grid > :nth-child(2),
    .pjs > :nth-child(2),
    .mvv > :nth-child(2),
    .dif > :nth-child(2),
    .bignums > :nth-child(2),
    .def > :nth-child(2),
    .qa > :nth-child(2),
    .insts > :nth-child(2),
    .team > :nth-child(2),
    .faq > :nth-child(2),
    .ct__list > :nth-child(2),
    .foot__grid > :nth-child(2){--rvd:1}
    .grid > :nth-child(3),
    .pjs > :nth-child(3),
    .mvv > :nth-child(3),
    .dif > :nth-child(3),
    .bignums > :nth-child(3),
    .def > :nth-child(3),
    .qa > :nth-child(3),
    .insts > :nth-child(3),
    .team > :nth-child(3),
    .faq > :nth-child(3),
    .ct__list > :nth-child(3),
    .foot__grid > :nth-child(3){--rvd:2}
    .grid > :nth-child(4),
    .pjs > :nth-child(4),
    .mvv > :nth-child(4),
    .dif > :nth-child(4),
    .bignums > :nth-child(4),
    .def > :nth-child(4),
    .qa > :nth-child(4),
    .insts > :nth-child(4),
    .team > :nth-child(4),
    .faq > :nth-child(4),
    .ct__list > :nth-child(4),
    .foot__grid > :nth-child(4){--rvd:3}
    .grid > :nth-child(5),
    .pjs > :nth-child(5),
    .mvv > :nth-child(5),
    .dif > :nth-child(5),
    .bignums > :nth-child(5),
    .def > :nth-child(5),
    .qa > :nth-child(5),
    .insts > :nth-child(5),
    .team > :nth-child(5),
    .faq > :nth-child(5),
    .ct__list > :nth-child(5),
    .foot__grid > :nth-child(5){--rvd:4}
    .grid > :nth-child(6),
    .pjs > :nth-child(6),
    .mvv > :nth-child(6),
    .dif > :nth-child(6),
    .bignums > :nth-child(6),
    .def > :nth-child(6),
    .qa > :nth-child(6),
    .insts > :nth-child(6),
    .team > :nth-child(6),
    .faq > :nth-child(6),
    .ct__list > :nth-child(6),
    .foot__grid > :nth-child(6){--rvd:5}

/* FAMILIAS DE ENTRADA.
   Um unico movimento em tudo vira tique. Cada natureza de conteudo tem a
   sua: texto sobe, imagem assenta na escala, linha se desenha, painel abre
   por clip. Todas so em transform e clip, nunca em opacity (§30.1), entao
   o pior caso de falha e o elemento nao se mexer. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv,.rv--x,.rv--s,.rv--clip,.rv--line,.rv--liney{
      animation:lc-rv linear both;
      animation-timeline:view();
      animation-range:entry 4% cover calc(22% + var(--rvd,0) * 4%);
    }
    .rv--x{animation-name:lc-rv-x}
    .rv--s{animation-name:lc-rv-s}
    .rv--clip{animation-name:lc-rv-clip}
    .rv--line{animation-name:lc-rv-line;transform-origin:left center}
    .rv--liney{animation-name:lc-rv-liney;transform-origin:top center}
  }
}
@keyframes lc-rv{from{transform:translateY(var(--shift-enter))}to{transform:none}}
@keyframes lc-rv-x{from{transform:translateX(calc(var(--shift-enter) * -1))}to{transform:none}}
@keyframes lc-rv-s{from{transform:scale(.965)}to{transform:none}}
@keyframes lc-rv-clip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes lc-rv-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lc-rv-liney{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Foto que assenta na escala enquanto entra na tela. So transform, roda no
   compositor, 0 KB de JS. Se a timeline nao existir, a foto ja esta certa. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .nucleo__media img,.story__media img,.person__ph img,.bandshot img{
      animation:lc-settle linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 42%;
    }
  }
}
@keyframes lc-settle{from{transform:scale(1.07)}to{transform:scale(1)}}

/* Feedback de "batida" em acao pontual */
@keyframes lc-bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.is-bump{animation:lc-bump .32s var(--e-spring)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marq__track{animation:none;transform:none}
  .rail__fill{transform:scaleY(1)}
  .mhead__prog{transform:scaleX(0)}
}

/* ==========================================================================
   26. IMPRESSAO
   ========================================================================== */

@media print{
  .mhead,.mega,.dock,.drawer,.scrim,.wafloat,.rail,.grain,.marq{display:none !important}
  body{background:#FFFFFF;color:#15333B;padding-bottom:0}
  .sec{padding-block:22px;background:#FFFFFF !important;color:#15333B !important}
  h1,h2,h3,h4{color:#15333B !important}
  em{-webkit-text-fill-color:#7F693D;color:#7F693D;background:none}
  details.q{break-inside:avoid}
  details.q .q__a{display:block !important}
}