/*
 * Ata — as três páginas públicas.
 *
 * ♻️ **O bloco de tokens DIVERGIU da Dashboard em 02/09/2026, de propósito.**
 * Ele nasceu cópia declarada do `:root` de `Dashboard_Oficial_Scope/app/
 * globals.css`; nessa data o produto ganhou identidade visual própria — o
 * logotipo **Scope REC** (`ScopeMeetGravador/material_de_apoio`: dourado e
 * laranja vivos sobre marrom-escuro) — e a rampa foi re-ancorada nas cores
 * dele. A Dashboard segue com a paleta dela; esta página tem a do produto.
 *
 * ⛔ **Tema único: ESCURO.** Decisão do dono em 02/09/2026 — a página não lê
 * `prefers-color-scheme` (a media query de tema foi removida daqui). A única
 * superfície clara que resta é a impressão (`--papel`), porque papel é papel.
 *
 * ⛔ Fora deste bloco não existe hex, `rgb()` nem `hsl()` literal; sombra fora
 * de `--sombra-1|2|3`; raio fora de `--r-*`; espaço fora de `--e-*`.
 */

/* ═══ 1. TOKENS — cópia de globals.css §1 ═══════════════════════════ */

:root {
  color-scheme: dark;

  /* Rampa da marca — re-ancorada em 02/09/2026 no logotipo oficial Scope REC:
     dourado→laranja, mais claro e mais vivo que a rampa antiga da Dashboard.
     O passo 450 segue sendo "o laranja da marca". */
  --lj-100: #FFEDCB;  --lj-150: #FFE3B1;  --lj-200: #FFD795;
  --lj-250: #FFCB79;  --lj-300: #FFBE5C;  --lj-350: #FFB03E;
  --lj-400: #FFA12C;  --lj-450: #FF921B;  --lj-500: #F28108;
  --lj-550: #DE7100;  --lj-600: #C66300;  --lj-650: #A95400;
  --lj-700: #8B4500;

  /* Neutros PUROS (R=G=B) — mantidos: a impressão e acentos mínimos os usam. */
  --n-0: #FFFFFF;   --n-25: #FBFBFB;  --n-50: #F6F6F6;  --n-75: #F3F3F3;
  --n-100: #EBEBEB; --n-200: #DFDFDF; --n-300: #C8C8C8;
  --n-500: #828282; --n-650: #555555; --n-900: #181818;

  /* Superfícies do ÚNICO tema: escuro, aquecido para o marrom do logotipo —
     os cinzas neutros do antigo tema escuro puxariam a página para longe
     da marca nova. */
  --fundo: #16100A;
  --sup: #1E1710;
  --sup-2: #251C13;
  --sup-3: #2D2317;
  --linha: #2B2115;
  --linha-fraca: #241B11;
  --linha-forte: #3D3020;

  --tinta: #F5EEE4;
  --tinta-2: #AFA294;
  --tinta-3: #8A7E6F;

  --marca: var(--lj-450);
  --marca-tinta: var(--lj-350);
  --marca-lav: rgba(255, 146, 27, 0.13);
  --marca-lav-2: rgba(255, 146, 27, 0.08);
  --marca-borda: rgba(255, 146, 27, 0.34);
  --acento-solido: var(--lj-450);
  --btn-p-fill: var(--lj-450);
  /* Texto ESCURO sobre o laranja — como o próprio logotipo faz. O branco
     antigo cairia para ~2,3:1 sobre o 450 novo; este marrom passa de 8:1. */
  --tinta-acento: #201104;
  --tinta-acento-min: var(--n-900);

  /* Status — fixo, nunca tematizado. Valores selecionados para fundo escuro. */
  --ok: #0CA30C;      --ok-lav: rgba(12, 163, 12, 0.14);     --ok-borda: rgba(12, 163, 12, 0.26);
  --aviso: #FAB219;   --aviso-lav: rgba(250, 178, 25, 0.13); --aviso-borda: rgba(250, 178, 25, 0.30);
  --serio: #EC835A;   --serio-lav: rgba(236, 131, 90, 0.13); --serio-borda: rgba(236, 131, 90, 0.30);
  --critico: #E66767; --critico-lav: rgba(230, 103, 103, 0.12); --critico-borda: rgba(230, 103, 103, 0.30);
  --info: #3987E5;    --info-lav: rgba(57, 135, 229, 0.12);  --info-borda: rgba(57, 135, 229, 0.28);

  /* Forma */
  --r-1: 8px; --r-2: 10px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-max: 999px;

  /* Espaço (passo 4px — só estes valores existem) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* Elevação — sombras dimensionadas para o fundo escuro. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* Movimento — três durações por DISTÂNCIA, duas curvas por DIREÇÃO. */
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms;
  --curva-entra: cubic-bezier(0, 0, 0.2, 1);
  --curva-sai: cubic-bezier(0.4, 0, 1, 1);
  --t: var(--t-1) var(--curva-entra);

  /* Tipografia */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --deco-op: 0.1;

  /* ─── Seções noturnas — as faixas com imagem/vídeo de fundo ────────
     A arte (hero, seção 2, seção 3, planos) é escura por construção. Com o
     tema único escuro estas faixas continuam tendo pele própria: mais fundas
     que o `--fundo`, e aquecidas no mesmo marrom do logotipo. */
  --noite: #140D07;
  --noite-tinta: #F7F1E9;
  --noite-tinta-2: rgba(247, 241, 233, 0.74);
  --noite-tinta-3: rgba(247, 241, 233, 0.52);
  --noite-linha: rgba(255, 255, 255, 0.12);
  --noite-linha-forte: rgba(255, 255, 255, 0.22);
  --noite-vidro: rgba(255, 255, 255, 0.06);
  --noite-vidro-2: rgba(255, 255, 255, 0.11);
  --noite-vidro-3: rgba(255, 255, 255, 0.16);
  --noite-veu: rgba(18, 11, 6, 0.42);
  --noite-veu-forte: rgba(18, 11, 6, 0.72);
  --noite-marca-vidro: rgba(255, 146, 27, 0.14);
  --noite-eco: rgba(255, 146, 27, 0.20);

  /* ─── O cartão de vidro ────────────────────────────────────────
     A identidade das referências de card: painel escuro sobre fundo
     escuro, com um FAROL da marca sangrando de dentro da aresta de baixo
     e um fio de luz na de cima. O corpo do cartão é mais escuro que a
     faixa, não mais claro — é isso que faz o farol ter de onde sair. */
  --noite-carta: #1D1409;
  --noite-carta-pe: #0E0906;
  /* A BRASA: o núcleo estourado, quase branco. É o que separa luz de mancha.
     ⚠️ A referência vermelha da pasta (Epixel) prova que o problema nunca foi
     a matiz quente — é o núcleo. Farol sem brasa vira névoa marrom. */
  --noite-brasa: rgba(255, 236, 206, 0.92);
  --noite-facho: rgba(255, 205, 150, 0.09);
  --noite-farol-nucleo: rgba(255, 176, 100, 0.55);
  --noite-farol: rgba(255, 146, 27, 0.46);
  --noite-farol-forte: rgba(255, 146, 27, 0.66);
  --noite-farol-2: rgba(255, 146, 27, 0.15);
  --noite-fio: rgba(255, 146, 27, 0.72);
  --noite-rim: rgba(255, 255, 255, 0.28);

  /* ─── Impressão — a única superfície que não tem tema ──────────────
     A política de privacidade vai ser impressa e anexada, e papel é branco
     com tinta preta independentemente de o navegador estar no tema escuro:
     usar `--sup`/`--tinta` aqui imprimiria uma página preta. Estes três
     valores existem como token para a regra de ouro continuar inteira —
     hex literal só neste bloco, sem exceção. */
  --papel: #FFFFFF;
  --tinta-papel: #000000;
  --linha-papel: #999999;
}

/* ─── Tema ───────────────────────────────────────────────────────────
   ♻️ A media query `prefers-color-scheme` que vivia aqui foi REMOVIDA em
   02/09/2026 por decisão do dono: o site é sempre escuro. Os valores que ela
   trazia subiram para o `:root` acima (aquecidos para a marca Scope REC) e
   não existe mais tema claro para o navegador escolher. */

/* ═══ 2. BASE ═══════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth }
/* ⚖️ Encurtar a duração NÃO basta: uma animação `infinite` de 0,01ms vira um
   estrobo — a seta da abertura piscava a cada quadro em vez de parar. Por
   isso a contagem também cai para 1: a animação roda uma vez, instantânea,
   e fica no estado final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--fonte);
  /* 16px, não os 13px da Dashboard: aquele número é de painel denso, lido de
     perto e todo dia. Isto é texto corrido que alguém lê uma vez. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--marca-tinta); text-decoration: underline; text-underline-offset: 2px }
a:hover { color: var(--marca) }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--r-1) }
::selection { background: var(--marca-lav); color: var(--marca-tinta) }
img { max-width: 100%; height: auto; display: block }
strong { font-weight: 600 }

code, kbd, .mono {
  font-family: var(--fonte-mono);
  font-size: 0.875em;
}

/* ═══ 3. ESTRUTURA ══════════════════════════════════════════════════ */

/* ⛔ `padding-inline`, não o shorthand `padding`: a mesma caixa recebe o
   respiro vertical da regra de `section` abaixo, e o shorthand aqui — por
   ter especificidade de classe — zerava aquele padding em TODA seção.
   Era o defeito que deixava a página sem ar entre as faixas. */
.faixa { padding-inline: var(--e-5) }
.miolo { max-width: 880px; margin: 0 auto }
.miolo-largo { max-width: 1100px; margin: 0 auto }
.miolo-estreito { max-width: 680px; margin: 0 auto }

/* O ar é o material principal de uma página de venda. Aperta no celular,
   onde a tela já é o limite.
   ⛔ `section` só existe no index — política e termos usam `article.doc`. */
section { padding-block: clamp(64px, 11vw, 132px) }

/* ─── A faixa de tela cheia ─────────────────────────────────────────
   90% da tela, com o conteúdo centrado: a faixa é lida como UMA coisa, em
   vez de o olho pegar meia seção e o começo da seguinte.

   ⛔ É uma CLASSE, e não a regra de `section`, porque a altura fixa só serve
   a quem tem o que pôr nela. Aplicada a todas, o fecho (um título, um botão)
   e a FAQ (seis linhas fechadas) ganhavam 300px de branco embaixo do
   conteúdo — o remédio do vão virava a doença. Ganham a marca as faixas de
   impacto: as duas declarações, os pilares, os recursos e os planos.

   `svh`, não `vh`: no celular `100vh` conta a barra do navegador que some ao
   rolar, e a seção nasce mais alta do que a tela. É `min-height`, então
   conteúdo maior continua crescendo à vontade. */
.secao-alta {
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* A barra é fixa: sem isto o link de âncora para a seção sob a barra. */
section[id] { scroll-margin-top: 72px }

/* ─── A entrada de cada faixa ───────────────────────────────────────
   O conteúdo sobe e aparece quando a seção entra na tela. É o que transforma
   rolagem em passagem: sem isto, com as seções em 90svh, cada faixa nova
   chega inteira e pronta, e a troca vira um pisca-pisca.

   ⚖️ A classe nasce pelo SCRIPT, não no HTML: sem JavaScript o `.revela` nunca
   é posto, e a página fica visível como sempre foi, em vez de ficar em branco
   — que é como esse efeito costuma quebrar. */
.revela {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 760ms var(--curva-entra), transform 760ms var(--curva-entra);
  will-change: opacity, transform;
}
.revela.visivel { opacity: 1; transform: none; will-change: auto }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none }
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; font-weight: 600 }
h1 { font-size: 2.25rem }
h2 { font-size: 1.5rem; margin-bottom: var(--e-3) }
h3 { font-size: 1.0625rem; margin-bottom: var(--e-2) }
p { margin-bottom: var(--e-4) }
p:last-child { margin-bottom: 0 }

/* ─── Tipo de display — a escala que carrega a página de venda ──────
   `clamp()` em vez de ponto de quebra: o título de abertura precisa ser
   grande no monitor e continuar legível em 360px, e um degrau fixo entre
   os dois sempre erra a largura de alguém. */
.d1 {
  font-size: clamp(2.5rem, 7.2vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.d2 {
  font-size: clamp(1.875rem, 4.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
.d3 {
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
/* A linha que segue um display. Grande, cinza, curta. */
.apoio {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.centro { text-align: center }
.centro .apoio { margin-inline: auto }

.chapeu {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: var(--e-2);
}


.miudinho { font-size: 0.8125rem; color: var(--tinta-3) }

/* ═══ 4. TOPO ═══════════════════════════════════════════════════════ */

/* ⚖️ `fixed`, não `sticky`: com `sticky` a barra ocupa lugar no fluxo e empurra
   a abertura para baixo — a arte começaria embaixo de uma faixa opaca, e a
   primeira tela perderia a altura da barra. Fora do fluxo, o vídeo começa no
   pixel zero e a barra flutua por cima. Não há preço a pagar em vão de topo:
   as três páginas abrem com faixa noturna, e é o respiro dela que acomoda a
   barra — na home o vídeo, na política e nos termos a `.doc-abertura`. */
.topo {
  position: fixed; inset-inline: 0; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
  transition: background var(--t-3) var(--curva-entra),
              border-color var(--t-3) var(--curva-entra),
              backdrop-filter var(--t-3) var(--curva-entra);
}
.topo-corpo {
  position: relative;
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-3) 0;
  min-height: 60px;
}

/* ─── A barra sobre a abertura ──────────────────────────────────────
   Enquanto a página não rolou, a barra é invisível: nenhum vidro, nenhuma
   linha, só o texto claro flutuando sobre o vídeo. O que garante a leitura
   é um scrim curto que morre em degradê — uma faixa chapada aqui é
   exatamente o corte que a abertura em tela cheia existe para não ter.
   A classe `rolado` (posta pelo script) devolve o vidro. */
.topo-heroi:not(.rolado) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color-scheme: dark;
  --tinta: var(--noite-tinta);
  --tinta-2: var(--noite-tinta-2);
  --tinta-3: var(--noite-tinta-3);
  --marca-tinta: var(--lj-300);
  color: var(--tinta);
}
.topo-heroi::before {
  content: ""; position: absolute; inset: 0 0 -40px; pointer-events: none;
  background: linear-gradient(180deg, var(--noite-veu-forte) 0%, transparent 100%);
  transition: opacity var(--t-3) var(--curva-entra);
}
.topo-heroi.rolado::before { opacity: 0 }

/* O recuo de âncora dos títulos que o sumário aponta — a barra é fixa e sem
   isto o título para embaixo dela. */
.doc [id] { scroll-margin-top: 84px }
.marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta) }
.marca:hover { color: var(--tinta) }
/* ♻️ 02/09/2026: a marca deixou de ser ícone 28px + nome em texto e virou o
   logotipo completo Scope REC (arquivo já recortado e em 2x para retina). */
.marca img { height: 40px; width: auto; border-radius: 0 }
.marca-nome { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2 }
.marca-sub { font-size: 0.6875rem; color: var(--tinta-3); line-height: 1.2 }

.topo-nav { margin-left: auto; display: flex; align-items: center; gap: var(--e-5) }
/* ⛔ `:not(.btn)` não é preciosismo: `.topo-nav a` tem especificidade maior que
   `.btn-p`, então sem isto o botão da barra perde a cor de marca e vira link
   cinza — o único botão que a pessoa vê antes de rolar. */
.topo-nav a:not(.btn) {
  font-size: 0.875rem; color: var(--tinta-2); text-decoration: none;
  transition: color var(--t);
}
.topo-nav a:not(.btn):hover { color: var(--tinta) }
.topo-nav .btn { padding: var(--e-2) var(--e-5); min-height: 38px; font-size: 0.875rem }

/* ⛔ A barra NÃO quebra em duas linhas: sendo fixa, a segunda linha come tela
   em toda rolagem, no aparelho onde a tela já é o limite. Aperta o vão
   primeiro; quando nem isso cabe, a barra vira marca + um botão — quatro
   links empurrariam a promessa para fora da primeira tela, que é onde ela
   precisa estar. */
@media (max-width: 860px) {
  .topo-nav { gap: var(--e-4) }
}
@media (max-width: 680px) {
  .topo-nav a:not(.btn) { display: none }
  .topo-corpo { min-height: 54px }
  section[id] { scroll-margin-top: 60px }
}

/* ═══ 5. ABERTURA ═══════════════════════════════════════════════════ */

/* ─── O escopo noturno ──────────────────────────────────────────────
   As faixas com arte escura remapeiam os tokens padrão: todo componente
   que vive dentro delas (botão, chapéu, cartão) muda de pele sem regra
   própria. */
.heroi-secao, .declaracao-imagem, .pilares-secao, .cartoes-secao, .planos-secao,
.doc-abertura {
  color-scheme: dark;
  --tinta: var(--noite-tinta);
  --tinta-2: var(--noite-tinta-2);
  --tinta-3: var(--noite-tinta-3);
  --linha: var(--noite-linha);
  --linha-forte: var(--noite-linha-forte);
  /* ⛔ `--linha-fraca` FALTAVA aqui, e o efeito não era um cinza um pouco
     errado: no tema claro ela vale `--n-50`, quase branco, e desenhava um
     filete aceso entre as linhas do painel dentro dos cartões escuros.
     Todo token de linha usado por um componente que vive nas faixas
     noturnas precisa ser remapeado — senão ele volta ao valor do tema. */
  --linha-fraca: var(--noite-vidro);
  --sup: var(--noite-vidro);
  --sup-2: var(--noite-vidro);
  --sup-3: var(--noite-vidro-2);
  --marca-tinta: var(--lj-300);
  color: var(--tinta);
  background-color: var(--noite);
}

/* A abertura é a tela inteira: a arte só funciona como arte quando não divide
   a primeira dobra com a seção seguinte. `svh` pelo mesmo motivo da regra de
   `section` — no celular `100vh` é maior que a tela visível, e o botão cairia
   abaixo da borda. */
.heroi-secao {
  position: relative; overflow: hidden; padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid; align-items: center;
}
.heroi-midia { position: absolute; inset: 0 }
.heroi-midia img,
.heroi-midia video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* O vídeo nasce invisível SOBRE a imagem e só aparece quando consegue tocar
   (classe `pronto`, posta pelo script). O crossfade lento é o que faz a troca
   passar despercebida. */
.heroi-midia video { opacity: 0; transition: opacity 1600ms var(--curva-entra) }
.heroi-midia video.pronto { opacity: 1 }
/* ⚖️ O véu termina em `--noite` CHAPADO, não no véu translúcido: é o último
   pixel da abertura encostando no primeiro da seção seguinte. Enquanto ali
   ainda houvesse imagem, a emenda entre as duas era uma linha visível — o
   corte que aparecia na captura. Agora as duas faixas se encontram na mesma
   cor sólida e a costura some. */
.heroi-veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--noite-veu-forte) 0%,
    var(--noite-veu) 34%,
    var(--noite-veu-forte) 84%,
    var(--noite) 100%);
}

/* O respiro de cima é maior que o de baixo pela altura da barra flutuante:
   com os dois iguais, o texto centralizado nasce visualmente baixo. */
.heroi {
  position: relative;
  padding: clamp(112px, 16vh, 176px) 0 clamp(72px, 11vh, 128px);
  text-align: center;
}
.heroi .d1 { margin-bottom: var(--e-5) }
.heroi .apoio { margin: 0 auto var(--e-6) }

/* A seta do pé da abertura: diz que existe página abaixo da dobra sem gastar
   uma linha de texto para isso. */
.heroi-desce {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 36px);
  translate: -50% 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--noite-tinta-3);
  opacity: 0.7;
  /* ease-in-out, não a curva de entrada: com ease-out a seta saltava no
     começo de cada ciclo e parecia piscar. Simétrica, ela só respira. */
  animation: respira 3200ms ease-in-out infinite;
}
.heroi-desce svg { width: 20px; height: 20px }
@keyframes respira {
  0%, 100% { transform: translateY(0); opacity: 0.55 }
  50%      { transform: translateY(6px); opacity: 1 }
}
/* Com menos movimento, a seta fica parada — sem estrobo, sem sumir. */
@media (prefers-reduced-motion: reduce) {
  .heroi-desce { animation: none }
}

/* Camada decorativa — ornamento vive ATRÁS, nunca entre o olho e o texto. */
.brilho {
  position: absolute; pointer-events: none; z-index: -1;
  width: min(900px, 130vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--lj-450) 0%, transparent 66%);
  filter: blur(100px);
  opacity: var(--deco-op);
  top: -55%; left: 50%; translate: -50% 0;
}


/* ─── Faixas noturnas encostadas ────────────────────────────────────
   Entre duas faixas claras a troca de cor marca a divisão, e o respiro de
   cada uma se lê como ar. Entre duas NOTURNAS não há troca nenhuma: os dois
   respiros somam 264px de preto liso, que o olho lê como buraco na página —
   era o vão entre os recursos e os planos. Encostadas, uma empresta o
   respiro da outra.
   ⛔ A abertura fica de fora: ela tem `padding: 0` de propósito (a arte é a
   faixa inteira), e esta regra, mais específica, devolveria o respiro que
   aquela linha existe para tirar. */
.faixa-noite + .faixa-noite { padding-top: clamp(48px, 6vw, 80px) }
.faixa-noite:not(.heroi-secao):has(+ .faixa-noite) { padding-bottom: clamp(48px, 6vw, 80px) }

/* ═══ 5b. SEÇÕES DE VENDA ═══════════════════════════════════════════ */

/* A declaração: uma frase, muito ar, nada em volta. É o lugar onde a página
   para de listar e afirma. Usada no máximo duas vezes — a terceira anula as
   duas primeiras. */
.declaracao { background: var(--sup); border-block: 1px solid var(--linha) }
.declaracao .d2 { margin-bottom: var(--e-5) }

/* A declaração com imagem: a arte cobre a faixa inteira, um véu garante o
   contraste do texto, e o conteúdo sobe uma camada.

   ⚖️ A arte NÃO fica no fundo da seção — fica numa camada própria (`::before`)
   junto com o véu, para poder ser DISSOLVIDA nas bordas por uma máscara. Uma
   foto encostando de topo na faixa vizinha desenha uma linha reta que o olho
   lê como corte; dissolvida, ela vira o preto chapado da faixa e a emenda
   deixa de existir. Foi por isso que o véu virou camada de gradiente dentro
   do `::before`: a máscara precisa apagar arte e véu juntos. */
.declaracao-imagem {
  position: relative; overflow: hidden;
  border-block: none;
  background-color: var(--noite);
  padding: clamp(96px, 14vw, 176px) var(--e-5);
}
.declaracao-imagem::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
}
.declaracao-privacidade::before {
  background-image: linear-gradient(var(--noite-veu), var(--noite-veu)),
                    url("assets/images/secao-02.jpg");
}
/* ♻️ 02/09/2026: o véu desta seção subiu de `--noite-veu` (42%) para o forte
   (72%) — a esfera clara da arte competia com o texto "Ilimitado de verdade"
   e a leitura sofria. A arte continua lá; agora é fundo, não concorrente. */
.declaracao-gratis::before {
  background-image: linear-gradient(var(--noite-veu-forte), var(--noite-veu-forte)),
                    url("assets/images/secao-03.jpeg");
}
.declaracao-imagem > * { position: relative; z-index: 1 }

/* ⛔ `secao-03.jpeg` é 720×1080 — RETRATO, e o desenho é uma esfera inteira
   sobre preto. Numa faixa larga, `cover` amplia a imagem 1,8× só para ela
   encostar nas laterais, e do desenho sobra a fatia central esticada em
   listras. Era por isso que a mesma imagem ficava certa no celular (a tela
   tem quase a proporção dela) e horrível no monitor.

   A partir daqui ela para de PREENCHER e passa a ser um OBJETO: largura
   presa à do texto, sem repetição, e a máscara elíptica dissolvendo a esfera
   no preto da faixa nos quatro lados — o mesmo papel de halo atrás do texto
   que ela faz no celular. Abaixo de 821px continua `cover`, que é onde
   `cover` acerta. */
@media (min-width: 821px) {
  .declaracao-gratis {
    /* Uma medida só, usada pela imagem E pela máscara. ⛔ Se as duas forem
       escritas à mão, a máscara deixa de bater com a borda da arte e volta a
       aparecer o retângulo — foi o primeiro corte desta seção. */
    --arte-l: clamp(600px, 60vw, 900px);
  }
  .declaracao-gratis::before {
    background-size: 100% 100%, var(--arte-l) auto;
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(ellipse calc(var(--arte-l) * 0.5) 54% at 50% 50%, black 24%, transparent 100%);
    mask-image: radial-gradient(ellipse calc(var(--arte-l) * 0.5) 54% at 50% 50%, black 24%, transparent 100%);
  }
}

/* ─── A solda entre a noite e o dia ─────────────────────────────────
   Faixa escura encostando em faixa clara é o único corte que a máscara acima
   não resolve — ali não há foto para dissolver, há duas cores chapadas se
   encontrando. Estes 128px levam uma na outra. O degradê é em PIXEL, não em
   porcentagem: em porcentagem, uma seção alta ganharia uma rampa de meia tela
   e a solda viraria vinheta.

   ⚖️ Sobrou UMA emenda na página — planos → FAQ. As outras sumiram quando os
   pilares viraram faixa noturna: de lá para cá a página é escura da abertura
   até os planos, e não há mais dia encostando em noite no meio dela. A metade
   `-topo` do par saiu junto: código sem uso não fica de reserva. */
.emenda-pe { position: relative }
.emenda-pe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(to top, var(--fundo), transparent 128px);
}
.emenda-pe > * { position: relative; z-index: 1 }
.declaracao .remate {
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -0.02em;
  max-width: 30ch; margin: var(--e-8) auto 0;
  color: var(--marca-tinta);
  text-wrap: balance;
}

/* ═══ 5a-bis. O CARTÃO DE VIDRO ═════════════════════════════════════
   Uma identidade só, herdada pelos pilares E pelos recursos.

   ⚖️ Estrutura e tratamento das referências de card, cor da marca — o mesmo
   trato do resto do arquivo. Das referências vêm cinco coisas, e são elas
   que separam um cartão desenhado de um retângulo com borda:

     1. **O corpo é mais ESCURO que a faixa**, não mais claro. Um cartão
        clarinho sobre preto é um adesivo; escuro, ele é um recorte com
        profundidade — e é o que dá de onde o farol sair.
     2. **O farol**: a luz da marca nasce colada na aresta de baixo, por
        dentro, e sobe morrendo até a metade. É o traço mais definidor das
        referências e o que faz o cartão parecer aceso, não pintado.
     3. **O fio de cima**: 1px de luz especular na aresta superior. É o que
        dá a leitura de vidro — sem ele o painel fica fosco.
     4. **Grão**: uma película de ruído sobre tudo. Degradê grande em tela
        boa faz bandeamento; o grão o esconde e é metade do ar "premium".
     5. **Sombra funda**, para o cartão pousar sobre a faixa em vez de
        estar colado nela.

   ⛔ O `overflow: hidden` é estrutural: o farol é maior que o cartão de
   propósito, para a luz chegar às arestas já com força. Sem o corte, ele
   vaza para fora do raio e o cartão perde o contorno. */

.cartao-vidro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--e-4);
  border: 1px solid var(--noite-linha);
  border-radius: var(--r-5);
  padding: var(--e-8) var(--e-6) var(--e-10);
  background:
    /* grão */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.09'/%3E%3C/svg%3E"),
    /* vidro: claro no topo, morrendo no primeiro terço */
    linear-gradient(180deg, var(--noite-vidro-2) 0%, transparent 38%),
    /* corpo */
    linear-gradient(180deg, var(--noite-carta) 0%, var(--noite-carta-pe) 100%);
  /* ⚖️ Duas camadas: a sombra de elevação (token) e o DERRAME do farol para
     fora do cartão. Nas referências a luz não para na borda — ela mancha o
     fundo em volta, e é isso que faz o cartão parecer emitir em vez de
     estar pintado. O segundo valor é brilho, não elevação. */
  box-shadow: var(--sombra-3), 0 28px 60px -30px var(--noite-farol);
  transition: transform var(--t-3) var(--curva-entra),
              border-color var(--t-3) var(--curva-entra);
}

/* O farol. Fica ATRÁS do conteúdo (`z-index: -1` dentro do `isolation` do
   cartão), senão ele lava o texto que passa por cima dele. */
.cartao-vidro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* 1. A BRASA — quase branca, colada na aresta. ⛔ LARGA e BAIXA (62% de
       largura por 7% de altura), não redonda: redonda ela vira um borão
       branco no meio do pé do cartão; achatada, lê-se como a aresta em si
       estar acesa, que é o que as referências fazem. */
    radial-gradient(62% 7% at 50% 100%, var(--noite-brasa) 0%, transparent 74%),
    /* 2. O corpo do farol subindo */
    radial-gradient(126% 54% at 50% 105%,
      var(--farol-corpo, var(--noite-farol)) 0%,
      var(--noite-farol-2) 40%,
      transparent 74%),
    /* 3. O FACHO — a luz tem uma direção, sempre a mesma na página: entra
       pelo canto superior direito e atravessa. Sem ela os cartões repetem o
       mesmo carimbo simétrico e a fileira lê-se como degradê, não como
       cena iluminada. */
    linear-gradient(214deg, var(--noite-facho) 0%, transparent 46%);
}

/* Os dois fios de luz: o especular em cima, o farol acendendo a aresta de
   baixo. Ficam POR CIMA de tudo — é luz na superfície do vidro, não atrás
   dela — e o `pointer-events: none` impede que roubem o clique. */
.cartao-vidro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    /* ⛔ Os dois fios são RADIAIS, não lineares: nas referências a luz da
       aresta é mais forte no meio e morre nos cantos. Uma linha reta de
       ponta a ponta desenha uma moldura, e moldura é o oposto de luz. */
    radial-gradient(72% 1px at 50% 0%, var(--noite-rim) 0%, transparent 100%),
    radial-gradient(58% 3px at 50% 100%, var(--noite-fio) 0%, transparent 100%);
}

/* Levanta um degrau no cursor. Não é `box-shadow` animada de propósito:
   animar sombra repinta o cartão inteiro a cada quadro; `transform` não. */
@media (hover: hover) {
  .cartao-vidro:hover { transform: translateY(-3px); border-color: var(--marca-borda) }
}

/* A pastilha do ícone, acesa por dentro. ⚖️ `box-shadow` aqui é BRILHO, não
   elevação — o mesmo uso que `.cartao-icone` já fazia antes desta seção
   existir, e o motivo de a regra de `--sombra-*` não valer para ele. */
.cartao-icone, .pilar-icone {
  flex: none; width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-3);
  border: 1px solid var(--marca-borda);
  background: linear-gradient(180deg, var(--noite-marca-vidro), transparent),
              var(--noite-vidro);
  color: var(--marca-tinta);
  box-shadow: 0 0 24px var(--noite-marca-vidro), inset 0 1px 0 var(--noite-rim);
}
.cartao-icone svg, .pilar-icone svg { width: 24px; height: 24px }

/* O pé do cartão: o desenho pousa DENTRO do farol, sem filete separando.
   ⛔ A linha divisória saiu de propósito — nas referências não existe
   nenhuma: quem separa o texto do desenho é a própria luz subindo. Um
   filete ali por cima do farol é a marca da versão "quase".

   ⚖️ E com ela fora, o pé pôde deixar de ser empurrado por `margin-top: auto`
   e passar a CRESCER (`flex: 1`). Era o filete que obrigava os desenhos a
   começarem todos na mesma altura; sem ele, o desenho ocupa o vão em vez de
   ficar encostado embaixo dele — que era a faixa morta no meio do cartão. */
.cartao-visual {
  padding-top: var(--e-4);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--e-4);
}
/* ⛔ `justify-content: flex-end`, e o desenho com ALTURA IGUAL nos cartões
   irmãos, é o que mantém número e desenho na mesma linha entre eles. Com o
   desenho crescendo livre (`flex: 1` no `.pilar-arte`), cada cartão dá uma
   sobra diferente ao seu — e os três números grandes saem desalinhados, que
   numa fileira de três é a primeira coisa que o olho pega.
   Nos recursos o mockup PODE crescer: ali ele é um painel, e a fileira já
   tem altura igual por `align-items: stretch`. */
.cartao-visual > .mocape, .cartao-visual > .arvore { flex: 1 }

/* ⛔ `> .mocape`, e não `.mocape`, porque até agora o mockup ERA o próprio
   `.cartao-visual` (as duas classes no mesmo elemento). Com a caixa virando
   flex-column, as regras de flex batiam de frente com a grade do mockup: as
   linhas da transcrição encolhiam e iam para a direita do cartão. O mockup
   passou a viver DENTRO da caixa, que é o que também permite ele ganhar
   painel de vidro próprio. */
.cartao-visual .mocape-botao { width: 100%; margin-top: var(--e-2) }

/* Os mockups dentro do cartão ganham corpo próprio: vidro sobre vidro, com
   a aresta de cima acesa igual à do cartão. Sem isto eles flutuam soltos no
   farol e o cartão volta a parecer uma lista. */
.cartao-visual .mocape,
.cartao-visual .arvore {
  background: var(--noite-vidro);
  border: 1px solid var(--noite-linha);
  border-radius: var(--r-4);
  padding: var(--e-4);
}

/* ═══ 5b-bis. OS PILARES ════════════════════════════════════════════
   Três cartões de vidro altos — a forma vem de `.cartao-vidro`; aqui fica
   só a grade e o que é do pilar.

   ⚖️ A faixa é NOTURNA desde que os cartões ganharam o farol. Não é gosto:
   um cartão escuro com luz saindo da aresta só existe sobre fundo escuro —
   sobre o branco do tema claro ele vira um borrão cinza. O preço é a página
   ficar escura da abertura até os planos, e o claro voltar na FAQ; o ganho
   é a página ter UMA identidade de cartão em vez de duas.

   ⛔ Isto existe porque a faixa passou a ter 90svh e três linhas de texto
   soltas no meio de uma tela inteira viravam buraco. O cartão é o que faz a
   altura ser OCUPADA em vez de sobrar. */

/* A corrente que estica: seção (coluna flex) → miolo → grade → cartão. Se
   qualquer elo parar de esticar, os cartões voltam a flutuar no meio da
   faixa e o vão volta com eles. */
/* A faixa não é preto chapado: duas luzes fracas nos cantos dão profundidade
   ao fundo, e é sobre elas que os cartões pousam. Mesmo tratamento da faixa
   de recursos. */
.pilares-secao { position: relative; overflow: hidden }
.pilares-secao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 500px at 8% 6%, var(--noite-marca-vidro), transparent 70%),
    radial-gradient(760px 560px at 94% 96%, var(--noite-marca-vidro), transparent 70%);
}
.pilares-secao > .miolo-largo { position: relative; flex: 1; display: flex; flex-direction: column }
/* ⚠️ SUBGRID, e é ele que mata o vão dentro do cartão.
   As quatro linhas (título → texto → número → desenho) são definidas AQUI,
   na grade das três colunas, e cada cartão só se pendura nelas. Duas coisas
   saem de graça disso:

     1. A linha do desenho é `1fr` — ela absorve TODA a sobra do cartão. Antes,
        o bloco de baixo tinha altura fixa e ficava ancorado no pé, então a
        sobra se acumulava entre o texto e o número: era o buraco no meio dos
        três cartões.
     2. As linhas são COMPARTILHADAS, então os três números grandes alinham
        sozinhos mesmo com parágrafos de alturas diferentes. Era isso que antes
        obrigava a altura fixa — a troca que agora não precisa existir. */
.pilares {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--e-5);
  row-gap: var(--e-4);
  align-items: stretch;
  min-height: min(560px, 62vh);
}
.pilar { grid-row: span 4; display: grid; grid-template-rows: subgrid }

/* Empilhado, o subgrid não serve: as linhas da mãe passariam a valer para os
   três cartões em sequência, e o `1fr` deixaria de ser o desenho de cada um. */
@media (max-width: 820px) {
  .pilares { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0 }
  .pilar { grid-row: auto; display: flex; flex-direction: column; gap: var(--e-4) }
  .pilares-secao > .miolo-largo { display: block }
}
/* Sem subgrid, o cartão volta a ser a coluna flex de sempre: o vão reaparece,
   mas nada quebra. */
@supports not (grid-template-rows: subgrid) {
  .pilares { grid-template-rows: none }
  .pilar { grid-row: auto; display: flex; flex-direction: column; gap: var(--e-4) }
}

.pilar-topo { display: flex; align-items: center; gap: var(--e-4) }
.pilar h3 { font-size: 1.0625rem; margin-bottom: 0 }
/* ⛔ `:not(.pilar-valor)` é obrigatório, não estilo. `.pilar p` tem
   especificidade (0,1,1) e `.pilar-valor` tem (0,1,0) — sem a exclusão, a
   regra da descrição vence e o número grande do cartão sai em 15px cinza.
   Toda regra de descendente que mira uma TAG precisa desviar das classes que
   vivem naquela tag. */
.pilar p:not(.pilar-valor) { font-size: 0.9375rem; color: var(--tinta-2) }

/* O número é o herói do cartão, como nas referências: BRANCO com um halo
   quente, não laranja. Quem carrega a marca ali é o farol subindo por trás;
   pintar o número de laranja também põe os dois competindo, e o número
   perde — ele é texto, o farol é luz. */
.pilar-valor {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  color: var(--noite-tinta);
  text-shadow: 0 0 28px var(--noite-farol-2);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}
/* ⛔ `min-height` igual nos três: sem ele cada desenho tem a sua altura, e
   como o bloco do pé é empurrado por `margin-top: auto`, as três linhas
   divisórias param em alturas diferentes. Três cartões lado a lado com o
   filete em três alturas é o tipo de desalinho que se lê como descuido. */
.pilar-arte {
  display: flex; flex-direction: column; justify-content: stretch;
  padding-top: var(--e-3);
  gap: var(--e-3);
  /* Alto o bastante para o desenho valer como desenho: com 96px sobrava um
     vão morto entre o texto e o pé do cartão — o mesmo defeito, em escala
     menor, que fez esta seção ser refeita. */
  min-height: clamp(190px, 29vh, 300px);
}

/* ═══ 9b. AS ILUSTRAÇÕES DOS PILARES ═══════════════════════
   ⚠️ O que estava aqui antes eram três desenhos feitos de `<span>` com borda:
   pastilhas tracejadas, dezesseis retângulos chapados e dois chips ligados
   por um pontilhado. Aquilo era WIREFRAME dentro de uma moldura cara — e era
   a razão real de a página não parecer as referências, muito mais do que
   qualquer ajuste de brilho na borda do cartão.

   Nas cinco referências da pasta, o miolo do cartão é sempre uma PEÇA
   RENDERIZADA: gráfico com grade, eixo e balão de valor; anel concêntrico com
   nós acesos; objeto em perspectiva com a luz saindo dele. Nunca uma lista de
   caixinhas. Estes três SVG são isso, na paleta da marca:

     • o clique  → superfície em perspectiva, ondas do toque e o botão
                    emitindo luz (linguagem do zadriel e do Epixel);
     • os 64 MB  → curva de acúmulo sobre grade, com o ponto do dado que
                    importa aceso e o balão saindo dele (linguagem do 8bba);
     • o zero    → órbitas concêntricas, o caminho passando por FORA e o
                    centro vazio onde estaria o servidor (linguagem da
                    Captura de referência).

   ⚠️ Regra que vale para os três: quem brilha é o ASSUNTO — o botão, o ponto
   do gráfico, o nó — e não a moldura. Farol na borda do cartão decora a
   caixa; luz saindo do objeto é o que faz a cena. */

.arte-svg { display: block; width: 100%; height: 100%; overflow: visible }
/* ⛔ O quadro do desenho tem de ter a PROPORÇÃO do `viewBox`, senão o SVG
   encaixota: sobra faixa vazia em cima e o assunto sai pequeno demais para
   ser o assunto. Foi o que aconteceu na primeira volta destes três. */
.pilar-arte { min-height: 168px; margin-inline: calc(var(--e-2) * -1) }
.pilar-arte { position: relative }

/* O balão de valor do gráfico — o `$53,210` da referência. Vidro sobre o
   desenho, ancorado no ponto aceso. */
.arte-balao {
  position: absolute; left: 70%; top: 8%; translate: -50% 0;
  font-family: var(--fonte-mono); font-size: 0.6875rem; font-weight: 600;
  color: var(--noite-tinta); white-space: nowrap;
  background: var(--noite-vidro-3);
  border: 1px solid var(--marca-borda); border-radius: var(--r-max);
  padding: var(--e-1) var(--e-3);
  box-shadow: 0 0 22px var(--noite-marca-vidro);
}
.arte-eixo {
  position: absolute; inset: auto 0 0; display: flex; justify-content: space-between;
  font-family: var(--fonte-mono); font-size: 0.625rem; color: var(--tinta-3);
}
.arte-eixo em { font-style: normal }

/* Os rótulos dos nós da órbita. Ficam presos às coordenadas do SVG — por
   isso em porcentagem, e não em pixel: o desenho escala com o cartão. */
.arte-marca {
  position: absolute;
  font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
  color: var(--noite-tinta);
}
.arte-marca-e { left: 0; top: 66% }
.arte-marca-d { right: 0; top: 66% }
.arte-marca-c {
  left: 50%; top: 56%; translate: -50% 0;
  font-family: var(--fonte-mono); font-weight: 400; color: var(--tinta-3);
}

/* ═══ 5c. RECURSOS ════════════════════════════════════════
   Quatro cartões com a mesma forma dos pilares — `.cartao-vidro`. Aqui fica
   só a grade e o que é do recurso. */

/* Mesmo subgrid dos pilares, pelo mesmo motivo — aqui são quatro linhas por
   cartão (título, texto, nota, mockup) e DUAS fileiras de cartões, daí o
   `repeat(2, ...)`: sem ele a segunda fileira fica sem o `1fr` e volta a ter
   buraco. */
.cartoes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto auto auto 1fr);
  column-gap: var(--e-5);
  row-gap: var(--e-5);
  align-items: stretch;
}
.cartao { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--e-4) }
@media (max-width: 900px) {
  .cartoes { grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
  .cartao { grid-row: auto; display: flex; flex-direction: column; gap: var(--e-4) }
}
@supports not (grid-template-rows: subgrid) {
  .cartoes { grid-template-rows: none }
  .cartao { grid-row: auto; display: flex; flex-direction: column; gap: var(--e-4) }
}

.cartao-topo { display: flex; align-items: center; gap: var(--e-4) }
.cartao-topo .chapeu { margin-bottom: var(--e-1) }
.cartao-titulo { font-size: 1.1875rem; margin-bottom: 0 }
.cartao-texto { color: var(--tinta-2); max-width: 52ch }
.cartao-nota { font-size: 0.875rem; color: var(--tinta-3); max-width: 52ch }

/* ═══ 5c-bis. PLANOS ════════════════════════════════════
   A faixa é noturna, com a palavra-eco gigante atrás dos cartões. Os cartões
   usam `.cartao-vidro` como todo o resto da página. */

.planos-eco {
  position: absolute; left: 0; right: 0;
  top: clamp(32px, 6vw, 84px);
  font-size: clamp(5.5rem, 20vw, 17rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  text-align: center; text-transform: capitalize;
  color: var(--noite-eco);
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, black 35%, transparent 88%);
  mask-image: linear-gradient(180deg, black 35%, transparent 88%);
}
.planos-conteudo { position: relative }
.planos-cabeca { margin-bottom: clamp(40px, 6vw, 72px) }

/* Nos cartões escuros, o botão neutro vira o pill claro da referência. */
.planos-secao .plano .btn:not(.btn-p) {
  background: var(--noite-tinta); border-color: var(--noite-tinta);
  color: var(--n-900); font-weight: 600;
}
.planos-secao .plano .btn:not(.btn-p):hover { background: var(--n-200); border-color: var(--n-200) }

.planos {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 940px) { .planos { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto } }

.plano { height: 100% }
/* O destacado não muda de TAMANHO — isso quebraria o alinhamento das três
   colunas. Ele acende: borda da marca e o farol num degrau acima, pela
   variável que `.cartao-vidro` já lê. */
.plano-destaque {
  border-color: var(--marca);
  --farol-corpo: var(--noite-farol-forte);
}
/* ⛔ A fita é ABSOLUTA, e essa é a diferença entre a tabela alinhar e não
   alinhar. No fluxo, ela empurra para baixo tudo do cartão destacado — nome,
   preço e botão saem da linha dos outros dois, e o olho lê isso como descuido
   exatamente no bloco que precisa parecer caro. */
.plano-fita {
  position: absolute; top: var(--e-5); right: var(--e-5); z-index: 1;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinta-acento); background: var(--marca);
  border-radius: var(--r-max); padding: 3px var(--e-3);
}
.plano-nome { font-size: 1.0625rem; font-weight: 600 }
.plano-para { font-size: 0.8125rem; color: var(--tinta-3); margin-top: 2px }
/* `min-height` porque "para sempre" ocupa uma linha e "por pessoa / por mês"
   ocupa duas: sem ela, o botão de cada cartão para numa altura diferente. */
.plano-preco { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; min-height: 46px }
.plano-valor {
  font-size: 2.5rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plano-unidade { font-size: 0.8125rem; color: var(--tinta-3); line-height: 1.3 }
.plano .btn { width: 100% }
.plano-inclui { list-style: none; display: grid; gap: var(--e-3); margin-top: var(--e-1) }
.plano-inclui li {
  position: relative; padding-left: var(--e-6);
  font-size: 0.9375rem; color: var(--tinta-2); line-height: 1.45;
}
/* O visto é desenhado com borda, não com caractere: emoji de interface é
   proibido, e um "✓" de fonte muda de peso a cada sistema. */
.plano-inclui li::before {
  content: ""; position: absolute; left: 2px; top: 0.35em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--marca); border-bottom: 2px solid var(--marca);
  rotate: -45deg;
}
.plano-inclui strong { color: var(--tinta); font-weight: 600 }
.plano-nota { font-size: 0.8125rem; color: var(--tinta-3); margin-top: auto; padding-top: var(--e-2) }

/* ═══ 5c-ter. OBJEÇÕES ══════════════════════════════════ */

.faq-titulo { margin-bottom: var(--e-6) }
.faq { border-top: 1px solid var(--linha) }
.faq details { border-bottom: 1px solid var(--linha) }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--e-5) var(--e-8) var(--e-5) 0;
  font-size: 1rem; font-weight: 500;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none }
/* O sinal de mais é DESENHADO com duas barras que giram, e não um "+" de
   fonte: assim o fechar/abrir tem transição e o peso não muda por sistema. */
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 4px; top: 50%;
  background: var(--tinta-3);
  transition: rotate var(--t-2) var(--curva-entra);
}
.faq summary::before { width: 14px; height: 2px; margin-top: -1px }
.faq summary::after { width: 14px; height: 2px; margin-top: -1px; rotate: 90deg }
.faq details[open] summary::after { rotate: 0deg }
.faq summary:hover { color: var(--marca-tinta) }
.faq p { padding: 0 var(--e-8) var(--e-5) 0; color: var(--tinta-2); max-width: 62ch }

/* ═══ 5d. FECHO ═══════════════════════════════════════ */

.fecho {
  background: var(--sup); border-top: 1px solid var(--linha);
  text-align: center; position: relative; overflow: hidden;
}
.fecho .d2 { margin-bottom: var(--e-4) }
.fecho .apoio { margin: 0 auto var(--e-6) }

/* ═══ 7. AVISOS — o par ícone/rótulo + cor, nunca cor sozinha ═══════ */

.nota {
  border: 1px solid var(--linha);
  border-left-width: 3px;
  border-radius: var(--r-4);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
}
.nota:last-child { margin-bottom: 0 }
.nota-titulo { font-weight: 600; margin-bottom: var(--e-1); display: block }
.nota p { margin-bottom: var(--e-2); font-size: 0.9375rem }
.nota p:last-child { margin-bottom: 0 }

.nota-atencao { border-color: var(--aviso-borda); border-left-color: var(--aviso); background: var(--aviso-lav) }
.nota-critica { border-color: var(--critico-borda); border-left-color: var(--critico); background: var(--critico-lav) }
.nota-ok      { border-color: var(--ok-borda);      border-left-color: var(--ok);      background: var(--ok-lav) }
.nota-info    { border-color: var(--info-borda);    border-left-color: var(--info);    background: var(--info-lav) }
.nota-marca   { border-color: var(--marca-borda);   border-left-color: var(--marca);   background: var(--marca-lav-2) }

/* ═══ 8. A ÁRVORE DE PASTAS ═════════════════════════════════ */

/* ⛔ `white-space: pre` é o que a torna uma árvore: os traços `└──` só
   alinham com espaço preservado e fonte mono. Com quebra normal, ela vira
   um parágrafo com símbolos soltos. */
.arvore {
  font-family: var(--fonte-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
  color: var(--tinta-2);
}
.arvore b { color: var(--tinta); font-weight: 600 }
.arvore .cmt { color: var(--tinta-3) }

/* ═══ 9. MOCKUPS — o produto desenhado em CSS ═══════════════════
   Pedaços da interface real da Ata, desenhados com caixa e borda em vez de
   captura de tela: captura envelhece a cada mudança da extensão e some no
   tema oposto. */

.mocape { display: grid; gap: var(--e-4); align-content: start }

.mocape-fala {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--e-3);
  align-items: start;
  padding: var(--e-3); border-radius: var(--r-2);
}
.mocape-fala-ativa { background: var(--marca-lav-2); outline: 1px solid var(--marca-borda) }
.mocape-tempo { font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--marca-tinta); padding-top: 2px }
.mocape-nome { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: var(--e-2) }
.mocape-linha {
  display: block; height: 8px; border-radius: var(--r-max);
  background: var(--sup-3); margin-bottom: var(--e-2);
}
.mocape-linha:last-child { margin-bottom: 0 }
.mocape-fala-ativa .mocape-linha { background: var(--marca-lav) }

.mocape-registro {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--e-3);
  align-items: center;
  padding: var(--e-3); border-radius: var(--r-2);
}
.mocape-registro + .mocape-registro { border-top: 1px solid var(--linha-fraca) }
.mocape-data { font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--tinta-3) }
.mocape-registro .mocape-nome { margin-bottom: var(--e-1) }
.mocape-registro .mocape-linha { margin-bottom: 0 }
.mocape-etiqueta {
  font-family: var(--fonte-mono); font-size: 0.6875rem;
  color: var(--tinta-2); white-space: nowrap;
  border: 1px solid var(--linha-forte); border-radius: var(--r-max);
  padding: 2px var(--e-2);
}

.mocape-aceite {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3);
  align-items: center;
  font-size: 0.8125rem; color: var(--tinta-2);
  background: var(--marca-lav-2);
  border: 1px solid var(--marca-borda); border-radius: var(--r-2);
  padding: var(--e-3);
}
.mocape-caixa {
  position: relative; flex: none;
  width: 18px; height: 18px; border-radius: var(--r-1);
  background: var(--marca);
}
/* ⛔ O visto é DESENHADO com duas bordas, não escrito: emoji de interface é
   proibido, e um "✓" de fonte muda de peso e de linha de base a cada
   sistema — dentro de uma caixa de 18px isso aparece. */
.mocape-caixa::after {
  content: ""; position: absolute;
  left: 5px; top: 5px; width: 7px; height: 4px;
  border-left: 2px solid var(--tinta-acento);
  border-bottom: 2px solid var(--tinta-acento);
  rotate: -45deg;
}
.mocape-botao {
  display: block; text-align: center;
  background: var(--btn-p-fill); color: var(--tinta-acento);
  font-size: 0.875rem; font-weight: 600;
  border-radius: var(--r-max);
  padding: var(--e-3) var(--e-5);
}

/* ═══ 10. TABELA ════════════════════════════════════════════════════ */

.tabela-rolo { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r-2) }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; min-width: 460px }
th, td { text-align: left; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha) }
th { font-weight: 600; color: var(--tinta-2); background: var(--sup-2); font-size: 0.8125rem }
tbody tr:last-child td { border-bottom: none }
td .mono { color: var(--tinta-2) }

/* ═══ 12. LISTAS ════════════════════════════════════════════════════ */


ul.corrida, ol.corrida { padding-left: var(--e-5); display: grid; gap: var(--e-2) }
ul.corrida li, ol.corrida li { font-size: 0.9375rem }

/* ═══ 14. BOTÕES ════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-6);
  min-height: 44px;                     /* alvo de toque confortável no celular */
  border-radius: var(--r-max);
  border: 1px solid var(--linha-forte);
  background: var(--sup); color: var(--tinta);
  font-size: 0.9375rem; font-weight: 500; font-family: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--sup-3); color: var(--tinta) }
.btn-p {
  background: var(--btn-p-fill); border-color: var(--btn-p-fill);
  color: var(--tinta-acento); font-weight: 600;
}
.btn-p:hover { background: var(--lj-500); border-color: var(--lj-500); color: var(--tinta-acento) }
/* Terciário: a segunda ação da abertura não compete com a primeira. */
.btn-t { border-color: transparent; background: none; color: var(--marca-tinta); font-weight: 500 }
.btn-t:hover { background: var(--marca-lav-2); color: var(--marca-tinta) }
.btn-g { padding: var(--e-4) var(--e-8); min-height: 52px; font-size: 1rem }

.botoes { display: flex; flex-wrap: wrap; gap: var(--e-3) }
.botoes-centro { justify-content: center; align-items: center }
/* A linha de garantia embaixo do botão — tira a última objeção no ponto
   exato em que ela aparece, que é com o dedo sobre o botão. */
.selo-cta { font-size: 0.8125rem; color: var(--tinta-3); margin-top: var(--e-4) }

/* ═══ 15. DOCUMENTO — política e termos ═════════════════════════════ */

/*
   ⚖️ A home abre escura e termina clara — a venda no escuro, a letra miúda no
   claro. Os documentos passaram a fazer a MESMA divisão: o bloco que
   identifica o texto é faixa noturna com o farol, e o corpo segue na
   superfície da página.

   ⛔ O corpo NÃO vira noturno junto. São quinze mil caracteres de texto
   corrido que alguém vai ler inteiro, e possivelmente imprimir e anexar: aí
   o tema do sistema e o preto no branco ganham de qualquer intenção de
   identidade visual. É a mesma razão pela qual a FAQ e o fecho da home
   também ficaram claros. */

.doc-abertura {
  position: relative; overflow: hidden;
  padding-block: clamp(96px, 13vw, 148px) clamp(148px, 16vw, 188px);
}
/* A mesma solda da home entre noite e dia: sem ela a faixa escura encosta de
   topo no corpo claro e desenha uma reta que o olho lê como corte. */
.doc-abertura::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--fundo), transparent 128px);
}
/* O farol da identidade, aqui como luz de fundo da faixa — mesmo desenho do
   que ilumina os cartões, só que na escala da seção. */
.doc-abertura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 62% at 50% 116%, var(--noite-farol-2) 0%, transparent 70%),
    radial-gradient(700px 460px at 88% 4%, var(--noite-marca-vidro), transparent 70%),
    linear-gradient(214deg, var(--noite-facho) 0%, transparent 46%);
}
/* ⛔ A MESMA largura do corpo do documento (`.doc`, 720px). Com o `.miolo` de
   880px, o título da abertura começava 80px à esquerda do texto que vem
   embaixo — dois blocos da mesma página em duas colunas diferentes. */
/* ⛔ `z-index: 1`: a solda é um `::after` ABSOLUTO e, por vir depois na árvore,
   pinta por cima do conteúdo posicionado — o carimbo saía lavado dentro do
   degradê. E o respiro de baixo tem de ser MAIOR que os 128px da solda, senão
   o último elemento nasce dentro dela. */
.doc-abertura-corpo { position: relative; z-index: 1; max-width: 720px; margin: 0 auto }
.doc-abertura h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: var(--e-5);
  text-wrap: balance;
}
.doc-abertura .doc-lead {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.55; color: var(--tinta-2);
  max-width: 58ch; text-wrap: pretty;
}
/* Sobre a faixa noturna o carimbo vira vidro, como as pastilhas dos cartões. */
.doc-abertura .carimbo {
  background: var(--noite-vidro); border-color: var(--noite-linha-forte);
  color: var(--tinta-2);
}

.doc { max-width: 720px; margin: 0 auto; padding: var(--e-10) 0 }
.doc h1 { font-size: 1.875rem; margin-bottom: var(--e-3) }
.doc h2 {
  font-size: 1.1875rem; margin-top: var(--e-10); margin-bottom: var(--e-3);
  padding-top: var(--e-5); border-top: 1px solid var(--linha);
}
.doc h2:first-of-type { margin-top: var(--e-8) }
.doc h3 { font-size: 1rem; margin-top: var(--e-6); margin-bottom: var(--e-2) }
.doc p, .doc li { font-size: 0.9375rem }
.doc > p:first-of-type { font-size: 1rem; color: var(--tinta-2) }

/* Raio `--r-5` e borda forte: a mesma forma dos cartões da home. Antes eram
   `--r-2` e borda fraca — a página inteira mudou de forma e estas duas peças
   tinham ficado com a anterior. */
.sumario {
  background: var(--sup-2); border: 1px solid var(--linha-forte);
  border-radius: var(--r-5); padding: var(--e-6); margin-bottom: var(--e-8);
}
.sumario ol { padding-left: var(--e-5); columns: 2; column-gap: var(--e-6) }
.sumario li { font-size: 0.875rem; margin-bottom: var(--e-1); break-inside: avoid }
@media (max-width: 560px) { .sumario ol { columns: 1 } }

.carimbo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: 0.8125rem; color: var(--tinta-2);
  background: var(--sup-2); border: 1px solid var(--linha);
  border-radius: var(--r-max); padding: var(--e-1) var(--e-3);
}

/* ═══ 16. RODAPÉ ════════════════════════════════════════════════════ */

/* ⛔ Sem `margin-top`: o fecho já termina no seu próprio respiro, e os 40px
   de `--fundo` entre os dois apareciam como uma tira solta de outra cor —
   não como ar. O rodapé encosta no fecho e a linha de cima faz a divisão. */
.rodape {
  border-top: 1px solid var(--linha);
  background: var(--sup-2);
  padding: var(--e-10) 0 var(--e-8);
}
.rodape-corpo { display: flex; flex-wrap: wrap; gap: var(--e-6); justify-content: space-between; align-items: start }
.rodape a { color: var(--tinta-2); text-decoration: none }
.rodape a:hover { color: var(--tinta); text-decoration: underline }
.rodape-marca { margin-bottom: var(--e-3) }
.rodape-frase { max-width: 40ch }
.rodape-links { display: flex; flex-direction: column; gap: var(--e-2); font-size: 0.875rem }
.rodape-titulo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: var(--e-1) }

/* ═══ 17. IMPRESSÃO — a política vai ser impressa e anexada ═════════ */

@media print {
  /* ⛔ Os tokens de TINTA precisam voltar ao papel, não só o `color` do body.
     Com o sistema no tema escuro, `--tinta-2` vale #A0A0A0: os parágrafos que
     usam esse token saíam em cinza-claro sobre branco — ilegíveis na folha.
     Papel é branco com tinta preta, e aqui o tema do sistema não opina. */
  :root {
    --tinta: var(--tinta-papel);
    --tinta-2: var(--tinta-papel);
    --tinta-3: var(--tinta-papel);
    --linha: var(--linha-papel);
    --linha-forte: var(--linha-papel);
    --linha-fraca: var(--linha-papel);
  }
  .topo, .rodape, .sumario { display: none }
  /* ⛔ A abertura é faixa NOTURNA — em papel ela sairia como um bloco preto
     com texto claro, ou pior, texto claro sobre branco se o navegador não
     imprimir fundos. Aqui ela desliga os tokens de noite e vira o cabeçalho
     do documento impresso: preto no branco, sem farol e sem solda. */
  .doc-abertura {
    --tinta: var(--tinta-papel); --tinta-2: var(--tinta-papel); --tinta-3: var(--tinta-papel);
    background: none; color: var(--tinta-papel);
    padding-block: 0 var(--e-6);
  }
  .doc-abertura::before, .doc-abertura::after { display: none }
  .doc-abertura h1 { font-size: 20pt }
  .doc-abertura .carimbo { background: none; border-color: var(--linha-papel); color: var(--tinta-papel) }
  body { background: var(--papel); color: var(--tinta-papel); font-size: 11pt }
  .doc { max-width: none; padding: 0 }
  .doc h2 { break-after: avoid }
  a { color: var(--tinta-papel); text-decoration: underline }
  .nota { border: 1px solid var(--linha-papel); background: none }
}