/* ═══════════════════════════════════════════════════════════════════════════
   A IDENTIDADE DAS PAGINAS PUBLICAS DE VENDA
   ═══════════════════════════════════════════════════════════════════════════
   Este arquivo e' a cara da QG para quem ainda nao e' cliente: a home, e toda
   pagina de busca. Os valores sao copiados do codigo da home (`C_VENDA` e a
   `LandingPage`, em src/App.jsx), e nao escolhidos de novo.

   ── POR QUE ELE EXISTE ────────────────────────────────────────────────────
   Em 24/09/2026 o Gabriel reprovou a primeira pagina de busca: "odiei, fugiu
   completamente da identidade visual do site". Eu tinha copiado o molde dos
   MANUAIS, que e' claro. Refeita, ela ficou certa, e na hora de escrever a
   SEGUNDA pagina eu ia duplicar 250 linhas de estilo.

   Duas copias divergem. Passei aquele dia inteiro consertando exatamente essa
   familia de defeito no painel, entao a identidade mora aqui, num lugar so.

   ── A REGRA ───────────────────────────────────────────────────────────────
   Pagina de VENDA veste isto. MANUAL e PASSO A PASSO (como-usar, guia-*,
   proposta-*, bem-vindo-*) continuam no molde claro deles: sao coisas
   diferentes, uma a pessoa le depois de comprar e a outra decide se ela compra.

   ── E AS TRAVAS TECNICAS ──────────────────────────────────────────────────
   . a CSP e' `style-src 'self' 'unsafe-inline'`, entao folha do nosso dominio
     passa. Fonte de fora NAO passa (`font-src 'self' data:`), e por isso a
     Inter e' servida daqui mesmo.
   . nenhuma pagina que usa isto pode ter script dentro do HTML: o navegador
     recusa, calado. Ver `public/os.js` e `scripts/teste-as-paginas-publicas.mjs`.
*/

  /* A INTER, SERVIDA DAQUI MESMO. Um arquivo de 47 KB cobre os pesos 100 a 900.
     A CSP usa `font-src 'self' data:`, entao fonte do Google seria bloqueada. */
  @font-face{
    font-family:"Inter"; font-style:normal; font-weight:100 900;
    font-display:swap; src:url("/fontes/inter.woff2") format("woff2");
  }

  /* ── A PALETA DA PAGINA DE VENDA ──────────────────────────────────────────
     Copiada de `C_VENDA` em src/App.jsx. Um degrau mais fundo que o painel de
     proposito: o painel e' ferramenta e vive em #0D1117; a pagina precisa
     parecer OUTRA superficie, senao ela le como tela de sistema esquecida
     aberta. Esta pagina nao tem tema claro: a home tambem nao tem, porque tema
     e' escolha de quem TRABALHA no painel o dia inteiro, e pagina de venda tem
     identidade, nao tema. */
  :root{
    --bg:#090C11; --bg2:#0D1117; --card:#12171F; --card2:#161C25;
    --linha:#1F2833; --txt:#EAF0F6; --dim:#A7B3C0; --mute:#707E8C;
    --acc:#22C58B; --acc-txt:#06231A;
    --acc-soft:rgba(34,197,139,0.10); --acc-borda:rgba(34,197,139,0.28);
    --perigo:#F2697A;
  }
  *{box-sizing:border-box}
  /* O FUNDO VAI NO `html` TAMBEM. So no `body`, a barra de rolagem e o esticao
     do iPhone mostram branco na beirada, que e' justo o instante em que a
     pessoa percebe "ah, e' uma pagina branca com um tema por cima". */
  html{scroll-behavior:smooth;background:#090C11}
  body{
    margin:0; background:var(--bg); color:var(--txt);
    font-family:"Inter","Segoe UI",system-ui,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-feature-settings:"cv05" 1,"ss01" 1;
    line-height:1.66; font-size:17.5px;
  }
  img{max-width:100%}

  /* ── O ESQUELETO ───────────────────────────────────────────────────────── */
  .sec{max-width:1180px;margin:0 auto;padding:0 44px}
  .bloco{padding:112px 44px}
  .faixa{border-bottom:1px solid var(--linha)}
  /* a barra do topo tem 66px e cobria a primeira linha de quem chega por link
     de ancora: o texto sumia atras dela e parecia corte */
  section[id]{scroll-margin-top:78px}
  .faixa.fundo2{background:var(--bg2)}
  .col{max-width:680px}

  /* ── A TRIADE DE SECAO: sobrancelha, h2 afirmativo, paragrafo ───────────── */
  .olho{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
  /* ── A ESCALA E DAQUI, E NAO DA HOME ──────────────────────────────────────
     Eu tinha copiado 62px e 46px da pagina inicial. O Gabriel, vendo pronto:
     "as letras estao muito grandes eu acho hein".

     Estava certo, e a causa e' aritmetica, nao gosto. O titulo da home tem SETE
     palavras e ocupa duas linhas nos 62px. O desta pagina tem ONZE: nos mesmos
     62px ele ocupava QUATRO linhas e engolia a tela inteira, empurrando os
     botoes e a nave para fora do primeiro olhar.

     Escala nao se copia, se calcula em cima do texto que ela vai vestir. A
     identidade (paleta, fonte, acento) continua sendo a da home; o que muda
     aqui e' o tamanho. */
  h1{font-size:47px;font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0;text-wrap:balance}
  h2{font-size:37px;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:0;text-wrap:balance}
  h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0}
  p{font-size:17.5px;line-height:1.66;color:var(--dim);margin:0}
  .sub{color:var(--dim)}
  strong{color:var(--txt);font-weight:700}
  .depois{margin-top:18px}

  /* ── PECAS ─────────────────────────────────────────────────────────────── */
  .cartao{background:var(--card);border:1px solid var(--linha);border-radius:16px;padding:28px 26px}
  .btn{border-radius:10px;font-size:15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit}
  .btn-pri{background:var(--acc);color:var(--acc-txt);border:none;padding:14px 28px;font-weight:700;letter-spacing:-.01em}
  .btn-fan{background:transparent;color:var(--txt);border:1px solid var(--linha);padding:13px 26px;font-weight:600}
  .selo{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--dim)}
  .selo svg{color:var(--acc);flex-shrink:0;display:block}

  /* a moldura de navegador em volta do print: sem ela a captura flutua na
     pagina e parece print de WhatsApp; com ela, le como produto */
  .moldura{border-radius:16px;overflow:hidden;border:1px solid var(--linha);background:var(--card);box-shadow:0 40px 90px rgba(0,0,0,.55)}
  .moldura .barra{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--card2);border-bottom:1px solid var(--linha)}
  .moldura .bola{width:9px;height:9px;border-radius:50%;opacity:.75}
  .moldura .dominio{margin-left:10px;font-size:11px;color:var(--mute);letter-spacing:.02em}
  .moldura img{width:100%;display:block;object-fit:cover;object-position:top;max-height:520px}

  /* ── O CABECALHO FIXO ──────────────────────────────────────────────────── */
  header{position:sticky;top:0;z-index:100;background:rgba(9,12,17,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
  .topo{max-width:1180px;margin:0 auto;padding:15px 44px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
  .marca img{height:34px;display:block}
  .marca span{font-size:13px;font-weight:700;color:var(--dim);letter-spacing:.02em;line-height:1.25}
  .topo nav{display:flex;gap:28px}
  .topo nav a{font-size:14px;font-weight:600;color:var(--dim);text-decoration:none}
  .topo .acoes{display:flex;gap:8px;align-items:center}
  .topo .btn-fan{padding:10px 20px;font-size:14px}
  .topo .btn-pri{padding:10px 20px;font-size:14px}

  /* ── O HERO ────────────────────────────────────────────────────────────── */
  .hero{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center}
  .hero .brilho{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 55% at 78% 10%, #22C58B1F 0%, transparent 60%)}
  .hero .dentro{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:128px 44px 132px}
  .hero .texto{max-width:600px}
  .hero .olho{margin-bottom:22px}
  .hero p{font-size:17.5px;max-width:480px;margin-top:20px}
  .hero .botoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  .hero .btn-pri{font-size:16px;padding:16px 34px}
  .hero .btn-fan{font-size:16px;padding:15px 30px}
  .hero .selos{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px}
  .hero .arte{position:absolute;right:-4%;top:0;bottom:0;width:62%;z-index:1;pointer-events:none}
  .hero .arte img{width:100%;height:100%;object-fit:cover;object-position:center right;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 30%,#000 100%)}
  .flutua{animation:flutua 4.5s ease-in-out infinite}
  @keyframes flutua{0%{transform:translateY(0)}50%{transform:translateY(-9px)}100%{transform:translateY(0)}}
  /* ── O HERO DE PAGINA QUE RESPONDE PERGUNTA ──────────────────────────────
     Sem a nave: quem chegou aqui quer a resposta, e a arte empurraria o texto
     para baixo. Ela nasceu dentro do <style> da pagina do preco e virou classe
     MORTA na terceira pagina, que usava o nome e nao recebia nada: o hero
     ficava com os 640px de `min-height` e o paragrafo espremido em 480px, com
     mais da metade da largura vazia. Identidade compartilhada mora aqui. */
  .hero-texto{min-height:auto}
  .hero-texto .dentro{padding:96px 44px 84px}
  .hero-texto .texto{max-width:760px}
  .hero-texto p{max-width:640px;font-size:18.5px}

  .hero-cel{display:none}

  /* ── A LISTA DOS BURACOS ─────────────────────────────────────────────────
     Terceira versão, e as duas anteriores erraram para lados opostos.

     A primeira eram cinco cartõezinhos iguais, cinzas, com um marcador: cinco
     objetos do mesmo tamanho é a definição de lista morta, o olho passa por
     cima. A segunda espalhou três colunas por 1.100px, e o Gabriel foi direto
     ao ponto: "muito feia e perdida". Estava mesmo. A palavra do assunto ficava
     na ponta esquerda, a consequência na ponta direita, as duas pálidas, e no
     meio um vão enorme: lia como três coisas soltas, e não como uma frase.

     E a palavra do assunto era REDUNDANTE. "NOTA" ao lado de "ninguém lembrou
     de emitir a nota"; "ESCALA" ao lado de "continuou escalado". Ela ocupava
     180px para repetir o que a frase já dizia. Saiu.

     Ficou o que importa: a frase, com porte de subtítulo porque ela É o
     conteúdo desta seção, e logo abaixo o preço dela, recuado e discreto. Os
     dois juntos leem como uma unidade, que é o que eles são. */
  .buracos{list-style:none;margin:36px 0 0;padding:0;max-width:760px;border-top:1px solid var(--linha)}
  .buracos li{padding:20px 0;border-bottom:1px solid var(--linha)}
  .buracos .frase{display:block;font-size:19px;font-weight:600;color:var(--txt);line-height:1.4;letter-spacing:-.01em}
  .buracos .custo{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);margin-top:6px}
  /* ponto, e nao risco: o risco lia como TRAVESSAO, que e' a marca que o
     Gabriel nao usa em lugar nenhum da escrita da casa */
  .buracos .custo::before{content:"";flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--perigo);opacity:.8}
  .conclusao{font-size:21px;color:var(--txt);max-width:44ch;margin-top:44px;line-height:1.5;font-weight:500}

  /* ── A GRADE DOS MODULOS ───────────────────────────────────────────────── */
  .modulos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
  .icone{width:40px;height:40px;border-radius:11px;background:var(--acc-soft);border:1px solid var(--acc-borda);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .modulos h3{font-size:16.5px;margin-bottom:8px}
  .modulos p{font-size:14.5px}

  /* ── OS TRES TEMPOS ────────────────────────────────────────────────────── */
  .tempos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
  .tempo{border-top:2px solid var(--acc);padding-top:16px}
  .tempo .n{font-size:12px;font-weight:800;color:var(--acc);letter-spacing:.1em;display:block;margin-bottom:8px}
  .tempo h3{font-size:17px;margin-bottom:6px}
  .tempo p{font-size:15px}

  /* ── AS PERGUNTAS ────────────────────────────────────────────────────────
     Sem cartão, de propósito. Os módulos ali em cima já são seis cartões; se o
     FAQ usasse o mesmo desenho, as duas seções mais importantes da página
     leriam como a mesma coisa, e onze caixas iguais numa página de 700 palavras
     viram um formulário de cadastro comprido. Aqui o que separa é linha e
     espaço, que é como se dá relevo no escuro. */
  .perguntas{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:46px;border-top:1px solid var(--linha)}
  .pergunta{padding:26px 0;border-bottom:1px solid var(--linha)}
  .pergunta h3{font-size:17px;margin-bottom:10px;letter-spacing:-.01em;line-height:1.35}
  .pergunta p{font-size:15.5px}

  /* ── NOME E REGRA ────────────────────────────────────────────────────────
     Para quando cada item e' um NOME com uma regra atras: um imposto, um
     prazo, um codigo. O nome fica na coluna da esquerda, em acento, e a regra
     na direita. Nao e' cartao de proposito: cartao diz "objeto separado", e
     aqui a leitura e' de cima para baixo, comparando os nomes. */
  .regras{margin-top:44px;border-top:1px solid var(--linha);max-width:840px}
  .regra{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 36px;
         padding:24px 0;border-bottom:1px solid var(--linha)}
  /* O NUMERO E' A FIGURA, E NAO A LEGENDA. Na primeira versao o nome do
     imposto vinha em 15,5px de acento e o percentual em 12,5px cinza: a
     hierarquia estava de cabeca para baixo, porque o percentual E' o assunto
     da secao. Agora o nome vira sobrancelha e o numero vira figura. */
  .regra .quem{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
               text-transform:uppercase;color:var(--mute);line-height:1.4}
  .regra .taxa{display:block;font-size:31px;font-weight:800;color:var(--txt);
               letter-spacing:-.04em;line-height:1.05;margin-top:9px;
               font-variant-numeric:tabular-nums}
  .regra .taxa small{display:block;font-size:12.5px;font-weight:600;color:var(--dim);
                     letter-spacing:0;margin-top:7px;line-height:1.45}
  /* o item que nao tem percentual nenhum, que e' justamente o que o titulo
     dele diz: nenhuma tabela resolve */
  .regra.sem .taxa{font-size:21px;color:var(--perigo);letter-spacing:-.02em}
  /* O TEXTO VAI DENTRO DE `.oque`, E NAO SOLTO. A grade tem duas colunas: um
     terceiro filho solto (o segundo paragrafo) cai na PRIMEIRA coluna da linha
     seguinte, embaixo do nome do imposto, e fica com 210px de largura. */
  .regra .oque p{font-size:15.5px;margin:0}
  .regra .oque p + p{margin-top:10px}

  /* ── O QUE ELA NAO E ───────────────────────────────────────────────────── */
  .nao{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 48px;margin-top:40px}
  .nao div{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:var(--dim)}
  .nao span{flex-shrink:0;color:var(--mute);font-weight:800;width:14px;text-align:center}

  /* ── O FIM ─────────────────────────────────────────────────────────────── */
  .contato{position:relative;overflow:hidden}
  .contato .brilho{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(55% 60% at 50% 0%, #22C58B16 0%, transparent 60%)}
  .contato .dentro{position:relative;z-index:2;display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:center}
  .contato .selos{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .form{background:var(--card);border:1px solid var(--linha);border-radius:16px;padding:32px 30px}
  .form .zap{width:100%;font-size:16px;padding:15px 22px}
  .ou{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--mute);font-size:12.5px}
  .ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--linha)}
  .campos{display:flex;flex-direction:column;gap:11px}
  .campos input{width:100%;padding:12px 13px;font-size:14.5px;border-radius:9px;border:1px solid var(--linha);background:var(--bg2);color:var(--txt);outline:none;font-family:inherit}
  .campos input::placeholder{color:#8b96a3}
  .campos input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(34,197,139,.15)}
  #captcha:empty{display:none}
  #captcha{margin-top:2px}
  .enviar{width:100%;margin-top:5px;padding:14px;font-weight:700}
  .enviar[disabled]{opacity:.7;cursor:default}
  /* dizer o que acontece DEPOIS do clique é o que mais faz gente enviar: o
     formulário que não conta o próximo passo parece cadastro de boleto */
  .depois-do-clique{font-size:13px;color:var(--mute);margin-top:12px;line-height:1.5}
  .recado{font-size:13.5px;line-height:1.55;margin-top:12px;min-height:1px;color:var(--dim)}
  .recado.erro{color:var(--perigo)}
  .recado.ok{color:var(--acc);font-weight:700}

  /* ── O RODAPE ──────────────────────────────────────────────────────────── */
  footer{background:var(--bg2);border-top:1px solid var(--linha)}
  .rodape{max-width:1180px;margin:0 auto;padding:48px 44px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
  .rodape .quem{max-width:320px}
  .rodape .quem p{font-size:13.5px;color:var(--mute);margin-top:10px;line-height:1.6}
  .rodape .listas{display:flex;gap:64px}
  .rodape .lista{display:flex;flex-direction:column;gap:9px}
  .rodape .lista .olho{color:var(--mute);margin-bottom:3px}
  .rodape .lista a{font-size:13.5px;color:var(--dim);text-decoration:none}
  .fim{max-width:1180px;margin:0 auto;padding:0 44px 34px}
  .fim div{border-top:1px solid var(--linha);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}

  /* ── NO CELULAR ────────────────────────────────────────────────────────── */
  @media (max-width:900px){
    body{font-size:15.5px}
    .sec,.topo,.rodape,.fim{padding-left:22px;padding-right:22px}
    .bloco{padding:58px 22px}
    h1{font-size:36px}
    h2{font-size:30px}
    h3{font-size:19px}
    p{font-size:15.5px}
    .topo nav{display:none}
    .topo .btn-pri{display:none}
    /* o nome do imposto em cima da regra, e nao ao lado: em 390px a coluna de
       210px comia metade da largura e a regra saia em palavra por linha */
    .regra{grid-template-columns:minmax(0,1fr);gap:9px;padding:22px 0}
    .topo{padding:12px 20px}
    .marca span{max-width:120px}
    .hero{min-height:auto;display:block}
    .hero .dentro{padding:46px 22px 0}
    .hero .texto{max-width:none;text-align:center}
    .hero-texto .dentro{padding:44px 22px 40px}
    .hero-texto p{font-size:16.5px}
    /* o titulo desta pagina tem 11 palavras, contra 7 do da home: nos 36px da
       home ele ocupava cinco linhas e empurrava os botoes para fora da tela */
    .hero h1{font-size:31px;letter-spacing:-.03em}
    /* a sobrancelha tem 31 letras e quebrava em duas linhas centralizadas,
       o que deixa a palavra "ÔNIBUS" sozinha embaixo */
    .hero .olho{letter-spacing:.09em;font-size:10.5px}
    .hero p{font-size:16px;max-width:none}
    /* botao de tamanhos diferentes empilhado le como um principal e um
       esquecido: no celular os dois ocupam a linha inteira */
    .hero .botoes{flex-direction:column;align-items:stretch;gap:10px}
    .hero .botoes .btn{width:100%}
    .hero .selos{justify-content:center}
    .hero .arte{display:none}
    .hero-cel{display:block;padding:0 0 8px;position:relative;z-index:2}
    .hero-cel img{width:100%;display:block}
    .moldura img{max-height:300px}
    .modulos,.tempos,.nao,.contato .dentro{grid-template-columns:1fr;gap:14px}
    .contato .dentro{gap:32px}
    .form{padding:26px 22px}
    .buracos li{padding:17px 0}
    .buracos .frase{font-size:17px}
    .conclusao{font-size:18.5px;margin-top:34px}
    .perguntas{grid-template-columns:1fr;gap:0}
    .rodape .listas{gap:32px}
  }
  @media (max-width:760px){
    .campos input{font-size:16px}   /* o iOS dá zoom em campo abaixo de 16px */
  }
  @media (prefers-reduced-motion:reduce){ .flutua{animation:none} }