/* ===========================================================================
   Gestão Controle Financeiro - site do app GCF
   ---------------------------------------------------------------------------
   DIREÇÃO: "Perímetro".

   O produto tem uma tese só, e ela é geométrica: existe uma linha, e os seus
   dados não a atravessam. Todo o layout é construído em cima disso - superfícies
   claras e bem delimitadas, um núcleo que contém, e saídas explícitas que só
   existem quando você as liga.

   O vocabulário de dado vem do próprio app: números monoespaçados com
   algarismos tabulares, medidores de categoria, linhas de extrato. O que mudou
   em relação à versão anterior foi o ar: superfícies com raio e sombra suave no
   lugar do fio de 1px em tudo, uma escala de espaçamento única e um fecho
   escuro para dar respiração ao fim da página.

   Cores herdadas do tema do app (ui/theme/Color.kt e Theme.kt): o azul do
   ícone como acento, neutros cinza-puro como papel, e o par verde/vermelho nas
   variantes com contraste AA de cada tema.

   Nenhuma fonte externa, de propósito: uma página que promete não entregar o
   visitante a terceiros não deveria pedir a fonte para o CDN de um terceiro.
   A personalidade vem do uso - display apertado e monoespaçada em todo dado.
   =========================================================================== */

:root{
  color-scheme:light;

  /* --- Papel e tinta --------------------------------------------------- */
  /* Neutros cinza-puro, sem tinta azulada: os mesmos papéis do app
     (background / surfaceContainer* de ui/theme/Theme.kt). É o que faz o azul
     da marca e o par verde/vermelho saltarem da página. */
  --papel:#F6F7F9;          /* fundo da página (app: background) */
  --papel-2:#EFF1F4;        /* faixa alternada (app: surfaceContainerHigh) */
  --papel-3:#FFFFFF;        /* superfície de cartão (app: surface) */
  --papel-4:#F9FAFB;        /* preenchimento sutil dentro de cartão */

  --tinta:#1A1C1E;
  --tinta-2:#5A6472;
  /* --tinta-3 pinta rótulo, nota e legenda - sempre texto miúdo. O valor foi
     escolhido por medida, não por gosto: é o tom mais claro que ainda passa
     de 4.5:1 sobre as quatro superfícies (papel, faixa, cartão e recuo). */
  --tinta-3:#656D7A;
  --muted:var(--tinta-2);   /* alias herdado, usado em estilos inline */

  --regua:#DCE0E6;
  --regua-forte:#C7CCD6;

  /* --- Marca (do app) --------------------------------------------------- */
  /* Azul do ícone do app. No claro vale o tom escuro (AzulMarcaClaro), que é o
     único que passa em 4.5:1 sobre branco. */
  --marca:#045C94;
  --marca-forte:#033F69;
  --marca-fundo:#063B5E;    /* painel escuro do fecho */
  --marca-fraca:#E6F1FA;    /* tingimento claro (app: primaryContainer) */
  --sobre-marca:#FFFFFF;    /* tinta em cima de uma superfície cheia de marca */
  --receita:#15803D;
  --despesa:#DC2626;
  --atencao:#B45309;

  /* --- Forma ------------------------------------------------------------ */
  --r-xs:8px;
  --r-sm:11px;
  --r:16px;
  --r-lg:22px;
  --r-xl:30px;

  --sombra-1:0 1px 2px rgba(12,12,14,.05);
  --sombra-2:0 1px 2px rgba(12,12,14,.04), 0 6px 18px -6px rgba(12,12,14,.10);
  --sombra-3:0 2px 4px rgba(12,12,14,.04), 0 24px 48px -18px rgba(12,12,14,.20);

  /* --- Ritmo ------------------------------------------------------------ */
  --secao:104px;            /* respiro vertical entre seções */
  --max:1140px;
  --max-texto:72ch;
  --gutter:28px;

  /* --- Tipografia ------------------------------------------------------- */
  --mono:ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}

/* O app tem tema escuro; o site acompanha o sistema. Todo componente abaixo lê
   destes tokens, então o modo escuro é uma troca de valores - não um segundo
   conjunto de regras. */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;

    --papel:#0C0C0E;
    --papel-2:#101013;
    --papel-3:#141417;
    --papel-4:#1C1C20;

    --tinta:#F2F2F5;
    --tinta-2:#ADADB8;
    /* Mesma regra do tema claro: o tom precisa passar de 4.5:1 sobre a mais
       clara das superfícies escuras (--papel-4), que é onde ficam os
       cabeçalhos de tabela. */
    --tinta-3:#8E8E99;

    --regua:#2C2C31;
    --regua-forte:#3B3B43;

    /* Como no app: sobre o quase-preto o azul da logo fica abafado, então o
       acento vira o azul-céu claro (AzulMarcaVivo) e a tinta em cima dele
       passa a ser o azul-marinho profundo - branco ali seria ilegível. */
    --marca:#7FD1FF;
    --marca-forte:#A9E0FF;
    --marca-fundo:#0A4A73;
    --marca-fraca:#102938;
    --sobre-marca:#00344F;
    --receita:#22C55E;
    --despesa:#EF4444;
    --atencao:#F59E0B;

    --sombra-1:0 1px 2px rgba(0,0,0,.4);
    --sombra-2:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -6px rgba(0,0,0,.55);
    --sombra-3:0 2px 4px rgba(0,0,0,.35), 0 24px 48px -18px rgba(0,0,0,.75);
  }
}

/* ===================== Base ===================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:var(--marca); text-underline-offset:3px}
a:hover{color:var(--marca-forte)}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.container-texto{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.container-texto .doc-corpo{max-width:var(--max-texto)}

:focus-visible{outline:2px solid var(--marca); outline-offset:3px; border-radius:4px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinta); color:var(--papel); padding:12px 18px;
  font-weight:700; text-decoration:none; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

::selection{background:var(--marca); color:var(--sobre-marca)}

/* ===================== Tipografia de apoio ===================== */

/* O rótulo miúdo em monoespaçada é o marcador estrutural da página: nomeia
   seções, colunas e estados. Nunca é decoração solta. */
.rotulo,
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--tinta-3);
  font-weight:500;
}
.eyebrow{display:block; margin:0 0 14px}

.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.nota{color:var(--tinta-3); font-size:13.5px}
.center{text-align:center}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ===================== Topbar ===================== */

.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--papel);   /* fallback para quem não tem color-mix */
  background:color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.topbar.rolou{border-bottom-color:var(--regua); box-shadow:var(--sombra-1)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:70px}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--tinta)}
.brand img{width:32px; height:32px; border-radius:9px; box-shadow:var(--sombra-1)}
.brand-nome{font-weight:800; font-size:15.5px; letter-spacing:-.025em; white-space:nowrap}

.nav{display:flex; gap:2px; align-items:center}
.nav a{
  text-decoration:none; color:var(--tinta-2); font-size:14.5px; font-weight:500;
  padding:8px 13px; border-radius:var(--r-xs);
  transition:color .15s ease, background .15s ease;
}
.nav a:hover{color:var(--tinta); background:var(--papel-2)}
.nav a[aria-current="page"]{color:var(--tinta); font-weight:700; background:var(--papel-2)}

/* Botão do menu compacto. Injetado por site.js, então não existe no HTML. */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r-xs);
  color:var(--tinta); cursor:pointer;
}
.nav-toggle span{display:block; width:17px; height:1.5px; background:currentColor; position:relative; transition:transform .2s ease, background .2s ease}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* Abaixo de 980px a navegação vira o painel do botão. Quem decide se está
   aberto é o CSS, a partir da classe na barra - não o atributo hidden. Assim
   o painel nasce fechado já na primeira pintura, antes de o site.js rodar. */
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .topbar .btn[data-cta]{display:none}
  .nav{
    position:absolute; left:var(--gutter); right:var(--gutter); top:calc(100% + 6px);
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
    padding:10px; box-shadow:var(--sombra-3);
  }
  .topbar.menu-aberto .nav{display:flex}
  .nav a{padding:11px 14px; font-size:15.5px}

  /* Sem JavaScript não existe botão para abrir o painel. A navegação então
     não vira painel: fica uma linha que quebra logo abaixo da marca. */
  html:not(.js) .topbar-inner{flex-wrap:wrap; height:auto; padding:12px 0}
  html:not(.js) .nav{
    position:static; display:flex; flex-direction:row; flex-wrap:wrap;
    justify-content:center; width:100%; margin-top:8px;
    padding:0; background:none; border:none; box-shadow:none;
  }
  html:not(.js) .nav-toggle{display:none}
}
@media (max-width:430px){
  :root{--gutter:20px}
}

/* ===================== Botões ===================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:var(--r-sm);
  border:1px solid var(--regua-forte); background:var(--papel-3); color:var(--tinta);
  font-family:inherit; font-size:15px; font-weight:600; text-decoration:none;
  cursor:pointer; white-space:nowrap; box-shadow:var(--sombra-1);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:var(--papel-4); border-color:var(--regua-forte); color:var(--tinta); transform:translateY(-1px); box-shadow:var(--sombra-2)}
.btn:active{transform:translateY(0); box-shadow:var(--sombra-1)}

/* A tinta do botão cheio vem do token, não de um #fff fixo: no escuro o fundo
   é o azul-céu claro e o texto tem de virar azul-marinho, como no app. */
.btn-primary{
  background:var(--marca); border-color:var(--marca); color:var(--sobre-marca);
  box-shadow:0 1px 2px color-mix(in srgb, var(--marca) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--marca) 60%, transparent);
}
.btn-primary:hover{background:var(--marca-forte); border-color:var(--marca-forte); color:var(--sobre-marca)}
.btn-verde{background:var(--receita); border-color:var(--receita); color:#fff}
.btn-verde:hover{background:var(--receita); border-color:var(--receita); color:#fff; filter:brightness(1.08)}
.btn-sm{padding:10px 16px; font-size:14px}
.cta-row{display:flex; gap:11px; flex-wrap:wrap; align-items:center}

@media (prefers-color-scheme:dark){
  .btn-primary{box-shadow:var(--sombra-2)}
  .btn-verde{color:#06281E}
}

/* ===================== Ritmo das seções ===================== */

section{padding:var(--secao) 0}
section.faixa{background:var(--papel-2)}

.secao-cabeca{margin-bottom:40px}
.secao-cabeca .rotulo{display:block; margin-bottom:10px}
.secao-titulo{
  font-size:clamp(29px,3.7vw,44px); line-height:1.08; letter-spacing:-.038em;
  font-weight:800; margin:0 0 14px; text-wrap:balance;
}
.secao-sub{margin:0; color:var(--tinta-2); font-size:18px; max-width:62ch}

@media (max-width:820px){
  :root{--secao:68px}
  .secao-cabeca{margin-bottom:30px; text-align:center}
  .secao-sub{margin-left:auto; margin-right:auto}
}
/* Em telas de celular o respiro de 68px entre seções ainda deixa blocos
   soltos demais quando empilhados - aperta mais um degrau. */
@media (max-width:480px){
  :root{--secao:52px}
  .secao-cabeca{margin-bottom:24px}
}

/* ===================== Hero ===================== */

.hero{position:relative; padding:72px 0 96px; overflow:hidden}

/* Fundo: um halo da marca e o traço do perímetro passando por trás do
   aparelho. É o único ornamento da página - o resto é conteúdo. */
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:720px; pointer-events:none;
  background:
    radial-gradient(46% 42% at 78% 34%, color-mix(in srgb, var(--marca) 16%, transparent) 0%, transparent 70%),
    radial-gradient(38% 40% at 12% 8%, color-mix(in srgb, var(--receita) 9%, transparent) 0%, transparent 68%);
}
.hero > .container{position:relative}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start}

.hero h1{
  font-size:clamp(38px,5.5vw,68px);
  line-height:1.01; letter-spacing:-.048em; font-weight:800;
  margin:20px 0 24px; text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--tinta-3); font-weight:750}
.hero .lead{font-size:19.5px; color:var(--tinta-2); margin:0 0 32px; max-width:52ch}
.hero .lead strong{color:var(--tinta); font-weight:650}

.selo-topo{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 12px; border-radius:999px;
  background:var(--papel-3); border:1px solid var(--regua);
  box-shadow:var(--sombra-1);
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--receita); font-weight:600;
}
.selo-topo::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--receita);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--receita) 60%, transparent);
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--receita) 55%, transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* As quatro provas: uma tira de dados, no vocabulário do app. Duas colunas -
   a coluna do hero tem ~530px, e quatro células aqui ficariam ilegíveis. */
.provas{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--regua); border:1px solid var(--regua);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra-1);
}
.provas li{background:var(--papel-3); padding:17px 18px 18px}
.provas .rotulo{display:block; margin-bottom:7px; color:var(--marca); font-size:10px}
.provas span:last-child{display:block; font-size:13.5px; line-height:1.5; color:var(--tinta-2)}
.provas b{color:var(--tinta); font-weight:650}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:56px}
  .hero{padding:48px 0 68px}
  /* Uma vez empilhado, o bloco de texto centralizado lê melhor do que o
     início de linha escondido debaixo do aparelho. */
  .hero-grid > div:first-child{text-align:center}
  .hero .lead{margin-left:auto; margin-right:auto}
  .hero .cta-row{justify-content:center}
}
@media (max-width:520px){ .provas{grid-template-columns:1fr} }

/* ===================== Aparelho (desenho do app, não captura) ===================== */

.aparelho-quadro{position:relative; display:flex; justify-content:center}

/* O perímetro tracejado ao redor do aparelho: a mesma linha que a seção
   seguinte transforma no elemento central da página. */
.aparelho-borda{
  border:1px dashed var(--regua-forte); border-radius:var(--r-xl); padding:30px;
  display:flex; justify-content:center;
  background:color-mix(in srgb, var(--papel-3) 45%, transparent);
}

/* Foto real do app, dentro da moldura tracejada. A imagem já vem com o
   chrome da interface (barra de status, cores do próprio app) - aqui só
   cabe emoldurar: largura de "aparelho", cantos e sombra de cartão. */
.foto-produto{
  width:100%; max-width:270px; height:auto; margin:0 auto;
  border-radius:22px; border:1px solid var(--regua);
  box-shadow:var(--sombra-3);
}

/* Em telas estreitas a moldura tracejada ficava mais larga que a coluna de
   texto e empurrava a página inteira. A moldura passa a acompanhar a coluna
   e a foto encolhe junto - em vez de a foto mandar na largura. */
@media (max-width:560px){
  .aparelho-borda{width:100%; padding:16px; border-radius:var(--r-lg)}
}

/* ===================== Faixa de números ===================== */

/* Tira fina entre o Hero e O limite - ponte, não seção: por isso o
   padding é menor que o ritmo padrão e o fundo não herda .faixa, senão as
   duas bandas coloridas se emendam num único bloco vazio. */
.faixa-fina{
  padding:32px 0;
  border-top:1px solid var(--regua); border-bottom:1px solid var(--regua);
}
.numeros{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;
}
.numeros li + li{border-left:1px solid var(--regua)}
.numeros .num{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3.6vw,38px); font-weight:700; letter-spacing:-.02em; color:var(--tinta);
}
.numeros .rotulo-num{display:block; margin-top:6px; font-size:13.5px; color:var(--tinta-2)}
@media (max-width:620px){
  .numeros{grid-template-columns:1fr; gap:20px}
  .numeros li + li{border-left:none; border-top:1px solid var(--regua); padding-top:16px}
}

/* ===================== Como funciona ===================== */

.passos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px}
.passo{padding-top:20px; border-top:2px solid var(--regua); text-align:center}
.passo .num-passo{
  display:block; font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.04em; color:var(--marca); margin-bottom:10px;
}
.passo h3{margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-.02em}
.passo p{margin:0; color:var(--tinta-2); font-size:15px}

/* A miniatura vem de uma captura real do app - que no tema escuro é quase
   tão preta quanto o fundo da própria página. Sem uma superfície por baixo,
   o quadro tracejado do "aparelho" some e a foto parece flutuar solta, sem
   moldura nem alinhamento com o texto acima. O papel-3 + borda dão o
   contorno que falta. */
.passo-foto-quadro{
  display:block; width:max-content; margin:18px auto 0; padding:10px;
  background:var(--papel-3); border:1px solid var(--regua); border-radius:20px;
  box-shadow:var(--sombra-1);
}
.passo-foto{
  width:100%; max-width:150px; border-radius:14px;
  border:1px solid var(--regua); box-shadow:var(--sombra-2);
}

@media (max-width:480px){
  .passos{gap:26px}
  .passo{padding-top:16px}
  .passo-foto{max-width:180px}
}

/* =====================================================================
   ASSINATURA - o perímetro do aparelho
   Um núcleo que contém e quatro portas que saem dele. Em telas largas as
   portas se ligam ao núcleo por um traço que só é desenhado quando a seção
   entra em cena; em telas estreitas o traço vira uma régua vertical única.
   ===================================================================== */

.limite{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:84px; align-items:start}

.limite-caixa{
  position:relative; background:var(--papel-3);
  border:1px solid var(--regua); border-radius:var(--r-lg);
  padding:34px 30px 28px; box-shadow:var(--sombra-2);
}
.limite-caixa::after{
  /* Halo interno: reforça que esta é a região fechada. */
  content:""; position:absolute; inset:6px; border-radius:calc(var(--r-lg) - 5px);
  border:1px dashed var(--regua); pointer-events:none;
}
.limite-caixa > *{position:relative}
.limite-caixa .etiqueta{
  position:absolute; top:-11px; left:24px; z-index:2;
  background:var(--marca); color:var(--sobre-marca); padding:3px 12px; border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; box-shadow:var(--sombra-1);
}
.limite-caixa h3{margin:6px 0 6px; font-size:20px; font-weight:750; letter-spacing:-.025em}
.limite-caixa > p{margin:0 0 22px; color:var(--tinta-2); font-size:15px}

.dentro{list-style:none; margin:0; padding:0; border-top:1px solid var(--regua)}
.dentro li{
  padding:10px 0; border-bottom:1px solid var(--regua);
  font-size:14.5px; display:flex; justify-content:space-between; gap:14px; align-items:baseline;
}
.dentro li span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  /* 7% de tinta: acima disso o fundo escurece o bastante para derrubar o
     contraste do verde abaixo de 4.5:1. */
  color:var(--receita); background:color-mix(in srgb, var(--receita) 7%, transparent);
  padding:2px 8px; border-radius:999px; flex:none;
}
.limite-selo{
  margin:20px 0 0; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--papel-4); border:1px solid var(--regua);
  font-size:13.5px; color:var(--tinta-2);
}
.limite-selo b{color:var(--tinta)}

.limite-saidas h3{margin:0 0 5px; font-size:20px; font-weight:750; letter-spacing:-.025em}
.limite-saidas > p{margin:0 0 26px; color:var(--tinta-2); font-size:15px}

.saidas{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.saida{
  position:relative; padding:18px 20px;
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
  box-shadow:var(--sombra-1);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.saida:hover{border-color:var(--regua-forte); box-shadow:var(--sombra-2); transform:translateY(-2px)}
.saida .cabeca{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.saida b{font-size:16px; font-weight:700; letter-spacing:-.015em}
.saida .estado{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-3); border:1px solid var(--regua-forte); padding:2px 8px; border-radius:999px;
}
.saida p{margin:7px 0 0; font-size:14.5px; color:var(--tinta-2)}
.saida .carga{
  display:block; margin-top:10px; font-family:var(--mono); font-size:11.5px; color:var(--tinta);
  background:var(--marca-fraca); padding:7px 11px; border-radius:var(--r-xs);
}

/* O traço que atravessa a borda. Só no layout de duas colunas - e só depois
   da seção entrar em cena, para que a linha seja lida como um movimento. */
@media (min-width:961px){
  .saida::before{
    content:""; position:absolute; left:-84px; top:27px;
    width:0; border-top:1px dashed var(--regua-forte);
    transition:width .55s cubic-bezier(.22,.61,.36,1);
  }
  .saida::after{
    content:""; position:absolute; left:-5px; top:23.5px;
    width:8px; height:8px; border-radius:50%;
    background:var(--papel-3); border:1px solid var(--regua-forte);
    opacity:0; transition:opacity .3s ease .35s;
  }
  .limite.revelado .saida::before{width:80px}
  .limite.revelado .saida::after{opacity:1}
  .limite.revelado .saida:nth-child(2)::before{transition-delay:.1s}
  .limite.revelado .saida:nth-child(3)::before{transition-delay:.2s}
  .limite.revelado .saida:nth-child(4)::before{transition-delay:.3s}
}
@media (max-width:960px){
  .limite{grid-template-columns:1fr; gap:44px}
  /* O núcleo e a lista de saídas viram cartões empilhados; a introdução de
     cada um centraliza, mas as linhas de dados (a lista "dentro" e os
     cartões de saída, que têm rótulo à esquerda e valor à direita) continuam
     alinhadas do jeito que a leitura de dado pede. */
  .limite-caixa{text-align:center}
  .limite-caixa .etiqueta{left:50%; transform:translateX(-50%)}
  .limite-saidas > h3, .limite-saidas > p{text-align:center}
}

/* ===================== Grade de recursos ===================== */

.grade{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.celula{
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
  padding:26px 24px 28px; box-shadow:var(--sombra-1);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.celula:hover{border-color:var(--regua-forte); box-shadow:var(--sombra-2); transform:translateY(-3px)}
.celula .icone{
  width:38px; height:38px; margin-bottom:14px; border-radius:var(--r-xs);
  display:flex; align-items:center; justify-content:center;
  background:var(--marca-fraca); color:var(--marca);
}
.celula .icone svg{width:19px; height:19px}
.celula .rotulo{display:block; margin-bottom:15px; color:var(--marca)}
.celula h3{margin:0 0 8px; font-size:17.5px; font-weight:700; letter-spacing:-.02em}
.celula p{margin:0; color:var(--tinta-2); font-size:15px}
.celula img{border-radius:var(--r-sm)}

/* Galeria de capturas: miniaturas de "aparelho", não banners - por isso um
   teto de largura, mesmo dentro de uma coluna de grade mais larga. */
/* As 5 capturas ficam sempre numa linha só - em tela estreita, rola na
   horizontal em vez de quebrar em duas linhas. */
#galeria-capturas{
  display:flex; grid-template-columns:none; gap:16px;
  overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximate;
}
#galeria-capturas .celula{
  flex:0 0 auto; background:none; border:none; padding:0; box-shadow:none;
  scroll-snap-align:start;
}
#galeria-capturas .celula:hover{transform:none}
#galeria-capturas img{
  width:180px; display:block; border-radius:20px;
  border:1px solid var(--regua-forte); box-shadow:var(--sombra-2);
}

@media (max-width:900px){
  .grade{grid-template-columns:1fr}
  .celula{text-align:center}
  .celula .icone{margin-left:auto; margin-right:auto}
}
@media (min-width:901px) and (max-width:1080px){ .grade{grid-template-columns:repeat(2,1fr)} }

/* ===================== Cartões de preço ===================== */

.precos{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:40px}
.precos .card{display:flex; flex-direction:column; gap:8px}
.precos .card .btn{margin-top:auto}
.card .preco{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:30px; font-weight:700; letter-spacing:-.02em; margin:6px 0 2px;
}
.card .preco span{font-size:14px; font-weight:500; color:var(--tinta-2)}
.card-destaque{border-color:var(--marca); box-shadow:var(--sombra-2)}
.tag-destaque{
  align-self:flex-start; margin-bottom:2px;
  background:var(--marca); color:var(--sobre-marca); font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:3px 10px; border-radius:999px;
}
.btn-block{width:100%}

/* Abaixo de ~520px o auto-fit já colapsou para uma coluna só - os cartões
   centralizam para acompanhar o resto da página empilhada. */
@media (max-width:520px){
  .precos .card{align-items:center; text-align:center}
  .card-destaque .tag-destaque{align-self:center}
}

/* ===================== Tabela de comparação ===================== */

.tabela-wrap{
  overflow-x:auto; background:var(--papel-3);
  border:1px solid var(--regua); border-radius:var(--r); box-shadow:var(--sombra-2);
}
table.comp{width:100%; border-collapse:collapse; min-width:580px}
table.comp th, table.comp td{
  padding:15px 18px; text-align:left; border-bottom:1px solid var(--regua); font-size:15.5px;
}
table.comp tbody tr:last-child td{border-bottom:none}
table.comp thead th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:500; padding-top:15px; padding-bottom:15px;
  background:var(--papel-4);
}
table.comp td:first-child{color:var(--tinta-2)}
table.comp th:nth-child(2), table.comp th:nth-child(3),
table.comp td:nth-child(2), table.comp td:nth-child(3){text-align:center; width:130px}
/* A coluna PRO fica levemente destacada em toda a altura da tabela. */
table.comp th:nth-child(3), table.comp td:nth-child(3){background:var(--marca-fraca)}
table.comp thead th:nth-child(3){color:var(--marca); font-weight:700}
.sim{color:var(--receita); font-weight:700; font-family:var(--mono); font-size:15px}
.nao{color:var(--tinta-3); font-family:var(--mono)}
table.comp tbody tr:hover td{background:var(--papel-4)}
table.comp tbody tr:hover td:nth-child(3){background:color-mix(in srgb, var(--marca) 12%, var(--papel-3))}

/* ===================== FAQ ===================== */

.faq-lista{display:grid; gap:10px}
.faq-lista details,
.doc details{
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
  box-shadow:var(--sombra-1); overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-lista details[open],
.doc details[open]{border-color:var(--regua-forte); box-shadow:var(--sombra-2)}
summary{
  cursor:pointer; list-style:none; padding:19px 56px 19px 22px; position:relative;
  font-size:17px; font-weight:650; letter-spacing:-.015em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  margin-top:-6px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;
  color:var(--tinta-3);
  transition:transform .25s ease, color .2s ease;
}
details[open] > summary::after{transform:rotate(135deg); color:var(--marca)}
summary:hover{color:var(--marca)}

.faq-lista .resposta,
.doc details > p,
.doc details > .resposta{
  padding:0 26px 22px; color:var(--tinta-2); font-size:16px; max-width:76ch; margin:0;
}
.faq-lista .resposta p{margin:0 0 12px}
.faq-lista .resposta p:last-child{margin-bottom:0}

/* ===================== Fecho ===================== */

/* O único bloco escuro da página. Fecha a leitura e separa o rodapé. */
.fechamento{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:190px 1fr; gap:36px; align-items:start;
  background:var(--marca-fundo); color:#fff;
  border-radius:var(--r-xl); padding:56px 52px 58px;
  box-shadow:var(--sombra-3);
}
.fechamento::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 88% 8%, rgba(255,255,255,.16) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 40%);
}
.fechamento > *{position:relative}
.fechamento .rotulo{padding-top:11px; border-top:2px solid rgba(255,255,255,.5); color:rgba(255,255,255,.72)}
.fechamento h2{font-size:clamp(28px,3.6vw,42px); line-height:1.06; letter-spacing:-.042em; font-weight:800; margin:0 0 14px; text-wrap:balance}
.fechamento p{margin:0 0 28px; color:rgba(255,255,255,.8); font-size:18px; max-width:54ch}
.fechamento .nota{color:rgba(255,255,255,.6)}
.fechamento .btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff; box-shadow:none}
.fechamento .btn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:#fff}
.fechamento .btn-primary{background:#fff; border-color:#fff; color:var(--marca-fundo)}
.fechamento .btn-primary:hover{background:#fff; border-color:#fff; color:var(--marca-fundo); filter:brightness(.94)}

@media (max-width:820px){
  .fechamento{grid-template-columns:1fr; gap:16px; padding:40px 26px 44px; border-radius:var(--r-lg); text-align:center}
  .fechamento .rotulo{padding-top:0; border-top:none}
  .fechamento p{margin-left:auto; margin-right:auto}
  .fechamento .cta-row{justify-content:center}
}

/* ===================== Páginas de documento ===================== */

.doc{
  padding:56px 0 100px;
  /* Medida da coluna de texto em pixels, não em ch: ch varia com o corpo da
     fonte, e títulos, parágrafos e caixas acabavam quebrando em larguras
     diferentes. Em pixels, tudo alinha na mesma coluna. */
  --medida:700px;
}

/* Cabeçalho de documento - as páginas legais usam .doc-head, a home usa
   .doc-cabeca. Os dois nomes valem. */
.doc-head,
.doc-cabeca{border-bottom:1px solid var(--regua); padding-bottom:28px; margin-bottom:40px}
.doc-head h1,
.doc-cabeca h1{font-size:clamp(32px,4.6vw,52px); line-height:1.03; letter-spacing:-.042em; font-weight:800; margin:0 0 14px; text-wrap:balance}
.doc-head .atualizado,
.doc-cabeca .meta{margin:0; color:var(--tinta-3); font-size:14.5px; line-height:1.7}
.doc-head .atualizado strong,
.doc-cabeca .meta strong{color:var(--tinta-2)}
.doc-cabeca .rotulo{display:block; margin-bottom:16px}

/* As páginas legais escrevem o corpo direto no container; a home usa
   .doc-corpo. Estilizar por .doc cobre as duas. */
.doc h2,
.doc-corpo h2{
  font-size:23px; font-weight:750; letter-spacing:-.028em; margin:52px 0 14px;
  padding-top:18px; border-top:1px solid var(--regua); scroll-margin-top:92px;
  max-width:var(--medida);
}
.doc-corpo h2:first-child{margin-top:0; border-top:none; padding-top:0}
.doc h3,
.doc-corpo h3{font-size:17.5px; font-weight:700; margin:30px 0 10px; letter-spacing:-.02em; max-width:var(--medida)}
.doc > .container-texto > p,
.doc-corpo p{margin:0 0 16px; color:var(--tinta-2); font-size:16.5px; max-width:var(--medida)}
.doc > .container-texto > ul,
.doc > .container-texto > ol,
.doc-corpo ul, .doc-corpo ol{margin:0 0 20px; padding-left:22px; color:var(--tinta-2); max-width:var(--medida)}
/* Nos documentos o acordeão faz parte do texto corrido, então segue a mesma
   coluna. Na home ele é uma seção inteira e continua ocupando a largura toda. */
.doc > .container-texto > details{max-width:var(--medida)}
.doc li,
.doc-corpo li{margin-bottom:9px; font-size:16.5px}
.doc li::marker{color:var(--tinta-3)}
.doc strong,
.doc-corpo strong{color:var(--tinta); font-weight:650}

code{
  font-family:var(--mono); font-size:13.5px; background:var(--papel-4);
  border:1px solid var(--regua); padding:1.5px 6px; border-radius:5px; color:var(--tinta);
}

/* Caixas de apoio. .destaque-box abre o documento, .aviso-box interrompe. */
.destaque-box,
.caixa-nota{
  background:var(--papel-3); border:1px solid var(--regua); border-left:3px solid var(--marca);
  border-radius:var(--r-sm); padding:20px 22px; margin:0 0 30px;
  box-shadow:var(--sombra-1); max-width:var(--medida);
}
.aviso-box,
.caixa-atencao{
  background:color-mix(in srgb, var(--atencao) 7%, var(--papel-3));
  border:1px solid color-mix(in srgb, var(--atencao) 28%, transparent);
  border-left:3px solid var(--atencao);
  border-radius:var(--r-sm); padding:20px 22px; margin:0 0 30px; max-width:var(--medida);
}
.destaque-box p, .caixa-nota p, .aviso-box p, .caixa-atencao p{margin:0 0 10px; font-size:16px; color:var(--tinta-2)}
.destaque-box p:last-child, .caixa-nota p:last-child, .aviso-box p:last-child, .caixa-atencao p:last-child{margin-bottom:0}
.aviso-box strong, .caixa-atencao strong{color:var(--atencao)}

.doc-indice{
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
  padding:24px 26px; margin:0 0 46px; box-shadow:var(--sombra-1);
}
.doc-indice .rotulo{display:block; margin-bottom:14px}
.doc-indice ol{margin:0; padding-left:22px; columns:2; column-gap:44px; color:var(--tinta-3)}
.doc-indice li{margin-bottom:8px; font-size:15px}
.doc-indice a{color:var(--tinta-2); text-decoration:none}
.doc-indice a:hover{color:var(--marca); text-decoration:underline}
@media (max-width:640px){ .doc-indice ol{columns:1} }

.doc-tabela{
  overflow-x:auto; margin:0 0 30px; background:var(--papel-3);
  border:1px solid var(--regua); border-radius:var(--r); box-shadow:var(--sombra-1);
}
.doc-tabela table{width:100%; border-collapse:collapse; min-width:480px}
.doc-tabela th, .doc-tabela td{
  padding:13px 16px; text-align:left; border-bottom:1px solid var(--regua);
  font-size:15.5px; color:var(--tinta-2); vertical-align:top;
}
.doc-tabela tr:last-child td{border-bottom:none}
.doc-tabela th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:500; background:var(--papel-4);
}
.doc-tabela td strong{color:var(--tinta)}

/* Cartões de contato - .grid-2/.card no suporte, .contato-grade na home. */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.card{
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
  padding:26px 26px 28px; box-shadow:var(--sombra-1);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--regua-forte); box-shadow:var(--sombra-2); transform:translateY(-3px)}
.card .icone{
  width:44px; height:44px; border-radius:var(--r-sm); margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:var(--marca-fraca); border:1px solid var(--regua);
}
.card h3{margin:0 0 6px; font-size:18px; font-weight:750; letter-spacing:-.02em}
.card p{margin:0; color:var(--tinta-2); font-size:15px}

.contato-grade{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:44px}
.contato-item{
  background:var(--papel-3); border:1px solid var(--regua); border-radius:var(--r);
  padding:26px; box-shadow:var(--sombra-1);
}
.contato-item .rotulo{display:block; margin-bottom:12px}
.contato-item h3{margin:0 0 6px; font-size:18px; font-weight:750; letter-spacing:-.02em}
.contato-item p{margin:0 0 18px; color:var(--tinta-2); font-size:15px}

@media (max-width:720px){
  .grid-2, .contato-grade{grid-template-columns:1fr}
}

/* ===================== Rodapé ===================== */

.footer{border-top:1px solid var(--regua); background:var(--papel-2); padding:60px 0 36px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; margin-bottom:44px}
.footer .rotulo,
.footer h4{
  display:block; margin:0 0 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:500;
}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.footer a{color:var(--tinta-2); text-decoration:none; font-size:15px}
.footer a:hover{color:var(--marca)}
.footer .sobre p{color:var(--tinta-3); font-size:14.5px; margin:14px 0 0; max-width:38ch}
.footer-base{
  border-top:1px solid var(--regua); padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3);
}
@media (max-width:780px){ .footer-grid{grid-template-columns:1fr; gap:34px} }

/* ===================== Aviso de cookies ===================== */

.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  max-width:var(--max); margin:0 auto;
  background:var(--papel-3); border:1px solid var(--regua-forte); border-radius:var(--r);
  padding:18px 22px;
  display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  box-shadow:var(--sombra-3);
  animation:sobe .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes sobe{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.cookie-bar p{margin:0; font-size:14.5px; color:var(--tinta-2); max-width:66ch}
.cookie-acoes{display:flex; gap:9px; flex-wrap:wrap}
@media (max-width:620px){
  .cookie-bar{align-items:stretch; padding:16px 18px}
  .cookie-acoes{width:100%}
  .cookie-acoes .btn{flex:1}
}

/* ===================== Revelação na rolagem ===================== */

/* O estado escondido só existe com JS ligado (html.js é marcado antes da
   primeira pintura). Sem JS, tudo nasce visível. */
.js [data-revelar]{opacity:0; transform:translateY(16px)}
.js [data-revelar].revelado{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js [data-revelar]{opacity:1; transform:none}
}

/* ===================== Impressão ===================== */

@media print{
  .topbar, .cookie-bar, .fechamento, .nav-toggle{display:none !important}
  body{background:#fff; color:#000; font-size:12pt}
  .doc{padding:0}
  a{color:#000; text-decoration:underline}
}