/* ============================================================
   OVERBUILD — contato.css (16/ago/2026)
   Folha PRÓPRIA de /contato — incluída SÓ nela, depois de style.css
   e pillnav.css. Nenhuma regra aqui vaza: tudo prefixado cx-, e os
   únicos seletores da casa que ela toca (.ruler, .btn-ghost) são
   sempre escopados dentro de um ancestral .cx-*.

   CONCEITO ESTRUTURAL: "LINHA DIRETA" — a página é uma transmissão
   entre dois pontos (você ⟶ a gente). Três capítulos:
     · HERO escuro     — a linha, tipografia grande, canal na mão;
     · MENSAGEM papel  — composer ESCURO flutuando sobre papel
                         (eco do quiz-card da home, padrão aprovado)
                         + trilho de canais em ledger de fio fino;
     · BRIEFING escuro — uma banda só: convite, razão em uma linha e
                         as duas portas (o briefing da home, /#quiz —
                         o que ENVIA de verdade via POST /api/briefing
                         — e as soluções).

   VETOS DO CLIENTE respeitados (dos comentários da casa):
     · nada de halo/glow desfocado em volta de formulário;
     · nada de quadrado laranja chapado;
     · WhatsApp: nem número inventado NEM "em ativação" — o canal não
       está confirmado, então a página não fala dele (18/ago/2026);
     · horário de atendimento e endereço: mesma regra, mesma saída;
     · LinkedIn fora do site inteiro.

   MOTION (3 técnicas, nada de scroll-jack):
     1. entrada do hero em escada (clip + translateY, uma vez);
     2. reveals por IntersectionObserver (transform/opacity, --d de
        stagger) + parallax leve de 2 camadas na arte do hero;
     3. micro: pulso do nó/pip, ponto viajando na linha, botão de
        copiar com morph "Copiado ✓".
   prefers-reduced-motion mata TUDO isso lá embaixo.

   CLS 0: arte absoluta, reveals só transform/opacity, nenhuma
   imagem sem dimensão, painel de sucesso só nasce de interação.
   ============================================================ */

/* ---------- tokens locais ---------- */
:root {
  /* erro sobre o card escuro do composer — salmão quente da mesma
     temperatura do âmbar (medido ≥ 4.5:1 sobre o card, ver QA) */
  --cx-danger: oklch(0.74 0.15 29);
  --cx-danger-line: oklch(0.60 0.19 29);
  /* âmbar-tinta pra texto PEQUENO sobre papel: o --accent-deep da casa
     (oklch .50) mede ~4.2:1 no papel — serve pra display grande, não
     pra corpo. Este desce a luz até passar de 4.5:1 medido. */
  --cx-amber-ink: oklch(0.45 0.125 49);
  --cx-paper: var(--light-1);
  --cx-card-edge: oklch(0.30 0.012 60);
}

/* ---------- casca comum ---------- */
.cx-wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 2.25rem); }
.cx-kicker {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--accent);
}

/* réguas da casa, recalibradas por capítulo (mesma gramática do
   .quiz-section > .ruler da home) */
.cx-sec .ruler { max-width: 72rem; margin-inline: auto; }
.cx-write .ruler { color: var(--light-ink-2); }
.cx-write .ruler::before, .cx-write .ruler::after { background: var(--light-rule); }

/* ═══════════════════════════════════════════════════════════
   1 · HERO — a linha direta
   ═══════════════════════════════════════════════════════════ */
/* o clip do HERO FICA: aqui ele é a MOLDURA da arte (o SVG é
   `preserveAspectRatio slice`, mede 1650px por projeto e é a arte que
   sangra de propósito). Não é máscara de bug de layout — nenhum
   conteúdo, nenhuma caixa de texto depende dele pra caber. */
.cx-hero {
  position: relative; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(600px, 94vh, 900px);
  min-height: clamp(600px, 94svh, 900px);
  padding-top: clamp(7rem, 15vh, 9.5rem);
  padding-bottom: clamp(3rem, 7vh, 4.5rem);
}

/* --- arte: transmissão (SVG inline no HTML; aqui só o palco) --- */
.cx-hero-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  contain: strict;
}
.cx-hero-art svg { width: 100%; height: 100%; display: block; }
.cx-art-layer { will-change: transform; }
/* nó "a gente": anéis pulsando do centro do próprio círculo */
.cx-pulse {
  transform-box: fill-box; transform-origin: center;
  animation: cx-pulse 3.2s var(--ease-spring) infinite;
}
.cx-pulse.p2 { animation-delay: 1.6s; }
@keyframes cx-pulse {
  0%   { transform: scale(0.35); opacity: 0.65; }
  70%  { transform: scale(2.6);  opacity: 0; }
  100% { transform: scale(2.6);  opacity: 0; }
}
/* mensagem viajando na linha (250 → 1180 em unidades do viewBox) */
.cx-travel {
  transform-box: fill-box; transform-origin: center;
  animation: cx-travel 7.5s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
@keyframes cx-travel {
  0%   { transform: translateX(0);     opacity: 0; }
  6%   { opacity: 0.9; }
  46%  { opacity: 0.9; }
  52%  { transform: translateX(930px); opacity: 0; }
  100% { transform: translateX(930px); opacity: 0; }
}
/* rótulos mono dos dois nós — texto NÍTIDO em código, nunca na arte */
.cx-art-tag {
  position: absolute; z-index: 1;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: var(--text-muted);
}
.cx-art-tag-a { left: clamp(1.2rem, 16vw, 17%); top: calc(50% + 1.4rem); }
.cx-art-tag-b { right: clamp(1.2rem, 8vw, 9%); top: calc(50% + 1.4rem); color: var(--accent-muted); }
/* grão seco por cima da arte (mesma textura da casa) */
.cx-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cx-hero-in { position: relative; z-index: 2; }
.cx-h1 {
  margin: 0 0 1.3rem; max-width: 15ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.02;
  letter-spacing: -0.03em; text-wrap: balance;
  color: var(--text-primary);
}
.cx-h1 em { font-style: italic; color: var(--accent); }
/* entrada em escada: cada linha nasce de um clip + sobe */
.cx-js .cx-h1 .cx-line {
  display: block; overflow: clip;
}
.cx-js .cx-h1 .cx-line > span {
  display: block; transform: translateY(110%);
  animation: cx-rise 0.9s var(--ease-spring) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes cx-rise { to { transform: translateY(0); } }
.cx-hero-sub {
  max-width: 46ch; margin: 0 0 2.2rem;
  font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.72;
  color: var(--text-secondary);
}
.cx-js .cx-fade {
  opacity: 0; animation: cx-fade 0.8s var(--ease-card) forwards;
  animation-delay: var(--d, 0.35s);
}
@keyframes cx-fade { to { opacity: 1; } }

.cx-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
/* ghost sobre fundo escuro: tinta clara (o token do botão é o mesmo,
   só re-apontado — é assim que a própria casa o usa no escuro) */
.cx-on-dark .btn-ghost { --ghost-ink: var(--text-primary); --ghost-hot: var(--accent-hot); }

/* --- ledger do hero: o canal na mão, sem rolar nada --- */
.cx-hero-ledger {
  /* DUAS células desde 18/ago (eram três: "Atendimento" e "Resposta"
     saíram por não serem fato confirmado). O max-width faz o fio de cima
     terminar ONDE o conteúdo termina — com a régua de 3 colunas sobrando
     um terço vazio, o fio corrido lia como célula faltando. */
  margin-top: clamp(2.6rem, 6vh, 4rem); max-width: 46rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border-subtle);
}
.cx-hcell {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.1rem 1.4rem 0.2rem 0;
}
.cx-hcell + .cx-hcell { border-left: 1px solid var(--border-subtle); padding-left: 1.4rem; }
.cx-hcell-k {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-muted);
}
.cx-hcell-v { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.95rem; color: var(--text-secondary); }
.cx-hcell-v a { color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid var(--accent-line); padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-card), border-color var(--dur-micro) var(--ease-card); }
.cx-hcell-v a:hover, .cx-hcell-v a:focus-visible { color: var(--accent-hot); border-color: var(--accent); }

/* fio de rolagem no pé do hero */
.cx-cue {
  position: absolute; left: 50%; bottom: 1.1rem; z-index: 2;
  width: 1px; height: 52px; overflow: clip;
  background: oklch(from var(--text-muted) l c h / 0.25);
}
.cx-cue::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(-100%);
  animation: cx-cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cx-cue {
  0% { transform: translateY(-100%); } 55% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ═══════════════════════════════════════════════════════════
   reveals de rolagem (sistema PRÓPRIO — o .reveal da casa depende
   do script.js da home, que esta página não carrega)
   ═══════════════════════════════════════════════════════════ */
.cx-js .cx-rev { opacity: 0; transform: translateY(26px); }
.cx-js .cx-rev.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-enter) var(--ease-spring),
              transform var(--dur-enter) var(--ease-spring);
  transition-delay: var(--d, 0s);
}

/* ═══════════════════════════════════════════════════════════
   2 · MENSAGEM — papel, composer escuro + trilho de canais
   ═══════════════════════════════════════════════════════════ */
/* ⚠️ SEM `overflow: clip` AQUI (removido em 18/ago/2026). Ele existia e
   escondia o BLOQUEANTE 2: o composer media 353,3px de largura dentro de
   um wrap de 288px e vazava 49,3px a 320 / 9,3px a 360. Máscara não é
   correção — a causa foi tratada na régua de 1080 lá embaixo, e a régua
   deste capítulo agora é o próprio documento: se algo sangrar de novo,
   a barra de rolagem horizontal aparece e denuncia. */
.cx-write {
  position: relative;
  background: var(--cx-paper);
  padding-block: clamp(4rem, 9vh, 6.5rem);
  /* fio de emenda dos capítulos, reto como o resto da casa */
  border-top: 1px solid oklch(0.9 0.012 65);
  border-bottom: 1px solid oklch(0.9 0.012 65);
}
.cx-write .cx-grain { opacity: 0.03; }
.cx-write-head { position: relative; z-index: 1; margin-top: 2.4rem; }
.cx-h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06;
  letter-spacing: -0.025em; text-wrap: balance;
  color: var(--light-ink);
}
.cx-h2 em { font-style: italic; color: var(--accent-deep); }
.cx-write-sub {
  max-width: 56ch; margin: 0;
  font-size: clamp(0.98rem, 1.5vw, 1.06rem); line-height: 1.7;
  color: var(--light-ink-2);
}

.cx-write-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 4.5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: start;
  margin-top: clamp(2.6rem, 6vh, 3.8rem);
}

/* --- o composer: card ESCURO sobre papel (gramática do quiz-card,
       sombra em dois estágios e NENHUM halo desfocado) --- */
.cx-composer {
  background: linear-gradient(180deg, oklch(0.155 0.007 64), oklch(0.122 0.006 62));
  border: 1px solid var(--cx-card-edge);
  border-radius: 20px;
  padding: clamp(1.4rem, 3.4vw, 2.1rem);
  box-shadow: 0 2px 6px oklch(0.2 0.02 60 / 0.18),
              0 28px 60px -34px oklch(0.15 0.03 55 / 0.55);
}
.cx-card-tag {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-muted);
}
.cx-card-h {
  margin: 0 0 0.5rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.15;
  letter-spacing: -0.02em; color: var(--text-primary);
}
.cx-card-d { margin: 0 0 1.6rem; font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); }
.cx-card-d b { color: var(--text-primary); font-weight: 600; }

.cx-form { display: flex; flex-direction: column; gap: 1.05rem; }
.cx-field { display: flex; flex-direction: column; gap: 0.45rem; }
.cx-field label {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-secondary);
}
.cx-field .cx-opt { text-transform: none; letter-spacing: 0.04em; color: var(--text-muted); }
.cx-field input, .cx-field textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 1rem; /* ≥16px: iOS não dá zoom */
  color: var(--text-primary);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.78rem 0.95rem;
  caret-color: var(--accent);
  transition: border-color var(--dur-micro) var(--ease-card),
              box-shadow var(--dur-micro) var(--ease-card);
}
.cx-field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }
.cx-field input::placeholder, .cx-field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.cx-field input:focus-visible, .cx-field textarea:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.22);
}
/* estado inválido: fio quente + recado POR CAMPO, não caça-erro */
.cx-field.is-invalid input, .cx-field.is-invalid textarea {
  border-color: var(--cx-danger-line);
}
.cx-field.is-invalid input:focus-visible, .cx-field.is-invalid textarea:focus-visible {
  box-shadow: 0 0 0 3px oklch(from var(--cx-danger-line) l c h / 0.25);
  border-color: var(--cx-danger-line);
}
.cx-err {
  display: none; margin: 0;
  font-size: 0.82rem; line-height: 1.5; color: var(--cx-danger);
}
.cx-field.is-invalid .cx-err { display: block; }

/* aviso de mensagem longa (mailto tem teto prático de URL) */
.cx-hint { display: none; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
.cx-hint.is-on { display: block; }

.cx-form .btn { width: 100%; margin-top: 0.3rem; }
.cx-form .btn[disabled] { opacity: 0.72; pointer-events: none; }
.cx-dest {
  margin: 0.15rem 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.cx-dest b { color: var(--text-secondary); font-weight: 500; text-transform: none; letter-spacing: 0.05em; }

.cx-status { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.cx-status:empty { display: none; }
.cx-status.is-bad { color: var(--cx-danger); }

/* ⚠️ ANEL DE FOCO AZUL (QA 17/ago, corrigido 18/ago). O foco da casa é
   `:where(a, button, input, textarea):focus-visible` (style.css) — e
   :where() tem especificidade ZERO justamente pra ser sobrescrível. O
   <h4> do painel recebe foco por SCRIPT (tabindex="-1", pra levar o
   leitor de tela até o resultado) e não é nenhuma dessas quatro tags:
   ficava sem regra nenhuma e o Chrome desenhava o anel AZUL padrão dele
   por cima do card escuro. Foco por script não desenha nada (é
   navegação, não interação); foco visível usa o âmbar do site. */
.cx-after-h:focus { outline: none; }
.cx-after-h:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 3px; }

/* painel pós-envio: honesto — mailto não confirma nada, então a gente
   entrega o plano B inteiro (copiar mensagem / endereço / reabrir) */
.cx-after {
  margin-top: 1.1rem; padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid oklch(from var(--success) l c h / 0.35);
  border-radius: var(--radius-md);
  background: oklch(from var(--success) l c h / 0.06);
}
.cx-after[hidden] { display: none; }
.cx-after-h {
  margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; color: var(--text-primary);
}
.cx-after-h svg { width: 1.05rem; height: 1.05rem; stroke: var(--success); stroke-width: 2.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cx-after-d { margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }
.cx-after-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cx-manual { margin-top: 0.8rem; }
.cx-manual[hidden] { display: none; }
.cx-manual textarea {
  width: 100%; min-height: 7rem;
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55;
  color: var(--text-secondary); background: var(--surface-inset);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 0.7rem 0.8rem; resize: vertical;
}

/* botão de copiar — mono pequeno, borda fio, morph "Copiado ✓" */
.cx-copy {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-forge);
  padding: 0.5rem 0.75rem; min-height: 34px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-card), border-color var(--dur-micro) var(--ease-card),
              transform var(--dur-micro) var(--ease-spring);
}
.cx-copy:hover, .cx-copy:focus-visible { color: var(--accent-hot); border-color: var(--accent-line); }
.cx-copy:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cx-copy:active { transform: scale(0.97); }
.cx-copy.is-copied { color: var(--success); border-color: oklch(from var(--success) l c h / 0.5); }
/* a variante que mora no papel */
.cx-on-paper .cx-copy { color: var(--light-ink-2); border-color: var(--light-rule); }
.cx-on-paper .cx-copy:hover, .cx-on-paper .cx-copy:focus-visible { color: var(--cx-amber-ink); border-color: var(--accent-deep); }
.cx-on-paper .cx-copy.is-copied { color: oklch(0.45 0.09 150); border-color: oklch(0.55 0.09 150 / 0.6); }

/* ⚠️ BLOQUEANTE 1 (QA 17/ago, corrigido 18/ago) — A ILHA DENTRO DA ILHA.
   O capítulo é .cx-on-paper, mas o composer é um card ESCURO flutuando
   nele. As três regras de PAPEL acima (0,2,0) ganhavam das regras
   escuras de .cx-copy (0,1,0) e pintavam tinta de papel nos botões que
   moram DENTRO do card escuro — os 3 do painel de sucesso, nos 4
   estados. Medido antes, tinta computada × fundo em pixel:
     repouso  --light-ink-2  rgb(70,65,61)   sobre rgb(15,18,13) → 1,86:1
     hover    --cx-amber-ink rgb(138,58,0)   sobre rgb(15,18,13) → 2,41:1
     foco     --cx-amber-ink rgb(138,58,0)   sobre rgb(15,18,13) → 2,41:1
     copiado  verde de papel rgb(43,99,58)   sobre rgb(15,18,13) → 2,65:1
   Nenhum passava de 3:1; o mínimo AA pra texto pequeno é 4,5:1.
   Aqui a ilha escura é devolvida aos tokens escuros — mesma regra, uma
   camada de especificidade acima (0,3,0). Vale pra QUALQUER .cx-copy que
   nasça dentro do composer, hoje ou depois. */
.cx-on-paper .cx-composer .cx-copy { color: var(--text-secondary); border-color: var(--border-default); }
.cx-on-paper .cx-composer .cx-copy:hover,
.cx-on-paper .cx-composer .cx-copy:focus-visible { color: var(--accent-hot); border-color: var(--accent-line); }
.cx-on-paper .cx-composer .cx-copy.is-copied { color: var(--success); border-color: oklch(from var(--success) l c h / 0.5); }

/* --- o trilho: canais em ledger de fio fino --- */
.cx-rail { position: sticky; top: clamp(6rem, 12vh, 7.5rem); display: flex; flex-direction: column; }
.cx-rail-k {
  margin: 0 0 0.2rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--cx-amber-ink);
}
.cx-ledger { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.cx-row {
  display: grid; grid-template-columns: minmax(7.2rem, auto) 1fr auto;
  align-items: center; column-gap: 1rem; row-gap: 0.3rem;
  padding-block: 0.95rem;
  border-top: 1px solid var(--light-rule);
}
.cx-ledger .cx-row:last-child { border-bottom: 1px solid var(--light-rule); }
.cx-row-k {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--light-ink-2);
  align-self: center;
}
.cx-row-v { font-size: 0.95rem; color: var(--light-ink); min-width: 0; overflow-wrap: anywhere; }
.cx-row-v a {
  color: var(--light-ink); text-decoration: none;
  border-bottom: 1px solid oklch(from var(--accent-deep) l c h / 0.45);
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-card), border-color var(--dur-micro) var(--ease-card);
}
.cx-row-v a:hover, .cx-row-v a:focus-visible { color: var(--cx-amber-ink); border-color: var(--accent-deep); }
.cx-row-v .cx-ext { font-size: 0.8em; color: var(--cx-amber-ink); }
.cx-row-note {
  grid-column: 1 / -1; margin: 0;
  font-size: 0.84rem; line-height: 1.55; color: var(--light-ink-2);
}
/* WhatsApp "em ativação": pip âmbar respirando + valor em âmbar-tinta.
   Estado dito com todas as letras — nenhum número inventado. */
.cx-row.is-pending .cx-row-v { display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.92rem; color: var(--cx-amber-ink); }
.cx-pip { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--accent-deep); }
.cx-pip::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--accent-deep);
  animation: cx-pip 2.6s var(--ease-card) infinite;
}
@keyframes cx-pip {
  0% { transform: scale(0.4); opacity: 0.8; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}

/* ⚠️ O RETRATO SAIU (18/ago/2026). Eram ~90 linhas desenhando uma
   moldura 4:5 com hachura, marcas de corte e selo — um espaço reservado
   pra uma foto que não existe. No 360 media 466,7px de altura: 72,9% de
   uma tela inteira gasta pra dizer "em produção", bem no meio do trilho
   de canais de uma página de conversão. Quando a foto real existir, ela
   entra no lugar como <img> com width/height (CLS 0) — a moldura vazia
   não volta. */
.cx-rail-note { margin: 1.6rem 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--light-ink-2); }
.cx-rail-note a { color: var(--light-ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: oklch(from var(--accent-deep) l c h / 0.5); }
.cx-rail-note a:hover, .cx-rail-note a:focus-visible { color: var(--cx-amber-ink); text-decoration-color: var(--accent-deep); }

/* ═══════════════════════════════════════════════════════════
   3 · BRIEFING — uma banda, uma decisão
   ═══════════════════════════════════════════════════════════ */
/* idem: sem clip. Nada aqui é desenhado pra estourar a caixa. */
.cx-route { position: relative; padding-block: clamp(4.5rem, 10vh, 7rem) 0; }
/* ⚠️ 18/ago/2026 — saíram daqui .cx-route-grid, .cx-steps/.cx-step (o
   ledger de 3 passos numerados) e o .cx-close separado. Eram dois
   blocos, dois títulos e dois botões pra pedir UM clique, mais uma aula
   de processo no meio. Numa página de conversão isso é burocracia. Uma
   banda só: convite, razão em uma linha, porta principal e lateral. */
.cx-final { text-align: center; max-width: 46rem; margin-inline: auto;
  padding-block: clamp(2.6rem, 6vh, 4rem) clamp(4rem, 9vh, 6rem); }
.cx-final-k {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-muted);
}
.cx-final-h {
  margin: 0 auto 1.1rem; max-width: 18ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.08;
  letter-spacing: -0.025em; text-wrap: balance;
  color: var(--text-primary);
}
.cx-final-h em { font-style: italic; color: var(--accent); }
.cx-final-d {
  margin: 0 auto 2rem; max-width: 50ch;
  font-size: clamp(0.98rem, 1.5vw, 1.06rem); line-height: 1.7;
  color: var(--text-secondary); text-wrap: pretty;
}
.cx-final-acts { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ═══════════════════════════════════════════════════════════
   responsivo — 1080 (splits empilham) · 640 · 380 (mobile 360)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  /* ⚠️ BLOQUEANTE 2 — A CAUSA (QA 17/ago, corrigido 18/ago).
     `1fr` é açúcar pra `minmax(AUTO, 1fr)`: o mínimo da trilha é o
     MIN-CONTENT do item, não zero. O .btn da casa é `white-space:
     nowrap`, então o submit ("Abrir o e-mail preenchido →") tem
     min-content de 319,3px; somando os 2×16px de padding e as duas
     bordas do card, o composer não conseguia medir menos de 353,3px —
     dentro de um .cx-wrap de 288px no 320. Sangria medida: +49,3px a
     320 e +9,3px a 360, escondida pelo overflow:clip do capítulo.
     A regra do DESKTOP já se protegia com minmax(0, …); esta linha
     tinha perdido a trava na hora de empilhar. `minmax(0, 1fr)` devolve
     a trava — a trilha passa a poder encolher até a largura do wrap. */
  .cx-write-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-composer { max-width: 46rem; }
  .cx-rail { position: static; max-width: 46rem; }
}

/* segunda trava, no próprio botão: com a trilha travada em 288px o
   rótulo `nowrap` ainda estouraria a CAIXA do botão. Abaixo de 400px
   ele passa a poder quebrar em duas linhas — cabe em vez de vazar.
   `min-width: 0` mata o min-content automático em qualquer largura. */
.cx-form .btn { min-width: 0; }
.cx-nb { white-space: nowrap; }
@media (max-width: 400px) {
  .cx-form .btn {
    white-space: normal; text-wrap: balance;
    padding-inline: 1rem; letter-spacing: 0.1em; line-height: 1.4;
    padding-block: 0.8rem;
  }
}
@media (max-width: 640px) {
  /* ⚠️ HERO CURTO NO MOBILE (QA 17/ago, corrigido 18/ago). Media 837px
     no 360×640 — 130,8% da dobra: a página de conversão começava com
     uma tela e um terço só de abertura. Numa página cujo trabalho é
     fazer a pessoa escrever, hero alto é custo puro. Cada corte abaixo
     é medido, não estético: o min-height desce, o respiro do topo
     encolhe pro tamanho da pill da nav, o display cede 3px e o ledger
     encosta. Somado ao ledger que perdeu duas células (horário e prazo
     de resposta, que não eram fato), a abertura passa a caber. */
  .cx-hero {
    min-height: clamp(480px, 86svh, 700px);
    padding-top: 5.9rem; padding-bottom: 1.5rem;
  }
  .cx-kicker { margin-bottom: 0.7rem; }
  .cx-h1 { margin-bottom: 1rem; font-size: clamp(2.3rem, 9.4vw, 2.9rem); }
  .cx-hero-sub { margin-bottom: 1.6rem; line-height: 1.62; }
  .cx-hero-cta { gap: 0.7rem; }
  .cx-hero-ledger { grid-template-columns: 1fr; border-top: 0; margin-top: 1.25rem; }
  .cx-hcell { border-top: 1px solid var(--border-subtle); padding: 0.7rem 0 0.5rem; }
  .cx-hcell + .cx-hcell { border-left: 0; padding-left: 0; }
  .cx-hcell-v { gap: 0.5rem 0.9rem; }
  /* ⚠️ FIO DE ROLAGEM POR CIMA DO LEDGER (QA 17/ago). O .cx-cue mora
     colado no pé do hero (bottom: 1.1rem, z-index 2) — e com o hero
     curto o ledger chega lá embaixo: os dois ocupavam a MESMA faixa
     (cue 767,4–819,4 × ledger 562,5–789, medido). Some no mobile: com
     a dobra cabendo, não há mais o que sugerir — a rolagem é óbvia. */
  .cx-cue { display: none; }

  /* ⚠️ A LINHA DA ARTE CORTANDO O CTA (QA 17/ago, corrigido 18/ago).
     O SVG é `xMidYMid slice`: o fio da transmissão cai SEMPRE no meio
     vertical do hero — e no 360 o meio do hero era exatamente onde mora
     o botão "Escrever a mensagem" (medido: fio em y 418,5 × CTA
     417,7–527,3). Deslocar a arte NÃO resolve: varri translateY de
     −20% a −48% nos três mobiles e só −38% ficava livre nos três, com
     6,3px de folga espremida entre a pill da nav e o kicker — folga que
     a primeira troca de fonte ou uma linha a mais de copy come inteira.
     Trocar um corte no botão por um corte na manchete não é correção.
     No estreito o fio SAI e ficam os ARCOS (atmosfera, e no 360 eles
     são o que de fato se lê atrás do texto) mais o NÓ âmbar pulsando —
     a transmissão chegando. Nada horizontal cruza nada, em qualquer
     altura de hero. A partir de 641px o fio volta inteiro. */
  .cx-art-wire { display: none; }
  .cx-art-tag-a, .cx-art-tag-b { display: none; }

  .cx-row { grid-template-columns: minmax(6rem, auto) 1fr; }
  .cx-row .cx-copy { grid-column: 1 / -1; justify-self: start; }
  .cx-after-row { flex-direction: column; align-items: stretch; }
  .cx-after-row .cx-copy { justify-content: center; min-height: 44px; }
  /* alvo de toque: no dedo o "copiar" do ledger e da dobra também
     merece os 44px do painel — WCAG 2.5.8 pede 24, a casa entrega 44. */
  .cx-hero-ledger .cx-copy, .cx-ledger .cx-copy { min-height: 44px; padding-inline: 0.9rem; }
  .cx-final-acts { flex-direction: column; align-items: stretch; }
}
@media (max-width: 380px) {
  /* régua do 360: tudo respira com 1rem e nada encosta na borda */
  .cx-wrap { padding-inline: 1rem; }
  .cx-h1 { font-size: 2.2rem; }
  .cx-hero { padding-top: 5.6rem; }
  .cx-hero-cta .btn, .cx-hero-cta .btn-ghost { width: 100%; }
  .cx-composer { padding: 1.15rem 1rem 1.3rem; border-radius: 16px; }
  .cx-row { grid-template-columns: 1fr; row-gap: 0.2rem; padding-block: 0.85rem; }
  /* o ghost da casa também é nowrap: no 320 o rótulo mais longo
     ("Escrever a mensagem →") só cabe cedendo tracking. */
  .cx-hero-cta .btn, .cx-hero-cta .btn-ghost { padding-inline: 0.9rem; letter-spacing: 0.1em; }
}

/* ═══════════════════════════════════════════════════════════
   reduced-motion — página inteira parada, nada desaparece
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cx-js .cx-h1 .cx-line > span { animation: none; transform: none; }
  .cx-js .cx-fade { animation: none; opacity: 1; }
  .cx-js .cx-rev { opacity: 1; transform: none; transition: none; }
  .cx-pulse, .cx-travel, .cx-cue::after, .cx-pip::after { animation: none; }
  .cx-travel { opacity: 0; }
  .cx-cue { display: none; }
  /* ⚠️ o `transform: none` vale pras CAMADAS (o parallax), não pro
     <svg>: o translateY do mobile é COMPOSIÇÃO (tira a linha de cima do
     CTA), não movimento. Zerar ele aqui devolveria o corte no botão pra
     quem pediu menos animação. */
  .cx-art-layer { will-change: auto; transform: none !important; }
  .cx-copy, .cx-field input, .cx-field textarea, .cx-row-v a, .cx-hcell-v a { transition: none; }
}