@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --navy: #000000;
  --navy-soft: #000000;
  --graphite: #000000;
  --graphite-soft: #000000;
  --white: #fff;
  --off-white: #f5f4f1;
  --paper: #ecebe7;
  --gray: #8e8d89;
  --gray-dark: #666660;
  --gold: #755830;
  --gold-bright: #b08a4a;
  /* Contorno de foco. Medido contra as superficies do site: #8a6e42 passa o
     piso de 3,0 em todas; `--gold-bright` #b08a4a reprova em off-white (2,88),
     papel (2,65) e filete claro (2,20). O OFFSET permanece como em 5805fb7 —
     4px na home, 3px nas internas — porque offset altera aparencia. */
  --focus: #8a6e42;
  --line-light: #d9d8d4;
  --line-dark: rgba(255, 255, 255, .14);
  --shadow: none;
  --container: 1280px;
  /* A marca nova é proporcionalmente mais alta que a anterior — o símbolo
     passou de 2,3x para 4,58x a altura da maiúscula. Mantida a mesma largura
     de logo (172 px), ele mede 52 px, e a barra de 59 px deixava 3 px de
     folga. 68 px devolvem respiro sem mudar a presença da assinatura. */
  --header-height: 68px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
}

html { scroll-padding-top: calc(var(--header-height) + 14px); }
body { color: var(--graphite); background: var(--off-white); font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.7; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h3 { font-weight: 500; }
::selection { color: var(--white); background: #7e6742; }
/* Esta regra e' a que REALMENTE vale na home: carrega depois do `<style>` do
   `index.html` e sobrescreve a cor. O `index.html` declarava `--gold-bright`,
   que nunca renderizou e reprova o piso de 3,0 em tres superficies claras. */
:focus-visible { outline-color: var(--focus); outline-width: 2px; }
/* Entrada por rolagem. O deslocamento sobe de 11 px para 28 px e a duração de
   .38 s para .72 s: antes o movimento era discreto a ponto de passar
   despercebido. Itens de uma mesma lista entram em sequência, e não em bloco —
   o atraso vem de --reveal-delay, atribuído no script conforme a ordem dentro
   do grupo. A lista se constrói diante do leitor. */
/* CORRECAO TECNICA preservada da versao posterior. `transition` e' UMA
   propriedade: quem vence substitui a lista inteira, nao soma. Este seletor tem
   especificidade 0,2,1 e vencia `.service-card`/`.journey-card`/`.model-card`
   (0,1,0), que declaram a propria transicao de hover — o resultado era mudanca
   de fundo INSTANTANEA nos cartoes. As propriedades de hover entram na lista, e
   o atraso vai DENTRO de cada item: um `transition-delay` unico se aplicaria a
   todas e o hover herdaria o escalonamento da revelacao.
   Nao altera a aparencia pretendida: a animacao de revelacao e' identica. */
body.reveal-ready [data-reveal] {
  transform: translateY(28px);
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
              transform .72s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
              background-color .3s ease,
              border-color .3s ease,
              color .3s ease;
}
body.reveal-ready [data-reveal].is-visible { transform: translateY(0); }

.container { width: min(var(--container), calc(100% - 104px)); }
/* Respiro único da página desde 2026-08-14: era clamp(78px, 7.2vw, 106px),
   ou 207px por seção num monitor de 1440px. Com esse valor não cabiam duas
   seções numa tela de computador. Ver seção 5 do AGENTS.md. */
.section { padding-block: clamp(40px, 3.3vw, 48px); }
.section-compact { padding-block: clamp(34px, 2.8vw, 42px); }
.section-light { color: var(--graphite); background: var(--off-white); }
.section-paper { color: var(--graphite); background: var(--paper); }
.section-white { color: var(--graphite); background: var(--white); }
.section-dark, .section-graphite { color: var(--white); background: var(--graphite); }
.eyebrow { gap: 11px; margin-bottom: 15px; color: var(--gold); font-size: .66rem; font-weight: 600; letter-spacing: .17em; }
.section-dark .eyebrow, .section-graphite .eyebrow, .final-cta .eyebrow { color: var(--gold-bright); }
.eyebrow::before { width: 25px; }
.section-title, .section-title.uppercase { max-width: 760px; font-family: var(--serif); font-size: clamp(2.15rem, 3.8vw, 3.45rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; text-transform: none; }
.section-copy { margin-top: 12px; color: var(--gray-dark); font-size: .9rem; line-height: 1.62; }
.section-dark .section-copy, .section-graphite .section-copy { color: #c5bdb3; }
.section-heading { align-items: end; gap: 72px; margin-bottom: 22px; }
.section-heading.center { max-width: 740px; text-align: left; margin-left: 0; margin-bottom: 24px; }
.section-heading.center .eyebrow { justify-content: flex-start; }
.section-heading.center .section-title, .section-heading.center .section-copy { margin-left: 0; }

.button { min-height: 43px; gap: 11px; padding: 0 17px; border-radius: 0; font-size: .69rem; font-weight: 600; letter-spacing: .08em; box-shadow: none; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: none; }
.button-gold { color: var(--white); background: rgba(0, 0, 0, .94); border-color: rgba(255, 255, 255, .26); box-shadow: none; }
.button-gold:hover { color: var(--white); background: #000000; border-color: var(--gold-bright); box-shadow: none; }
.button-dark { color: var(--white); background: var(--graphite); border-color: var(--graphite); }
.button-dark:hover { background: #000000; }
.button-outline-light { color: var(--white); background: transparent; border-color: rgba(255, 255, 255, .3); }
.button-outline-light:hover { color: var(--white); background: transparent; border-color: var(--gold-bright); }
.button-outline-dark { color: var(--graphite); border-color: rgba(0, 0, 0, .3); }
.button-outline-dark:hover { color: var(--graphite); background: transparent; border-color: var(--gold); }
.button-arrow { color: var(--gold-bright); }

/* Barra superior invertida: fundo branco opaco e tipografia escura, com a
   assinatura escura sobre transparência — o interior do símbolo lê como
   preenchido em branco. Deixa de sobrepor o Hero em degradê. */
.site-header { height: var(--header-height); color: var(--graphite); background: var(--white); border-bottom: 1px solid var(--line-light); }
.site-header.is-scrolled, .site-header.menu-visible { background: var(--white); border-bottom-color: #cfcbc2; }
.header-inner { gap: 25px; }
.brand { width: 172px; flex-basis: 172px; }
.brand img { width: 172px; height: auto; }
.main-nav { gap: clamp(17px, 2vw, 31px); }
.main-nav a { color: #4a463f; font-size: .7rem; font-weight: 500; letter-spacing: .095em; }
.main-nav a:hover { color: var(--graphite); }
.main-nav a::after { background: var(--gold); }
/* CORRECAO TECNICA preservada da versao posterior: area de toque de 44px por
   `::after` invisivel, dentro do proprio `<a>`. O desenho fica identico ao pixel
   — altura visivel, filete e padding inalterados —, so' a regiao clicavel cresce.
   Nao dar fundo nem borda a este pseudo-elemento. */
.header-cta { position: relative; min-height: auto; padding: 8px 0; color: var(--graphite); background: transparent; border: 0; border-bottom: 1px solid rgba(117, 88, 48, .55); font-size: .68rem; }
.header-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.header-cta:hover { color: #755830; background: transparent; border-bottom-color: #755830; }
.menu-button { color: var(--graphite); border-color: rgba(0, 0, 0, .22); }

.hero { min-height: clamp(660px, 88svh, 820px); background: var(--graphite); }
.hero-media img { object-position: center 50%; filter: saturate(.68) contrast(.98); }
/* Véu recalibrado com a troca do master do Hero em 2026-08-16. A fotografia
   anterior tinha a metade esquerda quase toda escura; a nova traz as luzes da
   cidade pela janela, e elas caem exatamente na borda direita da coluna de
   texto — medido em x 0,36–0,49, com o pixel mais claro a L=0,210. Com o véu
   antigo o H1 caía a 3,67:1 e a descrição a 2,67:1, ambos abaixo de AA.
   Alargar o patamar forte até 52% devolve 8,11:1 no H1 e 5,90:1 na descrição,
   acima até do que a foto anterior entregava, sem fechar a direita: em 72% o
   véu está em .16 e some em 100%, então laptop, baía e figura continuam
   visíveis. **Ao trocar a fotografia do Hero, medir de novo — o véu é calibrado
   para uma imagem específica, não para todas.** */
.hero::before { background: linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .86) 29%, rgba(0, 0, 0, .74) 52%, rgba(0, 0, 0, .16) 72%, transparent 100%); }
.hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .24), transparent 26%, transparent 74%, rgba(0, 0, 0, .24)); }
.hero-inner { padding-top: calc(var(--header-height) + 50px); padding-bottom: 58px; }
.hero-copy-block { width: min(610px, 49%); }
.hero-kicker { margin-bottom: 19px; color: #dcd4ca; font-size: .66rem; font-weight: 500; letter-spacing: .18em; }
/* Escala recalibrada em 2026-08-17 para o H1 novo, que tem 76 caracteres em
   caixa alta contra os 44 em caixa sentença do anterior. Na escala antiga
   (6.2vw, 89,28px a 1440) a frase ocupava SETE linhas, 569px de altura, e o
   Hero passava de 792px para 976px. Em 4.72vw dá 68px a 1440, cinco linhas,
   309px — e o Hero volta exatamente aos 792px de antes, porque a partir daí
   quem dita a altura é a fotografia, não o texto. Abaixo de ~983px o mínimo
   de 3.4rem assume e mantém 54,4px até a quebra de 700px. **Ao trocar o texto
   do H1, medir de novo: a escala é calibrada para um comprimento de frase.** */
.hero h1 { color: var(--off-white); font-family: var(--serif); font-size: clamp(3.1rem, 4.3vw, 4.2rem); font-weight: 400; letter-spacing: -.045em; line-height: .91; text-transform: none; }
.hero h1 span { color: inherit; }
/* O fecho da frase nao se parte. Sem isto, a 375 a linha cai como
   "Inteligencia ao seu" / "alcance" e sobra uma palavra sozinha -- medido.
   Reduzir o corpo nao resolvia: a mesma quebra aparecia ate' 34px, e
   `text-wrap: balance` nao teve efeito aqui. A 1440 e a 768 nao muda nada,
   porque a quebra natural ja' caia antes de "ao".
   `display` explicito porque a folha embutida do index poe `block` em
   `.hero h1 span`, e depender disso por acidente seria fragil. */
.hero h1 .hero-title-tail { display: inline; white-space: nowrap; }
.hero-rule { width: 42px; height: 1px; margin: 25px 0 21px; }
.hero-description { max-width: 470px; color: #d9d1c7; font-size: .92rem; line-height: 1.72; }
.hero-actions { margin-top: 27px; }
.hero-actions .button { min-height: 44px; color: var(--white); background: rgba(0, 0, 0, .72); border-color: rgba(255, 255, 255, .28); }
.hero-actions .button:hover { border-color: var(--gold-bright); }
.hero-actions .button-outline-light { background: rgba(0, 0, 0, .34); border-color: rgba(255, 255, 255, .2); }
.hero-actions .button-outline-light:hover { background: rgba(0, 0, 0, .52); border-color: var(--gold-bright); }
.hero-pillars, .scroll-cue { display: none; }
/* `.hero-note` estava nesta lista de supressão porque, até 2026-08-21, nenhum
   elemento usava essa classe — era CSS morto, como `.hero-pillars` e
   `.scroll-cue` continuam sendo. Desde a sinalização de públicos do checkpoint
   editorial (Comando 2), o Hero passou a ter um `<p class="hero-note">` com
   conteúdo real, e a supressão em bloco escondia esse texto sem que nada no
   HTML indicasse o motivo. `.hero-pillars` e `.scroll-cue` continuam sem uso
   e permanecem ocultos. */
.hero-note { display: block; margin: 17px 0 0; color: #d9d1c7; font-size: .78rem; line-height: 1.6; max-width: 470px; }

/* Jornadas por perfil: segunda via de navegação, ao lado dos quatro pilares de
   atuação. Fica sobre papel, superfície que não toca nem o branco de #solucoes
   acima nem o off-white de #sobre abaixo.
   O título dos cartões é sans em caixa alta, e não serifa: os quatro pilares são o
   ponto de atenção primária da página e um título serifado aqui competiria com
   elas. O peso destes cartões vem do tamanho, da moldura e do respiro. */
.journeys .section-heading.center { max-width: 780px; margin-bottom: 42px; }
/* Cinco perfis, cinco células idênticas. Qualquer arranjo 3+2 ou 2+2+1 deixaria
   um cartão sozinho numa linha e o faria ler como destaque ou como sobra — os
   cinco segmentos têm o mesmo peso comercial e precisam ter o mesmo peso
   visual. Por isso não há regra que faça um cartão ocupar largura diferente dos
   demais em nenhuma faixa de viewport. */
.journey-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 30px); }
.journey-card { position: relative; display: flex; flex-direction: column; min-height: 196px; padding: clamp(22px, 1.9vw, 26px); color: var(--graphite); background: var(--white); border: 1px solid var(--line-light); text-decoration: none; transition: border-color .28s ease, transform .28s ease, background .28s ease; }
/* Filete bronze no topo, como nas áreas de atuação: é o fio condutor visual da
   página. Curto em repouso, percorre a largura ao interagir. */
.journey-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 46px; height: 2px; background: var(--gold-bright); transition: width .34s ease; }
.journey-card:hover, .journey-card:focus-visible { transform: translateY(-3px); border-color: #c9c2b4; background: #fffefb; }
.journey-card:hover::before, .journey-card:focus-visible::before { width: calc(100% + 2px); }
.journey-card h3 { margin: 0 0 14px; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.journey-card p { margin: 0 0 16px; color: #6b6961; font-size: .82rem; line-height: 1.55; }
/* Exemplos concretos, trazidos das páginas de perfil: é o único lugar da home
   onde o visitante lê uma situação real em vez de uma categoria. Em linha
   corrida de propósito — a página já tem listas numeradas suficientes. */
.journey-card .journey-examples { margin: -8px 0 16px; padding-top: 11px; color: #8a8378; font-size: .71rem; line-height: 1.6; border-top: 1px solid var(--line-light); }
.journey-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.journey-arrow { font-family: var(--serif); font-size: 1.05rem; line-height: 1; transition: transform .28s ease; }
.journey-card:hover .journey-arrow, .journey-card:focus-visible .journey-arrow { transform: translateX(5px); }

/* Encerra a página como mapa do site, entre o contato e o rodapé. Fundo branco
   para não encostar no off-white do contato; o filete passa a ser superior. */
.navigation-hub { padding-block: clamp(58px, 6vw, 82px); color: var(--graphite); background: var(--white); border-top: 1px solid var(--line-light); border-bottom: 0; }
.navigation-layout { display: grid; grid-template-columns: .56fr 1.44fr; gap: clamp(60px, 8vw, 120px); align-items: start; }
.navigation-title { max-width: 370px; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.navigation-intro { max-width: 390px; margin: 17px 0 0; color: var(--gray-dark); font-size: .83rem; }
.navigation-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(38px, 5vw, 74px); }
.navigation-column { display: grid; align-content: start; border-top: 1px solid var(--line-light); }
.navigation-link { min-height: 46px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 11px; align-items: center; color: #443930; border-bottom: 1px solid var(--line-light); text-decoration: none; font-size: .76rem; transition: color .2s ease, border-color .2s ease; }
.navigation-link:hover { color: #765f3c; border-bottom-color: #b6a17e; }
.navigation-index { color: var(--gold); font-size: .65rem; letter-spacing: .1em; }
.navigation-arrow { color: var(--gold); transition: transform .2s ease; }
.navigation-link:hover .navigation-arrow { transform: translateX(3px); }
.navigation-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; }
.navigation-meta a { color: #666660; text-decoration-color: #a79678; text-underline-offset: 4px; font-size: .68rem; }

.about-grid { grid-template-columns: .85fr 1.15fr; gap: clamp(62px, 9vw, 135px); }
.about-statement { font-family: var(--serif); font-size: clamp(2.25rem, 4.2vw, 3.9rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.06; }
.about-statement strong { color: var(--graphite); font-weight: 400; font-style: italic; }
.about-copy { color: var(--gray-dark); font-size: .92rem; line-height: 1.82; }
.about-values { margin-top: 35px; }
/* Os três valores mantêm o empilhamento original — número acima do título — e
   ganham apenas o sinal de expansão à direita. */
.about-value { padding-block: 18px; }
.about-value > summary { min-height: 0; grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: auto auto; gap: 7px 10px; align-items: start; }
/* O CSS-base traz `.about-value span`, herdado da versão anterior, que agora
   alcançaria os três spans do sumário e acrescentaria margem. */
.about-value summary span { margin-bottom: 0; }
.about-value .disclosure-number { grid-column: 1; grid-row: 1; font-size: .65rem; font-weight: 600; }
.about-value .disclosure-title { grid-column: 1; grid-row: 2; font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.about-value .disclosure-toggle { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .95rem; }
/* A coluna já reserva 24px à direita: repetir o recuo estreitaria demais a linha. */
.about-value .disclosure-content { padding: 14px 0 0; }
.about-value .disclosure-content p { font-size: .74rem; }

/* NÚCLEO COMERCIAL DA HOME — redesenho de 2026-08-16.

   A composição anterior era um índice editorial: quatro pilares em 2x2 à
   esquerda e os três modelos recuados numa coluna de papel à direita, tudo
   governado por uma grade única de três colunas. Ela resolvia o alinhamento,
   mas gastava muita altura para pouco conteúdo e não dava aos serviços a
   presença de núcleo comercial da página.

   Agora são dois blocos empilhados dentro da MESMA seção, e a mudança de
   função é comunicada por tom, não por distância: os seis serviços (quatro
   até a migração de 2026-08-21) em superfície marfim sobre a seção branca —
   "o que fazemos" —, e logo abaixo a
   faixa grafite dos modelos — "como se contrata". Continuam sendo uma coisa só
   porque partilham a seção, o container e a mesma linguagem de filete, hexágono
   e tipografia.

   A faixa dos modelos é um PAINEL INSCRITO no container, com marfim dos dois
   lados e branco abaixo — não sangra até a borda da tela. É deliberado: `#perfis`,
   a seção seguinte, é escura e de largura inteira. Uma faixa sangrada aqui
   encostaria em outra superfície escura e as duas se fundiriam numa mancha só,
   quebrando o ritmo claro/escuro documentado na seção 5 do AGENTS.md. Painel
   inscrito lê como painel; faixa sangrada leria como seção.

   A hierarquia entre os dois continua a documentada: serviços em serifa maior,
   modelos em sans miúda e caixa alta. O grafite dá função aos modelos, não
   precedência. */
.services-section { border-top: 0; }
.services-head { max-width: 820px; padding-bottom: clamp(22px, 2vw, 30px); }
.services-head .section-title { font-size: clamp(1.85rem, 2.7vw, 2.55rem); }
.services-head .section-copy { max-width: 620px; margin-top: 12px; line-height: 1.6; }

/* Seis módulos (quatro até a migração de 2026-08-21), quatro colunas no
   desktop: a quebra natural do quinto e do sexto item para uma segunda linha
   (4+2, alinhada à esquerda, sem centralizar) é decisão aprovada — não é
   comportamento a corrigir. Mesma largura, mesma altura por stretch da
   grade, mesmo peso. Nenhum recebe cor, ordem ou escala própria. */
/* EXCECAO B da restauracao de 2026-08-23: a grade fica em 3+3, nao volta ao
   4+2 de 5805fb7. Decisao do proprietario, mantida por cima da restauracao. */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 20px); }

/* O cartão é marfim sobre a seção branca: o contraste é de um degrau só, o
   suficiente para desenhar o módulo sem aquecer a superfície clara — aquecer
   branco e papel já foi tentado em 2026-08-11 e deixou a página amarelada. */
.service-card {
  position: relative; min-height: 0; display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: clamp(20px, 1.6vw, 26px) clamp(17px, 1.35vw, 22px) clamp(18px, 1.4vw, 22px);
  color: var(--graphite); text-align: left; background: var(--off-white);
  border: 1px solid var(--line-light); border-radius: 0; text-decoration: none; transform: none;
  transition: background .3s ease, border-color .3s ease;
}
/* Fotografia do cartão (2026-08-17). Entra pelo `::after`, que estava desativado
   desde a reforma visual — assim não há marcação nova, coluna nova nem elemento
   extra dentro do `<a>`, que já é o link inteiro.

   O `::after` do CSS-base é o filete dourado da esquerda: `inset: -1px auto -1px
   -1px`, `width: 2px` e, o mais importante, `transform: scaleY(0)`, que
   colapsaria a fotografia a nada. Os três precisam ser anulados aqui, e o
   `transform` também na variante `[aria-current="true"]`, senão a foto some ao
   selecionar o cartão.

   O fade é `mask-image` horizontal, não opacidade uniforme: a fotografia é
   invisível no terço esquerdo, onde ficam título e descrição, e chega inteira na
   borda direita. Máscara em vez de gradiente sobreposto porque não pinta camada
   nenhuma sobre o papel — o off-white do cartão continua sendo o fundo real do
   texto, e não há risco de faixa cinza atravessando a leitura. */
.service-card::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto;
  display: block; z-index: 0; transform: none; pointer-events: none;
  background-color: transparent; background-repeat: no-repeat;
  background-size: cover; background-position: center right;
  opacity: .8;
  -webkit-mask-image: linear-gradient(to right, transparent 46%, rgba(0, 0, 0, .08) 72%, rgba(0, 0, 0, .45) 88%, rgba(0, 0, 0, .85) 95%, #000 100%);
  mask-image: linear-gradient(to right, transparent 46%, rgba(0, 0, 0, .08) 72%, rgba(0, 0, 0, .45) 88%, rgba(0, 0, 0, .85) 95%, #000 100%);
  transition: opacity .3s ease;
}
.service-card[aria-current="true"]::after { transform: none; }
/* Abaixo de 1180px a grade deixa de ter quatro colunas e o cartão fica bem mais
   largo — 464x231 a 1024, 346x271 a 768 e 345x271 a 375, contra 306x303 no
   desktop. O texto passa a ocupar linhas mais longas e avança proporcionalmente
   mais para dentro da zona nítida. A máscara começa mais tarde e a opacidade cede.
   A fotografia não é removida em tela pequena; é recalibrada.

   **O início do fade foi de 56% para 64% quando o clareamento subiu de 0,12 para
   0,22**, e a razão não é estética. Medido linha a linha nos três breakpoints, o
   texto alcança **95,7% da largura** — card 01 a 1024 — e o teto de máscara que
   ainda sustenta AA é **0,364**, imposto pelo card 04 a 375. Com a curva anterior
   a máscara entregava 0,73 em 95,5% e a descrição caía a 4,21.

   **O cartão que reprova muda conforme a largura**, porque muda qual descrição
   quebra mais para a direita: 01 em 1024, 01 e 04 em 768 e 375, 02 só no desktop.
   Por isso a correção aqui é uma só, compartilhada, e não quatro regras
   individuais — tratar por cartão exigiria doze gradientes com o "mais apertado"
   trocando de identidade a cada largura, e qualquer refluxo de texto quebraria
   isso em silêncio. **Ao mexer em qualquer descrição, refazer esta medição.**

   A presença na borda não muda com o deslocamento: em 100% a máscara continua
   cheia, e a presença segue sendo 0,65 x 0,22 = 14,3%. O que muda é onde o fade
   começa, não o quanto a foto aparece na extremidade. */
@media (max-width: 1180px) {
  .service-card::after {
    opacity: .65;
    -webkit-mask-image: linear-gradient(to right, transparent 64%, rgba(0, 0, 0, .08) 85%, rgba(0, 0, 0, .32) 95.5%, rgba(0, 0, 0, .66) 98.2%, #000 100%);
    mask-image: linear-gradient(to right, transparent 64%, rgba(0, 0, 0, .08) 85%, rgba(0, 0, 0, .32) 95.5%, rgba(0, 0, 0, .66) 98.2%, #000 100%);
  }
}
/* Cada pilar recebe a mesma fotografia que o seu painel de detalhe já usa: o
   cartão e o painel do mesmo serviço passam a mostrar a mesma cena. Regras
   legadas preservadas: os quatro ids antigos não têm mais cartão na grade
   desde a migração para os seis direcionamentos, mas as regras continuam
   aqui, inertes, como registro técnico — nada as usa nem as remove. */
#inteligencia-corporativa::after { background-image: url("assets/card-01-empresas.webp"); }
#investigacoes-privadas::after { background-image: url("assets/card-02-particulares.webp"); }
#due-diligence::after { background-image: url("assets/card-03-due-diligence.webp"); }
#apoio-advocacia::after { background-image: url("assets/card-04-advocacia.webp"); }
/* Os seis direcionamentos (migração de 2026-08-21/22). CHECK, DUE e LOCALIZA
   reaproveitam os três masters de card mais coerentes com cada tema, pelo
   mesmo raciocínio de "mesma cena do cartão e do painel" acima.
   CAMPO, INVESTIGA e CONTINUADO usam derivados técnicos NOVOS
   (`card-05-campo`, `card-06-investiga`, `card-07-continuado`) — recorte
   quadrado 640×640 (420×420 no `-mobile`, hoje código morto como os demais)
   e o MESMO branqueamento de 0,22 (`Image.blend` contra branco) já aplicado
   aos outros quatro cartões em `build-service-cards.py`, sem o qual a
   descrição caía abaixo de AA (medido: INVESTIGA 3,38 a 1440px e os três
   abaixo de 3,7 no breakpoint compartilhado ≤1180px — ver medições abaixo).
   Nenhuma alteração de matiz ou composição: mesmo recorte, mesma cena, só a
   luminância igualada à dos demais cartões.
   INVESTIGA reaproveita `visual-04-claims-1200.webp` ("SINDICÂNCIA E
   INTELIGÊNCIA DE SINISTROS" — apuração). CONTINUADO reaproveita
   `visual-07-condominium-1200.webp` ("INTELIGÊNCIA CONDOMINIAL" com
   monitoramento e relatórios periódicos — atuação recorrente). Os dois
   ficaram órfãos da reorganização de 2026-08-16; os arquivos originais
   (sem o branqueamento) permanecem intactos em `assets/`, não foram
   sobrescritos.
   CAMPO usa o master já aprovado
   `docs/generated-images/2EC94B38-E81A-4F8D-BBAF-1BCC99F5A550 (1).png`
   ("RELATÓRIO DE DILIGÊNCIAS" + checklist "DILIGÊNCIAS REALIZADAS", sem
   lupa, mural ou teleobjetiva).
   **As seis imagens foram aprovadas visualmente em 21-08-2026**, no card
   real, incluindo os três derivados novos. Não trocar, recortar de novo nem
   reclarear sem nova aprovação expressa. */
#check::after { background-image: url("assets/card-01-empresas.webp"); }
#due::after { background-image: url("assets/card-03-due-diligence.webp"); }
#localiza::after { background-image: url("assets/card-02-particulares.webp"); }
#campo::after { background-image: url("assets/card-05-campo.webp"); }
#investiga::after { background-image: url("assets/card-06-investiga.webp"); }
#continuado::after { background-image: url("assets/card-07-continuado.webp"); }
/* O cartão 02 é o único cujo texto avança até **92,2% da largura** a 1440; os
   outros três param entre 82% e 85%. Com a máscara comum, a última linha da
   descrição dele cai sobre a parte já nítida do fade e mede 4,05 — reprova em AA
   enquanto os outros três ficam em 4,52–4,53. O perfil deste cartão é deslocado
   para a direita o mínimo necessário: mesma curva, mesmos cinco degraus, começando
   em 52% em vez de 46% e segurando o alfa em 0,30 até 92%. Medido, o teto para
   AA aqui é alfa 0,251, e a máscara passa a entregar 0,234.

   **A regra precisa de `min-width: 1181px`.** Seletor de id vence seletor de
   classe por especificidade, independentemente da ordem: sem a media query esta
   máscara também substituiria a do tier estreito, que está em
   `@media (max-width: 1180px) .service-card::after`. É a mesma armadilha já
   registrada para `.footer-main` e `.disclosure summary`, agravada pelo id.

   Clareamento, opacidade, imagem, recorte e dimensões seguem idênticos aos
   demais cartões. */
@media (min-width: 1181px) {
  #investigacoes-privadas::after {
    -webkit-mask-image: linear-gradient(to right, transparent 52%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .3) 92%, rgba(0, 0, 0, .62) 96%, rgba(0, 0, 0, .86) 98.5%, #000 100%);
    mask-image: linear-gradient(to right, transparent 52%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .3) 92%, rgba(0, 0, 0, .62) 96%, rgba(0, 0, 0, .86) 98.5%, #000 100%);
  }
}
/* Texto acima da fotografia. Sem sombra, sem contorno: a legibilidade vem do
   fade da própria imagem, não de efeito no tipo. */
.service-card > * { position: relative; z-index: 1; }
/* Filete bronze no topo que preenche a largura no hover: é a assinatura do
   sistema, repetida nas jornadas e nas etapas do método. Fica acima da
   fotografia — é a assinatura, não pode ficar por baixo dela. */
.service-card::before { content: ""; position: absolute; top: -1px; left: -1px; z-index: 2; width: 46px; height: 2px; background: var(--gold-bright); transition: width .34s ease; }
.service-card:hover::before, .service-card:focus-visible::before, .service-card[aria-current="true"]::before { width: calc(100% + 2px); }
.service-card:hover, .service-card:focus-visible, .service-card[aria-current="true"] { color: var(--graphite); background: var(--white); border-color: #cdc4b2; transform: none; }

/* A numeração é emoldurada pelo hexágono da própria marca, com a mordida
   lateral. `service-badge.png` sai de scripts/build-brand.py, e a cor vem daqui
   por máscara — um arquivo serve a todos os estados e a todas as escalas. */
.service-number { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 clamp(11px, 1vw, 14px); padding: 0; color: var(--gold); font-family: var(--serif); font-size: .98rem; font-weight: 400; letter-spacing: 0; line-height: 1; }
.service-number::before { content: ""; position: absolute; inset: 0; background: var(--gold-bright); opacity: .62; -webkit-mask: url("assets/service-badge.png") center / contain no-repeat; mask: url("assets/service-badge.png") center / contain no-repeat; transition: opacity .28s ease, transform .28s ease; }
.service-card:hover .service-number::before, .service-card:focus-visible .service-number::before, .service-card[aria-current="true"] .service-number::before { opacity: 1; transform: scale(1.06); }
.service-card:hover .service-number, .service-card[aria-current="true"] .service-number { color: #8a6a38; }
/* O título do cartão é o segundo maior corpo da seção e precisa vencer a
   descrição com folga. Subiu de clamp(1.02rem, 1.12vw, 1.2rem) para o valor
   abaixo em 2026-08-17: a 1440 e a 768 vai de 16,32px para 17,6px, e a razão
   contra a descrição (12,08px) sobe de 1,35 para 1,46. Custo medido: os quatro
   cartões continuam idênticos entre si e ganham 3px de altura; as quebras
   permanecem 2/2/2/1. O `1.12vw` só ultrapassava o mínimo acima de ~1457px de
   viewport, então na prática o tamanho era constante — o mesmo vale agora. */
.service-card h3 { margin: 0 0 9px; font-family: var(--serif); font-size: clamp(1.1rem, 1.2vw, 1.3rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.2; text-transform: none; }
.service-card p { max-width: none; margin: 0 0 clamp(14px, 1.3vw, 19px); color: #6b6961; font-size: .755rem; line-height: 1.55; }
.service-card:hover h3, .service-card[aria-current="true"] h3 { color: #755f3d; }

/* CTA desenhado, no lugar do sinal +/- que era a única affordance. Contorno
   fino bronze sobre fundo transparente: a exploração fica evidente sem que o
   módulo vire botão de aplicativo. `margin-top: auto` cola o CTA na base, de
   modo que os quatro alinham entre si mesmo com títulos de alturas diferentes. */
/* EXCECAO C da restauracao de 2026-08-23: o verbo dos seis cards fica em linha
   propria, entre o titulo e a descricao, com filetes laterais. Em 5805fb7 ele
   vinha embutido no paragrafo ("Verificar. Verificacoes pontuais..."). Decisao
   do proprietario, mantida por cima da restauracao.
   O seletor e' `.service-card .service-verb` (0,2,0) de proposito: `.service-verb`
   sozinho (0,1,0) perderia para `.service-card p` (0,1,1) e o verbo renderizaria
   cinza em vez de bronze. Ja aconteceu neste projeto. */
.service-card .service-verb {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 12px; color: var(--gold);
  font-size: .625rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; line-height: 1;
}
.service-card .service-verb::before, .service-card .service-verb::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(117, 88, 48, .28); }

.service-cta, .model-cta {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 9px; margin-top: auto;
  min-height: 36px; padding: 0 14px; font-family: var(--sans); font-size: .605rem; font-weight: 600;
  letter-spacing: .15em; line-height: 1; text-transform: uppercase; white-space: nowrap;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.cta-arrow { font-family: var(--serif); font-size: .95rem; line-height: 0; transition: transform .28s ease; }
.service-cta { color: var(--gold); border: 1px solid rgba(117, 88, 48, .38); }
.service-card:hover .service-cta, .service-card:focus-visible .service-cta { color: #6b4f26; background: rgba(117, 88, 48, .07); border-color: var(--gold); }
.service-card:hover .cta-arrow, .model-card:hover .cta-arrow { transform: translateX(4px); }
/* Aberto: a seta gira para baixo e o preenchimento sobe um grau. O sinal
   principal do estado continua sendo o filete cheio no topo do cartão. */
.service-card[aria-expanded="true"] .service-cta { color: #6b4f26; background: rgba(117, 88, 48, .13); border-color: var(--gold); }
.service-card[aria-expanded="true"] .cta-arrow, .model-card[aria-expanded="true"] .cta-arrow { transform: rotate(90deg); }

/* Faixa dos modelos: grafite profundo, inscrita no container.

   **A faixa é mais escura que os cartões desde 2026-08-22**, e a inversão é o
   ponto de partida da referência aprovada: o fundo recua, os cartões avançam.
   Medido na própria referência, a faixa está em rgb(23,22,20) e o cartão em
   rgb(43,39,38) — daí o valor abaixo, um degrau apenas mais quente que a
   medição para não sair da família tabaco (R−B = +5, dentro da regra de
   temperatura do AGENTS.md).

   Não usa `--graphite`: a variável serve o Hero, o rodapé e `#perfis`, e
   escurecê-la mexeria em meia página. Aqui o valor é local, por isso literal. */
.models-band { margin-top: clamp(26px, 2.4vw, 34px); padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.4vw, 40px) clamp(28px, 2.6vw, 36px); color: var(--off-white); background: #000000; }
.models-band .eyebrow { color: var(--gold-bright); }
.models-head { max-width: 780px; padding: 0 0 clamp(16px, 1.5vw, 22px); }
.models-head .section-title { max-width: none; color: var(--off-white); font-size: clamp(1.45rem, 1.95vw, 1.95rem); }
.models-head .section-copy { max-width: 660px; margin-top: 11px; color: #c5bdb3; font-size: .82rem; line-height: 1.58; }
.models-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 20px); }

/* O CSS-base traz um .model-card da versão anterior do site, com 300 px de
   altura e padding próprio; estas declarações precisam anulá-lo explicitamente.

   **O cartão é um degrau ABAIXO da faixa, não acima (2026-08-22).** Até aqui
   era luz branca a 3,8%, e o cartão lia como bloco saliente; agora é preto a
   38% sobre o mesmo grafite, e ele lê como encaixe rebaixado. É o registro
   certo para modelos de contratação, que devem ser mais quietos que os seis
   serviços em vez de competir com eles, e dá mais força ao bronze da borda e
   do filete, que rende mais sobre campo escuro.

   **Preto e não uma cor nova, e isso é a diferença que importa.** Preto
   multiplica o tabaco e preserva o matiz exato da paleta; branco lava. A
   superfície anterior, clareada, era a menos quente das quatro testadas.
   Preto absoluto foi medido e descartado: o AGENTS.md proíbe "preto absoluto
   em excesso" e o ganho sobre 38% é marginal.

   **O ganho principal é de acessibilidade, não de gosto.** O numeral bronze
   media 4,35 sobre a superfície antiga e reprovava em AA — a única falha da
   seção, e anterior a esta intervenção. Sobre preto a 38% ele mede 5,63 e
   passa, sem tocar em nenhuma cor de tinta. Junto: descrição de 6,85 para
   8,86, título e CTA de 12,63 para 16,34.

   **Devolver o CTA ao bronze foi testado e reprova.** O projeto abriu mão do
   bronze no CTA a contragosto, por contraste, e o escurecimento parecia a
   chance de retomá-lo. Medido: 2,11 na superfície antiga, 2,73 em preto 38% e
   3,19 até em preto absoluto. O CTA marfim fica. */
.model-card {
  position: relative; min-height: 0; display: flex; flex-direction: column; align-items: stretch;
  padding: clamp(19px, 1.5vw, 24px) clamp(17px, 1.35vw, 22px) clamp(17px, 1.3vw, 21px);
  color: var(--off-white); background: #000000;
  border: 1px solid rgba(176, 138, 74, .46); border-radius: 0; text-decoration: none;
  transition: background .3s ease, border-color .3s ease;
}
/* Fotografia dos três modelos (2026-08-22, revisão sobre referência visual
   aprovada). A fotografia cobre o cartão INTEIRO, de borda a borda, sob um véu
   preto uniforme — não há mais máscara horizontal, degradê lateral nem
   fotografia concentrada em metade do cartão.

   **O véu é uma camada de fundo, não opacidade no cartão.** Ele entra como
   primeira camada de `background-image` do próprio `::after`, acima da
   fotografia e dentro do mesmo pseudo-elemento. Baixar a opacidade do cartão
   apagaria junto texto, borda e botão; assim só a fotografia recua, e o
   conteúdo continua em `z-index: 1`, intocado.

   **A monocromia vem de `background-blend-mode: luminosity`, não de
   `filter: grayscale`.** A diferença é de piso, e custou uma rodada descobrir.
   `filter` incide sobre o pseudo inteiro, véu incluído: com véu preto puro a
   80%, os três masters — todos escuros — caíam para luminância média entre
   0,006 e 0,013, ou seja, MAIS ESCUROS que a própria faixa (0,0085). O cartão
   sumia dentro do fundo, o oposto do que a referência mostra, onde o cartão
   (0,0296) está claramente acima da faixa (0,0081).

   Com `luminosity`, a fotografia empresta só a luminância e recebe o matiz do
   `background-color` — monocromia de verdade, na temperatura tabaco, sem
   passar por sépia nem bege. E o véu deixa de ser preto: é grafite, então o
   cartão tem PISO. Onde a fotografia é preta, o cartão ainda é grafite; a
   fotografia soma textura por cima em vez de subtrair superfície.

   **A presença tem um knob só, `--wm-veu`, e isso é deliberado.** Nos seis
   cartões claros ela é produto de três fatores e o AGENTS.md registra que
   confundir isso custou uma rodada inteira. Aqui presença = 1 − véu, a fração
   da fotografia que sobrevive, e nada mais. */
.model-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--wm-veu-cor), var(--wm-veu-cor)), var(--wm-foto);
  background-color: #000000;
  background-blend-mode: normal, luminosity;
  background-repeat: no-repeat; background-size: cover; background-position: var(--wm-pos, 50% 50%);
  transition: filter .3s ease;
}
@media (prefers-reduced-motion: reduce) { .model-card::after { transition: none; } }
/* Três masters já aprovados do banco. Nenhum arquivo novo, nenhum recorte
   novo: o preto-e-branco é do navegador, por `grayscale(1)`, e é reversível
   apagando estas regras.

   01 Demandas específicas — `visual-02-field`: diagrama de vínculos sobre
   mapa, dossiê e fotografias de rua. O material de UM caso delimitado.
   02 Atuação continuada — `visual-03-analysis` no enquadramento BAIXO (88%):
   duas pessoas analisando documentos juntas, mãos e mesa no quadro, rostos
   fora dele. É a "colaboração profissional recorrente, sem rostos em
   destaque" pedida na referência — e o enquadramento é o que cumpre a
   segunda metade da frase. Com a fotografia cobrindo o cartão inteiro, este
   master voltou a ser viável: a objeção anterior valia para a máscara
   lateral, que só mostrava o lado direito e ali só havia manga escura.
   03 Projetos especiais — `visual-15-entregas`: caderno aberto, caneta,
   documentos e mapas sobre a mesa. Planejamento estruturado e anotações.

   **`visual-12-perfis` foi RETIRADO do cartão 03 nesta revisão.** A captura
   real da sequência mostrou o que a composição isolada não mostrava: a caneca
   preta com o hexágono da marca, o porta-lápis e o tablet com o mapa-múndi
   aparecem no cartão e reaparecem, grandes e nítidos, no fundo da seção
   `#perfis` logo abaixo. Mesmo frame, duas vezes, dentro de uma rolagem. E
   com a fotografia agora cobrindo o cartão inteiro, a lupa que aquele master
   traz em 27% da largura — clichê que o AGENTS.md proíbe — deixaria de estar
   escondida pela máscara. Duas razões independentes; não repor.

   **Presença e nível são knobs separados, e separá-los é o que faz a conta
   fechar.** O alfa do véu é 0,80 nos TRÊS cartões — presença de exatamente
   20%, uniforme, no meio da faixa de 18% a 22% pedida. O que varia é a COR do
   véu, porque os masters têm luminância muito diferente e, com uma cor só, os
   cartões pousariam entre 3,5× e 5,5× a faixa em vez de no mesmo tom. A cor
   por cartão sai de bissecção sobre a luminância média resultante, com alvo
   0,0320 — o valor medido na referência é 0,0296 — e não de escolha a olho.
   Medido depois: os três em 0,0320, todos a 3,9× a faixa. */
#demandas-especificas { --wm-foto: url("assets/visual-02-field-1200.webp"); --wm-pos: 50% 45%; --wm-veu-cor: rgba(0, 0, 0, .8); }
#atuacao-continuada { --wm-foto: url("assets/visual-03-analysis-1200.webp"); --wm-pos: 50% 88%; --wm-veu-cor: rgba(0, 0, 0, .8); }
#projetos-especiais { --wm-foto: url("assets/visual-15-entregas-1600.webp"); --wm-pos: 50% 50%; --wm-veu-cor: rgba(0, 0, 0, .8); }
/* Texto acima da fotografia, sem sombra e sem contorno: a legibilidade vem do
   fade da própria imagem, como nos cartões de serviço. */
.model-card > * { position: relative; z-index: 1; }
/* O filete bronze precisa de `z-index: 2` para continuar por cima da
   fotografia. Sem ele o `::after` venceria por ordem de documento — os dois
   pseudos são irmãos e `::after` pinta depois. É a assinatura do sistema; não
   pode ficar por baixo. Mesma providência já tomada em `.service-card::before`. */
.model-card::before { content: ""; position: absolute; top: -1px; left: -1px; z-index: 2; width: 34px; height: 2px; background: var(--gold-bright); transition: width .34s ease; }
.model-card:hover::before, .model-card:focus-visible::before, .model-card[aria-current="true"]::before { width: calc(100% + 2px); }
/* Estado ativo. A fotografia cobre o cartão inteiro, então a cor de fundo
   deixou de ser visível e não serve mais de sinal: quem responde é a borda
   dourada e o véu, que cede 4 pontos e deixa a fotografia subir um degrau.
   Sem deslocamento de layout, como pede a referência. */
.model-card:hover, .model-card:focus-visible, .model-card[aria-current="true"] { color: var(--off-white); border-color: var(--gold-bright); }
.model-card:hover::after, .model-card:focus-visible::after, .model-card[aria-current="true"]::after { filter: brightness(1.16); }
/* Mesmo hexágono dos serviços, menor e mais apagado: repetição constrói o
   sistema visual da marca, e a diferença de escala preserva a precedência. */
/* A numeração subiu de `--gold-bright` (#b08a4a) para champanhe, e é medição,
   não gosto. Com a fotografia cobrindo o cartão inteiro, o pior pixel sob o
   numeral vai a rgb(69,67,64) e o bronze cai a 3,09 — reprova. Champanhe é o
   mesmo dourado claro que a referência usa no botão, amostrado nela em
   rgb(209,196,177); continua lendo como dourado e passa em AA. O bronze
   permanece no contorno do hexágono, no filete e na borda do cartão. */
.model-card .model-number { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 0 13px; padding: 0; color: #dccdae; font-family: var(--serif); font-size: .8rem; font-weight: 400; letter-spacing: 0; line-height: 1; }
/* O contorno subiu de .45 para .68 (2026-08-22): sobre fotografia o hexágono
   precisa de mais definição que sobre cor chapada, e a referência mostra o
   contorno nítido. A escala continua 34px contra os 44px dos serviços, que é
   o que preserva a precedência entre as duas famílias. */
.model-card .model-number::before { content: ""; position: absolute; inset: 0; background: var(--gold-bright); opacity: .68; -webkit-mask: url("assets/service-badge.png") center / contain no-repeat; mask: url("assets/service-badge.png") center / contain no-repeat; transition: opacity .28s ease; }
.model-card:hover .model-number::before, .model-card:focus-visible .model-number::before, .model-card[aria-current="true"] .model-number::before { opacity: 1; }
.model-card h3 { margin: 0 0 8px; font-family: var(--sans); font-size: .795rem; font-weight: 600; letter-spacing: .045em; line-height: 1.35; text-transform: uppercase; }
/* Cinza-claro quente, um degrau acima do anterior (#bdb5aa): sobre fotografia
   de cobertura total o pior pixel sob a descrição chega a rgb(81,77,74) e o
   tom antigo cai a 4,12. Continua sendo cinza quente, não branco — a
   hierarquia contra o título em marfim é preservada. */
.model-card p { margin: 0 0 clamp(13px, 1.2vw, 17px); color: #d2cbc0; font-size: .745rem; line-height: 1.58; }
/* Botão conforme a referência (2026-08-22): interior escuro um degrau abaixo
   do cartão, contorno dourado fino, texto dourado em caixa alta, seta à
   direita, cantos retos. Sem preenchimento dourado sólido, sem brilho.

   **A tinta é champanhe, não o bronze `--gold-bright`, e a diferença é
   medida.** O AGENTS.md registra que o CTA dos modelos teve de virar marfim
   porque o bronze reprovava em AA; medido de novo nesta rodada, `#b08a4a` dá
   2,11 sobre a superfície antiga, 2,73 sobre preto a 38% e 3,19 até sobre
   preto absoluto — reprova em qualquer cenário. A saída não era desistir do
   dourado, era subir a luminância dele: amostrada na própria referência, a
   tinta do botão é rgb(209,196,177) — um champanhe claro, não um bronze
   saturado —, e ali ela mede 9,80. É por isso que a referência pode ter texto
   dourado sem falhar: o dourado dela é claro. O valor abaixo fica nessa
   família e mantém a identidade no contorno, no filete e no hexágono. */
.model-cta { color: #dccfb8; background: rgba(0, 0, 0, .34); border: 1px solid rgba(176, 138, 74, .58); min-height: 42px; padding: 0 17px; }
.model-card:hover .model-cta, .model-card:focus-visible .model-cta { color: #f0e6d2; background: rgba(176, 138, 74, .18); border-color: var(--gold-bright); }
.model-card[aria-expanded="true"] .model-cta { color: #f0e6d2; background: rgba(176, 138, 74, .24); border-color: var(--gold-bright); }

.service-detail { position: relative; margin-top: 28px; padding: 0; overflow: hidden; color: var(--graphite); background: var(--paper); border-block: 1px solid var(--line-light); }
.service-detail[hidden] { display: none !important; }
.service-detail::before { display: none; }
.detail-header { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 25px; align-items: start; padding: 27px 30px; }
.detail-index { margin: 7px 0 0; color: var(--gold); font-size: .66rem; font-weight: 500; }
.detail-heading .eyebrow { margin-bottom: 8px; }
.detail-title { max-width: 760px; margin: 0; font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.detail-copy { max-width: 760px; margin: 10px 0 0; color: var(--gray-dark); font-size: .8rem; line-height: 1.65; }
.detail-close { min-width: 42px; min-height: 42px; padding: 0; color: #64635f; background: transparent; border: 1px solid #cdc5bb; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.detail-close:hover { color: var(--graphite); border-color: var(--gold); }
.detail-body { display: block; border-top: 1px solid var(--line-light); }
.detail-body.has-media { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr); }
/* A fotografia tem proporção própria e fixa (4:5) e fica ancorada no topo.
   Até 2026-08-14 ela esticava até a altura da coluna de texto, e como cada área
   tem um texto de tamanho diferente, a mesma imagem era recortada de um jeito
   em cada painel — medido entre 0,47:1 e 0,98:1 conforme a largura da tela.
   Com proporção fixa o recorte é previsível e a especificação de geração das
   imagens passa a significar alguma coisa. Ver AGENTS.md, seção de imagens. */
.detail-media { align-self: start; margin: 0; overflow: hidden; background: #dad2c8; }
.detail-media[hidden] { display: none !important; }
.detail-media picture, .detail-media img { display: block; width: 100%; }
.detail-media img { aspect-ratio: 4 / 5; height: auto; min-height: 0; object-fit: cover; }
.detail-content { padding: 28px 30px 31px; }
.detail-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; border: 0; }
.detail-point { min-height: 0; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line-light); }
.detail-point b { margin-bottom: 5px; color: #453a30; font-size: .75rem; font-weight: 600; letter-spacing: .025em; line-height: 1.4; text-transform: none; }
.detail-point span { color: #66645f; font-size: .75rem; line-height: 1.6; }
.detail-note { margin-top: 18px; padding: 14px 17px; color: #66645f; background: rgba(255, 255, 255, .46); border-left: 1px solid var(--gold); font-size: .75rem; }
.detail-actions { gap: 9px; margin-top: 22px; }
.detail-actions .button { min-height: 40px; }

/* ── Componente global de divulgação ──────────────────────────────────────────
   Todo item numerado que represente um conceito, pilar, diferencial ou etapa é
   um `<details>` com esta estrutura. O elemento nativo já entrega acionamento
   por teclado, estado anunciado a leitores de tela e funcionamento por toque,
   sem depender de hover nem de JavaScript.
   A seção "Para quem é a SIGILLUN" era a única com esse comportamento; o padrão
   foi extraído dela e generalizado. Para acrescentar um item interativo novo,
   basta usar esta marcação — não há lógica a duplicar.  */
.disclosure summary { min-height: 56px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 13px; align-items: center; color: inherit; cursor: pointer; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::marker { content: ""; }
.disclosure summary:hover .disclosure-title, .disclosure summary:focus-visible .disclosure-title { color: #755f3d; }
.disclosure-number { color: var(--gold); font-size: .65rem; letter-spacing: .1em; }
.disclosure-title { font-size: .8rem; font-weight: 550; line-height: 1.4; transition: color .2s ease; }
.disclosure-toggle { justify-self: end; color: var(--gold); font-family: var(--serif); font-size: 1.1rem; line-height: 1; transition: transform .22s ease; }
.disclosure-toggle::before { content: "+"; }
.disclosure[open] .disclosure-toggle::before { content: "−"; }
.disclosure-content { padding: 0 32px 14px 45px; }
.disclosure-content p { max-width: 630px; margin: 0; color: var(--gray-dark); font-size: .76rem; line-height: 1.65; }
/* Estado aberto: filete bronze à esquerda, marcando o item ativo sem depender
   apenas de cor nem alterar o espaçamento da lista.

   O numeral NÃO clareia ao abrir, e a omissão é deliberada. Havia aqui um
   `.disclosure[open] > summary .disclosure-number { color: var(--gold-bright) }`
   que levava o numeral de `--gold` (#755830) para `--gold-bright` (#b08a4a) em
   qualquer superfície. Sobre superfície clara isso reprova em AA: 2,90:1 em
   `#sobre` e `#como-atuamos` e 2,68:1 sobre o papel do FAQ, contra 5,98 e 5,51
   com `--gold`. Estava publicado assim desde 2026-08-13 e só apareceu na medição
   do estado aberto — medir o acordeão fechado não alcança o defeito.

   `#por-que` não é afetada: é escura e recebe `--gold-bright` de
   `.why-item .disclosure-number`, mais adiante nesta folha, em qualquer estado.
   Ali o par mede 4,84:1 e passa. **Não reintroduzir a troca de cor global** — se
   um dia o estado aberto precisar de mais ênfase, ela tem de ser por superfície,
   nunca uniforme. */
.disclosure[open] > summary .disclosure-title { color: #755f3d; }

/* FAQ. A seção usa `section-paper` — o único tom da paleta que ainda não estava
   em uso em nenhuma seção. Entre `#relatorios` (off-white) e `#contato`
   (grafite), o papel é o degrau intermediário: distingue-se dos dois vizinhos
   sem criar mais uma banda escura, e sem cor nova nem fotografia.

   O acordeão é o componente `.disclosure` já existente, com adaptador curto —
   apenas o que muda em relação ao padrão: pergunta em duas linhas quando
   precisa, respiro maior por serem textos longos, e divisor no último item para
   fechar a lista. Nada de accordion novo em JavaScript: `<details>`/`<summary>`
   nativo entrega foco, teclado, estado semântico, busca do navegador e
   impressão de graça, e funciona com o script desligado. */
/* `display: grid` explícito: `.container` é bloco, e as demais grades da folha
   declaram o seu. Sem ele, `grid-template-columns` e `gap` continuam sendo
   reportados pelo `getComputedStyle` — a folha aceita a declaração num elemento
   bloco —, então a medição diz que a grade existe enquanto a página empilha em
   coluna única e o `gap` não separa nada. Conferir o `display`, não as colunas. */
.faq-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(38px, 5vw, 84px); align-items: start; }
.faq-list { border-top: 1px solid rgba(117, 88, 48, .3); }
.faq-item { border-top: 0; border-bottom: 1px solid rgba(117, 88, 48, .3); }
/* Especificidade elevada de propósito: há um `.disclosure summary { min-height: 52px }`
   mais adiante nesta folha, da compactação de 2026-08-14, com a mesma
   especificidade e posição posterior. Sem o `.disclosure` no seletor, o adaptador
   do FAQ perdia para ele. */
.disclosure.faq-item > summary { min-height: 62px; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 15px; padding: 6px 0; align-items: start; }
.faq-item .disclosure-number { padding-top: 3px; }
.faq-item .disclosure-title { font-size: .84rem; font-weight: 550; line-height: 1.45; }
.faq-item .disclosure-toggle { align-self: start; padding-top: 1px; }
.faq-item .disclosure-content { padding: 0 0 20px 49px; }
.faq-item .disclosure-content p { max-width: 66ch; font-size: .78rem; line-height: 1.72; }
.faq-item .disclosure-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq-item .disclosure-content a:hover, .faq-item .disclosure-content a:focus-visible { color: #5f4726; }
/* Mesmo desenho do CTA dos serviços, em escala menor: contorno bronze fino, sem
   preenchimento. Não é botão de aplicativo. */
.faq-all { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; margin-top: clamp(20px, 2vw, 28px); padding: 0 16px; color: var(--gold); font-family: var(--sans); font-size: .605rem; font-weight: 600; letter-spacing: .15em; line-height: 1; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(117, 88, 48, .38); transition: color .25s ease, background .25s ease, border-color .25s ease; }
.faq-all:hover, .faq-all:focus-visible { color: #6b4f26; background: rgba(117, 88, 48, .07); border-color: var(--gold); }
.faq-arrow { font-family: var(--serif); font-size: .95rem; line-height: 0; transition: transform .28s ease; }
.faq-all:hover .faq-arrow { transform: translateX(4px); }

.editorial-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(42px, 6vw, 82px); }
.editorial-detail { border-top: 1px solid var(--line-light); }
.editorial-detail:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-light); }

.why-section { color: var(--white); background: var(--graphite); }
.why-layout { grid-template-columns: .7fr 1.3fr; gap: clamp(60px, 9vw, 130px); }
.why-section .section-title { color: var(--white); }
.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin-top: 0; border-top: 0; }
/* Variante sobre fundo escuro do componente de divulgação. */
/* O CSS-base define .why-item como grade de duas colunas, herdada da versão
   anterior; sem este reset o <summary> cai numa coluna de 42 px e o título
   quebra letra a letra. */
.why-item { display: block; padding: 0; border-top: 1px solid var(--line-dark); border-bottom: 0; }
.why-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
.why-item > summary { min-height: 64px; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 14px; color: var(--white); }
.why-item .disclosure-number, .why-item .disclosure-toggle { color: var(--gold-bright); }
.why-item .disclosure-title { font-size: .7rem; font-weight: 550; letter-spacing: .04em; text-transform: uppercase; }
.why-item > summary:hover .disclosure-title, .why-item > summary:focus-visible .disclosure-title, .why-item[open] > summary .disclosure-title { color: #e4d8c4; }
.why-item .disclosure-content { padding: 0 18px 18px 44px; }
.why-item .disclosure-content p { color: #bfb7ad; font-size: .74rem; line-height: 1.6; }
.why-visual { display: none; }

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(42px, 6vw, 82px); margin-top: 38px; border-top: 0; }
.step, .step:first-child { position: relative; min-height: 0; display: block; padding: 0; border: 0; border-top: 1px solid var(--line-light); }
.step:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-light); }
.step::before, .step:first-child::before { display: none; }
.step > summary { min-height: 74px; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 15px; }
/* A numeração do método repete a moldura hexagonal das áreas de atuação, em
   escala menor: cria sistema visual na página em vez de um detalhe isolado na
   seção de serviços. Mesma máscara, mesmo arquivo. */
.step .disclosure-number { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--gold); font-family: var(--serif); font-size: .82rem; font-weight: 400; letter-spacing: 0; }
.step .disclosure-number::before { content: ""; position: absolute; inset: 0; background: var(--gold-bright); opacity: .5; -webkit-mask: url("assets/service-badge.png") center / contain no-repeat; mask: url("assets/service-badge.png") center / contain no-repeat; }
.step .disclosure-title { font-size: .74rem; font-weight: 550; letter-spacing: .04em; line-height: 1.4; text-transform: none; }
.step .disclosure-content { padding: 0 18px 18px 59px; }
.step .disclosure-content p { color: var(--gray-dark); font-size: .72rem; line-height: 1.55; }

.model-number { color: var(--gold); font-size: .65rem; font-weight: 500; letter-spacing: .1em; }

/* Fotografia de fundo em seção CLARA (2026-08-16). É a terceira do site, e a
   primeira que não escurece a seção: `#perfis` e `#contato` são fotos escuras
   sob véu escuro, aqui é foto clara sob véu marfim. A física se inverte — o
   AGENTS.md registra que uma foto clara sob véu grafite criou manchas em
   `#perfis`; o simétrico vale aqui, e por isso o master escolhido é o mais claro
   do acervo aproveitável.

   A seção continua predominantemente clara: a fotografia entra como textura e
   profundidade, não como assunto. Branco e marfim seguem sendo o respiro da
   página, e o miolo deixou de ter 1537 px de superfície clara ininterrupta. */
#entregas { position: relative; overflow: hidden; }
.entregas-media { position: absolute; inset: 0; z-index: 0; }
/* Reposicionamento tonal de 2026-08-16: a seção passa a ser a superfície
   INTERMEDIÁRIA entre as claras e as escuras. A fotografia saiu de 0,28 para
   0,86 de opacidade e o véu abriu junto — a textura da composição real — medida COM o painel, que cobre 45% da seção —
   subiu de 0,068 para 0,206 de desvio (3,1x) e a luminância média caiu de 0,911
   para 0,753. Deixou de ser branco com uma imagem quase imperceptível.

   O limite não é estético, é físico: texto escuro sobre fundo claro perde
   contraste conforme o fundo escurece. Com o bronze `--gold` em 0,110 de
   luminância, o fundo sob ele não pode cair abaixo de ~0,67 sem reprovar em AA.
   Um cinza-médio de verdade (luminância ~0,35) só seria possível invertendo a
   seção para texto claro — ou seja, virando seção escura, que é justamente o
   que não se quer.

   O véu ganhou uma parada extra em 24%: o eyebrow bronze fica no canto superior
   esquerdo e precisa de véu forte ali, enquanto o miolo e a direita abrem para
   a fotografia. É o que permite 0,76 de opacidade sem derrubar o eyebrow. */
.entregas-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: .86; filter: saturate(.62); }
/* Véu marfim ancorado à esquerda, onde ficam eyebrow e coluna de texto, e aberto
   do meio para a direita, onde a fotografia passa por trás do painel da fórmula
   — que carrega superfície própria. */
#entregas::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .86) 24%, rgba(255, 255, 255, .54) 50%, rgba(255, 255, 255, .12) 76%, rgba(255, 255, 255, .26) 100%); }
#entregas > .container { position: relative; z-index: 1; }

.deliverables-layout { grid-template-columns: .9fr 1.1fr; }
/* Mesmo tom da lista logo abaixo. Com a fotografia em 0,76 o cinza padrão
   `--gray-dark` cairia a 3,4:1 neste parágrafo; não é cor nova, é o cinza que a
   própria seção já usa dois blocos adiante. */
#entregas .section-copy { color: #3f3e39; }
.deliverables-list { margin-top: 30px; }
/* Sobre textura o cinza padrão não sobrevive — mesma lição de `#perfis`, onde
   `--gray-dark` caiu a 3,9:1. Aqui a lista escurece um grau. */
.deliverables-list li { padding: 11px 0; color: #3f3e39; font-size: .76rem; }
/* O painel deixa de ser papel opaco e passa a papel translúcido: a fotografia
   aparece por trás, dando profundidade, sem que o texto dependa dela. Não usa
   `backdrop-filter` — desfoque de vidro é a estética que a direção de arte
   proíbe; é opacidade simples, medida. */
/* O painel é papel translúcido, e com a fotografia em 0,76 o que passa por trás
   dele ficou 5x mais perceptível do que era em 0,28 — desvio de 0,0065 para
   0,034 medido só dentro do painel. A opacidade subiu de .88 para .90, e não
   desceu, porque o rótulo bronze do painel é o texto mais justo da seção: em
   .88 mede 4,69:1 e em .90 vai a 4,82:1, que é o piso de bronze já documentado.
   A translucidez percebida vem da força da fotografia, não do alfa do painel. */
.formula-panel { min-height: 370px; color: var(--graphite); background: rgba(236, 235, 231, .9); border: 1px solid rgba(196, 189, 175, .8); }
.formula-panel::after { border-color: rgba(146, 117, 72, .15); box-shadow: 0 0 0 42px rgba(146, 117, 72, .025), 0 0 0 84px rgba(146, 117, 72, .018); }
.formula-label { color: var(--gold); }
.formula { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 3.3rem); font-weight: 400; letter-spacing: -.035em; text-transform: none; }
.formula strong { color: #78613e; font-weight: 500; }
/* Um grau mais escuro que `--gray-dark`: sobre o painel translúcido, com a
   fotografia por trás, o cinza padrão media 4,79:1 — passa em AA, mas sem folga.
   Mesma correção aplicada à lista de entregáveis. */
.formula-result { color: #55534d; }

/* Consolidação de 2026-08-17: as três etapas de "O que entregamos" vivem na
   coluna esquerda de `.deliverables-layout`, não numa faixa própria, então a
   grade de duas colunas de `.steps` viraria duas colunas de ~230px. Em coluna
   única a regra de borda inferior também muda: `nth-last-child(-n+2)` fechava
   o par final de uma grade 2×N e aqui fecharia o penúltimo item no vazio. */
.deliverables-layout .steps { grid-template-columns: 1fr; margin-top: 26px; }
.deliverables-layout .step:nth-last-child(-n+2) { border-bottom: 0; }
.deliverables-layout .step:last-child { border-bottom: 1px solid var(--line-light); }
/* `#relatorios` ficou com um painel só depois que "Relatórios e pareceres" foi
   absorvido pela etapa 03. Sem isso o texto ocuparia metade do container e a
   outra metade ficaria vazia; sem a coluna, atravessaria 1280px de medida. */
.reports-grid.single { grid-template-columns: minmax(0, 780px); }
.reports-grid { gap: clamp(45px, 7vw, 95px); }
.report-panel, .report-panel.dark { min-height: 0; padding: 0; color: var(--graphite); background: transparent; border: 0; border-top: 1px solid var(--line-light); }
.report-panel h2 { margin-top: 28px; font-family: var(--serif); font-size: clamp(1.8rem, 2.8vw, 2.55rem); font-weight: 400; }
.report-panel p, .report-panel.dark p { color: var(--gray-dark); font-size: .8rem; }
.report-flow span { padding: 6px 8px; color: #654e2e; border-color: #c4b696; font-size: .65rem; font-weight: 500; }
.compliance-list { border-top-color: var(--line-light); }
.compliance-list span { color: #686762; border-bottom-color: var(--line-light); font-size: .72rem; }

.indicators-title { margin-bottom: 30px; font-family: var(--serif); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: 0; text-transform: none; }
.indicator { min-width: 0; min-height: 132px; }
.indicator-value { color: var(--gold); font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 400; }
.indicator-label { overflow-wrap: anywhere; color: #55544e; font-size: .65rem; font-weight: 550; }

.final-cta { min-height: 430px; display: grid; align-items: stretch; isolation: isolate; background: var(--graphite); }
.final-cta-media { position: absolute; z-index: -2; inset: 0; }
.final-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.68); }
.final-cta::before { z-index: -1; opacity: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .78) 36%, rgba(0, 0, 0, .2) 63%, transparent); }
.final-cta-layout { display: block; min-height: 430px; padding-block: 62px; }
.final-cta-layout > div { max-width: 610px; }
.final-cta h2 { font-family: var(--serif); font-size: clamp(2.55rem, 4.8vw, 4.65rem); font-weight: 400; letter-spacing: -.035em; line-height: .98; text-transform: none; }
.final-cta p { margin: 18px 0 25px; color: #d5cdc3; font-size: .86rem; }
.final-cta-mark { display: none; }

.contact-layout { grid-template-columns: .85fr 1.15fr; }
.contact-list div { padding-block: 11px; }
.contact-list div span { color: var(--gold); }
/* "Seu perfil" é seção escura sobre fotografia, no mesmo tratamento do contato:
   véu grafite, imagem como textura e não como assunto. Foi clara com véu de
   papel até 2026-08-15. As duas fotografias de fundo do site são calibradas
   para a mesma visibilidade; ao mexer numa, medir a outra. */
#perfis { position: relative; overflow: hidden; }
.perfis-media { position: absolute; inset: 0; z-index: 0; }
.perfis-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; opacity: 1; filter: saturate(.66); }
/* Véu forte à esquerda, onde fica o cabeçalho sobre a fotografia, e aberto à
   direita, onde só há cartão — que carrega superfície própria. */
#perfis::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(102deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .9) 48%, rgba(0, 0, 0, .16) 78%, rgba(0, 0, 0, .42) 100%); }
#perfis > .container { position: relative; z-index: 1; }

/* Cartões de perfil sobre o escuro. Não viram cartão claro flutuante como o
   formulário do contato: são três e ocupam quase toda a seção, então o branco
   devolveria a seção ao claro e anularia a mudança. Ficam transparentes, com
   moldura clara e tipografia clara. */
/* O cartão carrega a própria superfície — o texto não pode depender do que a
   fotografia faz atrás dele. É **branco translúcido a 86%**, decisão de
   2026-08-15: a fotografia transparece por dentro do cartão sem que nenhum
   texto fique abaixo de 4,5:1. Foi grafite a 90% por algumas horas.
   Consequência obrigatória: sobre branco, toda a tipografia do cartão inverte
   para escuro. Marfim sobre esse fundo dá 1,0:1 — branco no branco. */
#perfis .journey-card { color: var(--graphite); background: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .5); }
#perfis .journey-card:hover, #perfis .journey-card:focus-visible { background: rgba(255, 255, 255, .93); border-color: rgba(117, 88, 48, .55); }
#perfis .journey-card h3 { color: var(--graphite); }
#perfis .journey-card p { color: #55524b; }
#perfis .journey-card .journey-examples { color: #5a564f; border-top-color: rgba(0, 0, 0, .18); }
/* Bronze escuro, o mesmo que o site usa em texto pequeno sobre superfície
   clara: o bronze claro sobre branco fica em 2,2:1. */
#perfis .journey-cta { color: var(--gold); }

/* Contato sobre fotografia escurecida. Da seção "Como atuamos" até o rodapé
   eram cinco superfícies claras seguidas: a cauda da página perdeu o
   contraponto escuro quando o CTA final foi removido, e a seção mais
   importante do fim ficou indistinguível das anteriores. A fotografia entra
   como textura, nunca como assunto — opacidade baixa sob véu grafite —, e o
   formulário continua sendo um cartão claro, que agora flutua sobre o escuro.
   Se um dia a imagem sair, devolver `section-paper` à seção. */
#contato { position: relative; overflow: hidden; }
.contact-media { position: absolute; inset: 0; z-index: 0; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; opacity: .9; filter: saturate(.66); }
/* O véu é forte onde há texto (esquerda) e aberto no meio, onde a fotografia
   aparece entre a coluna de texto e o cartão do formulário. */
#contato::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .9) 26%, rgba(0, 0, 0, .38) 58%, rgba(0, 0, 0, .58) 100%); }
#contato > .container { position: relative; z-index: 1; }
#contato .section-title { color: var(--off-white); }
.contact-copy { color: #d6cfc4; }
.contact-list { border-top-color: var(--line-dark); }
.contact-list div { border-bottom-color: var(--line-dark); }
.contact-list div span { color: var(--gold-bright); }
.contact-details a { color: var(--off-white); font-weight: 500; text-decoration-color: rgba(176, 138, 74, .8); }
.contact-details a:hover { color: var(--gold-bright); }
/* Sobre o escuro, o formulário volta a ser um cartão claro. Transparente ele
   ficaria com rótulo em 2,7:1 e texto digitado em 1,1:1 — ilegível. Formulário
   é onde a legibilidade não admite concessão estética, então o recorte
   editorial sem moldura vale nas superfícies claras, não aqui. */
#contato .contact-form { padding: clamp(26px, 3.4vw, 40px); background: var(--off-white); border: 1px solid rgba(255, 255, 255, .16); border-top: 1px solid rgba(255, 255, 255, .16); }
#contato .field-row:first-child { padding-top: 0; }
/* O caminho do WhatsApp era a única razão de existir do CTA final removido:
   sem ele aqui, o fim da página ofereceria apenas o formulário. */
.contact-whatsapp { margin-top: 26px; }
.contact-form { padding: 0; background: transparent; border: 0; border-top: 1px solid var(--line-light); box-shadow: none; }
.field-row:first-child { padding-top: 24px; }
.field { color: #5f5e5a; font-size: .66rem; font-weight: 550; }
input, select, textarea { border-bottom-color: #c2bab0; font-size: .84rem; }
.privacy-note { color: #666660; }
.footer-brand img { width: 230px; height: auto; }
.footer-bottom { color: #c0b8ae; font-size: .68rem; }
.footer-legal a { color: #d7cfc5; }

.site-footer { color: #dbd3c9; background: var(--graphite); }
/* Identificação societária completa exigida pelas boas práticas de
   transparência ao consumidor, mais o aviso permanente sobre limites de
   atuação. Fica entre o corpo do rodapé e a linha de copyright. */
/* Aceite ativo do formulário: caixa de seleção obrigatória, exigida para que o
   consentimento do art. 7º, I, da LGPD seja inequívoco e registrável. */
.field-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; align-items: start; margin-top: 4px; color: var(--gray-dark); font-size: .73rem; line-height: 1.55; cursor: pointer; }
.field-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }
.field-consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.field-consent strong { color: var(--graphite); font-weight: 600; }
.form-honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.privacy-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

.footer-identity { padding: 22px 0 4px; border-top: 1px solid var(--line-dark); }
.footer-identity p { max-width: 960px; margin: 0 0 7px; color: #a49a8c; font-size: .7rem; line-height: 1.6; }
.footer-identity p:last-child { margin-bottom: 0; color: #8f867a; }
.footer-identity strong { color: #cbc2b4; font-weight: 550; }
/* Cinco colunas desde que a seção de perfis foi acrescentada ao rodapé. */
.footer-main { grid-template-columns: 1.05fr .62fr .95fr .78fr .72fr; gap: 40px; padding-block: 60px 48px; }
.footer-brand p { color: #aca49a; }
.footer-heading { font-size: .65rem; font-weight: 550; }
.footer-links a, .footer-contact a, .footer-contact span { color: #b7afa5; }

@media (max-width: 1180px) {
  .container { width: min(var(--container), calc(100% - 68px)); }
  .hero-copy-block { width: min(590px, 55%); }
  /* O bloco de texto do Hero se alarga aqui — vai a 55% e, abaixo de 900 px, a
     67% da tela —, mas o véu continuava calibrado para os 49% do desktop. O
     resultado é que a metade direita do texto caía sobre a parte clara da
     fotografia: medido em 3,53:1 no H1 e 2,57:1 na descrição a 768 px, **e isso
     já acontecia com a fotografia anterior** — não veio com a troca de 2026-08-16.
     Alargar o patamar forte até 66% devolve 8,78:1 e 6,39:1. O Hero empilha
     abaixo de 700 px e ali o véu é desligado, então esta regra cobre a faixa
     701–1180 px, que é onde o problema existe. */
  .hero::before { background: linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .90) 38%, rgba(0, 0, 0, .80) 66%, rgba(0, 0, 0, .20) 84%, transparent 100%); }
  .navigation-layout { grid-template-columns: .62fr 1.38fr; gap: 56px; }
  .main-nav { gap: 16px; }
  /* Abaixo de 1180 px a coluna de cada perfil cai para menos de 200 px e os
     títulos em caixa alta quebram em três linhas. Coluna única preserva a
     igualdade entre os cinco, que é a regra inegociável desta seção.
     `grid-auto-rows: 1fr` iguala as cinco alturas: empilhados, cada cartão
     mediria conforme o próprio texto e "Particulares", que é o mais curto,
     ficava 20 px menor que os demais. */
  .journey-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .journey-card { min-height: 0; padding: 24px 26px 26px; }
  /* Abaixo de 1180 px cada um dos seis cards cairia para uma largura estreita
     demais para o título em serifa não quebrar em excesso. Duas colunas
     preservam a igualdade entre os seis sem encolher a tipografia, que é o
     que a direção de arte proíbe — e, com seis cards, a divisão em duas
     colunas fecha em três linhas completas, sem sobra (diferente do desktop,
     onde a grade de quatro colunas quebra em 4+2). `grid-auto-rows: 1fr`
     iguala as três linhas: sem isso cada uma mediria pelo próprio conteúdo e
     os seis deixariam de ter o mesmo peso. */
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}

@media (max-width: 900px) {
  .container { width: min(var(--container), calc(100% - 48px)); }
  /* O menu compacto acompanha a barra invertida: painel branco, texto escuro. */
  .main-nav { inset: var(--header-height) 0 0; height: calc(100dvh - var(--header-height)); align-content: start; overflow-y: auto; background: var(--white); }
  .main-nav a { border-bottom-color: var(--line-light); }
  .main-nav .mobile-nav-cta { color: var(--graphite); background: transparent; border-bottom-color: rgba(117, 88, 48, .5); }
  .hero-copy-block { width: min(590px, 67%); }
  /* Abaixo de ~1153px o `clamp` do desktop trava no minimo e o titulo
     ficaria maior do que a coluna comporta: a 49,6px o miolo
     "Investigacao e Inteligencia" mede 505px contra os 482px do bloco a
     768, parte em duas e a composicao deixa de ser a mesma do desktop.
     A 47,2px mede 464px e cabe. O minimo de 2.72rem protege o pe' da
     faixa, onde a coluna encolhe para 469px. Medido, nao estimado. */
  .hero h1 { font-size: clamp(2.72rem, 6.15vw, 2.95rem); }
  .navigation-layout, .about-grid, .why-layout, .deliverables-layout, .contact-layout, .faq-layout { grid-template-columns: 1fr; }
  .faq-layout { gap: 34px; }
  .navigation-layout { gap: 35px; }
  /* Empilhado, o véu de `#entregas` precisa girar de horizontal para VERTICAL.
     No desktop o texto ocupa só a metade esquerda e a fotografia abre à direita;
     aqui o texto atravessa a largura inteira e cairia justamente sobre a parte
     aberta — medido em 2,11:1 no H2 e 1,83:1 na lista, reprovação clara.
     Vertical, o véu protege o topo (eyebrow bronze, o texto mais exigente) e
     abre para baixo, onde fica o painel da fórmula com superfície própria: min
     5,36:1 e textura 0,145, o dobro do que um véu horizontal uniforme daria. */
  #entregas::after { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .88) 28%, rgba(255, 255, 255, .64) 60%, rgba(255, 255, 255, .46) 100%); }
  /* Três modelos lado a lado dariam ~210 px cada em tablet: o título em caixa
     alta quebraria e o CTA ficaria espremido. Coluna única com trilhas iguais
     mantém os três idênticos, que é a condição inegociável desta faixa. */
  .models-body { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .about-grid, .why-layout, .deliverables-layout, .contact-layout { gap: 48px; }
  .detail-body.has-media { grid-template-columns: 1fr; }
  .detail-media img { aspect-ratio: 4 / 5; }
  .why-list { margin-top: 36px; }
  /* As cinco colunas do rodapé precisam ser desfeitas aqui: por vir depois do
     CSS-base e ter a mesma especificidade, a regra de largura fixa anulava as
     quebras responsivas da base e forçava rolagem horizontal no celular. */
  .footer-main { grid-template-columns: 1.2fr 1fr; gap: 42px; }
}

@media (max-width: 700px) {
  :root { --header-height: 60px; }
  .container { width: min(var(--container), calc(100% - 36px)); }
  /* Celular: os cinco perfis em coluna única, com área de toque generosa. */
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card, .journey-card:last-child { grid-column: 1; min-height: 0; padding: 26px 24px 28px; }
  .section { padding-block: 68px; }
  .section-compact { padding-block: 52px; }
  .brand { width: 150px; flex-basis: 150px; }
  .brand img { width: 150px; height: auto; }
  .hero { min-height: 0; display: flex; flex-direction: column; background: var(--graphite); }
  .hero-media { position: relative; z-index: 0; inset: auto; order: 2; width: 100%; height: min(64vh, 560px); }
  .hero-media img { object-position: center; }
  .hero::before, .hero::after { display: none; }
  .hero-inner { position: relative; z-index: 1; order: 1; padding-top: calc(var(--header-height) + 48px); padding-bottom: 45px; }
  .hero-copy-block { width: 100%; }
  /* Era clamp(3rem, 14vw, 4.45rem), calibrado para a frase curta. */
  .hero h1 { font-size: clamp(2.5rem, 8.6vw, 3.4rem); line-height: .91; }
  .hero-description { font-size: .87rem; }
  .hero-actions { display: flex; }
  .hero-actions .button { width: auto; }
  .navigation-hub { padding-block: 55px; }
  .navigation-columns { grid-template-columns: 1fr; }
  .navigation-column + .navigation-column { border-top: 0; }
  .section-heading, .section-heading.center { display: block; margin-bottom: 30px; }
  .section-heading .section-copy { margin-top: 16px; }
  .service-grid, .editorial-details-grid, .steps, .why-list { grid-template-columns: 1fr; }
  /* Celular: um módulo por vez, com área de toque folgada no CTA. */
  .service-cta, .model-cta { min-height: 44px; padding: 0 17px; }
  .models-band { margin-top: 40px; padding: 34px clamp(18px, 5vw, 26px) 36px; }
  .detail-header { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 22px 18px; }
  .detail-heading .eyebrow { display: none; }
  .detail-title { font-size: 1.7rem; }
  .detail-copy { font-size: .73rem; }
  .detail-close { min-width: 38px; min-height: 38px; font-size: 0; }
  .detail-close::before { content: "×"; font-family: var(--serif); font-size: 1.25rem; }
  .detail-content { padding: 22px 18px 25px; }
  .detail-points { grid-template-columns: 1fr; }
  .detail-actions { display: flex; }
  .detail-actions .button { width: auto; }
  .editorial-detail:nth-last-child(2) { border-bottom: 0; }
  .editorial-detail:nth-last-child(1) { border-bottom: 1px solid var(--line-light); }
  .disclosure summary { min-height: 66px; }
  .disclosure-content { padding-left: 45px; }
  .faq-item .disclosure-content { padding-left: 0; }
  /* 48px, não os 66px do `.disclosure` padrão: as perguntas são longas e quebram
     em duas linhas no celular, então a faixa já nasce alta. Herdando 66px com
     `align-items: start`, a pergunta de uma linha só ficava com 34,5px de vazio
     abaixo enquanto a de duas linhas ficava com 15px, e o divisor deixava de ter
     ritmo. Em 48px a faixa mede 48px com uma linha e 51px com duas — as duas
     acima do piso de 44px de área de toque. */
  .disclosure.faq-item > summary { min-height: 48px; }
  .why-item:nth-last-child(2) { border-bottom: 0; }
  .why-item:last-child { border-bottom: 1px solid var(--line-dark); }
  .step:nth-last-child(2) { border-bottom: 0; }
  .step:last-child { border-bottom: 1px solid var(--line-light); }
  .reports-grid { grid-template-columns: 1fr; gap: 58px; }
  .indicator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicator { min-height: 120px; }
  .final-cta { min-height: 560px; align-items: end; }
  .final-cta-media img { object-position: center; }
  .final-cta::before { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .92) 72%); }
  .final-cta-layout { min-height: 560px; display: flex; align-items: end; padding-block: 50px; }
  .final-cta h2 { font-size: clamp(2.55rem, 13vw, 3.75rem); }
  .field-row:first-child { padding-top: 21px; }
  .form-bottom { display: grid; }
  .form-bottom .button { width: fit-content; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; padding-block: 52px 40px; }
}

@media (max-width: 420px) {
  .container { width: calc(100% - 30px); }
  /* 10.67vw dá 40px a 375: seis linhas em vez de sete, e o Hero cai de 1.252px
     para ~1.148px. Parar em 36px daria cinco linhas, mas deixaria o H1 a 1,22x
     o H2 da página (29,6px) — hierarquia fina demais para o título principal. */
  .hero h1 { font-size: clamp(2.25rem, 10.67vw, 2.75rem); }
  .hero-media { height: 470px; }
  .navigation-link { font-size: .72rem; }
  .service-card { grid-template-columns: 26px minmax(0, 1fr) 16px; gap-inline: 10px; }
  /* Era .79rem, ou 12,64px contra os 12,08px da descrição: uma razão de 1,05,
     em que o título mal se distinguia do parágrafo e a hierarquia do cartão
     praticamente desaparecia no celular. Em .88rem a razão vai a 1,17. Os
     títulos 02 e 03 passam a quebrar em duas linhas — aceito de propósito, e
     não é motivo para reduzir de novo. Os seis cartões (quatro até a migração
     de 2026-08-21) continuam iguais entre si, por `grid-auto-rows: 1fr`, e
     sobem juntos de 252px para 271px. */
  .service-card h3 { font-size: .88rem; }
  .detail-actions { display: grid; }
  .detail-actions .button { width: 100%; }
  .disclosure-title { font-size: .76rem; }
  .final-cta { min-height: 530px; }
}


/* ── Compactação vertical de 2026-08-14 ────────────────────────────────────
   Meta declarada pelo cliente: duas seções por tela de computador. O respiro
   das seções já caiu de 207px para 95px em `.section`; estas regras atacam o
   que sobrou dentro de cada uma. Nenhum conteúdo é removido e nenhum corpo de
   texto encolhe — só recuo, margem e altura mínima de painel.
   Ao mexer aqui, medir de novo: o alvo é ~420px por seção em 1440x900. */
.steps { margin-top: 18px; }
.deliverables-list { margin-top: 20px; }
.deliverables-list li { padding-block: 7px; }
.formula-panel { min-height: 0; padding-block: 40px; }
.formula { margin-block: 28px; }
/* 44px é o piso de área de toque; a compactação tinha levado a 38px. */
.navigation-link { min-height: 44px; }
.disclosure summary { min-height: 52px; }
/* Painéis de relatórios e entregas: as margens verticais internas somavam
   mais que o próprio conteúdo. Os textos não mudam de corpo. */
.report-panel .eyebrow { margin-top: 4px; margin-bottom: 11px; }
.report-panel h2 { margin-top: 0; }
.report-panel p { margin-top: 14px; margin-bottom: 0; }
.report-flow { margin-top: 18px; }
.compliance-list { margin-top: 18px; }
/* Perfis: o título da seção ocupa duas linhas do maior corpo da página; o
   ganho aqui vem do cartão, não da tipografia. */
.journey-grid { gap: 22px; }

/* ── COMO FUNCIONA A CONTRATAÇÃO — transparência da USS (2026-08-31) ───────
   Seção nova entre `#solucoes` e `#perfis`, criada pelo Comando 6 para
   explicar publicamente como uma demanda é dimensionada. Nenhum componente
   existente serve inteiro: `.model-card` é grafite e vive dentro da faixa
   preta do `.models-band`, e trazê-lo para cá exigiria anular cor, altura e
   recuo — mais anulação do que reúso. As classes abaixo repetem a GRAMÁTICA
   do cartão de modelo (numeral bronze, título curto em caixa-alta, corpo
   miúdo) sobre superfície clara, que é o que esta seção pede.

   **Numeral em `--gold` #755830, nunca `--gold-bright` #b08a4a.** O segundo
   mede 2,97 sobre branco e reprovaria AA num corpo de .72rem. É a mesma
   armadilha que o AGENTS.md já registra para o link da `.ressalva`: quem
   herda cor global não aparece na regra que você está editando.

   Grade 2x2, não 4x1: as etapas 03 e 04 têm cerca de 330 caracteres, e quatro
   colunas de ~290px as levariam a doze linhas cada. Em duas colunas o bloco
   fica mais largo que alto, que é a densidade pedida pelo comando. */
.contratacao .section-heading.center { margin-bottom: clamp(34px, 3.2vw, 48px); }
.contratacao-etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.contratacao-etapa { padding: clamp(24px, 2.1vw, 32px); background: var(--white); border: 1px solid var(--line-light); }
.contratacao-numero { display: block; color: var(--gold); font-family: var(--sans); font-size: .72rem; font-weight: 750; letter-spacing: .14em; }
.contratacao-etapa h3 { margin: 18px 0 12px; color: var(--graphite); font-family: var(--sans); font-size: .92rem; font-weight: 750; letter-spacing: .055em; line-height: 1.3; text-transform: uppercase; }
.contratacao-etapa p { margin: 0; color: var(--gray-dark); font-size: .84rem; line-height: 1.75; }
/* Mesma gramática da `.ressalva` das páginas de direcionamento: filete bronze
   à esquerda sobre cartão branco. `.ressalva` mora em perfil.css, que a home
   não carrega — daí a regra local, em vez de puxar o arquivo inteiro. */
.contratacao-limites { max-width: 78ch; margin: clamp(22px, 2vw, 30px) 0 0; padding: 22px 26px; background: var(--white); border-left: 2px solid var(--gold); }
.contratacao-limites p { margin: 0; color: var(--gray-dark); font-size: .84rem; line-height: 1.72; }
.contratacao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(24px, 2.2vw, 32px); }
/* Link secundário no desenho do `.faq-all`: caixa-alta miúda, filete bronze,
   sem preenchimento — legível ao lado do botão principal sem disputar com ele.
   Classe própria porque `.faq-all` nomeia outro destino; a seta reaproveita
   `.faq-arrow`, que é puramente decorativa e aponta mesmo para a FAQ. */
.contratacao-uss { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; color: var(--gold); font-family: var(--sans); font-size: .605rem; font-weight: 600; letter-spacing: .15em; line-height: 1; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(117, 88, 48, .38); transition: color .25s ease, background .25s ease, border-color .25s ease; }
.contratacao-uss:hover, .contratacao-uss:focus-visible { color: #6b4f26; background: rgba(117, 88, 48, .07); border-color: var(--gold); }
.contratacao-uss:hover .faq-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .contratacao-etapas { grid-template-columns: 1fr; }
}

/* Abaixo de 700 o cabeçalho da seção já é alinhado à esquerda pela regra geral
   do `.section-heading.center`; os dois destinos passam a ocupar a largura */
@media (max-width: 700px) {
  .contratacao-limites { padding: 20px 22px; }
  .contratacao-acoes { display: grid; margin-top: 26px; }
  .contratacao-acoes .button, .contratacao-uss { width: 100%; }
}