/* ==========================================================================
   SHARK PRO COPY — /copy · camada visual v3 "Desk Schematic"
   --------------------------------------------------------------------------
   Roda sobre site.css (tokens, .btn, .container). Referência de nível por
   bloco: primora.xyz (trilhos, hero centrado, cartões de insight),
   centralhq.com (passos + painel vivo), sortui.company (head centrado),
   supercommon.systems (licença premium), getharvest.com (disclaimer calmo).

   A linguagem é a da Shark: preto puro, azul = tecnologia, verde =
   conversão/lucro, vermelho SÓ perda, dither, tubarão.

   Índice:
     00 tokens                 07 track record
     01 trilhos e grade        08 licença
     02 texto e revelação      09 disclaimer calmo
     03 botões                 10 faq
     04 topbar                 11 cta final, wordmark, footer
     05 hero + palco + tape    12 modal
     06 como funciona          13 utilitários e reduced-motion
   ========================================================================== */

/* ============================ 00 · TOKENS ============================== */
:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rail: rgba(254, 254, 254, 0.055);
  --hair: rgba(254, 254, 254, 0.085);
  --hair-2: rgba(254, 254, 254, 0.14);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --cw: 1240px;
  --gut: clamp(20px, 3.2vw, 44px);
}

.cw {
  width: 100%;
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 var(--gut);
  position: relative;
}

/* ======================= 01 · TRILHOS E GRADE ========================== */
.rails {
  position: fixed;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--cw));
  pointer-events: none;
  z-index: 1;
}
.rails::before, .rails::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rail);
}
.rails::before { left: var(--gut); }
.rails::after { right: var(--gut); }
@media (max-width: 720px) { .rails { display: none; } }

.sec {
  position: relative;
  padding: clamp(76px, 8.6vw, 126px) 0;
  border-top: 1px solid var(--rail);
}
/* a seção logo depois da faixa de candles não precisa do respiro cheio: a
   própria faixa já é a pausa visual */
.sec.flush { border-top: 0; padding-top: clamp(54px, 6vw, 88px); }
.sec + .sec { padding-top: clamp(56px, 6.4vw, 92px); }
.sec > .cw { position: relative; z-index: 2; }

/* grade de campo: papel milimetrado atrás do hero */
.field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--rail) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rail) 1px, transparent 1px);
  background-size: 148px 148px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 25%, transparent 78%);
}
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 122, 255, 0.5) 1px, transparent 1.6px);
  background-size: 148px 148px;
  background-position: center top;
  opacity: 0.5;
}

canvas[id^="dither-"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.34;
  image-rendering: pixelated;
}
/* dither desligado no celular: performance > visual (decisão do Daniel) */
@media (max-width: 767px) { canvas[id^="dither-"] { display: none; } }

/* ==================== 02 · TEXTO E REVELAÇÃO =========================== */
.eb {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 22px;
}
.eb::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--blue);
  flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(0, 122, 255, 0.7);
}
.eb.g::before { background: var(--green); box-shadow: 0 0 10px rgba(0, 255, 95, 0.6); }
/* ⚠️ o modificador de alerta NÃO pode se chamar .r — .r é a revelação e toda
   eyebrow tem as duas, o que pintaria a página inteira */
.eb.warn::before { background: #ff5b5b; box-shadow: 0 0 10px rgba(255, 91, 91, 0.6); }
.eb.n::before { background: rgba(254, 254, 254, 0.32); box-shadow: none; }

.hl { position: relative; padding-left: 26px; }
.hl::before {
  content: "";
  position: absolute;
  left: 0; top: 0.16em; bottom: 0.16em;
  width: 1px;
  background: linear-gradient(180deg, rgba(254, 254, 254, 0.55), rgba(254, 254, 254, 0.04));
}
@media (max-width: 720px) { .hl { padding-left: 18px; } }

.h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.1vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.18;
  letter-spacing: -0.018em;
}
/* variante calma: peso menor e cor recuada, pro disclaimer não gritar */
.h2.soft, .h3.soft { font-weight: 500; color: rgba(254, 254, 254, 0.88); letter-spacing: -0.02em; }

.lead {
  color: var(--text-2);
  font-size: clamp(15px, 1.45vw, 17.5px);
  line-height: 1.65;
  max-width: 58ch;
  margin-top: 20px;
}
.lead.wide { max-width: 74ch; }
.lead b { color: rgba(254, 254, 254, 0.92); font-weight: 700; }
.neon { color: var(--green); text-shadow: 0 0 52px rgba(0, 255, 95, 0.4); }

.sec-head { max-width: 900px; }
.sec-head.mid { max-width: 780px; margin: 0 auto; text-align: center; }
.sec-head.mid .eb { justify-content: center; }
.sec-head.mid .lead { margin-left: auto; margin-right: auto; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mn { font-family: var(--mono); letter-spacing: 0.02em; }

/* revelação: y + blur, a assinatura de movimento da referência
 *
 * ⚠️ TODO estado escondido daqui para baixo está atrás de `.js`, a classe que
 * copy.php grava no <html> por script inline antes das folhas de estilo. Sem JS o
 * conteúdo aparece; o efeito é que se degrada, não a página. Isto NÃO é detalhe de
 * progressive enhancement por elegância: são ~58 elementos `.r` (o cartão da
 * licença, os CTAs do hero, todos os h2, os 6 cards de infra, os 12 itens do FAQ), e
 * até 04/08/2026 eles nasciam invisíveis e só o copy.js os revelava — qualquer falha
 * do JS numa conexão ruim devolvia uma página preta em branco. Se for mexer aqui,
 * mantenha o `.js `. */
.js .r {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity 0.9s var(--ease-soft),
    transform 0.9s var(--ease),
    filter 0.9s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform, filter;
}
.r.in { opacity: 1; transform: none; filter: blur(0); }
.r.in.done { will-change: auto; filter: none; }

.sp { display: inline-block; white-space: pre; }
.js .sp-c, .js .sp-l {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(12px);
  transition:
    opacity 0.85s var(--ease-soft),
    transform 1s var(--ease),
    filter 0.85s var(--ease-soft);
}
.sp-c, .sp-l { display: inline-block; }
.sp-l { display: block; }
.on .sp-c, .on .sp-l { opacity: 1; transform: none; filter: blur(0); }
.no-anim, .no-anim * { transition: none !important; }

/* =========================== 03 · BOTÕES =============================== */
.btn .roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.btn .roll span {
  display: inline-block;
  white-space: pre;
  transition: transform 0.42s var(--ease);
  transition-delay: calc(var(--c, 0) * 14ms);
}
.btn .roll b { position: absolute; left: 0; top: 0; display: flex; font-weight: inherit; }
.btn .roll b span { transform: translateY(105%); }
.btn:hover .roll > span, .btn:focus-visible .roll > span { transform: translateY(-105%); }
.btn:hover .roll b span, .btn:focus-visible .roll b span { transform: none; }

.dm { position: relative; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 3px; overflow: hidden; }
.dm canvas { width: 100%; height: 100%; display: block; }
.btn-xl .dm, .btn-lg .dm { width: 24px; height: 24px; }

.btn { transition: transform 0.28s var(--ease), box-shadow 0.3s var(--ease), background 0.24s ease, border-color 0.24s ease, color 0.24s ease; }
.btn:active { transform: scale(0.982) !important; }
.btn-lg { padding: 18px 34px; font-size: 14px; border-radius: 9px; }

.btn-ghost { border-color: var(--hair-2); background: transparent; backdrop-filter: none; }
.btn-ghost:hover {
  border-color: rgba(254, 254, 254, 0.42);
  background: rgba(254, 254, 254, 0.045);
  transform: translateY(-2px) scale(1.015);
}
.btn-profit:hover { transform: translateY(-2px) scale(1.022); }

.mag { transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
.mag:hover { transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) - 2px), 0) scale(1.022); }

.ul { position: relative; }
.ul::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 1px; width: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.ul:hover::after, .ul:focus-visible::after { transform: scaleX(1); }

/* =========================== 04 · TOPBAR =============================== */
.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.top.stuck {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--rail);
}
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; height: 68px; }

/* A logo é centralizada, então a nav vive numa coluna 1fr que vale metade do
   espaço sobrando (~514px a 1440). São 6 links em português: com 11px/0.14em
   eles somavam ~600px e vazavam POR CIMA do wordmark. Os filhos são nowrap,
   então o flex não encolhe e o rect do CONTÊINER mente — medir o último link. */
.top-nav { display: flex; gap: 15px; min-width: 0; }
.top-nav a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-3);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}
@media (max-width: 1320px) { .top-nav { gap: 12px; } .top-nav a { letter-spacing: 0.02em; } }
.top-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease);
}
.top-nav a:hover, .top-nav a[aria-current="true"] { color: var(--white); }
.top-nav a:hover::after, .top-nav a[aria-current="true"]::after { transform: scaleX(1); }
.top-brand { justify-self: center; display: flex; align-items: center; }
/* 34px e não 30px: o logo-stack (14/08/2026) é recortado colado no traço —
   margem ZERO nas quatro bordas, medido no alfa do arquivo. O lockup anterior
   tinha folga própria, então a mesma altura de caixa rendia menos marca. */
.top-brand img { height: 34px; width: auto; transition: opacity 0.3s ease; }
.top-brand:hover img { opacity: 0.7; }
.top-cta { justify-self: end; display: flex; align-items: center; gap: 14px; }
.top-cta .btn { padding: 10px 18px; font-size: 11.5px; letter-spacing: 0.08em; }
/* Entrada do assinante. Contorno, não preenchimento: dividir ênfase com o
   "Assinar agora" numa página de venda seria trocar conversão por conveniência
   de quem já pagou. Sobrevive ao celular porque o .top-nav não sobrevive. */
.top-painel {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  /* Cinza claro OPACO e tinta preta: é a inversão pedida. `#e8e8e6` e não branco
     puro — branco cheio nesta barra escura vibra e puxa mais atenção que o botão
     verde de assinar, que é a ação principal da página. */
  color: #050505;
  background: #e8e8e6;
  border: 1px solid #e8e8e6;
  border-radius: 8px;
  padding: 9px 13px;
  /* 40px de piso: com 9px de padding e fonte de 10px o botão fechava em 33px de
     altura, e ele é um alvo de dedo mesmo no desktop com tela sensível. */
  min-height: 40px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}
.top-painel svg { width: 13px; height: 13px; flex: 0 0 auto; stroke-width: 2; }
.top-painel:hover { background: #fefefe; border-color: #fefefe; transform: translateY(-1px); }
.top-painel:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* A marca media 65x34 — o `padding-block` leva a AREA a 44px sem mexer no tamanho
   do logo. Achado da mesma auditoria; é um alvo pré-existente, não uma regressão. */
.top-brand { padding-block: 5px; }
/* No celular sobra o ícone: em 420px a barra tem marca + este botão + "Assinar
   agora", e três rótulos brigam pelos mesmos pixels. O `aria-label` do link já
   carrega o nome, então esconder a palavra não custa informação a ninguém.

   🔴 MAS O ALVO TEM QUE CONTINUAR CLICÁVEL. Medido com emulação de celular em
   19/08/2026: sem o piso abaixo, o botão ficava 37×33 — abaixo de qualquer
   diretriz de toque, e justamente na porta do assinante, que o Daniel acabou de
   pedir pra deixar MAIS visível. Encolher a palavra não pode encolher o alvo.
   44px cabe: medido em 390px, o botão vai de 141 a 185 e o "Assinar agora"
   começa em 191. */
@media (max-width: 420px) {
  .top-painel { padding: 0; gap: 0; min-width: 44px; min-height: 44px; justify-content: center; }
  .top-painel-tx { display: none; }
}
@media (max-width: 1180px) { .top-nav { display: none; } .top-in { grid-template-columns: auto 1fr; } .top-brand { justify-self: start; } }
@media (max-width: 520px) { .top-cta .btn .txt { display: none; } }

.top-prog {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--green));
  box-shadow: 0 0 10px rgba(0, 255, 95, 0.45);
}

/* =================== 05 · HERO + PALCO + TAPE ========================== */

/* O hero é UM bloco no mesmo eixo central: eyebrow, título, sub, CTAs, selos
   e o palco da animação. Nada em coluna lateral. */
.hero {
  position: relative;
  padding: clamp(128px, 15vw, 190px) 0 clamp(56px, 6vw, 86px);
  overflow: hidden;
}
.hero-mid { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-mid .lead { margin: 26px auto 0; max-width: 62ch; }
.hero h1 { margin: 26px 0 0; }

/* ============ HERO EM DUAS COLUNAS (18/08/2026) ============
   Texto à esquerda no topo, botão de vídeo à direita, referência
   fusionai.framer.website. O `.hero-mid` centralizado continua no arquivo
   porque outras telas do funil o usam; aqui entra o `.hero-grid`.

   `align-items: start` e não `center`: o pedido foi texto "na esquerda NO TOPO".
   Centralizado, um título de duas linhas empurra o bloco inteiro pra baixo e a
   coluna da direita passa a flutuar sem referência. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
/* `position: relative` + z-index: as duas colunas sobem acima do vídeo de fundo,
   que é `position:absolute` dentro do mesmo `.hero`. */
.hero-col { position: relative; z-index: 2; text-align: left; }
.hero-col .lead { margin: 26px 0 0; max-width: 54ch; }
.hero-col .hero-cta { justify-content: flex-start; }
/* Os selos eram 4 colunas centradas numa faixa de 720px. Na coluna estreita
   isso vira quatro tiras de uma palavra cada — 2x2 respira e continua legível. */
.hero-col .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 40px 0 0; max-width: 520px; }

.hero-col--play { display: flex; align-items: center; justify-content: center;
                  min-height: 100%; padding-top: clamp(8px, 3vw, 42px); }

/* ---------- O vídeo de fundo ---------- */
/* ⚠️ `inset: 0` no `.hero`, que já é `position:relative; overflow:hidden`. O
   `overflow` é o que impede o `scale(1.14)` de baixo de criar barra horizontal:
   o iframe é ESTICADO pra além da borda de propósito, senão o blur revela as
   bordas transparentes e aparece uma moldura clara em volta da tela. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg-still,
.hero-bg-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  /* 22px, e "leve" aqui é sobre a SENSAÇÃO, não sobre o número. Medido com o
     vídeo real: em 7px o rosto do apresentador fica nítido, ocupa a metade
     direita inteira e disputa com o botão de play que está exatamente por cima
     dele. O fundo de um hero tem que ser reconhecível como VÍDEO — movimento,
     cor, alguém falando — e não legível como CENA. Passando de ~18px o olho lê
     "tem vídeo rodando" e para de tentar assistir. */
  /*  NAO e capricho: a miniatura oficial tem brilho medio de 48/255,
     e depois do blur e do veu ela desaparece. O realce devolve o video a cena
     sem clarear o veu, que e quem protege a leitura do texto. */
  filter: blur(22px) saturate(1.15) brightness(1.1);
}
.hero-bg-media iframe { width: 100%; height: 100%; border: 0; display: block; }
/* O iframe do YouTube tem proporção fixa; numa tela larga e baixa ele deixaria
   faixa preta. `min-` nas duas medidas resolve com a conta do 16:9. */
.hero-bg-media { display: none; }
.hero-bg-media.on { display: block; }
/* A MINIATURA NUNCA E ESCONDIDA, e isso e de proposito. A tentacao e apagar o
   still quando o iframe entra ("ja tem video, nao precisa da foto"), mas o
   iframe pode nunca pintar: rede lenta, bloqueador de terceiro, politica de
   autoplay do navegador, YouTube fora do ar. Em qualquer um desses o hero
   ficaria PRETO — e ninguem reclamaria, porque a pagina continua "funcionando".
   Deixando o still embaixo, o pior caso e o fundo parado, que e exatamente o
   que o celular ja recebe. O iframe e opaco e cobre o still quando existe. */

/* O ESCURECIMENTO. DOIS gradientes, e cada um resolve uma coisa:

   - o VERTICAL costura o vídeo com o resto da página: preto no topo (onde entra
     a barra de navegação) e preto embaixo (onde a seção seguinte começa), pra
     não existir uma linha visível onde o vídeo acaba;
   - o HORIZONTAL é o que faz a composição funcionar: escuro do lado do TEXTO,
     claro do lado do BOTÃO. É o mesmo movimento da referência do Daniel, onde a
     arte vive à direita e a esquerda é chapada pro título respirar.

   ⚠️ A primeira versão tinha 0,92 de preto no topo MAIS uma camada chapa de
   0,34 por baixo. O contraste ficou ótimo e o vídeo, invisível — a tela inteira
   preta. Escurecer até o texto ficar legível é fácil; a conta certa é escurecer
   só até ali, e não além. */
.hero-bg-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 12, 0.85) 0%, rgba(2, 6, 12, 0.25) 34%, rgba(2, 6, 12, 0.3) 66%, rgba(2, 6, 12, 0.92) 100%),
    linear-gradient(90deg, rgba(2, 6, 12, 0.9) 0%, rgba(2, 6, 12, 0.72) 40%, rgba(2, 6, 12, 0.5) 72%, rgba(2, 6, 12, 0.6) 100%);
}
/* A grade da casa passa a correr POR CIMA do vídeo. Sem isto o `.hero-bg` cobre
   `.field` e o hero perde a textura que identifica a página inteira — o vídeo
   entraria como um bloco estranho no meio do sistema visual, em vez de dentro
   dele. */
.hero .field { z-index: 1; }

/* ---------- Botão de play: um CARD DE VIDRO ---------- */
/* O botão era um ícone com um texto solto embaixo, e o Daniel leu exatamente
   isso: "o texto não parece fazer parte dele". Agora os dois moram dentro da
   mesma superfície, e a superfície é o botão.

   ⚠️ O `backdrop-filter` só existe porque tem VÍDEO ATRÁS. Vidro sobre fundo
   chapado é só um retângulo cinza — o efeito depende de haver o que desfocar, e
   é por isso que ele entra aqui e não em outro card da página.

   ⚠️ `-webkit-` junto: sem o prefixo o Safari ignora e o card fica translúcido
   sem desfoque, que é a versão feia disto. */
.play-shark {
  appearance: none; cursor: pointer; color: inherit; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  width: min(100%, 380px);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 34px);
  border-radius: 22px;
  background: rgba(254, 254, 254, 0.045);
  border: 1px solid rgba(254, 254, 254, 0.13);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  position: relative; overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s ease,
              background 0.45s ease, box-shadow 0.45s ease;
}
/* O brilho de topo é o que separa "vidro" de "retângulo semitransparente": ele
   simula a luz batendo na quina de cima da placa. Sem ele o card afunda no
   fundo e some. */
.play-shark::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(254, 254, 254, 0.1), transparent 42%);
  pointer-events: none;
}
.play-shark:hover {
  transform: translateY(-3px);
  background: rgba(254, 254, 254, 0.07);
  border-color: rgba(0, 255, 95, 0.4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 255, 95, 0.12);
}
.ps-orb {
  position: relative;
  display: grid; place-items: center;
  width: clamp(112px, 13vw, 156px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(0, 255, 95, 0.16), rgba(0, 255, 95, 0.03) 60%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 95, 0.34), 0 0 60px rgba(0, 255, 95, 0.16);
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
}
/* Os dois anéis pulsam DEFASADOS: um só lê como carregamento, dois lêem como
   sinal ao vivo — que é o que esta página vende. */
.ps-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(0, 255, 95, 0.5);
  animation: psRing 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ps-ring--2 { animation-delay: 1.6s; }
@keyframes psRing {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
/* ============ O PULSO QUE CHAMA O CLIQUE (20/08/2026) ============
   Pedido do Lucas, junto com a saída da barbatana (que morava exatamente aqui).

   ⚠️ JÁ EXISTIA PULSAÇÃO — os dois anéis de sonar, logo acima. Ela não estava
   dando conta, e o motivo é o TIPO de movimento: anel que só cresce e some lê
   como "carregando", não como "clique aqui". O que chama o dedo é batida, algo
   que incha e volta. Por isso o pulso novo é um coração de duas batidas com
   pausa (`psBatida` bate no 14% e no 40% e descansa o resto), e não um terceiro
   anel. Movimento contínuo e uniforme o olho aprende a ignorar em segundos;
   ritmo com pausa, não.

   🔴 O PULSO NÃO TOCA EM `transform` DO ORBE NEM DO TRIÂNGULO, e isso não é
   estilo, é a única forma de não quebrar o hover: os dois já usam `transform`
   em `:hover`, e animação de keyframes tem precedência sobre declaração comum
   na cascata. Pulsar o transform deles apagaria o hover sem erro nenhum no
   console. Daí o halo ser elemento próprio (transform só dele) e o brilho do
   triângulo ser `filter`, que o hover não usa. */
.ps-halo {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 95, 0.34), rgba(0, 255, 95, 0.08) 55%, transparent 72%);
  animation: psBatida 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes psBatida {
  0%,  100% { transform: scale(0.94); opacity: 0.42; }
  14%       { transform: scale(1.07); opacity: 0.95; }
  26%       { transform: scale(0.99); opacity: 0.6; }
  40%       { transform: scale(1.12); opacity: 1; }
  56%       { transform: scale(0.94); opacity: 0.42; }
}
/* O triângulo bate junto, pelo BRILHO. Sem isto o halo pulsa e o símbolo fica
   parado no meio — o olho vai pro movimento, e o play, que é o que precisa ser
   clicado, não ganha nada. */
.ps-tri { animation: psBrilho 3.4s ease-in-out infinite; }
/* O raio do brilho escala com o triângulo (fator ~1,3, igual ao da largura):
   o mesmo desfoque num marco 40% maior lê como halo apertado, e a batida
   perde amplitude sem ninguém mexer nos tempos. */
@keyframes psBrilho {
  0%,  100% { filter: drop-shadow(0 0 13px rgba(0, 255, 95, 0.42)); }
  14%       { filter: drop-shadow(0 0 28px rgba(0, 255, 95, 0.85)); }
  26%       { filter: drop-shadow(0 0 17px rgba(0, 255, 95, 0.5)); }
  40%       { filter: drop-shadow(0 0 34px rgba(0, 255, 95, 1)); }
  56%       { filter: drop-shadow(0 0 13px rgba(0, 255, 95, 0.42)); }
}
/* ⚠️ NO HOVER A BATIDA PARA, e assenta no ponto ALTO. O pulso existe pra trazer
   o cursor até aqui; com o cursor já em cima ele passa a competir com o próprio
   feedback do hover, e o botão fica tremendo debaixo do dedo. O valor final vem
   explícito junto do `animation: none` — sem ele o elemento voltaria ao estado
   base e daria um piscão pra baixo no instante do hover, que é o oposto do
   efeito desejado. */
.play-shark:hover .ps-halo,
.play-shark:focus-visible .ps-halo {
  animation: none; transform: scale(1.08); opacity: 1;
}
.play-shark:hover .ps-tri,
.play-shark:focus-visible .ps-tri {
  animation: none; filter: drop-shadow(0 0 31px rgba(0, 255, 95, 0.9));
}
.ps-tri {
  position: relative;
  width: 0; height: 0;
  /* 32px, ou ~20% do diâmetro do orbe (156px no máximo). Histórico curto: eram
     20px com a barbatana atrás; viraram 23px quando ela saiu; e chegaram aqui em
     20/08/2026 porque o Daniel achou pequeno — com razão. Botão de play
     convencional usa 30-35% do círculo; 20% é o meio-termo que dá presença sem
     transformar o orbe em moldura, que é o oposto do que ele é (atmosfera).
     A proporção 32:42 é a mesma do original (23:30), só escalada. */
  border-left: 32px solid var(--green);
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  /* Um triângulo centrado pelo BOUNDING BOX parece fora do eixo dentro de um
     círculo — o peso visual dele fica à esquerda. O empurrão escala junto:
     7px valiam para 23px de largura. */
  margin-left: 10px;
  /* O `filter` saiu daqui e virou keyframe (`psBrilho`): valor fixo aqui e
     animação lá brigariam, e a animação venceria — melhor ter um dono só. */
  transition: transform 0.45s var(--ease);
}
.play-shark:hover .ps-orb { transform: scale(1.045); box-shadow: inset 0 0 0 1px rgba(0, 255, 95, 0.6), 0 0 90px rgba(0, 255, 95, 0.26); }
.play-shark:hover .ps-tri { transform: scale(1.1); }
/* O foco vai na BORDA DO CARD, e não mais no orbe: quem recebe o foco agora é a
   placa inteira, e um anel desenhado só no círculo do meio diria que o alvo é o
   círculo. */
.play-shark:focus-visible {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(0, 255, 95, 0.25), 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* Sem `max-width` em ch: quem limita a linha agora é a largura do card. Com as
   duas coisas medindo a mesma coisa, a chamada quebrava antes da borda e sobrava
   uma faixa vazia dentro do vidro. */
.ps-tx { text-align: center; display: block; position: relative; }
/* Escala maior, a pedido: a chamada é o que vende o clique, e em 18px ela ficava
   MENOR que o parágrafo do lado esquerdo. Agora pesa como um subtítulo. */
.ps-tx b {
  display: block;
  font-family: var(--disp, inherit);
  font-size: clamp(19px, 1.85vw, 23px);
  line-height: 1.25;
  font-weight: 700;
  color: #fefefe;
  letter-spacing: -0.015em;
}
.ps-tx small {
  display: block; margin-top: 9px;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(254, 254, 254, 0.66);
}

/* ---------- Chamada de rolagem ---------- */
/* 🔴 NAO SE CHAMA `.scroll-hint`, e a razao vale registrar: esse nome JA E'
   um componente, no `site.css` (linha ~413) — o marcador VERTICAL da home, com
   `flex-direction: column`, uma linha que pinga e `opacity: 0` esperando uma
   animacao que so existe la. E o `/copy` carrega os DOIS arquivos.

   Reusar o nome nao deu erro nenhum: deu um marcador empilhado (VEJA / seta /
   MAIS, um embaixo do outro) sem nada no console. Levei um screenshot pra
   descobrir. Vencer isso na cascata seria pior — a proxima mudanca no componente
   da home voltaria a quebrar este aqui, e ninguem ligaria as duas coisas.

   Prefixo `cp-` porque e' peca do /copy, nao do sistema. */
.cp-scroll {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: clamp(38px, 5vw, 64px) auto clamp(6px, 1vw, 14px);
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(254, 254, 254, 0.5);
  text-decoration: none;
  /* O anel tem 34px e era essa a altura do link inteiro. `padding-block` leva a
     área de toque a 46px sem mudar nada do desenho. */
  padding-block: 6px;
  transition: color 0.35s ease;
}
.cp-scroll:hover { color: rgba(254, 254, 254, 0.82); }
/* O anel PONTILHADO é o que dá o ar de instrumento, e é a mesma família do
   tracejado da referência. `border-style: dotted` num raio total vira uma coroa
   de pontos de graça — sem SVG e sem pseudo-elemento. */
.cp-scroll-orb {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px dotted rgba(254, 254, 254, 0.42);
  transition: border-color 0.35s ease, transform 0.35s var(--ease);
}
.cp-scroll:hover .cp-scroll-orb { border-color: var(--green); transform: scale(1.08); }
.cp-scroll-orb svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  animation: shDown 2.4s ease-in-out infinite;
}
/* A seta desce e volta, em vez de piscar: movimento na direção do gesto que se
   pede diz o que fazer; opacidade pulsando só chama atenção. */
@keyframes shDown {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-scroll-orb svg { animation: none; opacity: 0.9; }
}

/* ⚠️ QUEM PEDE MENOS MOVIMENTO PERDE A BATIDA, MAS NÃO PERDE O BOTÃO. Zerar as
   animações e deixar o resto no estado base apagaria justamente o que o Lucas
   pediu que chamasse atenção — pra essa pessoa o botão ficaria MAIS fraco que
   antes da mudança. Então o halo e o brilho ficam estáticos no ponto alto: sem
   movimento nenhum e, ainda assim, mais visível que a versão sem pulso. */
@media (prefers-reduced-motion: reduce) {
  .ps-ring { animation: none; opacity: 0.4; }
  .ps-halo { animation: none; transform: scale(1.06); opacity: 0.92; }
  .ps-tri  { animation: none; filter: drop-shadow(0 0 20px rgba(0, 255, 95, 0.8)); }
}

/* ---------- Empilhado no celular ---------- */
/* 900px e não 768: a quebra tem que acontecer ANTES de a coluna do texto ficar
   estreita demais pro h1, e o h1 aqui é grande. Medido no ponto em que
   "no seu lugar?" começa a quebrar em três linhas. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-col { text-align: center; }
  .hero-col .lead { margin-left: auto; margin-right: auto; }
  .hero-col .hero-cta { justify-content: center; }
  .hero-col .seals { margin-left: auto; margin-right: auto; }
  .hero-col--play { padding-top: 0; }
  .play-shark { width: 100%; }
  /* No celular o vídeo de fundo não carrega (ver copy.js), e a miniatura
     borrada faz o papel dele. */
  .hero-bg-still, .hero-bg-media { filter: blur(16px) saturate(1.05) brightness(1.05); }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(0, 255, 95, 0.28);
  background: rgba(0, 255, 95, 0.04);
  border-radius: 999px;
  padding: 8px 15px;
  transition: transform 0.35s var(--ease), border-color 0.35s ease, background 0.35s ease;
}
.chip:hover { transform: scale(1.035); border-color: rgba(0, 255, 95, 0.55); background: rgba(0, 255, 95, 0.08); }
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: dotPulse 1.9s ease-in-out infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.32; transform: scale(0.68); } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; justify-content: center; }

.seals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 720px;
  margin: 40px auto 0;
  border: 1px solid var(--rail);
  border-radius: 4px;
  overflow: hidden;
}
.seals div {
  padding: 14px 8px 13px;
  font-family: var(--mono);
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  border-left: 1px solid var(--rail);
  transition: color 0.35s ease, background 0.35s ease;
}
.seals div:first-child { border-left: 0; }
.seals div:hover { color: var(--white); background: rgba(254, 254, 254, 0.03); }
@media (max-width: 720px) {
  .seals { grid-template-columns: repeat(2, 1fr); }
  .seals div:nth-child(3) { border-left: 0; }
  .seals div:nth-child(n + 3) { border-top: 1px solid var(--rail); }
}

/* --- PALCO: a operação saindo da origem e caindo nas mesas ------------- */
.stage {
  position: relative;
  max-width: 960px;
  margin: clamp(44px, 5vw, 72px) auto 0;
  border: 1px solid var(--rail);
  background: linear-gradient(180deg, rgba(11, 12, 13, 0.72), rgba(0, 0, 0, 0.35));
  padding: 16px 18px 12px;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.5s ease, box-shadow 0.6s ease;
}
.stage:hover { border-color: rgba(0, 255, 95, 0.24); box-shadow: 0 40px 110px -60px rgba(0, 255, 95, 0.4); }
.stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 95, 0.6), transparent);
}
.stage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  font-family: var(--mono); font-size: 9.8px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.stage-head .t { color: var(--text-3); }
.stage-head .live { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); }
.stage-head .live i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.stage svg { width: 100%; height: auto; display: block; overflow: visible; }

/* No celular o viewBox de 680 unidades encolhe pra 350px e o texto em mono
   vira 5px — ilegível. Em vez de deformar o diagrama, ele passa a rolar na
   horizontal com largura mínima legível, e ganha a dica de arraste.
   ⚠️ o display:none base tem que vir ANTES da media query: mesma
   especificidade, então a última regra do arquivo é que vale. */
.stage-drag { display: none; }
@media (max-width: 760px) {
  .stage-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stage-scroll::-webkit-scrollbar { display: none; }
  .stage svg { min-width: 600px; }
  .stage-drag {
    display: block;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: center;
  }
}
.stage-note {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--rail);
  font-family: var(--mono); font-size: 9.4px; letter-spacing: 0.08em;
  color: var(--text-3); text-align: center;
}
.mr-line { stroke: rgba(254, 254, 254, 0.1); stroke-width: 1; transition: stroke 0.4s ease; }
.mr-line.hot { stroke: rgba(0, 255, 95, 0.5); }
.mr-node rect { fill: rgba(11, 12, 13, 0.9); stroke: var(--hair); stroke-width: 1; transition: stroke 0.35s ease, fill 0.35s ease; }
.mr-node.on rect { stroke: rgba(0, 255, 95, 0.7); fill: rgba(0, 255, 95, 0.06); }
.mr-node text { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; fill: rgba(254, 254, 254, 0.45); }
.mr-node text.nm { fill: rgba(254, 254, 254, 0.8); }
.mr-node text.tk { font-weight: 700; fill: rgba(254, 254, 254, 0.18); text-anchor: end; transition: fill 0.4s ease; }
.mr-node.on text.tk { fill: var(--green); }
.mr-node.on text.st { fill: var(--green); }
.mr-src rect { fill: rgba(0, 122, 255, 0.08); stroke: rgba(0, 122, 255, 0.5); stroke-width: 1; }
.mr-src text { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; fill: rgba(254, 254, 254, 0.92); }
.mr-src text.sm { font-weight: 500; font-size: 8px; letter-spacing: 0.06em; fill: rgba(254, 254, 254, 0.48); }
.mr-pulse { fill: var(--green); filter: drop-shadow(0 0 5px rgba(0, 255, 95, 0.9)); }
.mr-flash { fill: none; stroke: var(--green); stroke-width: 1.2; opacity: 0; }

/* --- FAIXA DE CANDLES: grande, full-bleed, deriva lateral infinita ----- */
.tape {
  position: relative;
  height: clamp(190px, 23vw, 320px);
  border-top: 1px solid var(--rail);
  border-bottom: 1px solid var(--rail);
  overflow: hidden;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.035), transparent 55%, rgba(0, 255, 95, 0.03));
}
.tape canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* as pontas somem no preto pra a rolagem não ter costura visível */
.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #000 0%, transparent 9%, transparent 91%, #000 100%);
}

/* ======================= 06 · COMO FUNCIONA ============================
   Passos à esquerda dirigindo um painel vivo à direita (padrão centralhq).
*/
.flow {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(28px, 4.4vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
  /* `stretch`, era `start` (19/08/2026). Com `start`, a coluna da direita ficava
     na altura do proprio conteudo (430px de `min-height`) enquanto a esquerda
     crescia com os tres passos — e o Daniel leu isso como "conteudo quebrado".
     Esticando, a linha do grid define as duas, e o `.scene` (que e' absoluto com
     `justify-content: center`) absorve a altura extra como respiro em vez de
     deixar um vazio no pe. */
  align-items: stretch;
}
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr; } }

.flow-l { border-top: 1px solid var(--rail); }
.step {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 14px;
  padding: 24px 6px 24px 0;
  border: 0;
  border-bottom: 1px solid var(--rail);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.45s ease;
}
.step:hover { background: rgba(254, 254, 254, 0.016); }
.step .n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--text-3);
  padding-top: 3px;
  transition: color 0.4s ease;
}
.step .k {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.85vw, 21px);
  letter-spacing: -0.018em;
  color: rgba(254, 254, 254, 0.5);
  transition: color 0.4s ease;
}
.step .p {
  display: block;
  margin-top: 9px;
  font-size: 14.2px;
  line-height: 1.62;
  color: var(--text-3);
  transition: color 0.4s ease;
}
.step .p b { color: rgba(254, 254, 254, 0.8); font-weight: 700; }
/* a barra à esquerda é o marcador de passo ativo — cresce de cima pra baixo */
.step .bar {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease);
  box-shadow: 0 0 10px rgba(0, 255, 95, 0.5);
}
.step.on .bar { transform: scaleY(1); }
.step.on { padding-left: 18px; }
.step.on .n { color: var(--green); }
.step.on .k { color: var(--white); }
.step.on .p { color: var(--text-2); }

/* o painel acompanha a leitura dos passos em vez de ficar parado num canto —
   é o que dá a sensação de "o exemplo respondendo ao passo" da referência */
/* ⚠️ O `position: sticky` SAIU daqui, e nao por gosto: sticky num item de grid
   esticado nao tem pra onde deslizar — o box ja ocupa a linha inteira. Manter os
   dois era pedir uma coisa e a contraria. Nesta secao o sticky nunca teve efeito
   visivel de todo jeito: ela nao e' alta o suficiente pra rolar por dentro. */
.flow-r { position: relative; }
.panel {
  position: relative;
  border: 1px solid var(--rail);
  background: linear-gradient(180deg, rgba(11, 12, 13, 0.8), rgba(0, 0, 0, 0.45));
  /* `height: 100%` obedece o stretch do grid; o `min-height` fica como PISO pro
     caso empilhado (abaixo de 1000px), onde nao existe coluna vizinha pra igualar. */
  height: 100%;
  min-height: 430px;
  /* GRID DE DUAS FAIXAS (19/08/2026): cabecalho e palco. Antes as cenas eram
     `position: absolute` com `top`/`bottom` fixos e `justify-content: center` — e
     quando o painel passou a ESTICAR pra igualar a coluna da esquerda, o conteudo
     continuou colado no topo com meio painel vazio embaixo. Trocou um problema
     por outro.
     As tres cenas dividem a MESMA celula e se sobrepoem, que e o que o crossfade
     precisa; a faixa `1fr` cresce com o painel e `align-self:center` mantem a
     cena no meio. Sem calculo de pixel, sem posicionamento absoluto. */
  /* ⚠️ O `display: flex; flex-direction: column` QUE FICAVA AQUI EMBAIXO foi
     removido: ele vinha DEPOIS e vencia o `display: grid` — o grid nunca valeu, e
     o `grid-row` das cenas era ignorado em silencio. Ele nao fazia falta antes
     porque as cenas eram absolutas e nao participavam do fluxo. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px;
  overflow: hidden;
}
@media (max-width: 1000px) { .panel { min-height: 360px; } }
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.5), transparent);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rail);
  font-family: var(--mono); font-size: 9.6px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.panel-head .dots { display: inline-flex; gap: 5px; }
.panel-head .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--hair-2); }

.scene {
  /* Todas na segunda faixa e na mesma coluna: elas se EMPILHAM. A faixa fica com
     a altura da cena mais alta, entao trocar de passo nao faz o painel pular. */
  grid-row: 2; grid-column: 1;
  align-self: center;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.55s var(--ease-soft), transform 0.6s var(--ease), filter 0.55s var(--ease-soft);
}
.scene.on { opacity: 1; transform: none; filter: blur(0); pointer-events: auto; }

/* 01 — terminal da instalação */
.term { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.term li {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 12.4px; line-height: 1.5;
  color: var(--text-2);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease);
}
.scene.on .term li { opacity: 1; transform: none; }
.scene.on .term li:nth-child(1) { transition-delay: 0.1s; }
.scene.on .term li:nth-child(2) { transition-delay: 0.3s; }
.scene.on .term li:nth-child(3) { transition-delay: 0.5s; }
.scene.on .term li:nth-child(4) { transition-delay: 0.7s; }
.scene.on .term li:nth-child(5) { transition-delay: 0.95s; }
.term li b { color: var(--blue); font-weight: 700; }
.term li em { font-style: normal; color: var(--text-3); font-size: 11px; }
.term li.ok { color: var(--green); }
.term li.ok b { color: var(--green); }

/* 02 — a janela do dia */
.clock { display: grid; gap: 20px; }
.clock .cl-t { font-size: 9.8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.cl-track {
  position: relative;
  height: 2px;
  background: var(--hair);
  margin: 18px 0 26px;
}
.cl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  box-shadow: 0 0 12px rgba(0, 255, 95, 0.5);
  transform: scaleX(0);
  transform-origin: left;
}
.scene.on .cl-fill { animation: clRun 4.2s var(--ease-soft) 0.2s infinite; }
@keyframes clRun { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
/* As marcas ficam NAS PONTAS da trilha, então não podem ser centradas nelas:
   com translateX(-50%) metade de "DESCONECTA" saía fora do painel. A primeira
   ancora pela esquerda, a última pela direita. */
.cl-mark {
  position: absolute;
  top: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: rgba(254, 254, 254, 0.8);
  white-space: nowrap;
}
.cl-mark.a { left: 0; text-align: left; }
.cl-mark.b { right: 0; text-align: right; }
.cl-mark.a i { left: 0; }
.cl-mark.b i { left: auto; right: 0; }
/* "conecta" / "desconecta" sob cada ponta: é o único trabalho diário do
   assinante, e a janela é o lugar onde isso fica óbvio sem precisar de frase */
.cl-mark em {
  display: block;
  margin-top: 4px;
  font-style: normal; font-weight: 500;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green);
}
.cl-mark i {
  position: absolute;
  top: -18px;
  width: 1px; height: 12px;
  background: var(--hair-2);
}
.cl-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rail);
  border: 1px solid var(--rail);
}
.cl-days span {
  background: #000;
  padding: 12px 4px;
  text-align: center;
  font-family: var(--mono); font-size: 9.6px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--text-3);
}
.cl-note { font-size: 9.6px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* 03 — as contas recebendo */
.fills { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fills li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--rail);
  font-size: 12.4px;
  color: var(--text-3);
  opacity: 0.35;
  transition: opacity 0.5s ease, border-color 0.5s ease, background 0.5s ease;
}
.fills li b { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.scene.on .fills li { animation: fillIn 0.6s var(--ease) forwards; }
.scene.on .fills li:nth-child(1) { animation-delay: 0.2s; }
.scene.on .fills li:nth-child(2) { animation-delay: 0.5s; }
.scene.on .fills li:nth-child(3) { animation-delay: 0.8s; }
.scene.on .fills li:nth-child(4) { animation-delay: 1.1s; }
@keyframes fillIn {
  to { opacity: 1; border-color: rgba(0, 255, 95, 0.35); background: rgba(0, 255, 95, 0.045); }
}
.scene.on .fills li b { animation: fillTxt 0.6s var(--ease) forwards; }
.scene.on .fills li:nth-child(1) b { animation-delay: 0.2s; }
.scene.on .fills li:nth-child(2) b { animation-delay: 0.5s; }
.scene.on .fills li:nth-child(3) b { animation-delay: 0.8s; }
.scene.on .fills li:nth-child(4) b { animation-delay: 1.1s; }
@keyframes fillTxt { to { color: var(--green); } }
.fills-note { margin-top: 18px; font-size: 9.6px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); text-align: center; }

/* ====================== 07 · INFRAESTRUTURA ===========================
   Dois caminhos. Cartões no padrão dos "Latest insights" da referência:
   imagem em dither no topo, texto embaixo, divididos por hairline.
*/
.lane { margin-top: clamp(36px, 4.4vw, 60px); }
.lane-lab {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rail);
}
.lane-lab .ico { width: 18px; height: 18px; color: var(--blue); flex: 0 0 auto; }
.lane-lab .ico svg { width: 100%; height: 100%; display: block; }
.lane-lab .mn {
  font-size: 10.4px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-3);
}
.lane:nth-of-type(2) .lane-lab .ico { color: var(--green); }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .posts { grid-template-columns: 1fr; } }
.post {
  padding: 26px clamp(18px, 2vw, 28px) 30px;
  border-left: 1px solid var(--rail);
  border-bottom: 1px solid var(--rail);
  transition: background 0.5s ease;
}
.post:first-child { border-left: 0; }
@media (max-width: 940px) { .post { border-left: 0; } }
.post:hover { background: rgba(254, 254, 254, 0.016); }
.post-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rail);
  background: #000;
  margin-bottom: 22px;
}
.post-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;   /* é dither: interpolar suja o ponto */
  opacity: 0.82;
  transition: transform 0.8s var(--ease), opacity 0.5s ease;
}
.post:hover .post-img img { transform: scale(1.05); opacity: 1; }
.post p { margin-top: 10px; font-size: 14px; line-height: 1.62; color: var(--text-2); }
.post p b { color: var(--white); font-weight: 700; }

/* a ressalva do Mac vira caixa limpa: informa sem parecer alarme */
.note-box {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 16px !important;
  padding: 11px 13px;
  border: 1px solid var(--rail);
  background: rgba(254, 254, 254, 0.02);
  font-family: var(--mono);
  font-size: 10.8px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em;
  color: var(--text-3) !important;
}
.note-box .ico { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--text-3); }
.note-box .ico svg { width: 100%; height: 100%; display: block; }
/* min-width:0 pra o texto poder encolher dentro do flex em vez de estourar */
.note-box .tx { min-width: 0; }
.note-box .tx b { color: rgba(254, 254, 254, 0.78); font-weight: 700; }

/* ======================= 08 · TRACK RECORD ============================= */
.cells {
  display: grid;
  border: 1px solid var(--rail);
  margin-top: clamp(40px, 5vw, 56px);
  border-radius: 4px;
  overflow: hidden;
}
.cells.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .cells.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cells.c4 { grid-template-columns: 1fr; } }

/* c3 nasceu em 04/08/2026, quando as estatísticas passaram de 4 para 6 células (as
   duas sequências que o Lucas pediu). 3×2 fecha a grade cheia; com c4 sobrariam duas
   células órfãs numa segunda linha de quatro. As quebras acompanham as do c4 pra
   experiência não mudar de seção pra seção. */
.cells.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .cells.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cells.c3 { grid-template-columns: 1fr; } }

.cell {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  border-left: 1px solid var(--rail);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: background 0.5s ease;
}
.cell:first-child { border-left: 0; }
.cells.c4 > .cell:nth-child(4n + 1) { border-left: 0; }
/* c3: primeira de cada linha sem borda esquerda, e a segunda linha ganha borda de
   topo. A conta muda com a coluna, por isso cada breakpoint tem a sua. */
.cells.c3 > .cell:nth-child(3n + 1) { border-left: 0; }
.cells.c3 > .cell:nth-child(n + 4) { border-top: 1px solid var(--rail); }
@media (max-width: 940px) {
  .cells.c4 > .cell:nth-child(2n + 1) { border-left: 0; }
  .cells.c4 > .cell:nth-child(n + 3) { border-top: 1px solid var(--rail); }
  .cells.c3 > .cell:nth-child(3n + 1) { border-left: 1px solid var(--rail); }
  .cells.c3 > .cell:nth-child(2n + 1) { border-left: 0; }
  .cells.c3 > .cell:nth-child(n + 3) { border-top: 1px solid var(--rail); }
}
@media (max-width: 620px) {
  .cells.c4 > .cell { border-left: 0; }
  .cells.c4 > .cell + .cell { border-top: 1px solid var(--rail); }
  .cells.c3 > .cell { border-left: 0; }
  .cells.c3 > .cell + .cell { border-top: 1px solid var(--rail); }
}
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 122, 255, 0.09), transparent 70%);
}
.cell:hover { background: rgba(254, 254, 254, 0.016); }
.cell:hover::before { opacity: 1; }

.stat { min-height: 252px; justify-content: space-between; }
/* ============ MAIOR E MAIS DESTACADO (19/08/2026) ============
   Era clamp(38px, 4.4vw, 58px). A referência que o Daniel mandou vive de UM
   contraste: o número enorme contra um rótulo miúdo em mono. Em 58px contra um
   rótulo de 11px o salto existia, mas o número ainda dividia atenção com a linha
   de detalhe embaixo. Em 76px ele passa a ser a primeira coisa que a célula diz. */
.stat .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.stat .v .pre { font-size: 0.42em; line-height: 2.1; margin-right: 0.14em; opacity: 0.8; }
.stat .v .suf { font-size: 0.5em; line-height: 1.85; margin-left: 0.05em; opacity: 0.85; }
.stat .k {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-3);
  margin-top: 24px;
}
.stat .d {
  display: block;
  margin-top: 7px;
  font-size: 10.6px; font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: rgba(254, 254, 254, 0.3);
  min-height: 3em;
}
@media (max-width: 620px) { .stat .d { min-height: 0; } }
/* 🔴 NO CELULAR A CELULA PARA DE TER ALTURA MINIMA (19/08/2026).
   `min-height: 252px` + `justify-content: space-between` faz sentido no desktop,
   onde as celulas ficam 3 por linha e a altura fixa alinha as tres. Empilhadas em
   UMA coluna isso vira o oposto: medido com emulacao de celular, as seis somavam
   1.514px, com o numero grudado no topo, o rotulo no meio e a barra no pe — mais
   de 600px de vazio pra seis numeros.
   Sem o piso, cada celula abraca o proprio conteudo e a secao encolhe quase pela
   metade. Nada muda no desktop: a regra e' so daqui pra baixo. */
@media (max-width: 620px) {
  .stat { min-height: 0; justify-content: flex-start; gap: 14px; padding-block: 22px; }
  .stat .k { margin-top: 0; }
  .stat-idx { margin-top: 4px; }
}
/* ⚠️ AS CORES CARREGAM SIGNIFICADO e não foram achatadas numa cor de destaque só,
   como faz a referência. Verde é ganho, vermelho é perda, e as duas células
   NEUTRAS ("dias operados" e "dias positivos") passaram a ser AZUIS em 19/08 —
   antes eram brancas. Azul nesta marca é informação, que é exatamente o que elas
   são: contagem, não resultado. Seis números coloridos dão o impacto que o Daniel
   pediu sem apagar o que cada cor já dizia. */
.stat .v { color: #7ebbff; text-shadow: 0 0 40px rgba(0, 122, 255, 0.2); }
.stat.up .v { color: var(--green); text-shadow: 0 0 40px rgba(0, 255, 95, 0.26); }
/* o vermelho tem mais presença ótica que o verde no mesmo tamanho — sem
   segurar o glow, o pior dia grita mais alto que o melhor dia */
.stat.down .v { color: #ff5b5b; text-shadow: none; }

/* ---------- barra hachurada + índice, no pé de cada célula ---------- */
.stat-idx {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
}
/* A hachura é `repeating-linear-gradient`, não imagem: escala em qualquer DPI,
   acompanha a cor da célula e pesa zero. */
.si-bar {
  flex: 0 0 auto;
  width: 58px; height: 9px;
  background-image: repeating-linear-gradient(115deg,
    currentColor 0 1.5px, transparent 1.5px 4.5px);
  opacity: 0.5;
}
/* A linha fina que continua até o `//00N` é a mesma régua do resto da página. */
.stat-idx::before {
  content: ""; order: 2;
  flex: 1 1 auto; height: 1px;
  background: var(--rail);
}
.si-n {
  order: 3; flex: 0 0 auto;
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  color: var(--text-3);
}
.stat .stat-idx { color: #7ebbff; }
.stat.up .stat-idx { color: var(--green); }
.stat.down .stat-idx { color: #ff5b5b; }

.odo { display: inline-flex; align-items: flex-start; height: 1em; overflow: hidden; line-height: 1; }
.odo i {
  display: block; font-style: normal; line-height: 1; flex: 0 0 auto;
  transition: transform 1.25s cubic-bezier(0.22, 1, 0.28, 1), filter 0.6s ease;
}
.odo i span { display: block; height: 1em; line-height: 1; }
.odo.rolling i { filter: blur(1.2px); }

/* download centralizado + frase de transparência */
.dl { margin-top: 34px; text-align: center; }
.dl .note {
  margin: 16px auto 0;
  max-width: 74ch;
  font-size: 10.6px;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--text-3);
}

/* ========================== 09 · LICENÇA ==============================
   Centrado e premium (supercommon): preço grande, rótulo de taxa única
   acima do botão, letra fina com separadores.
*/
.lic {
  position: relative;
  max-width: 940px;
  margin: clamp(44px, 5vw, 66px) auto 0;
  border: 1px solid rgba(0, 255, 95, 0.26);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(0, 255, 95, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(11, 12, 13, 0.94), rgba(0, 0, 0, 0.7));
  border-radius: var(--rad, 0px);
  box-shadow: 0 50px 140px -70px rgba(0, 255, 95, 0.45);
  overflow: hidden;
  transition: border-color 0.5s ease, box-shadow 0.6s ease;
}
.lic:hover { border-color: rgba(0, 255, 95, 0.5); box-shadow: 0 50px 150px -65px rgba(0, 255, 95, 0.55); }
.lic::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.lic-top { padding: clamp(38px, 4.6vw, 62px) clamp(24px, 4vw, 56px); text-align: center; }
.plan-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.8px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(0, 255, 95, 0.3);
  padding: 6px 11px;
}
.lic-name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(23px, 2.6vw, 32px);
  letter-spacing: -0.025em;
  margin-top: 20px;
}
.price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
/* preço "de", riscado — o "tracinho" que o Lucas pediu */
.was {
  font-size: 15px; font-weight: 500;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  align-self: center;
}
.promo {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px auto 0;
  padding: 7px 14px;
  border: 1px solid rgba(0, 255, 95, 0.32);
  background: rgba(0, 255, 95, 0.06);
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green);
}
.ast { color: var(--green); font-weight: 700; }
/* a nota do asterisco tem que ser legível, não letra miúda escondida:
   é ela que qualifica os 12 meses de garantia do valor */
.lic-ast {
  margin-top: 16px;
  font-size: 12.4px;
  line-height: 1.55;
  color: var(--text-2);
}
.lic-ast b { color: rgba(254, 254, 254, 0.92); }
/* destaque em linha, usado nos selos do hero */
.hot { color: var(--green); }
.price .cur { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--text-3); }
/* Era clamp(64px, 8.4vw, 116px), de quando o preço mensal era o único número da
   seção e ocupava a largura toda. Com DOIS cards lado a lado, 116px estoura a
   coluna — e dois números gigantes competindo é o mesmo que nenhum em destaque. */
.price .v {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 5.4vw, 68px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.price .per { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text-2); }

/* ============ DUAS COBRANÇAS, DOIS CARDS (19/08/2026) ============
   Substitui o `.once` (a caixinha discreta da taxa única) e reequilibra a
   hierarquia: as duas cobranças passam a ter o mesmo peso, porque a primeira
   pergunta de quem compra é "quanto sai hoje, tudo somado?".

   ⚠️ As cores são DIFERENTES de propósito — verde na recorrente, azul na única.
   Verde nesta marca é dinheiro; azul é informação. Duas cobranças na mesma cor
   pareceriam a mesma cobrança partida em duas. */
/* ============ OS DOIS CARDS VIRARAM CUPOM (19/08/2026) ============
   Segunda rodada, com as referências que o Daniel mandou — e o foco declarado
   dele foi a primeira: "parece um cupom, dá uma sensação premium e que está de
   fato pagando um valor com desconto".

   O que faz a peça parecer cupom são três coisas, e nenhuma é a cor:
     1. a PERFURAÇÃO — linha pontilhada com meia-lua recortada nas duas bordas,
        como um bilhete destacável. É o que diz "isto é um vale", não "isto é uma
        caixa de preço";
     2. o número em GRADIENTE METÁLICO, claro no topo e escuro no pé. Cor chapada
        lê como texto; o degradê lê como metal estampado;
     3. o "de/por" na MESMA linha do valor. Cupom só tem sensação de desconto se
        o preço antigo estiver do lado do novo, não escondido em outro canto.

   ⚠️ AS DUAS AGORA SÃO VERDES, por decisão do Daniel. Eu tinha usado azul na taxa
   única com o argumento de que verde é dinheiro e azul é informação — ele pediu as
   duas em verde, e o azul foi reatribuído à tarja da mentoria, o que resolve o
   choque que o argumento original tentava evitar. O que separa as duas agora é o
   RÓTULO e o "uma vez" contra "/mês", que é o que o cliente de fato precisa
   distinguir. */
.lic-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  /* 46px e não 26px: o ícone agora nasce METADE PRA FORA do topo do card, e com
     a margem antiga ele encostava no "Shark Pro Copy Master" logo acima. */
  margin-top: 46px;
  text-align: center;
}
@media (max-width: 720px) { .lic-duo { grid-template-columns: minmax(0, 1fr); row-gap: 46px; } }

.lic-card {
  position: relative;
  display: grid; gap: 4px; justify-items: center; align-content: start;
  /* Topo: espaço pro ícone que invade a borda. Pé: espaço pra perfuração. */
  padding: clamp(34px, 3.4vw, 44px) clamp(16px, 2vw, 26px) 18px;
  /* ⚠️ O CARD NÃO PINTA NADA, e não é descuido: fundo e aresta vivem no
     `.lc-surf`, que é a única camada mascarada. `overflow: hidden` também não
     entra aqui — cortaria a metade do ícone que fica de fora. */
  background: none;
  transition: transform 0.5s var(--ease);
}
.lic-card > * { position: relative; z-index: 1; }
.lic-card:hover { transform: translateY(-3px); }

/* ---------- a placa: a única camada recortada ---------- */
.lc-surf {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 18px;
  /* A aresta é sombra INTERNA e não `border`: borda CSS é pintada na borda-box e
     a máscara a deixaria em dois cotos no ponto do recorte. */
  box-shadow: inset 0 0 0 1px rgba(0, 255, 95, 0.5);
  background: linear-gradient(180deg, rgba(0, 255, 95, 0.14), rgba(0, 255, 95, 0.045));
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.lic-card:hover .lc-surf {
  background: linear-gradient(180deg, rgba(0, 255, 95, 0.19), rgba(0, 255, 95, 0.07));
  /* Redeclarado: `box-shadow` não acumula, e sem repetir o `inset` o card perderia
     o contorno no hover. */
  box-shadow: inset 0 0 0 1px rgba(0, 255, 95, 0.85);
}

/* ---------- o ícone, metade fora do frame ---------- */
.lc-ico {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  /* 56px, era 40 — "deixa os ícones maiores" */
  width: 56px; height: 56px;
  border-radius: 16px;
  color: var(--green);
  border: 1px solid rgba(0, 255, 95, 0.5);
  /* Fundo OPACO, e isto não é escolha estética: com fundo translúcido a borda do
     card apareceria atravessando o ícone por dentro. Opaco, ele recorta a borda e
     é o que faz o crachá parecer apoiado em cima da placa. */
  background: #071109;
  box-shadow: 0 0 0 5px rgba(2, 6, 12, 0.9), 0 8px 26px rgba(0, 0, 0, 0.6);
  transition: transform 0.5s var(--ease), border-color 0.45s ease;
}
.lc-ico svg { width: 27px; height: 27px; }
.lic-card:hover .lc-ico { transform: translate(-50%, -50%) scale(1.06); border-color: var(--green); }

.lc-lab {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #8affbc;
}
.lc-sub { font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 26px; }

/* ---------- a perfuração do cupom ---------- */
/* ============ RECORTE DE VERDADE, POR MÁSCARA (19/08/2026) ============
   Terceira tentativa, e a primeira que é um buraco em vez de uma pintura.

   As duas anteriores desenhavam CÍRCULOS da cor do fundo em cima da borda. O
   Daniel matou as duas com o mesmo argumento, e ele estava certo: na referência
   o brilho da quina do card ATRAVESSA o recorte — ou seja, aquilo é um vazio na
   silhueta, não um disco pintado. Disco pintado exige acertar a cor do que está
   atrás, e o que está atrás aqui é um gradiente; não tem cor certa pra acertar.

   `mask` com dois radiais compostos por `intersect` remove os dois semicírculos
   da silhueta do card. O que passa a aparecer no vazio é exatamente o que estiver
   atrás — gradiente, brilho, textura, o que for.

   ⚠️ O `border` SAIU e virou `box-shadow: inset`. Uma borda CSS é pintada na
   borda-box e a máscara a corta em dois cotos no ponto do recorte; a sombra
   interna acompanha a mesma pintura e é mascarada junto, sem deixar coto.

   ⚠️ A ALTURA DA PERFURAÇÃO é uma variável (`--serra`), medida do PÉ do card, e o
   mesmo valor governa a máscara E a linha pontilhada. Foi o que travava esta
   solução antes: eu não sabia o `y`. Sabendo que o rodapé do cupom tem uma linha
   só, o `y` passa a ser conhecido — e as duas peças param de poder divergir.

   ⚠️ `-webkit-mask-composite: source-in` junto do padrão: o Safari só entende a
   versão prefixada, e com o nome antigo do valor. Sem ela o card aparece SEM
   máscara nenhuma (ou seja, sem recorte) em vez de quebrado — falha aberta. */
.lic-card { --serra: 58px; --serra-r: 13px; }
.lc-surf {
  -webkit-mask-image:
    radial-gradient(circle var(--serra-r) at 0 calc(100% - var(--serra)), transparent 97%, #000 100%),
    radial-gradient(circle var(--serra-r) at 100% calc(100% - var(--serra)), transparent 97%, #000 100%);
  mask-image:
    radial-gradient(circle var(--serra-r) at 0 calc(100% - var(--serra)), transparent 97%, #000 100%),
    radial-gradient(circle var(--serra-r) at 100% calc(100% - var(--serra)), transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Os tracinhos sao GROSSOS e espacados, como na referencia — `border: dashed` do
   CSS entrega tracos finos e apertados, que de longe le como uma linha continua e
   perde o efeito de picotado. `repeating-linear-gradient` deixa escolher a
   espessura e o vao de cada traco. */
.lc-serra {
  position: absolute;
  left: 16px; right: 16px;
  bottom: var(--serra);
  height: 2px;
  background-image: repeating-linear-gradient(90deg,
    rgba(0, 255, 95, 0.55) 0 9px, transparent 9px 17px);
  border-radius: 2px;
}

/* ---------- o valor, em metal ---------- */
/* `background-clip: text` pinta o degradê DENTRO do glifo. `color: transparent`
   é obrigatório junto — sem ele o texto opaco cobre o degradê e o efeito não
   aparece. O `-webkit-` fica porque o Safari só entende a versão prefixada. */
.lic-card .price .v {
  /* O fim do degrade era #0f7a3c e derrubava a legibilidade do algarismo no pe —
     metal premium na referencia vai de claro a MEDIO, nunca ao escuro. */
  background: linear-gradient(170deg, #f2fff8 2%, #9dffc6 26%, var(--green) 60%, #1cbf62 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 6px 24px rgba(0, 255, 95, 0.22));
}
.lic-card .price .cur { color: rgba(138, 255, 188, 0.85); font-size: 22px; }
.lic-card .price .per { color: #8affbc; font-size: 14px; }
.lic-card .price .was { color: rgba(254, 254, 254, 0.42); font-size: 16px; }
/* 🔴 O "DE" VAI PRA LINHA DE CIMA, SOZINHO. Medido em 390px: com os três na mesma
   linha, o sufixo mais longo ("uma vez", contra "/mês") não caberá e o `flex-wrap`
   jogava ele pra baixo — o card da instalação ficava com "US$ 150" numa linha e
   "uma vez" na seguinte, o que lê como layout quebrado.
   Empurrando o preço antigo pra cima, a linha principal fica sempre
   `US$ <valor> <sufixo>` e cabe nos dois cards. E ainda é mais fiel ao cupom: "de"
   em cima, "por" grande embaixo. */
.lic-card .price { flex-wrap: wrap; row-gap: 0; }
.lic-card .price .was { flex: 1 0 100%; margin-bottom: -2px; }

/* ============ A TARJA DOS 15 DIAS DE MENTORIA (19/08/2026) ============
   Fica entre os cards e o botão: é a última coisa lida antes do clique, e a única
   linha da tela que entrega algo além do software.

   ⚠️ AZUL, e o dourado-âmbar que estava aqui SAIU a pedido do Daniel (19/08/2026).
   Meu argumento pro âmbar era não ter uma terceira peça verde entre dois blocos
   verdes; o azul resolve o mesmo problema e é cor da casa — o âmbar não era. E
   ele ficou livre justamente porque os dois cards de preço passaram a ser verdes,
   liberando o azul que a taxa única usava. */
.lic-bonus {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 24px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 255, 0.45);
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.13), rgba(0, 122, 255, 0.04));
  text-align: left;
}
.lb-ico {
  /* ⚠️ SEM MOLDURA, a pedido (19/08/2026): "não gosto de ícones em frames".
     Sem a caixa, o ícone precisa de MASSA pra não virar um risco perdido ao lado
     do texto — daí 34px de traço com `stroke-width` reforçado e o brilho, que
     fazem o papel que a moldura fazia antes. */
  display: block; flex: 0 0 auto;
  color: #7cc0ff;
  filter: drop-shadow(0 0 16px rgba(0, 122, 255, 0.45));
}
.lb-ico svg { width: 34px; height: 34px; stroke-width: 1.7; display: block; }
.lb-tx { font-size: 13.8px; line-height: 1.62; color: var(--text-2); }
/* A chamada em caixa alta com tracking: ela deixou de ser "mais uma linha em
   negrito" e passou a ter a voz de uma etiqueta de oferta. */
.lb-tx b {
  display: block; margin-bottom: 5px;
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #d3e9ff;
}
.lb-tx b .free { color: var(--green); }
/* `b.inl` e' negrito DENTRO do paragrafo. Sem esta regra ele herdaria o `.lb-tx b`
   de cima — caixa alta, display block e 18px no meio da frase. */
.lb-tx b.inl {
  display: inline; margin: 0;
  font-family: inherit; font-size: inherit; font-weight: 700;
  letter-spacing: normal; text-transform: none;
  color: rgba(254, 254, 254, 0.92);
}

.lic-cta { margin-top: 30px; display: flex; justify-content: center; }
.lic-cta .btn { min-width: min(100%, 380px); justify-content: center; }
.lic-fine {
  margin-top: 16px;
  font-size: 10.4px; letter-spacing: 0.06em;
  color: var(--text-3);
}

.lic-bot {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border-top: 1px solid var(--rail);
  background: rgba(0, 0, 0, 0.3);
}
@media (max-width: 900px) { .lic-bot { grid-template-columns: 1fr; } }
.lic-bot .feats { padding: clamp(24px, 3vw, 38px); }
.lic-bot .human { margin: clamp(24px, 3vw, 38px); border-left: 0; }
@media (min-width: 901px) { .lic-bot .human { border-left: 1px solid var(--rail); margin: 0; padding: clamp(24px, 3vw, 38px); border-radius: 0; background: none; } }

/* ============ SIMULAÇÃO DO PAINEL (19/08/2026) ============
   Substitui o `.humans` (dois cards de texto que descreviam o painel). Agora a
   coluna MOSTRA o painel — os dois textos viraram itens da lista ao lado.

   ⚠️ `align-content: center`: a lista da esquerda é mais alta que o mock, e sem
   isto ele encostaria no topo deixando um vazio embaixo — que é exatamente a
   "impressão de conteúdo quebrado" que o Daniel apontou na outra seção. */
.lic-mock { margin: clamp(24px, 3vw, 38px); display: grid; align-content: center; gap: 12px; }
@media (min-width: 901px) {
  .lic-mock { border-left: 1px solid var(--rail); margin: 0; padding: clamp(24px, 3vw, 38px); }
}
.lm-win {
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  overflow: hidden;
  background: #06080c;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}
.lm-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: rgba(254, 254, 254, 0.04);
  border-bottom: 1px solid var(--rail);
}
.lm-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(254, 254, 254, 0.2); }
.lm-url {
  margin-left: 8px; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.02em; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-body { padding: 14px; display: grid; gap: 9px; }
.lm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lm-ola { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--white); }
.lm-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.lm-live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: dotPulse 1.9s ease-in-out infinite;
}
/* A barra em 2/3 não é enfeite: ela é a única pista de que o painel tem FIM —
   sem ela, três passos podem ser lidos como uma lista infinita. */
.lm-prog { height: 3px; border-radius: 999px; background: rgba(254, 254, 254, 0.09); overflow: hidden; }
.lm-prog span { display: block; width: 66%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }

.lm-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--rail); }
.lm-step.is-ok { background: rgba(0, 255, 95, 0.05); border-color: rgba(0, 255, 95, 0.22); }
.lm-step.is-now { background: rgba(0, 122, 255, 0.06); border-color: rgba(0, 122, 255, 0.3); }
.lm-n {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
}
.lm-step.is-ok .lm-n { color: var(--green); background: rgba(0, 255, 95, 0.14); }
.lm-step.is-now .lm-n { color: #7ebbff; background: rgba(0, 122, 255, 0.18); }
.lm-n svg { width: 11px; height: 11px; stroke-width: 2.6; }
.lm-tx { display: grid; gap: 1px; min-width: 0; }
.lm-tx b { font-size: 11.6px; font-weight: 700; color: rgba(254, 254, 254, 0.9); }
.lm-tx small { font-size: 9.6px; color: var(--text-3); }
.lm-note { font-size: 11px; text-align: center; color: var(--text-3); }

.feats { list-style: none; margin: 0; padding: 0; }
.feats li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rail);
  font-size: 13.8px; line-height: 1.55;
  color: var(--text-2);
  transition: color 0.35s ease, padding-left 0.4s var(--ease);
}
.feats li:first-child { padding-top: 0; }
.feats li:last-child { border-bottom: 0; }
.feats li:hover { color: rgba(254, 254, 254, 0.9); padding-left: 5px; }
.feats li b { color: var(--white); font-weight: 700; }
.feats li .ck { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; color: var(--green); transition: transform 0.4s var(--ease); }
.feats li .ck svg { width: 100%; height: 100%; display: block; }
.feats li:hover .ck { transform: scale(1.2); }

.human {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--rail);
  background: rgba(0, 122, 255, 0.045);
  transition: border-color 0.4s ease;
}
.human:hover { border-color: rgba(0, 122, 255, 0.4); }
.human .av {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  box-shadow: 0 0 16px rgba(0, 122, 255, 0.45);
}
.human .tx { font-size: 12.8px; line-height: 1.55; color: var(--text-2); }
.human .tx b { color: var(--white); }

/* ==================== 10 · DISCLAIMER CALMO ============================
   Tom do hero de resources da getharvest: informa, não assusta. Zero
   vermelho — vermelho na Shark significa perda, e aqui não é perda, é aviso.
*/
.sec.calm { overflow: hidden; }
.calm-glow {
  position: absolute;
  top: -10%; right: -6%;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.1), transparent 66%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.calm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(36px, 4.4vw, 56px);
  background: var(--rail);
  border: 1px solid var(--rail);
}
@media (max-width: 800px) { .calm-grid { grid-template-columns: 1fr; } }
.calm-item {
  background: #000;
  padding: clamp(24px, 2.8vw, 34px);
  transition: background 0.5s ease;
}
.calm-item:hover { background: rgba(254, 254, 254, 0.014); }
.calm-item .n {
  display: block;
  font-size: 10.4px; font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(254, 254, 254, 0.26);
  margin-bottom: 14px;
}
.calm-item .h3 { font-size: 17px; }
.calm-item p {
  margin-top: 10px;
  font-size: 13.4px;
  line-height: 1.72;
  color: var(--text-3);
}

/* Cláusula em ALERTA — a única vermelha da seção (06/08/2026, pedido do Lucas).
   Exceção deliberada ao "zero vermelho" declarado no comentário do bloco acima:
   os outros itens ISENTAM, este PROÍBE, e a consequência é banimento sem
   reembolso. O racional completo está no $DISC do copy.php.
   Usa o #ff5b5b do sistema (o mesmo dos dias negativos do calendário) em vez de
   um vermelho novo — destaque não é motivo pra abrir uma segunda paleta. */
.calm-item.alerta {
  background: rgba(255, 91, 91, 0.05);
  border: 1px solid rgba(255, 91, 91, 0.4);
  box-shadow: inset 0 0 40px rgba(255, 91, 91, 0.07);
}
.calm-item.alerta:hover { background: rgba(255, 91, 91, 0.075); }
.calm-item.alerta .n { color: rgba(255, 122, 122, 0.75); }
.calm-item.alerta .h3 { color: #ff5b5b; text-shadow: 0 0 20px rgba(255, 91, 91, 0.45); }
.calm-item.alerta p { color: rgba(254, 254, 254, 0.74); }
.calm-item.alerta p b { color: #ff9a9a; }
/* Mobile mantém a cor (que é o destaque) e perde só o brilho — mesma disciplina
   do resto da auditoria de 04/08: nada de sombra e blur em tela pequena. */
@media (max-width: 767px) {
  .calm-item.alerta { box-shadow: none; }
  .calm-item.alerta .h3 { text-shadow: none; }
}

/* ============================ 11 · FAQ ================================ */
.faq { margin-top: clamp(40px, 5vw, 56px); max-width: 920px; border-top: 1px solid var(--rail); }
.faq-i { border-bottom: 1px solid var(--rail); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 24px 4px;
  background: none; border: 0;
  cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(16px, 1.75vw, 19.5px);
  letter-spacing: -0.015em;
  color: var(--white);
  transition: color 0.35s ease, padding-left 0.45s var(--ease);
}
.faq-q:hover { color: var(--green); padding-left: 10px; }
.faq-q .cx {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--text-3);
  transition: transform 0.5s var(--ease), color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.faq-q:hover .cx { color: var(--green); border-color: rgba(0, 255, 95, 0.5); background: rgba(0, 255, 95, 0.06); }
.faq-i.open .faq-q .cx { transform: rotate(45deg); color: var(--green); border-color: rgba(0, 255, 95, 0.5); }
.faq-q .cx svg { width: 13px; height: 13px; }
/* Também atrás de `.js`: sem JS as 12 respostas ficavam em altura zero para sempre,
   e uma delas é o único lugar da página que informa o limite de contas. Sem JS o FAQ
   vira uma lista de perguntas com as respostas já abertas — feio, mas legível. */
.js .faq-a { height: 0; overflow: hidden; transition: height 0.52s var(--ease); }
.faq-a > div {
  padding: 0 60px 26px 4px;
  font-size: 14.2px; line-height: 1.7;
  color: var(--text-2);
}
/* O fade da resposta também depende de JS: sem o `.js` a altura já abre (regra
   acima), mas se o opacity:0 ficasse fora do guard a resposta teria altura e seria
   invisível — pior que fechada, porque empurra a página sem mostrar nada. */
.js .faq-a > div {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-soft) 0.08s, transform 0.5s var(--ease) 0.08s;
}
.faq-i.open .faq-a > div { opacity: 1; transform: none; }
.faq-a b { color: var(--white); }
@media (max-width: 640px) { .faq-a > div { padding-right: 12px; } }

/* ============== 12 · CTA FINAL, WORDMARK, FOOTER ======================= */
.final { padding: clamp(60px, 7vw, 96px) 0 0; border-top: 1px solid var(--rail); }
.final-card {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 118px) clamp(24px, 4vw, 64px);
  text-align: center;
  border: 1px solid rgba(0, 255, 95, 0.22);
  background:
    radial-gradient(120% 100% at 50% 130%, rgba(0, 255, 95, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(11, 12, 13, 0.5), rgba(0, 0, 0, 0.9));
  border-radius: var(--rad, 0px);
  transition: border-color 0.6s ease;
}
.final-card:hover { border-color: rgba(0, 255, 95, 0.4); }
.final-card > * { position: relative; z-index: 2; }
.final-card h2 { max-width: 20ch; margin: 0 auto; }
.final-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.final-card .fine {
  margin: 30px auto 0;
  max-width: 66ch;
  font-family: var(--mono);
  font-size: 10.6px; font-weight: 500;
  letter-spacing: 0.04em; line-height: 1.75;
  color: var(--text-3);
}

.mark {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rail);
  padding: clamp(30px, 4vw, 54px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mark-run { display: flex; width: max-content; animation: markRun 42s linear infinite; }
.mark:hover .mark-run { animation-play-state: paused; }
.mark span {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.92; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 254, 254, 0.13);
  padding-right: 0.32em;
  white-space: nowrap;
  transition: -webkit-text-stroke-color 0.6s ease;
}
.mark:hover span { -webkit-text-stroke-color: rgba(0, 122, 255, 0.45); }
@keyframes markRun { to { transform: translateX(-50%); } }
.mark .shark {
  position: absolute;
  bottom: 22%; left: -18%;
  width: clamp(96px, 12vw, 168px);
  opacity: 0.42;
  filter: drop-shadow(0 0 18px rgba(0, 122, 255, 0.35));
  animation: swim 30s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes swim {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(35vw) translateY(-14px) rotate(-2deg); }
  50% { transform: translateX(70vw) translateY(4px) rotate(1.5deg); }
  75% { transform: translateX(105vw) translateY(-10px) rotate(-1deg); }
  100% { transform: translateX(140vw) translateY(0) rotate(0deg); }
}

.foot { border-top: 1px solid var(--rail); padding: 44px 0 calc(56px + env(safe-area-inset-bottom)); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 22px 30px; align-items: baseline; }
.foot-grid a {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-3);
  transition: color 0.3s ease;
}
.foot-grid a:hover { color: var(--green); }
.foot .dis {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--rail);
  font-size: 11.5px; line-height: 1.75;
  color: var(--text-3);
  max-width: 96ch;
}
.foot .cr { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-3); }

.pblur {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 108px;
  z-index: 250;
  pointer-events: none;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  transition: opacity 0.5s ease;
}
.pblur.off { opacity: 0; }
@media (max-width: 860px) { .pblur { display: none; } }

.mobar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 280;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--hair-2);
  transform: translateY(130%);
  transition: transform 0.5s var(--ease);
}
.mobar.on { transform: none; }
@media (min-width: 861px) { .mobar { display: none; } }

/* =========================== 13 · TOOLTIP ============================= */
/* link do tooltip inteiro em verde — texto E tracejado — por pedido do Lucas
   (30/07). Primeira tentativa só deixou o tracejado verde e manteve o texto
   herdando a cor do parágrafo; corrigido para o link todo ficar verde. */
.tip {
  border-bottom: 1px dashed rgba(0, 255, 95, 0.5);
  cursor: help;
  color: var(--green);
  transition: color 0.3s ease, border-color 0.3s ease, text-shadow 0.3s ease;
}
.tip:hover, .tip:focus-visible {
  color: var(--green);
  border-bottom-color: var(--green);
  text-shadow: 0 0 14px rgba(0, 255, 95, 0.45);
}
#tip {
  position: fixed;
  z-index: 600;
  max-width: 290px;
  padding: 11px 14px;
  background: rgba(6, 7, 8, 0.94);
  border: 1px solid var(--hair-2);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  line-height: 1.55; letter-spacing: 0.01em;
  color: rgba(254, 254, 254, 0.86);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 122, 255, 0.12);
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.26s var(--ease-soft), transform 0.3s var(--ease), filter 0.26s var(--ease-soft);
}
#tip.on { opacity: 1; transform: none; filter: blur(0); }
#tip::before {
  content: "";
  position: absolute;
  left: var(--ax, 50%); bottom: -4px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  background: rgba(6, 7, 8, 0.94);
  border-right: 1px solid var(--hair-2);
  border-bottom: 1px solid var(--hair-2);
  transform: rotate(45deg);
}
#tip.below::before { bottom: auto; top: -4px; border: 0; border-left: 1px solid var(--hair-2); border-top: 1px solid var(--hair-2); }
#tip b { color: var(--green); font-weight: 700; }

/* ============================ MODAL =================================== */
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(10px);
}
.modal.on { display: flex; }
.modal-in {
  width: 100%; max-width: 540px; max-height: 92vh; overflow: auto;
  background: var(--graphite-2);
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  padding: 30px;
  position: relative;
  animation: modalIn 0.5s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(0.97); filter: blur(10px); } }
.modal-in .eb { margin-bottom: 14px; }
.modal-in h3 { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; }
.modal-in p { color: var(--text-2); font-size: 13.6px; margin: 8px 0 20px; }
.modal-in .x {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--rail); border-radius: 50%;
  color: var(--text-3); font-size: 18px; cursor: pointer; line-height: 1;
  transition: transform 0.4s var(--ease), color 0.3s ease, border-color 0.3s ease;
}
.modal-in .x:hover { transform: rotate(90deg); color: #ff5b5b; border-color: rgba(255, 91, 91, 0.5); }
.modal-in iframe { width: 100% !important; min-height: 460px; border: 0; border-radius: 8px; }

/* ================== TERMOS — MODAL "DOCUMENTO" CLARO ====================
   Inverte só ESTE modal pro tema claro (papel), sem mexer em nenhuma
   variável global do tema escuro do resto do site. --doc-accent troca o
   --green neon (ilegível em fundo branco) por um verde escuro que lê bem
   sobre papel, mantendo a mesma família de cor (verde = conversão). */
.modal.doc {
  --doc-bg: #f6f3ec;
  --doc-ink: #17140f;
  --doc-ink-2: rgba(23, 20, 15, 0.68);
  --doc-ink-3: rgba(23, 20, 15, 0.46);
  --doc-hair: rgba(23, 20, 15, 0.12);
  --doc-hair-2: rgba(23, 20, 15, 0.22);
  --doc-accent: #0a6b34;
  --doc-accent-ink: #f6f3ec;
  --doc-warn: #8a4b00;
  --doc-warn-bg: rgba(138, 75, 0, 0.08);
  --doc-danger: #a32a1f;
  --doc-danger-bg: rgba(163, 42, 31, 0.07);
}
/* max-height explícito (não só flex) + overflow:hidden no card, com scroll só
   no filho .doc-scroll — evita o bug clássico de iOS Safari onde um modal
   position:fixed com scroll interno não engata direito. */
.modal.doc .modal-in {
  background: var(--doc-bg);
  color: var(--doc-ink);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-height: 88vh;
}
.modal.doc .x {
  border-color: var(--doc-hair-2);
  color: var(--doc-ink-3);
  background: var(--doc-bg);
}
.modal.doc .x:hover { color: #c0392b; border-color: rgba(192, 57, 43, 0.4); }

.doc-head { flex: 0 0 auto; padding: 32px 34px 0; }
.doc-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 27px; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--doc-ink);
}
.doc-updated { font-size: 12.5px; margin: 8px 0 4px;
  /* Cor LITERAL, nao var(): esta linha diz QUAL versao do termo a pessoa
     esta assinando e ja foi reportada como invisivel duas vezes. Depender
     de custom property aqui so multiplica as formas de falhar. */
  color: rgba(23, 20, 15, 0.75) !important;
}

.doc-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 34px 4px;
  border-top: 1px solid var(--doc-hair);
  margin-top: 18px;
}
.doc-scroll p { margin-bottom: 14px; font-size: 14.5px; line-height: 1.7; color: var(--doc-ink-2); }
.doc-scroll p b { color: var(--doc-ink); }

/* Cláusula em destaque (fundo cinza), pedido do Lucas em 11/08/2026. QUAIS são
   fica em SPT_COPY_TERMS_DESTAQUE, no PHP — aqui é só o visual.

   A tinta escurece junto com o fundo: sobre a placa cinza, texto a 68% de
   opacidade fica com MENOS contraste que o resto do documento, e destaque que
   piora a leitura é destaque ao contrário. */
.doc-scroll p.cl-dest {
  background: rgba(23, 20, 15, 0.055);
  border-left: 3px solid var(--doc-hair-2);
  border-radius: 0 6px 6px 0;
  padding: 13px 16px;
  color: rgba(23, 20, 15, 0.82);
}

.doc-bar {
  flex: 0 0 auto;
  padding: 18px 34px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--doc-hair);
  background: var(--doc-bg);
}
/* Redefine .agree/.agree-lock/.btn-submit/.agree-err/.fine com as cores do
   tema claro — copy.css não herda o <style> escuro de inc/page.php, então
   tudo é escopado localmente aqui dentro de .doc-bar. */
.doc-bar .agree-lock {
  border: 1px solid rgba(138, 75, 0, 0.3); background: var(--doc-warn-bg); color: var(--doc-warn);
  font-size: 13px; padding: 10px 14px; border-radius: 8px; margin: 0 0 16px;
}
.doc-bar .agree-lock.ok { border-color: rgba(10, 107, 52, 0.35); background: rgba(10, 107, 52, 0.08); color: var(--doc-accent); }
.doc-bar .agree-err {
  border-left: 3px solid var(--doc-danger); background: var(--doc-danger-bg);
  padding: 12px 14px; border-radius: 0 8px 8px 0; margin: 0 0 16px;
  color: var(--doc-ink); font-size: 13.5px;
}
/* ============ CADASTRO NO ACEITE (14/08/2026) ============
   Nome, e-mail e WhatsApp acima das duas caixas de aceite. Ver a nota em
   copy_render_accept_form().
   ⚠️ Este bloco existe DUAS VEZES no projeto — aqui (escopo .doc-bar, o modal
   do /copy) e inline em copy-termos.php (escopo .doc-page). O formulário é o
   MESMO renderizador, mas os dois hospedeiros têm CSS próprio e nenhum importa
   o do outro. Mexeu num, mexa no outro, senão a mesma tela fica diferente em
   dois lugares — que é um bug que este projeto já teve. */
.doc-bar .agree-dados { display: grid; gap: 12px; margin: 0 0 16px; }
.doc-bar .agree-campo { display: block; cursor: text; }
/* Gemeo do .doc-page .agree-par em copy-termos.php — ver a nota la. */
.doc-bar .agree-par { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
@media (max-width: 560px) { .doc-bar .agree-par { grid-template-columns: minmax(0,1fr); } }
.doc-bar .agree-rot {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--doc-ink); margin: 0 0 5px;
}
.doc-bar .agree-campo input {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  /* 16px não é estética: abaixo disso o Safari do iPhone DÁ ZOOM sozinho ao
     focar o campo, e a pessoa perde o formulário de vista no meio da compra. */
  font: 16px/1.3 inherit; color: var(--doc-ink);
  background: #fff; border: 1px solid rgba(10, 107, 52, .28); border-radius: 8px;
}
.doc-bar .agree-campo input:focus-visible {
  outline: 2px solid var(--doc-accent); outline-offset: 1px;
  border-color: var(--doc-accent);
}
.doc-bar .agree-dica {
  display: block; margin: 5px 0 0; font-size: 11.5px; line-height: 1.45;
  color: var(--doc-ink-2);
}


/* ============ ENTRAR PELO GOOGLE (18/08/2026) ============
   ⚠️ GÊMEO do mesmo bloco no outro hospedeiro deste formulário — ver a nota
   do .agree-dados. Mexeu num, mexa no outro.

   ⚠️ BRANCO COM CONTORNO, e não o verde da casa: a diretriz de marca do Google
   define o botão dele, e um botão verde com o "G" colorido dentro seria a nossa
   cor tentando parecer a deles. Aqui o contraste também trabalha a favor —
   branco sobre o papel #f6f3ec distingue "atalho" de "ação principal", que
   continua sendo o botão de pagar, verde e cheio, lá embaixo. */
.doc-bar .agree-google {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; box-sizing: border-box;
  min-height: 46px; padding: 11px 14px;
  background: #fff; color: #1f1f1f;
  border: 1px solid var(--doc-hair-2); border-radius: 8px;
  font: 700 13.5px/1.2 inherit; text-decoration: none;
}
.doc-bar .agree-google:hover { background: #f2f0ea; border-color: rgba(23,20,15,.34); }
.doc-bar .agree-google:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 2px; }
.doc-bar .agree-google-g { flex: 0 0 auto; }

.doc-bar .agree-ou {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 11.5px; color: var(--doc-ink-3);
}
.doc-bar .agree-ou::before, .doc-bar .agree-ou::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--doc-hair);
}

/* A FAIXA DE IDENTIDADE substituiu o antigo `.agree-google-ok` (18/08/2026).
   Ela deixou de ser um "deu certo" e passou a ocupar o lugar dos tres campos que
   sumiram — por isso mostra foto, nome e e-mail: e o unico ponto da tela onde a
   pessoa confere COM QUE conta esta comprando.
   ⚠️ Gemea do mesmo bloco no outro hospedeiro. Mexeu num, mexa no outro. */
.doc-bar .agree-eu {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(10,107,52,.35); background: rgba(10,107,52,.08);
  border-radius: 8px; padding: 10px 12px;
}
.doc-bar .agree-eu-foto { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.doc-bar .agree-eu-tx { flex: 1 1 auto; min-width: 0; display: block; }
.doc-bar .agree-eu-tx b { display: block; color: var(--doc-ink); font-size: 13.5px; line-height: 1.3; }
.doc-bar .agree-eu-em {
  display: block; font-size: 11.5px; line-height: 1.4; color: var(--doc-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-bar .agree-eu-tr { flex: 0 0 auto; font-size: 11.5px; color: var(--doc-accent); }

/* ============ VERIFICACAO DO E-MAIL (14/08/2026) ============
   Gemeo entre .doc-bar (modal do /copy) e .doc-page (pagina de termos) — ver a
   nota do .agree-dados. */
.doc-bar .agree-otp { border: 1px dashed rgba(10,107,52,.35); border-radius: 8px; padding: 14px; }
.doc-bar .agree-otp.is-ok { border-style: solid; border-color: var(--doc-accent); background: rgba(10,107,52,.06); }
.doc-bar .agree-otp-pedir, .doc-bar .agree-otp-conf {
  appearance: none; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--doc-accent); color: #fff; font: 700 13.5px/1.2 inherit;
  padding: 11px 14px; width: 100%;
}
.doc-bar .agree-otp-acoes { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.doc-bar .agree-otp-acoes .agree-otp-conf { width: auto; flex: 1 1 auto; }
.doc-bar .agree-otp-reenviar {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--doc-accent); font: 600 11.5px/1.2 inherit; text-decoration: underline; padding: 8px;
}
/* Codigo em mono e espacado: 6 digitos sao conferidos caractere a caractere. */
.doc-bar .agree-otp [data-otp-codigo] { font-family: ui-monospace, Menlo, monospace; letter-spacing: .28em; }
.doc-bar .agree-otp-msg { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--doc-ink-2); }
.doc-bar .agree-otp-msg.is-erro { color: var(--doc-danger); }
.doc-bar .agree-otp-msg:empty { display: none; }

.doc-bar .agree { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; cursor: pointer; font-size: 13px; color: var(--doc-ink-2); }
.doc-bar .agree input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--doc-accent); cursor: pointer; }
.doc-bar .agree input:disabled { cursor: not-allowed; opacity: 0.45; }
.doc-bar .agree:has(input:disabled) { cursor: not-allowed; opacity: 0.75; }
.doc-bar .btn-submit {
  display: inline-block; width: 100%;
  background: var(--doc-accent); color: var(--doc-accent-ink);
  font: 700 14px/1 inherit; letter-spacing: 0.03em; padding: 15px 24px;
  border: 0; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.doc-bar .btn-submit:hover { background: #0c8342; }
.doc-bar .btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.doc-bar .fine { color: var(--doc-ink-3); font-size: 12px; margin-top: 12px; }

/* ================== CALENDÁRIO DE RESULTADOS DIÁRIOS ==================== */
.cal-in { max-width: 720px; }
.cal-mult {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
@media (max-width: 520px) {
  .cal-mult {
    grid-template-columns: 1fr;
  }
}
.cal-mult-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hair);
  border-radius: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.cal-mult-b:hover {
  color: var(--white);
  border-color: var(--hair-2);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.cal-mult-n {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cal-mult-sub {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 3px;
  opacity: 0.9;
  white-space: nowrap;
}
.cal-mult-tier {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-3);
  white-space: nowrap;
}
.cal-mult-b.on[data-risco="1"] {
  color: #001b2e;
  background: #4da3ff;
  border-color: #4da3ff;
  box-shadow: 0 0 16px rgba(77, 163, 255, 0.35);
}
.cal-mult-b.on[data-risco="1"] .cal-mult-tier {
  background: rgba(0, 27, 46, 0.18);
  color: #001b2e;
}
.cal-mult-b.on[data-risco="2"] {
  color: #00201a;
  background: #29f3c1;
  border-color: #29f3c1;
  box-shadow: 0 0 16px rgba(41, 243, 193, 0.35);
}
.cal-mult-b.on[data-risco="2"] .cal-mult-tier {
  background: rgba(0, 32, 26, 0.18);
  color: #00201a;
}
.cal-mult-b.on[data-risco="3"] {
  color: #fff;
  background: #ff5b5b;
  border-color: #ff5b5b;
  box-shadow: 0 0 16px rgba(255, 91, 91, 0.35);
}
.cal-mult-b.on[data-risco="3"] .cal-mult-tier {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* A barra: preenche 1/3, 2/3 ou 3/3 e troca de cor junto. `transition` na largura
   E na cor pra a mudança ser lida como "subiu de nível", não como troca de tela. */
.cal-termo {
  position: relative; height: 4px; margin-top: 10px;
  background: var(--hair); border-radius: 999px; overflow: hidden;
}
.cal-termo-barra {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  transition: width 0.35s ease, background 0.35s ease;
}
.cal-termo[data-nivel="1"] .cal-termo-barra { width: 33%; background: #4da3ff; }
.cal-termo[data-nivel="2"] .cal-termo-barra { width: 66%; background: #29f3c1; }
.cal-termo[data-nivel="3"] .cal-termo-barra { width: 100%; background: #c81e1e; }
.cal-termo-txt { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.cal-termo-txt.risco { color: #ff9d9d; }
@media (prefers-reduced-motion: reduce) { .cal-termo-barra { transition: none; } }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 24px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rail);
}
/* sem text-transform: capitalize aqui — ele maiusculiza a preposição também
   ("Julho De 2026"). Quem capitaliza só o mês é o JS. */
.cal-month {
  font-family: var(--display); font-weight: 700;
  font-size: 17px; letter-spacing: -0.015em;
}
.cal-arrow {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--text-2);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease);
}
.cal-arrow:hover:not([disabled]) { color: var(--green); border-color: rgba(0, 255, 95, 0.5); background: rgba(0, 255, 95, 0.06); transform: scale(1.08); }
.cal-arrow[disabled] { opacity: 0.28; cursor: not-allowed; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--rail);
  border: 1px solid var(--rail);
}
.cal-wd {
  background: #000;
  padding: 9px 2px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}
.cal-d {
  position: relative;
  background: #000;
  min-height: 62px;
  padding: 7px 8px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.35s ease;
}
.cal-d .n {
  font-family: var(--mono);
  font-size: 9.6px; font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.cal-d .val {
  font-family: var(--display); font-weight: 700;
  font-size: 13.5px; letter-spacing: -0.02em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* fora do mês: célula de preenchimento, sem borda de dado */
.cal-d.pad { background: rgba(254, 254, 254, 0.012); }
.cal-d.pad .n { opacity: 0.25; }
/* dia sem registro NÃO é dia zerado — fica neutro de propósito */
.cal-d.none .val { color: rgba(254, 254, 254, 0.16); }
/* Empate (resultado 0) é dia OPERADO, e precisa se distinguir de dia não operado.
   Antes os dois usavam `.none`, e o "US$ 0" saía a 16% de opacidade — invisível num
   quadrado de 11,5px, o que fez o Lucas achar que a planilha não estava chegando.
   Neutro de propósito: sem verde nem vermelho, porque não foi ganho nem perda —
   mas com contraste de dado que existe, não de célula vazia. */
.cal-d.zero { background: rgba(254, 254, 254, 0.05); }
.cal-d.zero .val { color: rgba(254, 254, 254, 0.78); }
.cal-d.zero:hover { background: rgba(254, 254, 254, 0.08); }
.cal-d.up { background: rgba(0, 255, 95, 0.055); }
.cal-d.up .val { color: var(--green); }
.cal-d.down { background: rgba(255, 91, 91, 0.05); }
.cal-d.down .val { color: #ff7a7a; }
.cal-d.up:hover, .cal-d.down:hover { background: rgba(254, 254, 254, 0.05); }
.cal-d .tr {
  position: absolute;
  top: 7px; right: 8px;
  font-family: var(--mono); font-size: 8.4px;
  color: var(--text-3);
}

.cal-empty {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--rail);
  background: rgba(0, 122, 255, 0.04);
  font-family: var(--mono);
  font-size: 11px; line-height: 1.6;
  color: var(--text-3);
}

.cal-sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 18px;
  background: var(--rail);
  border: 1px solid var(--rail);
}
@media (max-width: 560px) { .cal-sum { grid-template-columns: repeat(2, 1fr); } }
.cal-sum > div { background: #000; padding: 14px 12px; }
.cal-sum .k {
  display: block;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.cal-sum .v {
  display: block;
  margin-top: 6px;
  font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cal-sum .v.up { color: var(--green); }
.cal-sum .v.down { color: #ff7a7a; }
.cal-note {
  margin-top: 16px;
  font-size: 10.2px; line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

/* No celular o modal vira a tela inteira — é a "página otimizada" até a rota
   própria existir, sem manter duas implementações da mesma coisa. */
@media (max-width: 700px) {
  .modal.cal { padding: 0; align-items: stretch; }
  .cal-in {
    max-width: none;
    max-height: none;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: 24px 18px calc(28px + env(safe-area-inset-bottom));
  }
  .cal-d { min-height: 54px; padding: 6px; }
  .cal-d .val { font-size: 11.5px; }
  .cal-d .tr { display: none; }
}

/* Termos: mesma regra do .modal.cal acima — no celular vira tela cheia. */
@media (max-width: 700px) {
  .modal.doc { padding: 0; align-items: stretch; }
  .modal.doc .modal-in {
    max-width: none; max-height: none; min-height: 100%;
    border: 0; border-radius: 0;
  }
  .doc-head { padding: calc(22px + env(safe-area-inset-top)) 18px 0; }
  .doc-head h3 { font-size: 22px; }
  .doc-scroll { padding: 16px 18px 4px; }
  .doc-bar { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
}

/* ================= 14 · UTILITÁRIOS / A11Y ============================ */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==================== BOTÃO DO CALENDÁRIO (04/08/2026) ====================
   Pedido do Lucas: "mais chamativo ainda, que não passe despercebido". Ele falou em
   setas, mas avisou que era figura de linguagem — o que ele quer é que o olho caia
   ali sem escolha.

   Duas camadas, e as duas são de COMPOSITOR, não de layout:

     .cta-halo::before  auréola verde que respira    → opacity + scale
     .btn-cal::after    varredura de brilho          → translateX

   Isto NÃO é o `shine` do btn-profit. Aquele anima `left`, que recalcula layout a
   cada frame, e cinco botões fazendo isso ao mesmo tempo foi um dos custos que a
   auditoria de mobile mandou desligar. `transform` e `opacity` rodam na GPU sem
   tocar em layout nem em paint, então este efeito pode ficar ligado no celular —
   que é exatamente onde o Lucas precisa que ele apareça, porque no celular este
   botão é a ÚNICA porta para o modal de resultados (o link do nav some ≤1180px).

   A auréola vive num <span> em volta, e não no próprio botão, porque `.btn` tem
   `overflow: hidden` (site.css) — no botão ela seria recortada na borda. */
/* A SETINHA — pedido literal do Lucas. Duas chevrons descendo em direção ao botão,
   uma atrasada em relação à outra, o que dá a leitura de movimento contínuo pra
   baixo em vez de dois traços piscando juntos.
   Feita com border + rotate (zero imagem, zero requisição) e animada só em
   transform/opacity, então cabe no mesmo orçamento de compositor do resto. */
.cta-seta {
  display: block;
  height: 26px;
  margin-bottom: 4px;
  position: relative;
}
.cta-seta i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 13px; height: 13px;
  margin-left: -6.5px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  animation: ctaSeta 1.6s ease-in-out infinite;
}
.cta-seta i:nth-child(2) { top: 9px; animation-delay: 0.18s; opacity: 0.55; }
@keyframes ctaSeta {
  0%, 100% { transform: rotate(45deg) translate(0, -3px); opacity: 0.35; }
  50%      { transform: rotate(45deg) translate(0, 3px);  opacity: 1; }
}

.cta-halo {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.cta-halo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 20px;
  background: radial-gradient(closest-side, rgba(0, 255, 95, 0.5), rgba(0, 255, 95, 0) 72%);
  opacity: 0.24;
  animation: ctaHalo 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaHalo {
  0%, 100% { opacity: 0.2; transform: scale(0.96); }
  50%      { opacity: 0.7; transform: scale(1.05); }
}

/* Varredura. Sobrescreve o ::after do btn-profit — mesma especificidade, e o
   copy.css carrega depois do site.css, então este vence. A shorthand `animation`
   completa é de propósito: zera o `shine` herdado em vez de só trocar o nome. */
.btn-cal::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  height: auto;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-150%) skewX(-16deg);
  animation: ctaSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSweep {
  0%       { transform: translateX(-150%) skewX(-16deg); }
  55%, 100% { transform: translateX(320%) skewX(-16deg); }
}

/* ================== MODO LEVE DO CELULAR (04/08/2026) ==================
   Pedido do Daniel: no celular a prioridade é carregar rápido e não travar no 4G,
   mesmo que custe animação. Este bloco é irmão do `prefers-reduced-motion` logo
   abaixo — a diferença é que aquele atende preferência do usuário e este atende
   aparelho e rede.

   O que fica: as cores, a tipografia, o layout, e a revelação por opacity/transform
   (que é barata e é a assinatura de movimento da página).
   O que sai: tudo que exige composição contínua — animação infinita, blur composto
   e backdrop-filter. Medido antes: 9 animações infinitas rodando ao mesmo tempo,
   2 backdrop-filter fixos, 3 botões com blur, um glow de blur(60px), a camada de
   grain em z-index 9999, e dois loops de canvas. Detalhes e números em
   AUDITORIA-MOBILE-COPY-2026-08-04.md, Parte 3.

   767px tem que continuar batendo com `var mobile` no copy.js e com o gate do
   dither. Se mexer num, mexa nos três. */
@media (max-width: 767px) {
  /* --- animações infinitas ------------------------------------------------ */
  /* `shine` é o pior dos cinco: anima `left`, que é LAYOUT, não transform — em 5
     botões, para sempre. `swim` carrega drop-shadow num nó que se move, então a
     sombra é reprocessada a cada frame. `markRun` compõe 1826px de texto com
     text-stroke através de uma mask. */
  /* `:not(.btn-cal)` porque o botão do calendário é a exceção deliberada: o brilho
     dele é feito com transform/opacity, custa quase nada, e o Lucas precisa que ele
     apareça JUSTAMENTE no celular. Os outros quatro btn-profit continuam sem o
     `shine`, que anima `left` e é caro. */
  .mark-run, .mark .shark, .chip .dot, .btn-profit:not(.btn-cal)::after { animation: none !important; }
  .mark .shark { filter: none; }
  /* No celular o botão ocupa a largura toda: alvo grande e impossível de não ver. */
  .cta-halo { display: block; }
  .cta-halo > .btn { width: 100%; }
  /* grain: camada FIXA de 200%×200% em z-index 9999 acima de tudo (site.css) */
  body::after { display: none !important; }

  /* --- blur composto ------------------------------------------------------ */
  /* Mantém opacity e transform na revelação, tira só o filter e o will-change:
     eram ~58 elementos promovidos a camada própria COM passe de blur. */
  .js .r { filter: none; will-change: auto; }
  .js .r.in { filter: none; }
  .top.stuck, .mobar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn-ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #tip, .modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* glow do disclaimer: era blur(60px) num círculo de min(52vw,620px) */
  .calm-glow { filter: blur(26px); opacity: 0.45; }
  .scene { filter: none; }

  /* --- painel vivo sai da caixa clipada de altura fixa -------------------- */
  /* `.panel{overflow:hidden;min-height:360px}` com as cenas em position:absolute
     não tem scroll nem escape: em 320px a cena tem ~244×280px e o texto está no
     limite. Uma edição de copy ou o slider de fonte do Android já cortava. Mesma
     solução que o bloco `reduce` usa. */
  .scene { position: relative; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; transform: none; }
  .scene:not(.on) { display: none; }
  .panel { min-height: 0; }

  /* --- palco estático: sem pulso nem flash ------------------------------- */
  /* O copy.js entrega as 5 mesas já preenchidas no celular, então os elementos de
     animação não têm mais função. */
  .mr-pulse, .mr-flash { display: none; }

  /* --- RÓTULO DE BOTÃO QUE QUEBRA LINHA ---------------------------------
     Era o pior overflow medido da página. O cp_btn (copy.php:301) divide o rótulo
     em um <span> por caractere para o roll de hover, e o mecanismo assume UMA
     LINHA: `.roll` é overflow:hidden e a cópia que sobe é position:absolute com
     display:flex. Pior, os espaços são emitidos como `&nbsp;`. Resultado: o rótulo
     não podia quebrar em lugar nenhum. Medido em 320px: "VER CALENDÁRIO DE
     RESULTADOS DIÁRIOS" em #numeros passava 61px da borda e as últimas letras
     desapareciam sem deixar rastro (um ancestral clipa, então não havia nem barra
     de rolagem para denunciar). "GARANTIR MINHA LICENÇA" passava 20px.

     No celular o roll é peso morto de qualquer forma: é efeito de :hover, e toque
     não tem hover. Então escondemos o `.roll` e promovemos o `<span class="sr">`,
     que o cp_btn JÁ emite com o rótulo limpo, a texto visível — que quebra linha
     normalmente porque é texto normal.

     De brinde, isto conserta o botão sem rótulo da barra superior: a regra
     `.top-cta .btn .txt{display:none}` em ≤520px mirava justamente o `.roll`,
     deixando um ícone e uma seta sem palavra nenhuma. Agora o rótulo vem do `.sr`. */
  .btn .roll { display: none; }
  .btn > .sr {
    position: static;
    width: auto; height: auto;
    margin: 0; padding: 0;
    overflow: visible;
    clip: auto; clip-path: none;
    white-space: normal;
    text-align: center;
    order: 1;              /* entre o ícone (.dm, order 0) e a seta */
  }
  .btn > .arr { order: 2; }
  .btn { flex-wrap: wrap; }

  /* --- ALVOS DE TOQUE ----------------------------------------------------
     Medido: os links do rodapé tinham 19px de altura. São navegação de verdade
     (Disclaimer de Risco, Termos de Uso, Política de Privacidade, Suporte), num
     produto financeiro, onde errar o toque e cair no link errado é atrito real.
     44px é o mínimo recomendado; o padding vertical resolve sem mudar a
     tipografia, e o gap da grade cai para não abrir buraco entre as linhas. */
  .foot-grid { gap: 4px 30px; align-items: center; }
  .foot-grid a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- DENSIDADE: INFRAESTRUTURA E DISCLAIMER (04/08/2026) --------------
     Medido em 320px: `#requisitos` ocupava 3.202px (4,4 telas) e `#disclaimer`
     2.478px (3,4 telas) — juntos, 36% de uma página de 21,5 telas, e o preço só
     começava na tela 11.

     A proposta original era colapsar itens do disclaimer num acordeão e mover a
     seção de infraestrutura para depois do preço. **Nenhuma das duas foi feita**,
     de propósito: o disclaimer é texto de RISCO num produto financeiro (os itens 5
     e 6 foram pedido do Lucas), e o Daniel pediu explicitamente que nada ficasse
     oculto — pôr risco atrás de um toque contraria as duas coisas. Reordenar a
     página mudaria a narrativa de venda, que também não é decisão de CSS.

     Então o ganho vem de DENSIDADE: os 6 itens do disclaimer e os 6 cards de
     infra continuam todos visíveis, na mesma ordem, com o mesmo texto. O que muda
     é quanto de tela cada um gasta no celular — padding, margem e a altura da
     imagem dos cards, que era 16/9 e no celular não precisa ser. */
  .calm-item { padding: 18px 16px; }
  .calm-item .n { margin-bottom: 8px; }
  .calm-item p { margin-top: 7px; line-height: 1.6; }
  .calm-grid { gap: 0; }

  .post { padding: 18px 16px 20px; }
  /* 16/9 num card de 288px de largura gasta 162px só de imagem, e a imagem é
     ilustrativa (dither), não informação. 21/9 corta a altura pela metade sem
     mudar o que ela comunica. */
  .post-img { aspect-ratio: 21 / 9; margin-bottom: 14px; }
  .post p { margin-top: 7px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .r, .sp-c, .sp-l { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .scene { position: relative; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; transform: none; filter: none; }
  .scene:not(.on) { display: none; }
  .term li, .fills li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cl-fill { transform: scaleX(1); animation: none !important; }
  .mark-run, .mark .shark, .chip .dot, .btn-profit::after { animation: none !important; }
  /* O brilho do botão do calendário também para: aqui é preferência declarada do
     usuário, não questão de custo. Ele continua verde e cheio, só não pisca. */
  .cta-halo::before, .btn-cal::after { animation: none !important; opacity: 0.3; }
  /* A seta para de pular, mas continua apontando: sem movimento ela ainda cumpre o
     papel de dizer "é aqui". */
  .cta-seta i { animation: none !important; opacity: 0.7; }
  .odo i { transition: none; }
  canvas[id^="dither-"] { display: none; }
  .mr-pulse, .mr-flash { display: none; }
  .pblur { display: none; }
  .btn:hover, .cell:hover, .stage:hover, .lic:hover, .post:hover .post-img img { transform: none !important; }
}

/* ============ SANFONA DO DOCUMENTO E LINK "LER OS TERMOS" (11/08/2026) ============
   As 20 cláusulas passaram a nascer RECOLHIDAS no modal de aceite: quem quiser ler
   clica no link de dentro do próprio rótulo do consentimento. Pedido do Lucas, que
   comprou numa mesa proprietária e não teve que passar por texto nenhum.

   ⚠️ `.is-fechado` e NÃO o atributo `hidden`: o `.doc-scroll` declara `display`, e
   `[hidden]` do navegador perde de qualquer `display` de autor. Classe própria não
   depende de ordem de cascata nem de outro arquivo. */
.doc-scroll.is-fechado { display: none; }

/* O botão que revela. Parece link porque É um link no sentido do usuário — o que
   ele faz é abrir um documento. Mas é <button>, porque não navega pra lugar nenhum:
   <a href="#"> aqui poluiria o histórico e mexeria na URL de uma tela de checkout.
   ⚠️ Ele vive DENTRO do <label> do aceite (o link faz parte da frase, como o Lucas
   descreveu). Quem impede que clicar nele marque o consentimento é o
   preventDefault/stopPropagation do copy.js — não o CSS.

   ⚠️ COR — este botão vive no cartão CLARO (papel, --doc-bg #f6f3ec), não no tema
   escuro do site. Por isso usa --doc-accent (#0a6b34, 5,98:1 sobre o papel) e NÃO
   --green: o comentário da linha 1441 já registra que o verde neon é ilegível em
   fundo branco, e é exatamente por isso que --doc-accent existe. O hover ESCURECE
   (#08542a, 7,79:1); clarear apagaria o texto contra o creme.
   Fica escopado em .doc-bar porque --doc-* só é declarado dentro de .modal.doc —
   solto, a variável não resolveria e a cor cairia pra herdada. */
.doc-bar .agree-ler {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--doc-accent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.doc-bar .agree-ler:hover { color: #08542a; }
.doc-bar .agree-ler:focus-visible {
  outline: 2px solid var(--doc-accent); outline-offset: 2px; border-radius: 2px;
}