/* Banners do designer na página "O Jogo" (15/10, pedido do dono).
   Topo: a arte "Venha você também explorar o nosso universo" no lugar do título, do texto e das duas treinadoras.
   Cartão "4 gerações": a arte "4 gerações inteiras para você capturar!" no lugar do texto e do botão, com o mesmo raio de canto.
   As artes já têm o texto: título e texto ficam só para leitor de tela e buscadores. Escala sempre proporcional (1920x600 = 3,2:1). */
body[data-page="o-jogo"] .banner--arte {
  display: block;
  min-height: 0;
  padding: 0;
  background: #070b1e;
}
body[data-page="o-jogo"] .banner--arte::before,
body[data-page="o-jogo"] .banner--arte::after { display: none; }
/* v2 (15/10 12:54, dono: "cabeçalho ficou muito grande... enxergar ao menos o final da Pokébola do logo"):
   o topo mostra a arte em 1920:541, recortando só o que não tem conteúdo — medido nos pixels da arte (1920x600):
   o boné da treinadora começa em y=37 e a ponta do selo "Pokeworld Universe" (abaixo da faixa amarela) termina em y=573,
   então cortam-se 34 px em cima e 25 embaixo (object-position 57,6% = 34/59). Mais que isso cortaria o boné ou o selo. */
body[data-page="o-jogo"] .banner__arte { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 541; object-fit: cover; object-position: 50% 57.6%; }
/* e a seção logo abaixo ("O que é o Pokeworld Universe") começa mais perto do topo: 3rem em vez de 9rem */
body[data-page="o-jogo"] .banner--arte + .sub > .sec:first-child { padding-top: 3rem; }
/* v2 (15/10 13:02, dono: "tá muito pequeno esse logo comparado à parte branca, aumenta ele para ficar harmônico"):
   no computador (2 colunas) o logo vai de 42rem para 54rem (+28,6%; arte de 1920 px, sem esticar) e sobe até 7,6rem, só sobre a
   margem transparente do PNG: o brilho da coroa fica a 16 px ou mais do banner mesmo com o logo flutuando (+5/-7 px)
   (por isso o max(): em telas menores ele sobe um pouco menos) e o fim da bola continua na primeira tela em 1920x945.
   Embaixo, 2rem a mais para a sombra não chegar perto do cartão das 4 gerações.
   No celular o logo já ocupa a largura útil (100% da coluna) e não muda. */
@media (min-width: 901px) {
  body[data-page="o-jogo"] .intro__art--brand { align-self: start; margin-top: max(-7.6rem, calc(24px - 10.236rem)); margin-bottom: 2rem; }
  body[data-page="o-jogo"] .intro__art--brand .intro__logo { width: min(100%, 54rem); }
}
body[data-page="o-jogo"] .banner--arte .banner__inner {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body[data-page="o-jogo"] .geracoes--arte { display: block; padding: 0; aspect-ratio: 1920 / 600; background: #0d1330; }
body[data-page="o-jogo"] .geracoes--arte::before,
body[data-page="o-jogo"] .geracoes--arte::after { display: none; }
body[data-page="o-jogo"] .geracoes--arte .geracoes__arte { display: block; width: 100%; height: 100%; object-fit: cover; }