/* ============================================================================
   GIRO — componentes próprios desta landing, que o esqueleto do rgnt não tinha:
   a moldura de navegador em volta dos prints, os recortes de tela, os blocos de
   número, a seção de leitura-apenas, o FAQ e o grão sobre o 3D.

   Tudo aqui lê os tokens de styles.css. Nenhuma cor nova nasce neste arquivo.
   ============================================================================ */

/* ---- grão: 2,5% sobre TUDO. Tira o liso digital do degradê do 3D sem que
   ninguém consiga apontar o que mudou. Fixo e inerte ao ponteiro. ---- */
.grao{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E")}

/* ============================ PROVA: OS PRINTS ============================ */

/* A moldura de navegador. Existe por um motivo específico: sem ela, print de
   tela escura sobre fundo escuro flutua sem chão e parece maquete. Com a barra
   e o endereço, o cérebro lê "isto está no ar num navegador". */
.moldura{position:relative;border-radius:12px;overflow:hidden;background:#0b0f0e;
  border:1px solid rgba(31,42,34,1);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(126,217,168,.06);
  transform:perspective(2200px) rotateY(-5deg) rotateX(1.2deg);
  transform-origin:center center}
.moldura.reta{transform:none}
.moldura.espelhada{transform:perspective(2200px) rotateY(5deg) rotateX(1.2deg)}
.moldura-barra{display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:#121a17;border-bottom:1px solid rgba(126,217,168,.1)}
.moldura-bolas{display:flex;gap:6px;flex-shrink:0}
.moldura-bolas i{width:9px;height:9px;border-radius:50%;background:#2a3630;display:block}
.moldura-url{flex:1;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  background:#0e1513;border:1px solid rgba(126,217,168,.08);border-radius:6px;
  padding:4px 10px;text-align:center;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moldura-url b{color:var(--ink-dim);font-weight:500}
.moldura img{display:block;width:100%;height:auto}

/* Recorte sem moldura: para um pedaço de tela (uma fileira de indicadores, um
   painel). Aqui a moldura de navegador mentiria — não é a tela inteira. */
.recorte{position:relative;border-radius:10px;overflow:hidden;
  border:1px solid rgba(31,42,34,1);background:#0b0f0e;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85)}
.recorte img{display:block;width:100%;height:auto}

/* A legenda embaixo do print. Recorrente de propósito: é onde a honestidade do
   dado é dita em voz baixa, toda vez, em vez de virar uma seção que se lê uma
   vez só e se esquece. */
.legenda{display:flex;align-items:flex-start;gap:9px;margin:14px 2px 0;
  font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-faint);max-width:62ch}
.legenda svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;
  fill:none;stroke:var(--ink-faint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.legenda b{color:var(--ink-dim);font-weight:500}

/* Um argumento com print ocupando a largura toda (o print É o argumento).
   O cabeçalho de seção do esqueleto vinha centralizado; aqui ele alinha à
   esquerda, porque logo abaixo entra uma captura de tela alinhada à esquerda —
   título centrado sobre imagem alinhada faz a coluna parecer torta. */
.arg-largo .arg-head{text-align:left;max-width:none;margin-bottom:40px}
.arg-largo .arg-head h2{max-width:22ch;margin-bottom:16px}
.arg-largo .arg-head p{max-width:62ch;margin:0}
.arg-largo .prova{position:relative;z-index:2}
/* Âncora do menu não pode parar debaixo da topbar fixa. */
section[id]{scroll-margin-top:96px}

/* ======================== BLOCO DE NÚMERO (tipografia) ==================== */
/* Alterna com os prints: uma seção que é só palavra e algarismo, para a página
   respirar entre uma captura e a próxima. */
.numerao{display:flex;flex-direction:column;gap:6px}
.numerao .n{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(46px,7vw,86px);line-height:1;letter-spacing:-.04em;color:var(--gold);
  text-shadow:0 0 42px rgba(126,217,168,.22)}
.numerao .n small{font-size:.42em;letter-spacing:0;color:var(--ink-dim);margin-left:.18em;font-weight:500}
.numerao .rot{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-dim);max-width:34ch}
.numeros-linha{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:8px}
@media(max-width:760px){.numeros-linha{grid-template-columns:1fr;gap:28px}}

/* ===================== SEÇÃO "ELE SÓ LÊ. POR CONSTRUÇÃO." ================= */
/* Fundo próprio e borda em cima e embaixo: é a seção que precisa parar a
   rolagem, porque é a objeção que trava a venda. */
.leitura{position:relative;z-index:2;padding:104px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom,rgba(20,32,26,.42),rgba(14,17,19,.2))}
.leitura-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.leitura h2{font-family:var(--display);font-weight:var(--fw-display);font-size:clamp(30px,4.2vw,48px);
  line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin:0 0 20px}
.leitura p{font-size:18px;line-height:1.62;color:var(--ink-dim);margin:0 0 16px;max-width:48ch}
.selos{display:flex;flex-direction:column;gap:12px}
.selo{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:var(--radius);
  background:rgba(20,26,23,.62);border:1px solid var(--line)}
.selo svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;
  fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.selo b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px}
.selo span{font-size:14px;line-height:1.5;color:var(--ink-dim)}
@media(max-width:860px){
  .leitura{padding:76px 0}
  .leitura-in{grid-template-columns:1fr;gap:38px}
}

/* ================================== FAQ ================================== */
.faq{position:relative;z-index:2;padding:104px 0;border-top:1px solid var(--line-soft)}
.faq-in{max-width:840px;margin:0 auto;padding:0 24px}
.faq h2{font-family:var(--display);font-weight:var(--fw-display);font-size:clamp(28px,3.6vw,42px);
  line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin:0 0 36px}
.faq details{border-bottom:1px solid var(--line-soft);padding:0}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);
  pointer-events:auto;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease,border-color .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--gold)}
.faq details p{margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--ink-dim);max-width:64ch}
@media(max-width:560px){.faq{padding:76px 0}.faq summary{font-size:16px}}

/* =============================== FECHO =================================== */
/* O parágrafo de multi-empresa mora aqui, sem seção própria: mais de uma
   empresa é conforto de quem já entendeu o produto, não argumento de entrada. */
.fecho-nota{max-width:56ch;margin:26px auto 0;font-size:16px;line-height:1.62;color:var(--ink-dim)}

/* ======================== AJUSTES DO ESQUELETO ============================ */
/* O rgnt escondia a seleção de texto na página inteira. Numa landing em
   português que fala de dinheiro, alguém vai querer copiar um trecho para
   mandar ao sócio — e copiar é um ato de interesse, não um defeito. */
body{user-select:text;-webkit-user-select:text}
::selection{background:rgba(126,217,168,.24);color:var(--ink)}
::-moz-selection{background:rgba(126,217,168,.24);color:var(--ink)}
/* O texto continua deixando o ponteiro atravessar pro 3D; o print, não —
   ele é conteúdo, e conteúdo recebe o mouse. */
.prova,.moldura,.recorte,.legenda,.selo,.faq,.faq-in,details,summary{pointer-events:auto}

/* ========================= AJUSTES DE TELA ESTREITA ====================== */
@media(max-width:760px){
  /* Uma tela de 1440px inteira, reduzida a 340px de largura, é um borrão: não
     dá para ler número nenhum, e um print ilegível prova menos que nenhum. No
     celular a moldura passa a mostrar o MIOLO da tela — a área dos números —
     em vez da tela toda com a barra lateral comendo um terço. */
  .moldura img{aspect-ratio:5/4;object-fit:cover;object-position:74% top}
  .moldura{transform:none}
  .moldura.espelhada{transform:none}
  .recorte img{min-height:88px;object-fit:cover;object-position:left top}
  /* os pontinhos de seção não cabem numa tela estreita: viram borda pintada
     por cima do texto */
  .dots{display:none}
  .legenda{font-size:12.5px}
  .arg-largo .arg-head{margin-bottom:28px}
}

/* CTA primário na cor de ação, e não no verde de destaque de texto. */
.btn-primary{background:var(--cta);color:var(--ink-on-gold)}
.btn-primary:hover{background:var(--gold);transform:translateY(-2px)}
.nav-cta{background:var(--cta);color:var(--ink-on-gold)}
.nav-cta:hover{background:var(--gold-bright)}

/* Marca na topbar: o ponto depois do nome é o mesmo do app. */
.brand-name{text-transform:none;letter-spacing:.01em}
.brand-name i{color:var(--cta);font-style:normal}