/* Paleta espelhada de BPG_APP/lib/core/theme/app_colors.dart.
   Mantida em sincronia com o app de propósito: site e aplicativo precisam
   parecer a mesma marca quando o usuário vem da loja para cá. */
:root {
  --brand: #73b185;
  --brand-deep: #5a9e71;
  --brand-bright: #93d0a9;
  --sunset: #ff8a4c;

  --bg: #171717;
  --surface: #232323;
  --surface-alt: #2b2b2b;
  --border: #3a3a3a;
  --border-soft: #2f2f2f;

  --text: #f4f4f2;
  --text-2: #b4b4b0;
  --text-3: #7e7e7a;

  --max: 960px;
  --radius: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--brand-bright); }
a:hover { color: var(--brand); }

/* ---- Cabeçalho ---------------------------------------------------------- */

header {
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  background: rgba(23, 23, 23, 0.85);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  max-width: var(--max);
  margin: 0 auto;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.marca img { width: 34px; height: 34px; display: block; }

/* Sigla e nome por extenso empilhados: "BPG" é o que se lê de relance, e
   "Bora Pro Game" é o que se memoriza. Um sem o outro perde metade. */
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }

.marca-txt b {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 18px;
}

.marca-txt small {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  margin-left: 22px;
}

nav a:hover { color: var(--text); }

/* "Entrar" é a única ação do menu — as outras são âncoras desta mesma página.
   A cor da marca é o que separa as duas coisas sem precisar de um botão, que
   pesaria demais num cabeçalho de quatro links. */
nav a.entrar { color: var(--brand); }
nav a.entrar:hover { color: var(--text); }

/* ---- Hero --------------------------------------------------------------- */

.hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--border-soft);
}

/* Nome por extenso acima do título: entra como assinatura da marca, sem
   disputar a chamada principal, que é o que vende. */
.sobrenome {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--brand);
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hero h1 span { color: var(--brand); }

.hero p {
  margin: 0 0 32px;
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--text-2);
  max-width: 620px;
}

/* ---- Botões das lojas ---------------------------------------------------- */

/* Os dois badges são os arquivos oficiais, e eles não têm a mesma anatomia: o
   da Apple é só o botão, enquanto o PNG do Google traz 29px de margem própria
   em cima e embaixo (de 250 de altura). Dar a mesma altura de caixa aos dois
   deixaria o do Google visivelmente menor.
   Daí as alturas diferentes — 44 contra 57 ≈ 44 × 250/192 — e a margem
   negativa, que devolve a margem embutida do Google para que o espaço entre os
   dois e o texto acima fique igual dos dois lados. */
.lojas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.lojas a {
  display: inline-flex;
  border-radius: 8px;
  /* O badge é a área clicável inteira; o foco precisa contorná-lo. */
  outline-offset: 3px;
}

.lojas img { display: block; width: auto; }

.lojas .badge-apple { height: 44px; }

.lojas .badge-google { height: 57px; margin: -6.5px 0; }

/* Nenhum efeito que altere o badge (as diretrizes não permitem recolorir nem
   recortar): a resposta ao toque é só uma leve perda de opacidade. */
.lojas a:hover img { opacity: 0.86; }

/* ---- Seções ------------------------------------------------------------- */

section { padding: 72px 0; border-bottom: 1px solid var(--border-soft); }

h2 {
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.sub { color: var(--text-2); margin: 0 0 36px; max-width: 620px; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

/* Sete cartões numa grade de três colunas deixariam o último esticado sozinho
   na última linha. Fixar a largura máxima e centralizar resolve sem inventar
   um oitavo recurso só para fechar a conta. */
.grade--centro {
  grid-template-columns: repeat(auto-fit, minmax(250px, 296px));
  justify-content: center;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}

/* Selo do ícone: verde translúcido, no mesmo desenho dos atalhos do app.
   `currentColor` no SVG faz o traço herdar a cor daqui — trocar a marca é
   mudar uma linha, não doze arquivos. */
.card .icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  border-radius: 12px;
  background: rgba(115, 177, 133, 0.13);
  border: 1px solid rgba(115, 177, 133, 0.22);
  color: var(--brand-bright);
}

.card .icone svg {
  display: block;
  width: 22px;
  height: 22px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.card p { margin: 0; color: var(--text-2); font-size: 15.5px; }

.risco {
  width: 30px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: 18px;
}

/* ---- Galeria de telas --------------------------------------------------- */

/* Tira em rolagem horizontal no celular, grade fixa a partir de tablet. Sem
   isso, quatro telas lado a lado ficam ilegíveis em 375px de largura. */
.telas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 210px;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tela { scroll-snap-align: start; }

/* Moldura de celular: bezel escuro com o screenshot recortado dentro. */
.moldura {
  background: #0e0e0e;
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 7px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.moldura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.tela figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
}

.tela figcaption b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}

@media (min-width: 720px) {
  .telas {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: initial;
    overflow-x: visible;
    row-gap: 30px;
  }
}

/* ---- Contato ------------------------------------------------------------ */

.contato {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-align: center;
}

/* Linha do organizador no hero. Discreta de propósito: quem organiza é
   minoria entre os visitantes, e a chamada principal continua sendo baixar o
   app. Quem organiza se reconhece na primeira palavra e não precisa de
   destaque para achá-la. */
.chamada-organizador {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--text-3);
}

.chamada-organizador a {
  color: var(--brand-bright);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(147, 208, 169, 0.4);
}

.chamada-organizador a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.sub--centro { margin: 0 auto 26px; text-align: center; }

/* Os três passos do convite ao organizador.
   A dúvida de quem organiza não é "o app faz isso?" — a seção acima já
   respondeu. É "o que acontece depois que eu mandar o e-mail?". Três passos
   respondem isso antes de a pessoa precisar perguntar.
   Numeração por counter, e não por marcador de lista: o número é parte do
   desenho (mesmo selo verde dos ícones dos cartões). */
.passos {
  list-style: none;
  counter-reset: passo;
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 0 0 30px;
  text-align: left;
}

@media (min-width: 760px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 42px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}

.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(115, 177, 133, 0.13);
  border: 1px solid rgba(115, 177, 133, 0.22);
  color: var(--brand-bright);
  font-size: 14px;
  font-weight: 700;
}

.passos b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }

/* Botão sólido: é a única ação da página além de baixar o app, e um link de
   texto no meio de um cartão não se anuncia como ação. O verde é o mesmo do
   botão principal do aplicativo. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #10231a;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.botao:hover { color: #10231a; filter: brightness(1.07); }

/* Tira da frente as duas dúvidas que seguram um organizador antes de escrever:
   se precisa ter data marcada e se vai depender de alguém para começar. */
.contato-nota {
  /* Espaço embaixo: ela vem imediatamente antes do botão, e sem folga as duas
     coisas leem como um bloco só. */
  margin: 22px auto 28px;
  max-width: 560px;
  font-size: 14.5px;
  color: var(--text-2);
}

/* O endereço continua visível: nem todo mundo tem cliente de e-mail no
   computador, e quem lê no celular às vezes só quer copiar. */
.contato-alternativa {
  margin: 16px 0 0;
  font-size: 14.5px;
  color: var(--text-3);
}

.email {
  display: inline;
  font-size: inherit;
  font-weight: 600;
  color: var(--brand-bright);
  text-decoration: none;
  word-break: break-all;
}

.email:hover { color: var(--brand); text-decoration: underline; }

.contato small { display: block; margin-top: 14px; color: var(--text-3); }

/* ---- Rodapé ------------------------------------------------------------- */

footer {
  padding: 34px 0 46px;
  color: var(--text-3);
  font-size: 14px;
}

.rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}

/* A identificação da empresa ocupa a linha inteira: no espaço que sobra ao
   lado dos links ela ficaria espremida, e é justamente o dado que precisa ser
   encontrado por quem procura de quem é o site. */
.rodape .empresa { flex-basis: 100%; color: var(--text-3); font-size: 13px; }

/* Os badges ocupam a linha inteira acima do resto: espremidos entre o aviso de
   copyright e os links legais, ficariam pequenos demais para serem tocados no
   celular. Aqui eles são menores que os do topo — quem chega ao fim já leu o
   argumento e não precisa de outro cartaz. A proporção entre os dois segue a
   mesma correção do bloco do hero. */
.rodape .lojas { flex-basis: 100%; margin-bottom: 6px; }

.rodape .badge-apple { height: 34px; }

.rodape .badge-google { height: 44px; margin: -5px 0; }

footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }

/* ---- Páginas de texto (política e termos) ------------------------------- */

.doc { padding: 64px 0 24px; }

.doc h1 { font-size: clamp(28px, 4.4vw, 38px); margin: 0 0 8px; letter-spacing: -0.02em; }

.doc .data { color: var(--text-3); font-size: 14.5px; margin: 0 0 40px; }

.doc h2 { font-size: 21px; margin: 44px 0 10px; }

.doc h3 { font-size: 17px; margin: 26px 0 6px; color: var(--text); }

.doc p, .doc li { color: var(--text-2); }

.doc ul, .doc ol { padding-left: 22px; }

.doc li { margin-bottom: 8px; }

.doc strong { color: var(--text); font-weight: 600; }

/* Tabela de prazos da página de exclusão de conta. Rola na horizontal no
   celular em vez de espremer a coluna da direita até o texto quebrar letra a
   letra. */
.prazos {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  display: block;
  overflow-x: auto;
  font-size: 15px;
}

.prazos th, .prazos td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}

.prazos th {
  color: var(--text-3);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prazos td:last-child { white-space: nowrap; color: var(--text); }

.aviso {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 32px 0;
  font-size: 15.5px;
}

.aviso p { margin: 0; }

/* O selo abre o bloco da instituição de pagamento. Sem loading="lazy": é o
   ativo que identifica a prestadora, e não pode depender de o leitor rolar até
   ele. A variante é a Negativo-Branco porque o site é escuro; ela entra como
   veio do Asaas, sem recolorir e sem distorcer. */
.aviso-selo { display: block; line-height: 0; margin-bottom: 16px; }
.aviso-selo img { display: block; width: 160px; height: auto; }

/* O bloco nasceu com um parágrafo só. A identificação da instituição de
   pagamento usa três, e sem isto eles colam num bloco ilegível. */
.aviso p + p { margin-top: 12px; }

table.dados {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 8px;
  font-size: 15.5px;
}

table.dados th, table.dados td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

table.dados th { color: var(--text); font-weight: 600; }

table.dados td { color: var(--text-2); }

.rolagem { overflow-x: auto; }

@media (max-width: 560px) {
  section { padding: 56px 0; }
  .hero { padding: 68px 0 56px; }
  .lojas { gap: 10px 12px; }
  /* Apertado para os três links restantes caberem numa linha só: com 16px de
     margem e 14px de fonte, "Entrar" quebrava para baixo e deixava o
     cabeçalho com duas alturas. */
  nav a { margin-left: 12px; font-size: 13px; }
  .sobrenome { letter-spacing: 3px; font-size: 12px; }
  /* O nome por extenso no cabeçalho aperta demais em telas estreitas. Ele
     continua logo abaixo, no topo do hero. */
  .marca-txt small { display: none; }
  /* Cinco itens não cabem em 375px. Saem os dois que menos custam: "O app" e
     "Contato" são seções desta página, alcançáveis rolando. "Entrar" fica
     porque é a única saída do cabeçalho para fora — e o que alguém que já tem
     conta vem procurar. */
  nav a.secundario { display: none; }
}

/* ---- Contato ------------------------------------------------------------- */

.botoes-contato {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 620px) {
  .botoes-contato .botao { width: 100%; }
}