/* =====================================================================
   pontu.club - a landing comercial | direcao "Selo"
   Os tokens sao os mesmos do app (frontend/assets/tokens.css), copiados e
   nao importados: a landing e outro host (pontu.club) e o app desceu para
   app.pontu.club -- um @import cruzaria origem e travaria no CSP.
   Regra fixa da direcao: nenhum box-shadow, nenhum gradiente decorativo.
   O que separa dois blocos aqui e cor de fundo, linha de 1px e espaco.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

:root {
  --nanquim: #0F1A1C;
  --tinta-2: #33403E;
  --cinza: #6C7A78;
  --cinza-2: #8FA09C;
  --verde: #00B368;
  --verde-escuro: #04301D;
  --verde-campo: #E3F6EC;
  --papel: #F2F4F0;
  --branco: #FFFFFF;
  --linha: rgba(15, 26, 28, .15);
  --linha-forte: rgba(15, 26, 28, .35);
  --inativo: rgba(15, 26, 28, .08);
  --linha-escura: rgba(242, 244, 240, .16);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px;
  --tempo: 160ms;
  --curva: cubic-bezier(.2, .7, .3, 1);

  /* A margem cresce com a tela; o conteudo para em 1100px. */
  --margem: 20px;
  --max: 1100px;
}

@media (min-width: 760px) { :root { --margem: 32px; } }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--papel);
  color: var(--nanquim);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

/* O icone: sprite de <symbol> no fim do body, um <use> por ocorrencia. Mesmos
   tracados do IC do app (core.js) -- a grade e 24 e a espessura vem de la. */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic--g { width: 26px; height: 26px; stroke-width: 1.75; }
.ic--p { width: 17px; height: 17px; stroke-width: 1.75; }
.ic .cheio { fill: currentColor; stroke: none; }

.faixa { padding: 64px 0; }
.faixa--curta { padding: 44px 0; }
.faixa--tinta { background: var(--nanquim); color: var(--papel); }
.faixa--branca { background: var(--branco); }
.faixa + .faixa--branca, .faixa--branca + .faixa { border-top: 1px solid var(--linha); }
.faixa--tinta + .faixa, .faixa + .faixa--tinta { border-top: 0; }

.tela { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--margem); }

.rotulo {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cinza); margin-bottom: var(--e-3);
}
.faixa--tinta .rotulo { color: var(--cinza-2); }

.titulo { font-size: clamp(26px, 4.4vw, 40px); }
.sub { margin-top: var(--e-4); color: var(--tinta-2); font-size: 17px; max-width: 62ch; }
.faixa--tinta .sub { color: var(--cinza-2); }

/* ---------- botoes: os mesmos tres pesos do app ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 46px; padding: 0 22px; border-radius: var(--r-md);
  border: 1.5px solid var(--nanquim); background: var(--nanquim); color: var(--papel);
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none;
  cursor: pointer; transition: background var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.botao:hover { background: var(--tinta-2); border-color: var(--tinta-2); }
.botao--verde { background: var(--verde); border-color: var(--verde); color: var(--verde-escuro); }
.botao--verde:hover { background: #00c874; border-color: #00c874; }
.botao--vazio { background: transparent; color: var(--nanquim); }
.botao--vazio:hover { background: var(--inativo); border-color: var(--nanquim); }
.faixa--tinta .botao--vazio { color: var(--papel); border-color: var(--linha-escura); }
.faixa--tinta .botao--vazio:hover { background: rgba(242, 244, 240, .1); border-color: var(--papel); }
.botao--peq { min-height: 38px; padding: 0 15px; font-size: 14px; }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }

/* ---------- cabecalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(242, 244, 240, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo__linha { display: flex; align-items: center; gap: var(--e-4); min-height: 64px; }
.topo__marca { display: flex; align-items: center; text-decoration: none; flex: none; }
.topo__marca img { height: 27px; width: auto; }
.topo__nav { display: none; gap: var(--e-5); margin-left: auto; }
.topo__nav a { font-size: 14.5px; font-weight: 500; color: var(--tinta-2); text-decoration: none; }
.topo__nav a:hover { color: var(--nanquim); }
.topo__acoes { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.topo__nav + .topo__acoes { margin-left: var(--e-5); }
@media (min-width: 880px) { .topo__nav { display: flex; } }
@media (max-width: 460px) { .topo__acoes .so-largo { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 56px 0 64px; }
.hero__grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .hero__grade { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.hero__texto { min-width: 0; }
.hero__slogan { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--e-4);
                font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
                color: var(--verde); }
.hero__slogan::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--verde); }
.hero h1 { font-size: clamp(32px, 6vw, 54px); letter-spacing: -.04em; }
.hero h1 em { font-style: normal; color: var(--verde); }
.hero__sub { margin-top: var(--e-5); font-size: 18px; color: var(--tinta-2); max-width: 52ch; }
.hero__nota { margin-top: var(--e-5); font-size: 13.5px; color: var(--cinza); display: flex;
              flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); }
.hero__nota span { display: inline-flex; align-items: center; gap: 6px; }
.hero__nota .ic { color: var(--verde); }

/* A prova da direita nao e foto: e a propria tela do app, montada em HTML.
   Marca de verdade, numero de verdade, sem promessa que a tela nao cumpra. */
.mock { background: var(--nanquim); border-radius: var(--r-xl); padding: 22px; color: var(--papel);
        min-width: 0; }
.mock__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
              font-size: 12.5px; color: var(--cinza-2); }
.mock__topo b { color: var(--papel); font-weight: 600; }
.bilhete { margin-top: var(--e-4); background: var(--papel); color: var(--nanquim);
           border-radius: var(--r-lg); padding: 18px 18px 14px;
           /* Os furos do picote sao circulos INTEIROS montados em cima da borda
              (left/right: -9px). Sem o clip a metade de fora fica dark-on-dark
              -- parece igual, mas o bilhete passa a relatar 9px de rolagem
              interna, que e o defeito CAIXA da auditoria de overflow. Cortando
              aqui, o que sobra e o meio circulo, que e o desenho pretendido. */
           overflow: hidden; }
.bilhete__rotulo { font-size: 12px; color: var(--cinza); }
.bilhete__valor { font-size: 42px; font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-top: 4px; }
.bilhete__valor span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--cinza); margin-left: 6px; }
.picote { border-top: 1.5px dashed var(--linha-forte); margin: 14px -18px 10px; position: relative; }
.picote::before, .picote::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--nanquim); }
.picote::before { left: -9px; }
.picote::after { right: -9px; }
.bilhete__nota { margin-top: 10px; font-size: 12px; color: var(--cinza); }
.progresso__texto { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--cinza); }
.progresso__barra { display: flex; gap: 3px; margin-top: 7px; }
.progresso__barra i { flex: 1; height: 8px; border-radius: 2px; background: rgba(15, 26, 28, .12); }
.progresso__barra i.on { background: var(--verde); }
.mock__linha { display: flex; align-items: center; gap: var(--e-3); padding: 11px 0;
               border-bottom: 1px solid var(--linha-escura); font-size: 14px; flex-wrap: wrap; }
.mock__linha:last-child { border-bottom: 0; }
.mock__linha .grow { flex: 1; min-width: 120px; }
.mock__linha small { display: block; color: var(--cinza-2); font-size: 12px; }
.mock__linha b { font-weight: 600; font-size: 14px; white-space: nowrap; }
.mock__linha .ic { color: var(--verde); }
.mock__lista { margin-top: var(--e-5); }
.mock__rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
                color: var(--cinza-2); }

/* ---------- passos ---------- */
.passos { display: grid; gap: var(--e-6); margin-top: var(--e-8); counter-reset: p; }
@media (min-width: 760px) { .passos { grid-template-columns: repeat(3, 1fr); gap: var(--e-8); } }
.passo { border-top: 2px solid var(--nanquim); padding-top: var(--e-4); min-width: 0; }
.passo__n { counter-increment: p; font-size: 12px; font-weight: 700; letter-spacing: .13em; color: var(--cinza); }
.passo__n::before { content: "0" counter(p); }
.passo h3 { margin-top: var(--e-2); font-size: 20px; display: flex; align-items: center; gap: var(--e-2);
            flex-wrap: wrap; }
.passo p { margin-top: var(--e-2); color: var(--tinta-2); font-size: 15px; }

/* ---------- recursos ---------- */
.grade { display: grid; gap: var(--e-4); margin-top: var(--e-8); }
@media (min-width: 620px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grade { grid-template-columns: repeat(3, 1fr); } }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg);
          padding: var(--e-5); min-width: 0; }
.faixa--branca .cartao { background: var(--papel); }
.cartao__ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--verde-campo);
              color: var(--verde-escuro); display: flex; align-items: center; justify-content: center; }
.cartao h3 { margin-top: var(--e-4); font-size: 17px; }
.cartao p { margin-top: 6px; font-size: 14.5px; color: var(--tinta-2); }

/* ---------- recado ----------
   O paragrafo que precisa ser lido inteiro: de quem e o premio, de quem e a
   entrega. Nao e cartao (nao entra na grade nem compete com os irmaos) e nao
   e `.sub` (nao some no meio do texto corrido). O fio verde a esquerda e o
   unico destaque -- a direcao "Selo" nao tem sombra nem gradiente, entao o que
   separa um bloco do outro aqui e linha, cor de fundo e espaco. */
.recado { display: flex; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-6);
          padding: var(--e-4) var(--e-5); border: 1px solid var(--linha);
          border-left: 3px solid var(--verde); border-radius: var(--r-md);
          background: var(--branco); }
.faixa--branca .recado { background: var(--papel); }
.recado .ic { color: var(--verde-escuro); margin-top: 3px; }
.recado p { font-size: 14.5px; color: var(--tinta-2); max-width: 80ch; }
.recado b { color: var(--nanquim); font-weight: 600; }

/* ---------- ramos ---------- */
.ramos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-6); }
/* O chip nasce para fundo CLARO e a faixa tinta o escurece, nunca o
   contrario. Ele so existia na landing, dentro da `faixa--tinta`, entao a cor
   do papel e a borda clara estavam escritas nele proprio -- e nas paginas de
   ramo, que sao faixa clara, a etiqueta saia branca sobre branco: a secao
   inteira aparecia como uma fileira de checks verdes soltos, sem uma palavra,
   e sem erro em lugar nenhum. Cor de texto colada no componente e cor que so
   vale onde ele nasceu. */
.ramo { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
        border: 1px solid var(--linha); font-size: 14px; color: inherit; }
.faixa--tinta .ramo { border-color: var(--linha-escura); }
.ramo .ic { color: var(--verde); }
/* Chip que e link leva a pagina daquele ramo. O realce e a borda verde, e nao
   a linha forte, porque os mesmos chips aparecem sobre fundo claro (a pagina
   de ramo) e sobre a faixa tinta (a landing). */
a.ramo { text-decoration: none; color: inherit; transition: border-color var(--tempo) var(--curva); }
a.ramo:hover { border-color: var(--verde); }
a.ramo:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---------- a arte: foto sem texto por cima ----------
   Direcao "Selo": sem sombra e sem gradiente. A foto se separa do fundo por
   linha de 1px, raio e espaco -- nunca por um veu escuro com titulo em cima,
   que e o que a landing generica faz (mesma regra do cardCampanha do app:
   card com arte nao leva texto por cima). Cada faixa fixa a ALTURA da foto:
   sem isso o texto de baixo pula quando a imagem chega, e o width/height do
   atributo sozinho nao resolve, porque a largura aqui e fluida.
   O `background` no <img> e o lugar da imagem antes de ela carregar. */
.tira { width: 100%; height: clamp(210px, 32vw, 380px); object-fit: cover;
        background: var(--inativo); }
.tira--tela { height: clamp(200px, 28vw, 320px); border-radius: var(--r-xl);
              border: 1px solid var(--linha); margin-top: var(--e-8); }
.faixa--tinta .tira--tela { border-color: var(--linha-escura); }

/* O triptico do balcao. Tres colunas em qualquer largura: empilhado no
   celular viraria uma fita de 900px de altura que ninguem rola ate o fim. */
.triptico { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3);
            margin-top: var(--e-6); }
/* O `height: auto` nao e enfeite: o atributo height="1195" do <img> entra
   como dica de apresentacao, vira `height: 1195px` e ANULA o aspect-ratio --
   as tres fotos saiam com 100px de largura por 1150 de altura no celular,
   uma tira vertical que nao termina. Onde a altura vem do CSS (.tira) o
   problema nao existe, porque ali a regra ja vence a dica. */
.triptico img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
                border-radius: var(--r-lg); border: 1px solid var(--linha-escura);
                background: rgba(242, 244, 240, .08); }
/* No celular a coluna vale 97px: em 4/3 as tres viram uma fita de 74px de altura,
   fina demais para o rosto ser lido. O quadrado da 30% de altura sem empilhar, e o
   corte central preserva o profissional, que e o que estas tres fotos tem no meio. */
@media (max-width: 640px) { .triptico img { aspect-ratio: 1 / 1; } }

/* ---------- planos ---------- */
.ciclo { display: inline-flex; align-items: center; gap: 3px; padding: 3px; margin-top: var(--e-5);
         border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); }
.ciclo button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
                font: inherit; font-size: 14px; font-weight: 600; color: var(--cinza); cursor: pointer;
                display: inline-flex; align-items: center; }
.ciclo button[aria-pressed="true"] { background: var(--nanquim); color: var(--papel); }
.ciclo small { font-weight: 600; color: var(--verde-escuro); background: var(--verde-campo);
               border-radius: 999px; padding: 2px 7px; margin-left: 6px; font-size: 11.5px; }
.ciclo button[aria-pressed="true"] small { background: var(--verde); }

.planos { display: grid; gap: var(--e-4); margin-top: var(--e-6); align-items: start; }
@media (min-width: 640px) { .planos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .planos { grid-template-columns: repeat(4, 1fr); } }
.plano { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg);
         padding: var(--e-5); display: flex; flex-direction: column; min-width: 0; }
.plano--destaque { border: 2px solid var(--nanquim); }
.plano__selo { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700;
               letter-spacing: .1em; text-transform: uppercase; background: var(--verde-campo);
               color: var(--verde-escuro); border-radius: 999px; padding: 3px 10px; margin-bottom: var(--e-3); }
.plano h3 { font-size: 19px; }
.plano__quem { margin-top: 4px; font-size: 13.5px; color: var(--cinza); }
.plano__de { margin-top: var(--e-4); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
             font-size: 13.5px; color: var(--cinza); }
.plano__de + .plano__preco { margin-top: 2px; }
.plano__oferta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                 background: #FDEBC8; color: #7A4E00; border-radius: 999px; padding: 3px 9px; }
.plano__preco { margin-top: var(--e-4); display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.plano__preco b { font-size: 34px; font-weight: 700; letter-spacing: -.045em; }
.plano__preco i { font-style: normal; font-size: 14px; color: var(--cinza); }
.plano__ciclo { font-size: 13px; color: var(--cinza); margin-top: 3px; }
.plano__lista { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: 9px; }
.plano__lista li { display: flex; gap: var(--e-2); font-size: 14px; align-items: flex-start; }
.plano__lista .ic { color: var(--verde); margin-top: 2px; }
.plano__lista b { font-weight: 600; }
.plano .botao { margin-top: var(--e-5); width: 100%; }
.plano__nota { margin-top: var(--e-2); font-size: 12px; color: var(--cinza); text-align: center; }

/* A tabela e larga de proposito: quatro colunas de numero nao cabem em 360px.
   Ela rola DENTRO da propria caixa (.rolagem) e a caixa leva min-width:0 --
   sem isso a contribuicao dela para o minimo do pai poe a PAGINA inteira para
   rolar de lado. E a mesma armadilha do .tabs no painel do superadmin.
   O position:relative prende os .sr ("Nao incluido", absolute) dentro do
   recorte: sem ele o da ultima coluna parava em x=386 e a pagina rolava 26px
   de lado no celular. */
.rolagem { position: relative; overflow-x: auto; margin-top: var(--e-6); border: 1px solid var(--linha);
           border-radius: var(--r-lg); background: var(--branco); min-width: 0; }
.tabela { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 14px; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza);
                   background: var(--branco); }
.tabela thead th + th { text-align: center; }
.tabela tbody th { font-weight: 500; color: var(--tinta-2); }
.tabela td { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tr:last-child th, .tabela tr:last-child td { border-bottom: 0; }
.tabela .grupo th { background: var(--papel); font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--cinza); }
.tabela .ic { color: var(--verde); margin: 0 auto; }
.tabela .nao { color: var(--cinza-2); }
.tabela td.nao::before { content: ""; display: inline-block; width: 12px; height: 2px;
  border-radius: 1px; background: currentColor; vertical-align: middle; }

.adicionais { margin-top: var(--e-8); }
.adicionais .grade { margin-top: var(--e-4); }
/* Sao QUATRO adicionais, e a grade de recursos e de tres colunas: no desktop
   sobrava um cartao sozinho na segunda fila, que le como "esse aqui e o
   diferente". Quatro em linha cabem nos 1100px da tela (cada um fica com
   ~245px, mais largo que o minimo do texto), e nos 940-1100 a fila de dois
   por dois e mais honesta que 3+1. */
@media (min-width: 940px) { .adicionais .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .adicionais .grade { grid-template-columns: repeat(4, 1fr); } }
.adicionais .cartao p { font-size: 14px; }
.adicionais .cartao b { display: block; font-size: 15px; }

/* ---------- perguntas ---------- */
.perguntas { margin-top: var(--e-6); border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 16px;
                    display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary .ic { color: var(--cinza); transition: transform var(--tempo) var(--curva); }
.pergunta[open] summary .ic { transform: rotate(45deg); }
.pergunta p { padding: 0 0 18px; color: var(--tinta-2); font-size: 15px; max-width: 76ch; }
@media (prefers-reduced-motion: reduce) { .pergunta summary .ic { transition: none; } }

/* ---------- fecho e rodape ---------- */
.fecho { text-align: center; }
.fecho .sub { margin-left: auto; margin-right: auto; }
.fecho .acoes { justify-content: center; }

.rodape { background: var(--nanquim); color: var(--cinza-2); padding: 44px 0 32px; font-size: 14px; }
.rodape__linha { display: flex; flex-wrap: wrap; gap: var(--e-6); align-items: flex-start;
                 justify-content: space-between; }
.rodape img { height: 24px; width: auto; }
.rodape__marca { display: grid; gap: 8px; justify-items: start; }
.rodape__slogan { font-size: 13.5px; color: var(--cinza-2); opacity: .85; }
.rodape nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--papel); }
.rodape__fim { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--linha-escura);
               display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); font-size: 13px; }
@media (max-width: 720px) {
  .rodape { padding-bottom: calc(32px + 68px + env(safe-area-inset-bottom)); }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
      clip-path: inset(50%); white-space: nowrap; }

/* ---------- o chat do suporte ----------
   Gemeo do .sup-* do app (frontend/assets/style.css), com prefixo proprio
   porque a landing nao importa aquele arquivo -- outro host, e o CSP so
   deixa carregar de 'self'. Nada aqui e fixed alem do botao e da janela:
   em 640px a janela vira tela cheia, senao o teclado do celular come o
   campo de escrever. */
.ch-fab { position: fixed; z-index: 60; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--nanquim); color: var(--papel);
  box-shadow: 0 8px 24px rgba(15, 26, 28, .22);
  transition: transform var(--tempo) var(--curva); }
.ch-fab:hover { transform: translateY(-2px); }
.ch-fab.on { background: var(--verde); color: var(--verde-escuro); }
.ch-ic { fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }

.ch-painel { position: fixed; z-index: 60; right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  width: 370px; max-width: calc(100vw - 32px); max-height: min(74vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--branco); color: var(--nanquim);
  border: 1.5px solid var(--linha-forte); border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(15, 26, 28, .26); }

.ch-topo { display: flex; align-items: center; gap: var(--e-3); flex: none;
  padding: 12px 14px; background: var(--nanquim); color: var(--papel); }
.ch-topo strong { display: block; font-size: 14.5px; }
.ch-grow { flex: 1; min-width: 0; }
.ch-sub { font-size: 12px; color: var(--cinza-2); margin-top: 1px; }
.ch-x { flex: none; border: 0; background: transparent; color: var(--papel);
  cursor: pointer; padding: 4px; display: grid; place-items: center; }

.ch-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.ch-hint { font-size: 12.5px; line-height: 1.5; color: var(--cinza); margin: 0; }
.ch-center { text-align: center; }
.ch-err { font-size: 12.5px; color: #B3261E; margin: 0; min-height: 0; }

.ch-campo { display: block; }
.ch-campo span { display: block; font-size: 12px; font-weight: 600;
  color: var(--cinza); margin-bottom: 4px; }
.ch-campo input, .ch-campo textarea, .ch-cx {
  width: 100%; font: inherit; font-size: 14px; color: var(--nanquim);
  background: var(--papel); border: 1.5px solid var(--linha);
  border-radius: var(--r-md); padding: 10px 12px; }
.ch-campo textarea, .ch-cx { resize: none; }
.ch-campo input:focus, .ch-campo textarea:focus, .ch-cx:focus {
  outline: 2px solid var(--verde); outline-offset: 1px; }

.ch-bt { min-height: 42px; padding: 0 18px; border-radius: var(--r-md);
  border: 1.5px solid var(--nanquim); background: var(--nanquim);
  color: var(--papel); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; }
.ch-bt:disabled { opacity: .55; cursor: default; }
.ch-bt--ic { flex: none; padding: 0 12px; display: grid; place-items: center; }

/* A fita cresce e rola; o campo de escrever fica colado embaixo. */
.ch-fita { flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; }
.ch-envio { flex: none; display: flex; align-items: flex-end; gap: 8px; }
.ch-envio .ch-cx { flex: 1; min-width: 0; }

.ch-msg { max-width: 86%; display: grid; gap: 2px; }
.ch-msg__quem { font-size: 11px; font-weight: 600; color: var(--cinza); }
.ch-msg__h { font-size: 10.5px; color: var(--cinza-2); }
.ch-msg__txt { padding: 9px 12px; border-radius: var(--r-md); font-size: 13.5px;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.ch-msg--eu { align-self: flex-end; text-align: right; }
.ch-msg--eu .ch-msg__txt { background: var(--nanquim); color: var(--papel); }
.ch-msg--ia .ch-msg__txt, .ch-msg--sup .ch-msg__txt {
  background: var(--papel); border: 1.5px solid var(--linha); }
.ch-msg--sup .ch-msg__quem { color: var(--nanquim); }
.ch-msg--sup .ch-msg__txt { border-color: var(--linha-forte); }

/* O link do tutorial dentro da fala da IA. Botao, nao <a>: ele nao sai da
   landing -- abre o artigo por cima da propria conversa. */
.ch-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 6px 10px; border: 1.5px solid currentColor; border-radius: var(--r-sm);
  background: none; color: inherit; font: inherit; font-size: 12.5px; font-weight: 600;
  line-height: 1.2; cursor: pointer; text-align: left; }
.ch-link:hover { background: var(--inativo); }
.ch-msg--eu .ch-link:hover { background: rgba(255, 255, 255, .16); }

/* z-index acima do painel do chat (60): o tutorial abre POR CIMA da conversa,
   e a conversa continua ali quando ele fecha. */
.ch-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  padding: 18px; background: rgba(15, 26, 28, .55); }
.ch-modal__box { width: min(560px, 100%); max-height: min(86vh, 720px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--branco); color: var(--nanquim);
  border: 1.5px solid var(--linha-forte); border-radius: var(--r-lg); }
.ch-modal__topo { flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1.5px solid var(--linha); }
.ch-modal__t { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.25;
  letter-spacing: -.02em; }
.ch-modal__x { flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit;
  cursor: pointer; }
.ch-modal__x:hover { background: var(--inativo); }
/* So o corpo rola: a barra de titulo fica sempre a vista, senao o X sai da
   tela no celular assim que o tutorial passa de tres passos. */
.ch-modal__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
  display: grid; gap: 10px; align-content: start; }
.ch-modal__vazio { margin: 0; color: var(--cinza); font-size: 13.5px; }
.ch-art__r { margin: 0; color: var(--cinza); font-size: 13.5px; line-height: 1.55; }
.ch-art__passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ch-art__passo { display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--r-md); }
.ch-art__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--nanquim); color: var(--branco);
  font-size: 12.5px; font-weight: 700; }
.ch-art__d { flex: 1; min-width: 0; }
.ch-art__t { font-weight: 700; letter-spacing: -.01em; font-size: 14px; }
.ch-art__x { margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--tinta-2); }
.ch-art__dicas { display: grid; gap: 7px; padding: 12px;
  background: var(--verde-campo); border-radius: var(--r-md); }
.ch-art__dicas-t { font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
.ch-art__dicas-i { font-size: 13.5px; line-height: 1.6; color: var(--tinta-2); }

@media (max-width: 640px) {
  .ch-painel { right: 0; left: 0; top: 0; bottom: 0;
    width: auto; max-width: none; max-height: none; border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .ch-fab { transition: none; } }

/* ------------------------------------------------------------- documentos
   privacidade.html e termos.html. O texto vem do banco (`clube.documentos`)
   e e prosa longa em texto puro, com quebra de linha significando paragrafo
   -- por isso `white-space: pre-wrap`, e nao um conversor de markdown que
   inventaria estrutura onde o documento assinado nao tem nenhuma. A coluna
   estreita existe porque linha de 1100px cansa: 68ch e a medida de leitura. */
.tela--estreita { max-width: 760px; }
.doc { padding: 56px 0 72px; background: var(--papel); }
.doc h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; }
.doc__texto {
  margin-top: var(--e-6);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tinta-2);
  max-width: 68ch;
}
.doc__versao {
  margin-top: var(--e-8); padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
  font-size: 13px; color: var(--cinza); overflow-wrap: anywhere;
}