/* ============================================================================
   O molde da DeixaAI. Todo material visual nasce aqui.

   Regra da casa: nada de cor, tamanho ou espaçamento solto no HTML. Se um
   valor não existe aqui, ele não existe. É isso que faz "mudou no molde, mudou
   em todo lugar" ser verdade em vez de promessa.

   A página templates.html mostra tudo que existe neste arquivo, funcionando.
   Mexeu aqui, abra ela e confira antes de publicar.

   ---------------------------------------------------------------------------
   21/09/2026: o molde virou escuro.

   O site claro parecia documento. O produto é um funcionário que trabalha de
   madrugada, e o breu do manual de marca (o fundo mais forte que a marca tem)
   diz isso sem precisar escrever. Duas coisas sustentam a página inteira:

     1. O LAUDO, que é a prova de que ela confere antes de responder.
     2. OS TRÊS ESTADOS, vermelho, âmbar e verde, que são vocabulário e não
        paleta. Vermelho aqui quer dizer "alguém está esperando", sempre.

   JavaScript só entra de ARQUIVO do próprio site, e só onde CSS não dá conta:
   a política do nginx é `script-src 'self'` desde 23/09/2026, quando a
   calculadora precisou fazer conta na tela. Script escrito dentro da página e
   script de terceiro continuam bloqueados. Todo movimento continua sendo CSS,
   e some inteiro quando a pessoa pede menos movimento no aparelho.
   ========================================================================= */

:root {
  /* --- cor ---------------------------------------------------------------
     O breu do manual de marca (#0B1220) abre em três camadas. Uma cor só de
     fundo achata a página: cartão, seção e poço precisam se distinguir sem
     borda grossa, e é a camada que faz isso. */
  --breu:       #080E1B;   /* o chão da página */
  --breu-fundo: #0C1524;   /* a seção que desce um degrau */
  --papel:      #121B2E;   /* cartão */
  --papel-alto: #18233B;   /* cartão que precisa saltar do cartão */
  --linha:      #22304E;
  --linha-viva: #33456E;   /* borda de peça em foco ou em destaque */

  /* Texto. Nenhum neutro da DeixaAI é cinza puro: todo um deles tem um fio de
     azul dentro, e é o que separa uma tela escolhida de uma tela descuidada. */
  --claro:      #EDF1FA;
  --fraca:      #8D9BBC;

  /* O azul e o violeta da marca não mudam: são estes que entram no degradê e
     no botão, com texto branco por cima. O que muda é que TEXTO em azul sobre
     breu precisa da versão clara, senão ele some no fundo. */
  --azul:       #3054F0;
  --violeta:    #6C4CF0;
  --azul-claro: #8AA0FF;
  --degrade:    linear-gradient(103deg, var(--azul), var(--violeta));

  /* Os três estados. O significado é fechado e vem do painel:
       vermelho = precisa de gente agora
       âmbar    = está na mão de alguém
       verde    = resolvido
     Os hex do manual foram feitos para fundo claro e somem no breu, então cada
     um tem aqui a versão que se lê no escuro. O significado é o mesmo; o que
     muda é a luz do fundo em que ele está. */
  --alerta:       #FF7185;
  --alerta-fundo: rgba(255, 113, 133, .13);
  --atencao:       #F2B33D;
  --atencao-fundo: rgba(242, 179, 61, .13);
  --bom:       #3DD79A;
  --bom-fundo: rgba(61, 215, 154, .13);

  /* --- texto -------------------------------------------------------------
     Uma família para tudo que se lê, e uma exceção que vive só dentro da
     marca. É a regra da seção 4 do manual, e ela voltou a valer em 21/09/2026:
     o molde antigo escrevia título em Poppins, que o manual reserva ao
     logotipo. IBM Plex Sans também combina melhor com o que a página afirma:
     foi desenhada para dado em tela, e a página inteira fala de conferir. */
  --fonte:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --marca-fonte: "Poppins", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --t-heroi:   clamp(2.35rem, 5.2vw, 4rem);
  --t-gigante: clamp(1.85rem, 3.5vw, 2.6rem);
  --t-grande:  clamp(1.3rem, 2.2vw, 1.6rem);
  --t-medio:   1.12rem;
  --t-corpo:   1.02rem;
  --t-miudo:   .86rem;
  --t-nanico:  .76rem;

  /* --- espaço ---------------------------------------------------------- */
  --e1: 6px; --e2: 12px; --e3: 20px; --e4: 32px; --e5: 52px; --e6: 92px;
  --largura: 1140px;
  --canto: 14px;
  --canto-grande: 22px;

  /* Sombra no escuro não aparece: o que dá profundidade é a borda clara em
     cima da peça, como a luz que bate na quina de um objeto. */
  --relevo: inset 0 1px 0 rgba(255, 255, 255, .06);
  --sombra: 0 26px 60px -30px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--breu);
  color: var(--claro);
  font: var(--t-corpo)/1.65 var(--fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- estrutura --------------------------------------------------------- */
.faixa { padding: var(--e6) var(--e3); position: relative; }
/* No celular a faixa respira menos: 92px em cima e embaixo de cada seção viram
   meia tela de nada num aparelho de 844px de altura. */
@media (max-width: 700px) { .faixa { padding: var(--e5) var(--e3); } }
.faixa--fundo { background: var(--breu-fundo); }
/* O poço é o degrau para baixo, e não para cima: a seção em que a gente conta
   o que NÃO faz é a mais quieta da página, de propósito. */
.faixa--poco  { background: #05090F; }
.dentro { max-width: var(--largura); margin: 0 auto; position: relative; }
.colunas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.duas { display: grid; gap: var(--e5); grid-template-columns: 1.02fr .98fr; align-items: center; }
@media (max-width: 860px) { .duas { grid-template-columns: 1fr; gap: var(--e4); } }

/* Contagem fixa de colunas, e não auto-fit: com auto-fit, seis cartões viram
   três de um tamanho e três de outro conforme a largura, e aí eles deixam de
   ser comparáveis, que é a única razão de estarem lado a lado. */
.colunas--tres   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colunas--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.colunas--tres, .colunas--quatro { margin: var(--e4) 0 var(--e3); }
@media (max-width: 900px) { .colunas--tres, .colunas--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .colunas--tres, .colunas--quatro { grid-template-columns: 1fr; } }

/* --- texto ------------------------------------------------------------- */
/* `text-wrap: balance` foi embora em 10/09/2026. Ele deixa as linhas do título
   com o mesmo comprimento, e o preço disso é encurtar TODAS elas: numa faixa
   larga, o título quebrava em três linhas curtas com meia página vazia do
   lado. `pretty` só evita a última linha com uma palavra sozinha, que é o
   defeito que a gente realmente queria resolver. */
h1, h2, h3 { font-family: var(--fonte); font-weight: 600; line-height: 1.12;
             margin: 0 0 var(--e2); letter-spacing: -.028em; text-wrap: pretty; }
h1 { font-size: var(--t-heroi); font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: var(--t-gigante); letter-spacing: -.032em; }
h3 { font-size: var(--t-grande); }
p  { margin: 0 0 var(--e2); }
a  { color: var(--azul-claro); }
strong { font-weight: 600; color: var(--claro); }

.chamada { font-size: var(--t-medio); color: var(--fraca); max-width: 72ch; line-height: 1.6; }
/* A medida de leitura é do BLOCO, e não de cada parágrafo. Quem limita a
   medida é a coluna em que o texto está, e as listas largas viram duas colunas
   para usar a linha inteira sem esticar a leitura. */
.itens--duas { columns: 2; column-gap: var(--e5); margin-top: var(--e4); }
.itens--duas li { break-inside: avoid; }
@media (max-width: 760px) { .itens--duas { columns: 1; } }
time, .valor { font-variant-numeric: tabular-nums; }
.fraca  { color: var(--fraca); }
.miudo  { font-size: var(--t-miudo); }
.nanico { font-size: var(--t-nanico); }

/* --- marca ------------------------------------------------------------- */
.marca { display: inline-flex; align-items: center; gap: 10px;
         font-family: var(--marca-fonte); font-weight: 700; font-size: 1.24rem;
         letter-spacing: -.035em; color: var(--claro); text-decoration: none; }
.marca .ia { background: var(--degrade); -webkit-background-clip: text;
             background-clip: text; color: transparent; }
.marca__sinal { width: 30px; height: 30px; }

/* --- botão ------------------------------------------------------------- */
.botao { display: inline-flex; align-items: center; justify-content: center;
         gap: 9px; padding: 14px 27px; border-radius: 999px; border: 0;
         cursor: pointer; font: 600 var(--t-corpo)/1 var(--fonte);
         letter-spacing: -.01em; text-decoration: none;
         transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.botao--cheio { background: var(--degrade); color: #fff;
                box-shadow: 0 10px 28px -12px rgba(76, 96, 240, .9), var(--relevo); }
.botao--cheio:hover { transform: translateY(-2px);
                      box-shadow: 0 16px 34px -12px rgba(76, 96, 240, 1), var(--relevo); }
.botao--vazio { background: rgba(255, 255, 255, .03); color: var(--claro);
                box-shadow: inset 0 0 0 1px var(--linha-viva); }
.botao--vazio:hover { background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.botao--largo { width: 100%; }

/* --- selo -------------------------------------------------------------- */
/* O ponto antes do texto é o mesmo ponto do painel: é assim que a equipe lê o
   estado de uma conversa na fila, e a página usa o mesmo sinal para dizer a
   mesma coisa. Etiqueta não quebra no meio: "precisa de / gente" em duas
   linhas deixa de parecer etiqueta. */
.selo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
        padding: 4px 12px 4px 10px; border-radius: 999px;
        font-size: var(--t-nanico); font-weight: 600; letter-spacing: .005em; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                background: currentColor; flex: none; }
.selo--calmo   { background: rgba(138, 160, 255, .12); color: var(--azul-claro); }
.selo--alerta  { background: var(--alerta-fundo);  color: var(--alerta); }
.selo--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo--bom     { background: var(--bom-fundo);     color: var(--bom); }

/* --- cartão ------------------------------------------------------------ */
.cartao { background: var(--papel); border: 1px solid var(--linha);
          border-radius: var(--canto); padding: var(--e3);
          box-shadow: var(--relevo); }
.cartao--solto { background: var(--papel-alto); border-color: var(--linha-viva);
                 border-radius: var(--canto-grande); padding: var(--e4);
                 box-shadow: var(--sombra), var(--relevo); }
.cartao h3 { margin-bottom: var(--e1); }
.cartao p:last-child { margin-bottom: 0; }
/* O cartão do que já está inteiro ganha a borda verde, e só ele. Cartão
   colorido em todo mundo faz a página virar semáforo e ninguém enxergar a
   diferença, que é justamente o que o bloco existe para mostrar. */
.cartao--ligado { border-left: 2px solid var(--bom); }
.cartao .selo { margin-bottom: var(--e2); }

/* --- divisória ---------------------------------------------------------- */
hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e3) 0; }

/* --- lista de itens ----------------------------------------------------- */
.itens { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.itens li { padding-left: 27px; position: relative; }
.itens li::before { content: ""; position: absolute; left: 2px; top: .62em;
                    width: 7px; height: 7px; border-radius: 2px;
                    background: var(--degrade); }
/* Na lista do que a gente NÃO faz, o marcador não pode ser o mesmo da lista do
   que a gente faz: ali ele é um traço, e o traço lê como "isto está de fora". */
.itens--nao li::before { background: var(--linha-viva); width: 11px; height: 2px;
                         border-radius: 1px; top: .82em; }

/* --- formulário --------------------------------------------------------- */
.campo { display: block; margin: 0 0 var(--e2); }
.campo span { display: block; font-size: var(--t-miudo); color: var(--fraca); margin-bottom: 5px; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 12px 14px; color: var(--claro);
  border: 1px solid var(--linha); border-radius: 11px;
  font: var(--t-corpo) var(--fonte); background: rgba(0, 0, 0, .25); }
.campo input::placeholder, .campo textarea::placeholder { color: #6B7799; }
/* A caixa de várias linhas nasce com três linhas à vista e cresce só para
   baixo: puxada para o lado, ela empurraria a coluna da conta e quebraria a
   calculadora em duas. */
.campo textarea { display: block; min-height: 96px; line-height: 1.5; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul-claro);
                                            outline-offset: 1px; border-color: transparent; }

/* --- cabeçalho ---------------------------------------------------------- */
/* Ele flutua, e não encosta no topo: a página é escura de ponta a ponta, e uma
   barra colada com a mesma cor do fundo vira uma faixa que não se sabe se é
   menu ou conteúdo. Solta, com borda, ela é claramente um objeto por cima. */
.cabecalho { position: sticky; top: 0; z-index: 9; padding: var(--e2) var(--e3) 0; }
.cabecalho .dentro { display: flex; align-items: center; gap: var(--e3);
                     padding: 11px 11px 11px var(--e3); border-radius: 999px;
                     background: rgba(12, 21, 36, .82);
                     backdrop-filter: blur(14px) saturate(1.4);
                     -webkit-backdrop-filter: blur(14px) saturate(1.4);
                     border: 1px solid var(--linha); box-shadow: var(--relevo); }
.cabecalho nav { margin-left: auto; display: flex; gap: var(--e3); align-items: center; }
.cabecalho nav a { color: var(--fraca); text-decoration: none; font-size: .95rem; }
.cabecalho nav a:hover { color: var(--claro); }
.cabecalho nav .botao { padding: 11px 21px; }
.cabecalho nav a.botao--cheio { color: #fff; }
@media (max-width: 760px) { .cabecalho nav a.some-no-celular { display: none; } }

/* --- rodapé ------------------------------------------------------------- */
.rodape { background: #05090F; color: var(--fraca); padding: var(--e5) var(--e3);
          border-top: 1px solid var(--linha); }
.rodape .dentro { display: flex; flex-wrap: wrap; gap: var(--e4);
                  align-items: flex-start; justify-content: space-between; }
.rodape a { color: var(--claro); text-decoration: none; }
/* O endereço não encosta na marca: sem esta linha, "Belém, Pará" grudava no
   logotipo, e era o único lugar do rodapé que precisava de ajuste na página. */
.rodape .marca + p { margin-top: var(--e2); }
.rodape a:hover { text-decoration: underline; }

/* =========================================================================
   AS PEÇAS DA PÁGINA
   ========================================================================= */

/* --- a abertura --------------------------------------------------------- */
/* A aura é a única luz de enfeite da página, e ela está aqui porque o herói é
   escuro de ponta a ponta: sem ela, a primeira tela é um retângulo preto com
   texto. Duas manchas muito fracas, nas cores da marca, e nenhuma outra seção
   ganha a mesma coisa. Enfeite repetido deixa de ser destaque. */
.abertura { padding-top: var(--e5); overflow: hidden; }
.abertura::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 150%;
  background:
    radial-gradient(48% 42% at 18% 22%, rgba(48, 84, 240, .30), transparent 68%),
    radial-gradient(44% 40% at 82% 40%, rgba(108, 76, 240, .24), transparent 70%);
  pointer-events: none; z-index: 0; }
.abertura .duas { align-items: center; }
@media (max-width: 860px) { .abertura .duas { align-items: start; } }

/* A manchete tem duas vozes. A primeira frase é o que o concorrente faz, e ela
   é dita em voz baixa; a segunda é o produto, e é ela que fica acesa. Sem isso
   a frase inteira tem o mesmo peso e a comparação se perde. */
.manchete__eco { display: block; color: var(--fraca); font-weight: 600; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0 var(--e3); }

/* A pílula do topo diz o canal, que é a primeira dúvida de quem chega: onde
   isso funciona. Não é etiqueta de enfeite, é resposta. */
.pilula { display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 15px 6px 12px; margin: 0 0 var(--e3);
          border-radius: 999px; border: 1px solid var(--linha-viva);
          background: rgba(255, 255, 255, .03); color: var(--fraca);
          font-size: var(--t-miudo); }
.pilula__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--bom); flex: none; }

/* --- o laudo ------------------------------------------------------------ */
/* A abertura mostra o LAUDO, e não um balão de conversa. Balão é o que todo
   chatbot mostra, e mostrar o mesmo diz que somos a mesma coisa. Um chatbot
   não lê um comprovante, não compara com a conta da empresa e não acha uma
   divergência: é isso que a primeira tela precisa provar. */
.laudo { margin: 0; background: var(--papel-alto); border: 1px solid var(--linha-viva);
         border-radius: var(--canto-grande); padding: var(--e4);
         box-shadow: var(--sombra), var(--relevo); }
.laudo__topo { display: flex; align-items: center; justify-content: space-between;
               gap: var(--e2); margin-bottom: var(--e3); flex-wrap: wrap; }
.laudo h3 { margin-bottom: var(--e3); }

/* Rótulo e valor em colunas fixas: numa lista de conferência, o olho desce
   pela coluna dos valores comparando. Em linha corrida, ele volta ao começo a
   cada linha e a comparação se perde. */
.laudo__linhas { display: grid; grid-template-columns: auto minmax(0, 1fr);
                 gap: 9px var(--e3); margin: 0; font-size: var(--t-miudo); }
.laudo__linhas dt { color: var(--fraca); }
.laudo__linhas dd { margin: 0; color: var(--claro); font-weight: 500;
                    font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* A linha que não fecha fica vermelha, e só ela. É a única divergência do
   documento, e é o motivo de o cartão existir. */
.laudo__linhas dd.nao-fecha { color: var(--alerta); }
.laudo__achado { margin: var(--e3) 0 0; padding: var(--e3);
                 border-left: 2px solid var(--alerta); background: var(--alerta-fundo);
                 border-radius: 0 10px 10px 0; font-size: var(--t-miudo); }
.laudo__pe { margin: var(--e3) 0 0; }

/* --- os três estados ---------------------------------------------------- */
/* Esta faixa é a assinatura da marca, e ela vem do produto e não de um
   moodboard: no painel, toda conversa está num destes três estados. Quem
   entende a faixa entende o resto da página, porque a cor passa a querer dizer
   a mesma coisa em todo lugar. */
.estados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: var(--e3); margin: var(--e4) 0 0; padding: 0; list-style: none; }
@media (max-width: 720px) { .estados { grid-template-columns: 1fr; gap: var(--e2); } }
.estados li { padding: var(--e3) var(--e3) var(--e3) var(--e4); position: relative;
              background: var(--papel); border: 1px solid var(--linha);
              border-radius: var(--canto); }
.estados li::before { content: ""; position: absolute; left: var(--e3); top: var(--e3);
                      width: 8px; height: 8px; border-radius: 50%; margin-top: .42em; }
.estados__vermelho::before { background: var(--alerta);  box-shadow: 0 0 0 4px var(--alerta-fundo); }
.estados__ambar::before    { background: var(--atencao); box-shadow: 0 0 0 4px var(--atencao-fundo); }
.estados__verde::before    { background: var(--bom);     box-shadow: 0 0 0 4px var(--bom-fundo); }
.estados strong { display: block; margin-bottom: 2px; }
.estados p { margin: 0; font-size: var(--t-miudo); color: var(--fraca); }

/* --- a trilha ----------------------------------------------------------- */
/* A trilha é uma sequência de verdade: é o que acontece com uma mensagem, na
   ordem. Por isso o marcador é o VERBO, e não 01/02/03: o verbo diz qual parte
   do trabalho está acontecendo ali, e o número não diria nada.

   O fio que liga os passos vai do azul ao verde porque a mensagem vai de
   "chegou" a "resolvido". É o mesmo caminho que a cor conta na faixa dos três
   estados, e por isso o último nó é verde e nenhum outro é. */
.trilha { list-style: none; margin: var(--e5) 0 0; padding: 0; position: relative; }
.trilha::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px;
                  width: 2px; border-radius: 1px;
                  background: linear-gradient(180deg, var(--azul), var(--violeta) 55%, var(--bom)); }
.trilha li { display: grid; grid-template-columns: 128px minmax(0, 1fr);
             gap: var(--e4); padding: 0 0 var(--e5) var(--e4); position: relative;
             max-width: none; }
.trilha li:last-child { padding-bottom: 0; }
.trilha li::before { content: ""; position: absolute; left: 0; top: 10px;
                     width: 12px; height: 12px; border-radius: 50%;
                     background: var(--breu-fundo);
                     border: 2px solid var(--violeta); }
.trilha li:first-child::before { border-color: var(--azul); }
.trilha li:last-child::before  { border-color: var(--bom); background: var(--bom); }
.trilha__verbo { font-weight: 600; font-size: 1.05rem; margin: 0; color: var(--claro);
                 letter-spacing: -.02em; }
.trilha__hora { display: block; font-size: var(--t-nanico); color: var(--fraca);
                font-variant-numeric: tabular-nums; margin-top: 3px; }
.trilha__corpo { max-width: 68ch; }
.trilha__corpo p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .trilha li { grid-template-columns: 1fr; gap: var(--e2); padding-bottom: var(--e4); }
}

/* --- o placar ----------------------------------------------------------- */
/* O número grande é verde porque ele É um estado: conversa resolvida sem
   precisar de gente. Se fosse azul seria só um número bonito. */
.placar-do-site__numero { font-weight: 700; font-size: clamp(3.2rem, 7vw, 4.6rem);
                          line-height: 1; letter-spacing: -.05em; color: var(--bom);
                          margin: 0; font-variant-numeric: tabular-nums; }
.placar-do-site__rotulo { font-weight: 600; color: var(--claro); margin: var(--e1) 0 0; }
.placar-do-site hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e3) 0; }

/* --- conversa de exemplo ------------------------------------------------ */
.conversa { background: var(--papel); border: 1px solid var(--linha);
            border-radius: var(--canto-grande); padding: var(--e3); max-width: 420px; }
.balao { max-width: 84%; padding: 10px 14px; border-radius: 14px; margin: 0 0 10px;
         font-size: .96rem; }
.balao--cliente { background: var(--papel-alto); }
.balao--agente  { background: rgba(48, 84, 240, .22); margin-left: auto; }
.balao--gente   { background: var(--bom-fundo); margin-left: auto; }
.balao time { display: block; font-size: var(--t-nanico); color: var(--fraca); margin-top: 4px; }

/* --- o aviso honesto ---------------------------------------------------- */
/* Borda, e não fundo colorido: ele não é alerta, é uma ressalva que a gente faz
   questão de escrever antes de alguém comprar. */
.aviso-honesto { border-left: 2px solid var(--linha-viva); padding-left: var(--e3);
                 margin: var(--e4) 0 var(--e2); max-width: 78ch; }

/* --- a tela do produto -------------------------------------------------- */
/* O manual de marca é fechado nisso: tela de produto é print DE VERDADE do
   painel, nunca desenho e nunca imagem gerada. A moldura existe para o print
   parecer o que ele é, uma janela de sistema, em vez de uma figura solta no
   meio do texto.

   A legenda não é enfeite nem é opcional: ela diz que a empresa e as conversas
   são de mentira. Sem isso, o print de uma tela cheia de nome e telefone dá a
   entender que ali está gente de verdade, e é o tipo de dúvida que a marca não
   pode deixar no ar. */
.tela { margin: 0; }
.tela img { display: block; width: 100%; height: auto;
            border-radius: var(--canto-grande); border: 1px solid var(--linha-viva);
            box-shadow: var(--sombra), var(--relevo); background: var(--breu); }
.tela figcaption { margin-top: var(--e2); font-size: var(--t-nanico); color: var(--fraca); }

/* A tela larga passa dos lados da coluna de texto. Uma tela de sistema é larga
   de verdade, e encolhida para caber na medida de leitura ela vira uma tira em
   que não se lê nada, que é o mesmo que não ter print nenhum. */
.tela--larga { max-width: 1320px; margin-inline: auto; margin-top: var(--e5); }
@media (min-width: 1400px) { .tela--larga { max-width: 1320px; } }

/* --- as logos dos sistemas ---------------------------------------------- */
.sistema__nome { display: flex; align-items: center; gap: 9px; }

/* =========================================================================
   MOVIMENTO

   Um momento só na página inteira, e ele é o argumento: as linhas do laudo
   aparecem uma a uma, como quem confere item por item, e a divergência só
   surge no fim, depois de tudo conferido. Um chatbot não tem esse momento
   porque não confere nada.

   O ciclo dura menos de dois segundos. Quem chegar depois disso, ou quem pediu
   menos movimento no aparelho, encontra o laudo pronto e completo: nada aqui é
   necessário para entender o cartão.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .laudo__linhas--conferindo > dt,
  .laudo__linhas--conferindo > dd { animation: confere .42s ease-out backwards; }
  .laudo__linhas--conferindo > :nth-child(1),
  .laudo__linhas--conferindo > :nth-child(2)  { animation-delay: .15s; }
  .laudo__linhas--conferindo > :nth-child(3),
  .laudo__linhas--conferindo > :nth-child(4)  { animation-delay: .32s; }
  .laudo__linhas--conferindo > :nth-child(5),
  .laudo__linhas--conferindo > :nth-child(6)  { animation-delay: .49s; }
  .laudo__linhas--conferindo > :nth-child(7),
  .laudo__linhas--conferindo > :nth-child(8)  { animation-delay: .66s; }
  .laudo__linhas--conferindo > :nth-child(9),
  .laudo__linhas--conferindo > :nth-child(10) { animation-delay: .83s; }
  .laudo__linhas--conferindo > :nth-child(11),
  .laudo__linhas--conferindo > :nth-child(12) { animation-delay: 1s; }
  @keyframes confere { from { opacity: 0; transform: translateY(5px); } }

  /* O achado vem por último, e é o único que se move de lado: ele não estava
     na lista, ele saiu dela. */
  .laudo__achado { animation: achado .5s cubic-bezier(.2, .8, .3, 1) 1.25s backwards; }
  @keyframes achado { from { opacity: 0; transform: translateX(-8px); } }

  /* O selo pulsa uma vez quando o achado aparece: é o "isto aqui é com você". */
  .laudo .selo--alerta { animation: chama-atencao .7s ease-out 1.35s backwards; }
  @keyframes chama-atencao {
    0%   { box-shadow: 0 0 0 0 rgba(255, 113, 133, .45); }
    100% { box-shadow: 0 0 0 12px rgba(255, 113, 133, 0); }
  }
}

/* --- acessibilidade ----------------------------------------------------- */
a:focus-visible, button:focus-visible, .botao:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--azul-claro); outline-offset: 2px; border-radius: 8px; }

/* O atalho para quem navega pelo teclado: primeira parada da página, invisível
   até receber o foco. Sem ele, chegar ao conteúdo exige passar por todo o
   menu, em toda visita. */
.pular { position: absolute; left: -9999px; top: 0; z-index: 99;
         background: var(--papel-alto); color: var(--claro);
         padding: 12px 20px; border-radius: 0 0 12px 0; }
.pular:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .botao:hover { transform: none; }
}

/* =========================================================================
   OS ESTADOS QUE TODA PEÇA TEM

   Elemento só existe de verdade quando existe em todos os estados em que ele
   vai aparecer. Estes nasceram em 21/09/2026, junto com a vitrine: sem eles, o
   primeiro campo com erro do site ia ser inventado na hora, dentro da página,
   e a segunda cópia é a que envelhece calada.
   ========================================================================= */

/* Desativado. Não é "apagado": é claramente clicável-mas-agora-não, senão as
   pessoas ficam clicando achando que a página travou. */
.botao[disabled], .botao--desligado {
  opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.campo input:disabled, .campo textarea:disabled {
  opacity: .5; cursor: not-allowed; background: rgba(0, 0, 0, .35); }

/* Erro. A borda muda, e vem uma frase que diz O QUE fazer. Campo que fica só
   vermelho manda a pessoa adivinhar qual é o problema. */
.campo--erro input, .campo--erro textarea { border-color: var(--alerta);
                                            background: var(--alerta-fundo); }
.campo__erro { display: block; margin-top: 5px; font-size: var(--t-miudo);
               color: var(--alerta); }

/* Carregando. Uma barra fina que atravessa a peça, e não um rodopio no meio:
   o rodopio esconde o conteúdo que já chegou. */
.carregando { position: relative; overflow: hidden; }
.carregando::after { content: ""; position: absolute; inset: 0 auto auto 0;
                     height: 2px; width: 35%; background: var(--degrade);
                     animation: atravessa 1.1s ease-in-out infinite; }
@keyframes atravessa { from { transform: translateX(-100%); }
                       to   { transform: translateX(386%); } }
@media (prefers-reduced-motion: reduce) {
  .carregando::after { animation: none; width: 100%; opacity: .5; }
}

/* Vazio. Nunca é só "nenhum resultado": diz o que houve e o que dá para fazer
   agora, que é a única coisa útil numa tela sem conteúdo. */
.vazio { text-align: center; padding: var(--e5) var(--e3); border-radius: var(--canto);
         border: 1px dashed var(--linha-viva); color: var(--fraca); }
.vazio strong { display: block; color: var(--claro); margin-bottom: var(--e1); }

/* Foco. Já está lá em cima, em `:focus-visible`, e não se repete aqui: a
   vitrine mostra o estado, o molde o define uma vez só. */

/* =========================================================================
   O FIM DA PÁGINA, refeito em 21/09/2026.

   A metade de baixo desmontava, e o motivo não era falta de enfeite: era falta
   de ARCO. Toda seção tinha a mesma forma (título, chamada, coisa), então a
   página virava uma lista, e lista não tem fim, só para. O que mudou:

     * o "o que a gente não faz" deixou de ser lista miúda. O manual de marca
       diz que este é o pilar que mais converte, porque é o único que soa
       verdade, e ele estava escrito no menor tamanho da página;
     * o fecho é o ÚNICO bloco centralizado do site. A exceção é o que avisa
       que acabou. Enquanto tudo era alinhado à esquerda, o fim parecia mais
       uma seção no meio do caminho.
   ========================================================================= */

/* --- as recusas --------------------------------------------------------- */
/* Cada uma é uma afirmação, e não um item de lista: o tamanho é o argumento.
   A palavra que nega abre a frase e fica acesa; o resto explica em voz mais
   baixa. Não é destacar palavra em cor diferente, é hierarquia de quem fala. */
.recusas { list-style: none; margin: var(--e5) 0 0; padding: 0;
           display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
           column-gap: var(--e6); }
@media (max-width: 860px) { .recusas { grid-template-columns: 1fr; column-gap: 0; } }
.recusas li { padding: var(--e4) 0; border-top: 1px solid var(--linha); }
.recusas b { display: block; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600;
             line-height: 1.25; letter-spacing: -.022em; color: var(--claro);
             margin-bottom: var(--e1); text-wrap: pretty; }
.recusas p { margin: 0; color: var(--fraca); font-size: var(--t-miudo); max-width: 46ch; }

/* --- o fecho ------------------------------------------------------------ */
/* Centralizado, e só ele. Largura curta de propósito: no fim da página quem
   chegou até aqui já leu tudo, e o que falta é uma pergunta e um caminho. */
.fecho { text-align: center; }
.fecho .dentro { max-width: 640px; }
.fecho h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.038em; }
.fecho .chamada { margin-inline: auto; max-width: 52ch; }
.fecho .acoes { justify-content: center; margin-top: var(--e4); }
.fecho .botao--cheio { padding: 17px 38px; font-size: var(--t-medio); }
/* Os dois contatos, lado a lado, com uma linha entre eles. No celular a linha
   vira horizontal sozinha, porque a coluna some. */
.contatos { display: flex; flex-wrap: wrap; justify-content: center;
            gap: var(--e3) var(--e5); margin-top: var(--e5);
            padding-top: var(--e4); border-top: 1px solid var(--linha); }
.contatos p { margin: 0; font-size: var(--t-miudo); color: var(--fraca); }
.contatos a { color: var(--claro); text-decoration: none; }
.contatos a:hover { text-decoration: underline; }

/* --- o cartão de setor -------------------------------------------------- */
/* A pergunta de verdade que aquele agente responde. "Financeiro: segunda via"
   é categoria; a pergunta é a cena, e cena é o que o manual de marca pede. */
.setor__pergunta { display: block; margin-top: var(--e2); padding-top: var(--e2);
                   border-top: 1px solid var(--linha); color: var(--fraca);
                   font-size: var(--t-miudo); font-style: italic; }

/* --- o cabeçalho, mais firme -------------------------------------------- */
/* A 82% de opacidade o texto da página passava POR TRÁS da barra e aparecia
   nas quinas arredondadas, como se a página estivesse rasgada. Fundo quase
   cheio resolve, e o desfoque continua dando o ar de peça solta. */
.cabecalho .dentro { background: rgba(9, 15, 27, .94); }


/* =========================================================================
   23/09/2026: a calculadora, as perguntas, o "Entrar" e o WhatsApp fixo.
   ========================================================================= */

/* --- o link de entrar ---------------------------------------------------- */
/* Quem já é cliente chega pelo site procurando a porta do painel, e ela não
   existia. Fica no cabeçalho em todas as larguras, discreto, porque é caminho
   de quem já comprou e não pode competir com o convite de quem ainda não. */
.cabecalho nav a.entrar { color: var(--claro); font-weight: 500; }
.cabecalho nav a.entrar:hover { color: var(--azul-claro); }
@media (max-width: 420px) { .cabecalho nav { gap: var(--e2); }
                            .cabecalho nav .botao { padding: 10px 15px; } }

/* --- a calculadora -------------------------------------------------------- */
/* Os campos de um lado, a conta do outro. A conta é o laudo da página: a
   mesma peça de prova, com o número grande em cima e cada parcela aberta
   embaixo, porque conta com número escondido não convence ninguém. */
.calculadora { display: grid; gap: var(--e4); margin-top: var(--e4);
               grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
@media (max-width: 860px) { .calculadora { grid-template-columns: 1fr; } }
.calculadora__campos { background: var(--papel); border: 1px solid var(--linha);
                       border-radius: var(--canto-grande); padding: var(--e4);
                       box-shadow: var(--relevo); }
@media (max-width: 560px) { .calculadora__campos { padding: var(--e3); } }
.calculadora__par { display: grid; gap: var(--e2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo select:focus { outline: 2px solid var(--azul-claro); outline-offset: 1px;
                      border-color: transparent; }
.campo__ajuda { display: block; margin-top: 5px; font-size: var(--t-nanico); color: var(--fraca); }

/* Opções de marcar, várias ao mesmo tempo ("o que ela faz", "quais sistemas").
   Pílula, e não quadradinho: marcada, ela muda de cor e ganha o visto, e dá
   para ler de longe o que foi escolhido. A caixa de verdade continua lá,
   escondida só dos olhos: teclado, leitor de tela e formulário a enxergam. */
.opcoes { border: 0; padding: 0; margin: 0 0 var(--e2); min-width: 0; }
.opcoes legend { padding: 0; margin-bottom: 7px; font-size: var(--t-miudo); color: var(--fraca); }
.opcoes__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; }
.opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcao span { display: inline-block; padding: 8px 13px; border: 1px solid var(--linha);
              border-radius: 999px; font-size: var(--t-miudo); color: var(--claro);
              background: rgba(0, 0, 0, .25); cursor: pointer; }
.opcao input:checked + span { border-color: var(--azul-claro); color: #fff;
                              background: rgba(48, 84, 240, .28); }
.opcao input:checked + span::before { content: "✓ "; color: var(--azul-claro); }
.opcao input:focus-visible + span { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.opcao input:disabled, .opcao input:disabled + span { opacity: .5; cursor: not-allowed; }
.calculadora__numero { font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 3.6rem);
                       letter-spacing: -.04em; line-height: 1; margin: var(--e1) 0 0;
                       font-variant-numeric: tabular-nums; color: var(--claro); }
.calculadora__rotulo { font-weight: 600; color: var(--claro); margin: var(--e2) 0 var(--e3); }
/* Na conta, o valor nunca quebra: a coluna do rótulo é que encolhe. Com a
   grade padrão do laudo, no celular, "R$ 5.400,00" saía uma letra por linha. */
.calculadora .laudo__linhas { grid-template-columns: minmax(0, 1fr) auto; }
.calculadora .laudo__linhas dd { white-space: nowrap; text-align: right; }
.calculadora .aviso-honesto { margin: var(--e3) 0 0; }
.calculadora .acoes { margin: var(--e3) 0 0; }

/* --- as perguntas -------------------------------------------------------- */
/* Abre e fecha sem JavaScript: é o <details> do próprio navegador. A pergunta
   é escrita como o dono pergunta, e a resposta sai do manual do produto. */
.perguntas { margin: var(--e4) 0 0; border-top: 1px solid var(--linha); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; list-style: none; padding: var(--e3) var(--e4) var(--e3) 0;
                     position: relative; font-weight: 600; color: var(--claro);
                     font-size: var(--t-medio); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: 4px; top: 50%;
                            transform: translateY(-50%); color: var(--azul-claro);
                            font-size: 1.4rem; font-weight: 400; }
.perguntas details[open] summary::after { content: "–"; }
.perguntas summary:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 4px;
                                   border-radius: 4px; }
.perguntas details p { margin: 0 0 var(--e3); color: var(--fraca); max-width: 70ch; }

/* --- o WhatsApp fixo ------------------------------------------------------ */
/* Quem está lendo a seção do meio não precisa rolar até o fim para falar com
   a gente. Fica no canto, pequeno, e diz o que faz em vez de ser só um ícone. */
.zap-fixo { position: fixed; right: var(--e3); bottom: var(--e3); z-index: 8;
            display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
            border-radius: 999px; background: #0F8A47; color: #fff; font-weight: 600;
            font-size: var(--t-miudo); text-decoration: none;
            box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8); }
.zap-fixo:hover { background: #12994F; }
.zap-fixo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.zap-fixo__ponto { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
@media (max-width: 560px) { .zap-fixo { right: var(--e2); bottom: var(--e2); } }
/* O rodapé ganha folga embaixo para o botão fixo não cobrir o último link. */
.rodape { padding-bottom: calc(var(--e5) + 56px); }
.rodape__links { display: flex; flex-direction: column; gap: 4px; }