/* ==========================================================================
   A base visual do LibMoney, compartilhada por todas as páginas do site.

   Existe porque antes não existia: a página inicial, a de privacidade e a de
   termos tinham cada uma a sua paleta, e duas delas ainda baixavam uma
   terceira fonte de um servidor de fora. Eram três produtos diferentes usando
   o mesmo nome.

   Cada cor aqui é copiada do AppColors do aplicativo, com uma exceção
   anotada onde ela aparece: os tons de apoio precisaram escurecer, porque o
   que é legível num celular a 400 pontos por polegada não é legível num
   monitor a 96.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes. As mesmas de dentro do app, servidas daqui — nada de CDN: uma fonte
   de terceiro conta cada visitante para outra empresa, e some junto quando
   aquele servidor cai.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Baloo2';
  src:url('/fontes/Baloo2.ttf') format('truetype');
  font-weight:400 800; font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('/fontes/Nunito.ttf') format('truetype');
  font-weight:400 800; font-display:swap;
}

/* --------------------------------------------------------------------------
   Cores
   -------------------------------------------------------------------------- */
:root{
  --ground:#F9FCF4;          /* AppColors.background */
  --surface:#FFFFFF;
  --raised:#FFFFFF;
  --ink:#241B36;             /* roxo-tinta, nunca preto puro */
  /* Estes dois nascem do AppColors, mas escurecidos. No celular o app usa
     #8079A0 e #B3AAC9; na web, aos 15px e sobre papel quase branco, eles dão
     3,9:1 e 2,2:1 — abaixo do mínimo legível. Mesmo matiz, tom mais fundo. */
  --ink-soft:#6D6788;
  --ink-faint:#9089A6;
  --line:#E9F1E1;
  --line-strong:#D9E7CE;

  --brand:#66CC33;
  --brand-light:#9FE066;
  --brand-soft:#EAF7DC;
  /* O verde da marca não tem contraste para texto sobre claro. Esta versão
     escurecida é a que carrega palavra; o #66CC33 fica para preenchimento. */
  --brand-word:#3F7A1F;
  --on-brand:#132B06;
  /* Só verdes escuros: o degradê pinta títulos sobre papel claro, e qualquer
     verde acima de #57A32A deixa o fim da frase ilegível. */
  --verde-titulo:linear-gradient(105deg,#2F6415,#3F7A1F 46%,#57A32A);

  --up:#12A454;   --up-soft:#E1F8E9;
  --down:#F0384F; --down-soft:#FDE7EA;
  /* O vermelho da marca preenche bem e escreve mal: 3,9:1 sobre branco. Esta
     versão é a que carrega palavra, como --brand-word faz com o verde. */
  --down-word:#BE2B3D;
  --warn:#F5A524; --warn-soft:#FEF3DE;
  --pink:#FF5C8A;

  --glass:rgba(255,255,255,.74);
  --glass-line:rgba(36,27,54,.08);
  --sombra-1:0 1px 2px rgba(36,27,54,.04), 0 10px 26px rgba(36,27,54,.045);
  --sombra-2:0 2px 6px rgba(36,27,54,.05), 0 28px 64px rgba(36,27,54,.10);
  --sombra-3:0 40px 90px rgba(36,27,54,.16), 0 8px 20px rgba(36,27,54,.07);

  --raio:20px;
  --raio-g:28px;
  --largura:1120px;
  --passo:clamp(72px,9vw,124px);
}

/* O escuro é o tema escuro do próprio app, não uma inversão automática.
   Guardado com :not([data-theme="light"]) para uma escolha explícita de tema
   claro vencer o sistema. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#14121A;
    --surface:#1E1B26;
    --raised:#252131;
    --ink:#F2F0F7;
    --ink-soft:#A79FC0;
    --ink-faint:#8C879C;
    --line:#2E2A3A;
    --line-strong:#3A3548;
    --brand-soft:#1F3315;
    --brand-word:#9FE066;
    --verde-titulo:linear-gradient(105deg,#66CC33,#9FE066 55%,#C6F09A);
    --down-word:#FF8092;
    --up-soft:#12301F;
    --down-soft:#33161C;
    --warn-soft:#332512;
    --glass:rgba(30,27,38,.78);
    --glass-line:rgba(255,255,255,.07);
    --sombra-1:0 1px 2px rgba(0,0,0,.30), 0 10px 26px rgba(0,0,0,.34);
    --sombra-2:0 2px 6px rgba(0,0,0,.34), 0 28px 64px rgba(0,0,0,.44);
    --sombra-3:0 40px 90px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.40);
  }
}
:root[data-theme="dark"]{
  --ground:#14121A; --surface:#1E1B26; --raised:#252131;
  --ink:#F2F0F7; --ink-soft:#A79FC0; --ink-faint:#8C879C;
  --line:#2E2A3A; --line-strong:#3A3548;
  --brand-soft:#1F3315; --brand-word:#9FE066;
  --verde-titulo:linear-gradient(105deg,#66CC33,#9FE066 55%,#C6F09A);
  --down-word:#FF8092;
  --up-soft:#12301F; --down-soft:#33161C; --warn-soft:#332512;
  --glass:rgba(30,27,38,.78); --glass-line:rgba(255,255,255,.07);
  --sombra-1:0 1px 2px rgba(0,0,0,.30), 0 10px 26px rgba(0,0,0,.34);
  --sombra-2:0 2px 6px rgba(0,0,0,.34), 0 28px 64px rgba(0,0,0,.44);
  --sombra-3:0 40px 90px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.40);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Baloo2',system-ui,sans-serif;
  line-height:1.1; text-wrap:balance; margin:0;
  letter-spacing:-.025em; font-weight:800;
}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
/* Todo dígito que forma coluna. Sem tabular-nums a coluna dança a cada
   centavo, e este produto é feito de colunas de centavo. */
.num{font-family:'Baloo2',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.env{max-width:var(--largura);margin:0 auto;padding:0 24px}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand-soft);color:var(--brand-word)}
.pular{
  position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);
  padding:10px 18px;border-radius:0 0 12px 0;font-weight:800;z-index:100;
}
.pular:focus{left:0}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--brand);color:var(--on-brand);
  font-family:inherit;font-weight:800;font-size:16.5px;text-decoration:none;
  padding:15px 28px;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 1px 2px rgba(36,27,54,.10), 0 10px 24px rgba(102,204,51,.30);
  transition:transform .18s cubic-bezier(.34,1.3,.64,1), box-shadow .18s ease, background .18s ease;
}
.botao:hover{
  background:var(--brand-light);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(36,27,54,.10), 0 16px 34px rgba(102,204,51,.38);
}
.botao:active{transform:translateY(0)}
.botao:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.botao-2{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:999px;
  padding:14px 24px;font-weight:700;font-size:16.5px;text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.botao-2:hover{border-color:var(--brand);transform:translateY(-2px)}
.botao-texto{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;
  color:var(--brand-word);text-decoration:none;
}
.botao-texto .seta{transition:transform .2s ease}
.botao-texto:hover .seta{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */
.marca{
  display:inline-flex;align-items:center;gap:10px;font-family:'Baloo2',sans-serif;
  font-weight:800;font-size:20px;letter-spacing:-.035em;text-decoration:none;color:var(--ink);
}
.marca svg{display:block;flex:none}

/* --------------------------------------------------------------------------
   Páginas de documento (privacidade, termos)
   -------------------------------------------------------------------------- */
.doc-topo{
  border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:10;
}
.doc-topo .env{display:flex;align-items:center;gap:16px;height:66px;max-width:742px}
.doc-topo .volta{
  margin-left:auto;font-size:15px;font-weight:700;color:var(--ink-soft);text-decoration:none;
}
.doc-topo .volta:hover{color:var(--brand-word)}
.doc{max-width:742px;margin:0 auto;padding:clamp(44px,6vw,72px) 24px clamp(64px,8vw,96px)}
.doc h1{font-size:clamp(32px,4.6vw,46px);margin-bottom:10px}
.doc .data{color:var(--ink-soft);font-size:15px;margin:0 0 40px}
.doc h2{
  font-family:'Baloo2',sans-serif;font-size:23px;font-weight:800;
  letter-spacing:-.02em;margin:44px 0 12px;
}
.doc p,.doc li{color:var(--ink-soft);line-height:1.7}
.doc p{margin-bottom:14px}
.doc ul{padding-left:20px;margin:0 0 16px}
.doc li{margin-bottom:9px}
.doc strong,.doc b{color:var(--ink);font-weight:800}
.doc a{color:var(--brand-word);font-weight:700}
.aviso{
  background:var(--warn-soft);border-left:3px solid var(--warn);
  border-radius:0 16px 16px 0;padding:18px 20px;margin:0 0 36px;font-size:15.5px;
  line-height:1.6;color:var(--ink);
}
.aviso b{display:block;margin-bottom:6px;font-weight:800}
.doc mark{background:var(--brand-soft);color:var(--brand-word);
          padding:1px 7px;border-radius:5px;font-weight:800}
.doc-pe{
  border-top:1px solid var(--line);margin-top:56px;padding-top:26px;
  font-size:14.5px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:18px;
}
.doc-pe a{color:var(--ink-soft);text-decoration:none}
.doc-pe a:hover{color:var(--brand-word)}

/* --------------------------------------------------------------------------
   Páginas de caixa única (comprar, obrigado, abrir)
   -------------------------------------------------------------------------- */
.centro{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 24px;
}
.caixa{
  width:100%;max-width:440px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--raio-g);
  padding:32px 30px;box-shadow:var(--sombra-2);
}
.caixa h1{font-size:26px;margin-bottom:6px}
.caixa .sub{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:22px}
.campo{display:block;font-size:13px;font-weight:800;margin:0 0 6px}
.caixa input{
  width:100%;padding:13px 14px;border:1.5px solid var(--line-strong);
  border-radius:14px;font-size:16px;font-family:inherit;margin-bottom:14px;
  background:var(--surface);color:var(--ink);
}
.caixa input::placeholder{color:var(--ink-faint)}
.caixa input:focus{outline:none;border-color:var(--brand);
                   box-shadow:0 0 0 3px var(--brand-soft)}
.caixa .botao{width:100%}
.recado{
  margin-top:16px;padding:13px 15px;border-radius:14px;font-size:14px;
  line-height:1.5;display:none;
}
.recado.erro{display:block;background:var(--down-soft);color:var(--down-word);font-weight:700}
.recado.info{display:block;background:var(--brand-soft);color:var(--brand-word);font-weight:700}
.pe-caixa{
  margin-top:20px;font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.55;
}
.pe-caixa a{color:var(--brand-word);font-weight:700}

/* --------------------------------------------------------------------------
   Quem pediu ao sistema para parar de animar recebe a página pronta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}