/* As peles das páginas de produto (Pedro, 20/10/2026: "para cada tipo de página, ter um background assim"). Cada página ganha o fundo
   do seu tipo atrás do quadro (data-pele em .produto-pagina e .produto-config, public/product-studio.js): o do modelo (Ninja), o da
   ferramenta (Gerar com Ginga, Trocar personagem) ou o da família. Aqui ficam o fundo comum, a marca no título e as peles das famílias
   e do Trocar; o Ninja e o Ginga têm folhas próprias (ninja.css, ginga.css). Toda regra da página ou da barra leva o data-pele. */

/* ── Fundo: o vídeo (ou a imagem) cobre a área da página; véus escurecem a coluna do texto, o pé do configurador e as bordas ──── */
.produto-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.produto-fundo__midia {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pele-foco, 70% 50%);
  animation: fk-pele-fundo calc(var(--duracao-media) * 2) var(--curva-casa) both;
}
@keyframes fk-pele-fundo { from { opacity: 0; } }
.produto-fundo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 20%, color-mix(in srgb, var(--bg) 28%, transparent) 42%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 30%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 14%),
    linear-gradient(270deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 14%);
}
/* Abaixo de 1100 px a página empilha: o fundo fica preso à página (sem escapar para o app) e só na primeira tela, para a imagem não
   esticar na altura da coluna inteira; o véu de baixo funde com o fundo do app. */
@media (max-width: 1100px) {
  .produto-pagina[data-pele] { position: relative; inset: auto; }
  .produto-pagina[data-pele] > .produto-fundo { bottom: auto; height: min(100%, 100vh); }
}

/* ── Marca no título (Ninja, Ginga): a marca num poço com brilho na cor da pele ──────────────────────────────────────────────── */
.produto-titulo__marca {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-16);
  color: var(--pele-marca, var(--lima)); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pele-marca, var(--lima)) 14%, var(--bg)), var(--bg) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pele-marca, var(--lima)) 35%, transparent), 0 0 34px -8px color-mix(in srgb, var(--pele-brilho, var(--lima)) 45%, transparent), 0 14px 30px -12px var(--bg);
}
.produto-titulo__marca .icon { width: 34px; height: 34px; filter: drop-shadow(0 0 var(--space-8) color-mix(in srgb, var(--pele-brilho, var(--lima)) 45%, transparent)); }

/* ── Topo: a marca antes do nome do item (Ninja, Ginga) ─────────────────────────────────────────────────────────────────────── */
.fk-megamenu__marca { flex: none; width: 16px; height: 16px; }

/* ── Filete no alto da barra, na cor da pele ───────────────────────────────────────────────────────────────────────────────── */
.produto-config[data-pele]::before {
  content: ''; position: absolute; left: var(--space-24); right: var(--space-24); top: -1px; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pele-acento, var(--lima)) 70%, transparent), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--pele-acento, var(--lima)) 50%, transparent);
}

/* ── As peles em imagem: o ponto do sujeito (à direita do quadro) e a cor do filete de cada uma ────────────────────────────── */
/* Imagem: o prisma que abre a luz no espectro, com as fotos soltas no ar. */
.produto-pagina[data-pele="imagem"] { --pele-foco: 64% 50%; --pele-acento: var(--violeta); }
/* Vídeo: a câmera de cinema no meio dos rastros de luz. */
.produto-pagina[data-pele="video"] { --pele-foco: 66% 50%; --pele-acento: var(--lima); }
/* Áudio: o microfone de estúdio com as ondas de som. */
.produto-pagina[data-pele="audio"] { --pele-foco: 64% 50%; --pele-acento: var(--lima); }
/* Trocar personagem: o vídeo do comparador (Antes e Depois, a barra indo e voltando). O comparador fica a 75 % da largura: com 80 %
   ele aparece inteiro também no celular em pé (Pedro, 21/10/2026). A marca é o quadro dividido, ícone próprio da Fenaky (Pedro,
   22/10/2026): no título, no topo, no card da Home e no botão de gerar, em lima como o Ninja. */
.produto-pagina[data-pele="trocar"] { --pele-foco: 80% 50%; --pele-acento: var(--lima); }
.fk-megamenu__marca--trocar { color: var(--lima); filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--lima) 45%, transparent)); }
.produto-config[data-pele="trocar"] .produto-cta > .icon:first-child { width: 18px; height: 18px; }

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