/* =========================================================
   F4 TWEAKS — design tokens
   Paleta estritamente acromática (cinza / branco / preto).
   Sem nenhuma cor de destaque: o que marca hierarquia é o
   contraste (branco cheio contra cinza), não matiz.
========================================================= */
:root{
  --ink-950:#0A0A0B;
  --ink-900:#111214;
  --ink-850:#161719;
  --ink-800:#1C1D20;
  --ink-700:#2A2B2F;
  --ink-600:#3B3C41;
  --ink-500:#6E7075;
  --ink-400:#8C8E93;
  --ink-300:#A9ABAF;
  --paper-100:#EDEDEC;
  --paper-50:#F6F6F5;
  --white:#FFFFFF;

  /* Os tokens --basic-tint e --advanced-tint sairam daqui. Eles existiam
     para o card de cada plano ter o mesmo tom do selo correspondente
     dentro do painel C++ — e os dois selos foram removidos quando os
     planos viraram um. Token de cor que ninguem usa vira paleta
     fantasma: a proxima pessoa copia dele achando que faz parte do
     sistema. */

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:18px;

  --ease-out:cubic-bezier(.16,.8,.3,1);

  /* Anel de foco do teclado. Estava escrito à mão em NOVE regras espalhadas
     pelo style.css e pelo checkout.css — mudar a espessura ou a cor do foco
     obrigava a caçar as nove. Só o traço vira token; o outline-offset fica em
     cada regra porque ele depende do formato de cada elemento (botão redondo,
     campo com borda, cartão inteiro). */
  --focus:2px solid var(--white);

  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--ink-950);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- barra de rolagem ----------
   ELA NUNCA TINHA SIDO ESTILIZADA, e por isso o Windows desenhava a dele:
   uma faixa clara, quase branca, encostada na borda direita de um site que
   e preto de ponta a ponta. Aparecia na home, no checkout e — pior — dentro
   do modal de plano, onde a barra clara corta o cartao no meio.

   As duas sintaxes existem de proposito e NAO sao redundantes:
   `scrollbar-color` e o padrao (Firefox e Chrome novo) mas so aceita duas
   cores e nao deixa mudar a largura; os `::-webkit-scrollbar` dao o controle
   fino no Chrome, Edge e Opera, que e onde esta a esmagadora maioria do
   publico deste site. Quem entender so uma das duas ainda ganha uma barra
   escura. */
html{
  /* O Firefox nao aceita degrade aqui, so duas cores chapadas. Fica o
     --ink-600, que e o tom do MEIO do degrade do Chrome: assim os dois
     navegadores mostram uma barra do mesmo peso, e quem estiver no
     Firefox nao ve uma barra visivelmente mais escura que a do print. */
  scrollbar-color:var(--ink-600) transparent;
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}

/* O degrade e ATRAVESSADO, nao ao comprimento.
   Um degrade de cima para baixo parece bom numa barra longa e vira uma
   mancha numa curta, e o comprimento do polegar muda com o tamanho da
   pagina: a mesma regra daria resultados diferentes na home e no
   checkout. Atravessando os 4px de largura, o claro fica sempre na
   mesma borda e a barra le como uma haste redonda, independente de
   quanto ela mede.
   So cinzas: o site inteiro e branco sobre preto, e uma cor que so
   existisse aqui seria a unica do site. */
/* NAO SE ASSUSTE se for depurar isto: no DevTools e no CSSOM estas
   regras aparecem com `background-image:` VAZIO. Nao esta quebrado. E
   assim que o navegador serializa qualquer declaracao que contenha
   var(): o valor so e resolvido na hora de pintar, e ate la o atalho
   nao tem como ser escrito de volta em texto.
   Ja cai nessa armadilha aqui: li o vazio, conclui que a barra nao
   estava pintando, e troquei tudo por hex na mao. Testei depois com
   duas caixas, uma por var() e outra por hex, e as duas pintaram a
   mesma cor. O var() funciona. Para conferir de verdade, use
   getComputedStyle(el, '::-webkit-scrollbar-thumb'). */
::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,
    var(--ink-500) 0%, var(--ink-600) 45%, var(--ink-800) 100%);
  border-radius:999px;
  /* A borda transparente com background-clip afina o polegar sem afinar a
     area de clique: o alvo continua com os 10px inteiros, so a pintura
     encolhe. Barra bonita que ninguem consegue agarrar e um retrocesso. */
  border:3px solid transparent;
  background-clip:content-box;
}
/* Na barra deitada quem atravessa e o eixo vertical. */
::-webkit-scrollbar-thumb:horizontal{
  background:linear-gradient(180deg,
    var(--ink-500) 0%, var(--ink-600) 45%, var(--ink-800) 100%);
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,
    var(--ink-400) 0%, var(--ink-500) 45%, var(--ink-700) 100%);
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:horizontal:hover{
  background:linear-gradient(180deg,
    var(--ink-400) 0%, var(--ink-500) 45%, var(--ink-700) 100%);
  background-clip:content-box;
}
::-webkit-scrollbar-corner{background:transparent;}

body{
  margin:0;
  background:transparent;
  color:var(--paper-100);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* fundo de partículas fixo por trás de todo o site */
#bgParticles{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-2;
  pointer-events:none;
}
/* O #cursorGlow SAIU.
   Era um clarão branco de 560px que seguia o ponteiro pela página
   inteira. Numa página escura ele não lia como efeito: lia como se o
   monitor estivesse com mancha, ou como se a seção tivesse um fundo
   diferente da de baixo. E como acompanhava o mouse, cada print saía
   com uma mancha em lugar diferente.
   O brilho que FICOU é outro: o de dentro dos cartões de categoria
   (.cat, mais abaixo). Aquele é contido, responde ao cartão que está
   sob o ponteiro, e foi pedido. */

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--white);
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}

a{color:inherit;}
ul{padding-left:1.1em; margin:0;}
li{margin-bottom:.5em;}
p{margin:0 0 1em;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-400);
  margin:0 0 .8em;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.85em 1.5em;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible{outline:var(--focus); outline-offset:3px;}

.btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  z-index:-1;
}
.btn--ghost:hover::before, .btn--outline:hover::before{transform:translateX(120%);}
.btn--primary::before{background:linear-gradient(115deg, transparent 30%, rgba(0,0,0,.12) 50%, transparent 70%);}
.btn--primary:hover::before{transform:translateX(120%);}
@media (prefers-reduced-motion: reduce){
  .btn::before{display:none;}
}

.btn--primary{background:var(--white); color:var(--ink-950);}
.btn--primary:hover{background:var(--paper-100); box-shadow:0 8px 30px -10px rgba(255,255,255,.35);}

.btn--ghost{background:transparent; color:var(--white); border-color:var(--ink-600);}
.btn--ghost:hover{border-color:var(--ink-400);}

/* o width:100% e o justify-content:center que moravam aqui saíram para a
   regra .plan .btn (seção de planos). Eram um efeito colateral do único
   lugar onde o botão vazado é usado hoje: dentro dos cards. Deixá-los aqui
   fazia qualquer .btn--outline futuro nascer esticado sem motivo. */
.btn--outline{background:transparent; color:var(--white); border-color:var(--ink-600);}
.btn--outline:hover{border-color:var(--white);}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(10px);
  /* SEM risco embaixo. Quem separa o menu do conteudo que passa por
     baixo dele e o desfoque somado ao fundo a 82% — os dois juntos ja
     dao a borda, sem precisar de uma linha desenhada. */
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
/* Bloco do símbolo no cabeçalho — usado pelo checkout.html e pelo legal.html.
   O color aqui existe porque a marca é desenhada com fill=currentColor:
   quem define a cor do símbolo é este contêiner, não o desenho. */
.brand__mark{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--white);
}
/* SVG colado inline, que é como o checkout.html e o legal.html montam a marca.
   O cabeçalho do index.html ficou só com o nome escrito, para não repetir a
   marca duas vezes lado a lado — por isso ele não usa .brand__mark.

   height:auto e não 100%: a marca é ~2:1 e a caixa acima é quadrada, então
   esticar a altura deformaria o desenho. Havia um `height:100%` aqui e um
   `height:auto` numa segunda regra `.co-top .brand__mark svg` logo abaixo,
   que sempre vencia — as duas únicas páginas que usam .brand__mark montam o
   cabeçalho com .co-top, então o 100% nunca chegou a valer em tela. Ficou uma
   regra só. Saiu junto o `object-fit:contain`: ele só age em elemento
   substituído (img, video) e não faz nada num <svg> inline. */
.brand__mark svg{width:100%; height:auto; display:block;}
.brand__name{font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; color:var(--white);}
.brand__name strong{font-weight:700;}

/* ---------- páginas internas (checkout e legal) ----------
   As duas páginas usam o MESMO cabeçalho: marca à esquerda, "voltar ao site"
   à direita. O bloco morava no checkout.css, que o legal.html não carrega —
   resultado: o cabeçalho da página de termos aparecia sem borda, sem largura
   máxima e com o link de voltar colado na marca. Ele mora aqui agora porque
   é justamente o que as duas páginas têm em comum; duplicar em dois arquivos
   é o caminho para uma delas ficar para trás de novo.

   O prefixo .co- ficou como está: renomear obrigaria a mexer nos dois HTML e
   no checkout.css ao mesmo tempo, sem ganho nenhum na tela. */
body.checkout-page,
body.legal-page{min-height:100vh;}

.co-top{
  /* Sem risco embaixo, igual ao .nav da home: o fundo mais escuro que o
     corpo da página já marca onde o cabeçalho termina. */
  background:var(--ink-950);
}
.co-top__inner{
  max-width:1080px; margin:0 auto; padding:16px 22px;
  display:flex; align-items:center; gap:16px;
}
.co-back{
  margin-left:auto; color:var(--ink-400); text-decoration:none;
  font-size:.85rem; font-family:var(--font-mono);
}
.co-back:hover{color:var(--white);}

.nav__links{display:flex; gap:26px;}
.nav__links a{
  position:relative;
  text-decoration:none; color:var(--ink-300); font-size:.9rem; font-weight:500;
  transition:color .15s ease;
  padding-bottom:2px;
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--white);
  transition:right .3s var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-current{color:var(--white);}
.nav__links a:hover::after, .nav__links a.is-current::after{right:0;}

.nav__actions{display:flex; align-items:center; gap:10px;}

.nav__burger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px;}
.nav__burger span{width:20px; height:2px; background:var(--white); transition:transform .25s var(--ease-out), opacity .2s ease;}
.nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav__burger.is-open span:nth-child(2){opacity:0;}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- hero ---------- */
.hero{
  /* Os 88px de baixo já eram folga; sem o risco eles passam a ser a única
     separação para a seção seguinte, e por isso sobem para 104 — o mesmo
     respiro que as seções usam entre si. */
  padding:96px 24px 104px;
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:center top;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1100px 480px at 50% -10%, transparent 40%, var(--ink-950) 95%);
  pointer-events:none;
}
.hero__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
  position:relative; z-index:1;
}
.hero h1{
  font-size:clamp(2.1rem, 4vw, 3.15rem);
  line-height:1.08;
  max-width:14ch;
}
.hero__lead{color:var(--ink-300); font-size:1.05rem; max-width:52ch;}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.hero__note{margin-top:18px; font-size:.82rem; color:var(--ink-400); font-family:var(--font-mono);}

.hero__stats{
  display:flex; gap:36px; flex-wrap:wrap;
  /* O risco daqui virou espaço. Os 34 de margem mais 22 de padding eram
     uma folga pensada para ter uma linha no meio; sem ela, 44 inteiros
     separam melhor do que 56 partidos ao meio. */
  margin-top:44px;
}
.hero__stat-value{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.6rem; color:var(--white); line-height:1.1;
}
.hero__stat-label{font-size:.78rem; color:var(--ink-400); font-family:var(--font-mono);}

.hero__scroll-hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--ink-600); border-radius:12px;
  display:flex; justify-content:center; padding-top:7px;
  z-index:2;
}
.hero__scroll-hint span{
  width:2px; height:7px; border-radius:2px; background:var(--ink-300);
  animation:scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot{
  0%{transform:translateY(0); opacity:1;}
  70%{transform:translateY(12px); opacity:0;}
  100%{transform:translateY(0); opacity:0;}
}

/* ---------- moldura de janela ----------
   Herdeira do antigo .readout: a moldura (três pontinhos + título) era a
   parte boa daquele elemento e ficou. O que saiu foi o conteúdo — quatro
   barras animadas com números que ninguém mediu. Agora a janela mostra a
   captura de tela do painel de verdade.

   A moldura é usada no hero e na galeria de prints, por isso é uma classe
   própria e não uma regra do hero. */
.janela{
  margin:0;
  background:var(--ink-900);
  border:1px solid var(--ink-700);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.janela__barra{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; border-bottom:1px solid var(--ink-800); background:var(--ink-850);
}
.janela__barra .dot{width:9px; height:9px; border-radius:50%; background:var(--ink-600);}
.janela__titulo{margin-left:8px; font-family:var(--font-mono); font-size:.75rem; color:var(--ink-500);}
/* `display:block` mata os 4px de descida que o <img> herda de ser inline —
   sem ele sobra uma faixa do fundo da janela embaixo da imagem, e ela lê
   como desalinhamento. */
.janela__tela{display:block; width:100%; height:auto;}
.janela__nota{
  padding:12px 20px 16px; margin:0; font-size:.76rem; color:var(--ink-400);
  border-top:1px solid var(--ink-800); font-family:var(--font-mono);
}

/* O bloco .marquee* saiu daqui junto com a esteira de nomes de jogos do
   index.html. Ver o comentário que ficou no lugar dela, no HTML. */

/* ---------- reveal on scroll ----------
   UM tempo e UMA curva para a página inteira — é isso que faz as ondas das
   seções parecerem o mesmo organismo em vez de efeitos avulsos. Se for
   ajustar a sensação, mexa nas duas variáveis abaixo e em nada mais. */
:root{
  --reveal-dur:.65s;
  --reveal-ease:cubic-bezier(.22,.61,.36,1);
}
.reveal{
  opacity:0;
  /* O scale(.97) é o toque de profundidade: o bloco "chega" em vez de só
     deslizar. Fica na base (e não num modificador) para valer também para
     --left e --right, que só trocam o eixo do deslocamento. */
  transform:translateY(26px) scale(.97);
  transition:opacity var(--reveal-dur) var(--reveal-ease),
             transform var(--reveal-dur) var(--reveal-ease);
  will-change:opacity, transform;
}
.reveal--left{transform:translateX(-40px) scale(.97);}
.reveal--right{transform:translateX(40px) scale(.97);}
.reveal.is-visible{opacity:1; transform:translate(0,0) scale(1);}
/* O atraso escalonado só na ENTRADA. Na saída (fora da tela) todos apagam
   juntos e sem fila — é o que rearma a onda rápido para a próxima passagem. */
.reveal-stagger.is-visible{transition-delay:var(--reveal-delay, 0s);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* flutuação suave do painel do hero */
@keyframes float-y{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.hero__panel{animation:float-y 6s ease-in-out infinite;}

/* ---------- sections ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:104px 24px; position:relative;}
/* SEM FUNDO PROPRIO. Aqui havia `background:rgba(17,18,20,.93)`, um cinza
   quase opaco, e era ele que criava as faixas horizontais que cortavam a
   pagina: tres blocos claros (Resultados, Planos e FAQ) alternando com o
   preto dos outros. De longe a pagina virava um zebrado.
   O cinza tambem TAPAVA as particulas do fundo, que sao fixas atras de
   tudo: dentro dessas tres secoes a nevoa simplesmente sumia, e a
   textura do site aparecia e desaparecia conforme a rolagem.
   O que separa as secoes agora e o respiro dos 104px de padding e o
   proprio cabecalho de cada uma. O que ficou desta regra e so o
   LAYOUT: a faixa continua sangrando de ponta a ponta e devolvendo a
   largura da coluna a cada filho direto, logo abaixo. */
.section--alt{max-width:none; padding-left:0; padding-right:0; overflow:hidden;}
/* A seção alternativa sangra de ponta a ponta na tela, e cada filho direto
   recebe de volta a largura e o respiro da coluna do site.
   Havia uma segunda regra logo abaixo repetindo estas mesmas declarações para
   .grid e .section__head — que são todos filhos DIRETOS e já estavam
   cobertos aqui. O efeito era nulo: ela só existia porque, sendo mais
   específica (0,2,0), obrigava quem quisesse um teto menor (o grid de planos,
   a tabela) a repetir ".section--alt" no seletor. Removida a repetição, um
   ".grid--plans" simples declarado depois já vence e o resto do arquivo
   ficou mais curto. */
.section--alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:24px; padding-right:24px;}

/* ---------- cabeçalho de seção ----------
   ELE ERA ALINHADO À ESQUERDA NUMA CAIXA DE 640px, e o efeito na tela era
   o de um título largado num canto: os títulos ocupavam pouco mais da
   metade da coluna e sobrava um vazio do mesmo tamanho do lado direito.

   Pior, ele brigava com a palavra-fantasma da seção. Ela é CENTRADA (a
   mudança que a pôs no meio está algumas regras acima), então título à
   esquerda e palavra no meio ficavam em dois eixos diferentes, e o
   fantasma deixava de ser fundo do título para virar mancha ao lado dele.
   Centrado, os dois dividem o mesmo eixo e a composição fecha.

   A MEDIDA DO h2 ERA 18ch, E ERA ELA QUE ESTRAGAVA A QUEBRA. Dezoito
   caracteres é estreito demais: o título mais longo do site (69 caracteres,
   o de #otimizacoes) caía em três linhas com a última quase vazia. Em 27ch
   ele quebra em duas, exatamente na fronteira entre as duas frases.
   Conferido nos quatro tamanhos reais, de 18 a 69 caracteres.

   `text-wrap:balance` reparte as linhas em vez de encher a primeira e
   deixar sobra na última. Navegador que não entender ignora a linha e cai
   na quebra normal, que continua aceitável nesta medida. */
.section__head{
  max-width:none;
  margin:0 auto 48px;
  text-align:center;
  position:relative; z-index:1;
}
.section__head h2{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  max-width:27ch;
  margin-left:auto; margin-right:auto;
  text-wrap:balance;
}
/* O teto de 60ch é o da leitura confortável. Vale só DENTRO do cabeçalho:
   fora dele a mesma classe veste o parágrafo de regras dos planos, que tem
   largura própria (900px) e é alinhado à esquerda. */
.section__lead{color:var(--ink-400);}
.section__head .section__lead{max-width:60ch; margin-left:auto; margin-right:auto;}

/* ---------- palavra gigante fantasma no fundo das seções ----------
   ELAS ERAM ENCOSTADAS NA BORDA (left:-6px, ou right:-6px nas alternadas) e
   saíam cortadas pela margem da tela: em vez de uma marca d'água, o que se
   via era meia palavra pendurada num canto — que é o que faz parecer
   sujeira em vez de intenção.

   Agora ficam CENTRADAS na seção. Três consequências que precisaram de
   ajuste junto, senão centrar sozinho pioraria:

   1. centrada, a palavra passa POR BAIXO do título da seção, e o contorno
      de 1px competia com o texto. O traço caiu de .055 para .038 e o
      cabeçalho ganhou z-index — o fantasma tem que ser sentido, não lido.
   2. `text-align:center` + `left:0; right:0` centra sem precisar saber a
      largura do texto (translateX(-50%) exigiria, e quebra quando a fonte
      cai no fallback e a palavra muda de largura).
   3. o `--right`, que só existia para jogar a palavra no outro canto, virou
      um deslocamento suave. Alternar continua alternando, mas dentro da
      área da seção, não para fora dela. */
.section__ghost, .cta-final__ghost{
  position:absolute; top:8px; left:0; right:0;
  text-align:center;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(5rem, 16vw, 13rem);
  line-height:1;
  letter-spacing:.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.038);
  pointer-events:none; user-select:none;
  z-index:0;
  white-space:nowrap;
  overflow:hidden;
}
/* A variante alternada NÃO desloca mais nada. Ela chegou a ficar com um
   `translateX(6%)` para preservar o ritmo de alternância entre seções, e
   medido na página isso dava 57px fora do centro — o suficiente para ler
   como "torto" ao lado de outra que estava centrada. Centralizado é
   centralizado; a classe fica só para não quebrar o HTML que já a usa. */
.section__ghost--right{}
.grid{position:relative; z-index:1;}

/* ---------- grade de categorias ----------
   AS "LINHAS" SUMIRAM, e vale explicar o truque que as criava: a grade tinha
   `gap:1px` sobre um fundo claro (--ink-800). Cada cartao era opaco, entao o
   unico pixel do fundo que aparecia era a fresta entre eles — uma malha dura
   de rachaduras. Funciona em tabela; numa grade de leitura, cansa.

   Agora sao cartoes SOLTOS: folga de verdade, borda propria e cantos. Cada um
   e um objeto, e nao uma celula de planilha. */
.grid--cats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.cat{
  position:relative;
  padding:32px 28px;
  border:1px solid var(--ink-800);
  border-radius:var(--radius-md);
  /* Degrade sutil de cima para baixo: da volume sem pesar. Um fundo chapado
     em nove cartoes lado a lado le como bloco unico. */
  background:linear-gradient(180deg, var(--ink-900), var(--ink-950) 60%);
  transition:border-color .35s var(--ease-out),
             transform .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
}
/* O brilho que segue o mouse mora numa camada propria (::before) para poder
   aparecer e sumir sem tocar no fundo do cartao. As coordenadas --mx/--my
   vem do script.js; sem JS o gradiente fica no centro e nada quebra. */
.cat::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
                             rgba(255,255,255,.07), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease-out);
  pointer-events:none;
}

/* ---------- o fio de luz no topo ----------
   POR QUE ISTO EXISTE: o cartao ja tinha hover (subia 3px, a borda clareava,
   o brilho acendia) e mesmo assim o dono do projeto disse que as caixas
   "nao tem animacao". Ele tinha razao, e o motivo e que TODOS os efeitos
   antigos sao mudancas de ESTADO — o cartao esta num jeito, passa a estar
   em outro. Nenhum deles tem MOVIMENTO com direcao, que e o que o olho lê
   como animacao.

   Este tem: um fio de 1px no topo que se abre do centro para as bordas.
   Escala horizontal, que a GPU faz de graca, e nao anima largura (que
   reflowaria o cartao 60 vezes por segundo). */
.cat::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  border-radius:inherit;
  background:linear-gradient(90deg,
              transparent, rgba(255,255,255,.5), transparent);
  transform:scaleX(0);
  transition:transform .45s var(--ease-out);
  pointer-events:none;
}
.cat:hover{
  border-color:var(--ink-600);
  transform:translateY(-4px);
  box-shadow:0 22px 45px -24px rgba(0,0,0,.95);
}
.cat:hover::before{opacity:1;}
.cat:hover::after{transform:scaleX(1);}
/* O conteudo precisa ficar ACIMA das camadas de brilho. */
.cat > *{position:relative; z-index:1;}

.cat__index{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-400);
  transition:color .35s var(--ease-out);
}
.cat:hover .cat__index{color:var(--paper-100);}
.cat h3{margin-top:.4em; font-size:1.15rem;}
.cat ul{color:var(--ink-300); font-size:.9rem; list-style:none; padding:0; margin-top:1em;}
.cat li{position:relative; padding-left:16px; margin-bottom:.6em;}

/* As setinhas avancam 3px EM FILA quando o mouse entra.
   O atraso vem do indice do item, entao a fila se forma sozinha por mais
   itens que o cartao ganhe — nada de delay escrito a mao por posicao. O
   teto de 6 evita que um cartao de 10 linhas termine a fila meio segundo
   depois do mouse ja ter saido. */
.cat li::before{
  content:"›"; position:absolute; left:0; color:var(--ink-600);
  transition:transform .35s var(--ease-out), color .35s var(--ease-out);
  transition-delay:calc(min(var(--i, 0), 6) * 35ms);
}
.cat:hover li::before{transform:translateX(3px); color:var(--ink-300);}

@media (prefers-reduced-motion: reduce){
  .cat, .cat::before, .cat::after, .cat li::before, .cat__index{transition:none;}
  .cat::after{display:none;}
}

/* passos da seção "como funciona" (reaproveita o visual dos .cat).
   AQUI O NUMERO FICOU, e nas nove areas nao: estes quatro cartoes SAO uma
   sequencia (escolhe, paga, ativa, otimiza) e o numero e a unica coisa que
   diz a ordem. Nas areas do catalogo a ordem era arbitraria — o "07" so
   informava que aquele foi o setimo card que alguem digitou. */
.grid--steps{grid-template-columns:repeat(4, 1fr);}
.cat__num{
  position:absolute; top:22px; right:24px; z-index:1;
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-600);
  transition:color .35s var(--ease-out);
}
.cat:hover .cat__num{color:var(--ink-400);}
.step__text{color:var(--ink-300); font-size:.9rem; margin:1em 0 0;}

/* As regras .bench, .bench img e .bench__note sairam daqui, junto com as
   tres que elas tinham no @media de 720px. Eram a moldura das "figuras com
   print do painel", resto do antigo bloco "antes vs depois" que ja tinha ido
   embora com os numeros de FPS inventados. Nenhum elemento das tres paginas
   usa a classe ha tempos: os prints do painel hoje sao a .galeria com as
   .janela, logo abaixo.

   O comentario que morava aqui gastava vinte linhas com uma briga de margem
   entre a margem propria que o navegador da ao <figure> e o
   `margin-left:auto` de `.section--alt > *`. Nao vale mais a leitura: a
   .janela ja zera a margem do <figure> na regra dela, la em cima, e as
   figuras de hoje sao filhas da .galeria, nao filhas diretas da secao.

   O QUE VALE GUARDAR e o motivo de os prints NAO serem inclinados. Havia um
   rotateX preso a rolagem, e elemento sob transform 3D e rasterizado numa
   textura e reamostrado a cada quadro; texto miudo de captura de tela perde
   definicao nisso. O print parecia borrado o TEMPO TODO, porque no scroll
   quase nunca estava no angulo zero. Profundidade aqui e estatica: sombra
   projetada. Se um dia voltar a inclinar, faca so na entrada e termine em
   zero, nunca preso a posicao do scroll. */

/* ---------- galeria de prints ----------
   Duas janelas lado a lado em vez de um print gigante por vez. Em tela
   estreita viram uma coluna. O minmax de 300px e o piso: abaixo disso a
   captura fica ilegivel de qualquer jeito, e e melhor empilhar. */
.galeria{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:20px;
  position:relative; z-index:1;
}
/* O <button> existe por acessibilidade: quem navega por teclado precisa
   chegar na foto com Tab e abrir com Enter. Um <div onclick> seria invisivel
   para o teclado. Os resets abaixo tiram a aparencia de botao que o
   navegador da de graca. */
.janela__lupa{
  display:block; width:100%; padding:0; border:0; margin:0;
  background:none; cursor:zoom-in; position:relative; overflow:hidden;
}
.janela__lupa:focus-visible{outline:var(--focus); outline-offset:-3px;}
/* A imagem cresce 2% sob o mouse, e o overflow:hidden do botao corta o
   excedente — o efeito e de aproximar dentro da moldura, sem a janela
   inteira mudar de tamanho e empurrar o vizinho. */
.janela__lupa img{transition:transform .5s var(--ease-out);}
.janela--clicavel{transition:border-color .35s var(--ease-out), transform .35s var(--ease-out);}
.janela--clicavel:hover{border-color:var(--ink-600); transform:translateY(-3px);}
.janela--clicavel:hover .janela__lupa img{transform:scale(1.02);}
/* Dica de que da para clicar, sem poluir: aparece so no hover. */
.janela__lupa::after{
  content:"ampliar";
  position:absolute; right:10px; bottom:10px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--paper-100);
  background:rgba(10,10,11,.78); border:1px solid var(--ink-700);
  border-radius:999px; padding:4px 10px;
  opacity:0; transform:translateY(4px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.janela--clicavel:hover .janela__lupa::after,
.janela__lupa:focus-visible::after{opacity:1; transform:translateY(0);}

/* ---------- visualizador ampliado ----------
   Sem biblioteca: um <dialog> nativo. Ele ja traz de graca o fechar no Esc,
   o foco preso dentro e o fundo inerte — tres coisas que uma div com
   position:fixed obrigaria a escrever a mao e quase sempre sai errado. */
.visor{
  border:0; padding:0; background:transparent;
  max-width:96vw; max-height:96vh;
  overflow:visible;
}
.visor::backdrop{background:rgba(4,4,5,.88); backdrop-filter:blur(3px);}
.visor img{
  display:block;
  max-width:96vw; max-height:88vh;
  width:auto; height:auto;
  border:1px solid var(--ink-700); border-radius:var(--radius-md);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.9);
}
.visor__fechar{
  position:absolute; top:-14px; right:-14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--ink-900); color:var(--paper-100);
  border:1px solid var(--ink-700); cursor:pointer;
  font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.visor__fechar:hover{background:var(--ink-800); border-color:var(--ink-500);}
.visor__fechar:focus-visible{outline:var(--focus); outline-offset:2px;}
@media (max-width:640px){
  .visor__fechar{top:6px; right:6px;}
}

/* ---------- entrada lateral ----------
   ISTO E O QUE SOBROU DO BLOCO DO QUIZ, e sobrou por um motivo concreto:
   o keyframe abaixo se chamava `quiz-in` e animava os passos do quiz, mas
   o MENU DE CELULAR (.nav__links.is-open, la embaixo) tambem o usa. Apagar
   o bloco do quiz inteiro — que e o que parecia certo fazer — tiraria a
   animacao do menu no telefone, e ninguem ia ligar uma coisa na outra
   depois.

   Renomeado para o que ele faz, ja que o quiz nao existe mais. As outras
   ~20 regras .quiz* foram embora: o quiz sumiu junto com o segundo plano,
   porque com um plano so nao havia o que ele recomendar. */
@keyframes entra-lateral{
  from{opacity:0; transform:translateX(26px);}
  to{opacity:1; transform:translateX(0);}
}

/* ---------- seletor de prazo ----------
   São quatro produtos e dois cards: o prazo é uma pergunta separada de
   "quanto do catálogo eu quero". Quatro cards obrigariam a comparar quatro
   coisas de uma vez; o seletor separa as duas decisões.

   Continua sendo radio de verdade, só invisível: trocar por <button>
   quebraria navegação por teclado e leitor de tela, que já entendem grupo
   de rádio sem precisar de nada escrito. */
.prazo{
  display:flex; justify-content:center; gap:6px;
  max-width:900px; margin:0 auto 22px;
  padding:5px; border:1px solid var(--ink-800); border-radius:30px;
  background:var(--ink-900); width:fit-content;
}
.prazo__opt{
  position:relative; cursor:pointer;
  display:flex; align-items:baseline; gap:7px;
  padding:9px 20px; border-radius:24px;
  transition:background .18s var(--ease-out), color .18s var(--ease-out);
}
.prazo__opt input{position:absolute; opacity:0; width:0; height:0;}
.prazo__opt span{color:var(--ink-300); font-size:.9rem; font-weight:500;}
/* --ink-500 sobre o preto do site dá ~4:1, abaixo dos 4.5:1 que a WCAG pede
   para texto pequeno. Este "paga uma vez" não é enfeite: é o que diferencia
   os dois prazos. Subiu para --ink-400 (~6:1). */
.prazo__opt small{color:var(--ink-400); font-size:.72rem;}
.prazo__opt:hover span{color:var(--paper-100);}
.prazo__opt:has(input:checked){background:var(--paper-50);}
.prazo__opt:has(input:checked) span{color:var(--ink-950); font-weight:600;}
.prazo__opt:has(input:checked) small{color:var(--ink-700);}
.prazo__opt:has(input:focus-visible){outline:var(--focus); outline-offset:2px;}

/* ---------- pricing ---------- */
/* Eram 4 colunas. Com 2 planos, esticar o grid pelos 1180px da seção daria
   ~570px de card: o texto ficaria perdido num vazio enorme. Por isso o bloco
   de preços ganha largura própria e fica centrado sob o cabeçalho.
   O teto de 900px vale sobre o max-width de .section--alt > * porque vem
   depois no arquivo, com a mesma especificidade — mesma regra que a tabela
   comparativa e o .plans__terms usam para acompanhar esta largura. */
.grid--plans{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
  max-width:900px;              /* já contando os 24px de padding de cada lado */
  margin-left:auto; margin-right:auto;
}

/* ---------- a grade com UM card ----------
   MEDIDO, e não previsto: com o segundo plano fora, sobrou um card numa
   grade de duas colunas de 415px. Ele foi para a coluna da esquerda e ficou
   218px fora do centro da seção, com um buraco de 415px do lado direito —
   e o cabeçalho da seção, centrado logo acima, denunciava o desalinhamento.

   `max-width:520px` e não `1fr`: esticar o card sozinho até os 900px daria
   uma faixa larga e rasa com o preço perdido no meio. 520 é perto da
   largura que ele tinha quando eram dois (415) — o suficiente para o card
   continuar parecendo um card. */
.grid--plano-unico{
  grid-template-columns:minmax(0, 1fr);
  max-width:520px;
}
.plan{
  position:relative;
  background:var(--ink-950);
  border:1px solid var(--ink-700);
  border-radius:var(--radius-lg);
  padding:32px 26px;
  display:flex; flex-direction:column; gap:20px;
  cursor:pointer;
  overflow:hidden;
  transition:transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.plan:hover{
  transform:translateY(-8px);
  border-color:var(--ink-400);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55);
}
/* faixa de luz que cruza o card no hover */
.plan__shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .9s ease;
}
.plan:hover .plan__shine{transform:translateX(130%);}
@media (prefers-reduced-motion: reduce){
  .plan__shine{display:none;}
}

/* linha de identidade no topo de cada card */
.plan::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
}
/* Havia um fio colorido no topo de cada card, um tom por plano. Com um
   plano so nao ha o que distinguir, e os dois tokens de cor foram junto. */

.plan--highlight:hover{transform:translateY(-14px);}
/* O .plan__badge ("Recomendado") saiu com o segundo card: recomendar um
   entre um so nao quer dizer nada. NAO confundir com .co-plan__badge, do
   checkout.css, que ainda existe e marca o vitalicio. */
.plan--highlight{border-color:var(--paper-100); background:var(--ink-900); transform:translateY(-6px);}

/* O .plan é flex column com gap:20px, mas esse gap só vale ENTRE os blocos
   filhos. Dentro do cabeçalho (rótulo, descrição e preço) não havia
   espaçamento nenhum, e o BASIC/ADVANCED nascia colado na descrição. */
.plan__head{display:flex; flex-direction:column; gap:8px;}

.plan__tier{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400);}
.plan__desc{color:var(--ink-400); font-size:.88rem; min-height:2.6em;}
.plan__price{font-family:var(--font-display); font-size:2.2rem; color:var(--white); font-weight:600; line-height:1;}
.plan__currency{font-size:1rem; vertical-align:top; margin-right:2px; color:var(--ink-400);}
.plan__cents{font-size:1.1rem; color:var(--ink-400);}
.plan__price-note{display:block; font-size:.76rem; color:var(--ink-400); margin-top:4px; font-family:var(--font-mono);}
.plan__list{list-style:none; padding:0; margin:0; flex:1; font-size:.87rem; color:var(--ink-300);}
.plan__list li{position:relative; padding-left:20px; margin-bottom:.7em;}
.plan__list li::before{content:"✓"; position:absolute; left:0; color:var(--ink-400);}
.plan--highlight .plan__list li::before{color:var(--white);}

/* botão "Ver tudo que está incluso" — abre o modal do plano (com teclado também) */
.plan__more{
  background:none; border:none; padding:0;
  color:var(--ink-300); font-family:var(--font-mono); font-size:.8rem;
  cursor:pointer; text-align:left;
  text-decoration:underline dotted; text-underline-offset:3px;
  transition:color .15s ease;
}
.plan__more:hover{color:var(--white);}
.plan__more:focus-visible{outline:var(--focus); outline-offset:3px;}

/* .plan__cta = botão "Contratar" do card, que leva ao checkout do plano.
   O alinhamento mora aqui, no card, e não na variante do botão: o card
   destacado usa .btn--primary e o outro .btn--outline, e antes só o outline
   trazia justify-content:center. Com 4 cards estreitos a diferença passava
   despercebida; com 2 cards largos lado a lado um CTA ficava colado à
   esquerda e o outro no meio. Amarrando em .plan .btn, qualquer variante de
   botão que entre nos cards no futuro já nasce certa. */
.plan .btn,
.plan__cta{width:100%; justify-content:center; flex-shrink:0;}

/* ---------- regras da compra, logo abaixo dos cards ----------
   São os 30 dias, a contagem a partir da primeira ativação e a chave presa a
   um PC. Contraste ALTO e de propósito, no mesmo espírito do .co-sum__regras
   do checkout: isto não é reforço de venda, é a condição do que está sendo
   comprado. Herdando só o .section__lead, o bloco caía no cinza mais apagado
   da página — justamente o texto que o cliente precisa ler ANTES de pagar.

   O max-width acompanha o grid de cards e a tabela (900px). Sem ele, o
   .section--alt daria 1180px e o parágrafo nasceria ~280px mais largo que os
   cards que ele explica, parecendo texto de outra seção. */
.plans__terms{
  /* Sem risco em cima: os 22 de margem mais 16 de padding viram 38 de
     folga limpa entre o card e as regras de compra. */
  max-width:900px; margin:38px auto 0;
  color:var(--ink-300); font-size:.85rem; line-height:1.6;
}
.plans__terms strong{color:var(--paper-100); font-weight:600;}

/* tabela comparativa dos planos
   Alinha com o grid de cards logo acima: mesmo teto de largura, mesma
   centralização. Sem isso a tabela ficaria bem mais larga que os preços que
   ela compara. */
/* ---------- o que vem no painel ----------
   Substituiu a tabela comparativa quando os dois planos viraram um. Nasceu
   SEM CSS NENHUM — o HTML entrou e as regras não —, então a lista saía com
   as bolinhas e o recuo padrão do navegador no meio de uma página que não
   usa isso em lugar nenhum. Uma varredura pegou; a olho passaria, porque
   "lista com bolinha" não parece defeito, parece decisão.

   Fica com a mesma largura da tabela que substituiu (900px) para a seção de
   planos não mudar de ritmo no meio. */
.incluso{margin:56px auto 0; max-width:900px; position:relative; z-index:1;}
.incluso h3{font-size:1.15rem; margin-bottom:22px;}
.incluso__lista{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:12px;
}
.incluso__lista li{
  position:relative;
  margin:0; padding:16px 18px 16px 44px;
  border:1px solid var(--ink-800);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--ink-900), var(--ink-950) 60%);
  color:var(--ink-300); font-size:.9rem; line-height:1.5;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
/* O visto é desenhado com a fonte mono para bater com o resto dos sinais da
   página (as setinhas dos .cat, o "+" do FAQ). */
.incluso__lista li::before{
  content:"✓";
  position:absolute; left:18px; top:16px;
  font-family:var(--font-mono); font-size:.85rem;
  color:var(--paper-100);
}
.incluso__lista li:hover{border-color:var(--ink-600); transform:translateY(-2px);}
.incluso__lista strong{color:var(--white); font-weight:600;}

/* As regras .compare* sairam daqui junto com a tabela comparativa: com um
   plano so nao ha duas colunas para comparar. O lugar dela na pagina e
   agora o .incluso, la em cima. */

/* O @keyframes plan-flash e o .plan.is-flash sairam daqui: era o destaque
   que piscava no card recomendado quando o quiz terminava. Sem quiz,
   ninguem mais adicionava a classe. */

/* O mural de feedbacks foi removido do site inteiro, e com ele todo o CSS
   que só existia para aquela seção: a grade .wall, os cartões .card/.card__*,
   a animação card-pop, o formulário .feedback-form*, as estrelas .stars/.star
   e o .photo-upload da foto do cliente.
   O motivo não é estético: os 8 depoimentos eram fictícios e a seção os
   anunciava como reais. Com o produto passando a vender sozinho pelo site,
   isso é propaganda enganosa. Melhor não ter seção do que ter uma mentindo.
   Se um dia voltarem depoimentos de verdade, este bloco se reescreve — o que
   não pode voltar é a fachada. */

/* O bloco .field saiu junto com o campo de e-mail do checkout: as cinco
   regras existiam só para aquele input, e o input foi removido de propósito.

   FICA REGISTRADO O QUE ESTAVA ESCRITO AQUI, para ninguém reescrever de
   volta. Os comentários afirmavam que "o único campo do site que usa a
   classe é o e-mail de entrega da chave" e que ele era "o campo mais
   importante da compra, já que é por ele que a chave é entregue". As duas
   frases são falsas: o site não coleta e-mail nenhum, e a chave não vai para
   um endereço digitado aqui. Ela chega no e-mail da conta do Mercado Pago
   que pagou, em até 24 horas, emitida à mão por uma pessoa. Quem tropeçasse
   nesse texto ia concluir que a entrega é automática e recriar o campo, que
   é exatamente a promessa que o checkout deixou de fazer.

   Hoje o site não tem nenhum <form>, <select> ou <textarea>; os únicos
   inputs são os dois radios name="prazo" do index.html, que a própria regra
   daqui excluía com :not([type="radio"]). Se um dia voltar um formulário,
   o bloco se reescreve. */

/* ---------- faq ---------- */
/* ---------- FAQ ----------
   A "BARRA CINZA DOS DOIS LADOS" ERA ESTE BLOCO, e a causa nao estava no
   FAQ: estava na soma de duas regras.

   O .faq e filho DIRETO de .section--alt, e `.section--alt > *` da
   `padding-left:24px; padding-right:24px` a todo filho direto (e o que
   alinha o conteudo da faixa sangrada com o resto do site). O .faq, por sua
   vez, pintava `background:var(--ink-800)` para que o `gap:1px` virasse a
   linha divisoria entre as perguntas — o mesmo truque que ja tinha sido
   removido da grade de cartoes.

   O resultado: os 24px de padding de cada lado ficavam DENTRO do fundo
   claro e fora de qualquer <details>. Nao era uma linha de 1px, era uma
   faixa de 24px de cinza subindo pelos dois lados do FAQ inteiro.

   O conserto nao e tapar o padding: e parar de pintar o pai. Cada pergunta
   virou um cartao solto, com borda e canto proprios, igual aos .cat. Sem
   fundo no pai, o padding fica transparente e a barra some por construcao —
   ela nao tem mais o que pintar. */
.faq{display:flex; flex-direction:column; gap:8px; position:relative; z-index:1;}
.faq__item{
  background:linear-gradient(180deg, var(--ink-900), var(--ink-950) 60%);
  border:1px solid var(--ink-800);
  border-radius:var(--radius-md);
  padding:18px 22px;
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.faq__item:hover{border-color:var(--ink-600);}
.faq__item[open]{border-color:var(--ink-700);}
.faq__item summary{
  cursor:pointer; color:var(--white); font-weight:600; font-size:.95rem;
  list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:16px;
}
.faq__item summary:focus-visible{outline:var(--focus); outline-offset:6px; border-radius:var(--radius-sm);}
.faq__item summary::-webkit-details-marker{display:none;}
/* Um "+" que gira 45 graus para virar "x". O caractere e o MESMO nos dois
   estados de proposito: trocar o glifo faria o simbolo saltar no meio da
   rotacao, porque "+" e "x" tem larguras diferentes na fonte mono. */
.faq__item summary::after{
  content:"+"; font-family:var(--font-mono); color:var(--ink-500);
  font-size:1.15rem; line-height:1; flex-shrink:0;
  transition:transform .3s var(--ease-out), color .3s var(--ease-out);
}
.faq__item[open] summary::after{transform:rotate(45deg); color:var(--white);}
.faq__item:hover summary::after{color:var(--ink-300);}
.faq__item p{margin:12px 0 0; color:var(--ink-400); font-size:.9rem; max-width:78ch;}

/* Abertura ANIMADA de <details>.
   `height:auto` nao e animavel por padrao — por isso `interpolate-size`, que
   libera a interpolacao para palavras-chave de tamanho. Navegador que nao
   entender simplesmente abre na hora, sem animacao e sem defeito: o
   ::details-content so existe onde ha suporte, e a regra inteira e ignorada
   nos outros. Nada de altura fixa no CSS, que quebraria quando a resposta
   quebrasse em mais linhas numa tela estreita. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords;}
  .faq__item::details-content{
    block-size:0;
    overflow:hidden;
    opacity:0;
    transition:block-size .32s var(--ease-out),
               opacity .32s var(--ease-out),
               content-visibility .32s allow-discrete;
  }
  .faq__item[open]::details-content{block-size:auto; opacity:1;}
}

/* ---------- cta final ---------- */
.cta-final{
  text-align:center; padding:110px 24px;
  position:relative; overflow:hidden;
}
.cta-final__ghost{
  left:50%; transform:translateX(-50%);
  top:auto; bottom:-40px;
  font-size:clamp(8rem, 28vw, 22rem);
}
.cta-final h2{font-size:clamp(1.6rem, 3vw, 2.3rem); max-width:20ch; margin:0 auto .9em; position:relative; z-index:1;}
.cta-final__note{
  position:relative; z-index:1;
  color:var(--ink-400); font-family:var(--font-mono); font-size:.85rem;
  margin:0 0 1.8em;
}
.cta-final .hero__cta{justify-content:center; position:relative; z-index:1;}

/* ---------- footer ---------- */
.footer{padding:56px 24px 28px;}
.footer__inner{
  max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap;
}
.footer__brand{max-width:340px;}
.footer__brand p{color:var(--ink-400); font-size:.85rem; margin-top:8px;}
/* `flex-wrap` E `gap` menor no eixo transversal, e as duas coisas são o
   conserto de uma ROLAGEM LATERAL no celular.

   Eram três colunas em `display:flex` sem quebra: a 375px elas somavam
   447px e empurravam a página inteira, criando barra de rolagem horizontal
   no site todo. O `overflow-x:hidden` do body escondia a barra mas não o
   problema — o conteúdo continuava lá fora, e o canvas do fundo crescia
   junto (472px de largura para uma tela de 375).

   Não foi introduzido agora: está assim desde antes desta mudança de
   cabeçalhos. Apareceu porque a medição de mobile passou a ser feita. */
.footer__links{display:flex; flex-wrap:wrap; gap:28px 56px;}
.footer__links h4{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-400); margin:0 0 .8em; font-family:var(--font-mono);}
.footer__links a{display:block; text-decoration:none; color:var(--ink-300); font-size:.88rem; margin-bottom:.6em;}
.footer__links a:hover{color:var(--white);}
/* Sem risco em cima: os 40 de margem mais 20 de padding viram 56 de
   folga, que e o que separa a linha de copyright do resto do rodape. */
.footer__copy{max-width:var(--maxw); margin:56px auto 0; color:var(--ink-400); font-size:.78rem; font-family:var(--font-mono);}

/* ---------- modal de plano ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,6,7,.86);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.modal-overlay.is-open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
#particleCanvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}

.modal-card{
  position:relative; z-index:2;
  width:100%; max-width:620px; max-height:86vh; overflow-y:auto;
  background:var(--ink-900);
  border:1px solid var(--ink-700);
  border-radius:var(--radius-lg);
  padding:40px 40px 32px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.7);
  transform:translateY(24px) scale(.97);
  opacity:0;
  transition:transform .4s var(--ease-out), opacity .4s ease;
}
.modal-overlay.is-open .modal-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal-close{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:50%;
  background:var(--ink-800); border:1px solid var(--ink-700); color:var(--white);
  font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.modal-close:hover{background:var(--ink-700); border-color:var(--ink-500);}

.modal-tier{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400);}
.modal-title{font-family:var(--font-display); font-size:1.9rem; color:var(--white); margin:.2em 0 .1em;}
.modal-price{font-family:var(--font-mono); font-size:1.05rem; color:var(--ink-300); margin-bottom:1.2em;}
.modal-section{margin-bottom:22px;}
.modal-section h4{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-400); margin:0 0 .8em;
}
.modal-section p{color:var(--ink-300); font-size:.92rem; margin:0;}
.modal-specs{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
.modal-specs li{
  font-size:.86rem; color:var(--ink-300); padding-left:16px; position:relative;
}
.modal-specs li::before{content:"›"; position:absolute; left:0; color:var(--ink-500);}
.modal-benefits{list-style:none; padding:0; margin:0;}
.modal-benefits li{
  font-size:.9rem; color:var(--paper-100); padding-left:22px; position:relative; margin-bottom:.7em;
}
.modal-benefits li::before{content:"✓"; position:absolute; left:0; color:var(--white);}
.modal-cta{margin-top:8px; width:100%; justify-content:center;}

/* O .toast ("mensagem copiada") existia só para avisar que a mensagem de
   contratação tinha ido para a área de transferência — copiada para colar no
   canal de atendimento que saiu do produto. Sem esse canal não há mensagem
   para copiar, o elemento sai do HTML junto e o CSS ficaria pendurado sem
   dono. O ajuste dele no celular (bottom:84px, para não ficar atrás do CTA
   fixo) saiu pelo mesmo motivo. */

/* ---------- CTA fixo no celular ---------- */
.mobile-cta{display:none;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;}
  .hero__scroll-hint{display:none;}
  .grid--cats{grid-template-columns:repeat(2, 1fr);}
  /* .grid--plans não precisa de regra aqui: 2 colunas já é o padrão desde o
     desktop, e o max-width de 900px faz os cards encolherem sozinhos. */
  .plan--highlight{transform:none;}
  /* com o menu mais curto ainda vale virar menu de celular aqui: os títulos
     das seções são longos e comem a largura antes dos links */
  .nav__links{
    position:absolute; top:100%; left:0; right:0; background:var(--ink-950);
    flex-direction:column; padding:16px 24px;
    display:none;
  }
  .nav__links.is-open{display:flex; animation:entra-lateral .3s var(--ease-out);}
  .nav__burger{display:flex;}
}
@media (max-width:720px){
  /* As tres regras .bench* que ficavam aqui sairam com o bloco .bench (ver a
     lapide dele, acima da .galeria). Elas faziam o print denso rolar na
     horizontal dentro da propria figura; hoje quem resolve isso e o
     ampliar: a .janela encolhe e quem quiser ler clica e abre no visor. */
  .grid--cats{grid-template-columns:1fr;}
  /* empilhado, um card por vez */
  .grid--plans{grid-template-columns:1fr;}
  /* no celular o plano recomendado aparece primeiro. A regra é amarrada em
     .plan--highlight, e não no nome do plano, para continuar valendo se o
     dono trocar qual dos dois é o destacado. */
  .grid--plans .plan--highlight{order:-1;}
  .mobile-cta.is-shown{
    display:flex;
    position:fixed; left:14px; right:14px; bottom:14px;
    z-index:60; justify-content:center;
    box-shadow:0 12px 30px rgba(0,0,0,.55);
  }
  .footer{padding-bottom:100px;}
  .hero__stats{gap:22px;}
  .modal-card{padding:32px 24px 26px;}
  .modal-specs{grid-template-columns:1fr;}
}