/* ============================================================================
   IDENTIDADE VISUAL — camada por cima do estilo.css, nao no lugar dele.

   REESCRITO EM 07/09/2026, e a versao anterior deste arquivo estava errada.

   Eu tinha montado a primeira versao a partir de docs/marca-cores-e-fontes.png, uma
   prancha solta. Depois ela entregou o BRANDBOOK OFICIAL COMPLETO
   (Brandbook_Master_Cria_Ai_2026, versao 1.0, julho de 2026, 21 paginas mais 10 pranchas
   de sistema visual), e ele contradiz a versao anterior em tres pontos graves:

     1. A PALETA estava errada. Eu usava #041A3B, #0A224D, #F36A21 e #F6F1E7. Nenhum dos
        quatro e oficial. Pior: eu inventei tres cores e escrevi nos proprios comentarios
        que estava inventando ("o ambar nao existe no manual", "estes tres o manual nao
        define"). Inventar cor num arquivo chamado marca.css e' o oposto do trabalho.

     2. A TIPOGRAFIA estava errada. Eu usava Cormorant Garamond, uma serifada. O brandbook
        manda Sora para titulo e Manrope para corpo, com escala numerica fechada. Serifada
        e' bonita, mas empurra a marca pra editorial de moda, e a categoria que ela decidiu
        ocupar e' educacao tecnologica.

     3. O DOURADO estava dentro. A prancha 04 proibe com todas as letras: "Dourado nao faz
        parte da paleta oficial. O off-white #F3ECDE toma o lugar dele." Eu tinha
        --amber: #E8A44C aqui dentro, e o index ainda usa #FFB800 na caixa de teste gratis.

   O QUE ESTE ARQUIVO NAO MUDA, de proposito:

   O verde e o dourado do MINERADOR continuam vivos. La eles nao sao decoracao, sao COR DE
   ESTADO: verde e' comissao boa, dourado e' comissao alta, vermelho e' super alta. O
   brandbook permite cor de estado fora da paleta. E o minerador mora no membros.html, que
   nao carrega este arquivo, entao nada disso corre risco.

   POR QUE CONTINUA SENDO ARQUIVO SEPARADO:

   O estilo.css e' carregado por 11 paginas. Editar la muda todas de uma vez. Aqui, quem
   carrega muda; quem nao carrega fica como estava. Enquanto a identidade nova estiver em
   aprovacao, so o index.html carrega isto.

   Precisa vir DEPOIS do estilo.css no HTML: e' a ordem que faz estas regras vencerem.
   ============================================================================ */

:root {
  /* ---- PALETA OFICIAL, as nove cores do brandbook, sem invencao ------------
     Azul Noite      #02031B   o fundo da pagina
     Azul Profundo   #0A0C2D   primeira superficie acima do fundo
     Azul Ebano      #131843   segunda superficie
     Azul Cosmico    #202868   terceira superficie e borda mais viva
     Azul Eletrico   #2D4FB8   cor de estado, foco, item ativo. NUNCA botao de compra
     Laranja Ignea   #D54123   base do gradiente de botao
     Laranja Vibrante#EA552A   texto de enfase e numeral de secao
     Laranja Pulso   #FF6A2B   nucleo de brilho, preco, botao de conversao
     Off White       #F3ECDE   todo o texto claro, no lugar do branco puro

     Proporcao mandada pelo manual: 60% azuis, 25% off-white, 10% laranjas, 5% acento. */

  --bg:       #02031B;
  --surface:  #0A0C2D;
  --surface2: #131843;
  --line:     #202868;
  --grafite:  #02031B;

  --orange:     #FF6A2B;
  --orange-dim: #D54123;

  /* O DOURADO SAI DA PAGINA DE VENDAS.
     --amber existe em 6 lugares do estilo.css e o index usa em mais 4. Em vez de cacar
     um por um e arriscar esquecer, o token inteiro passa a apontar pro laranja vibrante.
     Um lugar so, e a proibicao passa a valer em todos de uma vez. */
  --amber: #EA552A;

  --blue:      #2D4FB8;
  --blue-vibe: #2D4FB8;
  --shopee:    #EA552A;

  --cream: #F3ECDE;
  --white: #F3ECDE;
  --muted: #8A93A8;

  /* ---- TIPOGRAFIA OFICIAL --------------------------------------------------
     Sora para display e titulo. Manrope para interface e corpo.
     Escala fechada pelo brandbook, que eu sigo em vez de inventar:
       H1  Sora Bold      48/56  tracking -1%
       H2  Sora SemiBold  32/40  tracking -0,5%
       H3  Sora Medium    24/32  tracking 0
       corpo   Manrope Regular  16/24
       legenda Manrope Regular  13/20
       botao   Manrope SemiBold 14/20  tracking +0,5%  caixa alta                   */
  --fonte-titulo: 'Sora', system-ui, -apple-system, sans-serif;
  --fonte-corpo:  'Manrope', system-ui, -apple-system, sans-serif;
  --fonte-apoio:  'Manrope', system-ui, -apple-system, sans-serif;
}

/* ---- A TROCA DE FONTE -----------------------------------------------------
   O estilo.css escreve font-family em 145 lugares, sempre com o nome da fonte dentro da
   propria regra, sempre Raleway ou Montserrat. Reescrever os 145 seria muito risco pra
   pouco ganho, e qualquer um que passasse batido ficaria com a fonte velha no meio da
   pagina. Estas duas regras trocam as duas de uma vez, onde quer que aparecam. */

[style*="Raleway"], .hero-headline, .section-title, h1, h2, h3, .nav-logo,
.preco-num, .stat-num {
  font-family: var(--fonte-titulo) !important;
}
[style*="Montserrat"], body, p, li, .hero-sub, .section-lead, input, textarea, button, a {
  font-family: var(--fonte-corpo) !important;
}

/* Sora e' geometrica e mais larga que a Raleway no mesmo corpo. Sem apertar o tracking, a
   manchete quebra em mais linhas e perde impacto. O brandbook ja da os valores. */
.hero-headline, h1 { font-weight: 700; letter-spacing: -0.01em; }
.section-title, h2  { font-weight: 600; letter-spacing: -0.005em; }
h3                  { font-weight: 500; letter-spacing: 0; }

/* rotulo e etiqueta ficam em Manrope SemiBold caixa alta com tracking largo, que e' o
   padrao de sobrelinha do manual */
.eyebrow, .bonus-tag, .nav-links a, .nav-entrar, .badge, .card-tag, .prod-tag,
.stat-box .rotulo, .instrucoes-titulo, .footer-legal {
  font-family: var(--fonte-corpo) !important;
  font-weight: 600;
  letter-spacing: .18em;
}

/* ---- A FAISCA NO LUGAR DO CHECK VERDE -------------------------------------
   O brandbook e' explicito nas duas pontas: verde so existe como cor de estado, e o
   marcador de lista oficial e' a faisca de quatro pontas laranja. O check verde e' o
   clichê visual mais reconhecivel de pagina de infoproduto, e a marca quer justamente
   nao parecer isso.

   Troco pelo pseudo-elemento pra nao precisar mexer nos 30 e poucos <span class="ic">✓
   espalhados pelo HTML. O ✓ continua no codigo, so nao e' mais o que aparece. */
.hero-inclui-list .ic,
.unlock-list .ic,
.offer-list .ic {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
  display: inline-block;
  /* A LARGURA E EM PIXEL, NAO EM `em`, E ISSO NAO E DETALHE.
     A regra acima zera o font-size pra esconder o check original. `em` e relativo ao
     font-size do PROPRIO elemento, entao 1em de zero e ZERO: a caixa da faisca ficava sem
     largura e a estrela, que e absoluta, caia colada no comeco do texto.
     Ela viu em 07/09: "olha como ta COLADO na estrelinha". */
  width: 15px;
  flex-shrink: 0;
}
.hero-inclui-list .ic::before,
.unlock-list .ic::before,
.offer-list .ic::before {
  content: "\2726";                 /* a faisca de quatro pontas */
  font-size: 13px;
  line-height: 1;
  color: var(--orange);
  position: absolute;
  left: 0; top: 3px;   /* em pixel pelo mesmo motivo: 0.12em de font-size zero e zero */
}
.offer-list .ic.bonus::before { color: var(--amber); font-size: 15px; }

/* ---- BOTAO: gradiente no lugar do laranja chapado com halo -----------------
   A prancha 08 desenha o botao como pilula com gradiente horizontal de #FA480D para
   #C62A08. A prancha 10 lista "brilhos, neons, sombras ou efeitos exagerados" como coisa
   a evitar, e hoje todo botao da pagina tem um halo difuso em volta, que e' exatamente o
   que faz botao de compra parecer barato. */
.btn-primary, .btn-comprar, .cta-primary {
  background: linear-gradient(90deg, #FA480D, #C62A08) !important;
  box-shadow: 0 8px 24px rgba(213, 65, 35, .28) !important;
  border: none !important;
}
.btn-primary:hover, .btn-comprar:hover, .cta-primary:hover {
  background: linear-gradient(90deg, #FF6A2B, #D54123) !important;
  box-shadow: 0 12px 30px rgba(213, 65, 35, .42) !important;
  transform: translateY(-1px);
}

/* ---- A LOGO ---------------------------------------------------------------
   Deixa de ser texto e passa a ser a marca desenhada. O texto continua no HTML, escondido,
   porque e' ele que o leitor de tela le e o Google indexa.

   ATENCAO PRA QUEM MEXER DEPOIS: isto so funciona se fotos/marca/ estiver COMMITADO. Em
   07/09/2026 os arquivos existiam no disco e nenhum estava no git, entao no ar isto seria
   um retangulo vazio de 168 por 56 sem nome de marca nenhum. Conferir com
   `git ls-files fotos/marca` antes de publicar. */
.nav-logo {
  display: inline-block;
  width: 168px; height: 56px;
  background: url("fotos/marca/logo-horizontal.png") left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.footer .nav-logo  { width: 210px; height: 70px; }
.lock-box .nav-logo { width: 240px; height: 80px; }


/* ---- O LINK DENTRO DA RESPOSTA DO FAQ -------------------------------------
   Medido em 22/09/2026 num celular de 375px: o unico link que existe dentro de uma
   resposta do FAQ, o "Termos" da pergunta sobre reembolso, estava sem estilo nenhum e
   saia no azul padrao do navegador, rgb(0,0,238). Contraste de 2,61 contra o fundo da
   resposta, quando o minimo pra texto deste tamanho e' 4,5. Nao e' escolha de desenho,
   e' um link que passou batido: todo o resto da pagina tem cor definida.

   Fica no Laranja Pulso, que o brandbook chama de nucleo de brilho, com sublinhado pra
   continuar se lendo como link no meio do paragrafo. */
.faq-a a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-a a:hover { color: var(--amber); }


/* ---- OS LINKS DO RODAPE ---------------------------------------------------
   Medido em 22/09/2026 num celular de 375px: "contato", "termos de uso" e "politica de
   privacidade" tinham 17px de altura, e a linha de baixo comecava 6px depois do fim da
   de cima. Dedo em celular cobre uns 45px, entao quem mira num acerta o outro. E' o
   mesmo caso que o membros.html ja tinha anotado e consertado na tela de entrada, com
   a mesma frase: o alvo era pequeno demais e a vizinhanca era perigosa demais.

   Sao os links que a pessoa procura quando quer conferir reembolso ou privacidade
   antes de comprar, e sao tambem os que plataforma de anuncio olha.

   O desenho nao muda: mesma cor, mesma fonte, mesmo tamanho de letra e mesmo separador.
   O que muda e' que cada link passa a ser um bloco com recheio, e as linhas ganham ar
   suficiente pra nao se encostarem.

   Primeira tentativa, anotada pra ninguem repetir: so' aumentar o recheio dos links fez
   cada um virar uma caixa de 47px, mas as linhas continuaram a 36px de distancia, entao
   as caixas passaram a se sobrepor em 11px e o problema de mira ficou pior, nao melhor.
   O espacamento das linhas tem que crescer junto. Aqui as duas medidas fecham em 44:
   a linha do paragrafo e a altura de cada link. */
.footer-legal { line-height: 44px; }
.footer-legal a {
  display: inline-block;
  line-height: 18px;
  padding: 13px 8px;
}