/* /grupos/ — página de uma ação só.

   Substitui, nesta página, quatro folhas que disputavam o mesmo componente:
   tropa300-v5.css, grupos-direto-v1.css, whatsapp-direto-v1.css e a parte
   .fora-pt/.fpt-* da campanha-clara-v3.css. Só o seletor .fpt-cta era
   redefinido dez vezes entre elas, e o que aparecia na tela era o resto de
   quem ganhava por ordem de carregamento. Daí a confusão visual.

   A página existe para quem chega de QR code e precisa de UM toque para
   entrar no grupo. Tudo aqui serve a esse toque: uma chamada, um botão,
   nada competindo. */

.gp {
  min-height: calc(100svh - 210px);          /* desconta urna + header + rodapé */
  display: grid;
  place-items: center;
  padding: clamp(32px, 7vw, 72px) 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--ivory, #f6f8ed) 62%);
}

.gp-hero {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

.gp-eyebrow {
  font-family: var(--fonte-legenda, 'Aeonik', system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--book, #2f6b3f);
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

/* A chamada é o maior elemento da página, e é ela que dá a ordem. Antes o
   maior era um título decorativo no plural ("Grupos da Tropa 300"), que
   prometia um diretório de grupos que a página não tem. */
.gp-titulo {
  font-family: var(--fonte-titulo, 'Roc Grotesk', 'Grift', sans-serif);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--navy, #001f3e);
  text-wrap: balance;
}

.gp-titulo .grifo { padding: 0 .18em; }

.gp-sub {
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  max-width: 34ch;
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.55;
  color: #47586b;
}

/* O botão. O rótulo tem 43 caracteres em versal e é texto aprovado, protegido
   por checagem no preflight (scripts/check-whatsapp.py), então não se encurta:
   o que se dá a ele é espaço. Antes ele vivia espremido dentro de um card
   estreito e repetido a 11px no cabeçalho, e existia uma folha inteira
   (whatsapp-direto-v1.css) só para forçá-lo a caber. Agora é bloco próprio,
   560px, alvo de 72px de altura, sem nada disputando a mesma ação. */
.gp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding: 22px clamp(24px, 3.4vw, 36px);
  min-height: 72px;
  border-radius: 20px;
  text-align: left;
  line-height: 1.2;
  background: var(--hope, #dbe64c);
  color: var(--navy, #001f3e);
  font-family: var(--fonte-titulo, 'Roc Grotesk', 'Grift', sans-serif);
  font-weight: 900;
  font-size: clamp(16px, 1.8vw, 19px);
  letter-spacing: -.01em;
  box-shadow: 0 14px 34px rgba(0, 31, 62, .16);
  transition: transform .22s cubic-bezier(.16, .84, .44, 1), box-shadow .22s;
}

.gp-cta:hover,
.gp-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0, 31, 62, .22);
}

/* O ícone segura o sinal de "isto abre o WhatsApp" sem precisar do verde
   #25D366 do botão antigo, que era a única cor fora da paleta da campanha. */
.gp-cta svg { width: 26px; height: 26px; flex: none; }

.gp-nota {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-size: 14px;
  color: #5b6b7c;
}

/* No celular, que e de onde vem o QR, o botao estava COBERTO pelo banner de
   consentimento: medido, o botao ocupava 456-539px e o banner comecava em 479.
   Quem chegava pelo codigo via a chamada e nao via a acao.

   Duas coisas resolvem. A tarja da urna, que come 100px de topo, sai so nesta
   pagina e so no celular: os suplentes continuam na peca duas vezes, dentro do
   proprio lockup do cabecalho e no bloco legal do rodape, entao nada de
   compliance se perde. E o conteudo passa a fluir do topo, com folga embaixo
   reservada para o banner, em vez de centralizar no meio da tela. */
@media (max-width: 600px) {
  body.grupos-direto-page .urna-campanha { display: none; }

  .gp {
    min-height: 0;
    place-items: start center;
    padding: clamp(28px, 7vw, 44px) 20px 360px;
  }
  .gp-titulo { font-size: clamp(32px, 8.6vw, 40px); }
  .gp-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-cta { transition: none; }
  .gp-cta:hover, .gp-cta:focus-visible { transform: none; }
}