/* Catálogo de jogos (/jogos). Grade de cards 16:9 no estilo CAPI — reusa as vars
   e a base .card do site público (css/capikids_public.css). */

.jogos-intro {
  text-align: center;
  font-family: var(--font-display);
  color: var(--ink-2);
  margin: -.4rem 0 1.4rem;
}

/* Mesma mecânica de .grid--cards: a grade cede e ganha coluna sozinha. Dá as
   mesmas 4 por linha de antes no desktop de 1160px (3 em 1100, 2 em 820, 1 em
   560) e sobe junto com os degraus de --wrap-wide em monitor grande, em vez de
   inflar o card. */
.grid--jogos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
@media (max-width: 1000px) { .grid--jogos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--jogos { grid-template-columns: 1fr; } }

/* Capi Pontos em destaque: o painel de raios das homes, com a cena num porta-retrato largo no alto
   e o texto centrado embaixo; o brilho fica atrás do texto. */
.jogo-painel { grid-template-columns: 1fr; text-align: center; gap: clamp(1.2rem, 3vw, 2rem);
  padding-bottom: clamp(3.2rem, 6vw, 4.6rem); margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  background:
    url("/images/hero/nuvens-faixa.svg") left bottom / 360px 75px repeat-x,
    url("/images/hero/confete.svg") left top / 480px 160px repeat-x,
    radial-gradient(ellipse 45% 40% at 50% 72%, #fffbe8 0, rgba(255, 251, 232, 0) 100%),
    repeating-conic-gradient(from -90deg at 50% 72%, #b9e4f7 0 7.5deg, #e4f5fc 7.5deg 15deg, #ffe08a 15deg 22.5deg); }
.jogo-painel__arte { position: relative; z-index: 1; display: block; width: min(880px, 100%); margin-inline: auto; border: 6px solid #fff;
  border-radius: var(--r-lg); overflow: hidden; transform: rotate(-1deg); box-shadow: 0 18px 32px rgba(20, 60, 90, .24); transition: transform .2s; }
.jogo-painel__arte:hover { transform: rotate(0deg) scale(1.01); }
.jogo-painel__arte img { display: block; width: 100%; height: auto; }
.jogo-painel .hero__copy { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; }
.jogo-painel .hero__lead { max-width: none; margin-inline: auto; }
.jogo-painel .hero__cta { justify-content: center; }
.jogo-painel .hero__cta .btn--verde { background: var(--nav-grad); color: #fff; } /* verde do app, não o acento do mundo */
@media (max-width: 600px) { .jogo-painel__arte--familia img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 22% center; } } /* no celular: a Bella no quadro e o Lucca */
@media (prefers-reduced-motion: reduce) { .jogo-painel__arte, .jogo-painel__arte:hover { transform: none; } }
.jogos-outros { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); color: var(--ink);
  margin: clamp(1rem, 3vw, 2rem) 0 1rem; }

/* Card do jogo: capa 16:9 grande + corpo. */
.card--jogo { display: flex; flex-direction: column; overflow: hidden; }
.card--jogo .card__media.jogo-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, #fff),
    color-mix(in srgb, var(--accent-2) 26%, #fff));
}
.card--jogo .jogo-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder (sem capa oficial ainda): ícone grande tingido pelo acento. */
.jogo-cover__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(2.6rem, 7vw, 4rem);
  color: color-mix(in srgb, var(--accent) 62%, #fff);
  filter: drop-shadow(0 6px 10px rgba(49, 48, 82, .18));
}

/* Véu que escurece a capa no hover, por baixo do play. */
.card--jogo .jogo-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(49, 48, 82, .34);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.card--jogo:hover .jogo-cover::after { opacity: 1; }

/* Botão play: escondido no estado normal, aparece no centro ao passar o mouse. */
.jogo-play {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 3.2rem; height: 3.2rem; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink, #fff);
  box-shadow: var(--shadow);
  opacity: 0; transform: translate(-50%, -50%) scale(.8);
  transition: opacity .2s ease, transform .2s ease;
}
.card--jogo:hover .jogo-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Sem mouse (toque) não existe hover: o play fica sempre visível. */
@media (hover: none) {
  .jogo-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jogo-play, .card--jogo .jogo-cover::after { transition: none; }
  .card--jogo:hover .jogo-play { transform: translate(-50%, -50%) scale(1); }
}

/* Badge "Assinantes": ocupa o lugar do play nos jogos do clube. Ao contrário do
   play, fica SEMPRE visível — é informação, não affordance de hover. */
.jogo-assinantes {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .92rem;
  background: var(--amber); color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.card--jogo:hover .jogo-assinantes { transform: translate(-50%, -50%) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .jogo-assinantes { transition: none; }
  .card--jogo:hover .jogo-assinantes { transform: translate(-50%, -50%); }
}

/* Selo "Em breve" / "Em manutenção". */
.jogo-soon {
  position: absolute; left: .7rem; top: .7rem;
  padding: .28rem .7rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .82rem;
  background: rgba(49, 48, 82, .72); color: #fff;
  backdrop-filter: blur(2px);
}

/* Card travado (não jogável). */
.card--jogo.is-soon { cursor: default; }
.card--jogo.is-soon .jogo-cover__ph { opacity: .7; }
.card--jogo.is-soon:hover { transform: none; }

/* Título do card: centralizado e 15% maior que o padrão (1.02rem). */
.card--jogo .card__title { align-self: center; text-align: center; font-size: 1.17rem; }
.card--jogo .card__title i { color: var(--accent); margin-right: .1rem; }

/* Capi Pontos: benefícios em 2×3 ao lado do celular com o app de verdade (HTML + pontos.css do build). */
.pontos-vitrine { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center; margin: var(--gap, 1.2rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.pontos-vitrine .pontos-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pontos-demo { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.pontos-demo__tit { font-family: var(--font-display); color: var(--ink); font-size: 1.5rem; margin: 0; }
.pontos-demo__celular { width: min(480px, 100%); aspect-ratio: 3 / 4; border: 12px solid #1f1d33; border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe 0%, #f7f4ee 55%, #ede2cd 100%); box-shadow: 0 22px 40px rgba(20, 60, 90, .25); text-align: left; }
/* No desktop é um tablet em pé (3:4, como um iPad); o app rola por dentro, como no aparelho. */
.pontos-demo__tela { height: 100%; overflow-y: auto; scrollbar-width: thin; padding: .9rem .9rem 1.1rem; zoom: .62; } /* o app mede pela janela; a tela encolhe como num aparelho */
.pontos-demo .pt-tela { padding: 0; }
.pontos-demo .pt-bar { --pt-cat: var(--pt-total); }
.jogos-outros { margin: clamp(1rem, 3vw, 2rem) 0 1rem; }
.jogos-outros i { color: var(--accent-legivel); }
.pontos-demo__premio { margin: 0; font-family: var(--font-display); color: var(--ink); }
.pontos-demo__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
@media (min-width: 1021px) and (max-width: 1260px) { .pontos-demo__tela { zoom: .53; } } /* tablet mais estreito: a mesma tela, menor */
@media (max-width: 1020px) {
  .pontos-vitrine { grid-template-columns: minmax(0, 1fr); }
  .pontos-demo__celular { width: min(300px, 100%); aspect-ratio: 9 / 19; border-width: 8px; border-radius: 34px; } /* celular de proporção real */
  .pontos-demo { order: -1; } /* no celular e no tablet a demonstração vem antes dos benefícios */
}
@media (max-width: 600px) {
  .pontos-vitrine .pontos-beneficios { grid-template-columns: 1fr; }
  .pontos-demo__tela { zoom: .66; }
}