/* A pele do Gerar com Ginga, com o tema brasileiro (Pedro, 20/10/2026: "o Ginga vai ter um ícone brasileiro, um jogador gingando, e a
   página vai ser um tema brasileiro"). Só a página do Ginga muda (data-pele="ginga" em .produto-pagina e .produto-config,
   public/product-studio.js): o vídeo de fundo do jogador na laje do Rio ao pôr do sol (o fundo comum fica em peles.css), a marca no
   título com o balanço da ginga, a curva da bola sob o nome, o anel ouro e verde no quadro e o filete verde, ouro e azul na barra.
   O lima continua o acento do app (o botão de gerar não muda). No topo, o item do Ginga leva a marca e mantém a estrela dourada
   (Pedro, 17/10/2026). Ícone: pinhead person-playing-soccer (CC0, assets/PinheadIcons-LICENSE.txt). */

.fk-megamenu__gatilho--ginga, .produto-pagina[data-pele="ginga"] { --ginga-verde: #1fc46a; --ginga-ouro: var(--ouro); --ginga-azul: #4a7dff; }
.produto-pagina[data-pele="ginga"] { --pele-marca: var(--ginga-ouro); --pele-brilho: var(--ginga-verde); --pele-acento: var(--ginga-ouro); --pele-foco: 64% 50%; }

/* ── Topo: o jogador dourado antes do nome, sem box em volta (Pedro, 22/10/2026); no hover ele ginga ─────────────────────────── */
.fk-megamenu__marca--ginga { color: var(--ginga-ouro); filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--ginga-verde) 60%, transparent)); transform-origin: 50% 90%; }
.fk-megamenu__gatilho--ginga:hover .fk-megamenu__marca--ginga { animation: fk-ginga-balanco .45s ease-in-out 4 alternate; }
@keyframes fk-ginga-balanco { from { transform: rotate(-9deg) translateX(-1px); } to { transform: rotate(9deg) translateX(1px); } }

/* ── Título: a marca no poço ouro e verde, que ginga ao abrir, e a curva da bola que passa sob o nome uma vez ──────────────── */
.produto-pagina[data-pele="ginga"] .produto-titulo { position: relative; display: flex; align-items: center; gap: var(--space-14); padding-bottom: var(--space-10); font-size: 44px; font-weight: 600; letter-spacing: -.05em; }
.produto-pagina[data-pele="ginga"] .produto-titulo__marca .icon { transform-origin: 50% 90%; animation: fk-ginga-balanco .7s calc(var(--duracao-media) * 1.2) ease-in-out 4 alternate both; }
.produto-pagina[data-pele="ginga"] .produto-titulo::after {
  content: ''; position: absolute; left: 66px; right: 16%; bottom: 0; height: var(--space-14); pointer-events: none;
  /* A curva é a borda de baixo com raio elíptico (afina nas pontas); a máscara deixa só a borda, pintada pelo degradê. */
  border: 0 solid transparent; border-bottom-width: 3px; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(90deg, var(--ginga-verde), var(--ginga-ouro) 55%, var(--ginga-azul)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  clip-path: inset(0 100% 0 0);
  animation: fk-ginga-curva 1.2s calc(var(--duracao-media) * 1.2) var(--curva-casa) both;
}
@keyframes fk-ginga-curva { to { clip-path: inset(0 0 0 0); } }

/* ── Quadro e configurador: um anel ouro com brilho verde no quadro e o filete verde, ouro e azul no alto da barra ─────────── */
.produto-pagina[data-pele="ginga"] .fk-player__quadro { box-shadow: var(--shadow-moldura), 0 0 0 1px color-mix(in srgb, var(--ginga-ouro) 22%, transparent), 0 0 64px -20px color-mix(in srgb, var(--ginga-verde) 50%, transparent); }
.produto-pagina[data-pele="ginga"] .produto-config[data-pele="ginga"]::before {
  background: linear-gradient(90deg, transparent, var(--ginga-verde) 24%, var(--ginga-ouro) 50%, var(--ginga-azul) 76%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ginga-ouro) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .fk-megamenu__gatilho--ginga:hover .fk-megamenu__marca--ginga, .produto-pagina[data-pele="ginga"] .produto-titulo__marca .icon { animation: none; }
  .produto-pagina[data-pele="ginga"] .produto-titulo::after { animation: none; clip-path: none; }
}