/* ============================================================================
   AiRepresenta · Landing page — folha de estilo única
   ----------------------------------------------------------------------------
   Consome os tokens --ar-* de landing/design/tokens.css (Phase 133) e o
   frontmatter de tipografia/espaçamento/cor travado em
   .planning/phases/134-sitebuild-site-est-tico-container/134-UI-SPEC.md.
   Nenhum valor de cor literal aparece neste arquivo — toda cor vem de
   var(--ar-*). tokens.css é sempre carregado ANTES desta folha (ver
   render_head em landing/build_site.py) — se --ar-* não existir aqui é
   porque o <link> de tokens.css não foi incluído na página.

   Nota de seletor (não é gambiarra, é o DOM real): landing/build_site.py
   nunca emite um elemento com a classe literal "section" — cada <section>
   carrega só "section-<slug-do-rótulo>" (ex.: section-hero,
   section-como-funciona). O seletor de atributo [class^="section-"] é o
   que de fato ancora nas seções reais; ".section" entra como alias no
   mesmo bloco de regra só para o caso de um elemento futuro usar a classe
   base literal — nenhum dos dois é redundante.
   ============================================================================ */

:root {
  /* Escala de espaçamento (UI-SPEC § Spacing Scale) — não existe em
     tokens.css porque é local desta folha, não da identidade de marca. */
  --ar-space-xs: 4px;
  --ar-space-sm: 8px;
  --ar-space-md: 16px;
  --ar-space-lg: 24px;
  --ar-space-xl: 32px;
  --ar-space-2xl: 48px;
  --ar-space-3xl: 64px;

  /* Ritmo entre seções da direção 7b (checkpoint de continuação, 134-06):
     "96px de respiro" — não é múltiplo dos tokens acima (que seguem a
     escala de 8pt do UI-SPEC original), é o valor literal que o Reis
     ratificou olhando o mockup do Claude Design. Local desta folha, como
     os demais tokens de espaçamento acima. */
  --ar-space-4xl: 96px;

  /* Largura do CONTÊINER da página — direção 7b é "editorial arejado",
     landscape (widescreen), não "largura de leitura confortável" (o nome
     antigo desta variável, quando ela ainda tinha 46rem/736px, herdado de
     uma filosofia de design anterior a esta direção). UI-SPEC não fixa um
     número literal para isto — escolha de leiaute, não de identidade; não
     é cor.

     Rodada 4 (checkpoint de continuação, 134-06): o Reis reportou "o
     visual não tá landscape e isso compromete" depois de ver o site com
     46rem/736px de largura total de `.page` — o grid comparativo de 2
     colunas (Problema→Solução) e o restante do conteúdo espremiam pra
     ~330px por coluna dentro desse total, ficando com aparência de artigo
     estreito em vez de página larga, mesmo num desktop widescreen. Os dois
     handoffs do Claude Design que o Reis trouxe (`AiRepresenta Home.dc.html`
     e a direção `id="7b"` de `AiRepresenta Landing Layouts.dc.html`) usam
     `max-width: 1080px` no wrapper externo de conteúdo — essa é a
     referência real que ele viu e aprovou, não os 736px que foram ao ar.
     67.5rem = 1080px assumindo a base de 16px do navegador (nem
     `tokens.css` nem este arquivo definem `font-size` em `html`/`:root`,
     então 1rem = 16px aqui — confirmado ao vivo via getComputedStyle
     contra o container rodando: 46rem computou 736px). Título e grid usam
     essa largura cheia; parágrafos de texto corrido continuam com um
     limite de leitura próprio, à parte (ver `[class^="section-"] > p`
     em § 7 Leiaute de página) — não é o mesmo número, de propósito. */
  --ar-content-max: 67.5rem;
}

/* ============================================================================
   1. FONTE AUTO-HOSPEDADA (Task 1) — pesos 400 e 700 apenas.
   ============================================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}

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

/* ============================================================================
   2. BASE / RESET — dimensionamento por herança, quebra de palavra longa,
      nenhuma altura fixa em contêiner de texto.
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ar-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ar-text);
  background: var(--ar-bg);
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ar-accent);
  transition: color .18s ease, border-color .18s ease;
}

a:hover,
a:focus-visible {
  color: var(--ar-accent-bright);
}

/* Direção 7b (checkpoint de continuação, 134-06): hover de link em prosa é
   um sublinhado fino que aparece/intensifica — nunca elevação de card. O
   CTA e o nav-link (ambos já têm seu próprio tratamento de hover abaixo)
   ficam de fora deste sublinhado genérico. */
.page a:not(.cta):not(.nav-link),
.case-block-link a {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.page a:not(.cta):not(.nav-link):hover,
.page a:not(.cta):not(.nav-link):focus-visible,
.case-block-link a:hover,
.case-block-link a:focus-visible {
  border-color: var(--ar-accent-bright);
}

:focus-visible {
  outline: 2px solid var(--ar-accent-bright);
  outline-offset: 2px;
}

ul,
ol {
  padding-left: 1.25em;
}

button {
  font-family: inherit;
}

/* ============================================================================
   3. TIPOGRAFIA — exatamente 4 tamanhos (14/16/24/28), exatamente 2 pesos
      (400/700). O título (h1 do topo + h2 de seção) usa expressão fluida,
      ver § 6 Responsividade.
   ============================================================================ */

/* Rótulo — 14px / 400 / 1.4. `.nav-link` saiu deste grupo compartilhado na
   rodada 8 (reconciliação de tipografia) — ver § 5 Cabeçalho: o link de
   navegação tem tamanho/peso/cor próprios, tirados literalmente do handoff
   do Claude Design (`AiRepresenta Home.dc.html`), diferentes dos 14px/400
   que `.nav-toggle-label`/`.field-help`/`.site-footer` continuam usando
   (nenhum dos três está no escopo desta rodada — rodapé é explicitamente
   "não tocar"; os outros dois não aparecem na tabela de referência). */
.nav-toggle-label,
.field-help,
.site-footer {
  font-size: 14px;
  line-height: 1.4;
}

/* Corpo — 16px / 400 / 1.5 (herdado de body; reafirmado nos campos de
   formulário porque <input>/<textarea> não herdam font-size por padrão). */
.contact-form input,
.contact-form textarea,
.contact-form button {
  font-size: 16px;
  line-height: 1.5;
}

/* Subtítulo — 24px / 700 / 1.25 (h3: título de card/passo). Passos do
   "como funciona" e faixas de preço são h3/p/ul soltos dentro da mesma
   <section> (sem <div> por item — ver nota de seletor no topo do
   arquivo), então a margem superior do h3 É o separador visual entre um
   passo/faixa e o próximo; sem ela o botão de ação de uma faixa encosta
   no título da faixa seguinte (visto na conferência visual da Task 3). */
h3 {
  margin: var(--ar-space-xl) 0 var(--ar-space-sm);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

h3:first-child {
  margin-top: 0;
}

/* Título — 700 / 1.2 (h1 do topo + h2 de seção). Tamanho em expressão
   fluida: máximo 28px (o valor do UI-SPEC), piso 24px — nunca menor que o
   Subtítulo que ele introduz. Não é um 5º tamanho: o topo do clamp É o
   28px declarado; o piso É o 24px do Subtítulo, não um valor novo. Fixo
   em qualquer largura, ao contrário de Corpo/Rótulo (que não escalam).

   Continua sendo a base real para o `<h1>` da 404 (`render_404`, o único
   outro consumidor de `.page-title` além do Hero) e para todo `<h2>` de
   seção normal fora do escopo desta rodada (features.md/sobre.md/precos.md/
   contato.md/case-clbf.md, exceto "O resultado" — ver EYEBROW_ONLY_LABELS
   em build_site.py) — por isso ESTA regra não muda. O Hero (rodada 8,
   reconciliação de tipografia) ganha uma escala própria, maior, só sua,
   via seletor mais específico logo abaixo — nunca alterando este piso
   compartilhado, que a 404 e as páginas fora de escopo ainda dependem. */
.page-title,
[class^="section-"] > h2,
.section > h2 {
  font-size: clamp(1.5rem, 5vw + 1rem, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--ar-space-md);
  color: var(--ar-text);
}

/* Manchete do Hero (rodada 8) — 54px/600/1.05/-0.035em, tirada literalmente
   do handoff do Claude Design (`AiRepresenta Home.dc.html`, `<h1>`). Mais
   específica que `.page-title` sozinho (`.section-hero > .page-title`
   vence por especificidade, sem `!important`) — só o `<h1>` dentro do Hero
   ganha essa escala; a 404 (`.page-404 .page-title`) continua no clamp
   24-28px acima, sem mudança. Cor já batia (`--ar-text`, herdada da regra
   base) — só tamanho/peso/entrelinha/rastreio precisavam de ajuste. */
.section-hero > .page-title {
  font-size: 54px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* Subtítulo do Hero (rodada 8) — o único `<p>` solto do Hero que não é o
   `.cta-wrap` (o parágrafo-CTA). Referência: 18px/1.65/muted — divergia em
   TODAS as três frentes do que o corpo genérico (16px/1.5/`--ar-text`
   herdado de `body`) produzia; o subtítulo do Hero nunca teve regra própria
   antes desta rodada. `:not(.cta-wrap)` é o mesmo idioma já usado em § 2
   para o sublinhado de link em prosa — aqui evita que esta regra alcance o
   parágrafo do botão de ação. */
.section-hero > p:not(.cta-wrap) {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ar-text-muted);
}

/* Hero centralizado (redesign pós-135, direção "tour de produto") —
   substitui o hero esquerdo-alinhado da direção 7b. Título/subtítulo/CTA
   ficam num eixo central; o print abaixo do dobra é a peça dominante,
   por isso ganha seu próprio limite de largura em vez da largura cheia de
   1080px que a regra genérica de imagem usava. */
.section-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-hero > .page-title,
.section-hero > p:not(.cta-wrap) {
  max-width: 46rem;
}

.section-hero > .page-title::before {
  margin-left: auto;
  margin-right: auto;
}

.section-hero .cta-wrap {
  display: flex;
  justify-content: center;
}

.section-hero .shot {
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ============================================================================
   4. COR — proporção do UI-SPEC. --ar-accent só em: preenchimento do CTA,
      prefixo "Ai" do wordmark, cor de link/estado ativo/foco. Nunca fundo
      de área grande, nunca texto corrido, nunca fundo de card.
   ============================================================================ */
body {
  background: var(--ar-bg);
}

.site-header,
.site-footer,
.contact-form input,
.contact-form textarea {
  background: var(--ar-surface);
}

.site-header,
.contact-form input,
.contact-form textarea,
.shot-img {
  border: 1px solid var(--ar-border);
}

.field-help {
  color: var(--ar-text-muted);
}

/* ============================================================================
   5. CABEÇALHO — marca à esquerda, navegação à direita.
   ============================================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ar-space-md);
  padding: var(--ar-space-md) var(--ar-space-xl);
  border-left: none;
  border-right: none;
  border-top: none;
  /* Nav fixa no topo — redesign pós-135 (2026-08-25): Reis reprovou a
     direção 7b inteira em produção ("temos que refazer"); reescolheu entre
     3 mockups de layout novos no canvas do Claude Design a direção "tour de
     produto" (hero centralizado, nav fixa, passos em zigue-zague). Fundo já
     vem de --ar-surface (§4 acima); só a fixação é nova aqui. */
  position: sticky;
  top: 0;
  z-index: 50;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--ar-space-xs);
  text-decoration: none;
  flex-shrink: 0;
}

.wordmark-icon {
  display: block;
  width: 40px;
  height: 40px;
}

/* 28px / 500 (rodada 8) -- não os 24px/400 anteriores. O handoff do Claude
   Design usa font-weight: 500 pro restante do nome ("Representa"), 700 só
   pro prefixo "Ai" (`.wordmark-ai`, abaixo, já correto desde antes). */
.wordmark-text {
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--ar-wordmark-base);
}

.wordmark-ai {
  color: var(--ar-wordmark-accent);
  font-weight: 700;
}

/* Acionador do menu (escondido acima do breakpoint — ver § 6). */
.nav-toggle {
  /* Nunca display:none / visibility:hidden aqui: a caixa de seleção
     precisa continuar no fluxo de foco em qualquer largura. Escondida
     visualmente pela técnica clássica de "visually hidden". */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-toggle-label {
  display: none; /* só aparece <640px, ver § 6 */
  align-items: center;
  justify-content: center;
  gap: var(--ar-space-xs);
  cursor: pointer;
  color: var(--ar-text);
  border-radius: 6px;
}

.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 2px solid var(--ar-accent-bright);
  outline-offset: 2px;
}

.nav-toggle-bars {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--ar-text);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ar-text);
}

.nav-toggle-bars::before {
  top: -7px;
}

.nav-toggle-bars::after {
  top: 7px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ar-space-lg);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--ar-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 13px / 500 / muted (rodada 8) -- não os 14px/400/`--ar-text` (bright)
   anteriores. No handoff, o link de navegação é discreto por padrão
   (`#ADA294`) e só clareia pra `#F6F1E7` (`--ar-text`, não âmbar) no hover
   -- o sublinhado âmbar embaixo é o único elemento que vira acento; o
   TEXTO do hover nunca vira `--ar-accent-bright`, ao contrário do que a
   regra genérica de hover produzia antes. `.nav-link.is-active` (abaixo)
   continua com o próprio tratamento em âmbar -- não afetado por esta
   rodada, fora do escopo da tabela de referência (o mockup estático não
   modela estado de página ativa). */
.nav-link {
  display: inline-block;
  padding: var(--ar-space-xs) 0;
  color: var(--ar-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--ar-text);
  border-bottom-color: var(--ar-accent);
}

.nav-link.is-active {
  color: var(--ar-accent);
  border-bottom-color: var(--ar-accent);
}

/* ============================================================================
   6. BOTÃO DE AÇÃO — único elemento com fundo em --ar-accent.
   ============================================================================ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--ar-space-sm) var(--ar-space-lg);
  background: var(--ar-accent);
  color: var(--ar-on-accent);
  /* Peso 600, não 700 (rodada 8) -- os TRÊS botões do handoff (cabeçalho,
     hero, fechamento) usam font-weight: 600. O tamanho-base fica em 15px
     (o valor do hero/fechamento) -- `.cta-nav`, logo abaixo, é o único que
     diverge (13px, menor, o botão do cabeçalho). */
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  border: none;
  /* Pílula (999px), não os 8px anteriores -- rodada 7: TODO botão de ação
     no handoff do Claude Design (`AiRepresenta Home.dc.html`) usa
     border-radius: 999px, sem exceção (CTA do cabeçalho, do hero, do
     fechamento) -- os 8px eram resíduo de uma direção de cantos
     ligeiramente arredondados que nunca foi a referência que o Reis
     ratificou. */
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease;
}

.cta:hover,
.cta:focus-visible {
  background: var(--ar-accent-bright);
  color: var(--ar-on-accent);
}

/* Botão do cabeçalho (rodada 8) -- único dos três que é menor (13px) no
   handoff; hero e fechamento ficam no 15px base de `.cta` acima. */
.cta-nav {
  font-size: 13px;
}

.cta-wrap {
  margin: var(--ar-space-md) 0 0;
}

/* ============================================================================
   7. LEIAUTE DE PÁGINA — contêiner landscape (direção 7b, rodada 4),
      centralizado; texto corrido mantém seu próprio limite de leitura à
      parte (ver `[class^="section-"] > p` logo abaixo).
   ============================================================================ */
.page {
  max-width: var(--ar-content-max);
  margin: 0 auto;
  padding: 0 var(--ar-space-lg);
}

[class^="section-"],
.section {
  padding-top: var(--ar-space-xl);
  padding-bottom: var(--ar-space-xl);
}

/* Direção 7b (checkpoint de continuação, 134-06) — "editorial arejado":
   quase nenhuma borda de card; seções separadas por respiro (96px), não
   por um filete cinza. A régua âmbar que marca o início de cada seção
   (abaixo) já cumpre o papel visual que o antigo `border-top` cinza
   cumpria, sem introduzir uma segunda linha divisória. */
[class^="section-"] + [class^="section-"] {
  margin-top: var(--ar-space-4xl);
}

.page > [class^="section-"]:first-child,
.section-hero {
  padding-top: var(--ar-space-3xl);
  padding-bottom: var(--ar-space-3xl);
  margin-top: 0;
}

/* Limite de leitura confortável (rodada 4, checkpoint de continuação
   134-06) — separado de `--ar-content-max` de propósito. `.page` ficou
   landscape (67.5rem/1080px) para título e grid usarem a largura cheia,
   mas uma linha de texto corrido de ~1030px é longa demais pra ler bem
   (a medida clássica é ~60-75 caracteres, que 38rem/608px cobre a essa
   tipografia). Alvo: SÓ o parágrafo/lista que fica solto na largura cheia
   da seção — nunca o que já vive dentro de uma coluna mais estreita:

   - `[class^="section-"] > p` / `> ul` usa combinador de FILHO DIRETO de
     propósito. Qualquer parágrafo que viva um nível mais fundo dentro de
     uma coluna/grade já mais estreita que a seção inteira (rodada 7:
     `.resultado-lead p`/`.resultado-item p`, dentro de `.section-o-resultado`
     ou `.case-block`) nunca é alcançado por esta regra — evita o "limite
     dobrado em cima de coluna que já é mais estreita" que a rodada 4
     explicitamente instruiu não introduzir. `.resultado-lead` tem seu
     próprio `max-width` (§ 7), mais largo que 38rem, porque é um único
     bloco de destaque, não uma coluna de grade.
   - `.case-block > p` cobre os parágrafos de FECHAMENTO do teaser do case
     na Home (`<aside class="case-block">`, fora de `[class^="section-"]`,
     ex.: "É isso que a CLBF vive...") — os itens em si (rodada 7) não são
     mais `<p>` filho direto (viraram `.resultado-lead`/`.resultado-grid`),
     mas o texto de fechamento que sobra depois deles continua sendo, e sem
     esta regra ele ficaria esticado na largura cheia da Home mesmo com a
     página própria do case (`.section-o-resultado`, coberta pelo seletor
     genérico acima) já limitada.

   Imagem/tela (`.shot-img`) e grid continuam de fora — usam a largura
   cheia do container, por decisão explícita desta rodada (só o texto
   corrido precisa do limite de leitura, não a página inteira).

   Justificado (rodada 10, checkpoint de continuação 134-06) — o Reis
   relatou "os textos não justificados, a desorganização visual": o
   texto corrido do site usa alinhamento padrão à esquerda (borda direita
   irregular), o que ele lê como bagunçado. `text-align: justify` neste
   MESMO seletor compartilhado (não um seletor novo) cobre Problema, "Um
   sistema...", "Como funciona"/"O resultado" (fechamento) e o corpo de
   preços/FAQ — todo `<p>` filho direto de seção já coberto pelo limite de
   leitura acima. `hyphens: auto` (+ `-webkit-hyphens`/`-ms-hyphens` para
   navegadores mais antigos) reduz o espaçamento esticado entre palavras
   que `justify` produz em colunas estreitas — o HTML já declara
   `lang="pt-BR"` (`build_site.py`), então o dicionário de hifenização
   certo é usado onde o navegador suporta. `text-align-last` NÃO é tocado
   (fica no padrão `auto`/esquerda) — só a ÚLTIMA linha de cada parágrafo
   continuando à esquerda é o que evita o efeito feio de "última linha
   esticada" que `justify` sozinho causaria se a última linha também fosse
   forçada a preencher a largura total.

   `<ul>` DELIBERADAMENTE de fora do justify (achado na verificação visual
   desta rodada, 375px): as listas de recursos de cada faixa de preço têm
   item curto + emoji-prefixo, e quando um item específico quebra em 2
   linhas (ex.: "Várias marcas representadas na / mesma operação" na faixa
   Profissional, em 375px) a primeira linha tem poucas palavras pra
   preencher a largura -- o mesmo efeito feio de espaçamento excessivo
   encontrado em "Segurança e confiança" (ver exclusão own logo abaixo, §
   7 mais adiante), só que em lista de bullet em vez de linha com fio
   divisor. Justify é convenção de PROSA corrida, não de item de lista --
   por isso a exclusão aqui é estrutural (todo `<ul>`), não caso a caso. O
   `max-width: 38rem` continua valendo pras duas tags (não mudou). */
[class^="section-"] > p,
.case-block > p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

[class^="section-"] > p,
[class^="section-"] > ul,
.case-block > p {
  max-width: 38rem;
}

/* "Problema" e "O sistema" (rodada 9, checkpoint de continuação 134-06):
   removido o cap de leitura de 38rem herdado da regra genérica acima para
   ESTAS DUAS seções especificamente. O Reis relatou, olhando o site num
   desktop largo, que essas duas seções "parece dividido em colunas, uma
   vazia" -- o parágrafo ficava preso em 38rem/608px dentro de um
   `.page`/1080px, sobrando ~400px de vazio à direita, bem ao lado de
   seções vizinhas ("Como funciona"/grade numerada, "O resultado"/grade)
   que já usam a largura cheia do container por não serem `<p>` filho
   direto (são `<div>` de grade — ver § 6/7). Ele priorizou explicitamente
   "sem vão vazio" sobre a convenção de medida de leitura confortável aqui
   -- mesma decisão já tomada para `.page` inteiro na rodada 4 (ver nota em
   `--ar-content-max` no topo do arquivo). `max-width: none` (não um valor
   intermediário) porque a queixa era especificamente sobre a comparação
   visual direta com as seções vizinhas de largura cheia -- um cap
   intermediário teria deixado a mesma assimetria, só menor. Regra
   posicionada DEPOIS da genérica `[class^="section-"] > p` (mesma
   especificidade -- 0,1,1 nas duas -- então a ordem no arquivo decide) e
   escopada só a estas duas classes: nenhuma outra seção (features/sobre/
   preços/contato/case) muda de largura por esta regra. */
.section-problema > p,
.section-o-sistema > p {
  max-width: none;
}

/* Print cheio de largura (Hero, rodada 7) -- a mesma `1_cockpit.png` já
   usada no item 01 de "Como funciona", reaproveitada aqui em tamanho
   maior, do jeito que o handoff do Claude Design faz -- NÃO precisa de
   exceção nesta regra: `_unwrap_standalone_image_paragraph` em
   build_site.py já remove o `<p>` em volta de um parágrafo-imagem solto
   antes de gravar o HTML (bug real de HTML inválido achado nesta rodada --
   `<figure>` não é "phrasing content", o navegador fechava o `<p>` sozinho
   e a imagem acabava como sibling solto de qualquer jeito). Sem `<p>`
   ao redor, a `<figure class="shot">` nunca é alcançada por este seletor
   (que mira só `> p`/`> ul`) -- usa a largura cheia do container por
   construção, não por exceção de CSS. */

/* Régua âmbar de 56x3px + respiro abaixo dela, marcando o início de toda
   seção titulada com <h2> padrão (h1 do hero, h2 de seção) — direção 7b.
   "Chamada para ação" não tem h2 visível (NON_RENDERED_LABELS em
   build_site.py) e ganha seu próprio tratamento mais abaixo (filete
   grosso). Quando o h2 vem logo depois de um `.eyebrow` (rodada 7 — "O
   sistema", ver bloco de Eyebrow abaixo), a régua some — o tick do próprio
   eyebrow já cumpre esse papel, duas réguas empilhadas seria redundante. */
.page-title::before,
[class^="section-"] > h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--ar-accent);
  margin-bottom: var(--ar-space-md);
}

.eyebrow + h2::before {
  content: none;
}

/* "Problema" (rodada 7): tick pequeno (32x2px) SEM rótulo — nem eyebrow
   monospace, nem <h2> (NON_RENDERED_LABELS) — igual ao handoff, que marca
   essa seção só com um traço fino, mais discreto que a régua de título
   normal. Substitui o antigo `.section-problema-solucao::before`, que
   media 56x3 e cobria o par inteiro "Problema → Solução" antes de a
   rodada 7 separar as duas seções. */
.section-problema::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--ar-accent);
  margin-bottom: var(--ar-space-md);
}

/* Escala tipográfica editorial de "Problema" (rodada 7, tirada
   literalmente do handoff): primeiro parágrafo maior/mais claro que o
   resto (21px/--ar-text vs 17px/--ar-text-muted) — hierarquia dentro do
   próprio texto corrido, não entre títulos. Seletor de filho direto,
   escopado só a esta seção — não altera a tipografia genérica de <p> em
   nenhum outro lugar do site. */
.section-problema > p:first-of-type {
  font-size: 21px;
  line-height: 1.6;
  color: var(--ar-text);
}

.section-problema > p:not(:first-of-type) {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ar-text-muted);
}

/* "O sistema" (rodada 7): mesmo princípio de primeiro-parágrafo-maior
   (18px/--ar-text vs 17px/--ar-text-muted) + <h2> de 38px -- maior que o
   clamp genérico de título de seção (§ 3, 24-28px) porque esta é a
   manchete grande da seção "O sistema" (a Manchete da sintaxe "Eyebrow ::
   Manchete", ver split_sections em build_site.py), não um rótulo de seção
   compacto igual ao resto do site. */
.section-o-sistema > h2 {
  font-size: 38px;
  line-height: 1.15;
  /* Peso 600 (não os 700 herdados da regra genérica de título, § 3) +
     rastreio -0.03em -- os dois faltavam desde a rodada 7, achados na
     reconciliação de tipografia da rodada 8 (a regra só tinha corrigido
     tamanho/entrelinha até então). */
  font-weight: 600;
  letter-spacing: -0.03em;
}

.section-o-sistema > p:first-of-type {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ar-text);
}

.section-o-sistema > p:not(:first-of-type) {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ar-text-muted);
}

/* Faixa âmbar de largura total (redesign pós-135, direção "tour de
   produto") -- substitui o filete grosso da direção 7b por um bloco de
   fundo cheio, a única área grande em --ar-accent do site (exceção
   deliberada à regra geral de §4 "nunca fundo de área grande" -- é
   exatamente o tratamento do mockup que o Reis escolheu pro fechamento).
   `calc(50% - 50vw)` estoura a largura de `.page` (que tem max-width +
   margin:auto) até a borda real da viewport; o padding compensa de volta
   pro mesmo respiro lateral que o resto do container usa. */
.section-chamada-para-acao {
  background: var(--ar-accent);
  border-top: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--ar-space-3xl);
  padding-bottom: var(--ar-space-3xl);
  padding-left: calc(50vw - 50% + var(--ar-space-lg));
  padding-right: calc(50vw - 50% + var(--ar-space-lg));
  text-align: center;
}

/* Manchete da chamada final (rodada 8) -- 36px/1.2/600/bright, tirada
   literalmente do handoff. `:not(.cta-wrap)` exclui o parágrafo do botão
   (que vira `<p class="cta-wrap">` quando o texto é só o CTA em negrito,
   ver `_render_paragraph`) -- sem essa exclusão, o texto do próprio botão
   "Solicitar demonstração" também ficaria em 36px. Aplica-se às 4 páginas
   que compartilham esta classe de seção (Home, features, sobre, case) --
   mesmo padrão já usado pela borda de 3px acima (rodada 7), que também é
   compartilhada; só a Home teve o Markdown reestruturado nesta rodada
   (heading próprio + botão separado, ver home.md), as outras 3 continuam
   com o parágrafo único (texto + link em negrito inline) que já existia --
   ainda assim herdam a escala maior, sem precisar de mudança de conteúdo. */
.section-chamada-para-acao > p:not(.cta-wrap) {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 600;
  /* --ar-on-accent (não --ar-text) -- o fundo da seção virou --ar-accent
     no redesign pós-135 acima; o texto escuro é o par de contraste já
     medido/travado em check-contrast.mjs (8.51:1) pro mesmo par cor-sobre-
     acento usado no botão em todo o resto do site. */
  color: var(--ar-on-accent);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Botão dentro da faixa âmbar precisa inverter (fundo âmbar sobre fundo
   âmbar seria invisível) -- mesmo par --ar-on-accent/--ar-accent-bright já
   usado em qualquer outro texto sobre acento no site. */
.section-chamada-para-acao .cta {
  background: var(--ar-on-accent);
  color: var(--ar-accent-bright);
}

.section-chamada-para-acao .cta:hover,
.section-chamada-para-acao .cta:focus-visible {
  background: var(--ar-ink-900);
  color: var(--ar-accent-bright);
}

/* features.md/sobre.md/case-clbf.md fecham "Chamada para ação" com o CTA
   como link inline dentro do parágrafo corrido ("Quer ver...? **[Solicitar
   demonstração](/contato)**"), não como heading+botão separado igual à
   Home -- `_CTA_PARAGRAPH_RE` só vira `.cta` quando o parágrafo INTEIRO é
   o link, então nestes 3 casos o texto continua um `<a>` comum. Sem esta
   regra ele herdaria a cor de link padrão (`--ar-accent`, mesmo âmbar do
   fundo da faixa agora) -- ilegível sobre o próprio fundo. */
.section-chamada-para-acao a {
  color: var(--ar-on-accent);
  text-decoration: underline;
}

.section-chamada-para-acao a:hover,
.section-chamada-para-acao a:focus-visible {
  color: var(--ar-ink-900);
}

/* Eyebrow (tick fino + rótulo monospace maiúsculo) — rodada 7, tirado
   literalmente do handoff do Claude Design (`AiRepresenta Home.dc.html`).
   Emitido por `render_eyebrow`/`render_section`/`render_case_block` em
   build_site.py, de duas formas: (a) sozinho, como o próprio título
   visível da seção ("Como funciona", "O resultado" —
   EYEBROW_ONLY_LABELS); (b) seguido de um <h2> grande, quando a seção
   precisa de uma manchete maior que o rótulo estrutural ("O sistema",
   acima). Tick de 32x2px — mais fino que a régua de 56x3px do <h2>
   padrão, mesma medida do tick de "Problema" acima (o mesmo vocabulário
   visual, com ou sem o rótulo de texto ao lado). */
.eyebrow {
  display: flex;
  align-items: center;
  /* 14px literal (rodada 8) -- não é nenhum dos tokens da escala de
     espaçamento (sm=8px, md=16px); é o valor exato do handoff do Claude
     Design (`gap: 14px` entre o tick e o rótulo monospace), o mesmo tipo
     de exceção já documentada em `--ar-space-4xl` (§ raiz, acima). */
  gap: 14px;
  margin-bottom: var(--ar-space-md);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--ar-accent);
  flex-shrink: 0;
}

.eyebrow-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ar-text-muted);
}

/* "O resultado" (rodada 7): item de destaque (borda âmbar à esquerda,
   título maior) + grade 2x2 dos demais (borda cinza à esquerda que acende
   âmbar no hover) — marcado por `_wrap_resultado_items` em build_site.py.
   Usado nos dois pontos onde a seção é renderizada — página própria do
   case e o teaser injetado na Home (`.case-block`) — porque os dois
   chamam `render_block` sobre o MESMO corpo de Markdown. Nenhum
   placeholder de gráfico é emitido (deliberado, ver docstring de
   `_wrap_resultado_items` e SUMMARY.md rodada 7 — sem gráfico real, não
   fabricamos uma caixa decorativa vazia). */
.resultado-lead {
  display: flex;
  flex-direction: column;
  gap: var(--ar-space-sm);
  padding-left: var(--ar-space-lg);
  border-left: 2px solid var(--ar-accent);
  max-width: 42rem;
  margin-bottom: var(--ar-space-xl);
}

.resultado-lead-title {
  font-size: 26px;
  /* 600, não 700 (rodada 8) -- o handoff usa font-weight: 600 no item de
     destaque, achado na reconciliação de tipografia (a rodada 7 já tinha
     acertado tamanho/rastreio/cor, só o peso ficou por corrigir). */
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ar-text);
}

.resultado-lead p {
  margin: 0;
  /* 17px/1.7 (rodada 8) -- faltava desde a rodada 7 (só a cor muted já
     estava certa; tamanho/entrelinha caíam no corpo genérico de 16px/1.5). */
  font-size: 17px;
  line-height: 1.7;
  color: var(--ar-text-muted);
  /* Justificado (rodada 10) -- item de destaque de "O resultado" é o
     mesmo tipo de texto corrido do seletor compartilhado de § 7, só que
     aninhado dentro de `.resultado-lead` (não filho direto de seção), por
     isso não herda a regra `[class^="section-"] > p` de lá -- precisa da
     própria declaração aqui. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Parágrafos de fechamento de "O resultado" (rodada 8) -- os que sobram
   DEPOIS do lead+grade (`_wrap_resultado_items` só consome o que bate a
   forma negrito+descrição; texto de fechamento comum passa direto). 19px/
   1.6/bright, tirado literalmente do handoff -- mesmo tratamento visual do
   parágrafo de fechamento de "Como funciona" (`.section-como-funciona > p`,
   abaixo). Dois seletores porque a MESMA seção "O resultado" é renderizada
   em dois pontos que nunca podem divergir visualmente: a página própria do
   case (`<section class="section-o-resultado">`) e o teaser injetado na
   Home (`<aside class="case-block">`, fora de `[class^="section-"]`, por
   isso precisa do seletor próprio em vez de herdar do genérico). */
.section-o-resultado > p,
.case-block > p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ar-text);
}

/* Tira/faixa (redesign pós-135, direção "tour de produto") — substitui a
   grade 2x2 da direção 7b por uma faixa horizontal com divisórias, mais
   perto do "ticker de estatística" do mockup escolhido. `_wrap_resultado_items`
   (build_site.py) não muda — continua extraindo o mesmo lead+itens do
   Markdown de `case-clbf.md`; só a apresentação em CSS muda. */
.resultado-grid {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ar-border);
  border-radius: 12px;
  overflow: hidden;
}

.resultado-item {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: var(--ar-space-sm);
  padding: var(--ar-space-lg);
  border-left: 1px solid var(--ar-border);
  border-top: none;
  transition: background-color .2s ease;
}

.resultado-item:first-child {
  border-left: none;
}

.resultado-item:hover {
  background: var(--ar-surface);
}

.resultado-item-title {
  font-size: 20px;
  /* 600, não 700 (rodada 8) -- mesma correção do item de destaque acima. */
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ar-text);
}

.resultado-item p {
  margin: 0;
  /* 16px/1.7 (rodada 8) -- tamanho já batia por herança do corpo genérico,
     mas a entrelinha (1.5 herdada) precisava de 1.7 -- deixado explícito
     nos dois pra não depender de herança silenciosa. */
  font-size: 16px;
  line-height: 1.7;
  color: var(--ar-text-muted);
  /* Justificado (rodada 10) -- mesma razão do `.resultado-lead p` acima:
     item da grade 2x2 de "O resultado", texto corrido aninhado, fora do
     alcance do seletor compartilhado de § 7. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Grade numerada de 3 colunas (numeral | título+descrição | print) — direção
   7b, rodada 6 do checkpoint de continuação (134-06). Copiada literalmente
   da estrutura do handoff do Claude Design (`AiRepresenta Home.dc.html`,
   seção "O que você vê, todos os dias"): antes desta rodada "Como funciona"
   renderizava como bloco genérico empilhado (negrito + parágrafo + imagem em
   largura cheia, sem grade nem numeral) — bug real de implementação achado
   pelo Reis comparando a tela ao vivo contra a referência que ele trouxe,
   não um problema de cache/largura (esses já tinham sido corrigidos nas
   rodadas 4/5). Marcada por `_wrap_numbered_steps` em build_site.py, que só
   dispara na forma exata "parágrafo com lead-in em negrito seguido de
   parágrafo-imagem" — hoje só "Como funciona" tem essa forma (só home.md usa
   sintaxe de imagem, confirmado por grep nos 6 arquivos de conteúdo). */
.steps {
  margin: var(--ar-space-lg) 0;
}

/* Zigue-zague 2 colunas (redesign pós-135, direção "tour de produto") —
   substitui a grade de 3 colunas (numeral | corpo | print) da direção 7b,
   que o Reis reprovou junto com o resto do layout. `_wrap_numbered_steps`
   (build_site.py) agora emite só 2 filhos por `.step` (`.step-media`,
   `.step-body`, o numeral migrou pra dentro do corpo) — a alternância
   esquerda/direita é só CSS, via `grid-template-areas` invertido em
   `:nth-of-type(even)`, sem o Python precisar saber a paridade do passo. */
.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media body";
  gap: var(--ar-space-2xl);
  align-items: center;
  padding: var(--ar-space-xl) 0;
}

.step:nth-of-type(even) {
  grid-template-areas: "body media";
}

.step-media {
  grid-area: media;
}

.step-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--ar-space-sm);
}

/* Numeral vira selo circular pequeno (era numeral gigante decorativo na
   direção 7b) — a hierarquia visual do passo agora vem do print grande ao
   lado, não do numeral. */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ar-accent);
  color: var(--ar-on-accent);
  font-size: 14px;
  font-weight: 700;
}

/* 22px/600 (rodada 8) -- não os 24px/700 herdados da regra genérica de h3
   (§ 3), que nunca tinha sido escopada pra este contexto até agora. */
.step-body h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* 16px/1.65/muted (rodada 8) -- o tamanho já batia por herança do corpo
   genérico, mas a cor (herdada de `--ar-text`, bright) e a entrelinha (1.5
   herdada) estavam erradas -- o handoff usa `#ADA294`/1.65 pra descrição de
   cada passo. */
.step-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ar-text-muted);
}

/* A imagem já ganha respiro do `padding` da linha (`.step`) — a margem
   vertical padrão de `.shot` (§ 8 Imagens de tela) duplicaria esse respiro
   dentro da própria célula da grade. */
.step-media .shot {
  margin: 0;
}

/* Parágrafo de fechamento de "Como funciona" (rodada 8) -- "É isso que a
   CLBF usa, todos os dias..." é o único `<p>` filho direto de
   `.section-como-funciona` (`.steps` virou `<div>`, não `<p>`, então este
   seletor nunca alcança a grade em si). 19px/1.6/bright, tirado
   literalmente do handoff -- mesmo tratamento do fechamento equivalente de
   "O resultado" (`.section-o-resultado > p`/`.case-block > p`, § 7 acima). */
.section-como-funciona > p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ar-text);
}

@media (max-width: 640px) {
  /* Mesmo breakpoint único de 640px do resto da folha (§ 12): zigue-zague
     colapsa pra 1 coluna, sempre print-depois-corpo — a área nomeada
     precisa ser reafirmada aqui porque `:nth-of-type(even)` (acima) já
     inverteu a ordem em telas largas; sem repetir a área, passo par ficaria
     com o corpo antes do print também no celular. */
  .step,
  .step:nth-of-type(even) {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body";
    gap: var(--ar-space-md);
  }
}

/* Respiro editorial entre itens de lista (direção 7b) — as listas de
   recursos de cada faixa de preço ganham um pouco mais de ar entre uma
   linha e a próxima do que o `<ul>` padrão do navegador. ("Segurança e
   confiança" NÃO é mais uma dessas listas desde a rodada 7 — ver abaixo.) */
[class^="section-"] ul > li + li {
  margin-top: var(--ar-space-sm);
}

/* "Segurança e confiança" (rodada 7): CONVERTIDA de lista com bullet/emoji
   (rodada 3) para linhas com fio divisor -- terceiro padrão distinto,
   tirado literalmente do handoff do Claude Design (seção "Seus dados,
   protegidos"): nem prosa corrida, nem `<ul><li>`, e sim um `<p>` por
   afirmação, cada um com `border-top` fino, sem ícone/bullet/emoji nenhum.
   Tom mudo por padrão, clareia no hover -- o mesmo princípio "cor muda,
   nunca elevação" já estabelecido no resto da direção 7b. */
/* Grade de cartões (redesign pós-135, direção "tour de produto") --
   substitui a lista empilhada com fio divisor da direção 7b por uma grade
   responsiva mais densa, mais perto da "faixa de confiança" do mockup
   escolhido. Cartão em vez de pílula porque o texto real de cada
   afirmação (home.md) é frase completa, não rótulo curto -- pílula
   comprimiria mal; cartão acomoda a frase inteira sem quebrar a
   convenção "nunca reescrever copy aprovado" (CLAUDE.md). */
.section-seguranca-e-confianca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ar-space-lg);
}

.section-seguranca-e-confianca > h2 {
  grid-column: 1 / -1;
}

.section-seguranca-e-confianca > p {
  margin: 0;
  padding: var(--ar-space-lg);
  border: 1px solid var(--ar-border);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ar-text-muted);
  text-align: left;
  transition: border-color .18s ease, color .18s ease;
}

.section-seguranca-e-confianca > p:hover {
  color: var(--ar-text);
  border-color: var(--ar-accent);
}

/* ============================================================================
   8. IMAGENS DE TELA (screenshots do produto)
   ============================================================================ */
.shot {
  margin: var(--ar-space-lg) 0;
}

.shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ============================================================================
   9. CASE-BLOCK — prova destacada. Direção 7b (checkpoint de continuação,
      134-06): "quase nenhuma borda de card" — a caixa fechada (borda
      inteira + fundo de superfície + raio) do desenho original virou, na
      rodada 2, um filete âmbar à esquerda do bloco inteiro. Na rodada 7,
      esse filete saiu daqui: a estrutura "O resultado" (§ 7 acima,
      `.resultado-lead`) já carrega o próprio filete âmbar no item de
      destaque — mantê-lo TAMBÉM aqui produzia uma borda dupla aninhada que
      não existe na referência (o filete do handoff é um só, no item, não
      um card envolvendo o item). `.case-block` vira wrapper neutro, só com
      o respiro entre seções.
   ============================================================================ */
.case-block {
  margin: var(--ar-space-2xl) 0;
}

.case-block-link {
  margin: var(--ar-space-md) 0 0;
}

/* "Ler o case completo" (rodada 8) -- o handoff mostra este link MUDO por
   padrão (`#ADA294`, não âmbar), só clareando pra `#FFC163` no hover -- o
   oposto do que a cor genérica de link (`a { color: var(--ar-accent) }`,
   § 2) produzia. Peso/tamanho também divergiam (700/16px herdado vs
   600/15px do handoff). Especificidade igual à regra genérica de hover
   (`a:hover`, § 2) obriga a declarar o hover aqui também -- sem isso, a
   ordem de cascata (esta regra vem depois no arquivo) faria o hover
   IGNORAR a cor âmbar esperada e ficar preso no muted. */
.case-block-link a {
  color: var(--ar-text-muted);
  font-size: 15px;
  font-weight: 600;
}

.case-block-link a:hover,
.case-block-link a:focus-visible {
  color: var(--ar-accent-bright);
}

/* Numerais em destaque (direção 7b): as figuras da nova estatística de
   fechamento (6 dias / 4 horas / −94% / 12 representadas) ganham peso e
   cor âmbar via `<strong>` — sem precisar de uma extensão nova de
   render_block, porque o parágrafo já emite `<strong>` para o texto em
   negrito do Markdown (checkpoint de continuação, 134-06). Aplica-se tanto
   ao `.case-block` (teaser da Home) quanto à seção "O resultado" da
   página própria do case — mesma origem de Markdown, mesmo tratamento. */
.case-block strong,
.section-o-resultado strong {
  color: var(--ar-accent);
  font-size: 1.3em;
}

/* ============================================================================
   10. FORMULÁRIO DE CONTATO — campos em coluna.

   Nota de conferência visual (Task 3, capturas em 1280/375): a leitura
   literal da tabela do UI-SPEC ("sm = gap entre campos", "lg = rótulo
   para o campo") produzia, na tela real, um rótulo visualmente mais perto
   do campo ANTERIOR (separado por só 8px) do que do próprio campo abaixo
   dele (separado por 24px) — o oposto do que "rótulo acima do campo" deve
   ler. Os dois valores permanecem os mesmos tokens da escala (nenhum
   valor novo introduzido) — só a atribuição de qual token vai em qual
   papel foi invertida, depois de olhar a captura, não de presumir.
   ============================================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--ar-space-lg);
  margin-top: var(--ar-space-lg);
  /* Rodada 4 (checkpoint de continuação, 134-06): `.page` ficou landscape
     (67.5rem) — sem este limite, cada `<input>`/`<textarea>` esticaria pra
     quase 1030px de largura, o que não é um problema de LEITURA (não é
     texto corrido, é campo de formulário) mas é o mesmo tipo de defeito de
     usabilidade — campo de uma linha (nome, e-mail, telefone) fica estranho
     de preencher tão largo. 32rem/512px é a largura clássica de formulário
     de contato de uma coluna, menor que o limite de prosa (38rem) porque um
     campo de formulário não precisa da mesma medida de leitura de um
     parágrafo. */
  max-width: 32rem;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  display: block;
  margin-bottom: var(--ar-space-sm);
  font-weight: 700;
  color: var(--ar-text);
}

.form-field input,
.form-field textarea {
  padding: var(--ar-space-sm) var(--ar-space-md);
  border-radius: 6px;
  color: var(--ar-text);
  font-family: inherit;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--ar-accent);
  outline-offset: 1px;
  border-color: var(--ar-accent);
}

.form-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field-help {
  margin: var(--ar-space-xs) 0 0;
}

.contact-form > .cta {
  align-self: flex-start;
  margin-top: var(--ar-space-sm);
}

/* ============================================================================
   11. RODAPÉ — faixa em superfície.
   ============================================================================ */
.site-footer {
  padding-top: var(--ar-space-3xl);
  padding-bottom: var(--ar-space-3xl);
  margin-top: var(--ar-space-2xl);
  color: var(--ar-text-muted);
  text-align: center;
}

.site-footer p {
  margin: 0 0 var(--ar-space-xs);
}

.site-footer a {
  color: var(--ar-accent);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ar-accent-bright);
}

/* ============================================================================
   12. RESPONSIVIDADE — ponto de quebra único em 640px (D-06/D-07), menu
       recolhido em CSS puro via checkbox-hack. Sem ponto intermediário de
       tablet (o UI-SPEC descarta explicitamente por falta de necessidade
       declarada).

       Nota sobre grades — CORRIGIDA na rodada 6 (checkpoint de continuação,
       134-06): esta nota afirmava que "Como funciona" nunca ganhava um
       wrapper de grade e que não existia nenhuma regra de grade de 2+
       colunas nesta folha para colapsar em 1 coluna — verdade até a rodada
       5, deixou de ser verdade nesta rodada. `_wrap_numbered_steps` (novo,
       build_site.py) agora envolve cada item de "Como funciona" em
       `.step` (grade de 3 colunas — ver § 7, logo acima do bloco do
       comparativo), com sua própria regra de colapso em `@media (max-width:
       640px) { .step { grid-template-columns: 1fr; } }`, junto da própria
       definição de `.step` — não duplicada aqui. As faixas de preço
       continuam exatamente como esta nota original descrevia: sequência de
       <h3>/<p>/<ul> soltos, sem wrapper, sem grade — nenhuma mudança nelas
       nesta rodada.
   ============================================================================ */
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    padding: var(--ar-space-md) var(--ar-space-lg);
  }

  .page {
    padding: 0 var(--ar-space-md);
  }

  /* Acionador do menu: tamanho de rótulo (14px) mas área de toque de no
     mínimo 44x44px — o espaçamento interno preenche a área, o traço
     visível (.nav-toggle-bars) continua ~22px. */
  .nav-toggle-label {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    padding: var(--ar-space-sm) var(--ar-space-md);
  }

  /* Navegação recolhida por padrão; some visível só quando a caixa de
     seleção (irmã anterior, sempre alcançável por teclado — ver § 5)
     está marcada. Nenhum script participa. */
  .site-nav {
    display: none;
    width: 100%;
  }

  #nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--ar-space-md);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: var(--ar-space-sm) 0;
    white-space: nowrap;
    border-bottom: 1px solid var(--ar-border);
  }

  .nav-link.is-active {
    border-bottom: 1px solid var(--ar-border);
    border-left: 2px solid var(--ar-accent);
    padding-left: var(--ar-space-sm);
  }

  /* Botão de ação da navegação vira a última linha do menu, largura
     total. */
  .site-nav > .cta-nav {
    order: 1;
    width: 100%;
    margin-top: var(--ar-space-md);
  }

  .contact-form > .cta {
    align-self: stretch;
  }
}