/* Isca "Mágicas Grátis" — base compartilhada pelas três páginas do funil.
   Tokens tirados da /platinum: preto, azul de marca #0066ff, Inter.
   O verde #00c853 é botão de WhatsApp na /platinum — não é cor de marca,
   e por isso não aparece aqui. */

:root{
  --breu:#000; --carvao:#0a0a0a; --grafite:#141414;
  --carta:#fff; --fumaca:#afafaf; --sombra:#8a8a8a; /* 6.1:1 no preto — 4.5 é o mínimo da norma */
  --azul:#0066ff; --azul-claro:#6193ff; --azul-fundo:#001450;
  --naipe:#e8344e;
  --borda:rgba(255,255,255,.10);
  --largura:1080px;
  --passo:clamp(64px,9vw,128px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--breu); color:var(--carta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.limite{width:100%;max-width:var(--largura);margin:0 auto;padding:0 24px}
section{padding:var(--passo) 0}

/* ── Aurora do topo: mesma linguagem da /platinum ───────────────── */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.aurora::before{
  width:min(720px,105vw);height:min(720px,105vw);
  left:-24%;top:-30%;
  background:radial-gradient(circle,rgba(88,40,180,.55) 0%,rgba(0,42,150,.30) 45%,transparent 70%);
}
.aurora::after{
  width:min(560px,85vw);height:min(560px,85vw);
  right:-18%;top:6%;
  background:radial-gradient(circle,rgba(0,102,255,.30) 0%,transparent 68%);
}

/* ── Marca ─────────────────────────────────────────────────────── */
.topo{position:relative;z-index:2;padding:28px 0}
.marca{display:inline-block;line-height:0}
/* Logomarca oficial. NUNCA substituir por ícone desenhado ou recriado —
   o arquivo original mora em Google Drive › Mágica Online (oficial) › Logomarca. */
.marca img{
  height:32px;width:auto;display:block;
  /* 700x110 é a proporção do arquivo; a altura manda */
}
@media (max-width:640px){.marca img{height:26px}}


/* ── Hero ──────────────────────────────────────────────────────── */
.hero{position:relative;padding-top:clamp(40px,7vw,80px);padding-bottom:var(--passo)}
.hero>.limite{position:relative;z-index:1}
.etiqueta{
  display:inline-flex;align-items:flex-start;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azul-claro);
  border:1px solid rgba(97,147,255,.32);border-radius:999px;
  padding:8px 16px;margin-bottom:28px;
}
.etiqueta i{width:6px;height:6px;border-radius:50%;background:var(--azul-claro);flex:none;
  margin-top:.42em /* alinha com a 1a linha quando a etiqueta quebra */}
h1{
  font-weight:700;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(42px,7.6vw,86px);
  max-width:15ch;
}
h1 em{font-style:normal;color:var(--azul)}
.linha-fina{
  margin-top:28px;max-width:56ch;
  font-size:clamp(17px,2vw,20px);color:var(--fumaca);line-height:1.62;
}
.linha-fina b{color:var(--carta);font-weight:600}

.assinatura{
  display:flex;align-items:center;gap:16px;margin-top:36px;
  padding-top:26px;border-top:1px solid var(--borda);max-width:56ch;
}
.assinatura .quem{font-size:15px;line-height:1.5;color:var(--fumaca)}
.assinatura .quem strong{display:block;color:var(--carta);font-weight:600;font-size:16px;letter-spacing:-.01em}
.assinatura .quem a{color:var(--fumaca);text-decoration:underline;text-underline-offset:3px}
.assinatura .quem i{font-style:italic;color:#d4d4d4}
.retrato{
  width:56px;height:56px;border-radius:50%;flex:none;
  object-fit:cover;border:1px solid var(--borda);background:var(--grafite);
}

/* ── As três cartas: elemento-assinatura ───────────────────────── */
/* As cartas ficam viradas para baixo DE PROPÓSITO — decisão do Gui em
   27/08/2026: a isca promete "três mágicas com cartas pra aprender
   imediatamente", sem revelar quais. O mistério é o argumento, não uma
   lacuna. Não "consertar" isso pondo nomes.
   O .indice de canto segue definido abaixo caso um dia se revele. */
.leque{
  display:grid;gap:20px;margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.carta-mag{
  position:relative;isolation:isolate;
  background:linear-gradient(168deg,#131313 0%,#0a0a0a 100%);
  border:1px solid var(--borda);border-radius:16px;
  padding:26px 24px 30px;min-height:270px;
  display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s;
}
@media (hover:hover){.carta-mag:hover{transform:translateY(-7px);border-color:rgba(97,147,255,.42)}}

/* dorso do baralho */
.carta-mag.virada{align-items:center;justify-content:center;gap:20px;padding:24px}
.dorso{
  flex:none;width:100%;max-width:150px;aspect-ratio:5/7;border-radius:10px;
  border:1px solid rgba(97,147,255,.26);
  background-color:#04122e;
  background-image:
    repeating-linear-gradient(45deg,rgba(0,102,255,.40) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(-45deg,rgba(0,102,255,.40) 0 2px,transparent 2px 9px);
  box-shadow:inset 0 0 0 5px #04122e,inset 0 0 0 6px rgba(97,147,255,.30);
}
.ordem{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sombra);
}
.revelacao{margin-top:28px}

/* índice de canto — usado quando as cartas forem reveladas */
.indice{
  position:absolute;font-weight:700;line-height:.92;
  font-size:19px;letter-spacing:-.02em;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.indice.alto{top:16px;left:18px}
.indice.baixo{bottom:16px;right:18px;transform:rotate(180deg)}
.indice .naipe{font-size:16px}
.vermelho{color:var(--naipe)} .preto{color:var(--carta)}
.carta-mag h3{
  margin-top:38px;font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.25;
}
.carta-mag p{margin-top:12px;font-size:15px;color:var(--fumaca);line-height:1.6}

/* ── Blocos de texto ───────────────────────────────────────────── */
h2{
  font-size:clamp(28px,4.2vw,44px);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;max-width:20ch;
}
.sub{margin-top:18px;max-width:58ch;color:var(--fumaca);font-size:17px;line-height:1.65}
.dupla{display:grid;gap:22px;margin-top:40px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.nota{
  border:1px solid var(--borda);border-left:2px solid var(--azul);
  border-radius:0 14px 14px 0;padding:24px 26px;background:rgba(255,255,255,.015);
}
.nota strong{display:block;font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.nota p{font-size:15px;color:var(--fumaca);line-height:1.6}

/* ── Formulário ────────────────────────────────────────────────── */
#quero{scroll-margin-top:24px}
.moldura{
  background:linear-gradient(180deg,#0d0d0d 0%,#050505 100%);
  border:1px solid var(--borda);border-radius:22px;
  padding:clamp(24px,4vw,42px);margin-top:40px;
}
.moldura h2{max-width:22ch}
/* NÃO pôr fundo aqui. O formulário do GoHighLevel já vem estilizado pra fundo
   escuro — os rótulos são #FFFFFF8C, branco a 55%. Fundo claro atrás deles some
   com o texto inteiro. Confirmado no DevTools em 27/08/2026. */
.formulario{margin-top:26px;border-radius:12px;overflow:hidden;background:transparent}
.formulario iframe{background:transparent;color-scheme:dark}
.formulario iframe{display:block;width:100%;border:none}
.consentimento{
  margin-top:20px;font-size:13px;line-height:1.6;color:var(--sombra);max-width:62ch;
}
.consentimento a{color:var(--fumaca);text-decoration:underline;text-underline-offset:3px}

/* ── Rodapé ────────────────────────────────────────────────────── */
footer{padding:44px 0 60px;border-top:1px solid var(--borda)}
.rodape{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
.rodape small{color:var(--sombra);font-size:13px}
.rodape a{color:var(--sombra);font-size:13px;text-decoration:none;border-bottom:1px solid transparent}
.rodape a:hover{color:var(--fumaca);border-bottom-color:var(--borda)}

/* ── Base de qualidade ─────────────────────────────────────────── */
a:focus-visible,button:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:640px){
  body{font-size:16px}
  .assinatura{flex-direction:row}
  .indice.alto{top:14px;left:16px}
}