/* ===== Banner principal: texto a esquerda, podio a direita =====
 *
 * Arquivo separado do core.css por causa do limite da CentralCart: arquivo
 * de tema acima de 64 KiB nao sobe, e a plataforma falha em SILENCIO. O
 * core.css ja estava com 60 KiB.
 *
 * Linha do visual: solido e contido. Cor chapada, bordas finas, uma luz so
 * onde importa (o fio aceso no topo de cada degrau). Nada de vidro fosco,
 * texto em degrade ou brilho espalhado — era isso que dava cara de "gerado".
 *
 * Tudo segue a cor do tema (--primary): no rosa e no amarelo o banner se
 * ajusta sozinho. As cores de medalha (ouro, prata, bronze) sao fixas de
 * proposito — sao a linguagem do podio, nao da loja.
 *
 * O Tailwind entra DEPOIS deste arquivo; onde uma classe dele (btn-primary)
 * precisa ser vencida, o seletor leva um nivel a mais (.banner-grade ...).
 */

/* ---------- Grade ---------- */

.banner-grade {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .banner-grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
  }
}

/* container-type: o titulo mede a propria coluna (unidade cqi), e nao a
   janela — assim a linha colorida cabe numa linha so em qualquer tela. */
.banner-texto {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

@media (min-width: 1024px) {
  .banner-texto {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Selo ---------- */

.banner-selo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--muted-foreground));
}

.banner-selo-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 9px 20px;
  border: 1px solid hsl(var(--primary) / 0.65);
  border-radius: 999px;
  background: rgb(var(--background) / 0.55);
  color: hsl(var(--primary));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.banner-selo-marca svg { width: 18px; height: 18px; }

.banner-selo-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .banner-selo-texto { display: none; }
}

/* ---------- Titulo ---------- */

.banner-titulo {
  margin: 1.25rem 0 0;
}

/* Sem o selo acima (hero_selo vazio no index.html), o titulo abre o bloco
   e nao precisa do respiro de cima. */
.banner-texto > .banner-titulo:first-child {
  margin-top: 0;
}

.banner-titulo {
  font-family: 'Sora', system-ui, sans-serif;
  /* 6.8cqi = 6,8% da largura da coluna. Medido: a linha mais longa das
     frases do titulo, em qualquer idioma ("in prizes every month"), ocupa
     12x o tamanho da fonte, entao ate 8,33cqi cabe numa linha; 6.8 deixa
     folga e um titulo menos pesado. Ao trocar ou criar frases, confira a
     mais longa. No celular o minimo (2.2rem) vence e a linha colorida pode
     quebrar em duas, o que la fica bem. A linha com vw e para navegador sem
     suporte a cqi. */
  font-size: clamp(2.2rem, 3.6vw, 3.8rem);
  font-size: clamp(2.2rem, 6.8cqi, 4.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}

.banner-titulo-destaque {
  color: hsl(var(--primary));
}

/* Maquina de escrever (core.css, bloco "Maquina de escrever do titulo"):
   frase viva e "fantasmas" empilhados na mesma celula. Aqui a frase fica
   presa no TOPO do espaco reservado, e nao centralizada na vertical — num
   titulo alinhado a esquerda, a linha de cima nao pode ficar subindo e
   descendo conforme a frase. */
.banner-titulo .hero-datilo {
  align-items: start;
}

/* ---------- Pilares (Competicao • Loja • ...) ---------- */

.banner-pilares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4em 1em;
  margin-top: 1.25rem;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(var(--foreground) / 0.85);
}

@media (min-width: 1024px) {
  .banner-pilares { justify-content: flex-start; }
}

/* O espacamento entre letras sobra DEPOIS da ultima letra de cada palavra;
   a margem negativa devolve essa sobra, e o "•" fica no meio certinho. */
.banner-pilares > span:not(.banner-pilares-sep) {
  white-space: nowrap;
  margin-right: -0.3em;
}

.banner-pilares-sep {
  color: hsl(var(--primary));
  letter-spacing: 0;
}

/* ---------- Botao ---------- */

/* Botoes do banner: a barra do servidor (jogadores online + Conectar) e,
   embaixo, o Explorar produtos. Lado a lado quando cabem. */
.banner-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 2rem;
}

.banner-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Lado a lado quando cabe; quando nao (a barra do servidor e larga), ela
   desce para baixo do Explorar em vez de invadir o podio. */
@media (min-width: 640px) {
  .banner-acoes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .banner-acoes { justify-content: flex-start; }
  .banner-acao { align-items: flex-start; }
}

.banner-acao .players-online { margin: 0; }
/* A nota quebra dentro da largura do botao acima dela (width 0 + min-width
   100%): mais larga que ele, empurrava o Conectar para longe. */
.banner-acao .banner-nota {
  width: 0;
  min-width: 100%;
  margin: 0;
}

/* Botoes do banner no MOLDE DO CARD DE PRODUTO (package-card.html): mesma
   caixa escura (#111113), mesma borda fina que clareia no hover, cantos de
   14px, e a mesma letra do "Comprar" (12px, negrito, caixa alta). A barra
   do servidor repete a placa de preco do card: borda na cor do tema e, a
   direita, o botao cheio igual ao "Comprar". Nada se move no hover alem
   dos icones; a resposta e a cor, como nos cards. */
.banner-grade .banner-botao,
.banner-servidor {
  display: inline-flex;
  align-items: center;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 14px;
  background: #111113;
  color: #fff;
  transition: border-color 0.2s ease;
}

.banner-grade .banner-botao {
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.banner-grade .banner-botao:hover { border-color: rgb(255 255 255 / 0.25); }

.banner-botao svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: hsl(var(--primary));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-botao-principal:hover svg { transform: translateY(3px); }

.banner-grade .banner-botao:focus-visible,
.banner-servidor:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

/* Barra do servidor = placa de preco do card: contagem a esquerda, botao
   cheio a direita. */
.banner-servidor {
  gap: 6px;
  padding: 6px;
  border-color: hsl(var(--primary) / 0.3);
}

.banner-servidor:hover { border-color: hsl(var(--primary) / 0.6); }

.servidor-online {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 10px;
  font-size: 13px;
  color: rgb(var(--muted-foreground));
  white-space: nowrap;
}

.servidor-online[hidden] { display: none; }

.servidor-online strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.servidor-ponto {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.18);
}

.servidor-conectar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  border-radius: 9px;
  background: hsl(var(--primary));
  /* Preto ou branco conforme a cor do tema (mesma conta do .bg-primary). */
  color: #fff;
  color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}

.servidor-conectar svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-servidor:hover .servidor-conectar { opacity: 0.9; }
.banner-servidor:hover .servidor-conectar svg { transform: translate(2px, -2px); }

/* No celular: so a contagem (o FiveM nao roda em telefone), sem ser link.
   Sem contagem (consulta falhou), a barra some. */
@media (max-width: 639px) {
  .servidor-conectar { display: none; }
  .banner-servidor { pointer-events: none; }
  .banner-servidor:has(.servidor-online[hidden]) { display: none; }
}@media (prefers-reduced-motion: reduce) {
  .banner-grade .banner-botao,
  .banner-botao svg,
  .servidor-conectar,
  .servidor-conectar svg { transition: none; }
}
/* ---------- Prova social ---------- */

.banner-prova {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .banner-prova { align-items: flex-start; }
}

/* O contador de jogadores tinha margem propria para o layout antigo. */
.banner-prova .players-online { margin: 0; }

.banner-prova-sep {
  margin: 0 4px;
  opacity: 0.5;
}

.banner-nota {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--muted-foreground));
}

.banner-nota-estrela {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
}

/* Celular: "Competicao • Loja • Recompensas • Comunidade" nao cabe numa linha.
   Quebrando, um "•" ficava solto no comeco da segunda linha — entao aqui os
   pontos saem e as palavras se distribuem sozinhas. */
@media (max-width: 639px) {
  .banner-pilares { gap: 0.5em 1.1em; letter-spacing: 0.22em; }
  .banner-pilares-sep { display: none; }
}

/* ---------- Podio (3D) ----------
   Os degraus sao blocos 3D de verdade: a frente e o proprio .degrau; a
   tampa e as duas laterais sao faces dobradas para tras (rotateX/rotateY
   a partir de uma aresta). O podio inteiro fica levemente inclinado para
   a tampa aparecer, e acompanha o mouse pelo banner (--mx/--my, que o
   main.js ja atualiza para a imagem de fundo).

   Cuidado ao mexer: opacity, filter ou overflow:hidden num elemento com
   transform-style: preserve-3d "achata" o 3D. Por isso a animacao de
   entrada fica no .banner-podio-palco, e nao no podio. */

.banner-podio-palco {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* ----- Estilhacos atras do podio -----
   O mesmo recurso das artes de fundo (as explosoes de lascas angulares atras
   dos personagens), nas cores do tema. Andam um pouco ao contrario do mouse:
   ficam "mais longe" que o podio, o que da profundidade.

   Ficam SO nas laterais (em volta do 2o e do 3o) e na altura dos avatares.
   A coluna do centro, acima do 1o lugar, fica livre de proposito: e ali que
   a arte do tema rosa tem o rosto do personagem, e as lascas o tampavam. */
.banner-estilhacos {
  position: absolute;
  inset: 0 -8% 20% -8%;
  z-index: 0;
  pointer-events: none;
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -22px), calc((var(--my, 0.5) - 0.5) * -12px));
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-estilhacos i {
  position: absolute;
  display: block;
}

/* Lado esquerdo, atras do 2o */
.banner-estilhacos i:nth-child(1) {
  left: 3%; top: 16%; width: 20%; height: 30%;
  background: linear-gradient(160deg, hsl(var(--primary)), hsl(var(--primary) / 0.5));
  clip-path: polygon(22% 0, 100% 16%, 68% 100%, 0 72%);
  opacity: 0.8;
}

/* Lado direito, atras do 3o */
.banner-estilhacos i:nth-child(2) {
  left: 76%; top: 24%; width: 21%; height: 28%;
  background: linear-gradient(200deg, hsl(var(--secondary)), hsl(var(--secondary) / 0.5));
  clip-path: polygon(0 30%, 86% 0, 100% 62%, 28% 100%);
  opacity: 0.75;
}

/* Entre o 2o e o 1o, embaixo (na altura das placas) */
.banner-estilhacos i:nth-child(3) {
  left: 19%; top: 44%; width: 12%; height: 20%;
  background: hsl(var(--primary) / 0.5);
  clip-path: polygon(36% 0, 100% 42%, 58% 100%, 0 54%);
}

/* Entre o 1o e o 3o, embaixo */
.banner-estilhacos i:nth-child(4) {
  left: 69%; top: 48%; width: 12%; height: 20%;
  background: hsl(var(--secondary) / 0.5);
  clip-path: polygon(0 0, 100% 34%, 56% 100%, 12% 58%);
}

/* Lasca clara: as artes tem sempre uma ou outra lasca creme/branca. */
.banner-estilhacos i:nth-child(5) {
  left: 0; top: 50%; width: 7%; height: 12%;
  background: #f4ead8;
  clip-path: polygon(0 22%, 100% 0, 78% 100%);
  opacity: 0.35;
}

.banner-estilhacos i:nth-child(6) {
  left: 90%; top: 12%; width: 7%; height: 13%;
  background: hsl(var(--primary));
  clip-path: polygon(0 0, 100% 30%, 42% 100%);
  opacity: 0.65;
}

.banner-podio {
  --prof: 60px;  /* profundidade dos blocos */
  --incl: 16deg; /* inclinacao de base: quanto da tampa aparece */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.14fr 1fr;
  align-items: end;
  gap: 14px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(calc(var(--incl) + (var(--my, 0.5) - 0.5) * -6deg))
    rotateY(calc((var(--mx, 0.5) - 0.5) * 16deg));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* O chao: sombra de contato escura bem junto da base, e em volta uma poca
   de luz quente na cor do tema — os blocos "pousam" no chao. */
.banner-podio::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -26px;
  height: 52px;
  background:
    radial-gradient(closest-side, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.35) 55%, transparent),
    radial-gradient(closest-side, hsl(var(--primary) / 0.22), transparent);
  background-size: 92% 70%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  pointer-events: none;
  /* Um pouco para tras: no mesmo plano da frente dos degraus ela seria
     pintada por cima da base deles. */
  transform: translateZ(-2px);
}

.banner-podio-lugar {
  --medalha: #f2c54b;
  --medalha-escura: #7a5a12;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  transform-style: preserve-3d;
}

/* Area de "passar o mouse": FIXA e invisivel, um pouco maior que o lugar
   (sobe ate cobrir a coroa). As pecas que se mexem no hover (figura, numero,
   degrau) nao sentem o mouse (pointer-events: none).
   Sem isso a animacao tremia: com o mouse na beirada de uma peca, o hover
   ligava, a peca subia e saia de baixo do mouse, o hover desligava, a peca
   voltava para baixo do mouse... em loop. Com a area parada, o hover so muda
   quando o MOUSE muda de lugar. */
.banner-podio-lugar::before {
  content: '';
  position: absolute;
  inset: -34px -6px 0 -6px;
}

.banner-podio-lugar > * {
  pointer-events: none;
}



/* Ordem na tela: 2 - 1 - 3 (no HTML e 1, 2, 3). */
.banner-podio-1 { order: 2; }
.banner-podio-2 { order: 1; --medalha: #d9dde3; --medalha-escura: #5b616a; }
.banner-podio-3 { order: 3; --medalha: #d9a276; --medalha-escura: #6e4424; }

/* A figura (coroa + avatar + placas): e ela que sobe e vem para frente ao
   passar o mouse. */
.banner-podio-figura {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  /* Desfaz a inclinacao do podio so na figura: ela fica "em pe" de frente
     para quem olha, como um cartaz sobre o degrau, e nao deitada para tras. */
  transform-origin: bottom center;
  transform: rotateX(calc(var(--incl) * -1));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-podio-coroa {
  position: relative;
  z-index: 2;
  margin-bottom: -10px;
  color: var(--medalha);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-podio-coroa svg {
  width: 30px;
  height: 30px;
  fill: color-mix(in srgb, var(--medalha) 22%, transparent);
  transition: fill 0.3s ease;
}

.banner-podio-1 .banner-podio-coroa svg { width: 42px; height: 42px; }

/* ----- Materiais: estilo das artes de fundo -----
   As artes do banner sao ilustracao pintada: luz quente vindo de cima,
   contorno escuro nas formas, metal com reflexo forte. O podio segue isso:
   pedra escura puxada para o quente (nao preto digital), com grao; metal
   pintado nos numeros e anéis; contorno escuro fino em tudo. */
.banner-podio {
  /* Grao de pedra: ruido gerado por SVG embutido (nenhum download). */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --contorno: rgb(10 8 7 / 0.9);
}

/* Avatar: anel de metal pintado (o reflexo corre pela volta), contorno
   escuro, miolo afundado. Sem foto na loja, o miolo mostra a inicial. */
.banner-podio-avatar {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--medalha-escura),
    #fff 12%,
    var(--medalha) 24%,
    var(--medalha-escura) 50%,
    var(--medalha) 72%,
    #fff 82%,
    var(--medalha-escura)
  );
  box-shadow:
    0 0 0 1.5px var(--contorno),
    0 12px 20px -10px rgb(0 0 0 / 0.85);
  transition: box-shadow 0.45s ease;
}

.banner-podio-1 .banner-podio-avatar {
  width: 132px;
  height: 132px;
  box-shadow:
    0 0 0 1.5px var(--contorno),
    0 12px 20px -10px rgb(0 0 0 / 0.85),
    0 0 36px -10px hsl(var(--primary) / 0.7);
}

.banner-podio-avatar > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 3px solid #0d0b0a;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2d2724, #121010 70%);
  box-shadow: inset 0 6px 14px rgb(0 0 0 / 0.6);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--medalha);
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.55);
}

.banner-podio-1 .banner-podio-avatar > span { font-size: 52px; }

/* Placas: nome (com trofeu) e, embaixo, o valor. Chapa escura com leve
   relevo (fio claro em cima, sombra embaixo). */
.banner-podio-nome,
.banner-podio-valor {
  position: relative;
  z-index: 2;
  max-width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #24201e, #110f0e);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 6px 12px -6px rgb(0 0 0 / 0.85);
  white-space: nowrap;
}

.banner-podio-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -14px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--medalha) 50%, #000);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: border-color 0.3s ease;
}

.banner-podio-nome svg {
  width: 16px;
  height: 16px;
  color: var(--medalha);
}

.banner-podio-nome .truncate { max-width: 120px; }

.banner-podio-valor {
  margin-top: 4px;
  padding: 4px 12px;
  border: 1px solid var(--contorno);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--foreground) / 0.92);
}

/* ----- O bloco: pedra pintada -----
   Luz principal de cima e da direita (como nas artes): a frente clareia
   para a direita e para cima, escurece na base (onde encosta no chao); a
   tampa e a face mais clara; a lateral esquerda fica na sombra. */
.banner-podio-degrau {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 150px;
  margin-top: 14px;
  border: 1px solid var(--contorno);
  border-bottom: 0;
  background:
    var(--grao),
    linear-gradient(90deg, rgb(0 0 0 / 0.32), transparent 38%, rgb(255 236 214 / 0.05) 78%, rgb(255 236 214 / 0.09)),
    linear-gradient(180deg, #2f2926 0%, #1d1917 45%, #100e0d 100%);
  box-shadow:
    inset 0 -28px 26px -14px rgb(0 0 0 / 0.65),
    inset -1px 0 0 hsl(var(--primary) / 0.28);
  transform-style: preserve-3d;
}

.banner-podio-1 .banner-podio-degrau { height: 205px; }
.banner-podio-3 .banner-podio-degrau { height: 125px; }

/* Luz que acende na frente ao passar o mouse. */
.banner-podio-degrau::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medalha) 18%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Quina de cima pegando luz: um brilho de borda, como a luz de recorte
   que contorna os personagens nas artes. */
.banner-podio-degrau::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--medalha);
  box-shadow: 0 0 8px 0 color-mix(in srgb, var(--medalha) 50%, transparent);
  transition: box-shadow 0.4s ease;
}

.banner-podio-1 .banner-podio-degrau::after {
  background: hsl(var(--primary));
  box-shadow: 0 0 12px 0 hsl(var(--primary) / 0.6);
}

/* As faces que dobram para tras. */
/* Sem backface-visibility: hidden — dobradas a partir da aresta, as faces
   ficam com o lado "da frente" virado para dentro do bloco, e escondendo o
   verso elas sumiam. O que fica atras da frente o proprio 3D ja esconde. */
.banner-podio-face {
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--contorno);
}

/* Tampa: parte da aresta de cima e deita para tras. A face mais clara. */
.banner-podio-face-topo {
  top: -1px;
  left: -1px;
  right: -1px;
  height: var(--prof);
  transform-origin: top center;
  transform: rotateX(-90deg);
  background:
    var(--grao),
    linear-gradient(0deg, #4a413c, #332c28);
}

/* Laterais: partem das arestas dos lados e dobram para tras. A da esquerda
   fica na sombra; a da direita pega um pouco da luz. */
.banner-podio-face-esq,
.banner-podio-face-dir {
  top: -1px;
  bottom: 0;
  width: var(--prof);
}

.banner-podio-face-esq {
  left: -1px;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: var(--grao), linear-gradient(180deg, #16120f, #0a0807);
}

.banner-podio-face-dir {
  right: -1px;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background: var(--grao), linear-gradient(180deg, #2b2522, #171412);
}

/* Numero em metal pintado: reflexo forte no alto, corpo na cor da medalha,
   rebatida clara embaixo, contorno escuro e sombra dura — como as partes de
   metal da arma na arte do banner. */
.banner-podio-numero {
  display: inline-block;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #fff 14%,
    var(--medalha) 30%,
    var(--medalha-escura) 64%,
    var(--medalha) 88%,
    color-mix(in srgb, var(--medalha) 40%, #fff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--contorno);
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / 0.55));
  transform: translateZ(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-podio-1 .banner-podio-numero { font-size: 96px; }
.banner-podio-3 .banner-podio-numero { font-size: 60px; }

.banner-podio-louro {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--medalha);
  opacity: 0.75;
  transition: opacity 0.4s ease;
}

.banner-podio-1 .banner-podio-louro { width: 46px; height: 46px; }
.banner-podio-louro-dir { transform: scaleX(-1); }

/* Segunda protecao: ao SAIR do hover, espera 0,12s antes de desfazer (as
   regras de :hover mais abaixo zeram a espera, entao ENTRAR e na hora).
   Se o mouse "escapa" por um instante e volta — tremida da mao, beirada do
   lugar — a animacao nem comeca a voltar, e nao ha o que piscar. */
.banner-podio-figura,
.banner-podio-coroa,
.banner-podio-coroa svg,
.banner-podio-avatar,
.banner-podio-nome,
.banner-podio-numero,
.banner-podio-louro,
.banner-podio-degrau::before,
.banner-podio-degrau::after {
  transition-delay: 0.12s;
}

@media (hover: hover) {
  .banner-podio-lugar:hover .banner-podio-figura,
  .banner-podio-lugar:hover .banner-podio-coroa,
  .banner-podio-lugar:hover .banner-podio-coroa svg,
  .banner-podio-lugar:hover .banner-podio-avatar,
  .banner-podio-lugar:hover .banner-podio-nome,
  .banner-podio-lugar:hover .banner-podio-numero,
  .banner-podio-lugar:hover .banner-podio-louro,
  .banner-podio-lugar:hover .banner-podio-degrau::before,
  .banner-podio-lugar:hover .banner-podio-degrau::after {
    transition-delay: 0s;
  }
}

/* ----- Ao passar o mouse num lugar ----- */

@media (hover: hover) {
  .banner-podio-lugar:hover .banner-podio-figura {
    transform: translateY(-12px) translateZ(34px) rotateX(calc(var(--incl) * -1));
  }

  .banner-podio-lugar:hover .banner-podio-coroa {
    transform: translateY(-4px) rotate(-10deg) scale(1.1);
  }

  .banner-podio-lugar:hover .banner-podio-coroa svg {
    fill: color-mix(in srgb, var(--medalha) 45%, transparent);
  }

  .banner-podio-lugar:hover .banner-podio-avatar {
    box-shadow:
      0 0 0 1.5px var(--contorno),
      0 0 0 6px color-mix(in srgb, var(--medalha) 16%, transparent),
      0 18px 36px -14px color-mix(in srgb, var(--medalha) 75%, transparent);
  }

  .banner-podio-lugar:hover .banner-podio-nome {
    border-color: var(--medalha);
  }

  .banner-podio-lugar:hover .banner-podio-degrau::before { opacity: 1; }

  .banner-podio-lugar:hover .banner-podio-degrau::after {
    box-shadow: 0 0 22px 2px color-mix(in srgb, var(--medalha) 70%, transparent);
  }

  .banner-podio-1:hover .banner-podio-degrau::after {
    box-shadow: 0 0 26px 3px hsl(var(--primary) / 0.7);
  }

  .banner-podio-lugar:hover .banner-podio-numero {
    transform: translateZ(22px) scale(1.06);
  }

  .banner-podio-lugar:hover .banner-podio-louro { opacity: 1; }
}

/* Sem movimento: podio parado na inclinacao de base, sem seguir o mouse. */
@media (prefers-reduced-motion: reduce) {
  .banner-podio {
    transform: perspective(1100px) rotateX(var(--incl));
    transition: none;
  }
}

:root[data-menos-animacao='sim'] .banner-podio {
  transform: perspective(1100px) rotateX(var(--incl));
}

:root[data-menos-animacao='sim'] .banner-estilhacos { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .banner-estilhacos { transform: none; transition: none; }
}

/* Celular: tudo menor, para os tres caberem lado a lado em 375px. */
@media (max-width: 639px) {
  .banner-podio { --prof: 36px; gap: 8px; max-width: 390px; }
  .banner-podio-coroa svg { width: 22px; height: 22px; }
  .banner-podio-1 .banner-podio-coroa svg { width: 30px; height: 30px; }
  .banner-podio-coroa { margin-bottom: -7px; }
  .banner-podio-avatar { width: 64px; height: 64px; padding: 3px; border-width: 2px; }
  .banner-podio-1 .banner-podio-avatar { width: 84px; height: 84px; }
  .banner-podio-avatar > span { font-size: 24px; }
  .banner-podio-1 .banner-podio-avatar > span { font-size: 32px; }
  .banner-podio-nome { margin-top: -10px; padding: 4px 7px; gap: 4px; font-size: 12px; }
  .banner-podio-nome svg { width: 12px; height: 12px; }
  .banner-podio-nome .truncate { max-width: 70px; }
  .banner-podio-valor { padding: 3px 7px; font-size: 11px; }
  .banner-podio-degrau { height: 92px; margin-top: 10px; gap: 2px; }
  .banner-podio-1 .banner-podio-degrau { height: 126px; }
  .banner-podio-3 .banner-podio-degrau { height: 78px; }
  .banner-podio-numero { font-size: 40px; }
  .banner-podio-1 .banner-podio-numero { font-size: 58px; }
  .banner-podio-3 .banner-podio-numero { font-size: 36px; }
  .banner-podio-louro { width: 18px; height: 18px; }
  .banner-podio-1 .banner-podio-louro { width: 24px; height: 24px; }
}

/* ===== Podio do cabecalho x podio do banner =====
   Na pagina inicial, enquanto o podio grande do banner esta na tela, o
   pequeno do cabecalho se esconde (seria o mesmo conteudo duas vezes).
   Quando a pessoa rola e o do banner sai de vista, o do cabecalho volta.
   Quem liga e desliga e o main.js (bloco "Podio do cabecalho"), marcando
   data-podio-fora no <html>.

   Sumir com opacity/visibility, e nao display:none: o lugar dele continua
   reservado, entao a busca e os botoes do cabecalho nao andam para os lados.
   O :has faz a pagina ja NASCER com ele escondido (sem piscar antes do
   script rodar); navegador sem :has simplesmente mostra os dois. */
.top-donators-pill {
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.35s;
}

:root:has(.banner-podio):not([data-podio-fora]) .top-donators-pill {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .top-donators-pill { transition: none; }
}

/* ===== Brinde: aba na borda direita =====
   Espelho da aba do cupom (borda esquerda, core.css): mesma forma, do outro
   lado — mas cheia de cor, para chamar mais atencao. No canto de baixo ela cobria a barra de pagamentos
   do banner na primeira tela; aqui nao cobre nada. O cartao do QR abre a
   esquerda da aba. */
.brinde {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 44;
  display: flex;
  align-items: center;
  /* O brinde mora dentro do bloco "space-y-6" da pagina inicial, que da
     24px de margem em cima a cada item — e margem empurra ate elemento fixo.
     Sem zerar, a aba ficava 24px mais baixa que a do cupom (que mora fora
     desse bloco). !important porque a regra do Tailwind e mais especifica. */
  margin: 0 !important;
}

/* A aba e CHEIA na cor do tema (a do cupom e translucida): e o convite da
   pagina, precisa se destacar. Texto e icone em preto ou branco, pela mesma
   conta do .bg-primary do layout.html. */
.brinde-botao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 38px;
  padding: 14px 0;
  border: 1px solid rgb(0 0 0 / 0.35);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: hsl(var(--primary));
  color: #fff;
  color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 10px 30px -10px rgb(0 0 0 / 0.9);
  transition: width 0.18s ease, filter 0.18s ease;
  /* A MESMA animacao da aba do cupom (core.css, cupom-espia), espelhada:
     "espia" para fora duas vezes ao abrir a pagina e para. Mesmo tempo,
     mesmo atraso — as duas abas espiam juntas. */
  animation: brinde-espia 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s 2 both;
}

.brinde-botao[aria-expanded='true'] {
  width: 42px;
  filter: brightness(1.08);
}

.brinde-botao:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

/* Pontinho de "novidade" no canto — parado, sem piscar. Some depois que a
   pessoa abre o cartao (o main.js marca data-visto). */
.brinde-botao::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 11px;
  height: 11px;
  border: 2px solid rgb(var(--background));
  border-radius: 50%;
  background: #fff;
}

.brinde-botao[data-visto]::before { display: none; }

/* "BRINDE" em pe, lido de baixo para cima: diz o que a aba e sem ocupar
   largura. */
.brinde-botao span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brinde-botao svg {
  width: 18px;
  height: 18px;
}

@keyframes brinde-espia {
  0%, 100% { translate: 0 0; }
  45% { translate: -10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brinde-botao { animation: none; }
}

/* O cartao do brinde: o mesmo molde do painel do cupom (core.css), espelhado.
   Fica NO FLUXO da aba (nao flutuando): colado na borda direita da tela,
   e a aba passa para o lado esquerdo dele quando abre (order 2 contra 1).
   Vertical, estreito e centralizado, para cobrir pouco a pagina. */
.brinde-botao { order: 1; }

.brinde-cartao {
  order: 2;
  width: 168px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 12px 14px;
  border: 1px solid rgb(var(--foreground) / 0.12);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: rgb(var(--background) / 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.9);
  text-align: center;
  /* Mesmo fade do cupom (keyframes cupom-aparece, no core.css). */
  animation: cupom-aparece 0.2s ease forwards;
}

.brinde-cartao[hidden] { display: none; }

/* Chapeu: icone em cima, "Brinde" embaixo — como "Cupom disponivel". */
.brinde-cartao-chapeu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}

.brinde-cartao-chapeu svg { width: 20px; height: 20px; }

.brinde-cartao-titulo {
  margin: 0;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brinde-cartao-sub {
  margin: 8px 0 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgb(var(--muted-foreground));
}

.brinde-cartao-qr {
  padding: 6px;
  border-radius: var(--radius);
  background: #fff;
}

/* Botao do video: cheio na cor do tema, como o "Explorar produtos". */
.brinde-cartao-video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 6px;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  color: #fff;
  color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: filter 0.18s ease;
}

.brinde-cartao-video:hover { filter: brightness(1.08); }

.brinde-cartao-video svg { width: 14px; height: 14px; flex: none; }

/* Celular: como a aba do cupom, desce para perto do rodape da tela (no meio
   ela cairia em cima do botao do banner). Fica acima do voltar-ao-topo. */
@media (max-width: 639px) {
  .brinde {
    top: auto;
    bottom: 76px;
    transform: none;
  }

  .brinde-cartao { max-height: calc(100vh - 100px); }
}

/* Fundo: marcas de mira (a logo da PLF e uma mira) soltas, sem grade, no
   lugar do quadriculado. Ao rolar andam mais devagar que a pagina; perto do
   mouse acendem na cor do tema (.grid-luz, main.js). */
.grid-background {
  /* Tres camadas de marcas espalhadas ao acaso, de 360, 480 e 720px. Com
     tamanhos diferentes elas so voltam a coincidir a cada 1440px, entao o
     fundo nao forma mais uma grade que se repete. Geradas com semente fixa
     (sempre o mesmo desenho). */
  --marcas:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath stroke-opacity='0.8' d='M180.5 189.9h6.8M183.8 186.6v6.8'/%3E%3Cpath stroke-opacity='0.9' d='M290.5 192.6h11.8M296.5 186.7v11.8'/%3E%3Cpath stroke-opacity='0.5' d='M35.5 190.1h10.2M40.6 185v10.2'/%3E%3Cpath stroke-opacity='0.8' d='M168.9 294h9M173.4 289.5v9'/%3E%3Cpath stroke-opacity='0.5' d='M153.4 229V236.5H145.9'/%3E%3Cpath stroke-opacity='0.5' d='M237.5 67.4h5.5M240.3 64.6v5.5'/%3E%3Cpath stroke-opacity='0.7' d='M73.3 112.2V105.7H66.7'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle fill-opacity='0.9' cx='145.4' cy='139.2' r='0.8'/%3E%3Ccircle fill-opacity='0.5' cx='281.4' cy='269.2' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 360px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle stroke-opacity='0.9' cx='55.9' cy='44.9' r='4.3'/%3E%3Ccircle stroke-opacity='0.8' cx='299.7' cy='152.1' r='4.1'/%3E%3Cpath stroke-opacity='0.6' d='M155.8 110.9h9.2M160.4 106.2v9.2'/%3E%3Ccircle stroke-opacity='0.6' cx='160.4' cy='110.9' r='8.7'/%3E%3Cpath stroke-opacity='1' d='M245.5 437.5V445H252.9'/%3E%3Cpath stroke-opacity='0.9' d='M384.2 18h6.4M387.4 14.8v6.4'/%3E%3Cpath stroke-opacity='0.9' d='M331.3 108.3h6.1M334.3 105.3v6.1'/%3E%3Cpath stroke-opacity='0.9' d='M47.4 459.4h11.1M53 453.9v11.1'/%3E%3Ccircle stroke-opacity='0.9' cx='53' cy='459.4' r='8.6'/%3E%3Cpath stroke-opacity='0.6' d='M215.8 310.2h5.4M218.5 307.5v5.4'/%3E%3Cpath stroke-opacity='0.6' d='M454.7 110.3h9.5M459.5 105.5v9.5'/%3E%3Cpath stroke-opacity='0.8' d='M390.6 118h11.6M396.4 112.3v11.6'/%3E%3Cpath stroke-opacity='0.6' d='M95.9 368h8.7M100.2 363.6v8.7'/%3E%3Ccircle stroke-opacity='0.6' cx='100.2' cy='368' r='8.8'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle fill-opacity='0.7' cx='393.4' cy='227.5' r='1.2'/%3E%3Ccircle fill-opacity='0.6' cx='181.8' cy='243.9' r='0.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 480px 480px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath stroke-opacity='0.7' d='M27.6 525.7h9.2M32.2 521v9.2'/%3E%3Ccircle stroke-opacity='0.7' cx='32.2' cy='525.7' r='8.5'/%3E%3Ccircle stroke-opacity='0.8' cx='151' cy='421.1' r='3'/%3E%3Cpath stroke-opacity='0.5' d='M131.1 677.2h10.1M136.2 672.1v10.1'/%3E%3Cpath stroke-opacity='0.9' d='M429 570.5V564.1H422.6'/%3E%3Cpath stroke-opacity='0.6' d='M164.5 529.3h7.3M168.1 525.7v7.3'/%3E%3Cpath stroke-opacity='0.6' d='M654.9 630.6V624.8H649.1'/%3E%3Cpath stroke-opacity='1' d='M674.3 171.2h10M679.3 166.2v10'/%3E%3Cpath stroke-opacity='0.5' d='M85.9 342.3h6.9M89.3 338.9v6.9'/%3E%3Cpath stroke-opacity='0.6' d='M117.9 470.6h8M121.9 466.6v8'/%3E%3Cpath stroke-opacity='0.7' d='M219.4 535.6h11.8M225.3 529.7v11.8'/%3E%3Cpath stroke-opacity='0.7' d='M230.3 482.5V474.7H222.4'/%3E%3Cpath stroke-opacity='0.5' d='M338.5 414.9h7M342 411.4v7'/%3E%3Cpath stroke-opacity='0.9' d='M258.2 376.5h9.7M263 371.7v9.7'/%3E%3Cpath stroke-opacity='0.7' d='M641.3 102.6h10.6M646.6 97.4v10.6'/%3E%3Ccircle stroke-opacity='0.7' cx='646.6' cy='102.6' r='9.2'/%3E%3Cpath stroke-opacity='0.6' d='M490.6 232.9h11.1M496.2 227.4v11.1'/%3E%3Cpath stroke-opacity='0.6' d='M602.7 136.6h5.5M605.5 133.9v5.5'/%3E%3Cpath stroke-opacity='0.6' d='M25.1 406.2h8.7M29.4 401.9v8.7'/%3E%3Cpath stroke-opacity='0.6' d='M44.1 219.6h9.6M48.9 214.8v9.6'/%3E%3Cpath stroke-opacity='0.6' d='M222.4 630.5h10.1M227.5 625.4v10.1'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle fill-opacity='0.7' cx='371.3' cy='704' r='1.3'/%3E%3Ccircle fill-opacity='0.6' cx='456.2' cy='357.5' r='1.3'/%3E%3Ccircle fill-opacity='0.9' cx='685.7' cy='262.5' r='0.8'/%3E%3Ccircle fill-opacity='0.7' cx='103.5' cy='642' r='1'/%3E%3Ccircle fill-opacity='0.5' cx='699.6' cy='639.6' r='0.9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 720px 720px;
  position: relative;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 30%, #000 30%, rgb(0 0 0 / 0.3) 100%);
}

.grid-background::before,
.grid-luz {
  content: '';
  position: absolute;
  inset: 0 0 -1440px;
  -webkit-mask: var(--marcas);
  mask: var(--marcas);
  transform: translate3d(0, var(--fundo-y, 0px), 0);
  pointer-events: none;
}

.grid-background::before {
  background: rgb(255 255 255 / 0.075);
}

.grid-luz {
  background: radial-gradient(circle 190px at var(--luz-x, -999px) var(--luz-y, -999px), hsl(var(--primary) / 0.85), transparent 75%);
}

/* Foto de perfil do doador por cima da inicial (a inicial so aparece se a
   conta nao tiver foto ou se ela falhar). */
.banner-podio-avatar > span { position: relative; overflow: hidden; }
.banner-podio-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* ===== Animacao presa a rolagem (banner -> numeros da loja) =====
   Enquanto a pessoa desce, o banner sai em camadas (a arte fica para tras
   mais devagar, o texto sobe e apaga, o podio recua) e os cartoes de
   numeros sobem um a um, inclinados, ate se encaixar. Tudo preso a rolagem
   (animation-timeline), nao a tempo: parou de rolar, parou a animacao;
   voltou, ela volta. Usa translate/scale/opacity separados para nao brigar
   com o transform que o banner ja usa para seguir o mouse. Navegador sem
   suporte, "Reduzir animacoes" ou prefers-reduced-motion: tudo parado. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-hero] { view-timeline: --banner block; }

    :root:not([data-menos-animacao='sim']) [data-hero] .fundo-tema {
      animation: banner-arte-sai linear both;
      animation-timeline: --banner;
      animation-range: exit 0% exit 100%;
    }

    :root:not([data-menos-animacao='sim']) [data-hero] .banner-texto {
      animation: banner-texto-sai linear both;
      animation-timeline: --banner;
      animation-range: exit 0% exit 80%;
    }

    :root:not([data-menos-animacao='sim']) [data-hero] .banner-podio-palco {
      animation: banner-podio-sai linear both;
      animation-timeline: --banner;
      animation-range: exit 0% exit 90%;
    }

    :root:not([data-menos-animacao='sim']) .numero-card {
      animation: numero-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* Um depois do outro: cada cartao comeca um pouco mais tarde. */
    :root:not([data-menos-animacao='sim']) .numero-card:nth-child(2) { animation-range: entry 12% cover 34%; }
    :root:not([data-menos-animacao='sim']) .numero-card:nth-child(3) { animation-range: entry 24% cover 38%; }
    :root:not([data-menos-animacao='sim']) .numero-card:nth-child(4) { animation-range: entry 36% cover 42%; }

    :root:not([data-menos-animacao='sim']) .numero-card .numero-icone {
      animation: numero-icone-entra linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 40%;
    }
  }
}

@keyframes banner-arte-sai {
  to { translate: 0 18%; scale: 1.06; }
}

@keyframes banner-texto-sai {
  to { translate: 0 -70px; opacity: 0; }
}

@keyframes banner-podio-sai {
  to { translate: 0 -40px; scale: 0.9; opacity: 0.2; }
}

@keyframes numero-entra {
  from {
    opacity: 0;
    translate: 0 80px;
    transform: perspective(900px) rotateX(28deg);
  }
  to {
    opacity: 1;
    translate: 0 0;
    transform: perspective(900px) rotateX(0deg);
  }
}

@keyframes numero-icone-entra {
  from { scale: 0.4; rotate: -40deg; opacity: 0; }
  to { scale: 1; rotate: 0deg; opacity: 1; }
}