/* LP de uma dobra — 8 páginas de operadora + /plano-empresarial.
 *
 * A regra que organiza tudo aqui: A PÁGINA É UMA TELA. Nada abaixo da dobra.
 * As versões anteriores foram reprovadas por isso ("olha o tanto de coisa pra
 * ler nessa porra, as pessoas não leem porra nenhuma") — e a correção não foi
 * encurtar os textos, foi tirar as seções.
 *
 * O QUE FICA DENTRO DA DOBRA é a calculadora (_s2/calculadora.js, montada em
 * modo enxuto com data-rico="0") e um botão de WhatsApp. A calculadora é o
 * caminho pro formulário, não um desvio dele: três perguntas de um toque, a
 * faixa de preço como recompensa, e o formulário logo abaixo do número. O que
 * saiu foi a análise DEPOIS do número — trajetória por faixa etária, comparador
 * de operadoras, comparador de variantes e o chat.
 *
 * Então este arquivo NÃO estiliza o cartão: quem faz isso é calculadora.css,
 * carregada junto. Aqui ficam o fundo colorido, a coluna de texto, o botão de
 * WhatsApp, o rodapé — e a ponte de tokens pra calculadora.css (ver abaixo).
 *
 * MOBILE PRIMEIRO, de verdade: 90% dos leads vêm de celular. As regras base
 * são as do celular e o desktop entra numa única media query no fim do arquivo.
 * Nessa ordem porque media query ANTES da regra base não tem efeito nenhum
 * (mesma especificidade perde por ordem) — já custou duas correções em
 * operadora.css.
 *
 * As cores vêm do atributo `style` do <body>, calculadas no gerador a partir
 * dos pixels da logo oficial:
 *   --cor     cor da marca, crua
 *   --fundo   a marca escurecida pra servir de fundo (texto branco em cima)
 *   --fundo2  um degrau mais escura, pro degradê ter profundidade
 *   --luz     a marca clareada, pra texto de apoio sobre o fundo
 *   --brilho  a cor secundária da marca (ou a marca clareada), pro destaque
 *   --acao    a marca com teto de luminosidade, pro botão com texto branco
 *
 * Nenhuma delas está escrita aqui: este arquivo serve as 9 páginas e não sabe
 * de qual operadora é a página que o carregou.
 */

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

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

/* `hidden` é o estado inicial do bloco de WhatsApp, e ele tem `display:flex`
 * de autor mais abaixo — regra de autor ganha do `display:none` do navegador,
 * então sem isto o bloco escondido aparece de qualquer jeito. */
[hidden] { display: none !important; }

body.lp {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tinta);
  /* Tinta e linhas da página clara (16/10). Antes o fundo era a cor da
   * operadora escurecida, com dois brilhos em degradê: bonito, mas é o visual
   * que toda página gerada tem, e obrigava a logo a morar numa pílula branca
   * (as logos são feitas pra fundo claro). Agora a página é branca e a cor da
   * operadora aparece só onde tem função: botões, barra de progresso e a faixa
   * do topo. */
  --tinta: #1d2125;
  --tinta-2: #4b5560;
  --tinta-3: #6b7480;
  --linha-pg: #e3e6ea;

  /* ── Ponte de tokens pra calculadora.css ────────────────────────────────
   * calculadora.css consome os tokens --ss-* (de patricia-chat.css) e --op-cor.
   * Declarados aqui, e NÃO carregando patricia-chat.css: aquele arquivo tem
   * 17 KB de estilo de chat que esta página não usa, e a única tela que a
   * página tem não deve esperar por ele. Os valores são os mesmos de
   * patricia-chat.css — se mudarem lá, mudam aqui. */
  --ss-sans: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --ss-serifa: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --ss-texto: #17151c;
  --ss-texto-corpo: #182c2b;
  --ss-texto-fraco: #6a7280;
  --ss-linha: #e6e8ec;
  --ss-fundo-3: #f4f5f7;
  --ss-raio: 22px;
  /* --acao e não --cor: a cor crua da marca não garante contraste com texto
   * branco (o laranja da NotreDame dá 2,3:1). --acao já vem com piso de 4,8:1
   * do gerador, e é ela que pinta os botões da calculadora. */
  --op-cor: var(--acao);

  /* O fundo fica no body (e não só na .tela) pra cobrir o overscroll do iOS,
     que mostra a cor do body quando a pessoa arrasta além do fim. */
  background: #fff;
  /* Faixa fina na cor da operadora: diz "esta é a página da Unimed" antes de
   * qualquer leitura, sem pintar a página inteira. */
  border-top: 5px solid var(--acao);
}

/* ── A tela ────────────────────────────────────────────────────────────────
 * `100svh` e não `100vh`: no Safari do iPhone o `vh` conta a barra de
 * endereço como se ela não existisse, e o rodapé some atrás dela. `min-height`
 * e não `height` porque o resultado da calculadora é mais alto que o passo 1 —
 * aí a página rola, que é o certo. A DOBRA é o passo 1; o resto é consequência
 * de a pessoa ter respondido. */
.tela {
  /* menos os 5px da faixa do topo, senão a dobra rola 5px à toa */
  min-height: calc(100svh - 5px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Topo: de quem é a página ─────────────────────────────────────────── */
.topo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marca {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.05em;
  color: var(--tinta);
  text-decoration: none;
}
.marca i { font-style: normal; color: var(--acao); }

/* A logo da operadora numa pílula BRANCA, não solta no fundo: as logos são
 * PNG coloridos feitos pra fundo claro, e a da SulAmérica é azul-marinho — no
 * fundo azul-marinho dela mesma ela simplesmente desaparece. */
/* Sem pílula: com a página branca a logo entra direto, como foi desenhada. */
.selo {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.selo-img { display: none; height: 22px; width: auto; }
.selo:not(.sem-logo) .selo-img { display: block; }
.selo-nome { display: none; }
.selo.sem-logo .selo-nome {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  /* --acao, não --cor: a cor crua da marca tem 2,4:1 no branco no caso da
     NotreDame. Este texto só aparece se a logo não carregar, e é exatamente
     aí que ele precisa ser legível. */
  color: var(--acao);
}

/* ── Centro: o texto e a calculadora ──────────────────────────────────── */
.centro {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.texto { display: flex; flex-direction: column; gap: 10px; }

h1 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  /* `clamp` em vez de media query: entre o iPhone SE e o 15 Pro Max a diferença
     é de 55px de largura, e trocar o tamanho em degraus deixa um dos dois com
     quebra de linha feia. */
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  color: var(--tinta);
  text-wrap: balance;
}
/* Título numa cor só: palavra pintada de outra cor é o vício mais comum de
   página gerada. */
h1 .destaque { color: inherit; }

.lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 36ch;
}

/* O cartão da calculadora é `.calc`, de calculadora.css. Aqui só o que depende
 * de estar nesta página — o padding de lá foi pensado pra uma coluna larga. */
.coluna-calc { display: flex; flex-direction: column; }
/* Borda e sombra curta: no fundo branco, a sombra funda de antes (pensada pro
   fundo escuro) virava mancha cinza. */
.coluna-calc .calc {
  padding: 22px 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--linha-pg);
  box-shadow: 0 1px 2px rgba(20, 24, 28, .06), 0 10px 28px rgba(20, 24, 28, .07);
}

/* ── WhatsApp ──────────────────────────────────────────────────────────
 * Segunda via, e visível desde o começo: quem não quer responder três
 * perguntas tem pra onde ir no primeiro segundo. A calculadora também oferece
 * WhatsApp no fim (`.calc-zap`), mas só depois do cálculo.
 *
 * Fica escondido por padrão no HTML e só aparece se houver número vivo em
 * contato.js — mandar gente pra wa.me banido é pior que não oferecer (o número
 * já foi banido três vezes em três meses). */
/* Uma frase, não um divisor com traços dos dois lados. */
.ou {
  margin: 16px 0 8px;
  font-size: 13.5px;
  color: var(--tinta-3);
  text-align: center;
}

.zap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border: 1.5px solid var(--linha-pg);
  border-radius: 13px;
  background: #fff;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}
.zap:hover { border-color: #1f9d6b; }
.zap:focus-visible, .calc-ver:focus-visible, .calc-op:focus-visible, .calc-res-bt:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acao) 45%, transparent);
  outline-offset: 2px;
}

/* No fim do cálculo a própria calculadora oferece WhatsApp (`.calc-zap`, verde,
 * dentro do cartão, junto do resultado). Nesse momento o botão desta página
 * vira o SEGUNDO botão de WhatsApp a uns 100px do primeiro — exatamente o
 * elemento duplicado que já apareceu duas vezes nesta tela (a logo, e depois o
 * bloco de preço). Então ele se apaga quando o outro nasce.
 *
 * `:has()` e não JS porque é estado de layout, não comportamento. Navegador
 * sem `:has()` mostra os dois: é feio, não é quebrado. */
.coluna-calc:has(.calc-zap) .ou,
.coluna-calc:has(.calc-zap) .zap { display: none; }
.zap::before {
  content: "";
  width: 19px;
  height: 19px;
  flex: none;
  /* glifo verde: na página clara é o verde que diz "WhatsApp" */
  background: #1f9d6b;
  /* Glifo do WhatsApp como máscara, e não <img>: acompanha a cor do texto e não
     é uma requisição a mais no caminho crítico da única tela que existe. */
  -webkit-mask: var(--zap-icone) center / contain no-repeat;
  mask: var(--zap-icone) center / contain no-repeat;
}
body.lp {
  --zap-icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.97L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2m5.8 14.06c-.24.68-1.42 1.3-1.96 1.35-.54.05-1.05.25-3.53-.73s-4.06-3.53-4.19-3.7c-.13-.17-.98-1.3-.98-2.48s.62-1.76.84-2c.22-.24.48-.3.64-.3h.46c.15 0 .35-.06.54.41.2.49.68 1.67.74 1.79.06.12.1.26.02.42-.08.16-.12.26-.24.4l-.36.42c-.12.12-.25.25-.11.49.14.24.62 1.03 1.33 1.66.91.81 1.57 1.06 1.79 1.18.22.12.36.1.49-.06.13-.16.56-.65.71-.87.15-.22.3-.18.5-.11.2.07 1.28.6 1.5.71.22.11.37.17.42.26.05.1.05.56-.19 1.24'/%3E%3C/svg%3E");
}

/* ── Rodapé: o não-vínculo ─────────────────────────────────────────────
 * Dentro da tela, não num rodapé que ninguém rola até. A página leva a cor e a
 * logo da operadora — então dizer que não somos ela não é formalidade, é o que
 * separa consultoria de falsa representação. Não remover. */
.rodape {
  flex: none;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tinta-3);
  text-align: center;
}
.rodape b { color: var(--tinta-2); font-weight: 600; }
.rodape a { color: inherit; margin-left: 6px; }

/* ── Bloco na cor da operadora (16/10) ─────────────────────────────────
 * A página branca ficou correta e sem personalidade ("muito simples"). A cor
 * volta, mas SÓLIDA e com função: é o chão onde a calculadora fica. No
 * celular, o bloco começa no meio do cartão e desce até o fim da tela (o
 * cartão "pisa" na divisa); no computador, é a metade direita. Sem degradê
 * nem brilho, que era o que dava cara de página gerada.
 *
 * --acao, não --cor: o gerador garante 4,8:1 dela com texto branco, e aqui
 * tem texto branco em cima (garantias, rodapé). */
.tela { gap: 0; padding-bottom: 0; }
.topo { margin-bottom: 18px; }
.coluna-calc {
  flex: 1 1 auto;
  margin: 0 -16px;
  padding: 0 16px 22px;
  background: linear-gradient(to bottom, transparent 104px, var(--acao) 104px);
}
.coluna-calc .ou { color: rgba(255, 255, 255, 0.9); }
.coluna-calc .zap {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .12);
}
.coluna-calc .zap:hover { border-color: #fff; }

/* WhatsApp DENTRO do cartão, abaixo das respostas (ver lp.js): é a zona onde
 * as pessoas tocam. Mais leve que o botão principal da calculadora pra não
 * competir com ele, mas com o verde que diz "WhatsApp". No resultado ele sai:
 * lá a calculadora já mostra o WhatsApp dela junto do preço. */
.coluna-calc .calc .zap-calc {
  margin: 18px 0 0;
  min-height: 48px;
  border: 1.5px solid color-mix(in srgb, #1f9d6b 35%, #fff);
  background: color-mix(in srgb, #1f9d6b 7%, #fff);
  box-shadow: none;
  font-size: 15px;
}
.coluna-calc .calc .zap-calc:hover { border-color: #1f9d6b; }
.calc:has(.calc-res) .zap-calc,
.calc:has(.calc-zap) .zap-calc { display: none; }

/* Três garantias, uma linha cada. São coisas que o site já afirma (FAQ da
 * consultoria e o aviso do formulário), não promessa nova. */
.garantias {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.garantias li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
}
.garantias li::before {
  content: "";
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2)
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
/* No resultado o formulário já traz o próprio aviso: as garantias saem junto
 * com o WhatsApp da página, pra não repetir a mesma frase duas vezes. */
.coluna-calc:has(.calc-zap) .garantias { display: none; }

.rodape {
  margin: 0 -16px;
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--acao);
  color: rgba(255, 255, 255, 0.82);
}
.rodape b { color: #fff; }
.rodape a { color: #fff; }

/* ── Desktop ───────────────────────────────────────────────────────────
 * Única media query do arquivo, e no fim de propósito (ver cabeçalho). Duas
 * colunas: o texto à esquerda, a calculadora à direita, ambas no meio
 * vertical. */
@media (min-width: 880px) {
  .tela { gap: 24px; padding: 24px 32px 20px; }
  .marca { font-size: 22px; }
  .selo { min-height: 44px; }
  .selo-img { height: 28px; }
  .selo.sem-logo .selo-nome { font-size: 17px; }

  .centro {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }
  .texto { flex: 1 1 50%; gap: 14px; }
  .coluna-calc { flex: 0 1 440px; }
  .coluna-calc .calc { padding: 28px 26px 24px; border-radius: var(--ss-raio); }

  h1 { font-size: clamp(38px, 4vw, 50px); }
  .lede { font-size: 17px; max-width: 30ch; }
  .rodape { font-size: 12px; }
}

/* Desktop do bloco de cor: a metade direita, atrás da calculadora. O corte
 * acompanha a coluna do cartão: com a tela de 1120px centralizada, o cartão
 * começa em 50vw + 88px; abaixo de 1120px, em 100vw - 472px. 28px antes disso
 * (metade do espaço entre as colunas). A faixa branca de cima cobre o topo,
 * onde fica a logo da operadora, feita pra fundo claro. */
@media (min-width: 880px) {
  body.lp {
    background:
      linear-gradient(#fff, #fff) 0 0 / 100% 100px no-repeat,
      linear-gradient(to right, #fff min(calc(50vw + 60px), calc(100vw - 500px)), var(--acao) 0);
  }
  .tela { padding-bottom: 20px; }
  .topo { margin-bottom: 0; }
  .coluna-calc { margin: 0; padding: 0; background: none; flex: 0 1 440px; }
  .rodape {
    margin: 0; padding: 0; background: none;
    text-align: left; max-width: 46%;
    color: var(--tinta-3);
  }
  .rodape b { color: var(--tinta-2); }
  .rodape a { color: inherit; }
}

/* ── Tudo numa tela, celular (19/10) ───────────────────────────────────
 * A frase de apoio sai no celular (o cartão já diz "três perguntas, sem
 * cadastro"), o título encurtou no HTML, as garantias viram três fichas
 * numa linha e o rodapé fica em corpo de nota. Max-width e no FIM: não
 * interfere no desktop e ganha das regras base. */
@media (max-width: 879px) {
  .tela { padding-top: 10px; }
  .topo { margin-bottom: 10px; }
  .centro { gap: 14px; }
  h1 { font-size: clamp(26px, 7.6vw, 34px); }
  /* A lede VOLTOU no celular (20/10). A regra acima a escondia porque "o
     cartão já diz três perguntas, sem cadastro" — e esse cartão deixou de
     existir quando a página virou uma pergunta só. Agora ela é a única coisa
     que avisa que o toque leva pro WhatsApp, e sem isso os dois botões
     parecem um formulário que vai recarregar a página. É uma linha. */
  .lede { font-size: 14.5px; }
  .coluna-calc {
    padding-bottom: 12px;
    background: linear-gradient(to bottom, transparent 84px, var(--acao) 84px);
  }
  .coluna-calc .calc .zap-calc { margin-top: 12px; min-height: 44px; }
  .garantias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .garantias li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12.5px; line-height: 1.2;
  }
  .garantias li::before { width: 15px; height: 15px; margin-top: 0; background-size: 15px; }
  /* 12px, e nao 10,5px (20/10). O rodape encolheu quando dividia a tela com
     a calculadora e com o cabecalho 360S2. Hoje a pagina tem uma pergunta so,
     sobra espaco, e o nao-vinculo virou a UNICA coisa que diz de quem e a
     pagina — a marca 360S2 saiu do topo e a logo da operadora esta grande.
     Encolher o unico identificador numa pagina que leva logo de terceiro e
     exatamente o que nao se deve fazer. */
  .rodape { font-size: 12px; line-height: 1.45; padding-top: 4px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ── Telas BAIXAS (19/10) ───────────────────────────────────────────────
 * Medido: 360x640 passava 15px, 320x568 até 150px, notebook 1280x720 29px.
 * Só aperta onde falta altura; tela normal não muda. Ordem do mais folgado
 * pro mais apertado, todas no fim pra ganhar das anteriores. */
@media (max-width: 879px) and (max-height: 700px) {
  .tela { padding-top: 8px; }
  .topo { margin-bottom: 6px; }
  .marca { font-size: 17px; }
  .selo { min-height: 30px; }
  .selo-img { height: 18px; }
  h1 { font-size: 24px; }
  .centro { gap: 10px; }
  .calc-sub { display: none; }
  .calc-etapa { margin-bottom: 4px; }
  .coluna-calc { background: linear-gradient(to bottom, transparent 70px, var(--acao) 70px); }
}
@media (max-width: 879px) and (max-height: 600px) {
  h1 { font-size: 21px; }
  .calc-nota { display: none; }
  .garantias { display: none; }
  .calc-op { min-height: 46px; }
  .calc-ufs .calc-op { min-height: 40px; }
  .calc-idades input { min-height: 42px; }
  .calc-ver { min-height: 44px; }
  .coluna-calc .calc .zap-calc { min-height: 40px; margin-top: 10px; }
}
@media (min-width: 880px) and (max-height: 760px) {
  .tela { padding-top: 14px; padding-bottom: 12px; }
  .coluna-calc .calc { padding: 18px 22px 14px; }
  .calc-titulo { margin-bottom: 4px; }
  .calc-sub { margin-bottom: 10px; }
  .calc-opcoes { gap: 8px; }
  .calc-op { min-height: 56px; }
  .calc-ufs .calc-op { min-height: 40px; }
  .calc-uf-todos { margin-top: 6px; min-height: 40px; }
  .calc-nota { margin-top: 10px; padding-top: 8px; }
  .garantias { margin-top: 12px; gap: 6px; }
}

/* ── A pergunta única (20/10) ─────────────────────────────────────────────
 * A LP virou uma pergunta só: "você tem CNPJ?". As duas respostas abrem o
 * WhatsApp com textos diferentes, e quem qualifica dali em diante é a IA.
 *
 * Por que as duas respostas têm o MESMO peso visual, e isso é deliberado: a
 * tentação é destacar o "sim" (CNPJ é o lead de maior valor) e apagar o "não".
 * Mas o catálogo tem 1.486 ofertas de adesão contra 41 de PME — quem não tem
 * CNPJ é a maioria do que a 360S2 vende. Botão secundário apagado faria essa
 * pessoa hesitar ou sair, e o custo do clique já foi pago.
 */
.pergunta {
  background: #fff;
  border: 1px solid var(--linha-pg);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .09);
}

.pergunta-txt {
  margin: 0 0 16px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(21px, 5.6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-align: center;
}

.escolhas { display: grid; gap: 10px; }

.escolha {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 58px: alvo de polegar com folga. O padrão de 44px da Apple é o mínimo pra
     ser alcançável, não o confortável — e aqui são só dois alvos na tela
     inteira, então não há motivo pra economizar altura. */
  min-height: 58px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}

.escolha-sim {
  background: var(--acao);
  color: #fff;
  border: 1.5px solid var(--acao);
}
.escolha-sim:hover { background: color-mix(in srgb, var(--acao) 88%, #000); }

.escolha-nao {
  background: #fff;
  color: var(--acao);
  border: 1.5px solid color-mix(in srgb, var(--acao) 38%, #fff);
}
.escolha-nao:hover { border-color: var(--acao); }

.escolha:active { transform: translateY(1px); }
.escolha:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acao) 45%, transparent);
  outline-offset: 2px;
}

@media (min-width: 880px) {
  .pergunta { padding: 30px 26px; border-radius: 24px; }
  .pergunta-txt { font-size: clamp(26px, 2.4vw, 30px); margin-bottom: 20px; }
  /* Lado a lado no desktop: duas respostas curtas empilhadas numa tela larga
     deixam a página com cara de formulário sobrando espaço. */
  .escolhas { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .escolha:active { transform: none; }
}

/* ── Cabeçalho só com a logo da operadora (20/10) ─────────────────────────
 * A marca 360S2 saiu do topo a pedido, e a logo da operadora cresceu.
 *
 * ATENÇÃO, e isto não é zelo excessivo: o CLAUDE.md registra que as DUAS
 * travas que mantêm claro de quem é a página são "o cabeçalho 360S2 e o
 * não-vínculo na primeira tela". Uma das duas acabou de sair. O não-vínculo
 * do rodapé passa a carregar isso sozinho — não pode ser removido, escondido
 * em media query, nem reduzido a corpo de nota. Numa página que leva a logo
 * da operadora em tamanho grande, ele é a única coisa que separa consultoria
 * de falsa representação.
 */
.topo-so-logo { justify-content: center; }

.topo-so-logo .selo {
  /* Sem pílula: a página é branca e as logos de operadora são feitas pra fundo
     claro. A pílula existia pro tema escuro antigo. */
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
}
.topo-so-logo .selo-img { height: 46px; }
.topo-so-logo .selo.sem-logo .selo-nome { font-size: 22px; }

@media (min-width: 880px) {
  .topo-so-logo .selo-img { height: 60px; }
  .topo-so-logo .selo.sem-logo .selo-nome { font-size: 28px; }
}

/* ── Leitura rápida (20/10) ───────────────────────────────────────────────
 * Logo maior, título centralizado e maior, nome da operadora na cor dela, e
 * um botão verde de WhatsApp embaixo.
 *
 * O objetivo é a pessoa entender a página num relance: a mediana de
 * permanência nas páginas de marca era de 4 a 6 segundos, e quem sai nesse
 * tempo não leu — reconheceu, ou não reconheceu, e decidiu.
 */
.topo-so-logo .selo-img { height: 64px; }

/* Título e lede centralizados junto com a logo: os três viram uma coluna só.
   Alinhado à esquerda, o olho faz duas paradas (logo no meio, texto na
   borda) antes de chegar no botão. */
.topo-so-logo + .centro .texto { text-align: center; align-items: center; }
.topo-so-logo + .centro .lede { max-width: 34ch; margin-left: auto; margin-right: auto; }

h1 .op-nome {
  /* --acao, e não --cor: o gerador garante 4,8:1 dela contra branco. A cor
     crua da marca não garante — o laranja da NotreDame dá 2,3:1, e o nome da
     operadora é justamente o que precisa ser lido de longe. */
  color: var(--acao);
}

/* ── Botão verde de WhatsApp ──────────────────────────────────────────────
 * Verde, e não a cor da operadora, de propósito: nesta operação verde
 * significa WhatsApp, e os dois botões de cima já usam a cor da marca. Três
 * botões na mesma cor viram uma massa só.
 *
 * Fica FORA do cartão branco: é o caminho alternativo de quem não quer
 * responder a pergunta, não uma terceira resposta. */
.zap-verde {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  min-height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366 0%, #1aa851 100%);
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(26, 168, 81, .28);
}
.zap-verde:hover { background: linear-gradient(135deg, #2ee070 0%, #1cb757 100%); }
.zap-verde:active { transform: translateY(1px); }
.zap-verde:focus-visible { outline: 3px solid rgba(37, 211, 102, .5); outline-offset: 2px; }
.zap-verde::before {
  content: "";
  width: 21px; height: 21px; flex: none;
  background: currentColor;
  -webkit-mask: var(--zap-icone) center / contain no-repeat;
  mask: var(--zap-icone) center / contain no-repeat;
}

@media (min-width: 880px) {
  .topo-so-logo .selo-img { height: 92px; }
  .zap-verde { max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) { .zap-verde:active { transform: none; } }

/* ── Página escura (20/10) ───────────────────────────────────────────────
 * Ativada por `class="lp lp-escura"`. Hoje só a Amil Black usa: a linha se
 * chama Black, então a página preta é o próprio nome do produto.
 *
 * A inversão é feita pelos TOKENS, não regra por regra: o lp.css escreve tudo
 * com var(--tinta/-2/-3), então redefini-los aqui vira a página inteira de uma
 * vez. Caçar regra por regra foi como a primeira versão da camada de marca
 * quebrou, e o conserto foi exatamente este.
 */
body.lp.lp-escura {
  --tinta: #ffffff;
  --tinta-2: rgba(255, 255, 255, 0.90);
  --tinta-3: rgba(255, 255, 255, 0.76);
  --linha-pg: rgba(255, 255, 255, 0.22);

  background-color: #0a0a0c;
  background-image:
    radial-gradient(70% 45% at 50% -8%, color-mix(in srgb, var(--cor) 22%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #121216 0%, #0a0a0c 60%, #09090b 100%);
  background-attachment: fixed;
  border-top-color: var(--cor);
}

/* Dentro do cartão o fundo continua branco: a tinta volta a ser escura. Sem
   isto os tokens invertidos deixariam "Você tem CNPJ?" branco no branco — foi
   exatamente o que aconteceu na /plano-empresarial em 20/10, e só a
   renderização mostrou. */
.lp-escura .pergunta,
.lp-escura .pergunta * { --tinta: #1d2125; --tinta-2: #4b5560; --tinta-3: #6b7480; }

.lp-escura .pergunta {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .55);
}

/* A faixa de cor sólida do rodapé não existe aqui: ela foi desenhada pra dar
   chão numa página branca, e numa página preta vira uma tarja no meio do
   preto. O não-vínculo fica em texto claro sobre o próprio fundo. */
.lp-escura .rodape { background: transparent; color: rgba(255, 255, 255, 0.78); }
.lp-escura .rodape b { color: #fff; }
.lp-escura .rodape a { color: rgba(255, 255, 255, 0.92); }

/* A logo vem colorida e feita pra fundo claro. Em branco ela se sustenta sobre
   o preto sem a pílula — mesma solução do cabeçalho do site oficial. */
.lp-escura .topo-so-logo .selo-img { filter: brightness(0) invert(1); }

/* O nome da marca no título: a cor da operadora escurecida (--acao) foi
   calculada pra ter contraste com BRANCO, e aqui o fundo é preto. Usa --luz,
   que o gerador calcula com piso de 5:1 contra o fundo escuro. */
.lp-escura h1 .op-nome { color: var(--luz); }

/* ── Título maior nas páginas de operadora (20/10) ────────────────────────
 * Só nelas (o seletor `.topo-so-logo + .centro` é o que as distingue da
 * /plano-empresarial, que tem folha própria). O tamanho base do lp.css foi
 * calculado quando a página ainda tinha a calculadora dividindo a tela com o
 * texto; sem ela sobra altura de sobra, e o título é a única frase que explica
 * o que a pessoa está vendo antes de responder.
 *
 * Especificidade maior que o `h1` solto do bloco de 880px, então vale nos dois
 * tamanhos sem precisar repetir o resto. */
.topo-so-logo + .centro h1 { font-size: clamp(32px, 9.5vw, 46px); }

@media (min-width: 880px) {
  .topo-so-logo + .centro h1 { font-size: clamp(46px, 5vw, 62px); }
}