/* ═══════════════════════════════════════════════════════════════════════
   CLOAKILLER · landing

   Estética da vercel.com (preto absoluto, marca como monólito com luz por
   trás, tipografia enorme em peso médio, sublinha mono, CTA primário BRANCO,
   painéis chapados de borda 1px) com a organização da mygroupmetrics.com
   (hero → prova → um recurso por seção → VSL → preço → FAQ).

   Sem framework e sem build. Sem fundo decorativo: os feixes de laser e a
   grade quadriculada foram testados e reprovados por ele em 14/08/2026.

   Peças do 21st.dev portadas para CSS/JS puro:
   · Border Beam (id 1268)            → .feixe-borda
   · Video Thumbnail Player (id 4586) → .vsl
   · Interactive Accordion (id 9602)  → .faq
   · marquee do Glassmorphism Trust Hero (id 9950) → .marq-*
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#000;
  --painel:#0a0a0b;
  --painel-2:#101012;
  --raise:#1a1a1e;
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.16);
  --text:#f4f4f6;
  --text-2:#a2a2ad;
  --muted:#6a6a76;
  --accent:#6d5efc;
  --accent-2:#8f82ff;
  --accent-3:#a78bfa;
  --azul:#5b8cff;
  --good:#16b364;
  --warn:#f5a623;
  --max:1100px;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

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

html{
  scroll-behavior:smooth;
  color-scheme:dark;
  /* Nenhum descendente (fita do marquee, sombras, aro da moeda) pode criar
     rolagem horizontal da página — `clip` corta sem virar scroller. */
  overflow-x:clip;
  scrollbar-color:var(--raise) transparent;
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--raise);border-radius:8px;
  border:2px solid transparent;background-clip:content-box;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Geist',system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  /* `clip` e não `hidden`: com `hidden` o body vira contexto de rolagem e o
     sticky do topo morre. */
  overflow-x:clip;
}

a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}


/* ═══════════════════════════════════════════════════════════════════════
   TOPO
   ═══════════════════════════════════════════════════════════════════════ */
.topo{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--max);margin:0 auto;
  padding:16px 24px;
}
/* Véu mascarado: escurece e desfoca o que passa por baixo sem desenhar uma
   linha reta de corte — a máscara dissolve a borda inferior. */
.topo::before{
  content:'';position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.06));
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 42%,transparent 100%);
}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;
  letter-spacing:-.01em;}
.marca span{font-size:1.05rem;}

.menu{display:flex;align-items:center;gap:24px;font-size:.9rem;}
.menu a{color:var(--text-2);transition:color .2s;}
.menu a:hover{color:var(--text);}
.menu .entrar{
  color:var(--text);padding:8px 16px;
  border:1px solid var(--border-2);border-radius:999px;
  transition:border-color .2s,background .2s;
}
.menu .entrar:hover{border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);}


/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
main{position:relative;z-index:1;}
.hero{max-width:var(--max);margin:0 auto;padding:40px 24px 0;
  text-align:center;}
.secao{max-width:var(--max);margin:0 auto;padding:130px 24px 0;}
.faixa{max-width:var(--max);margin:0 auto;padding:130px 24px 0;
  text-align:center;}


/* ── selo ─────────────────────────────────────────────────────────────── */
.selo{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 12px;
  font-size:.82rem;color:var(--text-2);
  border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,.03);
}
.pulso{
  width:7px;height:7px;border-radius:50%;background:var(--good);
  animation:pulsa 2.4s ease-out infinite;flex-shrink:0;
}
@keyframes pulsa{
  0%{box-shadow:0 0 0 0 rgba(22,179,100,.5);}
  70%{box-shadow:0 0 0 8px rgba(22,179,100,0);}
  100%{box-shadow:0 0 0 0 rgba(22,179,100,0);}
}


/* ═══════════════════════════════════════════════════════════════════════
   A MOEDA — a logo dele em 3D (imagem de referência de 14/08/2026): o disco
   escuro com bisel e a caveira pixel em relevo, sem fundo. A luz que
   PERCORRE o aro é o gesto da vercel.com, adaptado de triângulo para
   círculo: um arco em conic-gradient girando atrás da borda.
   ═══════════════════════════════════════════════════════════════════════ */
.moeda{
  position:relative;
  width:clamp(210px,26vw,300px);
  margin:34px auto 0;
  aspect-ratio:1;
}
/* Luz ambiente atrás da moeda, respirando devagar. */
.moeda-brilho{
  position:absolute;inset:-4%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(143,130,255,.34) 0%,
    rgba(109,94,252,.16) 45%,
    transparent 72%);
  filter:blur(18px);
  animation:respira-luz 6.5s ease-in-out infinite;
}
@keyframes respira-luz{
  0%,100%{opacity:.75;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}
/* O "shader" do aro: um anel fino cuja única parte visível é um arco de luz
   branca-roxa. O elemento gira inteiro; como o anel é circular, o que se vê
   é a luz dando a volta na borda da moeda. */
.moeda-aro{
  position:absolute;inset:1.5%;
  border-radius:50%;
  padding:3px;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent 250deg,
    rgba(109,94,252,.35) 285deg,
    rgba(167,139,250,.95) 320deg,
    #fff 338deg,
    rgba(143,130,255,.6) 352deg,
    transparent 360deg);
  /* dupla máscara: só o anel (padding) fica visível */
  -webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);
  mask-composite:exclude;
  filter:blur(.6px) drop-shadow(0 0 10px rgba(143,130,255,.7))
         drop-shadow(0 0 30px rgba(109,94,252,.4));
  animation:gira-aro 6.5s linear infinite;
}
@keyframes gira-aro{to{transform:rotate(360deg);}}
/* O disco: duas bordas de profundidade (a de fora é o canto da moeda, a de
   dentro é o bisel rebaixado da face), luz vinda de cima-esquerda. */
.moeda-corpo{
  position:absolute;inset:3.5%;
  border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 36% 28%,#232327,#101013 52%,#08080a 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.08),
    inset 0 -14px 34px rgba(0,0,0,.85),
    0 34px 80px -24px rgba(0,0,0,.95);
}
.moeda-corpo::before{
  content:'';position:absolute;inset:6%;
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#1b1b1f,#0d0d10 58%,#0a0a0c);
  border:1px solid rgba(0,0,0,.6);
  box-shadow:
    inset 0 -2px 8px rgba(255,255,255,.05),
    inset 0 6px 16px rgba(0,0,0,.7);
}
.moeda-caveira{
  position:relative;width:58%;height:auto;
  /* levanta a caveira da face da moeda */
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
/* Dois tons = o 3D pixelado da referência: a face clara por cima e a
   extrusão cinza por baixo, deslocada para baixo-direita. */
.px-face{fill:#eef0f3;}
.px-sombra{fill:#87878f;}


/* ── título ───────────────────────────────────────────────────────────── */
h1{
  margin-top:36px;
  font-size:clamp(2.2rem,5.2vw,4rem);
  line-height:1.04;letter-spacing:-.042em;
  /* Peso 500, não 800: a Vercel escreve grande e LEVE — o tamanho é a
     ênfase, o peso não precisa gritar junto. */
  font-weight:500;
  background:linear-gradient(180deg,#fff 20%,#c9c9d4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.08em; /* senão o clip corta a perna do "p" e do "q" */
}
h1 .grad,.h2 .grad{
  background:linear-gradient(96deg,var(--accent-2) 0%,var(--accent-3) 55%,var(--azul) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
h1 .grad{filter:drop-shadow(0 0 26px rgba(109,94,252,.3));}

/* A sublinha em monoespaçada — assinatura da Vercel ("Automated by agents"). */
.sub-mono{
  margin-top:20px;
  font-family:var(--mono);
  font-size:clamp(.82rem,1.5vw,.98rem);
  color:var(--muted);
  letter-spacing:.01em;
}

.sub{max-width:660px;margin:24px auto 0;
  font-size:clamp(1rem,1.7vw,1.14rem);color:var(--text-2);}
.sub-menor{font-size:1rem;max-width:640px;}
.sub-esq{max-width:640px;margin:18px 0 0;
  font-size:clamp(.98rem,1.6vw,1.08rem);color:var(--text-2);}


/* ── botões ───────────────────────────────────────────────────────────── */
.ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:34px;}

/* CTA primário BRANCO — o contraste máximo que existe sobre #000. É o botão
   da Vercel; a cor da marca fica para o resto da página. */
.cta{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;
  font:inherit;font-size:.98rem;font-weight:650;
  color:#0a0a0a;cursor:pointer;
  border:0;border-radius:999px;
  background:#fff;
  box-shadow:0 10px 40px -12px rgba(255,255,255,.32);
  transition:transform .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.cta:hover{transform:translateY(-1px);
  box-shadow:0 14px 48px -12px rgba(255,255,255,.45);}
.cta:active{transform:scale(.985);}
.cta svg{transition:transform .18s ease;flex-shrink:0;}
.cta:hover svg{transform:translateX(3px);}
/* Brilho que varre o botão de tempo em tempo — visível no branco como um
   reflexo, sem piscar como banner. */
.cta::after{
  content:'';position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(109,94,252,.18),transparent);
  transform:translateX(-180%);
  animation:varre 5.2s ease-in-out infinite;
}
@keyframes varre{
  0%,64%{transform:translateX(-180%);}
  88%,100%{transform:translateX(340%);}
}

.cta-2{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;font-size:.98rem;font-weight:600;
  color:var(--text-2);
  border:1px solid var(--border-2);border-radius:999px;
  background:rgba(255,255,255,.02);
  transition:color .2s,border-color .2s,background .2s;
}
.cta-2:hover{color:var(--text);border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.05);}
.cta-bloco{width:100%;margin-top:22px;}

/* Mini-prova sob os CTAs, em mono — como a fileira de números da Vercel. */
.hero-stats{
  margin-top:30px;
  font-family:var(--mono);font-size:.8rem;color:var(--muted);
}
.hero-stats b{color:var(--text-2);font-weight:600;}


/* ═══════════════════════════════════════════════════════════════════════
   FAIXA DE PLATAFORMAS — o logo strip da Vercel
   ═══════════════════════════════════════════════════════════════════════ */
.plat{max-width:var(--max);margin:0 auto;padding:88px 24px 0;
  text-align:center;}
.plat-rot{
  font-family:var(--mono);font-size:.74rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;
}
.marq-mask{
  margin-top:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);
}
.marq-fita{
  display:flex;gap:44px;width:max-content;padding:0 16px;
  animation:marquee 36s linear infinite;
}
/* A lista vem DUPLICADA no HTML: quando a primeira metade sai da tela, a
   segunda está no mesmo pixel e o -50% recomeça sem pulo visível. */
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marq-fita span{
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  color:var(--text);opacity:.38;white-space:nowrap;
  transition:opacity .25s;
}
.marq-fita span:hover{opacity:1;}


/* ═══════════════════════════════════════════════════════════════════════
   VSL — Video Thumbnail Player (21st, id 4586)

   O vídeo ainda não existe: o slot fica pronto, com o selo "em breve".
   Quando o `data-video` for preenchido no HTML, o JS adiciona `.vsl-ativa`
   e o hover/clique passam a funcionar sem mexer aqui.
   ═══════════════════════════════════════════════════════════════════════ */
.vsl-secao{text-align:center;}
.vsl{
  position:relative;
  max-width:880px;margin:44px auto 0;
  aspect-ratio:16/9;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#0c0c0e,#050506);
  border:1px solid var(--border);
}
/* O poster: a caveira gigante, quase apagada, de marca d'água. */
.vsl-poster{
  position:absolute;inset:0;display:grid;place-items:center;
}
.vsl-marca{
  width:34%;fill:#131316;
  filter:drop-shadow(0 0 30px rgba(109,94,252,.14));
}
.vsl-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:72px;height:72px;border-radius:50%;
  color:#fff;
  background:rgba(109,94,252,.85);
  box-shadow:0 0 0 10px rgba(109,94,252,.16),0 18px 50px -12px rgba(109,94,252,.8);
  transition:transform .25s ease,background .25s ease;
}
.vsl-play svg{margin-left:4px;} /* centro ótico do triângulo de play */
.vsl-breve{
  position:absolute;right:16px;top:16px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--border-2);background:rgba(0,0,0,.55);
}
/* Estados só quando há vídeo (classe posta pelo JS): */
.vsl-ativa{cursor:pointer;}
.vsl-ativa .vsl-breve{display:none;}
.vsl-ativa:hover .vsl-play{transform:translate(-50%,-50%) scale(1.1);
  background:rgba(109,94,252,1);}
.vsl-ativa:hover .vsl-marca{filter:drop-shadow(0 0 46px rgba(109,94,252,.3));}

/* modal */
.vsl-modal{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:aparece .25s ease;
}
@keyframes aparece{from{opacity:0;}to{opacity:1;}}
.vsl-quadro{width:min(92vw,1024px);aspect-ratio:16/9;padding:0 16px;}
.vsl-quadro iframe{width:100%;height:100%;border:0;border-radius:12px;}
.vsl-fechar{
  position:absolute;right:18px;top:18px;
  display:grid;place-items:center;width:44px;height:44px;
  color:#fff;background:rgba(255,255,255,.1);
  border:0;border-radius:50%;cursor:pointer;
  transition:background .2s;
}
.vsl-fechar:hover{background:rgba(255,255,255,.22);}


/* ═══════════════════════════════════════════════════════════════════════
   PROVA EM NÚMEROS
   ═══════════════════════════════════════════════════════════════════════ */
.numeros{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;margin-top:44px;
  background:var(--border);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.num{padding:30px 20px;background:var(--bg);text-align:center;
  transition:background .25s;}
.num:hover{background:var(--painel);}
.num strong{
  display:block;font-size:2rem;font-weight:650;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#b9b9c6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.num span{display:block;margin-top:6px;font-size:.8rem;color:var(--text-2);}

.nota{max-width:640px;margin:24px auto 0;text-align:center;
  font-size:.85rem;color:var(--muted);}


/* ═══════════════════════════════════════════════════════════════════════
   TÍTULOS DE SEÇÃO + RECURSOS (organização MGM)
   ═══════════════════════════════════════════════════════════════════════ */
.h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  line-height:1.12;letter-spacing:-.035em;font-weight:550;
  text-align:center;
  background:linear-gradient(180deg,#fff,#a8a8b6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}
.h2-esq{text-align:left;margin-top:16px;}

/* eyebrow: a etiqueta acima do título ("RESUMOS INTELIGENTES" na MGM). */
.eyebrow{
  display:inline-block;
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent-2);
  padding:6px 14px;border-radius:999px;
  border:1px solid rgba(109,94,252,.32);
  background:rgba(109,94,252,.09);
}


/* ── bloco Problema→Agitação (PAS) ───────────────────────────────────── */
.dores{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;margin-top:36px;
  background:var(--border);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.dor{padding:24px 22px;background:var(--bg);transition:background .25s;}
.dor:hover{background:var(--painel);}
.dor-num{
  font-family:var(--mono);font-size:.72rem;color:var(--accent-2);
  letter-spacing:.1em;
}
.dor p{margin-top:10px;font-size:.9rem;color:var(--text-2);line-height:1.55;}
.dor b{color:var(--text);display:block;margin-bottom:4px;}
@media (max-width:920px){
  .dores{grid-template-columns:1fr;}
}

/* ── "Na prática": você faz → você recebe ────────────────────────────── */
.entregas{
  margin-top:36px;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
}
.entrega{
  display:grid;grid-template-columns:1fr 1.4fr;gap:18px;
  padding:20px 22px;
  border-top:1px solid var(--border);
  transition:background .25s;
}
.entrega:first-child{border-top:0;}
.entrega:hover{background:var(--painel);}
.entrega-faz{
  font-size:.92rem;color:var(--text);font-weight:550;
  position:relative;padding-right:26px;
}
/* a seta que liga a ação ao retorno */
.entrega-faz::after{
  content:'→';position:absolute;right:2px;top:0;
  font-family:var(--mono);color:var(--accent-2);
}
.entrega-recebe{font-size:.92rem;color:var(--text-2);}
@media (max-width:760px){
  .entrega{grid-template-columns:1fr;gap:8px;}
  .entrega-faz{padding-right:0;}
  .entrega-faz::after{content:'↓';position:static;margin-left:8px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   BORDER BEAM — 21st id 1268, em CSS puro: um cometa de luz percorre a
   borda. Dupla máscara deixa visível só o anel; o ::after viaja pelo
   offset-path retangular.
   ═══════════════════════════════════════════════════════════════════════ */
.feixe-borda{
  pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  border:1.5px solid transparent;
  -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
  mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
  -webkit-mask-clip:padding-box,border-box;
  mask-clip:padding-box,border-box;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  z-index:2;
}
/* O @supports evita um borrão parado onde `offset-path: rect()` não existe
   (Firefox velho): sem suporte, o cometa simplesmente não é desenhado. */
@supports (offset-path: rect(0 0 0 0)){
  .feixe-borda::after{
    content:'';position:absolute;
    width:210px;aspect-ratio:1;
    background:linear-gradient(to left,var(--accent-2),var(--azul),transparent);
    offset-anchor:90% 50%;
    offset-path:rect(0 auto auto 0 round 210px);
    animation:feixe-borda 11s linear infinite;
  }
}
@keyframes feixe-borda{to{offset-distance:100%;}}


/* ═══════════════════════════════════════════════════════════════════════
   PAINÉIS DE PRODUTO — chapados, borda 1px, sem vidro (Vercel)
   ═══════════════════════════════════════════════════════════════════════ */
.moldura{
  position:relative;margin-top:40px;padding:8px;
  border-radius:20px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
}
/* `.moldura-media` travava em 760px e deixava um vão à direita nos cards de
   Traffic Analytics e Advertisers — o card de Ofertas, sem a classe, ocupava
   a largura toda. Lado a lado ficava desalinhado, como se dois recursos
   fossem menos importantes que o primeiro. Agora os três têm a mesma
   moldura; a classe fica como apelido para não quebrar o HTML. */
.moldura-media{max-width:none;}
.painel{
  position:relative;border-radius:13px;
  background:var(--painel);
  border:1px solid var(--border);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  overflow:hidden;text-align:left;
}

.painel-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--painel-2);
}
.painel-alvo{display:flex;align-items:center;gap:10px;min-width:0;}
.painel-alvo-rot{font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  flex-shrink:0;}
.painel-alvo code{
  font-family:var(--mono);font-size:.82rem;color:var(--text);
  padding:4px 10px;border-radius:7px;
  background:rgba(109,94,252,.13);border:1px solid rgba(109,94,252,.28);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.periodos{display:flex;gap:2px;padding:3px;border-radius:8px;
  background:rgba(255,255,255,.045);flex-shrink:0;}
.periodos b{font-size:.74rem;font-weight:600;color:var(--muted);
  padding:4px 9px;border-radius:6px;}
.periodos b.on{color:var(--text);background:var(--raise);}

.metricas{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--border);
}
.metrica{padding:16px 18px;border-right:1px solid var(--border);}
.metrica:last-child{border-right:0;}
.metrica-rot{display:block;font-size:.74rem;color:var(--muted);}
.metrica strong{
  display:block;margin-top:5px;
  font-size:1.5rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.metrica-plat{font-size:1.24rem !important;color:var(--accent-2);}
.metrica-var{display:block;margin-top:3px;font-size:.74rem;color:var(--muted);}
.metrica-var.alta{color:var(--good);}

.lista{padding:4px 0 0;}
.lista-cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px 9px;
  font-size:.8rem;font-weight:600;color:var(--text-2);
}
.lista-num{color:var(--muted);font-weight:400;}
.linhas{list-style:none;}
.linhas li{
  display:grid;grid-template-columns:1fr 68px 74px;
  align-items:center;gap:12px;
  padding:9px 18px;
  font-size:.83rem;
  border-top:1px solid rgba(255,255,255,.05);
  /* As linhas entram deslizando quando o painel aparece — a sensação de
     "a consulta acabou de rodar". */
  opacity:0;transform:translateX(-10px);
  transition:opacity .5s ease,transform .5s ease;
}
.moldura.dentro .linhas li{opacity:1;transform:none;}
.linhas li:nth-child(1){transition-delay:.25s}
.linhas li:nth-child(2){transition-delay:.35s}
.linhas li:nth-child(3){transition-delay:.45s}
.linhas li:nth-child(4){transition-delay:.55s}
.linhas li:nth-child(5){transition-delay:.65s}
.linhas-solto li{padding:12px 18px;}
.l-dom{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.l-dom i{font-style:normal;color:var(--muted);}
.l-vol{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);
  font-weight:600;}
.l-tag{
  font-size:.7rem;text-align:center;color:var(--muted);
  padding:3px 0;border-radius:999px;
}
.l-tag.nova{color:var(--good);background:rgba(22,179,100,.12);
  border:1px solid rgba(22,179,100,.3);}
.l-tag.cadeia{color:var(--warn);background:rgba(245,166,35,.1);
  border:1px solid rgba(245,166,35,.28);}

.painel-pe{
  padding:13px 18px 15px;margin-top:6px;
  font-size:.75rem;color:var(--muted);
  border-top:1px solid var(--border);
}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.66rem;font-weight:650;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--border-2);background:rgba(255,255,255,.04);
  white-space:nowrap;
}
.pill-roxa{color:var(--accent-2);border-color:rgba(109,94,252,.34);
  background:rgba(109,94,252,.1);}

/* painel de tráfego (recurso 2) */
.painel-trafego{padding-bottom:0;}
.trafego-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 6px;
}
.trafego-num{
  display:block;margin-top:4px;
  font-size:2rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.trafego-svg{display:block;width:100%;height:150px;margin-top:8px;}
/* O traço se desenha quando a moldura entra na tela. 720 cobre o caminho
   inteiro com folga (o path tem ~590px de comprimento). */
.trafego-linha{
  stroke-dasharray:720;stroke-dashoffset:720;
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1) .3s;
}
.trafego-area{opacity:0;transition:opacity .8s ease 1.2s;}
.moldura.dentro .trafego-linha{stroke-dashoffset:0;}
.moldura.dentro .trafego-area{opacity:1;}
.trafego-meses{
  display:flex;justify-content:space-between;
  padding:6px 18px 12px;
  font-family:var(--mono);font-size:.68rem;color:var(--muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   COMPARATIVO
   ═══════════════════════════════════════════════════════════════════════ */
/* A tabela rola DENTRO do container em tela estreita — sem isto ela empurra
   o body e cria rolagem horizontal, o defeito clássico no telefone. */
.tabela-rol{margin-top:44px;overflow-x:auto;border-radius:16px;
  border:1px solid var(--border);background:rgba(255,255,255,.014);}
.tabela{width:100%;border-collapse:collapse;min-width:660px;font-size:.9rem;}
.tabela th,.tabela td{padding:15px 18px;text-align:left;
  border-bottom:1px solid var(--border);}
.tabela thead th{font-size:.84rem;font-weight:600;color:var(--text-2);
  background:rgba(255,255,255,.02);vertical-align:bottom;}
.tabela thead small{display:block;font-weight:400;color:var(--muted);
  font-size:.74rem;margin-top:3px;}
.tabela tbody tr:last-child td{border-bottom:0;}
.tabela td:not(:first-child),.tabela th:not(:first-child){
  text-align:center;width:19%;}
.tabela .dest{background:rgba(109,94,252,.07);}
.tabela thead .dest{color:var(--accent-2);font-weight:700;}
.sim{color:var(--good);font-weight:600;}
.nao{color:#5c5c68;}
.meio{color:var(--warn);}


/* ═══════════════════════════════════════════════════════════════════════
   PREÇO — 3 faixas, extensão inclusa nas três
   ═══════════════════════════════════════════════════════════════════════ */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;margin-top:46px;align-items:stretch;}
/* ALTURA IGUAL NOS TRÊS — ele, 17/08: "as bordas não têm o mesmo tamanho".
   Era `align-items:start`: cada card ficava com a altura do próprio texto, e
   basta um benefício quebrar em duas linhas para as bordas desalinharem.
   `stretch` iguala a altura; o `flex` abaixo faz a lista crescer e empurra o
   botão para a base, senão os três CTAs parariam em alturas diferentes
   dentro de cards do mesmo tamanho — que é o mesmo defeito, só disfarçado. */
.plano{display:flex;flex-direction:column;}
.plano ul{flex:1;}
.plano .cta-bloco{margin-top:auto;}
/* HORIZONTAL É REGRA, NÃO PREFERÊNCIA — ele, 17/08: "os preços precisam ficar
   horizontalmente no desktop, não pode quebrar".
   `minmax(0,1fr)` no lugar de `1fr`: sem o mínimo zerado, texto longo dentro
   do card cria largura mínima e a grade estoura o container em vez de
   encolher. E o colapso para coluna única desceu de 920px para 700px — 920
   pegava notebook e o painel de preview (862px), que foi onde ele viu a
   quebra. Entre 700 e 1000 os cards apertam padding e fonte para caberem os
   três, que é o que ele quer ver. */
@media (max-width:1000px){
  .planos{gap:12px;}
  .plano{padding:24px 18px;}
  .plano-valor{font-size:2.3rem;}
  .plano-beneficios li{font-size:.86rem;}
}
.plano{
  position:relative;padding:30px 26px;border-radius:18px;
  background:var(--painel);
  border:1px solid var(--border);
  transition:border-color .28s,transform .28s;
}
.plano:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px);}
.plano.destaque{
  border-color:rgba(109,94,252,.45);
  background:linear-gradient(180deg,rgba(109,94,252,.1),var(--painel) 55%);
  box-shadow:0 24px 64px -34px rgba(109,94,252,.6);
}
.plano-fita{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;padding:5px 12px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(96deg,var(--accent),var(--azul));
  box-shadow:0 6px 18px -6px rgba(109,94,252,.9);
  z-index:3;
}
.plano-tag{display:inline-block;font-family:var(--mono);font-size:.7rem;
  font-weight:600;color:var(--accent-2);letter-spacing:.1em;
  text-transform:uppercase;}
.plano-valor{
  margin-top:12px;
  font-size:2.85rem;font-weight:700;letter-spacing:-.042em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.plano-valor small{font-size:1.15rem;font-weight:600;color:var(--text-2);
  margin-right:4px;vertical-align:super;}
.plano-valor span{font-size:.95rem;font-weight:500;color:var(--text-2);
  letter-spacing:0;}
.plano-linha{margin-top:8px;font-size:.84rem;color:var(--muted);}
.plano ul{list-style:none;margin-top:20px;display:grid;gap:9px;}
.plano li{position:relative;padding-left:23px;font-size:.88rem;
  color:var(--text-2);}
.plano li::before{
  content:'';position:absolute;left:1px;top:.42em;
  width:12px;height:7px;
  border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);
  transform:rotate(-45deg);
}
.plano li.inclusa{color:var(--text);font-weight:550;}


/* ═══════════════════════════════════════════════════════════════════════
   FAQ — Interactive Accordion (21st, id 9602) em CSS/JS puro.
   A altura anima com o truque de grid 0fr→1fr; o JS só troca aria-expanded.
   ═══════════════════════════════════════════════════════════════════════ */
.faq{max-width:720px;margin:40px auto 0;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-btn{
  display:flex;align-items:center;gap:18px;width:100%;
  padding:22px 4px;
  font:inherit;text-align:left;color:inherit;
  background:none;border:0;cursor:pointer;
}
.faq-num{
  display:grid;place-items:center;flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  font-family:var(--mono);font-size:.8rem;color:var(--muted);
  border:1px solid transparent;
  transition:background .3s,color .3s,border-color .3s;
}
.faq-btn:hover .faq-num{border-color:var(--border-2);}
.faq-btn[aria-expanded="true"] .faq-num{
  background:#fff;color:#0a0a0a;font-weight:700;}
.faq-tit{
  flex:1;font-size:1.06rem;font-weight:550;letter-spacing:-.01em;
  color:var(--text-2);
  transition:color .25s,transform .25s;
}
.faq-btn:hover .faq-tit,
.faq-btn[aria-expanded="true"] .faq-tit{color:var(--text);
  transform:translateX(3px);}
.faq-mais{
  display:grid;place-items:center;flex-shrink:0;
  width:32px;height:32px;color:var(--muted);
  transition:transform .35s cubic-bezier(.22,1,.36,1),color .25s;
}
.faq-btn:hover .faq-mais{color:var(--text);}
/* O + gira 45° e vira × — o gesto do componente original. */
.faq-btn[aria-expanded="true"] .faq-mais{transform:rotate(45deg);
  color:var(--text);}
.faq-corpo{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.faq-btn[aria-expanded="true"]+.faq-corpo{grid-template-rows:1fr;}
.faq-texto{
  overflow:hidden;
  padding:0 46px 0 60px;
  font-size:.92rem;color:var(--text-2);
  opacity:0;transition:opacity .3s ease .1s,padding .3s ease;
}
.faq-btn[aria-expanded="true"]+.faq-corpo .faq-texto{
  opacity:1;padding-bottom:24px;}


/* ═══════════════════════════════════════════════════════════════════════
   FECHAMENTO + RODAPÉ
   ═══════════════════════════════════════════════════════════════════════ */
.fim{padding-top:130px;text-align:center;padding-bottom:24px;}
.rodape{
  position:relative;z-index:1;
  max-width:var(--max);margin:96px auto 0;
  padding:26px 24px 42px;
  border-top:1px solid var(--border);
  font-size:.83rem;color:var(--muted);text-align:center;
}
/* Links legais: presentes e legíveis, sem competir com a chamada de ação.
   `flex-wrap` porque no celular os três não cabem numa linha só. */
.rodape-legal{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px;margin-top:14px;
}
.rodape-legal a{color:var(--text-2);text-decoration:none;}
.rodape-legal a:hover{color:var(--text);}


/* ═══════════════════════════════════════════════════════════════════════
   REVELAÇÃO
   ═══════════════════════════════════════════════════════════════════════ */
.revela{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1);
}
.revela.dentro{opacity:1;transform:none;}
.d1{transition-delay:.09s} .d2{transition-delay:.18s}
.d3{transition-delay:.27s} .d4{transition-delay:.36s}
.d5{transition-delay:.45s}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:920px){
  .numeros{grid-template-columns:repeat(2,1fr);}
  .metricas{grid-template-columns:1fr;}
  .metrica{border-right:0;border-bottom:1px solid var(--border);}
  .metrica:last-child{border-bottom:0;}
}
@media (max-width:700px){
  /* Só aqui a horizontal cede: abaixo disto três cards ficariam com ~200px
     cada e o preço não caberia numa linha. */
  .planos{grid-template-columns:1fr;}
  .plano{padding:28px 22px;}
  .plano-valor{font-size:2.6rem;}
}
@media (max-width:760px){
  .menu{gap:14px;}
  /* Os âncoras somem e o "Entrar" fica — o único link do topo que gera
     receita. */
  .menu a:not(.entrar){display:none;}
  .hero{padding-top:28px;}
  .secao,.faixa{padding-top:96px;}
  .plat{padding-top:72px;}
  .moeda{margin-top:28px;}
  .ctas{flex-direction:column;}
  .ctas .cta,.ctas .cta-2{width:100%;}
  .moldura{margin-top:34px;padding:6px;}
  .num{padding:22px 14px;}
  .num strong{font-size:1.5rem;}
  .painel-topo{flex-wrap:wrap;}
  .linhas li{grid-template-columns:1fr 54px 66px;gap:8px;font-size:.78rem;}
  .faq-texto{padding-left:56px;padding-right:12px;}
  .vsl-play{width:60px;height:60px;}
  .hero-stats{font-size:.72rem;}
}


/* ═══════════════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO — quem liga isso costuma ter enxaqueca ou vertigem.
   Tudo para e fica visível; a página não perde nenhuma informação.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .pulso,.moeda-brilho,.moeda-aro,.marq-fita{animation:none;}
  .cta::after{display:none;}
  .revela{opacity:1;transform:none;transition:none;}
  .linhas li{opacity:1;transform:none;transition:none;}
  .trafego-linha{stroke-dashoffset:0;transition:none;}
  .trafego-area{opacity:1;transition:none;}
  .feixe-borda::after{animation:none;display:none;}
  .plano:hover,.card:hover{transform:none;}
}

/* Subtítulos da política — a seção da extensão precisou de três níveis para
   separar "o que ela observa sozinha" de "o que ela envia quando você pede",
   que é a distinção que o leitor mais procura. */
h3{font-size:1rem;font-weight:650;margin:1.6rem 0 .5rem;color:var(--texto,#eceef4);}