/* ==========================================================================
   F2B Engenharia — fase 1
   Mobile-first (360px). Sistema visual definido no CLAUDE.md.
   ========================================================================== */

/* ---- Fontes (auto-hospedadas) ---- */
@font-face {
  font-family: "Archivo";
  src: url("../fontes/archivo-v25-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fontes/archivo-v25-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fontes/archivo-v25-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fontes/space-grotesk-v22-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fontes/space-grotesk-v22-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --preto: #000000;
  --fundo: #0B0B0C;
  --superficie: #0F0F11;
  --superficie-ativa: #1A1503;
  --borda: #26262A;
  --ambar: #E8B50C;
  --sobre-ambar: #3A2C02;
  --branco: #FFFFFF;
  --cinza: #9A9AA0;
  /* Cinza de terceiro nível (rótulos miúdos, notas, unidades) sobre fundo
     escuro. Escolhido pelo contraste, não pelo olho: 4,9:1 sobre #0B0B0C e
     4,8:1 sobre #0F0F11 — passa AA em texto pequeno. Ver NOTAS.md: o herói
     usa o mesmo token — até a Etapa 19 três rótulos do cartão da herói
     ficaram com #6A6A70 codificado à mão, em 3,56:1, reprovando AA. */
  --cinza-fraco: #7E7E85;

  /* Seções claras — concreto claro, neutro (não o creme #F4F1EA de default) */
  --claro-fundo: #ECECE8;
  --claro-titulo: #0B0B0C;
  --claro-texto: #33333A;
  --claro-suave: #6A6A6E;
  /* Terceiro nível sobre o concreto claro: #6A6A6E passa raspando (4,54:1);
     este dá 5,0:1 sobre #ECECE8 e 5,9:1 sobre o branco dos cartões. */
  --claro-fraco: #5F5F67;
  /* Fio sobre fundo claro (divisores de lista e de bloco) */
  --claro-borda: #D9D9D3;

  --fonte-texto: "Archivo", system-ui, sans-serif;
  --fonte-dados: "Space Grotesk", "Archivo", system-ui, sans-serif;

  /* Altura da barra fixa. Fonte única: governa o próprio cabeçalho E a reserva
     das âncoras. Antes eram 60px no mobile e 68px no desktop; agora é um valor
     só, para que o cálculo da âncora não dependa do breakpoint. */
  --cabecalho: 68px;

  /* Ritmo vertical de TODA seção. Um valor só, fluido: no piso de 360px dá
     56px, e a partir de ~1370px trava em 96px. */
  --ritmo: clamp(56px, 7vw, 96px);

  /* Movimento */
  /* A varredura do card — barra, trilha, indicador e os quatro números — é
     UMA animação contínua de 4000ms dirigida por um único laço de
     requestAnimationFrame no JS, não por transição CSS. Curva e duração vivem
     lá (cubic-bezier(0.45, 0, 0.55, 1), 4000ms). Nada aqui deve devolver
     transição a esses elementos: duas fontes de movimento se atropelariam.
     Entrada de elemento (título, apoio, etiqueta, CTAs): out-expo, nítida. */
  --dur-entrada: 600ms;
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  /* Cross-fade do único elemento que faz fade na varredura (etiqueta em âmbar
     + frase de uso): 70ms out + 70ms in = 140ms. */
  --dur-fade: 70ms;
}

/* ==========================================================================
   Entrada de elementos (herói ao carregar · seções ao entrar na viewport)
   O estado inicial só existe com JS; sem JS o conteúdo aparece normalmente.
   ========================================================================== */

.js .entra {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-entrada) var(--ease-entrada),
              transform var(--dur-entrada) var(--ease-entrada);
}

.js .entrou .entra {
  opacity: 1;
  transform: none;
}

/* Só fade, sem deslocamento (usado pela etiqueta) */
.js .entra--fade {
  transform: none;
  transition-property: opacity;
}

/* O cartão da faixa entra DESACOPLADO do texto: no desktop e em telas altas por
   temporizador (2600ms, via JS); no mobile com o cartão abaixo da dobra, por
   IntersectionObserver no próprio cartão. Por isso não usa .entra (que o
   .heroi.entrou revelaria junto do texto), e sim o gatilho próprio .revelado. */
.js .entra-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-entrada) var(--ease-entrada),
              transform var(--dur-entrada) var(--ease-entrada);
}

.js .faixa.revelado {
  opacity: 1;
  transform: none;
}

/* Cadência do texto no MOBILE (padrão): o CTA não espera pela sequência — entra
   a 2600ms, independente do cartão, que roda sua própria sequência ao entrar em
   vista. Os valores do desktop estão no media query de ≥900px. */
.js .heroi__linha.entra           { transition-delay: 200ms; }
.js .heroi__linha--destaque.entra { transition-delay: 1200ms; }
.js .heroi__apoio.entra           { transition-delay: 2000ms; }
.js .heroi__etiqueta.entra,
.js .heroi__ctas.entra            { transition-delay: 2600ms; }

/* Rolar ou clicar durante a encenação leva tudo ao estado final na hora. */
.js .heroi.entrada-cancelada .entra {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Âncoras: o alvo encosta na barra, sem folga somada.

   As duas propriedades SOMAM (a borda superior da caixa de scroll-margin do
   alvo alinha com a borda de scroll-padding do scrollport). Escrever
   `var(--cabecalho)` nas DUAS daria 136px de recuo, não 68px — é o erro que
   a Etapa 12 documentou e que não deve voltar. Uma só carrega o valor:

     scroll-padding-top  → reserva a barra fixa (68px)   ← única fonte
     scroll-margin-top   → 0

   Os 24px de folga que existiam aqui saíram: eles descolavam o alvo da barra
   e deixavam aparecer uma tira da seção ANTERIOR no topo — uma emenda de cor
   que lia como defeito. O respiro sobre o título vem do `padding-top` da
   própria seção, que já tem a cor certa. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--cabecalho);
}

section[id] {
  scroll-margin-top: 0;
}

/* Toque: `manipulation` tira o atraso de 300ms do duplo-toque para zoom, e o
   realce de toque padrão do Android (um retângulo azul) sai — o :active e o
   :focus-visible da página já dão o retorno, e são da paleta. */
button,
a,
label,
summary,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Container único da página: mesma largura e mesmas margens em toda seção */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Malha comum: uma coluna no mobile, 12 colunas no desktop.
   Todas as seções derivam desta grade — mesmo gap, mesmos pontos de divisão. */
.grade {
  display: grid;
  gap: 32px;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

/* Fundo OPACO, não translúcido. O `rgba(…, 0.88) + blur` deixava o conteúdo
   atravessar — discreto sobre as seções escuras, gritante sobre as claras, onde
   o concreto #ECECE8 vazava por trás do preto. Opaco resolve os dois fundos com
   a mesma regra e não depende de `backdrop-filter` (que alguns navegadores
   ignoram, justamente o caso em que o desfoque falharia sem aviso).
   Sobre o herói a barra é da mesma cor do fundo: some. Sobre as seções claras
   ela lê como a faixa preta da marca. */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fundo);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease;
}

.topo.rolou {
  border-bottom-color: var(--borda);
}

.topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cabecalho);
}

.topo__logo {
  display: flex;
  align-items: center;
}

.topo__logo img {
  height: 19px;
  width: auto;
}

/* Botão de menu (mobile) */
.topo__menu-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--branco);
}

.menu-icone,
.menu-icone::before {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease;
}

.menu-icone::before {
  content: "";
  transform: translateY(-7px);
}

.topo__menu-btn[aria-expanded="true"] .menu-icone {
  transform: rotate(45deg);
}

.topo__menu-btn[aria-expanded="true"] .menu-icone::before {
  transform: translateY(0) rotate(-90deg);
}

/* Painel de navegação (mobile) */
.topo__nav {
  position: absolute;
  top: var(--cabecalho);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 8px 20px 20px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.topo__nav.aberto {
  display: flex;
}

.topo__link {
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
}

.topo__area {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 0;
  color: var(--cinza);
  font-size: 0.9375rem;
}

.topo__area small {
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cinza);
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 2px 8px;
}

/* ==========================================================================
   1 · Herói
   ========================================================================== */

/* Herói de altura natural. A peça se apresenta sozinha (sequência 5 → 1);
   a rolagem da página nunca é interceptada. */
.heroi__inner {
  padding-block: var(--ritmo);
}

.heroi__etiqueta {
  margin: 0 0 14px;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cinza);
}

.heroi__etiqueta::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--ambar);
  vertical-align: baseline;
}

.heroi__titulo {
  margin: 0;
  font-size: clamp(2rem, 8.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Duas linhas animáveis, cada uma um tempo da encenação */
.heroi__linha {
  display: block;
}

.heroi__titulo em {
  font-style: normal;
  color: var(--ambar);
}

.heroi__apoio {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 0.9375rem;
  color: var(--cinza);
}

.heroi__ctas {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  /* `background` e `border` explícitos porque .btn também veste um <button>,
     e <button> nasce com o cinza de sistema do navegador. Era o que acontecia
     com o "Solicitar orçamento" do formulário: desenhado como contorno,
     renderizado como caixa cinza — o botão do momento de conversão parecendo
     desabilitado. Os <a> não tinham o problema, e por isso ele passou. */
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.btn--primario {
  background: var(--ambar);
  color: var(--sobre-ambar);
}

.btn--primario:hover {
  background: #F2C21E;
}

/* Contorno, não preenchimento: secundário ao WhatsApp âmbar. O contorno era
   #3A3A40 — 1,7:1 sobre o fundo, abaixo do mínimo de 3:1 para componente não
   textual. Sumia, e um botão que some lê como desabilitado. #6A6A72 dá 3,7:1:
   visível como botão, e ainda muito atrás dos 10:1 do âmbar. */
.btn--contorno {
  border: 1px solid #6A6A72;
  color: var(--branco);
}

.btn--contorno:hover {
  border-color: var(--branco);
}

.btn__icone {
  flex: none;
}

/* ==========================================================================
   A peça: faixa de custo por classe
   ========================================================================== */

.faixa {
  padding: 18px 16px 20px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.faixa__rotulo {
  margin: 0 0 14px;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--cinza);
}

/* Caixas de classe */
.faixa__classes {
  position: relative; /* bloco de contenção do indicador */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* Indicador único que desliza atrás das caixas: carrega a borda âmbar e o
   fundo do estado ativo. As caixas em si nunca ficam âmbar. */
.classe-indicador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  /* Mesmas métricas da caixa (o gap da grade fica de fora, porque a posição
     vem do offsetLeft/offsetWidth do botão) */
  border: 1px solid var(--ambar);
  border-radius: 7px;
  background: #1A1503; /* opaco: cobre a borda cinza de qualquer caixa */
  /* Acima dos fundos e bordas das caixas, abaixo do texto delas */
  z-index: 2;
  pointer-events: none;
  /* Sem transição: o deslize vem do laço de rAF, que percorre as cinco caixas
     continuamente. */
}

.classe {
  /* Sem z-index: não pode criar contexto de empilhamento, senão o texto
     ficaria preso abaixo do indicador. */
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 0 8px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 7px;
  cursor: pointer;
  color: var(--cinza);
  /* O realce da caixa é atributo de classe: SALTA. Sem transição alguma — nem
     de cor, nem de opacidade. Palavra e número trocam no mesmo quadro, o que
     preserva a correção do "quadro claro" (o número tem cor própria). */
}

/* Texto acima do indicador */
.classe__palavra,
.classe__num {
  position: relative;
  z-index: 3;
}

.classe__palavra {
  font-family: var(--fonte-dados);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Cor própria (em vez de herdada): herdando, ao perder o estado ativo o
   número saltava para o branco do pai antes de virar cinza — o piscar. */
.classe__num {
  font-family: var(--fonte-dados);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--cinza);
}

.classe.is-ativa {
  color: var(--branco);
}

.classe.is-ativa .classe__num {
  color: var(--ambar);
}

.faixa__dica {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--cinza-fraco);
}

/* Banda gráfica — instrumento de medição.
   Trilho = envelope da escala (3,0 a 7,5). Fatia âmbar = faixa provável.
   Os valores da faixa ficam ancorados nas próprias extremidades da fatia. */
.banda {
  margin-top: 24px;
}

.banda__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 36px;
  font-size: 0.75rem;
  color: var(--cinza);
}

.banda__unidade {
  font-family: var(--fonte-dados);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cinza-fraco);
}

.banda__trilho {
  position: relative;
  height: 15px;
  border-radius: 3px;
  background: #161619;
  box-shadow: inset 0 0 0 1px var(--borda);
  overflow: visible;
}

.banda__intervalo {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--ambar);
  /* left/width vêm do laço de rAF, quadro a quadro. Sem transição. */
}

/* Marcas (jaws) do instrumento: valor ancorado sobre cada extremidade */
.banda__cap {
  position: absolute;
  bottom: calc(100% + 11px);
  transform: translateX(-50%);
  font-family: var(--fonte-dados);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ambar);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.banda__cap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  width: 1px;
  height: 8px;
  background: var(--ambar);
  transform: translateX(-50%);
}

.banda__cap--min { left: 0; }
.banda__cap--max { left: 100%; }

.banda__escala {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  color: var(--cinza-fraco);
  font-variant-numeric: tabular-nums;
}

/* Trilha de definição do projeto — leitura causal da faixa.
   Enquanto a faixa de custo estreita, a definição do projeto cresce: a faixa
   não estreita sozinha, estreita porque o projeto está mais definido.
   Fonte source-order: rótulo · trilho · percentual (uma linha no desktop). */
.trilha-def {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.trilha-def__rotulo {
  font-size: 0.75rem;
  color: var(--cinza);
  white-space: nowrap;
}

.trilha-def__trilho {
  flex: 1 1 60px;
  min-width: 60px;
  height: 4px;
  border-radius: 2px;
  /* Trilho vazio um pouco mais claro que a borda (#26262A) para não sumir
     contra a superfície do card: na Classe 5 o preenchimento de 4% precisa ler
     como fração de um todo, não como um ponto solto. Ainda discreto ao lado da
     barra de custo, que é o elemento principal. */
  background: #2E2E33;
  overflow: hidden;
}

.trilha-def__preenchimento {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ambar);
  /* Anima por escala, não por width: transform-origin à esquerda faz a barra
     crescer da esquerda para a direita, no mesmo instante e curva da faixa. */
  transform-origin: left;
  transform: scaleX(0.04);
  /* A escala vem do laço de rAF, junto com a barra. Sem transição. */
}

/* Percentual: tabular para não "dançar", menor que o valor da faixa (não
   disputa a hierarquia do card). Os dois dígitos ROLAM com a varredura — a
   definição é grandeza contínua; "–" e "%" são estáticos e nunca animam. */
/* LARGURA RESERVADA — é aqui que nascia o tranco da Classe 5 para a 4.
   `defMax` vai de 2 a 15 logo no começo da varredura: o texto passa de "0–2%"
   para "1–15%", ganha um dígito, o bloco alarga e o trilho ao lado (que é
   `flex: 1`) encolhe na mesma hora. O olho lê um solavanco no trilho, não um
   dígito a mais. Entre as outras classes o número de dígitos não muda, e por
   isso o tranco só aparecia naquela passagem.

   `7ch` cobre a maior string possível ("65–100%") com dígitos tabulares. */
.trilha-def__pct {
  min-width: 7ch;
  text-align: right;
  font-family: var(--fonte-dados);
  font-size: 0.75rem;
  color: var(--branco);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Indicadores */
.inds {
  margin: 6px 0 0;
}

.ind {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}

.ind__nome {
  font-size: 0.75rem;
  color: var(--cinza);
}

.ind__valor {
  margin: 0;
  font-family: var(--fonte-dados);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Precisão típica é atributo tabelado da classe: SALTA, sem fade e sem
     rolar. A barra encolhendo já representa essa precisão de forma contínua —
     rolá-la seria a mesma informação em duas réguas. */
}

/* O que a classe entrega.
   Altura reservada pelo texto mais longo (Classe 2), para o cartão nunca
   redimensionar ao trocar de classe. */
.entrega {
  margin-top: 14px;
}

/* ÚNICO elemento do card que faz fade durante a varredura: etiqueta em âmbar
   + frase de uso, cross-fade de 140ms nas passagens de classe, sem deslocar. */
.entrega__uso,
.entrega__texto {
  transition: opacity var(--dur-fade) linear;
}

.entrega__uso.apagando,
.entrega__texto.apagando {
  opacity: 0;
}

.entrega__uso {
  margin: 0 0 4px;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ambar);
}

.entrega__texto {
  margin: 0;
  min-height: 4.5em; /* 3 linhas a 0.875rem/1.5 */
  font-size: 0.875rem;
  line-height: 1.5;
  color: #D6D6DA;
}

/* Nota de fonte no rodapé do card: citação normativa (como SINAPI ou NBR).
   Não afirma filiação nem credenciamento à AACE — apenas cita a referência. */
.faixa__fonte {
  margin: 16px 0 0;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem; /* 11px */
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--cinza);
}

/* ==========================================================================
   Sistema de seções (2 em diante) — alternância escuro/claro dá o ritmo
   ========================================================================== */

.secao {
  padding-block: var(--ritmo);
}

/* DESTINO DE ÂNCORA — por que estas seções têm altura mínima.

   Medido: com área útil de 821px, `#servicos` fecha em 783px, `#metodo` em
   765px e `#quem` em 810px. Sobra de 11 a 56px, que o visitante vê como uma
   faixa da COR SEGUINTE no rodapé da tela ao clicar no menu. É o pior tamanho
   possível: largo demais para ler como fio de divisa, estreito demais para ler
   como "a próxima seção começou". Parece defeito de alinhamento.

   O remédio é altura mínima igual à área útil, com o conteúdo centrado nela —
   assim a folga vira respiro dos dois lados em vez de sobra embaixo.

   NÃO é "toda seção com 100vh", que o briefing recusa com razão:
   · `min-height`, não `height` — conteúdo mais alto continua transbordando
     (`#entregaveis` tem 1525px e ignora a regra);
   · só no desktop — no celular `svh` é instável e a regra não se aplica;
   · `#problema` fica de fora de propósito. É seção-ponte, curta por desenho
     (388px), e é ela que quebra a cadência de telas cheias. */
@media (min-width: 62rem) {
  .secao--parada {
    min-height: calc(100vh - var(--cabecalho));
    min-height: calc(100svh - var(--cabecalho));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.secao--clara {
  background: var(--claro-fundo);
  color: var(--claro-texto);
}

.secao--escura {
  background: var(--fundo);
  color: var(--branco);
}

/* Duas seções vizinhas de mesmo fundo não têm divisa visível: o ritmo dobrado
   (padding-bottom + padding-top) leria como um vazio sem motivo. Um fio de 1px
   marca a junta. Onde o fundo alterna, a própria troca de cor é a divisa e o
   ritmo permanece dos dois lados.

   NINGUÉM ZERA. Foi o erro da primeira tentativa: zerar o `padding-top` da
   segunda tirava dela o respiro quando ela é alvo de âncora (#servicos é a
   segunda do par 2+3); zerar o `padding-bottom` da primeira grudou o fio no
   último parágrafo da seção 2. Um fio precisa de respiro dos DOIS lados —
   senão não lê como divisa, lê como sublinhado.

   Os dois lados recebem 60% do ritmo. A junta fica em 1,2 × ritmo contra os
   2 × ritmo de uma troca de fundo: menor, como o par pede, e ainda assim com
   ar suficiente para o fio ser uma divisa. */
.secao--clara:has(+ .secao--clara),
.secao--escura:has(+ .secao--escura) {
  padding-bottom: calc(var(--ritmo) * 0.6);
}

.secao--clara + .secao--clara,
.secao--escura + .secao--escura {
  padding-top: calc(var(--ritmo) * 0.6);
}

.secao--clara + .secao--clara {
  border-top: 1px solid var(--claro-borda);
}

.secao--escura + .secao--escura {
  border-top: 1px solid var(--borda);
}

/* Marca de início de seção: fio âmbar curto (elemento gráfico, não texto) */
.marca-secao {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--ambar);
}

.secao__titulo {
  margin: 0;
  font-size: clamp(1.6rem, 6.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--claro-titulo);
  text-wrap: balance;
}

.secao--escura .secao__titulo {
  color: var(--branco);
}

/* ==========================================================================
   2 · O problema
   ========================================================================== */

.problema__coluna {
  display: grid;
  gap: 20px;
}

.problema__texto {
  max-width: 52ch;
}

.problema__texto p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--claro-texto);
}

.problema__texto p + p {
  margin-top: 18px;
}

/* ==========================================================================
   3 · Serviços

   Quatro folhas brancas sobre o concreto claro da seção. O branco não é
   decoração: é o suporte do produto (a folha de orçamento). Por isso não há
   borda nem sombra — só a diferença de tom.

   Hierarquia deliberadamente invertida em relação ao default: a PERGUNTA é a
   linha grande, o verbo é a etiqueta. O título promete quatro perguntas; quem
   chega reconhece a própria dúvida antes de aprender a nossa taxonomia.

   Nenhum âmbar dentro dos cartões: sobre fundo claro o âmbar reprova em
   contraste, e a marca da seção já carrega o acento.
   ========================================================================== */

/* A linha do título é uma linha de dois campos: título à esquerda, para quem
   este trabalho é à direita. A tira de públicos deixou de fechar a seção — lá
   embaixo ela pedia um fio próprio e um bloco só para si; aqui ela qualifica o
   título sem custar estrutura nenhuma. */
.servicos__cabecalho {
  display: grid;
  gap: 18px;
  max-width: 44ch;
}

/* Mesmo papel e mesmo peso do apoio das outras seções: qualifica a promessa
   do título e para por aí. */
.servicos__tese {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--claro-suave);
  text-wrap: balance;
}

.servicos__lista {
  margin-top: 44px;
}

.servico {
  padding: 24px 22px 26px;
  background: #FFFFFF;
  border-radius: 10px;
}

.servico__verbo {
  margin: 0 0 12px;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--claro-suave);
}

.servico__pergunta {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--claro-titulo);
  text-wrap: balance;
}

.servico__texto {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--claro-texto);
}

/* Sem fio e sem bloco próprio: é a coluna direita da linha do título. */
/* Duas linhas com pesos diferentes: a primeira afirma para quem a promessa
   vale, a segunda diz o que ela entrega. Mesma medida de largura — é uma tira,
   não um parágrafo. */
/* ==========================================================================
   4 · Entregáveis — recortes dos documentos, em folha clara

   A ÚNICA INVERSÃO DE FUNDO DO SITE, e ela tem motivo. O produto da F2B é um
   documento. Documento é papel, e papel é claro. Sobre a seção escura, três
   folhas claras são a coisa mais visível da página — o que está certo, porque
   são o produto. De quebra, a inversão quebra o esqueleto (fio âmbar, título à
   esquerda, texto à direita) que as outras quatro seções repetem.

   O tom do papel é o mesmo `--claro-fundo` das seções claras: nenhuma cor nova
   entra no sistema, e a folha fica visualmente ligada ao resto da página.

   ÂMBAR NÃO É TEXTO AQUI. #E8B50C sobre #ECECE8 dá 1,9:1. Na folha o âmbar
   existe só como bloco preenchido, com texto `--sobre-ambar` (#3A2C02) por
   cima — o mesmo par usado no botão do WhatsApp.

   Sem movimento nenhum nesta seção. A faixa de classes da herói continua sendo
   o único elemento reativo à rolagem.
   ========================================================================== */

.entregaveis__cabecalho {
  display: grid;
  gap: 18px;
}

.entregaveis__apoio {
  margin: 0;
  max-width: 44ch;
  font-size: 0.9375rem;
  color: var(--cinza);
  text-wrap: balance;
}

/* ---- O par: amostra em papel + leitura na página ----

   Cada peça mostra COMO é e diz PARA QUE SERVE. As duas coisas, sempre, na
   mesma ordem. A Etapa 23 deu amostra sem tradução — quatro tabelas abertas,
   ilegíveis para quem não é do ramo. A 24 deu tradução sem amostra em três das
   quatro peças.

   A troca de fundo dentro do cartão faz o trabalho de dois rótulos que não
   precisam existir: papel é o documento, escuro é a página falando. */
.entregas {
  display: grid;
  gap: 22px;
  margin-top: 36px;
}

.entrega-peca {
  display: grid;
  gap: 18px;
  padding: 16px 16px 20px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.amostra {
  padding: 14px 16px 16px;
  background: var(--claro-fundo);
  color: var(--claro-texto);
  border-radius: 8px;
  min-width: 0;
}

.amostra__rotulo {
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--claro-borda);
  font-family: var(--fonte-dados);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--claro-fraco);
}

/* CELULAR: a planilha NÃO rola na horizontal.

   A rolagem lateral era a saída fácil e é ruim de verdade: numa página que
   rola na vertical, um bloco que rola na horizontal engole o gesto do dedo e
   o visitante fica preso. Pior num recorte de amostra, que ninguém veio ler
   linha a linha.

   Em vez disso, abaixo de 46rem somem as três colunas do meio (unidade,
   quantidade e unitário). Sobra Item · Código · Descrição · Total, que é
   exatamente o que a peça precisa provar: a hierarquia do orçamento, a origem
   do preço e o valor. Quem quiser o resto pede o documento.

   `.doc__oculto` marca as colunas dispensáveis. Estão no HTML, contam para o
   leitor de tela até 46rem, e a partir daí saem do fluxo inteiro — cabeçalho
   e célula juntos, senão a tabela desalinha. */
.amostra__rolagem {
  min-width: 0;
}

@media (max-width: 45.999rem) {
  .doc__oculto {
    display: none;
  }

  /* Nas tabelas de quatro colunas o aperto é de largura, não de número de
     colunas: no piso de 360px sobram ~256px para a tabela inteira. Corpo menor,
     recuo menor e rótulo que pode quebrar em duas linhas resolvem sem esconder
     nada — e nenhuma dessas tabelas tem coluna dispensável. */
  .doc--mini {
    font-size: 0.6875rem;
  }

  .doc--mini th:first-child,
  .doc--mini td:first-child {
    padding-left: 6px;
  }

  .doc--mini thead th,
  .doc--mini tbody th,
  .doc--mini tbody td {
    padding-right: 6px;
  }

  .doc--alt tbody th {
    white-space: normal;
  }
}

/* A coluna de leitura precisa existir como caixa própria: no desktop ela é a
   metade direita da linha, e sem contêiner o título e o parágrafo virariam
   dois filhos soltos da malha. */
.entrega-peca__leitura {
  min-width: 0;
}

.entrega-peca__nome {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--branco);
}

/* A condição vive no título da peça, não numa etiqueta separada. Na Etapa 24 a
   análise de alternativas tinha um bloco "Serviço à parte" só para ela, e o
   Breno leu como desconexo — com razão: se NENHUMA peça é obrigatória, isolar
   uma delas não codifica nada. */
.entrega-peca__quando {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--fonte-dados);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza-fraco);
  vertical-align: 2px;
}

.entrega-peca__texto {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cinza);
}

.entrega-peca__texto b {
  font-weight: 500;
  color: var(--branco);
}

.entrega-peca__nota {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--cinza-fraco);
}

.entrega-peca__nota .cod {
  margin-right: 2px;
}

/* ---- A tabela-documento ----
   Números em Space Grotesk com `tabular-nums`: numeral de largura fixa é o que
   faz uma coluna de preço ler como coluna de preço. */
.doc {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
}

.doc thead th {
  padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--claro-borda);
  font-family: var(--fonte-dados);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--claro-fraco);
  white-space: nowrap;
}

.doc tbody th,
.doc tbody td {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--claro-borda);
  font-weight: 400;
  vertical-align: top;
}

.doc tbody th {
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  color: var(--claro-fraco);
  white-space: nowrap;
}

.doc__num {
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
}

/* A primeira coluna encostava na borda do papel. Um recuo de 10px dá o mesmo
   respiro que as outras colunas já tinham do lado direito. */
.doc th:first-child,
.doc td:first-child {
  padding-left: 10px;
}

.doc__c-item { width: 58px; }
.doc__c-cod  { width: 94px; }
.doc__c-rank { width: 34px; }

/* Grupo e subgrupo: a hierarquia do orçamento é informação, então ela é
   estrutura, não indentação decorativa. */
.doc__grupo th,
.doc__grupo td {
  padding-top: 9px;
  padding-bottom: 9px;
  background: #E2E2DC;
  font-weight: 600;
  color: var(--claro-titulo);
}

.doc__sub th,
.doc__sub td {
  font-weight: 600;
  color: var(--claro-titulo);
}

/* Diz que há mais, e quanto mais. Sem ela o recorte pareceria o documento
   inteiro. */
.doc__corte td {
  font-family: var(--fonte-dados);
  font-size: 0.625rem;
  color: var(--claro-fraco);
}

.doc__corte td::before {
  content: "⋯  ";
}

.doc__fecho th,
.doc__fecho td {
  border-bottom: 0;
  font-weight: 600;
  color: var(--claro-titulo);
}

.doc__peso {
  font-weight: 600;
  color: var(--claro-titulo);
}

/* A única variação que SOBE numa tabela de economia. Sem marca, o leitor
   assume que todas as linhas puxam para o mesmo lado — e o achado da peça é
   justamente que não puxam. #8C3A2E dá 6,4:1 sobre o papel. */
.doc__sobe {
  color: #8C3A2E;
}

.doc--alt tbody th {
  font-family: var(--fonte-texto);
  font-size: 0.75rem;
  color: var(--claro-texto);
}

/* ---- A coluna que prova o método ----
   Referência pública e composição própria lado a lado. É o argumento inteiro
   de "origem registrada" em duas etiquetas. */
.cod {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.cod--ref {
  background: #DCDCD5;
  color: #3F3F45;
}

/* Âmbar preenchido com texto escuro. Âmbar COMO TEXTO sobre o papel dá 1,9:1 e
   reprovaria; assim dá 7,2:1. */
.cod--own {
  background: var(--ambar);
  color: var(--sobre-ambar);
}

.entrega-peca__nota .cod--own {
  background: var(--ambar);
  color: var(--sobre-ambar);
}

/* Tabela reduzida das peças de meia largura: menos ar entre linhas, porque a
   amostra ali é recorte curto e não documento aberto. */
.doc--mini tbody th,
.doc--mini tbody td {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ---- Curva S ----
   Notação própria do cronograma físico-financeiro, não abstração dele: todo
   cronograma do gênero sai com ela. Diferente da Etapa 21, quando uma curva
   SUBSTITUIU o documento em vez de acompanhá-lo.

   Barras = o mês. Linha = o acumulado. Mesma grandeza em duas leituras, e por
   isso convivem sem eixo duplo. */
.curva-s {
  display: block;
  width: 100%;
  height: auto;
}

.curva-s__grade line {
  stroke: var(--claro-borda);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.curva-s__barras rect {
  fill: #C9C9C2;
}

.curva-s__linha {
  fill: none;
  stroke: #96700A;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.curva-s__marco {
  fill: #96700A;
  stroke: var(--claro-fundo);
  stroke-width: 2.5;
}

.amostra__eixo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0;
  font-family: var(--fonte-dados);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--claro-fraco);
}

.amostra__eixo--marco {
  color: #7E5F08;
}

/* ---- Memorial ----
   A marca à esquerda codifica o estado. Os três também vêm escritos, então a
   cor nunca é o único portador. */
.premissa__linha {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-bottom: 1px solid var(--claro-borda);
}

.premissa__linha:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.premissa__linha dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-dados);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--claro-fraco);
}

.premissa__linha dt::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* Âmbar puro dá 1,61:1 sobre o papel e reprova o mínimo de 3:1. #96700A é o
   mesmo matiz escurecido até 3,84:1. */
.premissa__linha--sim dt::before    { background: #3F6B34; }
.premissa__linha--nao dt::before    { background: #8C3A2E; }
.premissa__linha--talvez dt::before { background: #96700A; }

.premissa__linha dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--claro-texto);
}

/* ---- Fecho da seção ----
   O selo é o diferencial (classe e faixa declaradas em toda peça); a nota é a
   procedência (o que é real e o que foi retirado). Um afirma, outro qualifica
   — cada um faz um trabalho só. */
.entregaveis__selo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cinza);
}

.entregaveis__selo::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--ambar);
}

.entregaveis__nota {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cinza-fraco);
}

/* ==========================================================================
   5 · Como trabalhamos

   Sequência real de processo — a única numeração legítima da página (por isso
   os quatro serviços da seção 3 NÃO são numerados). A leitura é de registro:
   número no vão da esquerda, etapa e frase à direita, um fio entre elas.
   O fecho sobre rastreabilidade fica sob o título, na coluna estreita: é a
   conclusão da lista, e ocupa o vazio que a seção 2 deixa nessa coluna.

   Nenhum âmbar aqui além do fio de marca da seção — sobre fundo claro o âmbar
   reprova em contraste, e cinco números em âmbar tomariam a página inteira.
   ========================================================================== */

.metodo__coluna {
  display: grid;
  gap: 20px;
}

.metodo__fecho {
  margin: 0;
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--claro-fraco);
}

.metodo__etapas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 16px;
  padding: 20px 0;
  border-top: 1px solid var(--claro-borda);
}

.etapa:first-child {
  padding-top: 0;
  border-top: 0;
}

.etapa:last-child {
  padding-bottom: 0;
}

/* O número não alinha por line-height (o nome da etapa tem corpo maior): o
   recuo o traz para a altura da maiúscula do título ao lado. */
.etapa__num {
  padding-top: 5px;
  font-family: var(--fonte-dados);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--claro-fraco);
  font-variant-numeric: tabular-nums;
}

.etapa__nome {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--claro-titulo);
}

.etapa__texto {
  margin: 0;
  max-width: 54ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--claro-texto);
}

/* ==========================================================================
   6 · Quem responde

   Único ponto do site que pede foto real — e agora ela existe. Sobre fundo
   escuro: é a seção da pessoa, e o escuro isola o retrato do resto da página
   como a herói isola o cartão da faixa.

   NENHUMA SUPERFÍCIE CLARA AQUI. O cartão branco de identificação saiu: sobre
   o escuro ele ficava órfão sob a foto e acendia uma folha no meio da corrida
   escura 6 · 7 · rodapé. Os três dados viraram texto sobre o fundo, no mesmo
   registro de fio e rótulo das etapas do método. A foto diz quem é; as três
   linhas dizem o que o registro dele autoriza.
   ========================================================================== */

.quem__cabecalho {
  display: grid;
  gap: 20px;
}

/* MALHA PRÓPRIA, e não a de 12 colunas.

   Em tela estreita a seção era três blocos empilhados: retrato grande, depois
   o parágrafo, depois a assinatura e os links lá embaixo. O retrato comia meia
   dobra e o nome de quem assina ficava longe do rosto — que é justamente o par
   que a seção existe para fazer.

   Agora o retrato encolhe e a identificação senta AO LADO dele. O parágrafo
   fica embaixo, em largura cheia, porque leitura corrida numa coluna de 200px
   não se lê: seriam umas 25 letras por linha.

   A classe `grade` saiu do HTML de propósito. A malha de 12 colunas dela entra
   num media query POSTERIOR a este e, com a mesma especificidade, venceria por
   ordem de arquivo. */
.quem__corpo {
  display: grid;
  grid-template-columns: 124px 1fr;
  align-items: center;
  gap: 26px 20px;
  margin-top: 36px;
}

.retrato {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: none;
}

.quem__id {
  grid-column: 2;
  grid-row: 1;
}

.quem__texto {
  grid-column: 1 / -1;
  grid-row: 2;
}

.retrato img {
  width: 100%;
  height: auto;
  /* Declarada para o recorte não depender do arquivo: trocar a foto por outra
     proporção não mexe no layout. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
}

/* Assinatura do parágrafo, numa linha só.

   Eram três blocos empilhados (rótulo à esquerda, valor à direita, fio entre
   eles) — estrutura de tabela para três fatos que cabem numa linha, custando
   cerca de 140px de altura e empurrando a seção para 945px, além da dobra.
   Três informações não são um quadro de dados; são uma assinatura. O rótulo
   "Responsável técnico" saiu junto: o título da seção já diz isso.

   O separador é `::before` de span, não caractere no HTML: é pontuação visual,
   e um leitor de tela não precisa ouvir "ponto médio" duas vezes. */
.assinatura {
  margin: 18px 0 0;
  font-family: var(--fonte-dados);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}

.assinatura span {
  font-weight: 400;
  color: var(--cinza);
}

.assinatura span::before {
  content: "·";
  margin: 0 9px;
  color: var(--cinza-fraco);
}

/* Corpo de leitura sobre fundo escuro — o mesmo tom das frases longas do card
   do herói e do comparador, não o cinza de rótulo. */
.quem__texto p {
  margin: 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.62;
  color: #D6D6DA;
}

.quem__texto p + p {
  margin-top: 16px;
}

.assinatura:first-child {
  margin-top: 0;
}

.quem__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Texto, sem logotipo de rede: um "in" ou uma câmera mal desenhados são marcas
   de terceiros reproduzidas errado — e a página não precisa deles para dizer
   onde o Breno está. */
.link-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  /* Mesmo contorno do botão secundário (e pela mesma razão de contraste):
     sobre escuro, as duas pílulas são links, não CTAs — o âmbar continua
     exclusivo do WhatsApp. */
  border: 1px solid #6A6A72;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--branco);
  transition: border-color 160ms ease;
}

.link-pill:hover {
  border-color: var(--branco);
}

/* Marcas oficiais (Simple Icons, CC0). A objeção antiga a logotipo de rede era
   desenhar marca de terceiro errado — caminho oficial resolve isso, e o ícone
   faz a pílula ser reconhecida antes de ser lida. */
.link-pill__icone {
  flex: none;
  margin-right: 9px;
  color: var(--cinza);
  transition: color 160ms ease;
}

.link-pill:hover .link-pill__icone {
  color: var(--branco);
}

/* A partir de 46rem (736px) o retrato cresce e a leitura vai toda para a
   direita. Antes isto só acontecia em 62rem, e uma janela de 800px — a do
   Breno — caía no layout de celular com o retrato ocupando meia tela. */
@media (min-width: 46rem) {
  .quem__corpo {
    grid-template-columns: minmax(180px, 280px) 1fr;
    align-items: start;
    gap: 22px 40px;
    margin-top: 48px;
  }

  .retrato {
    grid-row: 1 / span 2;
  }

  .quem__texto {
    grid-column: 2;
    grid-row: 1;
  }

  .quem__id {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   7 · Contato

   Dois caminhos com pesos diferentes: o WhatsApp é o CTA (âmbar, cheio) e o
   formulário é a via de quem já tem material técnico (botão de contorno). Dois
   botões âmbar na mesma seção anulariam a hierarquia.
   ========================================================================== */

.contato__coluna {
  display: grid;
  gap: 20px;
}

.contato__apoio {
  margin: 0;
  max-width: 34ch;
  font-size: 1.0625rem;
  color: var(--cinza);
}

.contato__whats {
  justify-self: start;
}

/* Mapa fase → classe. Mesmo registro da identificação da seção 6 e das etapas
   do método: rótulo à esquerda, dado à direita, fio entre as linhas. A seta é
   `content`, não caractere no HTML — é ligação visual, não texto a ler em voz
   alta. */
.mapa-fase {
  margin: 4px 0 0;
  max-width: 30ch;
}

.mapa-fase__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--borda);
}

.mapa-fase__linha:last-child {
  padding-bottom: 0;
}

.mapa-fase__linha dt {
  font-size: 0.875rem;
  color: var(--cinza);
}

.mapa-fase__linha dd {
  margin: 0;
  font-family: var(--fonte-dados);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mapa-fase__linha dd::before {
  content: "→";
  margin-right: 9px;
  color: var(--cinza-fraco);
}

.form {
  display: grid;
  gap: 16px;
  /* Faz o navegador desenhar os controles nativos (lista do select, preenchimento
     automático, barra de rolagem do textarea) na versão escura. Sem isto o menu
     do select abre claro e o autofill pinta o campo de azul. */
  color-scheme: dark;
}

/* O formulário não tem título visível: o botão já diz "Solicitar orçamento", e
   repetir o mesmo rótulo trinta centímetros acima do botão é redundância. O
   nome acessível vem do aria-label no <form>. */

.isca {
  display: none;
}

.campo {
  display: grid;
  gap: 7px;
}

/* Fieldset precisa de reset e de min-width: 0 — sem isso o conteúdo define uma
   largura mínima própria e estoura a coluna da grade. */
.form fieldset.campo {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo__rotulo {
  display: block;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--cinza);
}

.campo__obrig {
  color: var(--cinza-fraco);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--branco);
  font-family: inherit;
  /* 16px: abaixo disso o iOS dá zoom ao focar o campo */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 160ms ease;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: #3A3A40;
}

.campo textarea {
  resize: vertical;
  min-height: 108px;
}

.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239A9AA0' d='M1 2h10L6 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}

/* A fase é a pergunta que ensina: fica em três opções visíveis, não escondida
   num menu. Selecionada, é o único âmbar do formulário. */
.fase legend {
  margin-bottom: 10px;
}

.fase__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fase__op {
  position: relative;
  display: block;
}

.fase__op input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fase__op span {
  display: block;
  padding: 11px 16px;
  border: 1px solid var(--borda);
  border-radius: 99px;
  font-size: 0.875rem;
  color: var(--cinza);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.fase__op input:hover + span {
  border-color: #3A3A40;
}

.fase__op input:checked + span {
  background: var(--superficie-ativa);
  border-color: var(--ambar);
  color: var(--branco);
}

/* O input é invisível: o foco de teclado precisa ser desenhado na etiqueta. */
.fase__op input:focus-visible + span {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
}

.form__envio {
  gap: 12px;
  justify-items: start;
  margin-top: 4px;
}

.form__nota {
  margin: 0;
  font-size: 0.75rem;
  color: var(--cinza-fraco);
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.rodape {
  padding-block: 34px 40px;
  background: var(--fundo);
  border-top: 1px solid var(--borda);
  font-size: 0.8125rem;
  color: var(--cinza);
}

.rodape__inner {
  gap: 26px;
}

.rodape__marca img {
  height: 18px;
  width: auto;
}

.rodape__lema {
  margin: 12px 0 0;
  color: var(--cinza-fraco);
}

.rodape__dados p {
  margin: 0;
}

.rodape__dados p + p {
  margin-top: 4px;
}

.rodape__links {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.rodape__links a {
  color: var(--branco);
  text-decoration: none;
  transition: color 160ms ease;
}

.rodape__links a:hover {
  color: var(--ambar);
}

.rodape__area {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--cinza-fraco);
}

.rodape__area small {
  font-family: var(--fonte-dados);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 2px 8px;
}

/* Trilha de definição em telas muito estreitas: quando rótulo + trilho + %
   não cabem na mesma linha, empilha — rótulo e % na primeira (space-between),
   trilho em largura total embaixo. No piso de 360px ainda cabe em linha única. */
@media (max-width: 340px) {
  .trilha-def {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .trilha-def__rotulo {
    flex: 1 1 auto; /* cresce e empurra o percentual para a direita */
  }

  .trilha-def__trilho {
    order: 1;
    flex-basis: 100%; /* quebra para a linha de baixo, largura total */
  }

}

/* ==========================================================================
   Telas baixas (compactar herói)
   ========================================================================== */

@media (max-height: 700px) {
  .heroi__inner {
    padding-block: 20px 32px;
  }

  .heroi__titulo {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .heroi__grade {
    gap: 18px;
  }

  .entrega {
    min-height: 3.2em;
  }
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 900px) {
  /* Cadência da herói no desktop: a varredura contínua roda INTEIRA
     (3600–7600ms, animação única de 4000ms) e só então entram o apoio (600ms
     de respiro) e, por último, a etiqueta e os CTAs (mais 600ms). O cartão
     (2600ms) e a linha 1 (200ms) usam os mesmos tempos do mobile. */
  .js .heroi__linha--destaque.entra { transition-delay: 1400ms; }
  .js .heroi__apoio.entra           { transition-delay: 8200ms; }
  .js .heroi__etiqueta.entra,
  .js .heroi__ctas.entra            { transition-delay: 8800ms; }

  .container {
    padding-inline: 32px;
  }

  /* Cabeçalho: navegação inline */
  .topo__menu-btn {
    display: none;
  }

  .topo__nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    background: none;
    border: 0;
  }

  .topo__link {
    padding: 4px 0;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--cinza);
    border-bottom: 0;
    transition: color 160ms ease;
  }

  .topo__link:hover {
    color: var(--branco);
  }

  .topo__area {
    padding: 0;
    margin-left: 8px;
    font-size: 0.875rem;
  }

  .topo__logo img {
    height: 21px;
  }

  /* Malha de 12 colunas — a mesma para todas as seções */
  .grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
  }

  /* Herói: texto nas colunas 1–6, peça nas 8–12 (a 7 abre o respiro).

     A ÁREA ÚTIL, não a viewport inteira: o cabeçalho é `position: sticky`,
     logo ocupa fluxo — 100svh cheios empurravam 68px de herói para baixo da
     dobra (previsto na Etapa 12 e confirmado). Subtraindo `--cabecalho`, a
     herói termina exatamente na dobra e o conteúdo se centra na área que
     sobra. O svh é a altura pequena da viewport (barra de endereço visível),
     então a herói não muda de tamanho quando a barra do navegador móvel
     recolhe.

     O ritmo fica POR DENTRO da altura — box-sizing: border-box faz o padding
     caber nela em vez de somar. O padding-block vem da regra base (--ritmo);
     não é repetido aqui de propósito, para que a compactação de telas baixas
     continue valendo. */
  .heroi__inner {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--cabecalho));
    min-height: calc(100svh - var(--cabecalho));
  }

  .heroi__grade {
    align-items: center;
  }

  .heroi__texto {
    grid-column: 1 / 7;
  }

  .faixa {
    grid-column: 8 / 13;
  }

  .heroi__titulo {
    font-size: clamp(2.75rem, 4vw, 3.5rem);
  }

  .heroi__apoio {
    font-size: 1.0625rem;
    margin-top: 18px;
  }

  .heroi__ctas {
    grid-template-columns: auto auto;
    justify-content: start;
    margin-top: 30px;
  }

  .faixa {
    padding: 24px 24px 26px;
  }

  .classe {
    padding: 9px 0 10px;
  }

  .classe__palavra {
    font-size: 0.625rem;
  }

  .classe__num {
    font-size: 1.5rem;
  }

  .entrega__texto {
    min-height: 3em; /* 2 linhas: o cartão é mais largo aqui */
  }

  /* O ritmo das seções não tem override de breakpoint: --ritmo já é fluido e
     trava em 96px. Uma régua só para a página inteira. */

  .secao__titulo {
    font-size: clamp(2rem, 2.6vw, 2.5rem);
  }

  /* 2 · O problema — título nas colunas 1–4 (~32%), texto nas 6–12.
     Mesma malha e mesmo gap do herói. */
  .problema__coluna {
    grid-column: 1 / 5;
    gap: 26px;
  }

  .problema__texto {
    grid-column: 6 / 13;
    margin-top: 0;
    max-width: 52ch;
  }

  .problema__texto p {
    font-size: 1.1875rem;
    line-height: 1.6;
  }

  .problema__texto p + p {
    margin-top: 22px;
  }

  /* 3 · Serviços — a linha do título ocupa a malha inteira: título nas colunas
     1–6, públicos nas 8–12. Alinhados pela base, e não pelo topo: a tira miúda
     assenta na última linha do título em vez de flutuar ao lado dela. */
  .servicos__cabecalho {
    gap: 22px;
    max-width: 46ch;
  }

  .servicos__tese {
    font-size: 1.0625rem;
  }

  /* `.grade` alinha pelo topo (align-items: start) para as seções editoriais.
     Aqui os cartões precisam de altura igual: são um conjunto, não blocos
     independentes — a borda inferior desalinhada leria como descuido. */
  .servicos__lista,
  .entregas {
    align-items: stretch;
  }

  .servicos__lista {
    margin-top: 60px;
  }

  .servico {
    grid-column: span 6;
    padding: 30px 30px 32px;
  }

  .servico__verbo {
    font-size: 0.75rem;
  }

  .servico__pergunta {
    font-size: 1.375rem;
    margin-bottom: 14px;
  }

  .servico__texto {
    font-size: 1rem;
    max-width: 46ch;
  }

  /* 4 · Entregáveis — o par amostra + leitura, em duas colunas

     Cada peça vira uma linha: amostra à esquerda, leitura à direita. A amostra
     leva mais espaço porque é ela que precisa de largura — tabela de orçamento
     não encolhe sem perder o alinhamento dos números.

     A peça do orçamento é a única em coluna única: são sete colunas de tabela,
     e espremer isso em metade da largura obrigaria a rolagem horizontal no
     DESKTOP, o que seria defeito e não escolha. */
  .entregaveis__cabecalho {
    max-width: 50ch;
    gap: 22px;
  }

  .entregaveis__apoio {
    font-size: 1.0625rem;
  }

  .entregas {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 48px;
    align-items: stretch;
  }

  .entrega-peca {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 28px;
    padding: 20px 22px;
  }

  .entrega-peca--larga {
    grid-column: 1 / -1;
  }

  /* Nas peças de meia largura o par empilha: 5fr de coluna não sustenta uma
     tabela e um parágrafo lado a lado. */
  .entrega-peca:not(.entrega-peca--larga) {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }

  .amostra {
    padding: 16px 18px 18px;
  }

  .entrega-peca__nome {
    font-size: 1.125rem;
  }

  .entrega-peca__texto {
    font-size: 0.9375rem;
  }

  .doc {
    font-size: 0.8125rem;
  }

  .entrega-peca--larga .doc__c-cod {
    width: 104px;
  }

  .entregaveis__selo {
    margin-top: 38px;
  }

  /* 5 · Como trabalhamos — mesma repartição editorial da seção 2:
     título e fecho nas colunas 1–4, a lista nas 6–12.

     TERCEIRA tentativa de resolver a coluna esquerda, e a primeira feita com a
     página na tela. `start` deixava o título no alto de uma coluna que seguia
     vazia por 300px. `center` (Etapa 12) foi pior: medido no navegador, o
     título flutuava no meio de ~190px de nada em cima e ~200px embaixo, sem
     relação com coisa nenhuma — parecia defeito, não equilíbrio.

     QUARTA tentativa, e a que abandona a premissa errada das três anteriores.
     `start`, `center` e `space-between` tentaram DISTRIBUIR três elementos
     curtos por 725px de coluna, porque a lista ao lado tem cinco itens. Todas
     falharam pelo mesmo motivo: não existe distribuição boa de três coisas num
     vão que elas não têm por que preencher.

     A premissa errada era "as duas colunas precisam ter a mesma massa". Não
     precisam. Numa página editorial, a coluna de apoio termina onde o texto
     dela termina — o branco abaixo é margem, e margem não é sobra. Fio, título
     e fecho voltam a ser UM bloco no topo, alinhado com a etapa 01.

     Sintoma que provou o erro: na Etapa 17 o fecho ficava a ~350px do título,
     e o Breno leu os dois como ilhas soltas, não como pergunta e conclusão. */
  .metodo__grade {
    align-items: start;
  }

  .metodo__coluna {
    grid-column: 1 / 5;
    gap: 26px;
  }

  .metodo__etapas {
    grid-column: 6 / 13;
  }

  .etapa {
    padding: 24px 0;
    gap: 0 24px;
  }

  .etapa__num {
    padding-top: 6px;
    font-size: 0.8125rem;
  }

  .etapa__nome {
    font-size: 1.125rem;
  }

  .etapa__texto {
    font-size: 1rem;
  }

  .metodo__fecho {
    font-size: 1rem;
  }

  /* 6 · Quem responde — retrato e identificação nas colunas 1–4, texto nas 6–12 */
  .quem__cabecalho {
    max-width: 40ch;
    gap: 26px;
  }

  .quem__corpo {
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 26px 56px;
  }

  .quem__texto p {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  /* 7 · Contato — chamada nas colunas 1–5, formulário nas 7–12 */
  .contato__coluna {
    grid-column: 1 / 6;
    gap: 24px;
  }

  .contato__apoio {
    font-size: 1.125rem;
  }

  .form {
    grid-column: 7 / 13;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }

  .campo--largo {
    grid-column: 1 / -1;
  }

  .form__envio {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
  }

  /* Rodapé em três blocos na mesma malha */
  .rodape {
    padding-block: 44px 52px;
  }

  .rodape__marca {
    grid-column: 1 / 5;
  }

  .rodape__dados {
    grid-column: 5 / 9;
  }

  .rodape__links {
    grid-column: 9 / 13;
  }

  .rodape__marca img {
    height: 20px;
  }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* A geometria do card já não tem transição CSS (é rAF, e o JS salta direto
     para o estado final quando o movimento é reduzido). Resta o que ainda
     transiciona. */
  .menu-icone,
  .menu-icone::before,
  .topo,
  .btn,
  .entrega__uso,
  .entrega__texto,
  .link-pill,
  .campo input,
  .campo select,
  .campo textarea,
  .fase__op span,
  .rodape__links a {
    transition: none;
  }

  /* Nenhuma entrada: tudo já no estado final (texto e cartão) */
  .js .entra,
  .js .entra-card {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}