/* Vitrine de parceiros.
 *
 * Mesma linguagem da landing: grafite, lima-neon, fundo claro, Unbounded nos
 * títulos e DM Sans no corpo. Carregado também pelo index.html, para os cards da
 * seção #parceiros serem exatamente os mesmos objetos da lista e do mini perfil.
 */

:root {
  --graphite: #1a1a1a;
  --white: #f5f5f0;
  --neon: #CCFF00;
  --dark: #0d0d0d;
  --line: #e4e4dc;
  --muted: #888;          /* sobre fundo ESCURO (hero, faixa de prova): passa lá */
  --muted-claro: #6e6e68; /* sobre CARD claro: #888 reprovava AA no papel */
  --soft: #555;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
}

.pcard {
  background: #fff;
  border: 1px solid var(--line);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}

/* O card inteiro reage: no hover ele vira o neon lavado do app (o mesmo do
   perfil), em vez de só trocar a borda. Um alvo grande e um estado claro. */
.pcard:hover { background: var(--neon-muted, #f5ffe0); border-color: var(--neon-borda, #e4f2bf); }

.pcard-logo {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pcard-logo img {
  max-height: 80px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
}

/* Logo desenhada para fundo escuro ganha o fundo que ela pede. Sem isto a do
   Ultra100K entra amarela com o "NIGHT RUN ZERÃO" em branco sobre branco, e
   metade dela some. */
.pcard-logo.fundo-escuro {
  background: var(--dark);
  padding: 12px 14px;
  height: auto;
  min-height: 80px;
  align-self: flex-start;
  border-radius: 14px;
}
.pcard-logo.fundo-escuro img { max-height: 56px; }

/* Tile na cor da marca: logo claro (branco) sobre a cor que a marca pede, o
   quadrado inteiro pintado. A cor vem inline do banco (logo_cor). Mesma ideia
   do tile branco da adidas, só que colorido. */
.pcard-logo.cor-marca {
  padding: 14px 18px;
  height: auto;
  min-height: 80px;
  align-self: flex-start;
  border-radius: 14px;
}
.pcard-logo.cor-marca img { max-height: 52px; }

.logo-texto {
  font-family: 'Unbounded', sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--graphite);
}

.pcard-cat {
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-claro);
}

.pcard-resumo { font-size: 15px; color: var(--soft); line-height: 1.6; }

.pcard-benef { font-size: 17px; line-height: 1.5; color: var(--graphite); }

.pcard-benef strong {
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-bottom: 5px;
}

.pcard-benef em {
  font-style: normal;
  display: block;
  font-size: 14px;
  color: var(--muted-claro);
  line-height: 1.55;
  margin-top: 6px;
}

.pcard-end { font-size: 14px; color: var(--muted-claro); line-height: 1.5; }

/* Código de desconto no card, só para quem tem conta. Fundo neon suave para
   dizer "isto é seu por ser membro". Copiar e "usei" moram na página do
   parceiro, então aqui é texto, sem botão. */
.pcard-codigo {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px; border-radius: 12px;
  background: rgba(204, 255, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.06);
}
.pcard-codigo span {
  font-size: 12px; color: var(--muted-claro); text-transform: uppercase; letter-spacing: .06em;
}
.pcard-codigo b { font-size: 17px; font-weight: 700; color: var(--graphite); letter-spacing: .03em; }

/* Parceria fechada, benefício ainda não combinado. Riscado de tracejado para
   ler como "está vindo" e não como "não tem". */
.pcard-benef.breve { color: var(--muted-claro); }
.pcard-benef.breve strong { color: var(--muted-claro); }
.pcard.em-breve .pcard-logo img { opacity: 0.5; }

/* ── Diretório: cabeçalho enxuto, pills e lista ────────────────────────── */
/* A aba Parceiros dentro do app. Direto ao ponto, no espírito da lista de
   eventos do RaceLog+: sem hero, sem pitch. Título curto, filtro por grupo, e
   a lista com o benefício em destaque, que é o que a pessoa foi ali buscar. */

.pdir-h1 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.05;
}
.pdir-sub { font-size: 15px; color: var(--muted-claro); margin-top: 8px; }

/* Pills de grupo. Primária = pill quadrada; ativa = grafite cheio, texto neon
   (a cor do que é "seu" no Run&Co). */
.pfiltro { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 24px; }
.pchip {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--muted-claro); cursor: pointer; transition: all 0.15s;
}
.pchip:hover { border-color: var(--graphite); color: var(--graphite); }
.pchip.on { background: var(--graphite); color: var(--neon); border-color: var(--graphite); }
.pchip .n { margin-left: 6px; font-weight: 400; color: var(--muted-claro); }
.pchip.on .n { color: #9a9a92; }

/* A lista: cartão branco único, linhas divididas por fio. */
.pdir { background: #fff; border: 1px solid var(--line); }
.prow {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background 0.15s;
}
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--neon-muted, #f5ffe0); }

.prow-logo {
  flex: 0 0 auto; width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center; background: #fff;
  border-radius: 8px;
}
.prow-logo img { max-width: 60px; max-height: 60px; object-fit: contain; }
.prow-logo.fundo-escuro { background: var(--graphite); padding: 8px; }
/* Tile na cor da marca (logo_cor): quadrado inteiro pintado, logo claro por cima. */
.prow-logo.cor-marca { padding: 8px; }
.prow-logo.cor-marca img { max-width: 44px; max-height: 44px; }
/* Sem logo, o nome ocupa o lugar. Preso na caixa de 60px (largura e altura),
   com reticências, para uma marca de nome longo não estourar a linha. */
.prow-logo .logo-texto {
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 9px;
  text-align: center; line-height: 1.15; color: var(--graphite);
  width: 60px; max-height: 60px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  word-break: break-word;
}

.prow-main { flex: 1 1 auto; min-width: 0; }
.prow-nome {
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; line-height: 1.2; color: var(--graphite);
}
.prow-cat { font-size: 13px; color: var(--muted-claro); margin-top: 4px; }

.prow-fim { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.prow-benef {
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--graphite);
  text-align: right; max-width: 180px;
}
.prow-benef.breve { color: var(--muted-claro); }
.prow-cod {
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; color: var(--graphite);
  background: rgba(204, 255, 0, 0.9); padding: 6px 10px; border-radius: 6px; white-space: nowrap;
}
.prow-ver { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; color: var(--muted-claro); }
.prow.em-breve .prow-logo img { opacity: 0.5; }

.pdir-vazio { padding: 28px 20px; color: var(--muted-claro); font-size: 15px; }

/* No celular o benefício desce para uma segunda linha, alinhado à direita, sem
   espremer o nome. */
@media (max-width: 560px) {
  .prow { flex-wrap: wrap; }
  .prow-main { flex: 1 1 60%; }
  .prow-fim { width: 100%; justify-content: flex-end; padding-left: 76px; }
  .prow-benef { max-width: none; }
}

/* ── Faixa da prova ────────────────────────────────────────────────────── */
/* Escura sobre a seção clara: prova tem data e some em três semanas, então ela
   precisa de mais voz que uma loja que fica. */

.prova-faixa {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  background: var(--dark);
  color: var(--white);
  padding: 40px 38px;
  text-decoration: none;
  margin-bottom: 2px;
  border-left: 4px solid var(--neon);
  transition: border-color 0.2s;
}
.prova-faixa:hover { border-left-width: 12px; }

.pf-quando {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 12px;
}

.pf-logo { margin-bottom: 18px; }
.pf-logo img { max-height: 54px; max-width: 260px; width: auto; object-fit: contain; display: block; }
.pf-logo.em-caixa { background: #fff; padding: 10px 14px; display: inline-block; }

.pf-nome {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 14px;
}

.pf-resumo { font-size: 17px; line-height: 1.6; color: #bbb; }
.pf-onde { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 12px; }

.pf-dir { display: flex; flex-direction: column; justify-content: center; }

.pf-rot {
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.pf-benef {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--neon);
}
.pf-benef.breve { color: var(--muted); }

.pf-det { font-size: 14px; line-height: 1.55; color: #999; margin-top: 10px; }

/* O cupom na faixa escura, só para quem tem conta. Mesma voz do .pcard-codigo,
   com o contraste invertido para o fundo grafite. */
.pf-codigo {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(204, 255, 0, 0.12); border: 1px solid rgba(204, 255, 0, 0.35);
  align-self: flex-start;
}
.pf-codigo span {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
}
.pf-codigo b { font-size: 20px; font-weight: 700; color: var(--white); letter-spacing: .05em; }

.pf-cta {
  display: inline-block;
  margin-top: 20px;
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--neon);
  color: var(--dark);
  padding: 13px 22px;
  align-self: flex-start;
}

@media (max-width: 760px) {
  .prova-faixa { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px; }
}

/* ── Linha do histórico de provas ──────────────────────────────────────── */
/* Quieta de propósito: prova que já rolou é registro, não vitrine. Sem logo,
   sem benefício, só data, nome e o caminho até a página. */

/* Bloco "Provas encerradas" na vitrine do membro: um rótulo fino sobre as
   linhas quietas. */
.pdir-encerradas { margin-top: 44px; }
.pdir-encerradas:empty { margin-top: 0; }
.pdir-encerradas-rot {
  font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-claro);
  margin-bottom: 12px;
}

.prova-linhas { border-top: 1px solid var(--line); }

.prova-linha {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}
.prova-linha:hover { border-bottom-color: var(--graphite); }

.pl-data {
  flex: 0 0 auto;
  width: 168px;
  font-size: 13px;
  color: var(--muted-claro);
  line-height: 1.5;
}

.pl-corpo { flex: 1; min-width: 0; }
.pl-corpo b {
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pl-cat { display: block; font-size: 13px; color: var(--muted-claro); margin-top: 4px; }

.pl-mais {
  flex: 0 0 auto;
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}

@media (max-width: 560px) {
  .prova-linha { flex-wrap: wrap; gap: 6px 20px; }
  .pl-data { width: 100%; }
}

/* ── Mini mapa ─────────────────────────────────────────────────────────── */

.pmapa {
  border: 1px solid var(--line);
  background: #fff;
  line-height: 0;
}
.pmapa iframe { width: 100%; height: 320px; border: 0; display: block; }
.escuro .pmapa { border-color: #2a2a2a; }

.pmapa-link {
  display: inline-block;
  margin-top: 12px;
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.pmapa-link:hover { color: var(--graphite); }
.escuro .pmapa-link:hover { color: var(--white); }

@media (max-width: 700px) {
  .pmapa iframe { height: 220px; }
}

.pcard-mais {
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
  padding-top: 10px;
  transition: color 0.2s;
}

.pcard-mais::after { content: ' →'; }
.pcard:hover .pcard-mais { color: var(--graphite); }

/* ── Links com ícone ───────────────────────────────────────────────────── */
/* Botão, não link de texto: alvo de dedo decente e a pessoa enxerga que dá
   para tocar. */

.plinks { display: flex; flex-wrap: wrap; gap: 8px; }

.plink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--graphite);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}

.plink svg { width: 18px; height: 18px; flex-shrink: 0; }
.plink:hover { border-color: var(--graphite); background: var(--neon); }

/* No escuro (o topo do mini perfil) os mesmos botões, invertidos. */
.escuro .plink {
  background: transparent;
  border-color: #333;
  color: var(--white);
}
.escuro .plink:hover { background: var(--neon); color: var(--dark); border-color: var(--neon); }

/* ── Números do clube ──────────────────────────────────────────────────── */

.pnums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
}

.pnum {
  background: #fff;
  border: 1px solid var(--line);
  padding: 26px 22px;
}

.pnum b {
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--graphite);
  line-height: 1;
}

.pnum span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.escuro .pnum { background: transparent; border-color: #2a2a2a; }
.escuro .pnum b { color: var(--neon); }
.escuro .pnum span { color: var(--muted); }

/* ── Chrome das páginas próprias ───────────────────────────────────────── */

.vt-body {
  margin: 0;
  background: var(--white);
  color: var(--graphite);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.vt-body * { box-sizing: border-box; }

.vt-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 32px;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(12px);
}

.vt-topo a { text-decoration: none; }

.vt-logo {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--white);
}

.vt-logo .amp { color: var(--neon); }

.vt-voltar {
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.vt-voltar:hover { color: var(--white); }

/* 72px e não 88: a página tem muita seção, e o vazio entre elas somava mais
   altura do que o conteúdo. 1240px de largura pelo mesmo motivo, do outro
   lado: numa tela de 1920px o conteúdo estava espremido no meio com 400px de
   margem de cada lado. */
/* 56 e não 72: com 72 em cima e 72 embaixo, cada fronteira de seção somava
   144px de vão, e a página parecia terminar entre um assunto e outro. */
.vt-sec { padding: 56px 32px; }
.vt-sec.escuro { background: var(--dark); color: var(--white); }
.vt-inner { max-width: 1240px; margin: 0 auto; }

/* As telas de app (Parceiros, Loja, Provas, a página de um parceiro) são listas
   e leitura de membro, não a landing de marketing: os 1240px que fazem sentido
   no hero deixam a lista com um vão enorme entre nome e benefício, e o rodapé
   sem o mesmo trilho joga o logo pro canto, perdido. Marcadas com .vt-estreito,
   o conteúdo corre numa coluna estreita e o rodapé alinha no mesmo trilho.
   A landing pública (seja-parceiro) fica sem a classe, larga como era. */
.vt-estreito .vt-inner { max-width: 620px; }

/* Nas telas estreitas (as de membro), o respiro de fronteira entre seções cai
   de 72px pra 40px: são telas de app, não landing, e o vão de site somado ao
   topo da casca abria um buraco entre o cabeçalho e o primeiro conteúdo. */
.vt-estreito .vt-sec { padding: 40px 24px; }

/* Com a casca do app montada em cima, o cabeçalho de site da vitrine (logo +
   "voltar ao site") vira um segundo topo redundante: some. O deslogado, que
   não tem casca, continua vendo o cabeçalho normal. */
body.vt-estreito.com-casca .vt-topo { display: none; }

/* Nav pública nas páginas LARGAS da vitrine (seja-parceiro, a que o parceiro
   vê): alinhada ao mesmo trilho de 1240 do conteúdo, com a logo à esquerda,
   em cima do título. O logo centralizado no meio da janela é escolha da casca
   do app (membro logado); nesta página larga ele flutuava solto no centro sobre
   um conteúdo todo alinhado à esquerda, e lia como erro. Escopo por
   :not(.vt-estreito) pra não mexer nas telas estreitas de app nem na casca. */
@media (min-width: 720px) {
  .vt-body:not(.vt-estreito) .app-nav.publica {
    padding-left: max(32px, calc(50% - 620px));
    padding-right: max(32px, calc(50% - 620px));
  }
  .vt-body:not(.vt-estreito) .app-nav.publica .nav-logo {
    position: static; transform: none; left: auto; max-width: none;
  }
}

.vt-label {
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.vt-nline { width: 48px; height: 2px; background: var(--neon); margin-bottom: 40px; }

.vt-h1 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 7vw, 68px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 18px;
}

.vt-h2 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

.vt-lead { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.7; color: var(--soft); }
.escuro .vt-lead { color: #bbb; }

/* O botão da marca: pílula, no mesmo idioma dos selos, badges e chips (todos
   999px). Antes era um retângulo de canto vivo, que destoava dos cards
   arredondados. Toque com resposta: sobe de leve no hover, afunda no clique. */
.vt-btn {
  display: inline-block;
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border: none;
  border-radius: 999px;
  background: var(--graphite);
  color: var(--white);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.vt-btn:hover { transform: translateY(-1.5px); box-shadow: 0 6px 18px rgba(13, 13, 13, 0.18); }
.vt-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(13, 13, 13, 0.16); }
.vt-btn:disabled { transform: none; box-shadow: none; opacity: 0.55; cursor: default; }
.vt-btn.neon { background: var(--neon); color: var(--dark); }
.escuro .vt-btn { background: var(--neon); color: var(--dark); }
/* No card neon do benefício, a sombra some no verde: o realce vira contorno. */
.pp-benef .vt-btn:hover { box-shadow: 0 6px 18px rgba(13, 13, 13, 0.28); }

.vt-rodape {
  background: var(--dark);
  color: var(--muted);
  padding: 56px 32px;
  font-size: 13px;
  line-height: 1.8;
}

.vt-rodape .vt-logo { display: block; margin-bottom: 14px; }
.vt-rodape a { color: var(--muted); }

/* As redes do clube, só o símbolo: o mesmo rodapé da landing em todo o site.
   Os desenhos entram pelo nav.js (pintaRedes), a fonte única de ícones. */
.vt-redes { display: flex; gap: 10px; margin: 4px 0 18px; }
.vt-redes a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #2a2a2a; color: #8a8a8a;
  transition: color 0.2s, border-color 0.2s;
}
.vt-redes a:hover { color: var(--neon); border-color: var(--neon); }
.vt-redes svg { width: 20px; height: 20px; }

.vt-aviso { color: var(--muted); font-size: 16px; }
.escondida { display: none !important; }

@media (max-width: 700px) {
  .vt-sec { padding: 44px 20px; }
  .vt-topo { padding: 14px 20px; }
  .pcard { padding: 28px 24px; }

  /* Os três números lado a lado no celular. Com auto-fit eles caíam 2 + 1 e
     sobrava uma célula vazia, que lia como número faltando. */
  .pnums { grid-template-columns: repeat(3, 1fr); }
  .pnum { padding: 20px 14px; }
  .pnum b { font-size: 26px; }
  .pnum span { font-size: 11.5px; margin-top: 6px; }
}

/* ── O convite duplo (indique + seja parceiro) ─────────────────────────────
   Duas chamadas lado a lado em tela larga, empilhadas no celular, e as ações
   ABAIXO do texto, alinhadas à esquerda. O flex space-between que jogava o
   botão pro meio do nada em tela larga morreu aqui (ago/26). */
.vt-convite {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
@media (max-width: 720px) { .vt-convite { grid-template-columns: 1fr; gap: 28px; } }
.vt-convite .vt-h2 { margin-bottom: 10px; }
.vt-convite .vt-lead { margin: 0; }
.vt-convite-acao { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.escuro .vt-btn.fantasma {
  background: transparent; color: #f5f5f0;
  box-shadow: inset 0 0 0 1.5px rgba(245,245,240,0.4);
}
.escuro .vt-btn.fantasma:hover { box-shadow: inset 0 0 0 1.5px #f5f5f0; opacity: 1; }