/* RankBrasileiro — light, off-white borrado com grain e manchas do Brasil.
   Paleta oficial: RankBrasileiro-Guia-Visual-de-Cores.md (v1.0),
   adaptada pro claro: as cores da marca continuam sendo assinatura (10%),
   e no texto usam a versão escurecida pra ter contraste de leitura. */

:root {
  /* Brand */
  --rb-green: #16D94A;
  --rb-gold: #FFD91A;
  --rb-blue: #087BFF;

  /* Versões legíveis sobre claro (contraste AA) */
  --rb-green-t: #0E8F31;
  --rb-gold-t: #8A6D00;
  --rb-blue-t: #0B62CC;

  /* Superfícies claras */
  --rb-fundo: #FAF7F0;
  --rb-fundo-2: #F2EEE4;
  /* levemente translúcido: deixa a cor do fundo respirar por baixo do cartão */
  --rb-cartao: rgba(255, 255, 255, 0.88);
  --rb-cartao-2: rgba(251, 249, 245, 0.9);

  /* Texto */
  --rb-text: #14130F;
  --rb-text-2: #5E5A51;
  --rb-text-3: #8B857A;
  --rb-text-off: #B5AFA3;

  /* Ranking */
  --rb-silver: #7C838E;
  --rb-bronze: #A05F26;

  /* Semântico */
  --rb-success: #0E8F31;
  --rb-error: #C62828;

  /* Bordas */
  --rb-border: #E4DED1;
  --rb-border-forte: #D3CBB9;

  --rb-spectrum: linear-gradient(135deg, #FFD91A 0%, #16D94A 48%, #087BFF 100%);

  --sombra: 0 1px 2px rgba(20, 19, 15, 0.04), 0 4px 16px rgba(20, 19, 15, 0.05);
  --sombra-alta: 0 2px 4px rgba(20, 19, 15, 0.06), 0 12px 40px rgba(20, 19, 15, 0.10);

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 14px;
  --coluna: 760px;
}

/* Fonte pro dinheiro: hospedada por nós (2 arquivos de ~4 KB, só R$/dígitos/espaço),
   nada de pedido externo pro Google em produção. Dá cara de valor de verdade,
   destacado da tipografia do resto da página. */
@font-face {
  font-family: 'RB Valor';
  src: url('/assets/fontes/plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+20, U+24, U+30-39, U+52;
}
@font-face {
  font-family: 'RB Valor';
  src: url('/assets/fontes/plex-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+20, U+24, U+30-39, U+52;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  position: relative;
  font-family: var(--fonte);
  background: var(--rb-fundo);
  color: var(--rb-text);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* segura o rodapé embaixo mesmo em página curta */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main { flex: 1 0 auto; }

/* ---------------- Decoração: manchas do Brasil + grain ---------------- */

/* As manchas ficam num pseudo-elemento fixo, bem borradas e discretas.
   São a "assinatura brasileira" do fundo, não um preenchimento. */
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34vmax 28vmax at 10% 2%,  rgba(255, 209, 26, 0.62), transparent 60%),
    radial-gradient(38vmax 32vmax at 94% 10%, rgba(22, 217, 74, 0.52), transparent 62%),
    radial-gradient(42vmax 34vmax at 82% 74%, rgba(8, 123, 255, 0.42), transparent 64%),
    radial-gradient(34vmax 28vmax at 2% 84%,  rgba(22, 217, 74, 0.38), transparent 62%),
    radial-gradient(26vmax 22vmax at 50% 46%, rgba(255, 209, 26, 0.20), transparent 66%);
  filter: blur(58px) saturate(125%);
  animation: respirar 26s ease-in-out infinite alternate;
}

@keyframes respirar {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(0, -1.5%, 0); }
}

/* Grain por cima de tudo, em opacidade baixa. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

a { color: var(--rb-blue-t); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--rb-blue-t);
  outline-offset: 2px;
  border-radius: 4px;
}

.oculto { display: none !important; }
/* o atributo hidden vence QUALQUER display que a gente tenha dado à classe;
   sem isto, um .grafico-dica { display:flex } atropela o hidden do HTML */
[hidden] { display: none !important; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--rb-text); color: var(--rb-fundo);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

.envolve { max-width: var(--coluna); margin: 0 auto; padding: 0 20px; }

/* ---------------- Topo ---------------- */

.topo { padding: 18px 0; }
/* três colunas: o vão equilibra a navegação e deixa o contador no centro exato */
.topo__linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.topo__navegacao { justify-self: end; }
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--rb-text); text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
}
.marca__logo { width: 30px; height: auto; display: block; }
.topo__navegacao { display: flex; align-items: center; gap: 22px; }

/* contador de views das últimas 24h: é o caminho pro painel de métricas */
.topo__views {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  box-shadow: var(--sombra);
  font-size: 14.5px; font-weight: 700;
  color: var(--rb-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.topo__views:hover {
  border-color: var(--rb-border-forte);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}
.topo__views-sufixo { color: var(--rb-text-3); font-weight: 500; }

@media (max-width: 480px) {
  .topo__navegacao { gap: 14px; }
  .topo__views { font-size: 13px; padding: 7px 13px; gap: 7px; }
}
/* nos celulares mais estreitos (320-374px) o grid de três colunas não fecha a
   conta: o contador + a navegação passam da tela e o navegador afasta o zoom
   da página inteira. Aqui o topo vira duas pontas — contador à esquerda,
   navegação à direita — e tudo volta a caber. */
@media (max-width: 374px) {
  .topo__linha { display: flex; justify-content: space-between; gap: 8px; }
  .topo__views { font-size: 12px; padding: 6px 10px; gap: 6px; }
  .topo__navegacao { gap: 10px; }
}
.topo__link { color: var(--rb-text-2); text-decoration: none; font-size: 14px; }
.topo__link:hover { color: var(--rb-text); }

/* no celular os links do topo e do rodapé ganham altura de dedo (44px) sem
   mudar de aparência: é só respiro em volta do texto. Errar o link num
   celular é o tipo de atrito que faz a pessoa fechar a aba. */
@media (max-width: 640px) {
  .topo__link { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape__nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .topo__views { min-height: 44px; }
}

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

.heroi { text-align: center; padding: 52px 0 40px; }

/* a marca vive aqui agora: símbolo e nome lado a lado, centralizados */
.heroi__marca {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 26px;
}
.heroi__simbolo {
  width: 62px; height: auto;
  display: block;
  flex: none;
  filter: drop-shadow(0 6px 18px rgba(20, 19, 15, 0.14));
}
.heroi__nome {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rb-text);
}
.heroi h1 {
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.marcado {
  background: linear-gradient(135deg, #C9A200 0%, #0E8F31 52%, #0B62CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heroi__sub {
  margin: 14px auto 0;
  max-width: 520px;
  color: var(--rb-text-2);
  font-size: 17px;
}

/* Barra de lance: input + botão */

.barra {
  display: flex; gap: 10px;
  max-width: 560px;
  margin: 14px auto 0;
}
.barra__campo {
  flex: 1;
  /* sem isto o campo trava no tamanho "natural" do input e empurra o botão
     pra fora da tela nos celulares estreitos — o flex precisa da permissão
     explícita pra encolher o campo */
  min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  padding: 0 14px;
  box-shadow: var(--sombra);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.barra__campo:focus-within {
  border-color: var(--rb-border-forte);
  box-shadow: var(--sombra-alta);
}
.barra__favicon {
  width: 20px; height: 20px; border-radius: 4px;
  flex: none;
}
.barra__campo input {
  flex: 1; min-width: 0;
  background: none; border: none;
  color: var(--rb-text);
  font: inherit; font-size: 15px;
  padding: 15px 0;
}
.barra__campo input::placeholder { color: var(--rb-text-off); }
.barra__campo input:focus { outline: none; }

.btn {
  font: inherit; font-weight: 700;
  border: none; cursor: pointer;
  border-radius: var(--raio);
  padding: 14px 22px;
  min-height: 48px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.15s, transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.98); }

.btn--rankear {
  background: var(--rb-fundo-2);
  color: var(--rb-text-off);
  border: 1px solid var(--rb-border);
  flex: none;
}
.btn--rankear.aceso {
  background: var(--rb-text);
  color: #FFF;
  border-color: var(--rb-text);
  box-shadow: var(--sombra-alta);
}
.btn--rankear.aceso:hover { opacity: 0.88; }

.btn--claro { background: var(--rb-text); color: #FFF; box-shadow: var(--sombra); }
.btn--claro:hover { opacity: 0.88; }
.btn--claro:disabled { opacity: 0.4; cursor: default; }

.btn--fantasma {
  background: var(--rb-cartao);
  color: var(--rb-text);
  border: 1px solid var(--rb-border);
}
.btn--fantasma:hover { border-color: var(--rb-border-forte); }

.btn--largo { width: 100%; }

.barra__erro {
  margin: 10px auto 0;
  max-width: 560px;
  color: var(--rb-error);
  font-size: 14px;
}

/* Os dois convites, lado a lado: assumir o #1 e comprar o site inteiro */
.heroi__ctas {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  margin: 26px auto 4px;
}

/* O chamariz: diz o preço exato pra assumir o primeiro lugar agora.
   Clicou, já vai pro fluxo com o valor preenchido. */
.chamariz {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  min-height: 44px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--rb-text);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--rb-spectrum) border-box;
  box-shadow: 0 2px 6px rgba(20, 19, 15, 0.05), 0 10px 30px rgba(255, 217, 26, 0.16);
  transition: transform 0.12s, box-shadow 0.15s;
}
.chamariz:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 19, 15, 0.07), 0 14px 38px rgba(255, 217, 26, 0.24);
}
.chamariz:active { transform: translateY(0); }
.chamariz__trofeu { font-size: 17px; line-height: 1; }
.chamariz__valor {
  font-family: 'RB Valor', var(--fonte);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.heroi__regra {
  margin: 22px auto 0;
  color: var(--rb-text-3);
  font-size: 13px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
}

/* a variação quieta do chamariz: mesmo formato, sem o gradiente gritando */
.chamariz--quieto {
  border: 2px solid var(--rb-border);
  background: var(--rb-cartao);
  box-shadow: var(--sombra);
  font-weight: 600;
  color: var(--rb-text-2);
}
.chamariz--quieto:hover {
  color: var(--rb-gold-t);
  border-color: rgba(255, 217, 26, 0.5);
  box-shadow: 0 4px 10px rgba(20, 19, 15, 0.06), 0 12px 32px rgba(255, 217, 26, 0.14);
}
.exclusivo-gatilho__preco { color: var(--rb-text-off); font-weight: 500; }
.chamariz--quieto:hover .exclusivo-gatilho__preco { color: var(--rb-gold-t); }

/* ---------------- Palco do modo exclusivo ---------------- */

.palco-exclusivo { text-align: center; padding: 8px 0 12px; }
.palco-exclusivo__selo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rb-gold-t);
  margin-bottom: 18px;
}
.palco-exclusivo__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 28px;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 250, 232, 0.95), rgba(255, 250, 232, 0.95)) padding-box,
    var(--rb-spectrum) border-box;
  box-shadow: 0 4px 10px rgba(20, 19, 15, 0.06), 0 20px 60px rgba(255, 217, 26, 0.25);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.palco-exclusivo__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(20, 19, 15, 0.08), 0 26px 70px rgba(255, 217, 26, 0.32);
}
.palco-exclusivo__favicon { width: 48px; height: 48px; border-radius: 10px; }
.palco-exclusivo__dominio {
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--rb-text);
}
.palco-exclusivo__desc {
  color: var(--rb-text-2);
  font-size: 15px;
  max-width: 480px;
}
.palco-exclusivo__resto {
  margin-top: 16px;
  color: var(--rb-text-3);
  font-size: 13.5px;
}
.palco-exclusivo__resto strong { color: var(--rb-text-2); font-variant-numeric: tabular-nums; }
.palco-exclusivo__chance {
  margin-top: 6px;
  color: var(--rb-gold-t);
  font-size: 13.5px;
  font-weight: 600;
}

/* passo das horas no modal do exclusivo */
.valor__campo--horas { gap: 8px; }
.valor__num {
  font-family: 'RB Valor', var(--fonte);
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.valor__sufixo { color: var(--rb-text-3); font-weight: 600; }

/* ---------------- Rank ---------------- */

.rank { padding: 26px 0 60px; }

.rank__cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.rank__cabeca h2 { font-size: 18px; font-weight: 700; }
.rank__resumo { color: var(--rb-text-3); font-size: 13px; }

.rank__lista { list-style: none; display: grid; gap: 8px; }

.linha {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.linha:hover {
  border-color: var(--rb-border-forte);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

/* ---- Escala do pódio ----
   O mesmo efeito do #1 desce pro #2 e pro #3, perdendo força a cada degrau,
   até o #4 em diante, que é card normal. A borda é o gradiente do Brasil com
   a opacidade caindo; o brilho e a tinta do fundo acompanham. */

.linha--ouro,
.linha--prata,
.linha--bronze {
  border: 1px solid transparent;
}

.linha--ouro {
  background:
    linear-gradient(rgba(255, 250, 232, 0.94), rgba(255, 250, 232, 0.94)) padding-box,
    linear-gradient(135deg, rgba(255, 217, 26, 1) 0%, rgba(22, 217, 74, 1) 48%, rgba(8, 123, 255, 1) 100%) border-box;
  box-shadow: 0 2px 6px rgba(20, 19, 15, 0.06), 0 14px 36px rgba(255, 217, 26, 0.18);
}
.linha--ouro:hover {
  background:
    linear-gradient(rgba(255, 248, 222, 0.96), rgba(255, 248, 222, 0.96)) padding-box,
    linear-gradient(135deg, rgba(255, 217, 26, 1) 0%, rgba(22, 217, 74, 1) 48%, rgba(8, 123, 255, 1) 100%) border-box;
}

.linha--prata {
  background:
    linear-gradient(rgba(252, 252, 250, 0.93), rgba(252, 252, 250, 0.93)) padding-box,
    linear-gradient(135deg, rgba(255, 217, 26, 0.5) 0%, rgba(22, 217, 74, 0.5) 48%, rgba(8, 123, 255, 0.5) 100%) border-box;
  box-shadow: 0 2px 5px rgba(20, 19, 15, 0.05), 0 11px 28px rgba(255, 217, 26, 0.10);
}
.linha--prata:hover {
  background:
    linear-gradient(rgba(251, 251, 247, 0.96), rgba(251, 251, 247, 0.96)) padding-box,
    linear-gradient(135deg, rgba(255, 217, 26, 0.5) 0%, rgba(22, 217, 74, 0.5) 48%, rgba(8, 123, 255, 0.5) 100%) border-box;
}

.linha--bronze {
  background:
    linear-gradient(rgba(254, 253, 251, 0.92), rgba(254, 253, 251, 0.92)) padding-box,
    linear-gradient(135deg, rgba(255, 217, 26, 0.24) 0%, rgba(22, 217, 74, 0.24) 48%, rgba(8, 123, 255, 0.24) 100%) border-box;
  box-shadow: 0 1px 4px rgba(20, 19, 15, 0.05), 0 8px 22px rgba(255, 217, 26, 0.05);
}
.linha--bronze:hover {
  background:
    linear-gradient(rgba(253, 252, 249, 0.96), rgba(253, 252, 249, 0.96)) padding-box,
    linear-gradient(135deg, rgba(255, 217, 26, 0.24) 0%, rgba(22, 217, 74, 0.24) 48%, rgba(8, 123, 255, 0.24) 100%) border-box;
}

/* ---- Escala de tamanho do pódio ----
   Junto com a tinta, o TAMANHO desce degrau a degrau: o #1 é o maior, o #2 e
   o #3 encolhem um pouco, e do #4 em diante é o card normal. É leve de
   propósito — quem olha percebe a hierarquia sem conseguir apontar o motivo.
   Os números batem com a base: padding 14/16, favicon 28, título 15, valor 15. */

.linha--ouro   { padding: 20px 18px; gap: 16px; }
.linha--prata  { padding: 17px 17px; gap: 15px; }
.linha--bronze { padding: 15px 16px; }

/* a escala também é horizontal: o #1 ocupa a largura toda e cada degrau
   recolhe um pouco pelos dois lados, centralizado. Do #4 em diante volta
   a largura cheia, e a lista lê como um pódio afunilando. */
.linha--prata  { width: calc(100% - 22px); margin-inline: auto; }
.linha--bronze { width: calc(100% - 44px); margin-inline: auto; }

.linha--ouro   .linha__favicon { width: 36px; height: 36px; border-radius: 8px; }
.linha--prata  .linha__favicon { width: 32px; height: 32px; border-radius: 7px; }
.linha--bronze .linha__favicon { width: 30px; height: 30px; }

.linha--ouro   .linha__titulo { font-size: 17px; }
.linha--prata  .linha__titulo { font-size: 16px; }
.linha--bronze .linha__titulo { font-size: 15.5px; }

.linha--ouro   .linha__valor { font-size: 19px; }
.linha--prata  .linha__valor { font-size: 17px; }
.linha--bronze .linha__valor { font-size: 16px; }

.linha--ouro   .linha__pos { font-size: 19px; color: var(--rb-gold-t); }
.linha--prata  .linha__pos { font-size: 17px; }
.linha--bronze .linha__pos { font-size: 16px; }

/* no celular a escala encolhe junto, senão o #1 come a largura toda */
@media (max-width: 640px) {
  .linha--ouro   { padding: 16px 14px; gap: 12px; }
  .linha--prata  { padding: 14px 14px; gap: 11px; }
  .linha--bronze { padding: 13px 14px; }
  .linha--prata  { width: calc(100% - 12px); }
  .linha--bronze { width: calc(100% - 24px); }
  .linha--ouro   .linha__favicon { width: 32px; height: 32px; }
  .linha--prata  .linha__favicon { width: 30px; height: 30px; }
  .linha--ouro   .linha__titulo { font-size: 15.5px; }
  .linha--prata  .linha__titulo { font-size: 15px; }
  .linha--bronze .linha__titulo { font-size: 14.5px; }
  .linha--ouro   .linha__valor { font-size: 17px; }
  .linha--prata  .linha__valor { font-size: 16px; }
}

/* ---- Vaga do pódio ----
   Mesmo degrau, mesma tinta, mas tracejada e sem peso: lê como "espaço
   reservado esperando dono", não como um item de verdade. */

.linha--vaga {
  border-style: dashed;
  box-shadow: none;
  align-items: center;
}
.linha--vaga:hover {
  box-shadow: var(--sombra);
  transform: translateY(-1px);
}
/* as classes de medalha desenham a borda por gradiente; na vaga a gente volta
   pra uma borda tracejada de verdade, que é o que comunica "vago" */
.linha--vaga.linha--prata,
.linha--vaga.linha--bronze {
  border: 1px dashed var(--rb-border-forte);
}
.linha--vaga .linha__pos { color: var(--rb-text-off); }

.linha__vazio-marca {
  flex: none;
  width: 28px; height: 28px;
  transition: width 0.15s, height 0.15s;
  border-radius: 8px;
  border: 1px dashed var(--rb-border-forte);
  color: var(--rb-text-off);
  font-size: 16px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.linha__vazio-titulo {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--rb-text-2);
}
.linha--prata  .linha__vazio-marca { width: 32px; height: 32px; }
.linha--bronze .linha__vazio-marca { width: 30px; height: 30px; }
.linha--prata  .linha__vazio-titulo { font-size: 15.5px; }
.linha--vaga .linha__desc { color: var(--rb-text-3); }
.linha__valor--vaga { color: var(--rb-text-3); }

.linha__pos {
  flex: none; width: 34px;
  text-align: center;
  font-weight: 800; font-size: 15px;
  color: var(--rb-text-3);
  font-variant-numeric: tabular-nums;
}

.linha__favicon {
  flex: none; width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--rb-fundo-2);
}

.linha__corpo { flex: 1; min-width: 0; }
.linha__titulo {
  color: var(--rb-text);
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linha__titulo:hover { color: var(--rb-green-t); }

/* O card inteiro vira área de clique do link (menos o "Superar", abaixo).
   Feito com o link esticado por cima do card: continua sendo um <a> de verdade,
   então teclado, leitor de tela e "abrir em nova aba" seguem funcionando. */
.linha__titulo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--raio);
  z-index: 1;
}
.linha:hover .linha__titulo { color: var(--rb-green-t); }

/* Foco do teclado: desenha o contorno no card inteiro, não só na palavra.
   Só troca onde :has() existe; sem ele o link mantém o próprio contorno,
   então nunca fica sem indicação de foco. */
@supports selector(:has(*)) {
  .linha:has(.linha__titulo:focus-visible) {
    outline: 2px solid var(--rb-blue-t);
    outline-offset: 2px;
  }
  .linha .linha__titulo:focus-visible { outline: none; }
}

/* a descrição do site, no espírito do snippet do Google: duas linhas e corta */
.linha__desc {
  color: var(--rb-text-2);
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linha__meta {
  color: var(--rb-text-3);
  font-size: 12.5px;
  margin-top: 4px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.linha__cliques { display: inline-flex; align-items: center; gap: 6px; }

/* pontinho ao vivo: a contagem de cliques está correndo agora */
.vivo {
  position: relative;
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rb-green);
  box-shadow: 0 0 0 0 rgba(22, 217, 74, 0.55);
  animation: pulsar 2s ease-out infinite;
}
.vivo::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--rb-green-t);
  opacity: 0.9;
}
@keyframes pulsar {
  0%   { box-shadow: 0 0 0 0 rgba(22, 217, 74, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 217, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 217, 74, 0); }
}
/* sem movimento: o ponto fica, a pulsação some (a regra global já corta a
   animação, isto só garante que ele continue legível e visível) */
@media (prefers-reduced-motion: reduce) {
  .vivo { box-shadow: 0 0 0 3px rgba(22, 217, 74, 0.18); }
}

.linha__lado { flex: none; display: flex; align-items: center; gap: 14px; padding-top: 1px; }
.linha__valor {
  font-family: 'RB Valor', var(--fonte);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.linha--ouro .linha__valor { color: var(--rb-gold-t); }

.btn--superar {
  /* fica acima do link esticado, pra continuar sendo um botão de verdade */
  position: relative; z-index: 2;
  padding: 8px 14px; min-height: 36px;
  font-size: 13px; font-weight: 600;
  background: var(--rb-cartao-2);
  color: var(--rb-text-2);
  border: 1px solid var(--rb-border);
  box-shadow: none;
}
.btn--superar:hover { color: var(--rb-text); border-color: var(--rb-border-forte); }

@media (max-width: 560px) {
  .linha { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .linha__corpo { flex: 1 1 calc(100% - 90px); }
  .linha__lado { flex: 1 1 100%; justify-content: space-between; padding-left: 44px; }
  /* no dedo, o botão que fatura precisa dos 44px cheios */
  .btn--superar { min-height: 44px; padding: 10px 16px; font-size: 13.5px; }
}

/* esqueleto de carregamento */
.esqueleto { display: grid; gap: 8px; }
.esqueleto__linha {
  height: 88px; border-radius: var(--raio);
  border: 1px solid var(--rb-border);
  background: linear-gradient(90deg, var(--rb-cartao) 25%, var(--rb-fundo-2) 50%, var(--rb-cartao) 75%);
  background-size: 200% 100%;
  animation: brilho 1.4s infinite;
}
@keyframes brilho { to { background-position: -200% 0; } }

.vazio {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed var(--rb-border-forte);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.6);
}
.vazio h3 { font-size: 18px; margin-bottom: 8px; }
.vazio p { color: var(--rb-text-2); max-width: 420px; margin: 0 auto 18px; font-size: 14px; }

.aviso-demo {
  text-align: center;
  color: var(--rb-text-3);
  font-size: 12.5px;
  margin-top: 14px;
}

.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 20px;
}
.paginacao__estado { color: var(--rb-text-3); font-size: 13px; }
.paginacao .btn { padding: 10px 16px; min-height: 40px; font-size: 14px; }
.paginacao .btn:disabled { opacity: 0.4; cursor: default; }

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

.rodape {
  border-top: 1px solid var(--rb-border);
  padding: 28px 0 36px;
  background: rgba(242, 238, 228, 0.7);
}
.rodape__linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.rodape__nav { display: flex; gap: 20px; }
.rodape__nav a { color: var(--rb-text-2); text-decoration: none; font-size: 13.5px; }
.rodape__nav a:hover { color: var(--rb-text); }
.rodape__nota {
  margin-top: 16px;
  color: var(--rb-text-3);
  font-size: 12.5px;
  max-width: 560px;
}
.rodape__nota a { color: var(--rb-text-2); }

/* ---------------- Modal ---------------- */

.cortina {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 19, 15, 0.34);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: 18px;
  width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto;
  padding: 28px 24px 24px;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 70px rgba(20, 19, 15, 0.22);
}
.modal__fechar {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  background: none; border: none;
  color: var(--rb-text-3);
  font-size: 24px; cursor: pointer;
  border-radius: 10px;
}
.modal__fechar:hover { color: var(--rb-text); background: var(--rb-fundo-2); }
.modal h2, .modal__titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.modal__sub { color: var(--rb-text-2); font-size: 14px; margin-top: 6px; }

.modal__site {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rb-fundo-2);
  border: 1px solid var(--rb-border);
  border-radius: 10px;
  padding: 7px 12px;
  margin-top: 14px;
  font-size: 13.5px; color: var(--rb-text-2);
  max-width: 100%;
}
.modal__site img { width: 16px; height: 16px; border-radius: 3px; }
.modal__site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* passo do valor */
.valor__controle {
  display: flex; align-items: stretch; gap: 10px;
  margin: 22px 0 12px;
}
.degrau {
  width: 52px;
  background: var(--rb-cartao-2);
  border: 1px solid var(--rb-border);
  border-radius: 12px;
  color: var(--rb-text);
  font-size: 20px; cursor: pointer;
}
.degrau:hover { border-color: var(--rb-border-forte); }
.valor__campo {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--rb-cartao-2);
  border: 1px solid var(--rb-border);
  border-radius: 12px;
  padding: 12px;
}
.valor__prefixo { font-family: 'RB Valor', var(--fonte); color: var(--rb-text-3); font-weight: 700; font-size: 18px; }
.valor__campo input {
  width: 110px;
  background: none; border: none;
  color: var(--rb-text);
  font-family: 'RB Valor', var(--fonte);
  font-size: 26px; font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.valor__campo input::-webkit-outer-spin-button,
.valor__campo input::-webkit-inner-spin-button { -webkit-appearance: none; }
.valor__campo input:focus { outline: none; }

.atalhos { display: flex; gap: 8px; justify-content: center; }
.atalho {
  font-family: 'RB Valor', var(--fonte); font-size: 13.5px; font-weight: 600;
  background: var(--rb-cartao-2);
  border: 1px solid var(--rb-border);
  border-radius: 10px;
  color: var(--rb-text-2);
  padding: 8px 16px; min-height: 38px;
  cursor: pointer;
}
.atalho:hover { border-color: var(--rb-border-forte); color: var(--rb-text); }
.atalho[aria-pressed="true"] {
  border-color: var(--rb-green-t);
  color: var(--rb-green-t);
  background: rgba(22, 217, 74, 0.08);
}

.previsao {
  margin: 16px 0 20px;
  font-size: 14px;
  color: var(--rb-text-2);
  min-height: 22px;
}
.previsao--topo { color: var(--rb-gold-t); font-weight: 700; }

/* aviso de que a posição pode mudar antes do pagamento cair */
.aviso-jogo {
  margin: 4px 0 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255, 217, 26, 0.12);
  border: 1px solid rgba(255, 217, 26, 0.45);
  color: var(--rb-text-2);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
}
.aviso-jogo strong { color: var(--rb-gold-t); }

.consentimento { margin-top: 14px; color: var(--rb-text-3); font-size: 12px; }
.consentimento a { color: var(--rb-text-2); }

.aviso-erro { margin-top: 14px; color: var(--rb-error); font-size: 13.5px; }

/* ---------------- Volta do pagamento (/pago/) ---------------- */

/* O pagamento acontece na tela da InfinitePay; esta é a página onde a pessoa
   cai depois. Mesmo cartão do modal, agora de pé sozinho no meio da tela. */
.retorno {
  min-height: 62vh;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px 72px;
}
.retorno__cartao {
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: 18px;
  width: 100%; max-width: 420px;
  padding: 34px 26px 28px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(20, 19, 15, 0.1);
}
.retorno__cartao h1, .retorno__titulo { font-size: 22px; letter-spacing: -0.015em; }
.retorno__acao { margin-top: 24px; display: grid; gap: 10px; }
.retorno__miudo {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--rb-text-3);
}
.retorno__miudo a { color: var(--rb-text-2); }

.estado-pgto {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--rb-text-2);
  font-size: 14px;
}
.girando {
  width: 16px; height: 16px;
  border: 2px solid var(--rb-border-forte);
  border-top-color: var(--rb-green-t);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
  flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* festa */
.festa__emblema {
  font-size: 52px; font-weight: 800;
  background: linear-gradient(135deg, #C9A200 0%, #0E8F31 52%, #0B62CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.festa p { color: var(--rb-text-2); font-size: 14.5px; margin-top: 8px; }
.festa__acao { margin-top: 22px; }

/* ---------------- Virada de #1: a festa na tela de todo mundo ---------------- */

/* faixa que desce anunciando o novo líder */
.festejo {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(440px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-radius: 999px;
  /* branco por dentro, gradiente do Brasil só na borda */
  border: 2px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--rb-spectrum) border-box;
  box-shadow: 0 12px 44px rgba(20, 19, 15, 0.20);
  animation: descer 0.5s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.festejo__troféu { font-size: 20px; flex: none; line-height: 1; }
.festejo__texto {
  font-size: 14px; line-height: 1.35;
  min-width: 0;
}
.festejo__titulo {
  font-weight: 800;
  background: linear-gradient(135deg, #C9A200 0%, #0E8F31 52%, #0B62CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.festejo__site {
  color: var(--rb-text-2);
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.festejo__valor { font-family: 'RB Valor', var(--fonte); font-weight: 700; color: var(--rb-text); }

@keyframes descer {
  from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* onda das cores do Brasil varrendo a tela, uma vez só */
.onda-brasil {
  position: fixed; inset: 0;
  z-index: 55;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(255, 217, 26, 0.22) 42%,
    rgba(22, 217, 74, 0.20) 50%,
    rgba(8, 123, 255, 0.18) 58%,
    transparent 70%);
  background-size: 300% 100%;
  animation: varrer 1.5s ease-out forwards;
}
@keyframes varrer {
  from { background-position: 130% 0; }
  to   { background-position: -60% 0; }
}

/* o card que virou #1 pisca uma vez */
.linha--coroada { animation: coroar 1.6s ease-out; }
@keyframes coroar {
  0%   { box-shadow: 0 0 0 0 rgba(255, 217, 26, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(255, 217, 26, 0); }
  100% { box-shadow: 0 2px 6px rgba(20, 19, 15, 0.06), 0 14px 36px rgba(255, 217, 26, 0.18); }
}

/* confete */
#confete {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; overflow: hidden;
}
.papel {
  position: absolute; top: -12px;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: cair linear forwards;
}
@keyframes cair {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0.7; }
}

/* ---------------- Páginas internas (métricas, termos) ---------------- */

.pagina { padding: 40px 0 60px; }
.pagina h1 { font-size: clamp(26px, 5vw, 36px); letter-spacing: -0.025em; }
.pagina > .envolve > p { color: var(--rb-text-2); }

/* ======== Dobras: como funciona + perguntas ========
   Nascem FECHADAS. O rank é o assunto da página; isto aqui é quem quiser
   saber mais. Usa <details> nativo, então funciona sem javascript e o texto
   continua no HTML pro buscador. */

/* Espaço largo de propósito: o rank acaba aqui. Um traço curto e discreto
   marca a fronteira sem virar mais uma caixa na tela. */
.saibamais { padding: 96px 0 72px; }
.saibamais .envolve { position: relative; }
.saibamais .envolve::before {
  content: '';
  position: absolute;
  top: -52px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 3px;
  border-radius: 3px;
  background: var(--rb-spectrum);
  opacity: 0.35;
}
@media (max-width: 640px) {
  .saibamais { padding: 68px 0 56px; }
  .saibamais .envolve::before { top: -38px; }
}

.dobra {
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.dobra + .dobra { margin-top: 10px; }

.dobra__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
  min-height: 44px;
}
/* fora o triangulinho padrão do navegador, nos dois motores */
.dobra__topo::-webkit-details-marker { display: none; }
.dobra__topo::marker { content: ''; }
.dobra__topo:hover { background: var(--rb-cartao-2); }
.dobra__topo h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.dobra__topo:focus-visible {
  outline: 2px solid var(--rb-blue-t);
  outline-offset: -2px;
}

/* a seta é feita com borda: dois traços girados, sem imagem nem fonte extra */
.dobra__seta {
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--rb-text-3);
  border-bottom: 2px solid var(--rb-text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.dobra[open] .dobra__seta { transform: rotate(-135deg) translate(-2px, -2px); }

.dobra__corpo {
  padding: 2px 18px 18px;
  border-top: 1px solid var(--rb-border);
  margin-top: -1px;
  animation: dobra-abre 0.22s ease;
}
@keyframes dobra-abre {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- os três passos --- */

.passos { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.passo { display: flex; gap: 13px; align-items: flex-start; }
.passo__num {
  flex: none;
  width: 27px; height: 27px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'RB Valor', var(--fonte);
  font-weight: 700; font-size: 13px;
  color: #FFF;
  background: linear-gradient(135deg, #0E8F31, #0B62CC);
}
.passo h3 { font-size: 15px; margin-bottom: 1px; }
.passo p { color: var(--rb-text-2); font-size: 14px; }

/* --- as perguntas --- */

.duvida { padding: 14px 0; border-bottom: 1px solid var(--rb-border); }
.duvida:first-child { padding-top: 16px; }
.duvida:last-child { border-bottom: none; padding-bottom: 2px; }
.duvida h3 { font-size: 15px; margin-bottom: 5px; }
.duvida p { color: var(--rb-text-2); font-size: 14px; max-width: 62ch; }

/* ======== Painel de métricas (a vitrine de números do rank) ======== */

.painel { padding: 40px 0 64px; }
.painel__envolve { max-width: 880px; }

.painel__cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.painel__cabeca h1 { font-size: clamp(26px, 5vw, 34px); letter-spacing: -0.025em; }
.painel__sub { color: var(--rb-text-2); font-size: 14.5px; margin-top: 8px; max-width: 52ch; }

/* a pílula "ao vivo": mesma família do contador do topo */
.painel__vivo {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  box-shadow: var(--sombra);
  font-size: 13.5px;
  color: var(--rb-text-2);
  white-space: nowrap;
  flex: none;
  margin-top: 4px;
}
.painel__vivo-num {
  font-family: 'RB Valor', var(--fonte);
  font-weight: 700;
  color: var(--rb-text);
  font-variant-numeric: tabular-nums;
}

/* ---- os quatro cartões ---- */

.cartoes {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0 0 14px;
}
.cartao {
  position: relative;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  padding: 16px 18px 14px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
/* o fio de assinatura: as cores da marca numa linha de 2px no topo do cartão */
.cartao::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--rb-spectrum);
  opacity: 0.55;
}
.cartao__rotulo { color: var(--rb-text-3); font-size: 12.5px; font-weight: 600; }
.cartao__num {
  font-family: 'RB Valor', var(--fonte);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  line-height: 1.1;
}
.cartao__pe {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--rb-text-3);
  display: flex; align-items: center; gap: 8px;
  min-height: 18px;
}
.cartao__pe a { color: var(--rb-blue-t); text-decoration: none; font-weight: 600; }
.cartao__pe a:hover { text-decoration: underline; }

.delta {
  font-weight: 700;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.delta--sobe  { color: var(--rb-success); background: rgba(22, 217, 74, 0.12); }
.delta--desce { color: var(--rb-error);   background: rgba(198, 40, 40, 0.10); }

/* ---- o gráfico ---- */

.grafico-caixa {
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 18px 12px;
  margin-bottom: 14px;
}
.grafico-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.grafico-cabeca h2 { font-size: 15px; font-weight: 700; }
.grafico-controles { display: flex; gap: 8px; flex-wrap: wrap; }

/* botões segmentados, no tom dos atalhos do modal */
.seg {
  display: inline-flex;
  background: var(--rb-fundo-2);
  border: 1px solid var(--rb-border);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.seg__btn {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--rb-text-2);
  padding: 5px 11px;
  border-radius: 8px;
  min-height: 28px;
}
.seg__btn:hover { color: var(--rb-text); }
.seg__btn[aria-pressed="true"] {
  background: #FFF;
  color: var(--rb-text);
  box-shadow: 0 1px 3px rgba(20, 19, 15, 0.10);
}

.grafico-palco { position: relative; }
.grafico { display: block; width: 100%; height: auto; }

.grafico__guia { stroke: var(--rb-border); stroke-width: 1; stroke-dasharray: 2 4; }
.grafico__tick { fill: var(--rb-text-3); font-size: 11px; font-family: var(--fonte); }
.grafico__area { fill: url(#grad-area); }
.grafico__linha {
  fill: none;
  stroke: var(--rb-green-t);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.grafico__ponto { fill: var(--rb-green-t); }
.grafico__ponto--vivo { animation: ponto-pulsa 2s ease-in-out infinite; }
@keyframes ponto-pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.grafico-dica {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--rb-text);
  color: var(--rb-fundo);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  box-shadow: var(--sombra-alta);
  z-index: 5;
}
.grafico-dica__dia { opacity: 0.7; }
.grafico-dica__valor {
  font-family: 'RB Valor', var(--fonte);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grafico-eixo {
  display: flex;
  padding: 6px 12px 0 44px;
  justify-content: space-between;
}
.grafico-eixo__dia {
  flex: 1;
  font-size: 12px;
  color: var(--rb-text-3);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

/* ---- os quadros ---- */

.quadros {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
}
@media (max-width: 640px) { .quadros { grid-template-columns: 1fr; } }
.quadro {
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
}
.quadro--largo { grid-column: 1 / -1; }
@media (max-width: 640px) { .quadro--largo { grid-column: auto; } }
.quadro h2 {
  font-size: 15px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.quadro__periodo { color: var(--rb-text-3); font-size: 12px; font-weight: 500; }
.quadro__vazio { color: var(--rb-text-3); font-size: 13px; }
.quadro__vazio code {
  background: var(--rb-fundo-2);
  padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}

.medidores { list-style: none; display: grid; gap: 6px; }
.medidor {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  overflow: hidden;
}
/* a barra é o fundo: cresce até a proporção quando entra na tela */
.medidor__trilho {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(22, 217, 74, 0.18), rgba(22, 217, 74, 0.08));
  border-radius: 8px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.medidor__icone {
  position: relative; flex: none;
  width: 16px; height: 16px;
  border-radius: 4px;
}
.medidor__inicial {
  position: relative; flex: none;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--rb-fundo-2);
  border: 1px solid var(--rb-border);
  color: var(--rb-text-3);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.medidor__rotulo {
  position: relative;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--rb-text);
  font-weight: 600;
}
.medidor__lado {
  position: relative; flex: none;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.medidor__pct { color: var(--rb-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.medidor__valor {
  font-family: 'RB Valor', var(--fonte);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rb-text-2);
}
.medidores--rasas { margin-top: 10px; }

/* a faixa proporcional dos dispositivos */
.fatia {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--rb-fundo-2);
  gap: 2px;
}
.fatia__parte { height: 100%; min-width: 3px; }

.painel__nota {
  color: var(--rb-text-3);
  font-size: 12.5px;
  max-width: 62ch;
}
.painel__nota a { color: var(--rb-text-2); }

/* estado de erro do painel */
.vazio {
  text-align: center;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  padding: 34px 20px;
  margin-bottom: 20px;
}
.vazio h3 { font-size: 17px; }
.vazio p { color: var(--rb-text-2); font-size: 14px; margin: 8px 0 16px; }

/* ---- tabela simples (termos/sobre) ---- */

.tabela-caixa {
  overflow-x: auto;
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  background: var(--rb-cartao);
  box-shadow: var(--sombra);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; white-space: nowrap; }
th { color: var(--rb-text-3); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--rb-border); }
td { border-bottom: 1px solid var(--rb-fundo-2); color: var(--rb-text-2); }
tr:last-child td { border-bottom: none; }
td:first-child { color: var(--rb-text); }

/* cartão do autor, no fim da página sobre */
.autor {
  display: flex; align-items: center; gap: 16px;
  margin-top: 40px;
  padding: 20px;
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.autor__foto {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--rb-cartao), var(--rb-cartao)) padding-box,
    var(--rb-spectrum) border-box;
}
.autor__texto { min-width: 0; }
.autor__nome {
  font-weight: 800; font-size: 17px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.autor__arroba {
  font-size: 14px; font-weight: 600;
  color: var(--rb-blue-t);
  text-decoration: none;
}
.autor__arroba:hover { text-decoration: underline; }
.autor__bio { color: var(--rb-text-2); font-size: 14.5px; margin-top: 3px; }

/* páginas de texto corrido (sobre, termos) */
.prosa { padding: 40px 0 60px; }
.prosa__miolo { max-width: 640px; }
.prosa h1 { font-size: clamp(26px, 5vw, 36px); letter-spacing: -0.025em; margin-bottom: 18px; }
.prosa__data { color: var(--rb-text-3); font-size: 13.5px; margin-top: -10px; margin-bottom: 22px; }
.destaque-caixa {
  background: var(--rb-cartao);
  border: 1px solid var(--rb-border);
  border-left: 3px solid var(--rb-green-t);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 26px;
  box-shadow: var(--sombra);
}
.destaque-caixa p { color: var(--rb-text); margin-bottom: 0; }
.prosa code {
  background: var(--rb-fundo-2);
  border: 1px solid var(--rb-border);
  padding: 1px 6px; border-radius: 5px;
  font-size: 13px;
}
.prosa h2 { font-size: 19px; margin: 30px 0 10px; }
.prosa h3 { font-size: 16px; margin: 20px 0 8px; }
.prosa p, .prosa li { color: var(--rb-text-2); font-size: 15px; margin-bottom: 10px; }
.prosa ul, .prosa ol { padding-left: 22px; }