/* Card ganho: tela cheia em verde da marca, card sobe de costas, vira e ganha brilho */
.ganho-aberto { overflow: hidden; }
.ganho { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; color: #fff; }
.ganho-fundo { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 38%, #0e8a50 0%, var(--verde-escuro) 55%, #04381f 100%); }
.ganho-luz { position: fixed; left: 50%; top: 40%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(155, 227, 185, .16) 10% 14%, transparent 16% 33%, rgba(155, 227, 185, .12) 35% 39%, transparent 41% 58%, rgba(155, 227, 185, .16) 60% 64%, transparent 66% 83%, rgba(155, 227, 185, .12) 85% 89%, transparent 91%);
  mask: radial-gradient(circle, transparent 0 90px, #000 200px, transparent 62%); animation: ganho-raios 24s linear infinite; }
@keyframes ganho-raios { to { transform: rotate(360deg); } }
.ganho-faiscas { position: fixed; left: 50%; top: 40%; pointer-events: none; }
.ganho-faiscas i { position: absolute; width: 8px; height: 14px; border-radius: 2px; opacity: 0; background: var(--verde-luz); }
.ganho-faiscas i:nth-child(3n) { background: #fff; width: 6px; height: 6px; border-radius: 50%; }
.ganho-faiscas i:nth-child(4n) { background: #f2d27a; }
.ganho-palco { position: relative; display: grid; justify-items: center; gap: 36px; width: min(100%, 720px); text-align: center; }
.ganho-cards { display: flex; justify-content: center; gap: 28px; perspective: 1400px; }
.ganho-card { width: 220px; aspect-ratio: 3 / 4; transform-style: preserve-3d; --bx: 50%; }
.ganho-giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.ganho-frente, .ganho-verso { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -20px rgba(2, 30, 16, .7), 0 0 0 1px rgba(255, 255, 255, .14); }
.ganho-frente img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ganho-verso { transform: rotateY(180deg); display: grid; place-content: center; justify-items: center; gap: 10px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 10px, transparent 10px 20px), linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }
.ganho-verso img { width: 84px; height: 84px; border-radius: 20px; }
.ganho-verso b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ganho-verso small { font-size: 12px; color: var(--verde-luz); }
/* Faixa de luz que atravessa a arte quando o card termina de virar; depois segue o mouse */
.ganho-brilho { position: absolute; inset: 0; pointer-events: none; --bp: 120%;
  background: linear-gradient(105deg, transparent calc(var(--bp) - 22%), rgba(255, 255, 255, .55) var(--bp), transparent calc(var(--bp) + 22%)); mix-blend-mode: soft-light; }
.ganho-card.pronto .ganho-brilho { background: radial-gradient(circle at var(--bx) 30%, rgba(255, 255, 255, .45), transparent 55%); mix-blend-mode: soft-light; transition: background .2s; }
.ganho-texto { display: grid; justify-items: center; gap: 14px; }
.ganho-texto h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -.03em; }
.ganho-texto p { max-width: 46ch; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.ganho-bts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.ganho .bt-verde { background: #fff; color: var(--verde-escuro); }
.ganho .bt-verde:hover { background: var(--verde-claro); }
.ganho .bt-verde i { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.ganho .bt-verde:hover i { transform: rotate(-12deg) scale(1.12); }
.ganho-depois { color: #fff; background: rgba(255, 255, 255, .12); }
.ganho-depois:hover { background: rgba(255, 255, 255, .2); }
.ganho-estatico .ganho-luz { animation: none; }
@media (max-width: 600px) {
  .ganho-cards { gap: 14px; }
  .ganho-card { width: min(44vw, 200px); }
  .ganho-cards:has(.ganho-card:only-child) .ganho-card { width: min(62vw, 240px); }
  .ganho-palco { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .ganho-luz { animation: none; } }