/* ==========================================================================
   FONSECA LISBOA ADVOCACIA — SEÇÕES
   Narrativa do scroll, seção por seção. Preparação, seção 6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 HERÓI
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;   /* 100vh quebra com a barra de URL móvel (13) */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-petrol);
}
.hero__canvas,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  display: block;
}
.hero__fallback { object-fit: cover; }
.hero__canvas { opacity: 0; transition: opacity 1.2s var(--e-suave); }
.hero__canvas.is-ready { opacity: 1; }

/* O único gradiente do site inteiro (4.5) */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%,
              transparent 40%, rgba(10, 22, 20, 0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__label { margin-bottom: clamp(28px, 5vh, 56px); }

/* O empilhamento de uma palavra por linha FICOU SÓ NO MANIFESTO.
   No herói o título agora tem oito palavras e vinha ocupando a tela inteira —
   as palavras correm inline e quebram sozinhas dentro de uma medida curta.
   A revelação em máscara, palavra a palavra, continua igual. */
.hero__title {
  display: block;
  font-size: clamp(30px, min(5.2vw, 6.4vh), 68px);
  max-width: 17ch;
  margin-inline: auto;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-4);
  margin-top: clamp(28px, 4vh, 48px);
}

/* left/right 0: com a margem da grade aqui E o padding do .wrap, os links
   ficavam o dobro para dentro — desalinhados da marca no header e do título. */
.hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 5vh, 48px);
  z-index: var(--z-content);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}
.hero__social {
  display: flex;
  gap: var(--s-4);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
}
/* Centralizado, e sem transform: o GSAP anima o `y` deste elemento na entrada
   do herói, e um translateX de centralização seria lido como x em pixels. */
.hero__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: max-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-text-muted);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 40px;
  background: var(--c-mint);
  transform-origin: top;
  animation: hero-scroll 2.4s var(--e-cortina) infinite;
}
/* O filete escorre e some: indica a rolagem sem piscar nem pulsar. */
@keyframes hero-scroll {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 767px) {
  /* O teto é ditado pela PALAVRA MAIS LONGA do título, não pelo gosto:
     "COMPROMETIDA" precisa caber inteira na linha, porque a máscara recorta
     sem gerar barra de rolagem. A 7.4vw ela cabe com folga até em 320px.
     A entrelinha sobe para 1.02: a 0.92 o acento de "TÉCNICA" encostava na
     linha de cima. */
  .hero__title { font-size: clamp(26px, 7.4vw, 36px); line-height: 1.02; max-width: none; }
  .hero__label { max-width: 30ch; }
  .hero__cta { gap: var(--s-2) var(--s-3); }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   6.2 MANIFESTO
   -------------------------------------------------------------------------- */
.manifesto { background: var(--c-abyss); overflow: hidden; }
.manifesto__inner { position: relative; z-index: var(--z-content); }
.manifesto__title { margin-block: var(--s-4) var(--s-6); }
.manifesto__title .word-mask { display: block; }
.manifesto__aside {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .manifesto__aside { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   6.3 ATUAÇÃO — seção com pin (300vh)
   -------------------------------------------------------------------------- */
.atuacao { background: var(--c-petrol); position: relative; }
.atuacao__sticky {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--s-6);
}
.atuacao__head { margin-bottom: var(--s-6); }

.atuacao__index { grid-column: 1 / span 5; }
.atuacao__list li + li { margin-top: var(--s-1); }

.atuacao__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-2) 0 var(--s-2) 0;
  color: var(--c-text);
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.5s var(--e-suave), transform 0.3s var(--e-suave);
}
.atuacao__item:hover { opacity: 0.7; transform: translateX(6px); }
.atuacao__item.is-active { opacity: 1; transform: none; }

/* Filete de menta que cresce à esquerda do item ativo */
.atuacao__item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 12px; height: 1px;
  background: var(--c-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--e-cortina);
}
.atuacao__item.is-active::before { transform: scaleX(1); }

.atuacao__num {
  font-family: var(--font-serif);
  font-size: var(--t-small);
  color: var(--c-mint);
  flex: 0 0 auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.atuacao__name {
  font-size: clamp(17px, 1.8vw, 26px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: var(--tr-h3);
  text-transform: uppercase;
}

.atuacao__progress {
  margin-top: var(--s-4);
  height: 1px;
  background: var(--c-rule);
  position: relative;
}
.atuacao__progress i {
  position: absolute;
  inset: 0;
  background: var(--c-mint);
  transform: scaleX(0);
  transform-origin: left;
}

/* Painel de conteúdo à direita */
.atuacao__panels {
  grid-column: 7 / -1;
  position: relative;
  min-height: 430px;
}
/* A troca de painel é o gesto "wipe": o que entra desce como uma cortina e o
   texto sobe junto; o que sai some na hora, para os dois nunca se cruzarem. */
.atuacao__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.atuacao__panel.is-active {
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
  transition: clip-path var(--d-reveal) var(--e-entrada);
}
.atuacao__panel > * { transform: translate3d(0, 14px, 0); }
.atuacao__panel.is-active > * {
  transform: none;
  transition: transform var(--d-reveal) var(--e-entrada);
}
.atuacao__panel.is-active > :nth-child(2) { transition-delay: 0.04s; }
.atuacao__panel.is-active > :nth-child(3) { transition-delay: 0.08s; }
.atuacao__panel.is-active > :nth-child(4) { transition-delay: 0.12s; }
.atuacao__panel.is-active > :nth-child(5) { transition-delay: 0.16s; }

.atuacao__panel-num {
  font-size: clamp(34px, 3.4vw, 54px);
  color: var(--c-mint);
  margin-bottom: calc(-1 * var(--s-1));
}
.atuacao__panel-title { color: var(--c-text); }
.atuacao__panel-text { color: var(--c-text-muted); max-width: 44ch; }

/* Os quatro primeiros itens de "O que fazemos", em duas colunas. */
.atuacao__panel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
  width: 100%;
  max-width: 640px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
}
.atuacao__panel-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-text);
}
.atuacao__panel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--c-mint);
}

@media (max-width: 900px) {
  /* Pin desligado em mobile: vira pilha vertical (6.3) */
  .atuacao__sticky { min-height: 0; display: block; padding-block: 0; }
  .atuacao__index, .atuacao__panels { grid-column: 1 / -1; }
  .atuacao__panels { position: static; min-height: 0; }
  .atuacao__panel {
    position: static;
    clip-path: none;
    pointer-events: auto;
    padding: var(--s-4) 0 var(--s-5);
    border-bottom: 1px solid var(--c-rule);
    gap: var(--s-2);
  }
  .atuacao__panel > * { transform: none; }
  .atuacao__index { display: none; }
  .atuacao__panel-num { font-size: 30px; margin-bottom: 0; }
  .atuacao__panel-title { margin-bottom: var(--s-1); }
  /* Na pilha a lista alongaria demais a seção: a página da área tem tudo. */
  .atuacao__panel-list { display: none; }
}

/* --------------------------------------------------------------------------
   6.4 MÉTODO — primeira quebra de luz do site
   -------------------------------------------------------------------------- */
.metodo {
  background: var(--c-bone);
  color: var(--c-ink-dark);
  /* Método e Números são um só bloco claro. Com o padding cheio das duas
     seções sobrava um vão de 200px de branco puro entre a última etapa e o
     primeiro numeral — espaço vazio sem função. */
  padding-bottom: var(--s-5);
}
.metodo__head { margin-bottom: var(--s-6); }

.metodo__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 0.8fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) var(--s-3);
  border-top: 1px solid var(--c-rule);
  transition: background-color 0.4s var(--e-suave);
}
.metodo__step:last-child { border-bottom: 1px solid var(--c-rule); }
.metodo__step:hover { background: var(--c-bone-dim); }

.metodo__num {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 46px);
  color: var(--c-teal);
  line-height: 0.9;
  transition: transform 0.4s var(--e-suave);
  font-variant-numeric: lining-nums tabular-nums;
}
.metodo__step:hover .metodo__num { transform: translateX(8px); }
.metodo__title { text-transform: uppercase; letter-spacing: var(--tr-h3); }
.metodo__text { color: var(--c-ink-dark-m); max-width: 52ch; }

@media (max-width: 767px) {
  .metodo__step {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding-inline: 0;
  }
  .metodo__step:hover { background: transparent; }
}

/* --------------------------------------------------------------------------
   6.5 NÚMEROS INSTITUCIONAIS
   Conformidade OAB (3.3): nada aqui se refere a resultado obtido em processo.
   Não adicionar "% de êxito", "causas ganhas" ou "valores recuperados"
   em nenhuma circunstância — Provimento 205/2021, Art. 4, §2.
   -------------------------------------------------------------------------- */
.numeros { background: var(--c-bone); color: var(--c-ink-dark); }
.numeros__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--grid-gutter);
  border-top: 1px solid var(--c-rule);
  padding-top: var(--s-5);
}
/* Logo abaixo do Método, cujo último passo já fecha com um filete: eram dois
   traços paralelos a 64px um do outro. */
.metodo + .numeros .numeros__grid { border-top: 0; padding-top: 0; }
.numeros__value {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.5vw, 82px);
  line-height: 0.92;
  color: var(--c-ink-dark);
  font-variant-numeric: lining-nums tabular-nums;
}
.numeros__label {
  margin-top: var(--s-2);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-teal);
  line-height: 1.5;
}
.numeros__note {
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--c-ink-dark-m);
  max-width: 60ch;
}

@media (max-width: 767px) {
  .numeros__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   6.6 LINGUAGEM — o clímax
   Substitui a parede de depoimentos da referência, que seria vedada
   pelo Art. 3, IV e Art. 4, §2 do Provimento 205/2021.
   -------------------------------------------------------------------------- */
.linguagem { background: var(--c-petrol); position: relative; overflow: hidden; }
.linguagem__sticky {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: var(--s-6);
}
.linguagem__inner { position: relative; z-index: var(--z-content); width: 100%; }

/* Ao contrário do herói e do manifesto, ESTE título NÃO empilha uma palavra
   por linha: são 11 palavras, e a seção tem pin de 100vh. As palavras correm
   inline e quebram naturalmente dentro de uma medida curta. */
.linguagem__title {
  margin-block: var(--s-3) var(--s-5);
  max-width: 16ch;
  font-size: clamp(24px, min(3.4vw, 5.4vh), 46px);
  line-height: 1.03;
}

.linguagem__head { grid-column: 1 / span 5; grid-row: 1; }
.linguagem__doc {
  grid-column: 7 / -1;
  grid-row: 1;
  align-self: center;
  background: var(--c-petrol-up);
  border-left: 2px solid var(--c-mint);
  padding: var(--s-5) var(--s-4);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 2.1;   /* respiro: as trocas acontecem entre as linhas */
  max-width: 62ch;
}
/* A conclusão, logo abaixo do documento, dentro da cena fixada. */
.linguagem__coda {
  grid-column: 7 / -1;
  grid-row: 2;
  margin-top: var(--s-3);
  max-width: 52ch;
}
.linguagem__doc p { margin: 0; }
.linguagem__doc-label {
  display: block;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}

/* Cada expressão trocada durante o scrub.
   A largura do .term é fixada por JS em max(antigo, novo) para que a troca
   anime SOMENTE transform e opacity — a regra de performance da preparação
   (11.8) proíbe animar width/height em scrub. O leve respiro em volta do
   termo trocado lê como campo de formulário, o que combina com o tema. */
.term {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
}
.term__old {
  position: relative;   /* o risco mede o TEXTO ANTIGO, não a caixa fixa */
  display: inline-block;
  will-change: opacity, filter;
}
.term__new {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  color: var(--c-mint-hi);
  transform: translateY(0.6em);
  white-space: nowrap;
  will-change: transform, opacity;
}
/* risco em menta que varre o termo antigo.
   Fica dentro de .term__old: se ficasse no .term herdaria a largura fixa
   (max entre antigo e novo) e se estenderia para além do texto riscado. */
.term__strike {
  position: absolute;
  left: 0; top: 52%;
  width: 100%; height: 1px;
  background: var(--c-mint);
  transform: scaleX(0);
  transform-origin: left;
}
.term__underline {
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--c-mint);
  opacity: 0;
  transform-origin: left;
}

/* Sob movimento reduzido mostramos o texto já traduzido (Preparação 12); as
   duas versões inteiras estão no parágrafo para leitor de tela, em home.mjs.
   Sem JS, o mesmo: a tradução nunca aconteceria e a seção ficaria só em
   juridiquês. */
@media (prefers-reduced-motion: reduce) {
  .term { white-space: normal; }
  .term__old, .term__strike, .term__underline { display: none; }
  .term__new { position: static; opacity: 1; transform: none; }
}
html:not(.js) .term { white-space: normal; }
html:not(.js) .term__old,
html:not(.js) .term__strike,
html:not(.js) .term__underline { display: none; }
html:not(.js) .term__new { position: static; opacity: 1; transform: none; }

@media (max-width: 900px) {
  .linguagem__sticky { min-height: 0; display: block; padding-block: var(--s-6); }
  .linguagem__head,
  .linguagem__doc,
  .linguagem__coda { grid-column: 1 / -1; grid-row: auto; }
  .linguagem__doc { margin-top: var(--s-4); padding: var(--s-4) var(--s-3); line-height: 1.9; }
  .linguagem__title { max-width: none; margin-bottom: 0; }
  .linguagem__coda { margin-top: var(--s-4); }
}

/* --------------------------------------------------------------------------
   6.7 EQUIPE
   -------------------------------------------------------------------------- */
.equipe { background: var(--c-abyss); }
.equipe__head { margin-bottom: var(--s-6); }
.equipe__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--grid-gutter);
  align-items: start;
}
/* Cada cartão herda as linhas da grade (subgrid): com "GUILHERME O. FONSECA"
   quebrando em duas linhas e os outros nomes em uma, as inscrições, os
   filetes e os textos saíam cada um numa altura. Agora alinham. */
.equipe__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  text-decoration: none;
  color: var(--c-text);
}
.equipe__grid--perfil .equipe__card { grid-row: span 5; }
@supports not (grid-template-rows: subgrid) {
  .equipe__card { display: block; }
}
/* Chegando por equipe.html#nome, o header fixo cobria o topo do cartão. */
.equipe__card[id] { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }

.equipe__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-petrol-up);
}
/* Foto do ensaio, quando existir: dessaturada em repouso, cor no hover. */
.equipe__media .retrato__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.35);
  transform: scale(1);
  transition: filter 0.5s var(--e-suave), transform 0.6s var(--e-suave);
}
.equipe__card:hover .retrato__foto {
  filter: saturate(0.8);
  transform: scale(1.03);
}

.equipe__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--s-3);
}
.equipe__name {
  position: relative;
  display: inline-block;
  margin-bottom: var(--s-2);
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
}
.equipe__name::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--c-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--e-cortina);
}
.equipe__card:hover .equipe__name::after { transform: scaleX(1); }

/* Inscrição na OAB em pílula. O raio 999px é permitido pela regra binária
   de forma (4.7) — é a mesma família do botão primário. */
.equipe__full {
  margin: calc(4px - var(--s-2)) 0 var(--s-2);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  line-height: 1.35;
}
/* margin-top auto: a pílula desce para a base da linha do nome, e fica na
   mesma altura em todos os cartões. */
.equipe__oab {
  display: inline-block;
  margin-top: auto;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c-mint) 32%, transparent);
  background: color-mix(in srgb, var(--c-mint) 12%, transparent);
  color: var(--c-mint);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  font-weight: 500;
  white-space: nowrap;
}

.equipe__rule {
  height: 1px;
  border: 0;
  margin: var(--s-3) 0;
  background: var(--c-rule);
}

.equipe__block + .equipe__block { margin-top: var(--s-3); }
.equipe__block-label {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-mint);
  margin-bottom: var(--s-1);
}
.equipe__block-text {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}

@media (max-width: 600px) {
  /* No celular, os retratos 4:5 de tela cheia somavam telas e telas de
     rolagem. Viram uma lista: retrato quadrado à esquerda, nome e inscrição
     ao lado, textos embaixo. */
  .equipe__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .equipe__card {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: none;
    grid-row: auto;
    column-gap: var(--s-3);
    align-items: center;
  }
  .equipe__grid--perfil .equipe__card { grid-row: auto; }
  .equipe__media { aspect-ratio: 1; grid-column: 1; grid-row: 1; }
  .equipe__id { grid-column: 2; grid-row: 1; padding-top: 0; }
  .equipe__name { margin-bottom: 4px; }
  .equipe__full { margin: 0; }
  .equipe__oab { margin-top: var(--s-1); }
  .equipe__rule,
  .equipe__block,
  .equipe__card > .equipe__block-text { grid-column: 1 / -1; }
  .equipe__rule { margin-block: var(--s-3); }
  /* Sem hover em toque: o estado tratado vira o padrão (13) */
  .equipe__media .retrato__foto { filter: saturate(0.7); }
}

/* --------------------------------------------------------------------------
   RETRATO TIPOGRÁFICO — src/partials/equipe.mjs
   Iniciais em serifada e o filete da logomarca, até o ensaio fotográfico
   existir. Substitui a silhueta de "usuário sem foto".
   -------------------------------------------------------------------------- */
.retrato {
  --tom: var(--c-teal-hi);
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--tom) 30%, transparent), transparent 70%),
    var(--c-petrol-up);
}
.retrato--vinho { --tom: var(--c-wine-hi); }
.retrato--menta { --tom: var(--c-mint); }

/* O traço vertical da assinatura, na cor do advogado. No hover ele cresce do
   centro, como no loader da home. */
.retrato__filete {
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 17%;
  width: 2px;
  background: var(--tom);
  transform: scaleY(0.82);
  transition: transform 0.9s var(--e-entrada);
}
.retrato__ini {
  position: absolute;
  left: 9%;
  bottom: 8%;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(54px, 6vw, 100px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}
.equipe__card:hover .retrato__filete,
.assinatura:hover .retrato__filete { transform: scaleY(1); }

@media (max-width: 1100px) {
  .retrato__ini { font-size: clamp(54px, 11vw, 100px); }
}
@media (max-width: 600px) {
  .equipe__media .retrato__ini { font-size: 38px; left: 12%; bottom: 12%; }
}
@media (prefers-reduced-motion: reduce) {
  .retrato__filete { transition: none; }
}

/* Assinatura compacta: retrato pequeno, nome e inscrição. Em "Quem atende
   nesta área", no Escritório e no fim de cada artigo. */
.assinatura {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text);
  text-decoration: none;
}
.assinatura__media {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
}
.assinatura__media .retrato__ini { font-size: 28px; left: 8px; bottom: 8px; }
.assinatura__media .retrato__filete { top: 14%; bottom: 14%; right: 16%; }
.assinatura__media .retrato__foto { width: 100%; height: 100%; object-fit: cover; }
.assinatura__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assinatura__nome {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
  transition: color 0.35s var(--e-suave);
}
.assinatura__oab {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}
a.assinatura:hover .assinatura__nome,
a.assinatura:focus-visible .assinatura__nome { color: var(--c-action); }

.assinaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s-3) var(--s-4);
  align-content: start;
}
.assinaturas--duas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-rule);
}
@media (max-width: 560px) {
  .assinaturas--duas { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6.8 PUBLICAÇÕES
   -------------------------------------------------------------------------- */
.publicacoes { background: var(--c-petrol); }
.publicacoes__head { margin-bottom: var(--s-5); }
.post {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-rule);
  text-decoration: none;
  transition: padding 0.4s var(--e-suave);
}
.post:last-of-type { border-bottom: 1px solid var(--c-rule); }
.post:hover { padding-block: calc(var(--s-4) + 8px); }
.post__date {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.post__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transition: transform 0.4s var(--e-suave);
}
.post:hover .post__main { transform: translateX(12px); }
.post__title {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.25;
  font-weight: 500;
}
/* No índice: linha fina e autor abaixo do título. */
.post__resumo {
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-text-muted);
}
.post__autor {
  margin-top: 4px;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.post__area {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-mint);
  text-align: right;
}

/* Miniatura que segue o cursor — a interação de hover mais rica do site (6.8) */
.post-thumb {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: 120px; height: 160px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: var(--c-petrol-up);
  border: 1px solid var(--c-petrol-ln);
  will-change: transform, opacity;
}
.post-thumb__art {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 700;
  color: var(--c-mint);
  opacity: 0.5;
}

@media (max-width: 767px) {
  .post {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
  .post:hover { padding-block: var(--s-4); }
  .post:hover .post__main { transform: none; }
  .post__area { text-align: left; }
  .post-thumb { display: none; }
}

/* --------------------------------------------------------------------------
   6.9 CONTATO — o site termina na luz
   -------------------------------------------------------------------------- */
.contato { background: var(--c-bone); color: var(--c-ink-dark); }
/* A página /contato começa por esta seção, sem page-head: o respiro do topo
   é o mesmo das outras páginas internas. */
.contato--page { padding-top: calc(var(--header-h) + var(--s-7)); }
.contato__title {
  /* O rótulo "Contato" encostava no título: em toda outra seção há 24px. */
  margin-block: var(--s-3);
  /* Sem empilhar uma palavra por linha: "Fale com o escritório" ocupava
     quatro linhas de display e empurrava os canais de contato para baixo —
     justamente o que se queria trazer para cima. */
  font-size: clamp(30px, min(5vw, 6.4vh), 64px);
  max-width: 16ch;
}
.contato__intro { margin-bottom: var(--s-2); max-width: 52ch; }
.contato__form { grid-column: 1 / span 7; }
.contato__form-lead { margin-bottom: var(--s-3); }
.contato__aside { grid-column: 9 / -1; }
.contato__fields { display: grid; gap: var(--s-3); }
.contato__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.contato__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}
.contato__submit-note {
  max-width: 34ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}
/* Vazio, não ocupa altura — mas continua na árvore de acessibilidade: com
   display:none, o leitor de tela não anunciaria a mensagem quando chegasse. */
.contato__submit .form-status { flex-basis: 100%; margin-top: 0; }
.contato__submit .form-status:empty { min-height: 0; }
.contato__info + .contato__info { margin-top: var(--s-4); }
.contato__info p:not(.label) { margin-top: var(--s-1); max-width: 34ch; }

@media (max-width: 900px) {
  .contato__form, .contato__aside { grid-column: 1 / -1; }
  .contato__aside { margin-top: var(--s-6); }
  .contato__row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .contato--page { padding-top: calc(var(--header-h) + var(--s-5)); }
}

/* --------------------------------------------------------------------------
   PÁGINAS INTERNAS
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: var(--s-6);
  background: var(--c-petrol);
  position: relative;
  overflow: hidden;
}
.page-head__inner { position: relative; z-index: var(--z-content); }

/* Ao contrário do herói, aqui as palavras NÃO empilham uma por linha: os
   títulos internos são frases de 5 a 9 palavras e, na escala display,
   viravam uma parede de sete linhas. Correm inline e quebram sozinhas. */
.page-head__title {
  margin-block: var(--s-3) var(--s-4);
  font-size: clamp(26px, min(3.8vw, 6vh), 50px);
  line-height: 1.04;
  max-width: 18ch;
}

/* Título de artigo: caixa normal. Uma manchete de nove palavras em caixa
   alta com tracking negativo é ilegível — e artigo é para ler, não para
   impressionar. */
.page-head__title--article {
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(25px, 3vw, 42px);
  line-height: 1.12;
  max-width: 24ch;
}

@media (max-width: 767px) {
  /* 212px de vazio antes do rótulo, no celular, empurravam o título para
     baixo da dobra em telas menores. */
  .page-head { padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-5); }
}

/* Colunas das páginas internas: rótulo e subtítulo à esquerda, conteúdo à
   direita. Eram estilos inline (grid-column:1 / span 5, 7 / -1). */
.area__side { grid-column: 1 / span 5; }
.area__main { grid-column: 7 / -1; }
.area__h2 { margin-top: var(--s-3); max-width: 16ch; }
.area__quando { max-width: 54ch; }

@media (max-width: 900px) {
  .area__side, .area__main { grid-column: 1 / -1; }
  .area__main { margin-top: var(--s-4); }
}

/* ARTIGO — cabeçalho, texto e fim na mesma coluna. */
.article-col { grid-column: 3 / span 8; }
@media (max-width: 1100px) { .article-col { grid-column: 2 / span 10; } }
@media (max-width: 767px)  { .article-col { grid-column: 1 / -1; } }

.page-head--article { padding-bottom: var(--s-4); }
.page-head--article .label .link { color: inherit; }
.page-head--article .article-meta {
  margin: var(--s-5) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 0;
}
.article { padding-top: var(--s-5); }

.article-aviso {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-text-muted);
}
.article-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.autor .label,
.compartilhar .label { margin-bottom: var(--s-2); }

/* Compartilhar: links comuns, sem script de rede social. */
.compartilhar__links { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.compartilhar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-pill);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.35s var(--e-suave), color 0.35s var(--e-suave),
              background-color 0.35s var(--e-suave);
}
/* O display acima venceria o atributo hidden: o "Copiar link" só aparece
   quando site.js confirma que a área de transferência existe. */
.compartilhar__link[hidden] { display: none; }
.compartilhar__link .icone { width: 18px; height: 18px; flex: 0 0 auto; }
.compartilhar__link:hover,
.compartilhar__link:focus-visible {
  border-color: var(--c-action);
  color: var(--c-action);
}
.compartilhar__copiar {
  padding-inline: 16px;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
}
.compartilhar__copiar.is-feito {
  border-color: var(--c-action);
  background: color-mix(in srgb, var(--c-action) 12%, transparent);
  color: var(--c-action);
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-3); }
.prose h2 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
  font-weight: 500;
  margin-top: var(--s-5);
}
.prose h3 { font-size: 20px; font-weight: 500; margin-top: var(--s-4); }
.prose ul { padding-left: 1.1em; list-style: disc; }
.prose li + li { margin-top: var(--s-1); }
.prose a { color: var(--c-action); }
.prose strong { font-weight: 500; }

/* Corpo de artigo: serifada em papel restrito (4.2) */
.article-body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.72;
  max-width: 66ch;
}
.article-body > * + * { margin-top: var(--s-3); }
.article-body h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
  font-weight: 500;
  margin-top: var(--s-5);
}
.article-body em { font-style: italic; }
.article-body ul { padding-left: 1.1em; list-style: disc; }

.pullquote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--c-mint);
  border-left: 2px solid var(--c-mint);
  padding-left: var(--s-4);
  margin-block: var(--s-5);
  max-width: 24ch;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: var(--s-5);
}

/* Índice de áreas (/atuacao) e de publicações */
.index-list { border-top: 1px solid var(--c-rule); }
.index-item {
  display: grid;
  grid-template-columns: minmax(60px, 0.6fr) minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-rule);
  text-decoration: none;
  transition: background-color 0.4s var(--e-suave);
}
.index-item:hover { background: color-mix(in srgb, var(--c-mint) 6%, transparent); }
.index-item__num {
  font-family: var(--font-serif);
  color: var(--c-mint);
  font-variant-numeric: lining-nums tabular-nums;
}
.index-item__title {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
  transition: transform 0.4s var(--e-suave);
}
.index-item:hover .index-item__title { transform: translateX(10px); }
.index-item__text { color: var(--c-text-muted); }

@media (max-width: 900px) {
  .index-item { grid-template-columns: 1fr; gap: var(--s-2); }
  .index-item:hover .index-item__title { transform: none; }
}

/* Bloco de próxima etapa no fim das páginas internas */
.next-block {
  position: relative;
  overflow: hidden;
  background: var(--c-abyss);
  padding-block: var(--s-7);
  text-align: center;
}
.next-block__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.next-block__title {
  font-size: var(--t-h1);
  max-width: 18ch;
  margin-bottom: var(--s-5);
}
.next-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-4);
}
.next-block__note {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}
@media (max-width: 767px) {
  .next-block { padding-block: var(--s-6); }
  .next-block__title { margin-bottom: var(--s-4); }
}

/* 404 */
.notfound {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  text-align: center;
  background: var(--c-petrol);
  padding-block: calc(var(--header-h) + var(--s-5)) var(--s-6);
}
.notfound__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.notfound__title {
  margin-block: var(--s-3) var(--s-4);
  font-size: clamp(32px, min(6.4vw, 11vh), 92px);
}
.notfound .lead { max-width: 44ch; }
.notfound__actions { margin-top: var(--s-5); }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   LOCALIZAÇÃO
   -------------------------------------------------------------------------- */
.local { background: var(--c-abyss); }

.local__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s-5) var(--s-6);
  align-items: start;
  margin-top: var(--s-6);
}

.local__row + .local__row { margin-top: var(--s-4); }
.local__value {
  margin-top: var(--s-1);
  font-size: var(--t-lead);
  line-height: 1.5;
}

.local__map {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-petrol-up);
  border: 1px solid var(--c-rule);
  overflow: hidden;
}

.local__map-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-4);
}
.local__pin { width: 34px; height: 34px; color: var(--c-mint); }
.local__map-addr {
  font-size: var(--t-lead);
  line-height: 1.45;
  margin-bottom: var(--s-2);
}
.local__map-note {
  font-size: var(--t-small);
  color: var(--c-text-muted);
  max-width: 42ch;
  margin-top: var(--s-2);
}

/* O mapa do Google chega claro e azul. Invertido e dessaturado vira um mapa
   escuro; a camada de teal por cima, em mix-blend-mode, puxa tudo para o
   verde da marca em vez de deixar um cinza neutro no meio do site. */
.local__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.92) grayscale(0.86) contrast(0.92) brightness(0.96);
}
.local__map.is-loaded::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--c-teal);
  mix-blend-mode: color;
  opacity: 0.55;
}
.local__map.is-loaded .local__map-ph { display: none; }

@media (max-width: 900px) {
  .local__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .local__map { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   CARTÃO DE POST DE REDE SOCIAL — dentro do artigo
   Não é o embed oficial: o do Instagram carrega script e cookies da Meta
   assim que a página abre. O cartão é HTML do próprio site, com a imagem
   hospedada aqui, e nada de terceiros carrega até o clique.
   -------------------------------------------------------------------------- */
.article-body > .social-card { margin-block: var(--s-5); }

.social-card__link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border: 1px solid var(--c-rule);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: border-color 0.4s var(--e-suave);
}
.social-card__link:hover,
.social-card__link:focus-visible { border-color: var(--c-action); }

.social-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-abyss);
}
.social-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--e-suave);
}
.social-card__link:hover .social-card__media img { transform: scale(1.03); }

/* Reels e vídeos: o play avisa que é vídeo antes do clique. */
.social-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c-ink) 45%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-abyss) 55%, transparent);
  color: var(--c-ink);
}
.social-card__play svg { width: 26px; height: 26px; margin-left: 3px; }

.social-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-4);
}
.social-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-action);
}
.social-card__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.social-card__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--c-text-muted);
}
.social-card__body .link-arrow { margin-top: auto; }
.social-card__link:hover .link-arrow svg,
.social-card__link:focus-visible .link-arrow svg { transform: translateX(6px); }

@media (max-width: 600px) {
  .social-card__link { grid-template-columns: 1fr; }
  /* Empilhado, a arte aparece inteira; só uma imagem muito alta (story,
     9:16) é recortada, para não ocupar a tela toda. */
  .social-card__media img { max-height: 440px; }
  .social-card__body { padding: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .social-card__link:hover .social-card__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   CAMPANHAS — campanhas/*.html
   -------------------------------------------------------------------------- */
.campanha-hero__title { max-width: 20ch; }
.campanha-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-5);
}
.campanha-hero__note {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}

/* Campanha encerrada. Vinho, o acento quente da marca: avisa sem alarmar. */
.campanha-aviso {
  max-width: 62ch;
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--c-wine-hi);
  background: color-mix(in srgb, var(--c-wine) 24%, transparent);
  font-size: var(--t-small);
}

.campanha__side { grid-column: 1 / span 5; }
.campanha__main { grid-column: 7 / -1; }
.campanha__h2 { margin-top: var(--s-3); max-width: 22ch; }
.campanha__h2 + .campanha-cards,
.campanha__h2 + .campanha-steps { margin-top: var(--s-5); }
.campanha__nota {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}

/* Lista com marca de verificação: situações e documentos */
.checklist li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 40px;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--t-lead);
  line-height: 1.45;
}
.checklist li:first-child { border-top: 1px solid var(--c-rule); }
.checklist li::before {
  content: '';
  position: absolute;
  top: calc(var(--s-2) + 0.45em);
  left: 4px;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--c-action);
  border-bottom: 2px solid var(--c-action);
  transform: rotate(-45deg);
}
.checklist--doc li { font-size: var(--t-body); }
.checklist--doc li::before {
  top: calc(var(--s-2) + 0.5em);
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--c-action);
  transform: none;
}

.campanha-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
  border-top: 1px solid var(--c-rule);
}
.campanha-card {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-rule);
}
.campanha-card__title {
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
}
.campanha-card__text {
  margin-top: var(--s-2);
  max-width: 52ch;
  color: var(--c-text-muted);
}

.campanha-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--grid-gutter);
}
.campanha-step {
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
}
.campanha-step__num {
  display: block;
  font-size: clamp(26px, 3vw, 46px);
  color: var(--c-action);
}
.campanha-step__title {
  margin-top: var(--s-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
}
.campanha-step__text {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}

.campanha-docs { background: var(--c-abyss); }
.campanha-prazo {
  margin-top: var(--s-4);
  max-width: 46ch;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--c-action);
  background: var(--c-surface);
}

/* Perguntas frequentes — <details> nativo: abre sem JS e pelo teclado. */
.faq { border-top: 1px solid var(--c-rule); }
.faq__item { border-bottom: 1px solid var(--c-rule); }
.faq__q {
  position: relative;
  display: block;
  padding: var(--s-3) 48px var(--s-3) 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
/* o "+" que vira "−" */
.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 16px;
  height: 2px;
  background: var(--c-action);
  transition: transform 0.35s var(--e-suave);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); }
.faq__a {
  max-width: 62ch;
  padding-bottom: var(--s-4);
  color: var(--c-text-muted);
}

/* Chamada da campanha — na home e na página da área. Texto à esquerda e a
   chamada à direita: numa coluna só, metade do cartão ficava vazia. */
.campanha-callout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-4);
  border: 1px solid var(--c-rule);
  border-left: 2px solid var(--c-action);
  color: var(--c-text);
  text-decoration: none;
  transition: background-color 0.4s var(--e-suave), border-color 0.4s var(--e-suave);
}
.campanha-callout:hover,
.campanha-callout:focus-visible {
  background: color-mix(in srgb, var(--c-action) 6%, transparent);
  border-color: color-mix(in srgb, var(--c-action) 45%, transparent);
  border-left-color: var(--c-action);
}
.campanha-callout__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.campanha-callout__title { text-transform: uppercase; letter-spacing: var(--tr-h3); }
.campanha-callout__text { max-width: 60ch; color: var(--c-text-muted); }
@media (max-width: 767px) {
  .campanha-callout { grid-template-columns: 1fr; padding: var(--s-4) var(--s-3); }
}
.campanha-callout:hover .link-arrow svg,
.campanha-callout:focus-visible .link-arrow svg { transform: translateX(6px); }
.campanha-callout + .campanha-callout { margin-top: var(--s-3); }

/* Chegando por âncora, o header fixo cobria o começo da seção de contato. */
#contato { scroll-margin-top: var(--header-h); }

@media (max-width: 900px) {
  .campanha__side,
  .campanha__main { grid-column: 1 / -1; }
  .campanha__main { margin-top: var(--s-4); }
  .campanha-cards { grid-template-columns: 1fr; }
  .campanha-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .campanha-steps { grid-template-columns: 1fr; }
}