/* Folha da pagina de vendas da Revista Influenciadores Pretos
   (`lp2.html` e `lp2-obrigado.html`).

   E SEPARADA de `lp.css` de proposito. As duas landings vendem produtos
   diferentes e vao divergir: esta segue a marca da Revista, que e preto e
   dourado com muito contraste, e aquela segue a do Agente. Compartilhar a
   folha faria um ajuste de botao na Revista mudar a landing do Agente, que e
   o tipo de acidente que ninguem percebe no dia e todo mundo sente na
   conversao. */

@import url('/mobile.css');

:root {
  --bg: #08090b;
  --surface: #14161b;
  --surface-2: #1c1f26;
  --border: #262a33;
  --ink: #f2f0ea;
  --ink-dim: #a7a396;
  --ink-faint: #7a776c;
  --ouro: #c8912f;
  --ouro-claro: #e8c66a;
  --ouro-palha: #f3ddA0;
  --ouro-fraco: rgba(200, 145, 47, .13);
  --bom: #3fb27f;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(900px 460px at 50% -260px, rgba(200, 145, 47, .22), transparent 70%),
    radial-gradient(700px 420px at 100% 40%, rgba(200, 145, 47, .06), transparent 70%);
  background-repeat: no-repeat;
  /* Espaco para a barra fixa de compra que acompanha a rolagem no celular. */
  padding-bottom: 88px;
}

.wrap { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 18px; }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; font-weight: 750; }
a { color: var(--ouro-claro); }
b, strong { font-weight: 700; }

/* ---------- marca ---------- */

/* O logotipo e tipografico, e nao uma imagem: a arte oficial da Revista tem
   fundo preto chapado e ilustracao, e reduzida a 120px no celular ela vira uma
   mancha escura sem leitura. O que a marca tem de reconhecivel de longe e o
   par de palavras em caixa alta com o dourado no meio, e isso a tipografia
   entrega em qualquer tamanho, sem peso de download.
   Trocar por PNG e um dia de trabalho: basta soltar o arquivo em
   `/lp2-marca.png` e substituir este bloco por uma <img>. */
.marca { text-align: center; padding: 26px 0 4px; }
.marca .chapeu {
  font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--ouro-claro); font-weight: 600; padding-left: .42em;
}
.marca .nome {
  display: block; font-size: 27px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.05; margin-top: 6px;
}
.marca .nome .dourado {
  display: block;
  background: linear-gradient(100deg, var(--ouro-palha), var(--ouro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca .digital {
  display: inline-block; margin-top: 8px;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-faint); padding-left: .32em;
}
.marca .risco {
  width: 74px; height: 2px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
}

/* ---------- heroi ---------- */

header.hero { text-align: center; padding: 6px 0 8px; }

.selo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ouro-fraco); color: var(--ouro-claro);
  border: 1px solid rgba(200, 145, 47, .32);
  padding: 8px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

h1 { font-size: 31px; margin: 18px 0 0; }
h1 .destaque {
  background: linear-gradient(100deg, var(--ouro-palha), var(--ouro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.linha-fina { color: var(--ink-dim); font-size: 16.5px; margin: 15px auto 0; max-width: 640px; }

/* ---------- botoes ---------- */

.cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 56px; padding: 15px 18px;
  background: linear-gradient(135deg, var(--ouro-claro), var(--ouro));
  color: #17120a; font-weight: 800; font-size: 16.5px;
  border: 0; border-radius: 14px; text-decoration: none;
  box-shadow: 0 12px 30px rgba(200, 145, 47, .26);
  text-align: center; line-height: 1.25;
}
.cta:active { transform: translateY(1px); }
.cta .ico-seta { width: 19px; height: 19px; flex: 0 0 auto; }

.cta-vazado {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 54px; padding: 14px 18px;
  background: transparent; color: var(--ouro-claro);
  border: 1.6px solid rgba(200, 145, 47, .55); border-radius: 14px;
  font-weight: 700; font-size: 16px; text-decoration: none; text-align: center;
}

.cta-nota { color: var(--ink-faint); font-size: 13px; margin-top: 11px; }

/* ---------- frases de impacto ---------- */

/* A frase e uma secao inteira, e nao uma citacao dentro de um paragrafo. Ela
   existe para dar respiro entre dois blocos densos e para o visitante que rola
   rapido levar a ideia mesmo sem ler o resto. */
.frase {
  margin: 34px 0; padding: 26px 20px;
  border-top: 1px solid rgba(200, 145, 47, .22);
  border-bottom: 1px solid rgba(200, 145, 47, .22);
  text-align: center;
}
.frase p { font-size: 21px; font-weight: 750; line-height: 1.35; letter-spacing: -.02em; }
.frase p .dourado { color: var(--ouro-claro); }
.frase small { display: block; margin-top: 10px; color: var(--ink-faint); font-size: 14px; font-weight: 500; }

/* ---------- secoes ---------- */

/* Acima do canvas do ceu.js, que entra em position fixed com z-index negativo.
   Sem isto, secao sem contexto de empilhamento propria fica na mesma camada do
   fundo e o texto disputa espaco com as estrelas. */
section { padding: 34px 0; position: relative; z-index: 1; }
section > .wrap > .chamada, .chamada {
  display: block; color: var(--ouro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
section h2 { font-size: 26px; margin-bottom: 14px; }
section .resumo { color: var(--ink-dim); font-size: 16px; max-width: 660px; }

.cartao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 18px;
}

.grade { display: grid; gap: 12px; margin-top: 20px; }

/* ---------- a esteira Conheca > Conecte-se > ... ---------- */

.esteira { display: grid; gap: 10px; margin-top: 22px; counter-reset: passo; }
.passo {
  display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 16px;
}
.passo .num {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ouro-fraco); border: 1px solid rgba(200, 145, 47, .3);
  color: var(--ouro-claro); font-weight: 800; font-size: 16px;
}
.passo h3 { font-size: 17px; margin-bottom: 4px; }
.passo p { color: var(--ink-dim); font-size: 15px; }

/* ---------- listas ---------- */

.lista { display: grid; gap: 11px; margin-top: 16px; }
.item { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; }
.item .ico-ok { color: var(--ouro-claro); margin-top: 3px; }
.item .ico { width: 20px; height: 20px; display: block; }
.item span { font-size: 15.5px; }
.item span b { color: var(--ink); }

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.pilula {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-dim); font-size: 13px; padding: 8px 13px; border-radius: 999px;
}
.pilula b { color: var(--ouro-claro); font-weight: 700; }

/* ---------- prova ---------- */

.prova { margin-top: 26px; padding: 20px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.numero-item { text-align: center; }
.numero-item b { display: block; font-size: 22px; color: var(--ouro-claro); font-weight: 800; letter-spacing: -.02em; }
.numero-item span { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; margin-top: 3px; }
.prova .assinatura { color: var(--ink-dim); font-size: 14.5px; margin-top: 14px; text-align: center; }

/* ---------- profissoes ---------- */

.profissoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.profissao {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 13px; font-size: 14px; color: var(--ink);
}

/* ---------- a cadeia da percepcao ---------- */

.cadeia { display: grid; gap: 0; margin-top: 20px; }
.elo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 16px; font-size: 15.5px;
}
.elo b { color: var(--ouro-claro); }
.seta-baixo { display: flex; justify-content: center; padding: 7px 0; color: var(--ouro); }
.seta-baixo svg { width: 20px; height: 20px; }

/* ---------- planos ---------- */

.planos { display: grid; gap: 14px; margin-top: 22px; }
.plano {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 18px; text-decoration: none; color: inherit;
  display: block;
}
.plano.forte { border-color: rgba(200, 145, 47, .55); background: linear-gradient(180deg, rgba(200,145,47,.08), var(--surface) 60%); }
.plano .fita {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ouro-claro), var(--ouro));
  color: #17120a; font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.plano .nome { display: block; font-size: 15px; font-weight: 700; color: var(--ouro-claro); letter-spacing: .06em; text-transform: uppercase; }
.plano .valor { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
.plano .ciclo { display: block; color: var(--ink-faint); font-size: 13.5px; margin-top: 2px; }
.plano .cta { margin-top: 16px; }

.planos-nota { color: var(--ink-faint); font-size: 13.5px; margin-top: 16px; text-align: center; }

/* ---------- afiliado ---------- */

/* A secao do afiliado e visualmente OUTRA COISA, e nao um cartao a mais: fundo
   proprio, botao vazado e nenhum dourado cheio. Quem chegou para assinar nao
   pode clicar aqui por engano achando que e o botao de compra, e quem chegou
   para divulgar precisa achar isto sem procurar. */
.afiliado {
  margin: 34px 0 0;
  background: linear-gradient(180deg, rgba(200,145,47,.07), transparent);
  border: 1px dashed rgba(200, 145, 47, .45);
  border-radius: 18px; padding: 24px 18px; text-align: center;
}
.afiliado .chamada { color: var(--ouro); }
.afiliado h2 { font-size: 23px; }
.afiliado p { color: var(--ink-dim); font-size: 15.5px; margin-top: 10px; }
.afiliado .cta-vazado { margin-top: 18px; }
.afiliado .aviso { color: var(--ink-faint); font-size: 13px; margin-top: 12px; }

/* ---------- perguntas ---------- */

.pergunta { border-bottom: 1px solid var(--border); padding: 15px 0; }
.pergunta h3 { font-size: 16.5px; margin-bottom: 6px; }
.pergunta p { color: var(--ink-dim); font-size: 15px; }

/* ---------- fechamento ---------- */

.fechamento { text-align: center; padding: 40px 0 10px; }
.fechamento .punho { font-size: 34px; line-height: 1; }
.fechamento h2 { font-size: 27px; margin: 12px 0 16px; }
.verbos { display: grid; gap: 8px; max-width: 340px; margin: 0 auto 24px; }
.verbo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px; font-size: 15.5px; font-weight: 650;
}
.verbo b { color: var(--ouro-claro); }

/* ---------- whatsapp ---------- */

.whats-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; margin-top: 14px; padding: 10px 16px;
  color: var(--ink-dim); font-size: 14.5px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.whats-link .ico-zap { width: 19px; height: 19px; color: #25d366; }

/* ---------- rodape ---------- */

footer {
  margin-top: 40px; padding: 26px 0 30px;
  border-top: 1px solid var(--border); text-align: center;
  color: var(--ink-faint); font-size: 13.5px;
}
footer .links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 12px; }
footer a { color: var(--ink-dim); text-decoration: none; }

/* ---------- barra fixa ---------- */

.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 11, .96);
  border-top: 1px solid var(--border);
  transform: translateY(120%); transition: transform .22s ease;
}
.barra-compra.aparece { transform: translateY(0); }
.barra-compra .texto { flex: 1 1 auto; min-width: 0; }
.barra-compra .texto b { display: block; font-size: 14.5px; }
.barra-compra .texto span { display: block; color: var(--ink-faint); font-size: 12.5px; }
.barra-compra .cta { width: auto; flex: 0 0 auto; min-height: 48px; padding: 12px 18px; font-size: 15px; }

/* ---------- telas maiores ---------- */

@media (min-width: 760px) {
  .wrap { padding: 0 24px; }
  h1 { font-size: 46px; }
  .marca .nome { font-size: 40px; }
  section h2 { font-size: 32px; }
  .frase p { font-size: 27px; }
  .esteira { grid-template-columns: repeat(2, 1fr); }
  .planos { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .numero-item b { font-size: 27px; }
  .cta { width: auto; min-width: 300px; margin-left: auto; margin-right: auto; }
  .plano .cta { width: 100%; min-width: 0; }
  .cta-vazado { width: auto; min-width: 300px; margin-left: auto; margin-right: auto; }
  body { padding-bottom: 0; }
  .barra-compra { display: none; }
}