:root {
  --noite: #17130d;
  --tinta: #241d12;
  --papel: #faf4e9;
  --papel-2: #f4ecda;
  --ouro: #c79a3f;
  --ouro-2: #b08828;
  --alva: #fff7e0;
  --alva-2: #ffedbc;
  --ouro-sobre-claro: #6b5424;

  /* respiro: --pad-secao é a margem lateral, --ritmo-secao o respiro vertical.
     Antes os dois eram o mesmo valor e o vazio entre seções saía dobrado.
     O mínimo era 4rem: no celular 10vw dá 39px, o clamp travava em 64px de cada
     lado e 128px dos 390 viravam margem morta, com linha de ~30 caracteres.
     Medido em 22/08: coluna de texto ia de x=64 a x=326. De 640px pra cima o
     10vw assume e nada muda no desktop. */
  --pad-secao: clamp(1.5rem, 10vw, 8rem);
  /* RITMO: este é o respiro das seções de apoio, e ele desceu um degrau
     (era 3.5/6vw/5.5rem). Não é economia de espaço, é contraste: a página tinha
     seis seções com exatamente o mesmo peso e lia como pilha. Baixando o vale e
     levantando o pico (#prova, abaixo), a rolagem passa a ter dois momentos
     altos — o hero e o trabalho no ar — e quatro que conduzem até eles. */
  --ritmo-secao: clamp(3.25rem, 5.2vw, 4.75rem);
  --nav-h: calc(4.25rem + 1px);

  --curva: cubic-bezier(.22, .61, .36, 1);
  --raio: 2px;
  --lh-corpo: 1.65;
  --h3-secao: 1.3rem;

  --serif: 'Spectral', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ouro) 40%, var(--noite)) var(--noite);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* O gate .anima já deixa reveal e entrada do hero de fora quando o sistema pede
   menos movimento, mas as transições de estado (hover, foco, acordeão) rodavam
   assim mesmo. Num site que fala com psicólogo clínico, movimento que a pessoa
   pediu pra não ver é ruído, então aqui o corte é geral. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Pular pro conteúdo: a página é longa e a navegação é o primeiro alvo de
   tabulação. O link é injetado pelo script.js e só aparece quando recebe foco.
   (O comentário antigo dizia que o index.html estava fechado; deixou de estar na
   rodada de design de 22/08. Passar o link pro HTML é uma melhora de verdade —
   hoje quem está sem JS fica sem ele —, mas é outro assunto, não foi pedido
   nesta rodada e mexe em script.js, que outros agentes estão editando.) */
.pular-conteudo {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 1100;
  padding: .7rem 1.1rem;
  background: var(--noite);
  color: var(--alva);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .3s var(--curva);
}

.pular-conteudo:focus-visible {
  transform: translateY(0);
}

/* o alvo do skip link recebe foco por script; o anel do :focus-visible não
   dispara em elemento focado por programação, e um outline no <main> inteiro
   seria um retângulo de 12.000px */
main:focus {
  outline: none;
}

body {
  background: var(--noite);
  color: var(--papel);
  font-family: var(--sans);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ouro);
  color: var(--noite);
}

/* foco visível em tudo que é interativo; sobre papel o ouro puro não alcança 3:1 */
:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
  border-radius: 1px;
}

#contato :focus-visible {
  outline-color: var(--ouro-sobre-claro);
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* .75rem = 12px é o piso de texto de interface aqui. Estava em .72rem (11,52px)
   em 9 rótulos, e o mono com tracking de .18em fica ainda menor na percepção. */
.rotulo {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  color: var(--ouro);
}

.filete {
  border-top: 1px solid color-mix(in srgb, var(--ouro) 28%, transparent);
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A barra é full-bleed, o conteúdo dela não: logo e CTA moram na mesma calha
     do resto da página. Só --pad-secao não basta acima de 68rem, porque aí a
     coluna para de crescer e passa a ser centralizada — medido em 1440px, o
     logo caía em x=128 e todo h2 de seção em x=176. O max() pega o maior dos
     dois recuos, que é sempre o que a página está usando. */
  padding: 1rem max(var(--pad-secao), calc((100% - 68rem) / 2));
  background: var(--noite);
  border-bottom: 1px solid color-mix(in srgb, var(--ouro) 12%, transparent);
}

.navbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-logo img {
  width: 36px;
  height: 36px;
}

.navbar-links {
  display: flex;
  gap: 2rem;
  flex: 1;
  margin-left: 3rem;
}

.navbar-links a {
  color: var(--papel);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: color .28s var(--curva);
}

.navbar-links a:hover {
  color: var(--alva-2);
}

.btn-wa {
  padding: 0.5rem 1rem;
  background: var(--ouro);
  color: var(--noite);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-weight: 600;
  font-size: .9rem;
  transition: background .28s var(--curva), color .28s var(--curva), border-color .28s var(--curva);
  white-space: nowrap;
}

/* hover: o dourado sobe meio tom; :active desce meio tom */
.btn-wa:hover {
  background: color-mix(in srgb, var(--ouro) 78%, var(--alva-2));
}

.btn-wa:active {
  background: var(--ouro-2);
}

/* na barra o CTA vira filete: dois botões cheios idênticos na mesma dobra
   achatavam a hierarquia, e a linha é a forma dominante da marca.
   A borda a 50% de --ouro sobre --noite compõe #6f5726 e dá 2,73:1, abaixo dos
   3:1 que a WCAG 1.4.11 pede pra borda que é o único limite do componente.
   62% compõe #84672c e mede 3,54:1, sem sair da paleta. */
.navbar .btn-wa {
  background: transparent;
  color: var(--ouro);
  border-color: color-mix(in srgb, var(--ouro) 62%, transparent);
}

.navbar .btn-wa:hover {
  background: color-mix(in srgb, var(--ouro) 12%, transparent);
  border-color: var(--ouro);
  color: var(--alva-2);
}

.navbar .btn-wa:active {
  background: color-mix(in srgb, var(--ouro) 20%, transparent);
}

main {
  margin-top: var(--nav-h);
  display: flex;
  flex-direction: column;
}

main > section {
  padding: var(--ritmo-secao) var(--pad-secao);
  /* o vão entre duas seções somava os dois respiros inteiros mais o recuo do
     cabeçalho e passava de 190px, sempre vazio e sempre no mesmo lugar. O de
     baixo encolhe porque o de cima é que anuncia a seção nova. */
  padding-bottom: calc(var(--ritmo-secao) * .75);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

/* Hero editorial: fundo noite puro com um vinhete vertical de 3% pro tinta.
   A luz âmbar (radial + blur + respiração) saiu: virava mancha amarelada atrás
   do CTA. Aqui a força é tipografia e vazio, não glow. */
#inicio {
  background: linear-gradient(to bottom in oklab, var(--noite) 45%, color-mix(in srgb, var(--noite) 88%, var(--tinta)));
  display: flex;
  align-items: center;
  padding-block: var(--ritmo-secao);
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  position: relative;
  overflow: hidden;
}

/* AURÉOLA ESTRUTURAL — o movimento decisivo desta rodada.
   Antes: `#inicio::after` com o SVG da marca a 5% de opacidade, encostado na
   borda direita. Era enfeite: dava pra tirar sem a composição mudar de ideia.
   Agora o círculo tem diâmetro da altura do hero, sangra pela direita e o nome
   mora DENTRO dele. O arco é um filete de ~1px, ou seja: é o mesmo filete
   que separa as seções da página, curvado. A forma dominante da marca (linha) e
   o símbolo (círculo) viraram o mesmo traço em vez de dois recursos separados.
   Não há núcleo nem plano cheio: a peça inteira é traço. O disco central da marca
   foi testado aqui e saiu, porque no diâmetro que faz a auréola sangrar o centro
   dela cai fora da palavra e sobrava um disco solto no vazio. O acolhimento do
   círculo continua na curva que abraça o nome, não num brilho.
   O único gradiente é o que esvaece as DUAS PONTAS do traço (defs no index.html):
   nessa escala elas caem longe da palavra, e dois cortes secos a 18px do CTA liam
   como recorte mal feito. Emergir do escuro e voltar pra ele é o que uma auréola
   faz; brilho de fundo seria efeito, e já foi tirado do hero antes por virar mancha. */
.hero-aureola {
  position: absolute;
  top: 50%;
  right: 0;
  /* O deslocamento é em % do PRÓPRIO círculo (porcentagem de `translate` resolve
     contra o elemento), não da coluna. Com `right: -46%` a âncora era medida na
     coluna e o diâmetro em vh: numa tela baixa e larga (medido em 1100x650) o
     círculo encolhia e a âncora não, então sobrava só um risco entrando no canto.
     Assim a sangria fica proporcional — 136px além da tela em 1440x900 e 116px em
     1100x650, com a abertura do arco caindo atrás do fim da palavra nos dois. */
  translate: 44% -50%;
  /* O diâmetro é maior que a altura útil do hero e a âncora joga o centro pra
     fora da coluna: a barriga direita sai da tela e o que fica é a curva.
     Testado antes com um círculo que cabia inteiro na viewport — lia como
     "logotipo grande no canto", que é o que a rodada anterior já fazia a 5% de
     opacidade. Sangrar é o que separa marca aplicada de estrutura.
     Teto de 74rem pra que em monitor muito alto a curva não vire linha reta. */
  width: min(124vh, 74rem);
  aspect-ratio: 1;
  pointer-events: none;
  overflow: visible;
  color: var(--ouro);
}

/* o SVG é o primeiro filho e é posicionado; os irmãos precisam de position pra
   pintar por cima dele (ordem de DOM entre elementos posicionados) */
.hero-conteudo > :not(.hero-aureola) {
  position: relative;
}

/* A espessura é dada em unidade do viewBox, e não com `vector-effect:
   non-scaling-stroke`, que seria o caminho óbvio pro filete de 1px cravado.
   Medido no Chrome: com non-scaling-stroke o `stroke-dasharray: 1` do traço que
   se desenha para de ser lido em unidade de `pathLength` e passa a valer 1 PIXEL,
   o que transforma o arco num tracejado de 1px on / 1px off. Com .12 do viewBox,
   o arco renderiza entre 0,8px e 1,1px em toda a faixa de tela que o site atende
   (a caixa varia de ~676 a 992px), que é a mesma família de peso do .filete. */
/* Os dois terminais do arco caem no vazio, e a revisão de design pediu pra esvaecê-los.
   Tentado com linearGradient nas pontas do path (y=26 a y=74) e DESFEITO na tela: o arco
   sangra pela direita, então a barriga fica fora do viewport e o que se vê são justamente as
   pontas. Esvaecê-las apagava a única parte visível do traço. Quem for tentar de novo precisa
   de máscara sobre a área VISÍVEL, não gradiente ao longo do path. Fica registrado pra não
   custar a mesma descoberta duas vezes. */
.ha-arco {
  fill: none;
  stroke: color-mix(in srgb, var(--ouro) 46%, transparent);
  stroke-width: .12;
  stroke-linecap: round;
}

/* agrupamento em vez de gap uniforme: rótulo cola no nome, tagline e subfrase
   formam o segundo bloco, o CTA fica separado. Antes tudo respirava igual e o
   olho não achava a hierarquia. */
.hero-conteudo {
  /* Mesma medida de .secao-conteudo, de propósito: era min(100% - 3rem, 72rem)
     e o hero abria numa calha só dele. Medido antes: em 1100px o h1 e o filete
     dourado do hero começavam em x=134 contra x=110 de todo h2 abaixo; em
     1440px a conta inverte e o hero começa em 152 contra 176. Como o filete do
     hero e os filetes que separam as seções são a mesma linha da marca, os dois
     x diferentes liam como desalinho, não como hierarquia. */
  width: min(100%, 68rem);
  margin-inline: auto;
  text-align: left;
  position: relative;
  /* o h1 passa a ser medido na coluna, não na viewport: ver o comentário do
     font-size em .hero-conteudo h1 */
  container-type: inline-size;
}

.hero-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 2.5rem;
}

.hero-topo .rotulo {
  margin: 0;
}

.hero-local {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--papel-2) 55%, transparent);
  margin: 0;
}

/* o filete corta a auréola: numa circunferência, uma reta que a atravessa é
   corda, e corda com círculo é composição — reta encostada em círculo é enfeite.
   Por isso ele continua indo de ponta a ponta da coluna. A margem encolheu
   porque a entrelinha de .82 já fecha o vão embaixo do nome. */
.hero-linha {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  padding-top: 1.1rem;
}

.hero-linha::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ouro) 38%, transparent);
  transform-origin: left center;
}

.hero-tagline {
  margin: 0;
}

.hero-base {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* o vão virou medida: é ele que o filete de chamada ocupa (.hero-acao::before) */
  gap: var(--vao-acao);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  --vao-acao: clamp(2rem, 7vw, 6rem);
}

.hero-subfrase {
  margin: 0;
}

/* O CTA era um retângulo dourado pousado no canto, sem relação com nada.
   Agora uma linha o traz: o filete atravessa o vão e encosta no botão, que é o
   que a linha faz de melhor na matriz de formas (conduzir o olho). Continua
   sendo o único elemento cheio do hero — hierarquia de ação preservada, só que
   dentro da composição em vez de ao lado dela. */
.hero-acao {
  flex-shrink: 0;
  position: relative;
}

.hero-acao::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: var(--vao-acao);
  height: 1px;
  background: color-mix(in srgb, var(--ouro) 42%, transparent);
  transform-origin: left center;
}

/* ESCALA EDITORIAL REAL.
   O tamanho não sai mais de vw: "Candor" tem 6 letras e largura previsível
   (medido em Spectral 600: a palavra mede 3,31x o corpo), então 28cqw faz a
   palavra ocupar a coluna inteira em QUALQUER largura, do celular ao monitor.
   Com vw isso não acontecia: em 1100px o clamp entregava 165px e sobravam 200px
   de coluna vazia à direita, em 390px sobravam 78px. O nome deixa de flutuar num
   vazio e passa a ser o próprio limite da página.
   O clamp em vw fica de fallback pra quem não tem unidade de container.
   Tracking e entrelinha acompanham a escala: quanto maior o corpo, mais fechado
   o desenho — em 300px a entrelinha de .95 abria um vão que não existe em 70px. */
.hero-conteudo h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(4.5rem, 15vw, 12rem);
  /* 28cqw, não 30: em 390px a palavra media 310px numa coluna de 312, e a folga de 2px some
     no primeiro carregamento, quando o Spectral ainda não chegou e o Georgia de fallback
     desenha mais largo. Cortar o nome da marca na primeira dobra é o pior defeito possível
     aqui, e 2 pontos de coluna não fazem falta nenhuma na leitura. */
  font-size: 28cqw;
  letter-spacing: -0.025em;
  line-height: .82;
  margin: 0;
  color: var(--alva);
}

.hero-tagline {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  color: var(--papel-2);
}

.hero-tagline .ponto {
  color: var(--ouro);
  padding: 0 .5em;
}

.hero-subfrase {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--papel-2);
  max-width: 46ch;
}

.hero-cta {
  padding: .95rem 2rem;
  font-size: 1rem;
}

/* entrada do hero: cascata no load, so com .anima (reduced-motion fica de fora) */
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-linha-desenha {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.anima #inicio .hero-entra {
  animation: hero-entra .9s var(--curva) both;
}

.anima #inicio .hero-topo { animation-delay: .05s; }
.anima #inicio h1.hero-entra { animation-delay: .15s; }
.anima #inicio .hero-linha { animation-delay: .3s; }
.anima #inicio .hero-subfrase { animation-delay: .42s; }
.anima #inicio .hero-acao { animation-delay: .54s; }

.anima #inicio .hero-linha::before {
  animation: hero-linha-desenha 1.1s var(--curva) .45s both;
}

/* A página inteira fala uma língua só de movimento: linha que se desenha
   (o filete do hero, o filete de cada cabeçalho de seção). Aqui esse gesto vai
   pro maior traço da peça. São 2,4s — devagar de propósito: o arco tem que
   parecer sendo traçado, não aparecendo. Mesma --curva de sempre, zero
   overshoot; quique num site que promete serenidade desmente a promessa.
   O núcleo e a ponta só acendem depois que o traço fecha. */
@keyframes aureola-desenha {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.anima .ha-arco {
  stroke-dasharray: 1;
  animation: aureola-desenha 2.4s var(--curva) .35s both;
}

/* o filete que leva ao CTA entra junto com o botão, e desenhando: se aparecesse
   pronto, seria mais um traço na tela em vez do gesto que aponta */
.anima #inicio .hero-acao::before {
  animation: hero-linha-desenha .9s var(--curva) .72s both;
}

/* Aqui ficavam as regras de .revela-tudo, a "rede de segurança" que o script
   ligava 3s depois do load. Ela desligava com !important os 28 elementos de
   reveal da página inteira, e como ninguém passa menos de 3s no hero, o efeito
   real era que a animação de rolagem nunca aparecia pra ninguém. Saiu junto com
   o setTimeout do script.js. O que cobre a falha do observer agora é o próprio
   observer: threshold 0 com rootMargin, que dispara assim que a seção encosta na
   viewport em vez de exigir 15% dela visível. */

#espelho,
#como-funciona,
#prova,
#oferta,
#quem-somos {
  background: var(--noite);
}

#contato {
  background: var(--papel);
  color: var(--tinta);
  position: relative;
  /* a faixa de transição come o topo; o conteúdo começa depois dela */
  padding-top: calc(var(--ritmo-secao) + clamp(3rem, 5vw, 4.5rem));
  /* O desconto de 25% no padding-bottom que vale entre seções não vale aqui:
     ele existe porque o respiro de cima da seção seguinte é que anuncia a
     virada, e depois desta não vem seção nenhuma, vem o rodapé noite. O que
     sobrava era uma faixa creme de 121px em cima contra 49,5 embaixo, apoiada
     na borda. Voltando ao ritmo inteiro, os dois respiros do creme medem o
     mesmo (66px em 1100, 56 em 390) e a faixa para de pesar pra baixo. */
  padding-bottom: var(--ritmo-secao);
}

/* transição noite -> papel: gradiente entre as duas cores reais.
   Ir de noite até `transparent` passava por cinza premultiplicado e sujava a faixa. */
#contato::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(3rem, 5vw, 4.5rem);
  background: linear-gradient(to bottom in oklab, var(--noite), var(--papel));
  pointer-events: none;
}

#contato .rotulo {
  color: var(--ouro-sobre-claro);
}

#contato .secao-header h2 {
  color: var(--tinta);
}

/* seção clara: --ouro puro sobre --papel só alcança 2.36:1; --ouro-2 sobe pra 3:1+ */
#contato .btn-wa {
  background: var(--ouro-2);
}

#contato .btn-wa:hover {
  background: color-mix(in srgb, var(--ouro-2) 82%, var(--alva-2));
}

#contato .btn-wa:active {
  background: color-mix(in srgb, var(--ouro-2) 85%, var(--tinta));
}

/* mesmo motivo do botão: o filete a 28% de --ouro quase some sobre papel */
#contato .filete {
  border-top-color: color-mix(in srgb, var(--ouro-sobre-claro) 45%, transparent);
}

/* #contato sozinha centraliza: metade direita do container de 68rem ficava
   vazia com o conteúdo alinhado à esquerda; coerente com o rodapé, que já
   é centrado */
#contato .secao-header,
#contato .contato-texto,
#contato .contato-ctas {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* o bloco continua centrado na coluna, mas o texto dentro dele volta a alinhar
   à esquerda: eram 4 linhas centralizadas no desktop e 7 no celular, e cada
   linha começando num ponto diferente obriga o olho a procurar o começo da
   próxima. Centralizar era pra tapar o vazio da metade direita do desktop, e
   isso quem resolve é o max-width, não o alinhamento. */
.contato-texto {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--tinta);
  max-width: 52ch;
  margin: 0;
  overflow-wrap: anywhere;
}

#contato .contato-texto {
  text-align: left;
}

/* perguntas frequentes no contato: cada resposta fecha com o WhatsApp já no
   assunto certo. Sem data-wa de propósito: cada link carrega a própria
   mensagem e o script não pode sobrescrever com a genérica */
.faq {
  width: min(100%, 34rem);
  margin-inline: auto;
  text-align: left;
}

.faq-item {
  border-top: 1px solid color-mix(in srgb, var(--ouro-sobre-claro) 35%, transparent);
}

.faq-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ouro-sobre-claro) 35%, transparent);
}

.faq-item summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .25rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--tinta);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--ouro-sobre-claro);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-corpo {
  padding: 0 .25rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.faq-corpo p {
  color: color-mix(in srgb, var(--tinta) 82%, var(--papel));
  margin: 0;
  max-width: 58ch;
}

.faq-corpo .contato-alt {
  align-self: flex-start;
}

.contato-agenda {
  font-family: var(--sans);
  font-size: .9rem;
  color: color-mix(in srgb, var(--tinta) 72%, var(--papel));
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
}

.contato-ctas {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.contato-cta {
  padding: 1rem 2.1rem;
  font-size: 1.05rem;
}

.contato-alt {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ouro-sobre-claro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: color-mix(in srgb, var(--ouro-sobre-claro) 45%, transparent);
  transition: color .28s var(--curva), text-decoration-color .28s var(--curva);
}

.contato-alt:hover {
  color: var(--tinta);
  text-decoration-color: var(--tinta);
}

.secao-conteudo {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.secao-header {
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.secao-intro {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--papel-2) 82%, transparent);
  max-width: 58ch;
  margin: .35rem 0 0;
}

.secao-header h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--alva);
  margin: 0;
  max-width: 26ch;
}

/* remate de seção: ganhou filete e recuo pra fechar o bloco. Solto e alinhado à
   esquerda embaixo de uma grade de 68rem, virava órfão. */
.secao-fecho {
  font-family: var(--serif);
  font-style: italic;
  color: var(--papel-2);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ouro) 20%, transparent);
}

.secao-fecho.promessa {
  color: var(--alva);
  font-size: 1.4rem;
  text-align: center;
  max-width: 40ch;
  margin-inline: auto;
  padding-top: 2rem;
}

/* #espelho: os 3 erros */
.erros {
  display: flex;
  flex-direction: column;
}

.erro {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding: 2.25rem 0;
}

.erro-numero {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ouro);
  padding-top: .3rem;
}

.erro-corpo {
  min-width: 0;
}

.erro-corpo h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--alva);
  margin: 0 0 .5rem;
}

.erro-frase {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ouro);
  margin: 0 0 .85rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.erro-corpo p:last-child {
  color: var(--papel-2);
  line-height: var(--lh-corpo);
  margin: 0;
  max-width: 62ch;
  overflow-wrap: anywhere;
}

/* #como-funciona: os 3 estágios */
.estagios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

/* mesma filete que separa os erros: as colunas ganham âncora e as três listas
   da página passam a falar a mesma língua de linha */
.estagio {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--ouro) 28%, transparent);
  padding-top: 1.25rem;
}

.estagio-numero {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ouro);
}

.estagio h3 {
  font-family: var(--serif);
  font-size: var(--h3-secao);
  font-weight: 600;
  line-height: 1.3;
  color: var(--alva);
  margin: 0;
}

.estagio p {
  color: var(--papel-2);
  line-height: var(--lh-corpo);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Foto que quebra o texto do método. As três vêm de ensaios diferentes e não
   formam conjunto: madeira rosada em 01, abóbora laranja de outono em 02,
   couro preto-azulado em 03.
   Chegou a rodar em grayscale(.85) + sepia, que resolvia a incompatibilidade
   apagando a cor. O Matheus vetou o preto e branco (22/08), com razão: numa
   página que já é escura e dourada, três retângulos monocromáticos pareciam
   placeholder, não fotografia.
   Agora a cor volta e a harmonização é por TEMPERATURA, não por remoção:
   sepia leve puxa os três para o mesmo eixo âmbar da paleta, a saturação sobe
   de novo pra cor ficar viva, e o croma extremo (o laranja da abóbora) fica
   contido em vez de sumir. O brilho continua por foto porque o CSS não
   conserta a luz de cada ensaio: as duas claras descem, a escura sobe, e as
   três passam a pesar igual na coluna.
   Continua sendo remendo. Assunto, enquadramento e profundidade seguem de três
   autores diferentes, e nenhum filtro resolve a abóbora de outubro numa página
   institucional — a saída de verdade é ensaio próprio (PENDENCIAS.md item 2). */
.estagio-foto {
  --foto-brilho: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ouro) 40%, transparent);
  filter: sepia(.22) saturate(1.1) contrast(1.04) brightness(var(--foto-brilho));
  display: block;
  margin-bottom: .5rem;
}

/* O seletor é pelo nome do arquivo porque o index.html está fechado nesta
   rodada e não há classe por foto. Se alguma for trocada, o padrão --foto-brilho
   de 1 continua valendo e nada quebra; só o acerto de luz se perde. */
.estagio-foto[src$="fundacao.jpg"] {
  --foto-brilho: .9;
}

.estagio-foto[src$="operacao.jpg"] {
  --foto-brilho: .88;
}

.estagio-foto[src$="marca.jpg"] {
  --foto-brilho: 1.2;
}

.estagio-pratica {
  margin-top: .35rem;
}

.estagio-pratica strong {
  color: var(--alva);
  font-weight: 500;
}

/* #oferta: os 3 pacotes reusam a anatomia do estágio; o modelo de contratação
   é um selo colado no título — no rodapé da coluna ele descolava do texto e
   parecia flutuar (reparo pedido pelo Matheus, 17/08) */
.pacote-modelo {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  color: var(--ouro);
  border: 1px solid color-mix(in srgb, var(--ouro) 40%, transparent);
  padding: .32rem .65rem;
  border-radius: 2px;
  align-self: flex-start;
  margin: .15rem 0 .25rem;
}

/* O nome do pacote, agora que o h3 virou o serviço. Era o contrário até 31/08 (h3
   com o nome da Candor, serviço em corpo pequeno) e a página falava primeiro na
   língua da agência.
   Fica em corpo de apoio e cor de texto, não em dourado: o dourado desta coluna já
   é do .pacote-modelo logo abaixo, e duas linhas douradas seguidas viram uma tarja
   só — some a hierarquia entre "como se chama" e "como se cobra". */
.pacote-nome {
  font-size: .95rem;
  color: var(--papel-2);
  margin: -.2rem 0 0;
  text-wrap: balance;
}

/* Lista de entregáveis. O marcador é o filete da página encurtado, não um check:
   a linha é a forma dominante da marca, e um ✓ verde entraria como corpo estranho
   numa paleta de dois tons. Alinhamento por grid porque list-style com ::before
   solto desalinha na segunda linha do item. */
.pacote-itens {
  list-style: none;
  margin: .2rem 0 .1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.pacote-itens li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: .7rem;
  align-items: baseline;
  color: var(--papel-2);
  line-height: var(--lh-corpo);
  overflow-wrap: anywhere;
}

.pacote-itens li::before {
  content: "";
  height: 1px;
  background: var(--ouro);
  /* baseline alinha o filete pela linha de base do texto; o translate sobe ele
     até a altura do olho da letra, senão ele encosta embaixo da primeira palavra */
  transform: translateY(-.35em);
}

/* fecho da oferta: pergunta e botão espalhados nas pontas liam como sobra de
   layout (reparo pedido pelo Matheus/Pablo, 17/08). Agora é um convite único,
   centrado e com o peso da promessa do quem-somos */
.oferta-fecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--ouro) 20%, transparent);
  padding-top: 2.5rem;
}

.oferta-fecho .secao-fecho {
  border-top: 0;
  padding-top: 0;
  color: var(--alva);
  font-size: 1.4rem;
  max-width: 40ch;
}

.oferta-cta {
  padding: 1rem 2.1rem;
  font-size: 1.05rem;
}

/* #prova: grade de cases.
   O escalonamento (nth-child(2n) com margin-top) saiu: com moldura de
   dispositivo as duas colunas precisam de linha de base comum, senão a grade
   lê como quebrada em vez de ritmada. */
/* O SEGUNDO PICO DA ROLAGEM.
   #prova é onde a agência para de descrever e mostra. Das seis seções, é a única
   feita de imagem, e estava recebendo o mesmo respiro e o mesmo corpo de título
   das outras cinco — o argumento mais forte da página chegava no mesmo tom de voz
   do resto. Aqui ela ganha o dobro de ar e um título de escala de display, o
   maior da página depois do nome da marca. Só o alinhamento não muda: a coluna
   segue nos mesmos 68rem, senão a quebra lê como defeito e não como ênfase. */
#prova {
  --ritmo-secao: clamp(5.5rem, 11vw, 10rem);
}

#prova .secao-conteudo {
  gap: 4rem;
}

#prova .secao-header h2 {
  font-size: clamp(2.2rem, 6vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem 3rem;
}

.case {
  min-width: 0;
}

.case-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* só a versão <a> (com href) sinaliza clique; o case sem link (Diagnóstico
   Estratégico, sem URL própria pra expor) fica com o mesmo visual, parado */
a.case-link {
  cursor: pointer;
}

/* Moldura de notebook em CSS puro: tampa (barra de janela + tela) e base.
   Referência técnica: browser mockup do Adrien Jarthon (barra de cromo com os
   três pontos em box-shadow) + laptop mockup CSS-only (base em trapézio com
   border-left/right transparentes). Aqui a moldura fica em filete de 1px, que
   é a forma dominante da marca, sem sombra nem brilho. */
.moldura {
  --moldura-linha: color-mix(in srgb, var(--ouro) 26%, transparent);
}

.moldura-tampa {
  border: 1px solid var(--moldura-linha);
  border-radius: 7px 7px 2px 2px;
  background: var(--tinta);
  padding: 0 5px 5px;
  overflow: hidden;
}

/* barra de janela: pontos à esquerda, endereço no meio */
.moldura-barra {
  height: 1.85rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .1rem 0 .55rem;
}

.moldura-pontos {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ouro) 45%, var(--tinta));
  box-shadow:
    10px 0 0 color-mix(in srgb, var(--ouro) 30%, var(--tinta)),
    20px 0 0 color-mix(in srgb, var(--ouro) 18%, var(--tinta));
  margin-right: 20px;
}

/* o endereço era 9,6px: dentro da moldura ele é o texto que diz de qual site é a
   captura, e nesse corpo virava borrão. Subiu pro piso de 12px e a pílula
   cresceu junto pra não apertar a linha. */
.moldura-url {
  flex: 1;
  min-width: 0;
  height: 1.35rem;
  display: flex;
  align-items: center;
  padding: 0 .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--noite) 55%, var(--tinta));
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--papel-2) 68%, var(--tinta));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* filete interno: sem ele, o case de captura escura (Diagnóstico) derretia no
   bezel e a tela sumia */
.case-imagem {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
  background: var(--noite);
  border: 1px solid color-mix(in srgb, var(--ouro) 15%, transparent);
}

.case-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* base do notebook: trapézio puro (height 0 + bordas laterais transparentes),
   levemente mais estreito na parte de baixo */
.moldura-base {
  width: 84%;
  height: 0;
  margin: 0 auto;
  border-top: 9px solid color-mix(in srgb, var(--tinta) 66%, var(--papel-2));
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

/* aproximação sutil da peça, dentro do overflow hidden; movimento fica no gate .anima */
html.anima .case-imagem img {
  transition: transform .6s var(--curva);
}

html.anima .case a.case-link:hover .case-imagem img {
  transform: scale(1.02);
}

html.anima .moldura-tampa {
  transition: border-color .28s var(--curva);
}

.case a.case-link:hover .moldura-tampa,
.case a.case-link:focus-visible .moldura-tampa {
  border-color: color-mix(in srgb, var(--ouro) 60%, transparent);
}

/* convite ao clique: sempre visível, no padrão .rotulo. Só nos cases com link. */
.case-convite {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
}

.case-convite svg {
  flex: none;
}

html.anima .case-convite svg {
  transition: transform .28s var(--curva);
}

.case a.case-link:hover .case-convite svg,
.case a.case-link:focus-visible .case-convite svg {
  transform: translateX(3px);
}

.case a.case-link:hover .case-convite,
.case a.case-link:focus-visible .case-convite {
  color: var(--alva-2);
}

.case h3 {
  font-family: var(--serif);
  font-size: var(--h3-secao);
  font-weight: 600;
  line-height: 1.3;
  color: var(--alva);
  margin: 1.1rem 0 .35rem;
}

.case p {
  color: var(--papel-2);
  line-height: var(--lh-corpo);
  margin: 0;
  overflow-wrap: anywhere;
}

/* #quem-somos */
.divisao {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--papel-2);
  max-width: 62ch;
  margin: 0;
  overflow-wrap: anywhere;
}

.divisao strong {
  color: var(--alva);
  font-weight: 600;
}

.pessoas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.pessoa {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--ouro) 28%, transparent);
  padding-top: 1.5rem;
}

/* foto do fundador: recorte retrato 4:5 do card do IG — desce até o tronco pra
   cabeça não flutuar solta. Canto levemente arredondado e filete dourado fino,
   sem moldura pesada e sem preto e branco. */
.pessoa-foto {
  width: 13rem;
  height: 16.25rem;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ouro) 40%, transparent);
  margin-bottom: 1.1rem;
  display: block;
  /* grade quente mínima: as duas fotos vêm de fontes diferentes e o céu azul de
     uma brigava com a paleta. Não é preto e branco, é meio tom pro âmbar. */
  filter: saturate(.85) sepia(.16);
}

/* dois rótulos mono dourados idênticos em volta do nome se anulavam:
   o cargo recua, o nome manda, a tagline dourada fecha */
.pessoa .rotulo {
  color: color-mix(in srgb, var(--papel-2) 62%, var(--noite));
}

.pessoa h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--alva);
  margin: .2rem 0 0;
}

.pessoa-tagline {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  color: var(--ouro);
  margin: 0 0 .5rem;
}

.pessoa p:last-child {
  color: var(--papel-2);
  line-height: var(--lh-corpo);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Rodapé: volta ao fundo noite */
.rodape {
  background: var(--noite);
  padding: 3rem var(--pad-secao) 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ouro) 20%, transparent);
}

.rodape-conteudo {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
}

.rodape-marca {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--papel-2);
  margin: .9rem 0 0;
}

/* linha única de metadados: antes eram três linhas empilhadas, cada uma menor e
   mais apagada que a anterior, o que lia como rodapé de template */
.rodape-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem .9rem;
  margin: .9rem 0 0;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  /* opacity abaixo de .7 sobre noite derrubava o contraste pra ~2.5:1;
     a cor sai direto do token, sem véu */
  color: color-mix(in srgb, var(--papel-2) 76%, var(--noite));
}

.rodape-meta .separador {
  color: color-mix(in srgb, var(--ouro) 55%, var(--noite));
}

.rodape-link {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--ouro);
  text-decoration: none;
  transition: color .28s var(--curva);
}

.rodape-link:hover {
  color: var(--alva-2);
}

/* Botão flutuante do WhatsApp: só aparece com JS, depois que o hero sai da viewport.
   visibility em vez de display para a transição do gate .anima realmente rodar;
   visibility:hidden também tira do foco de teclado enquanto está escondido.
   A borda escura existe por contraste: --ouro sobre --papel (a seção #contato,
   por onde o botão passa fixo) mede 2,19:1, longe dos 3:1 da WCAG 1.4.11. O anel
   de --noite dá o limite do componente ali e some sobre as seções escuras, onde o
   próprio dourado já mede 7,8:1. */
.wa-flutuante {
  visibility: hidden;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ouro);
  border: 1px solid var(--noite);
  color: var(--noite);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  transition: background .28s var(--curva);
}

.wa-flutuante.visivel {
  visibility: visible;
}

.wa-flutuante:hover {
  background: color-mix(in srgb, var(--ouro) 78%, var(--alva-2));
}

.wa-flutuante:active {
  background: var(--ouro-2);
}

/* reveal por seção: classe .revela aplicada via JS, nunca no HTML.
   Sem .anima (reduced-motion ou sem JS), nada fica oculto.
   Curso longo e curto: .85s de subida em 12px. Antes era .7s em 16px, que lê
   como empurrão; aqui o texto assenta em vez de chegar. Zero overshoot na curva,
   porque quique num site que vende serenidade contradiz a promessa. */
.anima .revela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .85s var(--curva), transform .85s var(--curva);
}

.anima .revela.mostra {
  opacity: 1;
  transform: none;
}

/* A linha é a forma dominante da marca, então o cabeçalho de seção não sobe:
   ele se desenha. O filete de 1px vira um traço que corre da esquerda pra
   direita em 1,1s, o mesmo gesto do hero, e o texto entra atrás dele.
   O border-top do .filete sai enquanto .anima estiver ligado, senão a linha
   estática apareceria por baixo do traço que está sendo desenhado. */
.secao-header {
  position: relative;
}

.anima .secao-header.revela-linha {
  border-top-color: transparent;
}

.anima .secao-header.revela-linha::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ouro) 28%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--curva);
}

.anima #contato .secao-header.revela-linha::before {
  background: color-mix(in srgb, var(--ouro-sobre-claro) 45%, transparent);
}

.anima .secao-header.revela-linha.mostra::before {
  transform: scaleX(1);
}

/* animação da Task 6: só ativa quando html.anima existir.
   Sem scale: o botão é um círculo e círculo que cresce vira balão. Ele desliza
   de baixo pra cima, no mesmo tempo do resto. */
html.anima .wa-flutuante {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s var(--curva), transform .45s var(--curva), background .28s var(--curva);
}

html.anima .wa-flutuante.visivel {
  opacity: 1;
  transform: translateY(0);
}

/* acordeão do FAQ: abria e fechava em corte seco. `interpolate-size` é o que
   permite animar até `auto`; onde o navegador não suporta, o details continua
   abrindo instantâneo, sem quebrar nada. */
@supports (interpolate-size: allow-keywords) {
  html.anima {
    interpolate-size: allow-keywords;
  }

  html.anima .faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height .45s var(--curva), content-visibility .45s allow-discrete;
  }

  html.anima .faq-item[open]::details-content {
    height: auto;
  }
}

/* A navbar não reagia a nada: rolagem de 12.000px com a barra sempre igual.
   Depois que o hero sai, o filete de baixo ganha corpo — é o único sinal de
   que a página andou, e é feito da forma da marca, não de sombra.
   A primeira versão disso não acontecia. O fundo ia de rgb(23,19,13) pra
   rgb(24,20,13), 1 nível em 255, e o filete de 12% pra 34% de --ouro compunha
   rgb(44,35,19) -> rgb(83,68,34), escuro demais pra ler contra a página. Agora
   o fundo fica parado (e sai da transition, que era meio segundo animando
   nada) e o filete vai até 55%, que compõe rgb(120,93,41): a mesma família do
   filete dourado que separa as seções, e do CTA da própria barra. */
.navbar {
  transition: border-bottom-color .5s var(--curva);
}

.navbar.rolou {
  border-bottom-color: color-mix(in srgb, var(--ouro) 55%, transparent);
}

/* estado dos CTA: o dourado já muda no hover, mas o botão não se mexia. 1px de
   subida é o suficiente pra confirmar o alvo sem virar salto. */
html.anima .btn-wa {
  transition: background .28s var(--curva), color .28s var(--curva), border-color .28s var(--curva), transform .28s var(--curva);
}

html.anima .btn-wa:hover {
  transform: translateY(-1px);
}

html.anima .btn-wa:active {
  transform: translateY(0);
}

/* O filete de topo do .estagio e do .pessoa NÃO acende no hover. Chegou a acender,
   copiando o gesto do case, e foi retirado: case é <a> e leva a algum lugar; estes
   seis cartões são <div> e <article> sem destino nenhum. Reagir ao ponteiro promete
   clique onde não há clique, e prometer em falso nos cartões de serviço é pior que
   não ter gesto. O movimento aqui é a entrada por scroll, que não simula link. */

/* Mobile: nav compacta */
@media (max-width: 700px) {
  /* Os três links sumiam aqui e nada entrava no lugar: 12.094px de página, uma
     <nav aria-label="Navegação principal"> sem nenhuma navegação dentro e o
     leitor de tela anunciando uma região vazia. Voltaram em corpo menor, com
     área de toque de 34px e rolagem lateral como rede. */
  /* O gutter da barra era 1rem fixo aqui, contra os 39px de --pad-secao em
     390px: o logo abria em x=16 e todo h2 de seção em x=39, dois começos
     diferentes na mesma tela. O 1rem tinha razão de ser, o conteúdo da barra
     media 358px e não cabia nos 312 que sobram com a calha da página.
     Então o conteúdo é que encolheu (logo 28, corpo .78rem, respiros menores)
     até caber em 312, e o gutter voltou a ser o da página. Nenhum link saiu.
     Abaixo de 390px nem 312 sobra, e aí o clamp cede o gutter em vez de cortar
     "Quem somos": em 360px ele fica em 24px, em 320px no piso de 1rem.
     Medido depois: 390, 412, 430 e 700px batem logo e CTA nos mesmos x dos h2. */
  .navbar {
    gap: .5rem;
    padding-inline: clamp(1rem, calc((100% - 19.5rem) / 2), var(--pad-secao));
  }

  .navbar-logo img {
    width: 28px;
    height: 28px;
  }

  .navbar-links {
    gap: .55rem;
    margin-left: .25rem;
    min-width: 0;
    /* Rede pra tela estreita, e ela acorda de verdade: abaixo de 344px os três
       rótulos pedem 184px e o box cai pra 180 em 340, 160 em 320 (iPhone SE,
       Fold fechado). De 344px pra cima scrollWidth == clientWidth e a regra
       fica dormindo, que é o esperado. */
    overflow-x: auto;
    scrollbar-width: none;
  }

  .navbar-links::-webkit-scrollbar {
    display: none;
  }

  .navbar-links a {
    font-size: .78rem;
    padding-block: .5rem;
    white-space: nowrap;
  }

  .navbar .btn-wa {
    font-size: .78rem;
    padding: .5rem .6rem;
  }

  /* Onde a rede de rolagem acorda mesmo (abaixo de 344px), o corte tem que
     parecer rolagem: "Quem so" cortado seco lê como texto quebrado. A esmaecida
     no fim da faixa é o aviso de que tem mais rótulo pro lado. */
  @media (max-width: 343px) {
    .navbar-links {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }
  }

  /* Aqui havia um .hero-conteudo { width: 100% } pra desfazer o desconto de
     3rem que a regra de cima aplicava. O desconto saiu de lá (min(100%, 68rem)
     agora), então esta regra virava declaração inerte e foi embora junto. */

  /* O botão flutuante cobria os 9px finais de toda linha cheia (medido: círculo
     em x=317-363, coluna de texto até x=326) em toda a rolagem da página. Aqui
     ele é redundante: a navbar é fixa e leva o mesmo CTA no topo da tela o tempo
     inteiro. Reservar uma calha de 3,5rem à direita resolveria a sobreposição
     devolvendo a coluna estreita, então o que sai é o botão, não o texto. */
  .wa-flutuante {
    display: none;
  }

  .wa-longo {
    display: none;
  }

  .wa-curto {
    display: inline;
  }

  /* o tracking largo do mono estourava a linha e deixava órfão
     ("DIGITAL" e "CLAREZA" sozinhos) na largura de celular. O tracking segue
     menor aqui, mas o corpo não: .68rem dava 10,88px, abaixo do piso de 12px. */
  .rotulo {
    letter-spacing: .13em;
    font-size: .75rem;
  }

  .hero-tagline {
    font-size: .75rem;
    letter-spacing: .13em;
  }

  .hero-topo {
    margin-bottom: 1.75rem;
  }

  .hero-local {
    display: none;
  }

  .hero-linha {
    justify-content: flex-start;
  }

  /* A auréola não encolhe pra virar selinho no canto: no celular ela continua
     maior que a tela e o nome continua dentro dela. O que muda é a âncora —
     104vh numa tela alta e estreita jogaria o núcleo pra fora da esquerda, então
     aqui o diâmetro é medido pela largura. */
  .hero-aureola {
    width: min(150vw, 30rem);
    translate: 26% -50%;
  }

  .hero-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    margin-top: 2.25rem;
  }

  /* empilhado, o filete de chamada apontaria pro lado errado (o botão está
     embaixo do texto, não ao lado dele) */
  .hero-acao::before {
    display: none;
  }

  .erro {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .estagios,
  .cases,
  .pessoas {
    grid-template-columns: 1fr;
  }

  .estagios,
  .pessoas {
    gap: 3rem;
  }
}

@media (min-width: 701px) {
  .wa-curto {
    display: none;
  }

  .wa-longo {
    display: inline;
  }
}