/* ============================================================================
   Landing pages de oferta direta · levilael.com.br
   Carregado SEMPRE depois de assets/styles.css, do qual herda todos os tokens.

   O que este arquivo é: a extensão mínima do design system para os quatro
   componentes editoriais que a landing do diagnóstico não tinha —
   comparação, cadeia, camadas e declaração — mais os ajustes da tela de
   qualificação.

   O que este arquivo NÃO faz:
     · não redefine nenhum token (:root vive em styles.css);
     · não introduz cor, fonte, raio, sombra ou gradiente;
     · não duplica componente existente — hero, .dims, .steps, .cta-final,
       .btn, .kicker, .label, campos e progresso vêm de styles.css.
   ========================================================================= */

/* ── 01 · Hero da oferta ─────────────────────────────────────────────────
   Duas construções de manchete:
     a) linhas simples  → tudo em .h-display (padrão do DS);
     b) setup + pergunta → as afirmações entram menores e a pergunta fica no
        corpo display. A pergunta é o argumento; as afirmações são o cenário. */
.hero-setup {
  display: block;
  font-size: 0.5em;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-75);
  margin-bottom: 0.5em;
  text-wrap: pretty;
}
.hero-ask { display: block; }

/* CTA comercial em caixa alta — o tratamento que o DS dá ao CTA dos
   criativos de tráfego, trazido para a tela. Vale só para os dois botões de
   oferta da página e para o contato comercial no fim da qualificação; os
   botões internos do fluxo ("Continuar", "Tentar novamente") seguem em caixa
   de frase, como no diagnóstico.

   text-transform, e não copy em maiúsculas: o texto real continua legível
   para leitor de tela, para cópia e no content/offers.mjs. O tracking abre
   para +0.02em porque caixa alta com tracking negativo fecha demais. */
[data-offer-cta],
.done-actions .btn {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
  text-align: center;
}

/* ── 02 · Prosa de seção ─────────────────────────────────────────────────
   Parágrafos corridos de argumentação. Medida de leitura curta, como no DS. */
.prose { max-width: var(--measure); }
.prose .body + .body { margin-top: var(--s3); }

/* Nota com régua lateral laranja. É o .dont do design system: ressalva que
   precisa ser lida, sem virar card. */
.note-accent {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  max-width: var(--measure);
  color: var(--ink-75);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── 03 · Comparação (empresa real × percepção digital) ──────────────────
   Duas colunas, régua em cima, sem ícone. O lado "antes" usa --paper, que o
   DS reserva exatamente para isso; o lado do gargalo recebe a barra laranja
   36×2px — o mesmo elemento do .kicker e do .step-card. */
.versus {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  background: var(--ink-10);   /* vira a linha divisória entre os lados */
  border-top: 1px solid var(--ink);
}
.versus-side {
  position: relative;
  background: var(--paper);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
}
.versus-side.is-gap { background: var(--bg); }
.versus-side.is-gap::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--accent);
}
.versus-text {
  margin-top: var(--s2);
  color: var(--ink-75);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 34ch;
}

@media (min-width: 760px) {
  .versus { grid-template-columns: 1fr 1fr; }
}

/* ── 04 · Cadeia (sequência de etapas) ───────────────────────────────────
   Leitura vertical, do topo para baixo. O fio de 1px atrás dos marcadores é
   o conector; o marcador é um quadrado de tinta, não um ícone. */
.chain {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  max-width: 34rem;
}
.chain-cap {
  display: block;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink-75);
}
.chain-list {
  position: relative;
  padding-top: 0.5rem;
}
/* Conector: nasce no primeiro marcador e morre no último. */
.chain-list::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 1px;
  background: var(--ink-25);
}
.chain-node {
  position: relative;
  display: grid;
  grid-template-columns: 7px 1fr;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.8125rem;
}
.chain-mark {
  width: 7px;
  height: 7px;
  background: var(--ink);
}
.chain-node:last-child .chain-mark { background: var(--accent); }
.chain-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Nó de origem múltipla: várias entradas para o mesmo ponto. */
.chain-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.chain-source {
  border: 1px solid var(--ink-25);
  padding: 0.25rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-75);
}

/* Texto logo depois de um diagrama precisa de ar: sem isto o parágrafo cola
   no último nó e parece legenda dele. */
.chain + .prose,
.versus + .prose { margin-top: clamp(2rem, 4.5vw, 2.75rem); }

/* ── 05 · Camadas ────────────────────────────────────────────────────────
   Mesma matéria da lista de frentes, empilhada: aqui a ordem é o conteúdo.
   O fio vertical à esquerda amarra as seis camadas em uma estrutura só. */
.layers {
  position: relative;
  border-top: 1px solid var(--ink);
  margin-top: var(--s2);
}
.layer {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: var(--s2);
  row-gap: 0.25rem;
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--ink-10);
}
/* 24px é o piso de "texto grande" da WCAG, onde 3:1 basta — mesma regra
   dos ordinais de .dim em styles.css. */
.layer-n {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-45);
}
.layer-t {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.layer-d {
  margin-top: 0.375rem;
  color: var(--ink-75);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 46ch;
}

@media (min-width: 760px) {
  .layer { grid-template-columns: 5rem minmax(11rem, 16rem) 1fr; align-items: baseline; }
  .layer-n { font-size: 1.75rem; }
  .layer > div { display: contents; }
  .layer-d { margin-top: 0; }
}

/* ── 06 · Declaração ─────────────────────────────────────────────────────
   Seção de uma ideia só: kicker, afirmação e o parágrafo que a sustenta. */
.statement { max-width: 46rem; }
.statement .h2 { margin-top: var(--s3); max-width: 18ch; }
.statement-body { margin-top: clamp(1.75rem, 4vw, 2.5rem); max-width: var(--measure); }
.statement-body p {
  color: var(--ink-75);
  line-height: 1.6;
  text-wrap: pretty;
}
.statement-body p + p { margin-top: var(--s3); }

/* A frase que sustenta a seção sozinha. Fica em tinta cheia e corpo maior;
   os parágrafos abaixo explicam.

   Os dois seletores não são redundância: `.statement.is-key .statement-body p`
   é mais específico que uma classe só e venceria o tamanho de fonte. O
   segundo seletor existe para ganhar essa disputa sem !important. */
.statement-body .statement-lead,
.statement.is-key .statement-body .statement-lead {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s3);
  text-wrap: balance;
}

/* .is-key: a declaração é o argumento central da página (o princípio da
   automação, o "não é um pacote pronto"). Ganha régua e corpo maior. */
.statement.is-key { border-top: 1px solid var(--ink); padding-top: clamp(1.75rem, 4vw, 2.5rem); }
.statement.is-key .statement-body p {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── 05b · Fluxos de exemplo ─────────────────────────────────────────────
   Por área da empresa, a sequência que um processo percorre. Mesmo
   vocabulário da .chain — mono, caixa alta, tinta — mas na horizontal, porque
   aqui o que importa é a cadeia inteira, não cada nó. A seta é gerada pelo
   CSS: não é ícone, é o mesmo glifo → usado no resto do sistema. */
.flows { border-top: 1px solid var(--ink); margin-top: var(--s2); }
.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--ink-10);
}
.flow-name {
  font-size: var(--fs-label);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.5rem;
}
.flow-steps li {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-75);
  white-space: nowrap;
}
.flow-steps li + li::before {
  content: '→';
  color: var(--ink-45);
  margin-right: 0.5rem;
}

/* Em tela estreita (320 px) um passo longo em caixa alta não cabe numa
   linha e o `nowrap` empurrava a página para além da tela: ali o passo
   quebra dentro dele. */
@media (max-width: 479px) {
  .flow-steps li { white-space: normal; }
}

@media (min-width: 760px) {
  .flow {
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: baseline;
  }
}

/* ── 06b · CTA final ─────────────────────────────────────────────────────
   O .cta-final do diagnóstico limita o título a 16ch, medida de uma frase
   curta. Aqui as chamadas têm duas frases e a quebra vem escrita na copy —
   16ch quebraria cada uma de novo, empilhando cinco linhas rasgadas. */
.cta-final .h2 { max-width: 24ch; }

/* ── 07 · Processo em quatro etapas ──────────────────────────────────────
   .steps do design system é de três colunas. Com quatro etapas vira 2×2 e
   só abre em quatro faixas quando há largura para isso. */
@media (min-width: 760px) {
  .steps.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── 08 · Qualificação ───────────────────────────────────────────────────
   A tela reusa .app, .progress, .q-title, .options, .input e .q-nav de
   styles.css. Só o que é específico daqui mora abaixo. */

/* Dois campos por linha quando cabe: nome+empresa, whatsapp+e-mail. */
@media (min-width: 620px) {
  .qual-fields { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
  .qual-fields .field-wide { grid-column: 1 / -1; }
}

/* Confirmação: o lead já está salvo quando esta tela aparece. */
.done { max-width: 40rem; }
.done-mark {
  display: block;   /* span é inline: sem isto, width/height não valem nada */
  width: 36px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--s3);
}
.done .q-help { max-width: 34rem; }
.done-actions { margin-top: clamp(2rem, 5vw, 2.75rem); }
.done-actions .btn { width: 100%; }
@media (min-width: 560px) { .done-actions .btn { width: auto; } }
.done-note {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ink-75);
  max-width: 34rem;
}
.done-foot { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: var(--s3); border-top: 1px solid var(--ink-10); }