/* =============================================================================
   style-cinematic.css — Curso Plus
   Redesign visual "cinema/moderno" (2026-09-04, pedido do Luiz).

   O que este arquivo é: uma camada de estilo por CIMA do CSS original que já
   existe dentro de index.html (que continua 100% intacto — nenhum texto,
   link, id ou lógica de pagamento/autenticação foi tocado). Este arquivo só
   é responsável pela aparência: fundo escuro tipo cinema, vidro fosco
   (glassmorphism), bordas arredondadas, brilho nos botões e nos cartões,
   tipografia mais moderna e uma leve animação de entrada ao rolar a página.

   Como funciona a "mágica" de trocar o visual inteiro sem reescrever cada
   componente: o CSS original de index.html já é construído em cima de
   variáveis (--primary, --bg, --ink, --mute, --border, --shadow etc.),
   então a maior parte do trabalho aqui é REDEFINIR essas variáveis pros
   valores do tema escuro — cada cartão, botão e seção que já usava
   var(--bg-2) ou var(--ink) automaticamente vira "vidro escuro" sem
   precisar reescrever a regra original.

   Cores de marca informadas pelo Luiz, mantidas à risca:
     verde  #2F9E6A   azul  #4A8AF4   mint (destaque claro)  #F0FAF5

   Este arquivo deve ser carregado DEPOIS do <style> original em index.html
   (link no <head>, depois do bloco <style>), pra que as regras daqui
   ganhem na cascata do CSS.
   ============================================================================= */

/* -----------------------------------------------------------------------
   1) Fontes: Sora para títulos (impacto, cara de "cinema"), Inter pro
   texto corrido (leitura confortável em telas pequenas — 90% do público
   é celular, por isso a prioridade é legibilidade, não só estilo).
   ----------------------------------------------------------------------- */

:root {
  --fonte-titulo: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* -----------------------------------------------------------------
     2) Paleta escura — redefine as MESMAS variáveis que index.html já
     usa em todo lugar. Verde e azul são exatamente os hex que o Luiz
     pediu; o mint (#F0FAF5) aparece como luz/destaque claro (título,
     brilho do cartão de preço), não como fundo — um fundo mint sólido
     não teria o efeito "cinema" pedido, mas a cor não fica de fora:
     ela é a "luz" que ilumina o vidro escuro.
     ----------------------------------------------------------------- */
  --primary: #2F9E6A;              /* verde de marca — preenchimentos sólidos, brilho, ícones */
  --primary-dark: #5FE3A6;         /* verde claro/neon — usado como TEXTO sobre fundo escuro (era um verde mais escuro na versão clara, aqui precisa ser mais claro pra ler bem no escuro) */
  --primary-light: rgba(47, 158, 106, .16); /* verde bem translúcido — preenchimento "vidro" de selos/cartões */
  --accent: rgba(74, 138, 244, .16);        /* azul translúcido — selo do hero */
  --accent-ink: #9dc4ff;                    /* azul claro — texto sobre o selo */
  --azul-logo: #4A8AF4;
  --mint: #F0FAF5;                 /* luz de destaque — brilhos, realce do cartão de preço, títulos */
  --ink: #eafaf3;                  /* texto principal — quase branco, tom mint suave */
  --mute: #a6c2b8;                 /* texto secundário — verde-acinzentado claro */
  --bg: #071310;                   /* base escura (usada em gradientes que já existiam, ex.: .hero) */
  --bg-2: rgba(255, 255, 255, .055);        /* "cartão" — agora é vidro fosco, não branco sólido */
  --border: rgba(240, 250, 245, .14);       /* borda do vidro, com leve tom mint */
  --green: #2F9E6A;
  --green-bg: rgba(47, 158, 106, .18);
  --shadow: 0 20px 50px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

/* -----------------------------------------------------------------------
   3) Fundo "cinema": gradiente escuro com uma luz suave vindo de cima
   (tipo spotlight) + um acento azul mais discreto, igual pedido —
   "iluminação tipo filme".

   Duas correções de robustez/performance (2026-09-04, revisão pós-auditoria):
   a) `background-color` sólido ANTES da imagem: é o fallback garantido. O
      `background:` shorthand original zerava a cor de fundo pra transparente;
      se os gradientes (ou o background-attachment:fixed) não pintassem num
      WebView/PWA, a página caía pra BRANCO com texto quase branco = ilegível.
      Agora `background-color` e `background-image` são declarados separados,
      então a cor sólida nunca é perdida.
   b) Mobile-first: `background-attachment: scroll`. O `fixed` provoca
      repaint do fundo inteiro a cada frame de scroll — jank perceptível em
      Android modesto, que é ~90% do público. Só telas grandes (>=860px)
      ganham o parallax do fundo fixo, onde o custo é irrelevante.
   ----------------------------------------------------------------------- */
body {
  font-family: var(--fonte-corpo);
  background-color: #06110e;
  background-image:
    radial-gradient(1100px 620px at 50% -8%, rgba(47, 158, 106, .30), transparent 60%),
    radial-gradient(760px 480px at 88% 12%, rgba(74, 138, 244, .14), transparent 62%),
    radial-gradient(600px 420px at 8% 70%, rgba(47, 158, 106, .10), transparent 60%),
    linear-gradient(180deg, #05100d 0%, #0a1815 45%, #06110e 100%);
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 860px) {
  body { background-attachment: fixed; }
}

h1, h2.titulo-secao, .cartao-preco .valor, .valor-oportunidade,
.stats-prova-item .num, .cronometro-digitos, .marca {
  font-family: var(--fonte-titulo);
}

/* Dark Mode Apple (2026-09-04): o brilho verde atrás do texto era repetido
   em CADA h2 de seção (8 vezes na landing) — decorativo em excesso e
   contrário ao princípio de guardar o "momento de destaque" pra um lugar
   só. O brilho ficou só no h1 do hero (o momento real da página);
   h2.titulo-secao (só existe na landing, entrar.html não usa esta classe)
   fica com o peso 800, sem sombra. A regra de h1 aqui é idêntica à
   anterior, então a tela de entrar.html (que também tem h1) não muda em
   nada. */
h1 {
  font-weight: 800;
  text-shadow: 0 2px 28px rgba(47, 158, 106, .35), 0 1px 0 rgba(0, 0, 0, .25);
}
h2.titulo-secao {
  font-weight: 800;
}

/* -----------------------------------------------------------------------
   4) [Dark Mode Apple, 2026-09-04] Holofote + partículas foram REMOVIDOS
   daqui (regra e keyframes) — antes ficavam preservados porque index.html
   já tinha perdido as divs mas entrar.html ainda as usava; agora as duas
   páginas tiveram as divs .cine-holofote/.cine-particulas removidas do
   HTML, então essas regras ficaram 100% órfãs e foram apagadas. Motion
   ambiente contínuo (facho de luz + partículas rodando pra sempre) é
   exatamente o tipo de movimento que a Apple evita — motion deve
   responder a uma ação da pessoa, não rodar sozinho.
   ----------------------------------------------------------------------- */

/* Todo o conteúdo real fica numa camada acima do holofote/partículas.
   #exit-intent FICA DE FORA desta lista de propósito (bug encontrado
   2026-09-04): ele já é `position: fixed` no <style> original de
   index.html (pra cobrir a tela inteira) — um seletor por ID como
   "#exit-intent { position: relative }" tem mais especificidade que a
   classe ".exit-overlay { position: fixed }" original, então ganhava a
   cascata e SILENCIOSAMENTE quebrava o overlay inteiro (ele carregava
   "display:flex" mas nunca aparecia na tela, preso lá embaixo no fluxo
   normal da página em vez de cobrir a viewport). z-index:100 do próprio
   .exit-overlay já garante que ele fica por cima do holofote/partículas
   sem precisar entrar nesta lista. */
.topo, .hero, .mockup-secao, section.secao,
footer, #chat-ajuda-botao, #chat-ajuda-painel {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------------
   5) Vidro fosco (glassmorphism) — aplicado de uma vez só em todos os
   "cartões" que já existiam (eles já usam var(--bg-2)/var(--border), só
   precisam do desfoque + cantos de 16px, que é o valor pedido).
   ----------------------------------------------------------------------- */
.topo,
.secao.faixa,
.recurso-card,
.diferencial-card,
.oportunidade-card,
.stats-prova-item,
.cartao-preco,
.exit-cartao,
.tag-plataforma,
.badge-lancamento,
.novidade-data {
  /* Mobile-first: blur de 8px. O `backdrop-filter` é uma das operações
     gráficas mais caras que existem; a 18px, com ~12 elementos na tela ao
     mesmo tempo, o scroll trava em celular modesto. 8px mantém o efeito de
     vidro sem o custo. Telas grandes (bloco @media abaixo) voltam a 16px. */
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border-radius: 16px;
}
@media (min-width: 860px) {
  .topo, .secao.faixa, .recurso-card, .diferencial-card,
  .oportunidade-card, .stats-prova-item, .cartao-preco, .exit-cartao,
  .tag-plataforma, .badge-lancamento, .novidade-data {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.topo {
  border-radius: 0;
  background: rgba(6, 17, 14, .72);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px -20px rgba(0, 0, 0, .6);
}

.secao.faixa { border-radius: 0; border-left: none; border-right: none; }

/* -----------------------------------------------------------------------
   5b) Badges de recursos do hero ("📖 Aulas", "❓ Questões" etc.) viram
   pequenos cartões 3D — bisel de vidro (brilho fino em cima, sombra
   escura por dentro embaixo) + sombra projetada com profundidade, tipo
   botão físico. Ao passar o mouse (desktop), o cartão "levanta" e inclina
   de leve, como se reagisse à luz do holofote. Em celular (sem hover)
   já fica com esse relevo parado, não depende do toque pra parecer 3D.
   ----------------------------------------------------------------------- */
/* Dark Mode Apple (2026-09-04): tinha inclinação 3D (rotateX/perspective)
   parada e no hover — efeito "gimmick" que não é da linguagem Apple.
   Ficou só a elevação (translateY) + brilho no hover, mais contido. */
.tira-recursos span {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 55%, rgba(0, 0, 0, .12) 100%), var(--bg-2);
  border: 1px solid rgba(240, 250, 245, .18);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 -10px 16px -10px rgba(0, 0, 0, .55) inset,
    0 12px 22px -12px rgba(0, 0, 0, .7),
    0 2px 0 rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tira-recursos span:hover {
  transform: translateY(-3px);
  border-color: rgba(95, 227, 166, .55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .3) inset,
    0 -10px 16px -10px rgba(0, 0, 0, .5) inset,
    0 18px 30px -14px rgba(0, 0, 0, .75),
    0 0 24px -6px rgba(47, 158, 106, .55);
}

.recurso-card, .diferencial-card, .exit-cartao {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.recurso-card:hover, .diferencial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 227, 166, .35);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6), 0 0 30px -8px rgba(47, 158, 106, .35);
}

/* -----------------------------------------------------------------------
   6) Cartão de preço — o "herói" da página. Vidro mais forte, brilho
   verde/mint suave ao redor (a "luz de filme" pedida), cantos um pouco
   maiores pra se destacar dos outros cartões.
   ----------------------------------------------------------------------- */
.cartao-preco {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(95, 227, 166, .35);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, .65),
    0 0 60px -10px rgba(47, 158, 106, .35),
    0 0 0 1px rgba(240, 250, 245, .05) inset;
}
.cartao-preco::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(240, 250, 245, .5), rgba(47, 158, 106, 0) 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   7) Botões — CTA principal em verde neon com brilho pulsando (pedido
   explícito). Botão secundário fica "outline" translúcido, mesma
   linguagem de vidro.
   ----------------------------------------------------------------------- */
.btn-cta {
  background: linear-gradient(135deg, #4CF0A3 0%, var(--primary) 100%);
  color: #04140d;
  font-family: var(--fonte-titulo);
  border-radius: 14px;
  border: none;
  box-shadow:
    0 0 22px rgba(76, 240, 163, .45),
    0 0 54px rgba(47, 158, 106, .3),
    0 10px 26px rgba(0, 0, 0, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Dark Mode Apple (2026-09-04): o CTA da landing (e, agora, o botão
   principal de entrar.html) pararam de pulsar sozinhos ao carregar —
   motion ambiente/repetido é o que a Apple evita; o movimento deve
   responder a uma ação da pessoa (aqui, o hover), não rodar sozinho por
   conta própria. O @keyframes cine-pulso-cta que existia aqui foi
   removido: sem nenhum dos dois botões usando mais, ficou órfão. */
.btn-cta:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 0 30px rgba(76, 240, 163, .55),
    0 0 64px rgba(47, 158, 106, .35),
    0 14px 30px rgba(0, 0, 0, .45);
}

.btn-secundario {
  border-radius: 14px;
  border: 1.5px solid rgba(95, 227, 166, .55);
  color: var(--primary-dark);
  background: rgba(47, 158, 106, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background-color .2s ease;
}
.btn-secundario:hover { background: rgba(47, 158, 106, .18); transform: translateY(-2px); }

.topo .btn-topo {
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(47, 158, 106, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.topo .btn-topo:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(47, 158, 106, .5); }

/* Título de seção: risquinho vira um traço em gradiente verde→azul. */
h2.titulo-secao::before {
  background: linear-gradient(90deg, var(--primary), var(--azul-logo));
  box-shadow: 0 0 12px rgba(47, 158, 106, .6);
}

/* -----------------------------------------------------------------------
   8) Telas grandes: mais respiro e grades com mais colunas — pedido
   "lindo no PC também", mas sempre partindo do layout mobile como base.
   ----------------------------------------------------------------------- */
@media (min-width: 860px) {
  /* Dark Mode Apple (2026-09-04): mais respiro vertical entre seções no
     desktop (48px soava apertado ao lado de tanto conteúdo; a horizontal
     de 20px, herdada do padding shorthand original, continua igual). */
  .secao { max-width: 860px; padding-top: 88px; padding-bottom: 88px; }
  .secao.faixa > .miolo { max-width: 860px; }
  .hero .miolo { max-width: 720px; }
  .hero h1 { font-size: 36px; }
  .grid-recursos { grid-template-columns: repeat(3, 1fr); }
  .grid-diferencial { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* -----------------------------------------------------------------------
   9) Elementos que DEVEM continuar claros mesmo no tema escuro — a
   "tela do celular" mockada (é um print de app, tem que parecer papel
   branco de verdade) e o painel do chat (mesma lógica). Sem isso, o
   texto interno ficaria claro-sobre-claro e ilegível.
   ----------------------------------------------------------------------- */
.mockup-telefone { background: #05100d; box-shadow: 0 0 0 1px rgba(95, 227, 166, .25), 0 24px 50px -10px rgba(0, 0, 0, .6); }
.mockup-tela, .mockup-tela * { color: #1c2430; }
.mockup-topo-tela .disc { color: #1f6b4c !important; }
.mockup-legenda-tela { color: #1f6b4c !important; }
.mockup-alt.certa { color: #1f6b4c !important; }

#chat-ajuda-painel { background: #ffffff; }
#chat-ajuda-painel, #chat-ajuda-painel * { color: #1c2430; }
#chat-ajuda-cabecalho, #chat-ajuda-cabecalho * { color: #fff; }
/* #chat-ajuda-mensagens e as bolhas do bot usavam var(--bg)/var(--green-bg)
   direto, que agora são tons escuros do tema cinema — força claro aqui
   também, senão o texto do chat fica ilegível (claro sobre escuro sobre
   um painel que é branco por decisão de design, ver comentário acima). */
#chat-ajuda-mensagens { background: #f2f7f4 !important; }
.chat-ajuda-msg.bot, .chat-ajuda-msg.carregando { background: #e8f6ef !important; color: #1c2430 !important; }
.chat-ajuda-msg.usuario, .chat-ajuda-msg.usuario * { color: #fff; }
#chat-ajuda-enviar, #chat-ajuda-enviar * { color: #fff; }
#chat-ajuda-input { background: #fff; }
#chat-ajuda-botao {
  background: linear-gradient(135deg, #4CF0A3 0%, var(--primary) 100%);
  box-shadow: 0 0 20px rgba(76, 240, 163, .5), 0 8px 20px rgba(0, 0, 0, .4);
  transition: transform .2s ease, opacity .25s ease;
}
#chat-ajuda-botao:hover { transform: scale(1.07); }

/* Some sozinho quando algum botão de CTA entra no canto onde o chat abre
   (ver script no fim do body) — pra nunca tampar um botão de compra. */
body.cine-chat-protegido #chat-ajuda-botao {
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   10) Entrada suave ao rolar (fade-up). A classe que ESCONDE o bloco só
   é aplicada pelo próprio JavaScript (ver script no fim do body) — se o
   script não rodar por qualquer motivo, o conteúdo já nasce 100%
   visível, nunca fica em branco.
   ----------------------------------------------------------------------- */
.cine-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.cine-reveal-visivel { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .cine-reveal { transition: none; }
}

/* -----------------------------------------------------------------------
   11) Tela de login/cadastro/pagamento (entrar.html) — 2026-09-04, pedido
   do Luiz: quem clica em "Quero começar minha preparação" na landing
   precisa cair numa tela com a MESMA cara, não sentir que saiu do site.
   Esta página usa o mesmo sistema de variáveis (--primary, --bg, --ink
   etc.) que o index.html já usava, então grande parte do visual (fundo,
   cartões, texto, bordas) já vira "escuro/vidro" automaticamente, só de
   carregar este arquivo — o bloco abaixo cobre só o que é exclusivo
   desta tela (formulário, botões, avisos, QR code do Pix) e que o resto
   do arquivo não tinha como prever.
   ----------------------------------------------------------------------- */

/* Vermelho/âmbar dos avisos também precisam de versão "vidro escuro" —
   só verde/azul foram redefinidos lá no topo; sem isto, os avisos de
   erro/atenção ficariam com o fundo clarinho do tema original por cima
   do fundo escuro, sem contraste nenhum. */
:root {
  --red: #ff9c93;
  --red-bg: rgba(255, 90, 74, .16);
  --amber: #ffd88a;
  --amber-bg: rgba(255, 179, 64, .14);
}

.container { position: relative; z-index: 1; }

/* Hero da tela de entrar: o arquivo original pinta um verde CHAPADO e
   saturado (linear-gradient #primary -> #primary-dark). Com a paleta cinema
   isso vira um bloco verde-neon berrante que destoa do hero discreto da
   landing — exatamente a sensação de "saí do site" que este redesign
   quer matar. Aqui ele vira o mesmo vidro escuro com brilho verde suave. */
.hero {
  background:
    linear-gradient(135deg, rgba(47, 158, 106, .24) 0%, rgba(47, 158, 106, .06) 55%, rgba(74, 138, 244, .12) 100%),
    var(--bg-2);
  border: 1px solid rgba(95, 227, 166, .28);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, .55),
    0 0 44px -12px rgba(47, 158, 106, .32),
    0 0 0 1px rgba(255, 255, 255, .05) inset;
}
@media (min-width: 860px) {
  .hero { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
}

.cartao, .stat-card {
  /* Mesmo racional do bloco de vidro da landing: 8px no mobile, 16px no
     desktop (media query abaixo). */
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
@media (min-width: 860px) {
  .cartao, .stat-card {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}
.cartao { border-radius: 18px; }
.stat-card { border-radius: 14px; }

.aviso { border: 1px solid transparent; }
.aviso.ok { border-color: rgba(47, 158, 106, .35); }
.aviso.erro { border-color: rgba(255, 90, 74, .35); }
.aviso.info { border-color: rgba(255, 179, 64, .35); }

/* -----------------------------------------------------------------------
   11.b) Campos do formulário — de "linha fina" para CAIXA (2026-09-04).
   O estilo original (só um risquinho embaixo, label 13,5px cinza-claro)
   é elegante mas ruim de converter: público mais velho / baixa visão
   não percebe onde clicar, e a área de toque real do campo fica ambígua.
   Aqui vira uma caixa de verdade: borda 360°, cantos arredondados, label
   14px com contraste AA forte (var(--ink), não var(--mute)), foco com
   halo verde. font-size do input continua 16px de propósito (abaixo
   disso o Safari do iPhone dá zoom ao focar).
   ----------------------------------------------------------------------- */
.campo label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.campo input,
.pix-copia input {
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.campo input:focus,
.pix-copia input:focus {
  outline: none;
  border-color: var(--primary-dark);
  border-bottom-width: 1.5px; /* anula o "engrossa só embaixo" do arquivo original */
  background: rgba(47, 158, 106, .10);
  box-shadow: 0 0 0 3px rgba(95, 227, 166, .18);
}
.campo input::placeholder { color: var(--mute); opacity: .85; }
.campo .ajuda { font-size: 13px; color: var(--mute); line-height: 1.5; }

/* Consentimento LGPD: sobe de 13px para 14px e ganha mais entrelinha —
   é texto que o público mais velho precisa conseguir ler sem esforço. */
.campo-check label { font-size: 14px; line-height: 1.55; color: var(--mute); }
.campo-check input {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--primary);
}

/* Título do cartão de auth ("Criar minha conta" / "Entrar na minha conta")
   e o texto de troca de modo: um degrau maior de hierarquia. */
.cartao h2 { font-size: 18px; letter-spacing: -.01em; }
.troca-modo { font-size: 14.5px; }

/* Botão principal ganha o mesmo verde neon do CTA da landing — é o mesmo
   convite pra ação, só que dentro do formulário. Dark Mode Apple
   (2026-09-04): parou de pulsar sozinho ao carregar, igual ao .btn-cta;
   o brilho agora só reage ao hover. */
button.principal {
  background: linear-gradient(135deg, #4CF0A3 0%, var(--primary) 100%);
  color: #04140d;
  border-radius: 12px;
  box-shadow:
    0 0 20px rgba(76, 240, 163, .45),
    0 0 50px rgba(47, 158, 106, .3),
    0 10px 26px rgba(0, 0, 0, .4);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
button.principal:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 0 28px rgba(76, 240, 163, .55),
    0 0 60px rgba(47, 158, 106, .35),
    0 12px 28px rgba(0, 0, 0, .45);
}
button.principal:disabled { opacity: .5; box-shadow: none; }

button.secundario {
  border-radius: 12px;
  border: 1.5px solid rgba(95, 227, 166, .4);
  color: var(--primary-dark);
  background: rgba(47, 158, 106, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background-color .2s ease;
}
button.secundario:hover { background: rgba(47, 158, 106, .18); transform: translateY(-1px); }

/* O QR code do Pix precisa continuar em cima de branco de verdade — leitor
   de QR nem sempre lida bem com fundo escuro/transparente por trás dele. */
.pix-qr { background: #fff; border-radius: 14px; padding: 16px; }