/* ===========================================================================
   descobrir.css, o funil de qualificação de app.zeracompany.com/descobrir

   POR QUE ESTA FOLHA NÃO É /estilo.css NEM /hub.css
   ---------------------------------------------------------------------------
   1. /estilo.css é a folha do produto e traz regras de ELEMENTO que atropelam
      qualquer tela densa: body{font-size:17px}, h1{clamp(...,3.6rem)},
      table{min-width:820px}. O funil precisa de uma escala própria.
   2. /hub.css é a folha do PAINEL, e a escala dele para em 16px de propósito,
      porque painel é tabela e leitura densa. O funil é o contrário: uma
      pergunta por tela, e a pergunta é o objeto mais importante da página.
      Por isso aqui existe um degrau tipográfico a mais (28px), e ele é o
      único acima de 16px.
   3. Os VALORES de marca (azul-aço, verde de ação, linhas, raios) são os
      mesmos das outras duas. Cor nova não nasce aqui.

   CSP: entra por <link rel="stylesheet">, e todo JavaScript vive em
   /js/descobrir.js. Nada inline, nem estilo nem script.
   =========================================================================== */

@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. Variáveis
   --------------------------------------------------------------------------- */
:root{
  /* superfícies */
  --fundo:#F4F7FA;
  --superficie:#FFFFFF;
  --superficie-2:#F8FAFC;
  --superficie-3:#EDF2F7;

  /* linhas: duas, e o motivo é o mesmo do painel. A do cartão é discreta,
     a do campo precisa ser vista de longe para o campo parecer clicável. */
  --linha:#E1E8F0;
  --linha-campo:#C3CEDB;

  /* texto */
  --tx:#1F2A37;      /* 14,54:1 sobre branco */
  --tx-2:#5F6B7A;    /* 5,49:1 sobre branco, 5,11:1 sobre o fundo da página */
  --tx-inv:#FFFFFF;

  /* azul-aço: quatro papéis, porque #5B7A99 como LETRA sobre branco dá
     4,48:1 e reprova AA por dois centésimos. A cor de marca é SUPERFÍCIE. */
  --primaria:#5B7A99;
  --primaria-tx:#47617B;     /* 6,43:1, quando o azul precisa ser letra */
  --primaria-forte:#35495E;  /* 9,27:1, no hover */
  --primaria-leve:#EDF2F7;
  --primaria-borda:#DEE4EB;

  /* O BLOCO CHAPADO DAS ILUSTRAÇÕES. Não é `--primaria-leve` reaproveitado, e o
     motivo é medida no tema escuro: lá `--primaria-leve` é #18222F e o cartão é
     #16202D, ou seja 1,05:1. O bloco de apoio simplesmente sumiria, sem erro
     nenhum, e as quatro ilustrações ficariam chapadas justo no tema em que o
     traço fino já é mais frágil. Este token existe para ter um valor por tema:
     no claro ele é levemente mais forte que `--primaria-leve` para se separar
     do branco do cartão, no escuro ele é MAIS CLARO que o cartão.
     Não é cor nova: é o mesmo azul-aço da marca, num degrau próprio. */
  --arte-bloco:#E4EBF3;      /* 1,10:1 sobre o branco do cartão */

  /* verde: AÇÃO. Cheio e clicável, sempre. Um por tela. */
  --acao:#25D366;
  --acao-hover:#1EBA57;
  --acao-tx:#04231A;         /* 8,40:1 sobre o verde. Branco daria 1,98:1 */

  /* estados lavados, nunca clicáveis */
  --ok-bg:#F0FDF4;  --ok-tx:#15532C;
  --err-bg:#FEF2F2; --err-tx:#991B1B;
  --destrutiva:#EF4444;

  /* forma */
  --raio:6px;
  --raio-cartao:12px;
  --raio-pilula:9999px;

  --sombra:0 1px 2px 0 rgba(0,0,0,.05);

  /* medidas de casca */
  --largura:1120px;
  /* A coluna de conteúdo. `--largura` veste a CASCA (barra do topo e faixa do
     rodapé, que vão de ponta a ponta); a coluna é onde o texto mora. Estavam
     coladas até 28/08/2026, e por isso a coluna encostava na esquerda. */
  --coluna:840px;
  --coluna-larga:1000px;
  --folga-wrap:16px;   /* o `padding-inline` de `.wrap`, nomeado para poder somar */
  --h-topo:64px;
  --h-controle:44px;
}

/* TEMA ESCURO. [03/10/2026, T1] Só para quem escolhe, pelo botão de tema do
   topo: /js/tema.js põe .escuro no <html> antes da pintura. O claro é o padrão,
   e o sistema operacional não decide mais (era por ele que o Albert via esta
   tela escura e o Polli a via clara).
   Toda cor é redefinida aqui; nenhum componente tem regra própria no escuro. */
:root.escuro{
  color-scheme:dark;
    --fundo:#0B1119;
    --superficie:#16202D;
    --superficie-2:#111925;
    --superficie-3:#1B2735;
    --linha:#2B3A4C;
    --linha-campo:#33455C;
    --tx:#EAF0F7;
    --tx-2:#9DB0C4;
    --tx-inv:#0B1119;
    --primaria:#8AA2B8;
    --primaria-tx:#8AA2B8;
    --primaria-forte:#A8BCCD;
    --primaria-leve:#18222F;
    --primaria-borda:#2E4257;
    --arte-bloco:#243244;    /* 1,26:1 sobre o #16202D do cartão */
    --acao:#25D366;
    --acao-hover:#3BE07A;
    --acao-tx:#04231A;
    --ok-bg:#102A1C;  --ok-tx:#3BE07A;
    --err-bg:#2A1416; --err-tx:#FCA5A5;
    /* [HARD] NO ESCURO NÃO EXISTE SOMBRA AQUI, e o motivo é medida.
       Até 23/08/2026 isto era `0 1px 2px 0 rgba(0,0,0,.4)`. Medido no
       navegador no tema escuro, esta tela desenha o fundo
       #0B1119 e o cartão #16202D. Preto a 40% sobre #0B1119 escurece de
       #0B1119 para perto de #070A0F: uma faixa de 2px que praticamente não
       existe, e que aparece apenas embaixo do cartão, deixando topo e
       laterais sem nada. É a mesma "sombra forte em cartão de dado" que a
       bancada reprova acima de 5% de opacidade, e que ela passou a acusar
       aqui assim que ganhou a rodada no tema escuro.
       Quem separa este cartão não é a sombra: é a luminância (o cartão é MAIS
       CLARO que o fundo, 1,15:1) mais a borda --linha, que mede 1,63:1 contra
       o fundo. Diferente da jornada, aqui o cartão AVANÇA, e por isso esta
       tela não precisa da aresta reforçada que a jornada precisou. */
    --sombra:none;
}

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

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Coluna de altura cheia para o rodapé ficar colado embaixo. Sem isto, a
     tela de uma pergunta só termina no meio da janela e sobra uma faixa da cor
     do fundo abaixo do rodapé, que parece um bloco inacabado. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--fundo);
  color:var(--tx);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:16px;
  line-height:24px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:var(--primaria-tx)}
[hidden]{display:none !important}

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

.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--folga-wrap)}
main.wrap{flex:1 0 auto}

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

/* O título da tela recebe foco por código a cada troca, para o leitor de tela
   anunciar que a tela mudou (nada recarrega, então sem isto ele não percebe).
   Esse foco não é navegação de teclado e não pode desenhar anel: o Chrome
   chega a pintar o anel nessa situação, e a pessoa vê uma caixa em volta do
   título sem ter apertado nada. */
[tabindex="-1"]:focus{outline:none}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Barra do topo: voltar, trilha, marca
   --------------------------------------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:var(--superficie);
  border-bottom:1px solid var(--linha);
}
.topo__wrap{
  min-height:var(--h-topo);
  display:flex;align-items:center;gap:16px;
}
.voltar{
  flex:0 0 auto;
  width:40px;height:40px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:var(--raio);
  color:var(--tx-2);cursor:pointer;
}
.voltar:hover{background:var(--superficie-3);color:var(--tx)}
.voltar svg{width:20px;height:20px}
/* A marca vai INLINE, e não como <img>, por um motivo mecânico: variável de CSS
   não atravessa a fronteira de um <img>, então a cor não acompanharia o tema e
   a marca sumiria em um dos dois, sem erro nenhum aparecer.

   [HARD] O DESENHO É O MESMO DAS OUTRAS TELAS, BYTE A BYTE. Até 23/08/2026 esta
   tela servia o wordmark ZERASYNC (`<title>ZeraSync</title>`, `aria-label`
   "ZeraSync" e o pedaço SYNC em verde #3BE07A), e ela é a PORTA do funil: era a
   primeira marca que a pessoa via, e dizia o nome do PRODUTO onde devia dizer o
   nome da EMPRESA. Agora é o mesmo SVG de duas partes de /painel e /perguntas.

   A cor não vem mais de `stroke`: o SVG canônico usa `fill="currentColor"`, e
   quem resolve o `currentColor` é o `color` deste link. Por isso `--marca` foi
   promovido a `color` aqui embaixo; sem essa linha o desenho herdaria a cor do
   texto do cabeçalho e a divergência voltaria por outro caminho. */
.topo__marca{
  flex:0 0 auto;display:block;
  --marca:#1F2A37;
  color:var(--marca);
}
/* 28px e não os 32px do resto do aplicativo: esta barra é mais baixa que a do
   painel, e é a única tela em que a marca divide a linha com a trilha de quatro
   etapas. [MEDIDO] na tela: com 32px a barra ganha altura e a trilha encosta. */
.topo__marca svg{height:28px;width:auto;display:block}
.escuro .topo__marca{--marca:#EAF0F7}

/* [03/10/2026, T2 e T4 da revisão do Albert] A MARCA À ESQUERDA, como no site
   (zeracompany.com: logo à esquerda, idioma à direita), e à direita o seletor
   de idioma com bandeira e o botão de tema. O desenho dos dois mora em
   /suporte.css, que as outras telas também carregam.
   No celular a barra vira duas linhas: marca e controles em cima, a trilha
   (com o voltar) embaixo, de ponta a ponta. Com tudo numa linha só, a trilha
   ficava com menos de 120 px a 390 px. */
.topo__controles{color:var(--tx)}
@media (max-width:640px){
  .topo .topo__wrap{display:grid;grid-template-columns:auto 1fr auto;column-gap:8px;row-gap:4px;padding-block:8px}
  .topo .topo__marca{grid-column:1;grid-row:1}
  .topo .topo__controles{grid-column:3;grid-row:1}
  .topo .voltar{grid-column:1;grid-row:2}
  .topo .trilha{grid-column:2 / -1;grid-row:2;justify-content:flex-start;min-height:44px;align-items:center}
  .topo .voltar[hidden] + .trilha{grid-column:1 / -1}
}

/* A trilha. Quatro etapas, e o estado nunca é só cor: concluída ganha o
   sinal de confirmação, atual fica cheia, futura fica vazia. */
.trilha{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.trilha ol{
  display:flex;align-items:center;gap:0;
  margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;
}
.trilha ol::-webkit-scrollbar{display:none}
.trilha li{display:flex;align-items:center;flex:0 0 auto}
.trilha__marca{
  width:22px;height:22px;flex:0 0 auto;
  border-radius:var(--raio-pilula);
  border:2px solid var(--linha-campo);
  display:grid;place-items:center;
  color:var(--tx-inv);
}
.trilha__marca svg{width:12px;height:12px;display:none}
.trilha__nome{
  margin-left:8px;
  font-size:14px;line-height:20px;font-weight:400;color:var(--tx-2);
  white-space:nowrap;
}
.trilha__risco{
  width:40px;height:1px;margin-inline:12px;flex:0 0 auto;
  background:var(--linha-campo);
}
.trilha li[data-estado="atual"] .trilha__marca{
  border-color:var(--primaria);
  background:radial-gradient(circle, var(--primaria) 0 4px, transparent 4px);
}
.trilha li[data-estado="atual"] .trilha__nome{color:var(--tx);font-weight:600}
.trilha li[data-estado="feita"] .trilha__marca{
  border-color:var(--primaria);background:var(--primaria);
}
.trilha li[data-estado="feita"] .trilha__marca svg{display:block}
.trilha li[data-estado="feita"] .trilha__nome{color:var(--tx-2)}

@media (max-width:760px){
  .trilha__nome{display:none}
  .trilha li[data-estado="atual"] .trilha__nome{display:inline}
  .trilha__risco{width:24px;margin-inline:8px}
  .topo__marca svg{height:18px}
}

/* ---------------------------------------------------------------------------
   4. Tela (cada passo do funil)
   --------------------------------------------------------------------------- */
/* [HARD] A COLUNA DE CONTEÚDO CENTRA AQUI, E NÃO EM CADA FILHO.
   Apontado pelo Rodrigo Polli em 26/08/2026 ("descentralizacao dos cards"), e
   medido: `.wrap` tem 1120px centrado, mas `.opcoes`, `.regua` e `.guia` tinham
   840px com `margin:0`, então a coluna inteira (título, apoio, cartões, régua e
   caixa-guia) encostava na esquerda e sobravam 280px mortos só do lado direito.
   Num viewport de 1600px isso é vão esquerdo de 256px contra 504px à direita
   (medido, não estimado: o 506 que eu tinha dito de cabeça estava errado).
   A referência centra: em _captura-360dialog/funil-qualificacao/passo-1.png os
   cartões têm 320px de vão dos DOIS lados.

   Por que aqui e não `margin:auto` em `.opcoes`: `.regua` e `.guia` têm a mesma
   largura e a mesma margem. Centrar só os cartões deixaria título, régua e
   caixa onde estão, e o degrau novo seria pior que o vão de hoje.

   Por que não baixar `--largura`: `.wrap` também veste a barra do topo e o
   rodapé (descobrir.html:313 e :350), que já estão certos na largura de hoje. */
.tela{padding-block:56px 80px;max-width:var(--coluna);margin-inline:auto}
/* A tela de três cartões usa a coluna larga, a mesma que `.opcoes--tres`. */
.tela--larga{max-width:var(--coluna-larga)}
.tela__titulo{
  margin:0 0 8px;
  font-size:28px;line-height:34px;font-weight:600;
  letter-spacing:-.01em;
}
.tela__apoio{margin:0 0 32px;font-size:16px;line-height:24px;color:var(--tx-2);max-width:60ch}
/* [03/10/2026, G1 e G3 da revisão do Albert] A linha de apoio saiu da etapa 1 e da
   etapa 3. Sem ela, o título encostava nos cartões e no formulário com os 8px dele;
   esta folga devolve o respiro que o apoio dava, só onde o apoio não existe. */
.tela__titulo + .opcoes,.tela__titulo + .formulario{margin-top:24px}
/* [03/10/2026, G7] A etapa 3 ("Falta só saber para quem é") centrada na tela: a
   coluna dela é a do formulário (520px), e `.tela` já centra pela margem. */
.tela--estreita{max-width:520px}
.tela--estreita .tela__titulo{text-align:center}
/* No computador, centrada também na altura: sem a caixa de apoio, o bloco ficava
   colado no topo com meia tela vazia embaixo. `:not([hidden])` porque `display:flex`
   venceria o atributo `hidden` das outras etapas. No celular fica no fluxo, para o
   teclado aberto não empurrar o campo para fora da tela. 220px = barra do suporte
   (40) + topo (64) + rodapé (cerca de 92) + folga. */
@media (min-width:641px){
  .tela--estreita:not([hidden]){
    display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100vh - 220px);padding-block:32px;
  }
}

@media (max-width:640px){
  .tela{padding-block:32px 56px}
  .tela__titulo{font-size:24px;line-height:30px}
}

/* ---------------------------------------------------------------------------
   5. Cartões de escolha
   O controle é um <input type="radio"> de verdade dentro do <label>: seta do
   teclado navega, leitor de tela anuncia estado, e o foco aparece. Cartão
   clicável feito de <div> é o erro clássico deste padrão.
   --------------------------------------------------------------------------- */
.opcoes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0 0 32px;
  max-width:840px;
}
.opcoes--tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}
@media (max-width:760px){
  .opcoes,.opcoes--tres{grid-template-columns:1fr}
}

.cartao{display:block;position:relative;cursor:pointer}
.cartao__radio{
  position:absolute;opacity:0;pointer-events:none;
  width:1px;height:1px;margin:0;
}
.cartao__corpo{
  display:flex;flex-direction:column;gap:8px;
  height:100%;
  padding:20px 24px 24px;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio-cartao);
  box-shadow:var(--sombra);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cartao:hover .cartao__corpo{border-color:var(--primaria)}
.cartao__radio:focus-visible + .cartao__corpo{
  outline:2px solid var(--primaria);
  outline-offset:2px;
}
.cartao__radio:checked + .cartao__corpo{
  border-color:var(--primaria);
  box-shadow:0 0 0 1px var(--primaria);
  background:var(--superficie);
}
/* A ILUSTRAÇÃO DO CARTÃO
   -----------------------------------------------------------------------
   Até 24/08/2026 aqui morava um azulejo de 48x48 com um ícone Lucide de 24px
   no canto superior esquerdo: 26% da altura de um cartão de 184px. [MEDIDO]
   nas capturas do funil do 360dialog de 24/08, a ilustração deles ocupa 155px
   de um cartão de 240px, 65% da altura, e é ela que faz a pessoa entender o
   cartão ANTES de ler o título. Um pictograma de 24px não faz esse trabalho:
   ele decora uma linha de texto.

   [HARD] O DESENHO É NOVO, NÃO É O DELES. Nenhuma das doze composições repete
   a arte do 360dialog, e o balão é um balão genérico de traço, nunca o glifo
   do WhatsApp, que é marca registrada da Meta.

   124px é 52% de um cartão de ~240px. O SVG tem viewBox 320x180 e nenhuma
   dimensão própria, então ele CENTRALIZA dentro desta caixa por
   preserveAspectRatio: a arte fica com ~220px de largura numa coluna de 364px,
   que é a mesma proporção medida nos cartões deles (arte ocupando ~72% da
   largura, centrada).

   A cor do traço é `currentColor`, herdada deste `color`. É o que faz o mesmo
   arquivo servir aos dois temas sem uma linha de CSS a mais: valor fixo aqui
   sumiria em um dos dois, e sumiria calado. */
.cartao__arte{
  display:block;
  width:100%;height:124px;flex:0 0 auto;
  margin-bottom:14px;
  color:var(--primaria-tx);
}
.cartao__arte svg{display:block;width:100%;height:100%}
/* `flex-start`, e não `center`: com a ilustração o cartão ficou mais estreito
   em relação ao texto, e títulos de duas linhas passaram a ser a regra e não a
   exceção ("Preciso de resposta em 30 minutos" quebra em qualquer largura de
   três colunas). Centralizado, a bolinha ia parar no meio das duas linhas, e um
   controle de escolha que não se alinha com a primeira linha do rótulo parece
   solto do que ele controla. Os 3px são o que desce a bolinha de 18px até o
   centro óptico de uma linha de 24px. */
.cartao__topo{display:flex;align-items:flex-start;gap:8px}
/* A bolinha desenhada: o radio real está escondido, então o estado precisa
   aparecer em algum lugar. Ela não é o controle, é o retrato dele. */
.cartao__bolinha{
  width:18px;height:18px;flex:0 0 auto;
  margin-top:3px;
  border-radius:var(--raio-pilula);
  border:2px solid var(--linha-campo);
  display:grid;place-items:center;
}
.cartao__radio:checked + .cartao__corpo .cartao__bolinha{
  border-color:var(--primaria);
  background:radial-gradient(circle, var(--primaria) 0 4px, transparent 4px);
}
.cartao__titulo{font-size:16px;line-height:24px;font-weight:600;color:var(--tx)}
.cartao__apoio{margin:0;font-size:14px;line-height:20px;color:var(--tx-2)}

/* O BOTÃO DE CONTINUAR EXISTE SÓ PARA O TECLADO, E AGORA SÓ APARECE PARA ELE.
   -----------------------------------------------------------------------
   No ponteiro o cartão já avança sozinho no clique (o ouvinte está em
   js/descobrir.js e só dispara com `event.detail > 0`), então um botão visível
   logo abaixo dos cartões pede um SEGUNDO clique que ninguém precisa dar. Num
   funil de três perguntas isso é o dobro dos cliques, e no funil do 360dialog
   esse botão não existe: lá o cartão é o avanço.

   Tirar o botão do HTML quebraria o teclado, e por um motivo mecânico: navegar
   com a seta dentro de um grupo de rádios dispara `change` a cada opção que a
   seta encosta, então o avanço automático prenderia a pessoa na primeira opção
   sem deixar ela chegar na terceira. Por isso ele continua no documento, no
   fluxo, na ordem de tabulação e na árvore de acessibilidade: some só do
   DESENHO, e volta inteiro assim que o foco chega nele.

   Estas são as mesmas declarações de `.sr-only`, com `:focus-within`
   devolvendo o elemento ao fluxo. Não é `display:none` nem `visibility:hidden`
   de propósito: os dois tiram o botão da ordem de tabulação, e aí o foco nunca
   chegaria para revelá-lo. */
.acao-tela{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.acao-tela:focus-within{
  position:static;width:auto;height:auto;
  margin:32px 0 0;overflow:visible;clip:auto;white-space:normal;
}

/* ---------------------------------------------------------------------------
   6. A caixa de apoio do rodapé do passo

   [MEDIDO] nas capturas de 24/08/2026: no 360dialog ela existe nos QUATRO
   passos, e no nosso funil existia em UM. Ela não é enfeite nem repetição do
   título: é onde a pessoa descobre QUAL das opções é a dela sem ter que
   adivinhar, e por isso o texto de cada passo fala das opções daquele passo,
   nunca do produto em geral.

   Uma só família visual para todas, inclusive a do passo do e-mail. No funil
   deles a caixa do e-mail é amarela, e aqui ela não pode ser: esta folha não
   inventa cor de marca, e um bloco lavado de verde encostado no botão verde de
   ação leria como extensão do botão e enfraqueceria os dois. O que separa a
   caixa do e-mail das outras é o CONTEÚDO em linhas de confirmação, não a cor.
   --------------------------------------------------------------------------- */
.regua{
  max-width:840px;
  margin:0 0 24px;
  border:0;border-top:1px solid var(--linha);
}
.guia{
  max-width:840px;
  margin:0;
  padding:16px;
  border:1px solid var(--primaria-borda);
  border-left:3px solid var(--primaria);
  border-radius:var(--raio);
  /* [MEDIDO] na tela, e trocado em 24/08/2026. Aqui havia um degradê de
     `--primaria-leve` para transparente, e ele funcionava quando a caixa
     aparecia UMA vez, no fim do primeiro passo, como enfeite. Agora ela é o
     apoio de oito telas e é onde a pessoa decide, então precisa ler como uma
     superfície inteira. O degradê fazia a metade direita da caixa ser a cor da
     página: #EDF2F7 sobre #F4F7FA é 1,03:1, ou seja, a caixa simplesmente
     acabava no meio e o texto ficava boiando no fundo. Chapado, a borda de 1px
     e a barra de 3px têm o que fechar. */
  background:var(--primaria-leve);
  font-size:14px;line-height:20px;color:var(--tx);
}
/* O rótulo em linha própria, como o "Quick guide:" e o "Why we ask:" deles.
   Em linha corrida ele se perde no meio da frase justamente quando a pessoa
   está varrendo a tela atrás de ajuda. */
.guia__rotulo{display:block;font-weight:600;margin-bottom:2px}
.guia p{margin:0}
.guia ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.guia li{display:flex;gap:8px}
.guia li svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--primaria-tx)}

/* Os três passos de três cartões usam uma coluna mais larga; a régua e a caixa
   acompanham, senão elas terminam antes dos cartões e a tela parece torta. */
.tela--larga .regua,.tela--larga .guia{max-width:1000px}
/* Na tela do e-mail tudo mora dentro da coluna estreita do formulário. */
.formulario .regua,.formulario .guia{max-width:520px}
.formulario .regua{margin-top:24px}

/* ---------------------------------------------------------------------------
   7. Botões
   --------------------------------------------------------------------------- */
/* [MEDIDO] 38px de altura, 8px 16px de respiro e 14px de texto são o botão
   padrão do 360dialog, medido no hub deles. Esta regra estava em 46px de altura
   e 16px de texto, e a bancada reprovou: o funil é a PRIMEIRA tela que a pessoa
   vê, e ele não pode falar uma língua de design diferente do painel para onde
   ela vai em seguida. Duas línguas na mesma jornada é o que faz um produto
   parecer costurado de pedaços.

   O peso 600 fica: é o degrau de ênfase que o próprio manual registra para
   controle principal, e ele não muda a caixa. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;
  padding:8px 16px;
  border-radius:var(--raio);
  border:1px solid transparent;
  font-size:14px;line-height:20px;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:normal;text-align:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.btn--acao{background:var(--acao);border-color:var(--acao);color:var(--acao-tx)}
.btn--acao:hover:not(:disabled){background:var(--acao-hover);border-color:var(--acao-hover)}
/* Desligado não pode continuar verde: verde é a cor de "pode apertar", e um
   verde lavado ainda convida o clique. Aqui ele vira superfície neutra, que é
   o que "ainda não" parece. */
.btn--acao:disabled{
  background:var(--superficie-3);border-color:var(--linha);color:var(--tx-2);opacity:1;
}
.btn--larga{width:100%}

.btn--contorno{
  background:transparent;border-color:var(--primaria);color:var(--primaria-tx);
  font-weight:400;
}
.btn--contorno:hover:not(:disabled){background:var(--primaria-leve);color:var(--primaria-forte)}

.btn--discreto{background:transparent;border-color:transparent;color:var(--tx-2);font-weight:400}
.btn--discreto:hover:not(:disabled){background:var(--superficie-3);color:var(--tx)}

/* Giro de espera. O rótulo do botão vira o gerúndio da própria ação. */
.girando{display:inline-flex;align-items:center;gap:8px}
.girando::before{
  content:"";width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid currentColor;border-top-color:transparent;
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .girando::before{animation-duration:2.4s} }

/* ---------------------------------------------------------------------------
   8. Tela de dados (e-mail e nome)
   --------------------------------------------------------------------------- */
.formulario{max-width:520px}
.campo-bloco{margin-bottom:24px}
.rotulo{display:block;font-size:14px;line-height:20px;font-weight:600;margin-bottom:8px}
.campo{
  display:flex;align-items:center;
  height:var(--h-controle);
  background:var(--superficie);
  border:1px solid var(--linha-campo);
  border-radius:var(--raio);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo:hover{border-color:var(--primaria)}
.campo:focus-within{border-color:transparent;box-shadow:0 0 0 2px var(--primaria)}
.campo input{
  width:100%;min-width:0;height:100%;
  padding:8px 16px;border:0;background:transparent;
  font:inherit;font-size:16px;line-height:24px;color:var(--tx);
  border-radius:var(--raio);
}
.campo input:focus{outline:none}
.campo input::placeholder{color:var(--tx-2)}
.campo[data-invalido="true"]{border-color:var(--destrutiva)}
.campo[data-invalido="true"]:focus-within{box-shadow:0 0 0 2px var(--destrutiva)}

.erro-campo{
  display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;
  font-size:14px;line-height:20px;color:var(--err-tx);
}
.erro-campo svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px}

.nota{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--tx-2)}
.nota b{color:var(--tx);font-weight:600}
.consentimento{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--tx-2);max-width:60ch}

/* A cortesia do mel: campo que pessoa nenhuma vê nem alcança pelo teclado. */
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------------------
   9. Tela final: prova de um lado, oferta do outro
   --------------------------------------------------------------------------- */
.final{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:48px;
  align-items:start;
}
@media (max-width:900px){
  .final{grid-template-columns:1fr;gap:32px}
  .prova{order:2}
}

.prova{
  padding:24px;
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--raio-cartao);
}
.prova__selo{width:104px;height:auto;margin-bottom:16px}
.prova__titulo{margin:0;font-size:16px;line-height:24px;font-weight:600}
.prova__sub{margin:2px 0 24px;font-size:14px;line-height:20px;color:var(--tx-2)}
.prova ul{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.prova li{display:flex;gap:8px;font-size:14px;line-height:20px;color:var(--tx)}
.prova li svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--primaria-tx)}
.prova__link{
  display:inline-block;margin-top:24px;
  font-size:14px;line-height:20px;font-weight:600;
  color:var(--primaria-tx);text-decoration:underline;text-underline-offset:2px;
}

/* A PROVA DE MERCADO, DESENHADA E VAZIA
   -----------------------------------------------------------------------
   [MEDIDO 24/08/2026] em _captura-360dialog/funil-final/4-final.png: a coluna
   da esquerda deles tem seis logotipos, um depoimento e três notas de
   avaliador. A nossa tem selo e garantias, que é prova institucional, não
   prova de mercado. O bloco existe aqui para o dia em que os ativos chegarem;
   o conteúdo é do Albert e a lista do que falta está no comentário de
   public/descobrir.html, dentro do próprio bloco.

   [HARD] O BLOCO NASCE ESCONDIDO E TEM QUE CONTINUAR ESCONDIDO ENQUANTO
   ESTIVER VAZIO. `[hidden]{display:none !important}` na linha 157 é quem
   garante isso, e por isso nenhuma regra daqui pode declarar `display` sem o
   `:not([hidden])`: bastaria um `display:grid` solto para a marcação vazia
   voltar a ocupar espaço e a coluna ganhar um buraco sem explicação.

   A separação por borda no topo, e não por espaço: prova institucional e
   prova de mercado são coisas diferentes, e quem varre a coluna precisa ver
   que ali começa outro assunto.

   Os logotipos entram em escala de cinza com opacidade, que é o tratamento
   deles e existe por um motivo prático: seis marcas com as cores originais
   brigam entre si e com o azul da Zera, e a coluna vira um mostruário. */
.mercado:not([hidden]){
  display:block;
  margin-top:24px;padding-top:24px;
  border-top:1px solid var(--linha);
}
.mercado__titulo:not([hidden]){
  margin:0 0 16px;
  font-size:16px;line-height:24px;font-weight:600;color:var(--tx);
}
.prova .mercado__logos:not([hidden]){
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  margin:0;padding:0;list-style:none;
}
.prova .mercado__logos li{display:block}
.mercado__logos img{
  display:block;max-width:96px;height:24px;width:auto;
  filter:grayscale(1);opacity:.65;
}
.mercado__fala:not([hidden]){
  margin:24px 0 0;padding:16px;
  border-left:3px solid var(--primaria);
  border-radius:0 var(--raio) var(--raio) 0;
  background:var(--superficie-2);
}
.mercado__aspas{
  margin:0;
  font-size:14px;line-height:20px;font-style:italic;color:var(--tx);
}
.mercado__quem{
  margin-top:8px;
  font-size:14px;line-height:20px;font-weight:600;color:var(--tx);
}
.prova .mercado__notas:not([hidden]){
  display:flex;flex-wrap:wrap;gap:8px 24px;
  margin:24px 0 0;padding:0;list-style:none;
}
.prova .mercado__notas li{
  display:flex;align-items:center;gap:8px;
  font-size:14px;line-height:20px;color:var(--tx-2);
}
.mercado__notas b{color:var(--tx);font-weight:600}

.saudacao{margin:0 0 8px;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.01em}
.oferta__linha{margin:0 0 24px;font-size:16px;line-height:24px;color:var(--tx-2)}
.troca{
  margin:0 0 24px;padding:16px;
  border:1px solid var(--primaria-borda);
  border-radius:var(--raio);
  background:var(--primaria-leve);
  font-size:14px;line-height:20px;color:var(--tx);
}
.confere{margin:0 0 32px;padding:0;list-style:none;display:grid;gap:12px}
.confere li{display:flex;gap:8px;font-size:16px;line-height:24px}
.confere li svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--ok-tx)}

.preco{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.preco__valor{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em}
.preco__unidade{font-size:14px;line-height:20px;color:var(--tx-2)}
.preco__nota{margin:0 0 24px;font-size:14px;line-height:20px;color:var(--tx-2);max-width:56ch}

/* Quando a tela não tem preço, o lugar dele leva a explicação da ausência.
   Nunca um traço, nunca um valor de exemplo. */
.sem-preco{
  margin:0 0 24px;padding:16px;
  border:1px solid var(--linha);
  border-left:3px solid var(--primaria);
  border-radius:var(--raio);
  background:var(--superficie-2);
  font-size:14px;line-height:20px;color:var(--tx);
}
.sem-preco b{font-weight:600}

.cruzada{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--tx-2)}
.cruzada a{color:var(--primaria-tx)}

.porta{margin-top:32px;padding-top:24px;border-top:1px solid var(--linha)}
.porta__ausente{
  display:flex;align-items:flex-start;gap:8px;
  margin:0;font-size:14px;line-height:20px;color:var(--tx-2);
}
.porta__ausente svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px}

/* ---------------------------------------------------------------------------
   10. Rodapé
   --------------------------------------------------------------------------- */
.rodape{
  border-top:1px solid var(--linha);
  background:var(--superficie);
  padding-block:24px;
}
/* A faixa do rodapé continua de ponta a ponta (a borda e o fundo são dela); o
   TEXTO é que acompanha a coluna de conteúdo. Sem esta linha o rodapé fica na
   borda esquerda do `.wrap` de 1120px enquanto o conteúdo mora numa coluna de
   840px centrada, e as duas bordas esquerdas ficam 140px fora de registro num
   viewport de 1600px. A medida de centralização não pega isso, só o olho: foi
   visto na bancada em 28/08/2026, depois que a coluna passou a centrar. */
/* [HARD] SOMA A FOLGA, senão o texto do rodapé fica 16px à direita do
   conteúdo. `.wrap` é `border-box` com `padding-inline`, então a largura dele
   INCLUI a folga; a `.tela` mora dentro do `.wrap` do main e não tem folga
   própria. Medido na bancada: sem o `calc`, título em 380px e rodapé em 396px
   num viewport de 1600. Antes de a coluna centrar, os dois batiam em 256px. */
.rodape .wrap{max-width:calc(var(--coluna) + var(--folga-wrap) * 2)}
/* A tela de três cartões usa a coluna larga, e só ela. Preso à CLASSE e não ao
   id da tela, para que uma tela larga nova não precise que alguém lembre disto.
   Navegador sem `:has()` cai na regra de cima, que é a coluna estreita: nas
   outras oito telas fica certo e naquela fica 80px fora de registro, que era o
   estado antes desta linha. Degradação aceita, não esquecimento. */
body:has(.tela--larga:not([hidden])) .rodape .wrap{
  max-width:calc(var(--coluna-larga) + var(--folga-wrap) * 2);
}
.rodape p{margin:0;font-size:12px;line-height:18px;color:var(--tx-2)}
.rodape a{color:var(--tx-2)}
.rodape p + p{margin-top:8px}