/**
 * LP — sites.tecna.com.br
 *
 * Tokens copiados do site (/Volumes/hotdocs/sites-cms/tecna/assets/css/index.css
 * :root).
 *
 * A LP era escura inteira, herdando a capa do relatório. Não era a marca: o
 * tecna.com.br é claro. Em 01/08/2026 hero e palco viraram claros, e o que
 * continua escuro é o rodapé — como no site.
 *
 * PENDENTE: a capa e o bloco de oferta do relatório (`packages/relatorio`)
 * seguem em `--dark-deep`. Quem sai do gate agora vai de claro para quase-preto.
 * Alinhar exige decidir o que fazer com a versão impressa, que tem
 * `print-color-adjust: exact` justamente pra manter o fundo escuro.
 *
 * Regra herdada das LPs: sem menu de navegação. Todo link que não leva ao
 * formulário é uma saída.
 */

:root {
  --accent: #EF304F;
  --accent-light: #ff4d6a;
  --accent-dark: #c9203c;
  --petrol: #022B3A;
  --dark: #2D3F48;
  --dark-deep: #0f1419;
  --success: #10b981;
  --white: #fff;
  --bg: #f7f7f7;
  --bg-light: #fafafa;
  --border: #dfe2e6;
  --border-light: #eef0f2;
  --text: #51555E;
  --text-light: #8b8f97;
  /* `--text-light` dá 2,97:1 sobre o fundo claro — reprova para texto pequeno.
     Dica de campo, nota e linha do console usam este, medido em 4,9:1. */
  --text-muted: #666b74;
  /* `--border` é decorativo (divisor, moldura). Contorno de campo precisa de 3:1
     contra o fundo da seção, e nenhum cinza claro chega lá. */
  --border-campo: #7f868e;
  --zap: #25d366;
  --accent-glow: rgba(239, 48, 79, 0.15);
  --container: 1140px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Qualquer `display` de classe vence o `[hidden]` da folha do navegador — e aí
   elemento escondido aparece. Mordeu no botão do relatório numa sessão de
   wizard, que não tem relatório nenhum. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--petrol);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.75rem;
}

.caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.caption::before { content: '+ '; }

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--white);
  color: var(--petrol);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
}

/* ---------- header: só o logo ----------
   Sem menu, sem telefone, sem WhatsApp. Contato só depois de "contratar" — antes
   disso, todo caminho que não seja a caixa de endereço é uma saída. */
.cabecalho {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  padding: 1.75rem 0;
}
.cabecalho__logo { width: 130px; display: block; }
.cabecalho__logo svg { width: 100%; height: auto; display: block; }

/* O logo vem com a marca-palavra em branco, para fundo escuro. Em fundo claro só
   ela troca de cor: o `rect` branco é o vão do `</>` dentro do quadrado vermelho
   e tem que continuar branco. Daí o seletor pegar `path` e não `[fill=white]`
   solto. Regra de CSS vence atributo de apresentação, então nada de editar os
   cinco SVGs inline. */
.cabecalho--claro .cabecalho__logo svg path[fill='white'],
.palco__logo svg path[fill='white'] { fill: var(--petrol); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 28px -10px var(--accent);
}
.btn--accent:hover { background: var(--accent-light); }
.btn--fantasma {
  background: var(--white);
  color: var(--petrol);
  border: 1px solid var(--border);
}
.btn--fantasma:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn--zap { background: var(--zap); color: #fff; }
.btn--zap:hover { background: #1da851; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- hero ----------
   Claro, como o resto da marca. O quase-preto de antes não vinha do site: era
   herança da capa do relatório. */
.hero {
  position: relative;
  background: linear-gradient(180deg, #fdfdfe 0%, #eef1f4 100%);
  color: var(--text);
  overflow: hidden;
  padding: 9rem 0 5.5rem;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero__orb--1 {
  width: 560px; height: 560px;
  top: -200px; right: -140px;
  background: radial-gradient(circle, rgba(239, 48, 79, 0.16), transparent 70%);
}
.hero__orb--2 {
  width: 380px; height: 380px;
  bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(2, 43, 58, 0.08), transparent 70%);
}
.hero__grade {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 43, 58, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }
/* Centralizado como o criativo (Ad2.png), que é de onde vem o tráfego — o
   anúncio e a página têm a mesma composição.
   Alinhado à esquerda, em tela larga o bloco travava em 780px e deixava uns 60%
   de vazio à direita. */
/* 920px e não 780: a 3,9rem o h1 só fecha em duas linhas a partir de 880px, e
   abaixo disso ele quebrava em três e ficava mais estreito que o parágrafo —
   título mais estreito que o corpo lê como defeito. A folga de 40px existe
   porque a medida depende da renderização da fonte. */
.hero__inner {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.selo {
  display: inline-block;
  padding: 0.45rem 1.05rem;
  background: rgba(239, 48, 79, 0.09);
  border: 1px solid rgba(239, 48, 79, 0.22);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* accent puro sobre claro fica em ~3:1 e é o que tornava a tag ilegível;
     accent-dark passa de 4.5:1 sobre o preenchimento. */
  color: var(--accent-dark);
  margin-bottom: 1.75rem;
}
.hero h1 {
  color: var(--petrol);
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  font-weight: 800;
  margin: 0 auto 1.25rem;
  max-width: 26ch;
  /* Centralizado, uma última linha órfã fica muito mais visível do que alinhado
     à esquerda. `balance` distribui as três linhas; onde não houver suporte, cai
     na quebra normal. */
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero__sub {
  color: var(--text);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  /* mais estreito que os 58ch de antes: centralizado, linha longa cansa mais */
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* ---------- caixa de endereço ----------
   Moldura de navegador do criativo (Ad2.png): calha cinza com as setas, campo
   branco por dentro. É o elemento de maior peso da página — o lead reconhece
   "barra de endereço" antes de ler qualquer texto.

   O CTA já morou fora da moldura, numa linha só dele, porque lado a lado os dois
   liam como botões irmãos. Desde 07/08/2026 ele volta pra direita do campo, mas
   **dentro** da calha: ali ele é o "ir" da barra de endereço, não um segundo
   botão competindo com ela. A saída para quem não tem site desceu e virou botão
   de borda — o contraste sólido × contornado é o que separa as duas ações. */
.analise {
  margin-top: 2.75rem;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.navegador {
  display: flex;
  align-items: center;
  /* o hero é centralizado, mas endereço se lê da esquerda — e centralizado o
     texto pularia de posição a cada tecla digitada */
  text-align: left;
  gap: 0.75rem;
  background: #e6eaee;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.5rem;
  box-shadow: 0 24px 48px -30px rgba(2, 43, 58, 0.6);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.navegador:focus-within {
  border-color: rgba(239, 48, 79, 0.45);
  box-shadow: 0 24px 48px -26px rgba(239, 48, 79, 0.45);
}
.navegador__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.55rem;
  flex-shrink: 0;
}
.navegador__chrome svg {
  width: 18px;
  height: 18px;
  color: #97a0a9;
}
.navegador__campo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 12px;
  padding: 0 0.9rem;
  box-shadow: 0 1px 2px rgba(2, 43, 58, 0.07);
}
.navegador__esquema {
  color: #aab1b9;
  font-size: 1.05rem;
  flex-shrink: 0;
  user-select: none;
}
.navegador__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--petrol);
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.9rem 0.25rem;
}
.navegador__input::placeholder { color: #9aa0a8; font-weight: 400; }
/* Dentro da calha, encostado no campo. `flex-shrink: 0` porque o rótulo é o que
   define a largura mínima — quem cede espaço é o campo. */
.navegador__ir {
  flex-shrink: 0;
  padding: 0.9rem 1.5rem;
}

/* A saída de quem não tem site: contornada, nunca sólida — duas ações sólidas
   na mesma tela empatam a decisão. */
.analise__acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.35rem;
}
.btn--grande {
  padding: 1.1rem 2rem;
  font-size: 1rem;
}
.btn__seta { width: 18px; height: 18px; flex-shrink: 0; }
.analise__alternativa { font-weight: 500; }
.analise__erro {
  display: none;
  color: var(--accent-dark);
  font-size: 0.9rem;
  margin-top: 0.9rem;
}
.analise__erro[data-visivel='true'] { display: block; }
.analise__nota {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 1.25rem;
}

/* ---------- prova ----------
   Mesmo desenho do bloco de números de tecna.com.br (`.stats` em
   sites-cms/tecna/assets/css/index.css): centralizado, divisor vertical entre as
   colunas, unidade em caixa alta vermelha e marca d'água vazada embaixo. A LP
   tinha inventado uma variante alinhada à esquerda, sem divisores e com a marca
   d'água preenchida no canto — que ainda por cima sangrava pela direita. */
.prova {
  position: relative;
  padding: 5.5rem 0 6.5rem;
  background: var(--white);
  overflow: hidden;
}
.prova__marca {
  position: absolute;
  bottom: -0.35em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 12vw, 13rem);
  -webkit-text-stroke: 1.5px rgba(2, 43, 58, 0.09);
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}
.prova > .container { position: relative; z-index: 1; }
.prova__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2.75rem;
  text-align: center;
}
.prova__grid > * { position: relative; }
.prova__grid > *::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50px;
  background: var(--border);
}
.prova__grid > *:last-child::after { display: none; }
.stat__numero {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  color: var(--petrol);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.25rem;
}
.stat__unidade {
  display: block;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.125em;
  margin-bottom: 0.75rem;
}
.stat__rotulo {
  font-size: 0.95rem;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1.5;
  margin-inline: auto;
  max-width: 24ch;
}

/* ---------- faq ---------- */
.faq-secao {
  padding: 5.5rem 0;
  background: var(--bg);
}
.faq-secao__cabecalho {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto 3rem;
}
.faq-secao h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  margin-top: 0.5rem;
}
.faq { max-width: 780px; margin-inline: auto; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  margin-bottom: 0.85rem;
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  padding: 1.25rem 3rem 1.25rem 1.5rem;
  font-weight: 600;
  color: var(--petrol);
  font-size: 1rem;
  list-style: none;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p {
  padding: 0 1.5rem 1.4rem;
  font-size: 0.95rem;
}

/* ---------- rodapé ---------- */
.rodape {
  background: var(--petrol);
  color: rgba(255, 255, 255, 0.55);
  padding: 3rem 0 2.5rem;
  font-size: 0.85rem;
}
.rodape__logo { width: 140px; margin-bottom: 1.5rem; }
.rodape__logo svg { width: 100%; height: auto; display: block; }
.rodape p { margin-bottom: 0.4rem; }
.rodape a { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 900px) {
  .prova__grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
  /* com duas colunas o divisor da 2ª coluna fica pendurado na borda */
  .prova__grid > *:nth-child(2n)::after { display: none; }
}
@media (max-width: 720px) {
  .hero { padding: 7rem 0 4rem; }
  .prova { padding: 3.5rem 0 4.5rem; }
  .faq-secao { padding: 3.5rem 0; }
  .analise__acoes { align-items: stretch; flex-direction: column; gap: 1rem; }
  .analise__acoes .btn { width: 100%; }
  /* As setas e o `https://` são adorno de moldura — leem como navegador na tela
     larga e viram ruído no celular, onde a calha já quebrou em duas linhas e
     elas comiam 89px dos 319px sem sobrar largura pro endereço. Ambos são
     `aria-hidden`, então sumir não tira nada de quem lê por leitor de tela. */
  .navegador__chrome { display: none; }
  .navegador__esquema { display: none; }
  .navegador__input { font-size: 1.05rem; }
  /* No celular o CTA não cabe ao lado do campo sem espremer o endereço a poucos
     caracteres. Continua dentro da calha, mas na linha de baixo. */
  .navegador { flex-wrap: wrap; }
  .navegador__ir { width: 100%; }
  .prova__marca { display: none; }
}
@media (max-width: 460px) {
  .prova__grid { grid-template-columns: 1fr; }
  .prova__grid > *::after { display: none; }
}

/* Sem JS a página tem que funcionar inteira. */
.js .revelar { opacity: 0; transform: translateY(18px); }
.js .revelar[data-visivel='true'] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   Tela de análise e gate
   ========================================================================= */

.corpo-palco { background: var(--bg); }

.palco {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #fdfdfe 0%, #eef1f4 100%);
  color: var(--text);
  overflow: hidden;
  padding: 3rem 0;
}
.palco__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
/* display:block é obrigatório — no wizard o logo é <a>, e width não aplica em
   elemento inline. Sem isso ele ocupa a tela inteira. */
.palco__logo { display: block; width: 130px; margin-bottom: 2.5rem; }
.palco__logo svg { width: 100%; height: auto; display: block; }
.palco__titulo {
  color: var(--petrol);
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
  word-break: break-word;
}
.palco__sub {
  color: var(--text);
  max-width: 54ch;
  transition: color var(--transition);
}
.palco__sub[data-destaque='true'] { color: var(--accent-dark); }
.palco__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- progresso: console à esquerda, checklist à direita ----------
   A mensagem viva é o que segura quem espera; a lista é a referência de quanto
   falta. Nesta ordem a primeira fica no caminho natural de leitura, e o console
   estica até a altura da lista em vez de flutuar numa faixa fina. */
.progresso {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
/* Na coluna, o console tem a altura da lista — e aí as linhas ancoradas embaixo
   deixavam um vão branco de mais de dez linhas no começo da espera, que é
   justamente quando o lead está olhando. Aqui elas empilham de cima pra baixo e
   o desvanecido troca de lado; o corte, quando enche, continua sendo o mais
   antigo saindo. */
.progresso .console {
  margin-top: 0;
  height: auto;
  min-height: 12rem;
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 2.4rem);
  mask-image: linear-gradient(0deg, transparent 0, #000 2.4rem);
}
.progresso .etapas { margin-top: 0; }

/* ---------- lista de etapas ---------- */
.etapas {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.etapa {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  color: #a7adb5;
  transition: color var(--transition);
}
.etapa__marca {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
}
.etapa__texto { font-size: 0.98rem; }

.etapa[data-estado='rodando'] { color: var(--petrol); font-weight: 500; }
.etapa[data-estado='rodando'] .etapa__marca {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: girar 0.8s linear infinite;
}
.etapa[data-estado='ok'] { color: var(--text); }
.etapa[data-estado='ok'] .etapa__marca {
  border-color: var(--success);
  background: var(--success);
}
.etapa[data-estado='ok'] .etapa__marca::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}
/* fonte que não respondeu ou está desligada: sai discreta, nunca como erro */
.etapa[data-estado='pulado'] { color: #bfc4cb; }
.etapa[data-estado='pulado'] .etapa__marca::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 10px;
  height: 2px;
  background: #c8ccd2;
}
.etapa[data-estado='falhou'] { color: #bfc4cb; }
.etapa[data-estado='falhou'] .etapa__marca { border-color: #d6dade; }

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- console ----------
   A lista acima diz em que pé está; aqui a linha é escrita e sobe, para a espera
   não parecer travada. Altura fixa com as linhas ancoradas embaixo: a mais nova
   entra e empurra as antigas para fora pelo topo, sem script de rolagem. */
.console {
  margin-top: 1.75rem;
  height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3rem;
  overflow: hidden;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(2, 43, 58, 0.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2.4rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 2.4rem);
}
.console__linha {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  animation: subir 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.console__linha--atual { color: var(--petrol); }
.console__linha--atual::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 0.95em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: -0.15em;
  animation: piscar 1s steps(2, start) infinite;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes piscar { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .etapa[data-estado='rodando'] .etapa__marca { animation: none; border-top-color: var(--accent); }
  .console__linha { animation: none; }
  .console__linha--atual::after { animation: none; }
}
/* Duas colunas só enquanto as duas cabem: espremido, o console vira uma coluna
   de palavras quebradas. Abaixo disso empilha — e o console continua primeiro. */
/* Empilhado, a caixa volta a ser a faixa baixa de sempre — e com ela volta o
   ancoramento embaixo, senão a linha nova nasceria fora da área visível. */
@media (max-width: 860px) {
  .progresso { grid-template-columns: 1fr; gap: 1.75rem; }
  .progresso .console {
    min-height: 0;
    height: 8.5rem;
    justify-content: flex-end;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2.4rem);
    mask-image: linear-gradient(180deg, transparent 0, #000 2.4rem);
  }
}
@media (max-width: 720px) {
  .console, .progresso .console { height: 7rem; }
}

/* ---------- gate ---------- */
.gate { margin-top: 2.25rem; max-width: 460px; }
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--petrol);
  margin-bottom: 0.45rem;
}
.campo__opcional {
  font-weight: 400;
  color: var(--text-light);
  text-transform: none;
  margin-left: 0.35rem;
}
/* Campo branco sobre fundo cinza: a borda sozinha não separava o suficiente do
   fundo, e o anel de foco herdado do site (`--accent-glow`) diz onde o cursor
   está sem depender só da cor da borda. */
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-campo);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  color: var(--petrol);
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  outline: 0;
  box-shadow: 0 1px 2px rgba(2, 43, 58, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.campo input::placeholder,
.campo textarea::placeholder { color: #9aa0a8; }
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Erro de validação precisa aparecer no campo, não só no aviso acima do botão. */
.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.gate__enviar { width: 100%; margin-top: 0.5rem; }
.gate__erro {
  display: none;
  color: var(--accent-dark);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.gate__erro[data-visivel='true'] { display: block; }
.gate__nota {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 1rem;
}

/* =========================================================================
   Wizard, oferta e formulários
   ========================================================================= */

.palco__inner--largo { max-width: 940px; }

/* Marca d'água vertical do site (`.section-watermark` em sites-cms/tecna):
   palavra gigante rotacionada na borda esquerda, quase invisível. Absoluta em
   relação ao .palco, atrás do conteúdo (inner tem z-index 2). */
.palco__marca {
  position: absolute;
  left: -2.5rem;
  top: 50%;
  /* vertical-rl + 180°, e não rotate(-90deg) como no site: aqui a palavra é
     mais larga que a seção é alta, e a rotação sobre o centro do elemento
     jogava o texto no meio da tela. O writing-mode dá a mesma leitura
     (de baixo para cima) sem depender da largura. */
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-family: 'Sora', sans-serif;
  font-size: 8rem;
  font-weight: 800;
  color: rgba(2, 43, 58, 0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  line-height: 1;
  z-index: 1;
}

/* No palco a etiqueta de fase é a caption editorial do site, não o selo-pílula
   do hero. `--accent-dark` porque accent puro fica em ~3,9:1 sobre o fundo
   claro — mesma medição que já corrigiu o selo. */
.palco .caption {
  display: inline-block;
  color: var(--accent-dark);
  margin-bottom: 1.1rem;
}

/* ---------- trilha de progresso ---------- */
.trilha {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
}
.trilha__item {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 9999px;
  position: relative;
  transition: background var(--transition);
}
.trilha__item span { position: absolute; left: -9999px; }
.trilha__item[data-estado='feito'] { background: var(--success); }
.trilha__item[data-estado='atual'] { background: var(--accent); }

/* ---------- respostas em linhas editoriais ----------
   O desenho de card genérico (grade de três caixas brancas) era o mesmo do
   concorrente de onde a mecânica foi emprestada (wipsites.com.br/orcamento).
   A resposta agora usa a linha numerada do próprio site — `.service-row` de
   sites-cms/tecna: número 001/002/003, divisor entre linhas e o hover que
   inverte a linha inteira para petrol. Assinatura da Tecna, não do concorrente
   (_docs/fluxo-lp.md §10: "linhas editoriais numeradas no lugar de card
   genérico"). */
.opcoes { margin-top: 2.25rem; }
.opcao {
  display: grid;
  grid-template-columns: 56px 1fr 48px;
  gap: 1.5rem;
  align-items: center;
  width: calc(100% + 3rem);
  margin: 0 -1.5rem;
  padding: 1.5rem;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.opcao:last-child { border-bottom: 1px solid var(--border); }
.opcao__num {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color var(--transition);
}
.opcao__corpo {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.5rem;
  align-items: center;
}
.opcao__titulo {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--petrol);
  transition: color var(--transition);
}
.opcao__desc {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
  transition: color var(--transition);
}
.opcao__seta {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-campo);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.opcao__seta svg { width: 18px; height: 18px; }
.opcao:hover, .opcao:focus-visible {
  background: var(--petrol);
  border-color: var(--petrol);
  outline: 0;
}
/* sem isso o divisor da linha de baixo risca o bloco petrol do hover */
.opcao:hover + .opcao, .opcao:focus-visible + .opcao { border-top-color: var(--petrol); }
.opcao:hover .opcao__titulo, .opcao:focus-visible .opcao__titulo { color: var(--white); }
.opcao:hover .opcao__desc, .opcao:focus-visible .opcao__desc { color: rgba(255, 255, 255, 0.6); }
.opcao:hover .opcao__num, .opcao:focus-visible .opcao__num { color: rgba(255, 255, 255, 0.45); }
.opcao:hover .opcao__seta, .opcao:focus-visible .opcao__seta {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
.opcao:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
.voltar {
  margin-top: 1.75rem;
  background: none;
  border: 0;
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
}
.voltar:hover { color: var(--petrol); }
.palco__titulo:focus { outline: 0; }

/* ---------- planos ---------- */
.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 2.5rem;
}
.plano {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.85rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(2, 43, 58, 0.05);
}
/* Âncora fixa no mais caro: fita, moldura e sombra accent. É igual para todo
   mundo e não olha `tierSugerido` — o que a decisão 001 proíbe é destacar um
   pilar em função da análise do lead, não ancorar a oferta. */
.plano--destaque {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 26px 52px -28px var(--accent);
}
.plano__fita {
  position: absolute;
  top: -0.72rem;
  left: 1.85rem;
  background: var(--accent);
  color: var(--white);
  border-radius: 9999px;
  padding: 0.28rem 0.8rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.plano__nome {
  color: var(--petrol);
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.plano__desc { color: var(--text); font-size: 0.875rem; margin-bottom: 1.4rem; }
.plano__preco { display: flex; align-items: baseline; gap: 0.3rem; line-height: 1; }
.plano__moeda { color: var(--text-light); font-size: 1rem; font-weight: 600; }
.plano__valor {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--petrol);
  letter-spacing: -0.03em;
}
.plano__condicoes { color: var(--text); font-size: 0.85rem; margin-top: 0.65rem; line-height: 1.55; }
.plano__inclui {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.plano__inclui li {
  position: relative;
  padding-left: 1.45rem;
  font-size: 0.875rem;
  color: var(--text);
}
.plano__inclui li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.plano__cta { margin-top: auto; padding-top: 1.75rem; }
.plano__cta .btn { width: 100%; }
.oferta__rodape {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 2rem;
  max-width: 60ch;
}
/* oferta embaixo do aviso de falha da análise — respiro pra não colar nos botões */
.erro-oferta { margin-top: 4rem; }

/* ---------- formulário largo ---------- */
.gate--largo { max-width: 560px; }
.campo textarea { resize: vertical; }
.campo select option { background: var(--white); color: var(--petrol); }
.campo__dica {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 0.45rem;
}
/* dica de formato fica junto do label, não embaixo do campo: quem precisa dela
   precisa antes de digitar */
.campo__hint {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .palco__marca { display: none; }
}
@media (max-width: 720px) {
  /* título e descrição empilham; a linha continua inteira, nada some */
  .opcao { grid-template-columns: 40px 1fr 44px; gap: 1rem; padding: 1.25rem 1rem; width: calc(100% + 2rem); margin: 0 -1rem; }
  .opcao__corpo { grid-template-columns: 1fr; gap: 0.3rem; }
  .opcao__titulo { font-size: 1.05rem; }
  .opcao__seta { width: 44px; height: 44px; }
}

/* ---------- código de recuperação ---------- */
.codigo-caixa {
  margin-top: 2.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 420px;
  box-shadow: 0 1px 3px rgba(2, 43, 58, 0.05);
}
.codigo-caixa__rotulo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.codigo-caixa__valor {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  color: var(--petrol);
  letter-spacing: 0.06em;
  margin: 0.5rem 0 0.6rem;
}
.codigo-caixa__nota {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}