/* Fenaky Design System · produtos — peças do handoff de produtos que o bundle ainda não tinha: o MegaMenu, as
   variantes Novo e Breve do Selo e a variante produto do CardVideo (a vitrine da Home). Carrega depois de bundle.css e
   usa as primitivas dele (.fk-casca, .fk-tecla, .fk-cta, .fk-rotulo, .fk-vidro, .fk-poco) sem redefini-las.
   Fontes: docs/design/produtos/HANDOFF.md (seções Mega menu, Home e Componentes do DS), pranchas/Main.dc.html (.top,
   .trig, .scrim, .mega, .mlist, .mrow, .mstage, .mframe, .minfo, .troca, .mspec, .mcta, .fam-dots, .pcard, .pmedia,
   .ptop, .pcap, .pgo, .top-badge, .soon-badge, .cta.is-locked) e fenaky-produtos.css (medidas, estados e animações
   aprovados no canvas Fenaky · produtos em 16 e 17/10/2026). Toda cor, sombra, raio, duração e curva vem de var(--token);
   onde o canvas usa um valor sem token, ele sai de um token por color-mix() ou calc(), com a origem anotada. */

/* Source: MegaMenu.css */
/* Fenaky Design System · MegaMenu — os produtos por família no topo do app: gatilhos com a seta, véu com desfoque sobre
   a página, painel em casca com a lista dos produtos da família à esquerda e o palco com a prévia da receita padrão à
   direita. Sem créditos: cada linha traz a chamada de até 4 palavras.
   Tempos (no script, não no CSS): hover abre em 90 ms, sair fecha em 260 ms, e o clique no gatilho que o hover acabou
   de abrir não fecha nos primeiros 450 ms. */

/* ── Gatilhos: Marcas, Influencers, Efeitos e trends, Cinema e Todos os produtos ────────────────────────────────── */
.fk-megamenu__gatilhos {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-left: calc(var(--space-12) * -1);
}
/* Main .trig: 36 px, padding 0 12, raio 10, Manrope 600 12,5 px. A luz acesa é um ::before que entra de .92. */
.fk-megamenu__gatilho {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-7);
  height: calc(var(--tamanho-tecla) + var(--space-6));
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-10);
  background: transparent;
  cursor: pointer;
  color: var(--texto-controle);
  font: 600 12.5px/1 var(--font-texto);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duracao-rapida) var(--curva-opacidade);
}
.fk-megamenu__gatilho::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--camada-fundo);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base));
  box-shadow: var(--shadow-seg-acesa);
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-megamenu__gatilho:hover,
.fk-megamenu__gatilho[aria-expanded="true"],
.fk-megamenu__gatilho[aria-current="page"] { color: var(--texto-titulo); }
.fk-megamenu__gatilho[aria-expanded="true"]::before { opacity: 1; transform: none; }
.fk-megamenu__seta { flex: none; width: 12px; height: 12px; opacity: .7; transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-rapida); }
.fk-megamenu__gatilho[aria-expanded="true"] .fk-megamenu__seta { opacity: 1; transform: rotate(180deg); }
/* Separador antes de Todos os produtos: 1 × 18, branco a 10 % (Main .trig-sep). */
.fk-megamenu__separador { flex: none; width: var(--space-1); height: var(--space-18); margin: 0 var(--space-8); background: color-mix(in srgb, var(--branco) 10%, transparent); }
.fk-megamenu__gatilho--todos { color: var(--texto-leitura); }
/* Trocar personagem e Gerar com Ginga: links diretos depois do Cinema, sem submenu. O Ginga tem a estrela dourada (Pedro, 17/10/2026). */
/* Os itens do meio com marca ou destaque (Trocar personagem, Ginga, Ninja, Música) têm o mesmo hover (Pedro, 22/10/2026): parados num
   cinza claro, um pouco acima das famílias, e brancos sob o ponteiro, aberto ou na página dele, pela regra geral do gatilho. */
:is(.fk-megamenu__gatilho--marca, .fk-megamenu__gatilho--destaque) { color: var(--texto-leitura); }
.fk-megamenu__estrela { flex: none; width: 13px; height: 13px; color: var(--ouro); filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--ouro) 55%, transparent)); }
.fk-megamenu__estrela path { fill: currentColor; }
/* HOT no Trocar personagem (Pedro, 18/10/2026): pílula de 17 px do ouro ao coral, com a chama. */
.fk-megamenu__hot { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); height: 17px; padding: 0 var(--space-6) 0 var(--space-4); border-radius: var(--radius-6); background: linear-gradient(135deg, var(--ouro), var(--erro)); color: var(--tinta-pilula); font: 700 9.5px/1 var(--font-display); letter-spacing: .06em; box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--erro) 35%, transparent); }
.fk-megamenu__hot :is(svg, .icon) { flex: none; width: 11px; height: 11px; }
/* Os outros selos que o admin escolhe para um item do topo (public/site-layout.js): a mesma pílula de 17 px do HOT, cada um na sua cor. */
.fk-megamenu__tag { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); height: 17px; padding: 0 var(--space-6); border-radius: var(--radius-6); font: 700 9.5px/1 var(--font-display); letter-spacing: .06em; white-space: nowrap; }
.fk-megamenu__tag :is(svg, .icon) { flex: none; width: 11px; height: 11px; }
.fk-megamenu__tag--novo { background: var(--lima); color: var(--tinta-pilula); box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--lima) 30%, transparent); }
.fk-megamenu__tag--top { background: var(--ouro); color: var(--tinta-pilula); box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--ouro) 35%, transparent); }
.fk-megamenu__tag--beta { background: var(--violeta); color: var(--branco); }
.fk-megamenu__tag--promo { background: var(--erro); color: var(--branco); box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--erro) 35%, transparent); }
.fk-megamenu__tag--gratuito { color: var(--sucesso); background: var(--sucesso-fundo); box-shadow: inset 0 0 0 var(--space-1) var(--sucesso-borda); }
.fk-megamenu__tag--breve { color: var(--neutro); background: var(--neutro-fundo); box-shadow: inset 0 0 0 var(--space-1) var(--neutro-borda); }
/* Premium (Pedro, 24/10/2026): o ouro com brilho e a coroa cheia. */
.fk-megamenu__tag--premium { background: linear-gradient(135deg, color-mix(in srgb, var(--ouro) 55%, var(--branco)), var(--ouro) 55%, color-mix(in srgb, var(--ouro) 80%, var(--erro))); color: var(--tinta-pilula); box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--ouro) 35%, transparent); }
.fk-megamenu__tag--premium path { fill: currentColor; }
/* O nome dentro do selo (Pedro, 24/10/2026): a Community Premium e os itens em destaque do meio (Ginga e Ninja). A pílula herda o tamanho
   e a fonte do texto do topo (12,5 px, como Academy e MCP), em caixa alta e negrito, com a cor do selo e o ícone dele. O HOT e a estrela,
   que no selo pequeno têm desenho próprio, ganham aqui a cor de pílula. */
.fk-megamenu__pilula { display: inline-flex; align-items: center; gap: var(--space-4); height: 22px; padding: 0 var(--space-8); border-radius: var(--radius-6); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: filter var(--duracao-rapida); }
.fk-megamenu__pilula:has(> :is(svg, .icon)) { padding-left: var(--space-6); }
.fk-megamenu__pilula :is(svg, .icon) { flex: none; width: 12px; height: 12px; }
.fk-megamenu__pilula.fk-megamenu__tag--estrela path { fill: currentColor; }
.fk-megamenu__tag--hot { background: linear-gradient(135deg, var(--ouro), var(--erro)); color: var(--tinta-pilula); box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--erro) 35%, transparent); }
.fk-megamenu__tag--estrela { background: var(--ouro); color: var(--tinta-pilula); box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--ouro) 35%, transparent); }
:is(.topbar-link, .fk-megamenu__gatilho):hover .fk-megamenu__pilula { filter: brightness(1.08); }
/* As letras dos selos (Space Grotesk em caixa alta) ficavam 1,5 px acima do meio da pílula, porque a fonte reserva mais espaço embaixo
   (Pedro, 22/10/2026): o respiro de cima as centra na linha do meio, e o ícone (a chama do HOT) volta a subir o mesmo tanto. */
.fk-megamenu__hot, .fk-megamenu__tag { box-sizing: border-box; padding-top: 3px; }
:is(.fk-megamenu__hot, .fk-megamenu__tag) > :is(svg, .icon) { margin-top: -3px; }
/* Na direita do topo o link não tem gap: o selo ganha o mesmo respiro dos gatilhos. */
.workspace-account-controls :is(.topbar-link, .topbar-pricing) :is(.fk-megamenu__hot, .fk-megamenu__estrela, .fk-megamenu__tag) { margin-left: var(--space-7); }
/* Ferramenta ou produto na direita é um botão com a cara do link. */
.workspace-account-controls button:is(.topbar-link, .topbar-pricing) { background: transparent; cursor: pointer; }
/* As duas ferramentas cabem no topo com folga a partir de 1440 px; abaixo disso elas seguem nas abas do configurador. Com as 7 famílias,
   os gatilhos apertam abaixo de 1280 px. */
@media (max-width: 1439px) { .fk-megamenu__gatilho--ferramenta, .fk-megamenu__separador--ferramentas { display: none; } }
@media (max-width: 1279px) { .fk-megamenu__gatilho { padding: 0 var(--space-8); } }
/* Com o Ninja no meio (Pedro, 20/10/2026) são três itens diretos, e o Ginga ganhou a marca antes do nome (+23 px): nas faixas em que
   a conta aberta (saldo largo e sino) encosta no menu, os gatilhos apertam o recuo e o vão interno. Medido com "12.345,67 créditos":
   sobram 28 px em 1440, 24 px em 1600, 30 px em 1760 e 126 px em 1920 (a partir de 1760 entram Academy, Community e MCP). */
@media (min-width: 1440px) and (max-width: 1599px) { .fk-megamenu__gatilho { gap: var(--space-5); padding: 0 var(--space-5); } }
@media (min-width: 1760px) and (max-width: 1919px) { .fk-megamenu__gatilho { gap: var(--space-5); padding: 0 var(--space-10); } }
/* Contagem (Main .count): poço de 18 px, Space Grotesk 600 10 px, números tabulares; #b9b9bf no canvas = --texto-leitura. */
.fk-megamenu__contagem {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--space-18);
  padding: 0 var(--space-6);
  border-radius: var(--radius-6);
  background: var(--poco);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--bg) 75%, transparent), 0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent);
  color: var(--texto-leitura);
  font: 600 10px/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ── Véu: escurece e desfoca a página abaixo do topo (Main .scrim: .58 no canvas; o token do véu é .62) ─────────── */
.fk-megamenu__veu {
  position: fixed;
  /* Começa depois da barra lateral: o menu não a cobre nem desfoca (Pedro, 17/10/2026). */
  inset: var(--tamanho-topo) 0 0 calc(var(--space-12) + var(--rail-width, 76px));
  z-index: var(--camada-central-veu);
  padding: 0;
  border: 0;
  cursor: default;
  background: var(--veu-dialogo);
  -webkit-backdrop-filter: blur(var(--desfoque-veu)) saturate(.85);
  backdrop-filter: blur(var(--desfoque-veu)) saturate(.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracao-contador) var(--curva-opacidade), visibility 0s linear var(--duracao-contador);
}
.fk-megamenu__veu--aberto { opacity: 1; visibility: visible; transition: opacity var(--duracao-media) var(--curva-opacidade), visibility 0s; }

/* ── Painel: casca de 500 px a 58 px do alto, de 100 px à esquerda até 12 px da direita (HANDOFF; 470 px antes das miniaturas maiores) ── */
/* <section class="fk-casca fk-megamenu">: a casca dá o material; aqui ficam a posição, o recheio e a entrada. */
.fk-megamenu {
  position: fixed;
  top: calc(var(--tamanho-topo) - var(--space-6));
  left: var(--tamanho-inicio-conteudo);
  right: var(--space-12);
  z-index: var(--camada-central);
  height: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-22) var(--space-22) var(--space-18) var(--space-28);
  color: var(--texto);
  font-family: var(--font-texto);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--space-12) * -1)) scale(.985);
  transform-origin: 30% 0;
  filter: blur(var(--desfoque-saida));
  /* Fecha: .3 s na opacidade e no desfoque, .5 s na posição. */
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    visibility 0s linear var(--duracao-central-fecha);
}
.fk-megamenu > * { position: relative; z-index: 1; }
/* Fechado ou fechando, o painel e o véu não pegam o ponteiro: o que some na tela não recebe clique nem hover. */
.fk-megamenu:not(.fk-megamenu--aberto),
.fk-megamenu__veu:not(.fk-megamenu__veu--aberto) { pointer-events: none; }
/* Abre: .4 s na opacidade, .8 s na posição e .45 s no desfoque. */
.fk-megamenu--aberto {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition:
    opacity var(--duracao-contador) var(--curva-opacidade),
    transform calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa),
    filter var(--duracao-media) var(--curva-opacidade),
    visibility 0s;
}

/* ── Cabeçalho: rótulo com número, nome e contagem; a frase da família; a dica; o fechar ─────────────────────────── */
.fk-megamenu__cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.fk-megamenu__cabecalho .fk-megamenu__contagem { margin-left: var(--space-2); }
.fk-megamenu__titulo { margin: var(--space-9) 0 0; color: var(--texto-titulo); font: 600 26px/1.05 var(--font-display); letter-spacing: -.03em; }
.fk-megamenu__apoio { margin: var(--space-6) 0 0; color: var(--texto-apoio); font: 500 12.5px/1.4 var(--font-texto); }
.fk-megamenu__fechar { flex: none; width: var(--tamanho-tecla-redonda); height: var(--tamanho-tecla-redonda); padding: 0; border-radius: var(--radius-circulo); }
.fk-megamenu__fechar > svg, .fk-megamenu__fechar .icon { flex: none; width: 14px; height: 14px; }

/* ── Corpo: lista (1fr) e palco (560 px), 22 px entre eles ──────────────────────────────────────────────────────── */
.fk-megamenu__corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: var(--space-22); }

/* Lista: no máximo 8 itens, que descem em colunas de 4 linhas de 72 px (Pedro, 18/10/2026); a 5ª linha começa a coluna seguinte. */
.fk-megamenu__lista {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 72px);
  grid-auto-columns: minmax(0, 340px);
  gap: var(--space-6) var(--space-14);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Linha (Main .mrow): miniatura 48 × 62, nome com selo e a chamada; o hover e a linha em foco no palco são cinza. */
.fk-megamenu__linha {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-11);
  width: 100%;
  height: 72px;
  padding: var(--space-5) var(--space-12) var(--space-5) var(--space-5);
  border: 0;
  border-radius: var(--radius-13);
  background: transparent;
  cursor: pointer;
  color: var(--texto-link);
  font: inherit;
  text-align: left;
  transition: background var(--duracao-rapida) var(--curva-opacidade), box-shadow var(--duracao-cor) var(--curva-opacidade);
}
/* Entrada em cascata a cada troca de família: 28 ms por linha a partir de 40 ms (no script, --fk-megamenu-atraso). */
.fk-megamenu__lista--entra .fk-megamenu__linha { animation: fk-megamenu-entra calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa) backwards; animation-delay: var(--fk-megamenu-atraso, 0ms); }
@keyframes fk-megamenu-entra {
  0% { opacity: 0; transform: translateY(var(--space-26)) scale(.97); filter: blur(calc(var(--desfoque-texto) * 3)); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Branco a 5,5 % → 2 % no fundo, filete de 7 % no topo e aro de 6 % (Main .mrow:hover / .on). */
.fk-megamenu__linha:hover,
.fk-megamenu__linha[aria-current="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 5.5%, transparent), color-mix(in srgb, var(--branco) 2%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--branco) 7%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--branco) 6%, transparent);
}
.fk-megamenu__miniatura { position: relative; flex: none; width: 48px; height: 62px; overflow: hidden; border-radius: var(--radius-9); background: var(--midia-fundo); box-shadow: var(--shadow-miniatura); }
.fk-megamenu__miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--duracao-cor) * 2) var(--curva-casa); }
.fk-megamenu__linha[aria-current="true"] .fk-megamenu__miniatura img { transform: scale(1.08); }
.fk-megamenu__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.fk-megamenu__nome { display: flex; align-items: center; gap: var(--space-7); min-width: 0; overflow: hidden; color: var(--texto); font: 600 13px/1.1 var(--font-texto); white-space: nowrap; text-overflow: ellipsis; }
.fk-megamenu__linha[aria-current="true"] .fk-megamenu__nome { color: var(--branco); }
.fk-megamenu__chamada { overflow: hidden; color: var(--texto-dica); font: 500 11px/1 var(--font-display); white-space: nowrap; text-overflow: ellipsis; }
/* A seta só aparece na linha apontada: a coluna fica estreita e sem a fila de setas na borda. */
.fk-megamenu__ir { flex: none; width: 14px; height: 14px; color: var(--texto-separador); opacity: 0; transition: color var(--duracao-rapida), opacity var(--duracao-rapida), transform calc(var(--duracao-pressao) + var(--duracao-cor)) var(--curva-casa); }
.fk-megamenu__linha:hover .fk-megamenu__ir { opacity: 1; }
.fk-megamenu__linha[aria-current="true"] .fk-megamenu__ir { opacity: 1; color: var(--lima); transform: translateX(var(--space-2)); }
/* Breve: nome em leitura, cadeado apagado (#4a4a50 e #6b6b72 no canvas, a partir do separador). */
.fk-megamenu__linha--breve .fk-megamenu__nome { color: var(--texto-leitura); }
.fk-megamenu__linha--breve .fk-megamenu__ir { opacity: 1; color: color-mix(in srgb, var(--texto-separador) 75%, var(--bg)); }
.fk-megamenu__linha--breve[aria-current="true"] .fk-megamenu__ir { color: color-mix(in srgb, var(--texto-separador) 80%, var(--texto-controle)); transform: none; }

/* ── Palco (Main .mstage): poço com a luz do pôster, quadro no formato da receita e a ficha ao lado ─────────────── */
.fk-megamenu__palco { position: relative; isolation: isolate; display: flex; gap: var(--space-20); align-items: stretch; padding: var(--space-12); overflow: hidden; border-radius: var(--radius-18); background: var(--poco); box-shadow: var(--shadow-poco); }
/* Ambiente: o pôster ampliado, desfocado a 60 px (3/4 de --desfoque-ambiente) e a 22 %. */
.fk-megamenu__ambiente { position: absolute; inset: calc(var(--space-40) * -1); z-index: var(--camada-fundo); width: calc(100% + var(--space-40) * 2); height: calc(100% + var(--space-40) * 2); object-fit: cover; filter: blur(calc(var(--desfoque-ambiente) * .75)) saturate(1.4); opacity: .22; transition: opacity calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-opacidade); }
.fk-megamenu__quadro-caixa { flex: none; width: 236px; display: flex; align-items: center; justify-content: center; }
/* O quadro muda de proporção em .8 s conforme o formato da receita; o vídeo novo entra em crossfade por cima. */
.fk-megamenu__quadro {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-14);
  background: var(--midia-fundo);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 0 var(--space-6) color-mix(in srgb, var(--branco) 3%, transparent), 0 0 0 var(--space-7) color-mix(in srgb, var(--bg) 50%, transparent), 0 30px 60px -20px color-mix(in srgb, var(--bg) 95%, transparent);
  transition: width calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa), height calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa);
}
.fk-megamenu__quadro :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fk-megamenu__quadro video { animation: fk-megamenu-video calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa) both; }
@keyframes fk-megamenu-video { from { opacity: 0; filter: blur(var(--desfoque-dialogo)) brightness(1.3); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
.fk-megamenu__chips { position: absolute; z-index: 3; top: var(--space-8); left: var(--space-8); right: var(--space-8); display: flex; justify-content: flex-start; gap: var(--space-6); }

/* Ficha (Main .minfo): cada troca de produto reentra o texto em .7 s (--fk-megamenu-ficha alterna a e b). */
.fk-megamenu__ficha { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-8) var(--space-6) var(--space-4) 0; }
.fk-megamenu__ficha--a > * { animation: fk-megamenu-texto-a var(--duracao-silencio) var(--curva-casa) both; }
.fk-megamenu__ficha--b > * { animation: fk-megamenu-texto-b var(--duracao-silencio) var(--curva-casa) both; }
@keyframes fk-megamenu-texto-a { from { opacity: 0; transform: translateY(var(--space-8)); filter: blur(calc(var(--desfoque-texto) * 1.5)); } }
@keyframes fk-megamenu-texto-b { from { opacity: 0; transform: translateY(var(--space-8)); filter: blur(calc(var(--desfoque-texto) * 1.5)); } }
.fk-megamenu__produto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-9); margin: var(--space-4) 0 0; color: var(--texto-titulo); font: 600 25px/1.05 var(--font-display); letter-spacing: -.03em; }
.fk-megamenu__frase { margin: 0; color: var(--texto-leitura); font: 500 12.5px/1.55 var(--font-texto); }
/* O que você troca: fichas em poço de 30 px com a foto atual ou um ícone em tecla. */
.fk-megamenu__troca { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.fk-megamenu__troca-item { display: inline-flex; align-items: center; gap: var(--space-7); height: var(--tamanho-tecla); padding: 0 var(--space-10) 0 var(--space-4); border-radius: var(--radius-9); background: var(--poco); box-shadow: var(--shadow-poco); color: var(--texto-link); font: 600 11.5px/1 var(--font-texto); }
.fk-megamenu__troca-item img { width: var(--tamanho-vidro-sm); height: var(--tamanho-vidro-sm); border-radius: var(--radius-6); object-fit: cover; box-shadow: 0 0 0 1px var(--sulco-sombra); }
.fk-megamenu__troca-icone { display: grid; place-items: center; width: var(--tamanho-vidro-sm); height: var(--tamanho-vidro-sm); border-radius: var(--radius-6); background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base)); box-shadow: var(--shadow-tecla); color: var(--texto-icone); }
.fk-megamenu__troca-icone :is(svg, .icon) { flex: none; width: 12px; height: 12px; }
/* Modelo e Saída (Main .mspec): branco a 2 % com aro de 5 %, linhas gravadas entre os itens. */
.fk-megamenu__especificacao { display: flex; flex-direction: column; margin: 0; border-radius: var(--radius-12); background: color-mix(in srgb, var(--branco) 2%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 5%, transparent); }
.fk-megamenu__especificacao > div { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) var(--space-12); color: var(--texto-apoio); font: 500 11.5px/1.2 var(--font-texto); }
.fk-megamenu__especificacao > div + div { border-top: 1px solid var(--divisor-sombra); box-shadow: inset 0 1px 0 var(--divisor-luz); }
.fk-megamenu__especificacao :is(dt, dd) { margin: 0; }
.fk-megamenu__especificacao dd { color: var(--texto); font: 600 11.5px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }

/* ── Rodapé: só os pontos das famílias; a família aberta alarga para 30 px ───────────────────────────────────────── */
.fk-megamenu__rodape { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.fk-megamenu__rodape .fk-megamenu__pontos { grid-column: 2; }
/* "Ver todos os produtos" saiu do topo e fica à direita do rodapé de cada menu (Pedro, 18/10/2026). */
.fk-megamenu__todos { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: var(--space-7); padding: var(--space-4) var(--space-6); border: 0; border-radius: var(--radius-8); background: transparent; cursor: pointer; color: var(--texto-link); font: 600 12.5px/1 var(--font-texto); transition: color var(--duracao-rapida); }
.fk-megamenu__todos:hover { color: var(--branco); }
.fk-megamenu__todos :is(svg, .icon) { flex: none; width: 13px; height: 13px; }
.fk-megamenu__pontos { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.fk-megamenu__pontos > li { width: var(--space-18); height: var(--space-4); border-radius: var(--radius-2); background: color-mix(in srgb, var(--branco) 12%, transparent); transition: background var(--duracao-curta), width var(--duracao-media) var(--curva-casa); }
.fk-megamenu__pontos > li[aria-current="true"] { width: var(--space-30); background: var(--texto-forte); }

/* ── Menos movimento: abre e fecha sem deslizar nem desfocar; o quadro troca de medida seco e nada entra em cascata. */
@media (prefers-reduced-motion: reduce) {
  .fk-megamenu, .fk-megamenu--aberto { transform: none; filter: none; transition: opacity var(--duracao-pressao) linear, visibility 0s; }
  .fk-megamenu__veu, .fk-megamenu__veu--aberto { transition: opacity var(--duracao-pressao) linear, visibility 0s; }
  .fk-megamenu__gatilho, .fk-megamenu__gatilho::before, .fk-megamenu__seta, .fk-megamenu__quadro, .fk-megamenu__miniatura img, .fk-megamenu__ir, .fk-megamenu__pontos > li { transition: none; }
  .fk-megamenu__lista--entra .fk-megamenu__linha, .fk-megamenu__quadro video, .fk-megamenu__ficha--a > *, .fk-megamenu__ficha--b > * { animation: none; }
}

/* Source: Selo.css · variantes Novo e Breve */
/* O selo do produto (Main .top-badge e .soon-badge): 18 px, raio 6, Space Grotesk 700 9,5 px em caixa alta. Novo é
   lima (Onda 1); Breve é cinza (Ondas 2 e 3). Composição: <span class="fk-selo fk-selo--novo">Novo</span>. */
.fk-selo--novo,
.fk-selo--breve {
  gap: 0;
  height: var(--space-18);
  padding: 0 var(--space-6);
  border-radius: var(--radius-6);
  font: 700 9.5px/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: none;
}
/* Topo claro a 50 % e aro escuro (sulco a 92 %, o .55 do canvas). */
.fk-selo--novo {
  color: var(--tinta-lima);
  background: linear-gradient(180deg, var(--lima-topo) 0%, var(--lima-meio) 55%, var(--lima-base) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--branco) 50%, transparent), 0 0 0 1px color-mix(in srgb, var(--sulco-sombra) 92%, transparent);
}
/* #b9b9bf sobre #2a2a2f no canvas: --texto-leitura sobre --cta-desligado-topo, aro branco a 8 %. */
.fk-selo--breve {
  color: var(--texto-leitura);
  background: var(--cta-desligado-topo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 8%, transparent);
}

/* Source: CardVideo.css · variante produto */
/* O card da vitrine da Home (Main .pcard): 356 px de altura e a largura do formato da receita padrão (no consumidor),
   selo no canto, saída em vidro, nome e frase sobre o pé escurecido e a seta lima que aparece sob o ponteiro.
   Composição: <button class="fk-cardvideo fk-cardvideo--solto fk-cardvideo--produto">; a prévia toca no hover. */
.fk-cardvideo--produto { position: relative; height: 356px; border-radius: var(--radius-14); }
.fk-cardvideo--produto .fk-cardvideo__quadro { height: 100%; aspect-ratio: auto; border-radius: var(--radius-14); }
/* Pé escurecido (Main .pmedia::after): preto a 28 % no alto, limpo no meio, 82 % no pé. */
.fk-cardvideo--produto .fk-cardvideo__quadro::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 28%, transparent), transparent 22%, transparent 50%, color-mix(in srgb, var(--bg) 82%, transparent));
  box-shadow: var(--shadow-midia-vitrine-filete);
}
.fk-cardvideo__topo { position: absolute; z-index: 4; top: var(--space-10); left: var(--space-10); right: var(--space-10); display: flex; justify-content: space-between; gap: var(--space-6); pointer-events: none; }
.fk-cardvideo__pe { position: absolute; z-index: 4; left: var(--space-14); right: var(--space-14); bottom: var(--space-13); display: flex; flex-direction: column; gap: var(--space-6); pointer-events: none; }
.fk-cardvideo--largo .fk-cardvideo__pe { right: 60px; }
.fk-cardvideo__nome { color: var(--texto-aceso); font: 600 17px/1.1 var(--font-display); letter-spacing: -.02em; }
/* O nome do produto em destaque (Pedro, 17/10/2026): pílula de vidro escuro com o ponto lima aceso à esquerda. No card
   fechado (Breve) o ponto apaga, como o selo e a tecla do cadeado. */
.fk-cardvideo--produto .fk-cardvideo__nome {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  max-width: 100%;
  padding: var(--space-6) var(--space-12) calc(var(--space-6) + 1px) var(--space-10);
  border-radius: var(--radius-pilula);
  font-size: 15px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  -webkit-backdrop-filter: blur(var(--desfoque-vidro));
  backdrop-filter: blur(var(--desfoque-vidro));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--branco) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--branco) 10%, transparent);
}
.fk-cardvideo--produto .fk-cardvideo__nome::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circulo);
  background: var(--lima);
  box-shadow: 0 0 9px var(--lima-halo);
}
.fk-cardvideo--bloqueado .fk-cardvideo__nome::before { background: var(--texto-unidade); box-shadow: none; }
.fk-cardvideo__frase { display: -webkit-box; overflow: hidden; color: var(--texto-suave); font: 500 11.5px/1.4 var(--font-texto); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Seta lima de 32 px no canto (Main .pgo): entra de .7 e 6 px abaixo em 450 ms. */
.fk-cardvideo__ir {
  position: absolute;
  z-index: 4;
  right: var(--space-12);
  bottom: var(--space-12);
  display: grid;
  place-items: center;
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  border-radius: var(--radius-circulo);
  color: var(--tinta-lima);
  background: linear-gradient(180deg, var(--lima-topo) 0%, var(--lima-meio) 55%, var(--lima-base) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--branco) 60%, transparent), 0 0 0 1px var(--sulco-sombra), 0 8px 18px -6px color-mix(in srgb, var(--lima) 50%, transparent);
  opacity: 0;
  transform: scale(.7) translateY(var(--space-6));
  transition: opacity var(--duracao-cor), transform var(--duracao-media) var(--curva-casa);
  pointer-events: none;
}
.fk-cardvideo__ir :is(svg, .icon) { flex: none; width: 14px; height: 14px; }
.fk-cardvideo--produto:is(:hover, :focus-visible, .fk-cardvideo--ativo) .fk-cardvideo__ir { opacity: 1; transform: none; }
/* Breve (ou ainda não liberado): pôster apagado e a seta vira o cadeado em tecla. */
.fk-cardvideo--bloqueado .fk-cardvideo__poster { filter: saturate(.55) brightness(.82); }
.fk-cardvideo--bloqueado .fk-cardvideo__ir {
  color: var(--texto-leitura);
  background: linear-gradient(180deg, var(--botao-redondo-topo), var(--tecla-base));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--branco) 10%, transparent), 0 0 0 1px var(--sulco-sombra);
}
/* Entrada da vitrine a cada filtro (Main .ptrack.ra .pcard): 45 ms por card, até o 9º. */
.fk-cardvideo--entra { animation: fk-megamenu-entra calc(var(--duracao-dialogo)) var(--curva-casa) backwards; animation-delay: var(--fk-cardvideo-atraso, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .fk-cardvideo--entra { animation: none; }
  .fk-cardvideo__ir { transition: none; }
}

/* Source: PaginaProduto.css */
/* Fenaky Design System · PaginaProduto — a página do produto (fase 2 do handoff): receitas à esquerda, o Player no formato da
   saída no centro, o Historico fixo à direita e o configurador único (BarraCriacao em três módulos) fixo no pé, com a bandeja
   de escolha acima dele. Medidas da prancha Configurador · produto em 1440 × 900 (HANDOFF, Página do produto; fenaky-produtos.css
   .studio, .st-stage, .st-left, .hist, .cfg, .cfg-b, .tray): palco a 40 px da esquerda e 132 px da direita, até 558 px de altura,
   colunas de 300 px e 1fr com vão de 36; histórico de 104 px a 12 px da direita; configurador de 248 px a 12 px do pé, com
   módulos de 292 px, 1fr e 340 px e vão de 8; bandeja de 372 px logo acima. Usa sem redefinir .fk-casca, .fk-modulo, .fk-poco,
   .fk-tecla, .fk-cta, .fk-rotulo, .fk-vidro, .fk-ref, .fk-selo e o Player (.fk-player). Cor, sombra, raio, duração e curva só
   por var(--token); valores do canvas sem token saem de tokens por calc() ou color-mix(), com a origem anotada. */

/* A página ocupa a área do conteúdo inteira, abaixo do topo e ao lado do rail; o rodapé do app sai desta rota. */
body[data-workspace-route="produto"] .minimal-footer { display: none; }
/* The page is fixed, so #main (the skip target, tabindex -1) is a short strip here: its focus ring would float over the stage. The page parts keep theirs. */
body[data-workspace-route="produto"] #main:focus-visible { outline: none; }
.produto-pagina { position: fixed; inset: var(--tamanho-topo) 0 0 var(--rail-offset, 100px); color: var(--texto); }
/* Palco (.st-stage): left 40, right 132 (2 × 64 + 4), top 6, até 558 de altura; 300 px + 1fr, vão 36 (32 + 4). */
.produto-palco {
  position: absolute; left: var(--space-40); right: calc(var(--space-64) * 2 + var(--space-4)); top: var(--space-6);
  height: calc(100% - 248px - var(--space-12) * 3); max-height: 558px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: calc(var(--space-32) + var(--space-4));
}

/* ── Coluna esquerda (.st-left) ─────────────────────────────────────────────────────────────────────────── */
.produto-esquerda { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; min-height: 0; padding-top: var(--space-12); overflow: hidden; }
/* O overflow da coluna cortava o que passa da borda esquerda: o brilho do quadro da marca (26 px), a fileira de receitas e o anel da
   receita escolhida (Pedro, 22/10/2026). A coluna avança 28 px para a esquerda e devolve o mesmo em respiro: o conteúdo fica no lugar e
   o corte vai para onde não há nada. Só à esquerda, para não criar rolagem lateral no celular. */
.produto-esquerda { margin-left: calc(var(--space-28) * -1); padding-left: var(--space-28); }
.produto-esquerda > * { animation: fk-produto-entra calc(var(--duracao-contador) * 2) var(--curva-casa) both; }
@keyframes fk-produto-entra { from { opacity: 0; transform: translateY(var(--space-8)); } }
.produto-migalha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); color: var(--texto-controle); font: 600 12px/1 var(--font-texto); }
.produto-migalha button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.produto-migalha button:hover { color: var(--branco); }
.produto-migalha button:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--space-2); border-radius: var(--radius-3); }
.produto-migalha .icon { width: var(--space-12); height: var(--space-12); }
.produto-migalha b { color: var(--texto-forte); font-weight: 600; }
.produto-migalha .fk-selo { margin-left: var(--space-4); }
.produto-titulo { margin: 0; color: var(--texto-titulo); font: 500 38px/1.02 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.produto-frase { margin: 0; max-width: 34ch; color: var(--texto-leitura); font: 500 14px/1.6 var(--font-texto); }
.produto-nota { margin: 0; color: var(--texto-nota); font: 500 11px/1.5 var(--font-texto); }
.produto-rotulo { color: var(--texto-controle); }
.produto-contagem {
  display: inline-flex; align-items: center; height: var(--space-18); padding: 0 var(--space-6); border-radius: var(--radius-6);
  background: var(--poco); box-shadow: var(--shadow-contagem-pilula); color: var(--texto-contagem);
  font: 600 10px/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
/* Receitas: faixa horizontal de miniaturas 66 × 86 (.st-left .rec .rf), com a borda direita esmaecendo. */
.produto-receitas { display: flex; flex-direction: column; gap: var(--space-10); }
.produto-receitas__fileira {
  display: flex; gap: var(--space-10); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  margin: calc(var(--space-6) * -1) calc(var(--space-10) * -1) 0 calc(var(--space-6) * -1); padding: var(--space-6) var(--space-10) var(--space-6) var(--space-6);
  -webkit-mask-image: linear-gradient(90deg, var(--bg) calc(100% - var(--space-28)), transparent); mask-image: linear-gradient(90deg, var(--bg) calc(100% - var(--space-28)), transparent);
}
.produto-receitas__fileira::-webkit-scrollbar { display: none; }
.produto-receita { flex: none; display: flex; flex-direction: column; gap: var(--space-7); width: 66px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.produto-receita__foto { position: relative; width: 66px; height: 86px; border-radius: var(--radius-11); overflow: hidden; background: var(--midia-fundo); box-shadow: var(--shadow-midia); transition: box-shadow var(--duracao-cor) var(--curva-casa); }
.produto-receita__foto img { width: 100%; height: 100%; object-fit: cover; }
.produto-receita:hover .produto-receita__foto { box-shadow: var(--shadow-midia-hover); }
.produto-receita[aria-pressed="true"] .produto-receita__foto { box-shadow: var(--shadow-midia-escolhida); }
.produto-receita:focus-visible { outline: none; }
.produto-receita:focus-visible .produto-receita__foto { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
/* A criação em andamento e o item do histórico (.info, .steps). */
.produto-criacao { display: flex; flex-direction: column; gap: var(--space-12); }
.produto-criacao__titulo { margin: var(--space-2) 0 0; color: var(--texto-titulo); font: 600 23px/1.15 var(--font-display); letter-spacing: -.025em; }
.produto-criacao__apoio { margin: 0; color: var(--texto-leitura); font: 500 12px/1.55 var(--font-texto); }
.produto-etapas { margin: 0; padding: var(--space-2) var(--space-14); list-style: none; border-radius: var(--radius-16); background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base)); box-shadow: var(--shadow-modulo); }
.produto-etapa { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-9) 0; color: var(--texto-controle); font: 600 12px/1.2 var(--font-texto); transition: color var(--duracao-cor); }
.produto-etapa + .produto-etapa { border-top: 1px solid var(--divisor-sombra); box-shadow: inset 0 1px 0 var(--divisor-luz); }
.produto-etapa--agora { color: var(--texto-forte); }
.produto-etapa--feita { color: var(--texto-leitura); }
.produto-etapa__ponto { display: grid; place-items: center; flex: none; width: var(--space-18); height: var(--space-18); border-radius: var(--radius-circulo); background: var(--poco); box-shadow: var(--shadow-poco); color: var(--lima); }
.produto-etapa__ponto .icon { width: var(--space-10); height: var(--space-10); }
.produto-etapa--feita .produto-etapa__ponto { background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base)); box-shadow: var(--shadow-tecla); }
.produto-etapa--agora .produto-etapa__ponto::after { content: ''; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-circulo); background: var(--lima); box-shadow: var(--shadow-brilho-lima); animation: fk-produto-pulso var(--duracao-pulso) ease-out infinite; }
@keyframes fk-produto-pulso { 50% { opacity: .45; } }
.produto-acoes { display: flex; flex-direction: column; gap: var(--space-8); }
.produto-acoes__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.produto-acoes__par .fk-tecla { height: calc(var(--space-32) + var(--space-4)); min-width: 0; }
/* Com o Upscale no lugar do Criar outro, o Ajustar prompt fica do tamanho dele e o upscale leva o resto, com o preço inteiro. */
.produto-acoes__par:has(.produto-upscale) { grid-template-columns: auto minmax(0, 1fr); }
.produto-upscale { gap: var(--space-5); padding-inline: var(--space-8); }
.produto-upscale > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.produto-upscale__preco { flex: none; color: var(--texto-nota); font-weight: 500; }
.produto-upscale[aria-busy="true"] > .icon:first-child { animation: fk-produto-gira var(--duracao-pulso) linear infinite; }
@keyframes fk-produto-gira { to { transform: rotate(1turn); } }
.produto-cta-baixar { height: calc(var(--space-40) + var(--space-2)); text-decoration: none; }

/* ── Centro: o Player no formato da saída (.st-center, .frame) ──────────────────────────────────────────── */
.produto-centro { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.produto-player { max-width: 100%; max-height: 100%; }
.produto-player .fk-player__quadro { max-width: 100%; max-height: 100%; }
.produto-player .fk-player__resultado.source-clip { object-fit: contain; background: var(--poco); }
/* Pedro, 21/10/2026: enquanto gera, em todo formato, o quadro fica 60% transparente para o vídeo de fundo da página correr atrás.
   O poço, o pôster e a luz ambiente descem a 40% do que eram; o anel, a etapa e o trilho seguem inteiros. */
.produto-player[data-quadro="running"] .fk-player__quadro { background: color-mix(in srgb, var(--poco) 40%, transparent); }
.produto-player[data-quadro="running"] .fk-player__poster { opacity: .4; }
.produto-player[data-quadro="running"] .fk-player__ambiente { opacity: .12; }
/* Pedro, 19/10/2026: o quadro cabe na altura do palco com folga acima da barra e fica no eixo do configurador, sem invadir a
   coluna esquerda (300 + 36). O centro ocupa o palco inteiro; o recuo à esquerda só aparece quando o eixo encostaria nela. */
@media (min-width: 1101px) {
  .produto-palco { container-type: size; }
  .produto-esquerda { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
  .produto-centro {
    --produto-quadro: min(var(--fk-player-largura), 100cqw - 336px, (100cqh - var(--space-24)) * var(--produto-proporcao));
    grid-column: 1 / -1; grid-row: 1; align-items: flex-start;
    padding-left: max(0px, 672px + var(--produto-quadro) - 100cqw);
    pointer-events: none;
  }
  .produto-centro > * { pointer-events: auto; }
  .produto-player .fk-player__quadro { width: var(--produto-quadro); height: auto; aspect-ratio: var(--produto-proporcao); max-width: none; max-height: none; }
  /* Com o card do 1080p embaixo, o quadro desce a altura do card (40) e o vão (8); em coluna, o eixo do configurador é o align-items. */
  .produto-centro[data-upgrade] {
    --produto-quadro: min(var(--fk-player-largura), 100cqw - 336px, (100cqh - var(--space-24) - 48px) * var(--produto-proporcao));
    align-items: center; justify-content: flex-start;
  }
  .produto-centro[data-upgrade] .produto-upgrade { width: var(--produto-quadro); }
}
/* O card do 1080p logo abaixo do vídeo pronto (Pedro, 19/10/2026): uma linha de 40 px na largura do vídeo, com ícone, texto curto e a
   ação pequena à direita (o lima só com o preço; no envio, o giro sobre ele, na mesma largura); num quadro estreito demais, a ação desce para a linha de baixo. O andamento corre como um filete no pé. */
.produto-centro[data-upgrade] { flex-direction: column; gap: var(--space-8); }
.produto-upgrade {
  position: relative; box-sizing: border-box; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8);
  width: min(var(--fk-player-largura), 100%); min-height: var(--space-40); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border: 1px solid color-mix(in srgb, var(--lima) 22%, transparent); border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--lima) 6%, var(--bg)); animation: fk-produto-entra calc(var(--duracao-contador) * 2) var(--curva-casa) both;
}
.produto-upgrade__icone { flex: none; display: grid; place-items: center; width: var(--space-24); height: var(--space-24); border-radius: var(--radius-circulo); background: color-mix(in srgb, var(--lima) 16%, transparent); color: var(--lima); }
.produto-upgrade__icone .icon { width: var(--space-12); height: var(--space-12); }
.produto-upgrade--running .produto-upgrade__icone .icon { animation: fk-produto-gira var(--duracao-pulso) linear infinite; }
.produto-upgrade--done { border-color: color-mix(in srgb, var(--sucesso) 24%, transparent); background: color-mix(in srgb, var(--sucesso) 5%, var(--bg)); }
.produto-upgrade--done .produto-upgrade__icone { color: var(--sucesso); background: color-mix(in srgb, var(--sucesso) 16%, transparent); }
.produto-upgrade__texto { flex: 1 1 6em; min-width: 0; color: var(--branco); font: 600 12px/1.25 var(--font-texto); }
.produto-upgrade__botao, .produto-upgrade__acoes, .produto-upgrade__pct { flex: none; margin-left: auto; }
.produto-upgrade__botao.fk-cta { width: auto; height: var(--tamanho-tecla-sm); padding: 0 var(--space-10); gap: var(--space-4); border-radius: var(--radius-9); font: 700 11.5px/1 var(--font-texto); }
.produto-upgrade__botao .icon { width: var(--space-12); height: var(--space-12); }
.produto-upgrade__botao[aria-busy="true"] { position: relative; color: transparent; }
.produto-upgrade__botao[aria-busy="true"] > .icon:first-child { position: absolute; inset: 0; margin: auto; color: var(--tinta-lima); animation: fk-produto-gira var(--duracao-pulso) linear infinite; }
.produto-upgrade__acoes { display: flex; gap: var(--space-4); }
.produto-upgrade__acoes .fk-tecla { gap: var(--space-4); padding: 0 var(--space-8); }
.produto-upgrade__acoes .icon { width: var(--space-12); height: var(--space-12); }
.produto-upgrade__pct { padding-right: var(--space-4); color: var(--lima); font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.produto-upgrade--running::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--produto-upgrade-progresso, 0%);
  background: var(--lima); transition: width var(--duracao-contador) var(--curva-casa);
}
.produto-chip-pronto { color: var(--sucesso); }
.produto-chip-pronto .icon { width: var(--space-10); height: var(--space-10); }
.produto-quadro-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); padding: var(--space-24); text-align: center; color: var(--texto-nota); font: 500 12px/1.5 var(--font-texto); }
.produto-quadro-vazio p { margin: 0; max-width: 24ch; }
.produto-quadro-vazio .icon { width: var(--space-28); height: var(--space-28); color: var(--texto-icone); }
/* Quadro vazio que recebe o vídeo (data-video-drop, Trocar personagem sem vídeo): a linha tracejada da área de envio, 12 px
   para dentro. Com o arquivo em cima (.dragging), a linha abre e acende em lima e o clarão sobe, como no .fk-areaenvio--sobre. */
.produto-player[data-video-drop] .produto-quadro-vazio::before {
  content: ''; position: absolute; inset: var(--space-12); border-radius: var(--radius-18); border: 1.5px dashed var(--traco-envio); pointer-events: none;
  transition: border-color var(--duracao-cor) var(--curva-opacidade), inset var(--duracao-media) var(--curva-casa);
}
.produto-player[data-video-drop] .produto-quadro-vazio::after {
  content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 50%, var(--lima-envio), transparent 70%); opacity: 0; pointer-events: none;
  transition: opacity var(--duracao-curta) var(--curva-opacidade);
}
.produto-player[data-video-drop] .produto-quadro-vazio > * { position: relative; z-index: 1; }
.produto-player[data-video-drop] .produto-quadro-vazio > .icon { transition: color var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa); }
.produto-player[data-video-drop].dragging .produto-quadro-vazio::before { inset: var(--space-8); border-color: var(--lima); }
.produto-player[data-video-drop].dragging .produto-quadro-vazio::after { opacity: 1; }
.produto-player[data-video-drop].dragging .produto-quadro-vazio > .icon { color: var(--lima); transform: translateY(-3px); }
.produto-quadro-vazio__enviar { gap: var(--space-6); cursor: pointer; }
.produto-quadro-vazio__enviar .icon { width: var(--space-12); height: var(--space-12); color: currentColor; }
/* O input de arquivo é invisível: o anel do teclado vai à tecla. */
.produto-quadro-vazio__enviar:has(input:focus-visible) { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-quadro-vazio__dica { margin-top: calc(var(--space-6) * -1); font: 500 11px/1.4 var(--font-texto); color: var(--texto-nota); }
/* Importar por link (Pedro, 20/10/2026): o campo no mesmo quadro vazio, abaixo do Escolher arquivo, com o Importar ao lado; o cadeado leva
   aos planos para quem não assina; enquanto o vídeo vem, uma linha lima abaixo da frase mostra o andamento. */
.produto-link { display: flex; align-items: center; gap: var(--space-6); width: min(100%, 260px); margin: 0; }
.produto-link__campo { flex: 1; min-width: 0; height: var(--space-28); padding: 0 var(--space-10); border: 0; color: var(--texto-forte); font: 500 11px/1 var(--font-texto); text-overflow: ellipsis; }
.produto-link__campo::placeholder { color: var(--texto-nota); }
.produto-link__campo:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-link__campo[aria-invalid="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--erro) 55%, transparent); }
.produto-link__importar, .produto-link--cadeado { flex: none; gap: var(--space-6); }
.produto-link__importar .icon, .produto-link--cadeado .icon { width: var(--space-12); height: var(--space-12); color: currentColor; }
.produto-link__importar[aria-busy="true"] .icon { animation: fk-produto-giro var(--duracao-giro) var(--curva-linear) infinite; }
.produto-link--cadeado small { font: 500 10px/1 var(--font-texto); color: var(--texto-nota); }
.produto-link__erro { margin: calc(var(--space-6) * -1) 0 0; max-width: 28ch; color: var(--erro); font: 600 11px/1.4 var(--font-texto); }
.produto-link__nota { margin-top: calc(var(--space-6) * -1); max-width: 30ch; font: 500 10px/1.4 var(--font-texto); color: var(--texto-nota); }
.produto-link__progresso { position: relative; width: min(70%, 180px); height: var(--space-3); border-radius: var(--radius-2); background: var(--traco-envio); overflow: hidden; }
.produto-link__progresso::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--produto-link-progresso, 0%); border-radius: inherit; background: var(--lima);
  transition: width var(--duracao-media) var(--curva-casa); }
.produto-quadro-vazio[role="status"] > .icon { animation: fk-produto-giro var(--duracao-giro) var(--curva-linear) infinite; }
@media (prefers-reduced-motion: reduce) { .produto-link__importar[aria-busy="true"] .icon, .produto-quadro-vazio[role="status"] > .icon { animation: none; } }
/* Saída em imagem do motor studio (fase 3; HANDOFF, quadro de 6 formatos 520 × 500 e de 9 fotos 416 × 520): as peças numa grade,
   cada uma na proporção do formato dela, com a largura e a altura que a marcação calcula para caber na célula. */
.produto-pecas {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; gap: var(--space-8); padding: var(--space-12);
  grid-template-columns: repeat(var(--produto-pecas-colunas, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--produto-pecas-linhas, 1), minmax(0, 1fr));
}
.produto-peca { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-11); background: var(--midia-fundo); box-shadow: var(--shadow-midia); }
.produto-peca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produto-peca figcaption { position: absolute; left: var(--space-5); bottom: var(--space-5); height: var(--space-18); max-width: calc(100% - var(--space-10)); padding: 0 var(--space-6); overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.produto-peca__estado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-8); color: var(--texto-nota); text-align: center; font: 500 10px/1.35 var(--font-texto); }
.produto-peca__estado .icon { width: var(--space-18); height: var(--space-18); color: var(--texto-icone); }
.produto-peca--running .produto-peca__estado .icon { animation: fk-produto-giro var(--duracao-giro) var(--curva-linear) infinite; }
@keyframes fk-produto-giro { to { transform: rotate(360deg); } }
.produto-peca__baixar { position: absolute; right: var(--space-5); top: var(--space-5); display: grid; place-items: center; width: var(--space-24); height: var(--space-24); padding: 0; color: var(--texto-forte); opacity: 0; transition: opacity var(--duracao-cor) var(--curva-casa); }
.produto-peca:hover .produto-peca__baixar, .produto-peca__baixar:focus-visible { opacity: 1; }
.produto-peca__baixar:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-peca__baixar .icon { width: var(--space-12); height: var(--space-12); }
/* Antes e depois de uma foto: as duas camadas do Comparador do DS (máscara na costura), as etiquetas no pé (o topo é dos chips do
   Player) e a faixa que a pessoa arrasta. */
.produto-comparar { --fk-comparador-pos: 50%; --fk-comparador-pluma: 6%; --fk-comparador-halo: 120px; position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.produto-comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.produto-comparar__antes {
  -webkit-mask-image: linear-gradient(90deg, var(--bg) calc(var(--fk-comparador-pos) - var(--fk-comparador-pluma)), transparent calc(var(--fk-comparador-pos) + var(--fk-comparador-pluma)));
  mask-image: linear-gradient(90deg, var(--bg) calc(var(--fk-comparador-pos) - var(--fk-comparador-pluma)), transparent calc(var(--fk-comparador-pos) + var(--fk-comparador-pluma)));
}
.produto-comparar__etiqueta { position: absolute; bottom: var(--space-12); z-index: 3; height: var(--space-24); padding: 0 var(--space-10); font-size: 10.5px; pointer-events: none; }
.produto-comparar__etiqueta--antes { left: var(--space-12); }
.produto-comparar__etiqueta--depois { right: var(--space-12); }
.produto-comparar__faixa { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.produto-comparar:has(.produto-comparar__faixa:focus-visible) { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: calc(var(--tamanho-foco) * -1); border-radius: inherit; }

/* ── Historico: coluna fixa de 104 px a 12 px da direita (.hist, .hi-i, .hi-f 80 × 106) ─────────────────── */
.produto-historico {
  position: absolute; right: var(--space-12); top: var(--space-6); bottom: var(--space-12); width: 104px; z-index: 41;
  display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-14) 0 var(--space-10); border-radius: var(--radius-22);
  background: url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao), linear-gradient(180deg, var(--casca-topo), var(--casca-meio) 34%, var(--casca-base)); box-shadow: var(--shadow-casca);
}
.produto-historico__cabeca { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.produto-historico__cabeca .fk-rotulo { font-size: 9.5px; letter-spacing: .14em; }
.produto-historico__lista {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-14); overflow-y: auto; overflow-x: hidden;
  padding: var(--space-4) 0 var(--space-32); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-56)), transparent); mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-56)), transparent);
}
.produto-historico__lista::-webkit-scrollbar { display: none; }
.produto-historico__item { display: flex; flex-direction: column; gap: var(--space-7); width: 80px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.produto-historico__quadro { position: relative; width: 80px; height: 106px; border-radius: var(--radius-11); overflow: hidden; background: var(--midia-fundo); box-shadow: var(--shadow-midia); transition: box-shadow var(--duracao-cor) var(--curva-casa); }
.produto-historico__quadro :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produto-historico__item:hover .produto-historico__quadro { box-shadow: var(--shadow-midia-hover); }
.produto-historico__item[aria-pressed="true"] .produto-historico__quadro { box-shadow: var(--shadow-midia-escolhida); }
.produto-historico__item:focus-visible { outline: none; }
.produto-historico__item:focus-visible .produto-historico__quadro { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-historico__quadro .fk-vidro { position: absolute; left: var(--space-5); bottom: var(--space-5); height: var(--space-18); padding: 0 var(--space-6); font-size: 9px; }
.produto-historico__nome { width: 80px; color: var(--texto-leitura); font: 600 10px/1.2 var(--font-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.produto-historico__item:is(:hover, [aria-pressed="true"]) .produto-historico__nome { color: var(--texto-forte); }
.produto-historico__item.is-run .produto-historico__quadro :is(img, video) { filter: blur(var(--space-8)) saturate(.6) brightness(.6); transform: scale(1.15); }
/* Anel do item em andamento (.hi-run: 46 px, r 19, 119,38 = 2π × 19). */
.produto-historico__anel { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 50%, transparent); }
.produto-historico__anel svg { position: relative; width: 46px; height: 46px; transform: rotate(-90deg); }
.produto-historico__anel circle { fill: none; stroke: color-mix(in srgb, var(--branco) 16%, transparent); stroke-width: 3; }
.produto-historico__anel .produto-historico__valor { stroke: var(--lima); stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: calc(119.38px * (1 - var(--produto-progresso, 0) / 100)); transition: stroke-dashoffset var(--duracao-rapida) var(--curva-linear); }
.produto-historico__anel b { position: absolute; color: var(--texto-titulo); font: 600 11px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.produto-historico__ponto { position: absolute; right: var(--space-6); top: var(--space-6); width: var(--space-8); height: var(--space-8); border-radius: var(--radius-circulo); background: var(--lima); box-shadow: var(--shadow-brilho-lima); }
.produto-historico__vazio { margin: 0; padding: 0 var(--space-10); color: var(--texto-nota); font: 500 10px/1.45 var(--font-texto); text-align: center; }
/* O pé da coluna: os 10 mais recentes estão acima; "Ver todos nos Assets" leva à biblioteca inteira (Pedro, 20/10/2026). */
.produto-historico__todos { flex: none; align-self: center; flex-direction: column; gap: var(--space-4); width: 80px; height: auto; padding: var(--space-8) var(--space-4); font-size: 9.5px; line-height: 1.25; white-space: normal; text-align: center; }
.produto-historico__todos .icon { width: 14px; height: 14px; }

/* ── Configurador único: casca fixa no pé (.cfg, .cfg-b), sem a linha de cima em nenhum produto (Pedro, 20/10/2026) ─────────────────────────────────────────── */
.produto-config {
  position: absolute; left: var(--space-40); right: calc(var(--space-64) * 2 + var(--space-4)); bottom: var(--space-12); height: 248px; z-index: 40;
  max-width: 1280px; margin-inline: auto;
  display: flex; flex-direction: column; padding: var(--space-10);
  animation: fk-produto-barra calc(var(--duracao-contador) + var(--duracao-media)) var(--curva-casa) both;
}
@keyframes fk-produto-barra { from { opacity: 0; transform: translateY(var(--space-16)); } }
.produto-selo-receita { display: inline-flex; align-items: center; gap: var(--space-6); height: var(--space-26); padding: 0 var(--space-9); border-radius: var(--radius-8); color: var(--violeta); background: color-mix(in srgb, var(--violeta) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violeta) 22%, transparent); font: 600 10.5px/1 var(--font-display); white-space: nowrap; }
.produto-selo-receita .icon { width: var(--space-11); height: var(--space-11); }
.produto-selo-receita--minha { color: var(--texto-leitura); background: var(--fundo-hover); box-shadow: inset 0 0 0 1px var(--filete-midia); }
/* O selo da receita no rótulo do módulo do meio: avança 4 px sobre o respiro de cima e de baixo para o rótulo quase não crescer. */
.produto-rotulo__selo { display: inline-flex; align-items: center; gap: var(--space-6); margin-block: calc(var(--space-4) * -1); letter-spacing: 0; }
/* Corpo: três módulos de 292 px, 1fr e 340 px, vão de 8 (.cfg-b). */
.produto-config__corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 292px minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); gap: var(--space-8); }
.produto-modulo { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; min-height: 0; padding: var(--space-11) var(--space-12); }
.produto-modulo__nota { margin: 0; color: var(--texto-nota); font: 500 10.5px/1.4 var(--font-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produto-modulo--refs { overflow: hidden; }
.produto-modulo--refs .produto-modulo__nota { margin-top: auto; }
/* Referências: miniaturas de 58 × 76 com a etiqueta @ (.slot .sf). */
.produto-slots { display: flex; gap: var(--space-8); align-items: flex-start; overflow-x: auto; overflow-y: hidden; padding: var(--space-6) var(--space-6) var(--space-2); margin: calc(var(--space-4) * -1); scrollbar-width: none; }
.produto-slots::-webkit-scrollbar { display: none; }
/* Segurar e arrastar com o mouse (drag-scroll.js): enquanto arrasta, a mão fechada vale na fileira toda e nada é selecionado. */
.produto-slots.is-arrastando, .produto-slots.is-arrastando * { cursor: grabbing; user-select: none; }
.produto-slot-caixa { position: relative; flex: none; }
/* Ninja (Pedro, 22/10/2026): o seletor Texto/Imagem no lugar do rótulo Referências, as cenas em quadros de 58 × 52 e, abaixo, o título e o
   texto do modo em corpo de leitura, sem corte de linhas. No Imagem, o "Ver exemplo" fica na linha do título. */
.produto-modulo--modos { gap: var(--space-8); }
.produto-modulo--modos > .produto-seg { align-self: flex-start; flex: none; }
.produto-modulo--modos .produto-slots { flex: none; }
.produto-modulo--modos .produto-slot { width: auto; min-width: 58px; gap: var(--space-4); }
.produto-modulo--modos .produto-slot__quadro { width: 58px; height: 52px; }
.produto-modo-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-8); row-gap: var(--space-2); min-height: 0; }
.produto-modo-intro__titulo { grid-column: 1; margin: 0; color: var(--texto-titulo); font: 700 14px/1.25 var(--font-display); letter-spacing: -0.01em; }
.produto-modo-intro__exemplo { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: var(--space-4); padding: 0; border: 0; background: none; color: var(--lima); font: 600 12px/1.25 var(--font-texto); white-space: nowrap; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lima) 45%, transparent); text-underline-offset: 3px; }
.produto-modo-intro__exemplo:hover { text-decoration-color: currentColor; }
.produto-modo-intro__exemplo:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: 2px; border-radius: var(--radius-4); }
.produto-modo-intro__exemplo .icon { width: 13px; height: 13px; }
.produto-modo-intro__texto { grid-column: 1 / -1; margin: 0; color: var(--texto-leitura); font: 500 12px/1.45 var(--font-texto); text-wrap: pretty; }
/* O exemplo e a confirmação das cenas: as duas imagens lado a lado, com a seta entre elas, em quadros 16:9 (Pedro, 22/10/2026). As cenas
   da pessoa aparecem inteiras no quadro, em qualquer proporção. */
dialog.cena-dialog { width: min(760px, calc(100% - 32px)); }
.cena-dialog .dialog-description { font-size: 13px; line-height: 1.5; margin-bottom: var(--space-16); }
.cena-par { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-12); }
.cena-par__item { margin: 0; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.cena-par__item img, .cena-par__vazio { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--radius-11); background: var(--midia-fundo); box-shadow: var(--shadow-miniatura); }
.cena-par__vazio { display: grid; place-items: center; padding: var(--space-12); color: var(--texto-nota); font: 500 12px/1.4 var(--font-texto); text-align: center; }
.cena-par__item figcaption { color: var(--texto-titulo); font: 700 13px/1.2 var(--font-display); text-align: center; }
.cena-par__seta { color: var(--lima); }
.cena-par__seta .icon { width: 20px; height: 20px; }
.cena-par--pequeno { max-width: 440px; gap: var(--space-8); }
.cena-par--pequeno .cena-par__item figcaption { font-size: 11px; color: var(--texto-leitura); }
.cena-par--pequeno .cena-par__seta .icon { width: 14px; height: 14px; }
/* No celular, as cenas da pessoa e as do exemplo ficam uma embaixo da outra, com a seta para baixo. */
@media (max-width: 560px) {
  .cena-par { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .cena-par__seta { justify-self: center; transform: rotate(90deg); }
}
.cena-exemplo { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-20); padding-top: var(--space-16); border-top: 1px solid var(--filete-midia); }
.cena-exemplo__rotulo { color: var(--texto-controle); font: 600 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.cena-prompt { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-16) 0 0; padding: var(--space-12) var(--space-14); border-radius: var(--radius-11); background: var(--fundo-hover); color: var(--texto-forte); font: 500 13px/1.5 var(--font-texto); }
.cena-prompt span { color: var(--texto-controle); font: 600 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.produto-slot { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 58px; padding: 0; border: 0; background: none; cursor: pointer; }
.produto-slot__quadro { position: relative; display: grid; place-items: center; width: 58px; height: 76px; border-radius: var(--radius-11); overflow: hidden; background: var(--midia-fundo); box-shadow: var(--shadow-miniatura); color: var(--texto-icone); transition: box-shadow var(--duracao-cor) var(--curva-casa); }
.produto-slot__quadro > :is(img, video, .catalog-portrait, .portrait, .owned-preview-media) { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.produto-slot__quadro :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.produto-slot__quadro .catalog-portrait img { position: absolute; inset: 0; }
.produto-slot:hover .produto-slot__quadro { box-shadow: var(--shadow-midia-hover); }
.produto-slot:focus-visible { outline: none; }
.produto-slot:is(:focus-visible, :focus-within) .produto-slot__quadro { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-slot--escolhendo .produto-slot__quadro { box-shadow: var(--shadow-midia-escolhida); }
.produto-slot--vazio .produto-slot__quadro { background: var(--poco); box-shadow: var(--shadow-poco); }
.produto-slot--voz .produto-slot__quadro { color: var(--lima); background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base)); }
.produto-slot__icone .icon { width: var(--space-18); height: var(--space-18); }
.produto-slot__etiqueta { position: absolute; left: 50%; bottom: var(--space-4); z-index: 2; transform: translateX(-50%); }
.produto-slot__pequeno { position: absolute; left: 0; right: 0; bottom: var(--space-6); color: var(--texto-nota); font: 600 9px/1 var(--font-texto); text-align: center; }
.produto-slot__nome { max-width: 58px; color: var(--texto-forte); font: 600 10.5px/1 var(--font-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.produto-slot__tirar { position: absolute; top: calc(var(--space-6) * -1); right: calc(var(--space-6) * -1); z-index: 3; display: grid; place-items: center; width: var(--space-20); height: var(--space-20); padding: 0; border: 0; border-radius: var(--radius-circulo); cursor: pointer; color: var(--texto-tecla); background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base)); box-shadow: var(--shadow-tecla); }
.produto-slot__tirar:hover { color: var(--branco); }
.produto-slot__tirar:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: 1px; }
.produto-slot__tirar .icon { width: var(--space-10); height: var(--space-10); }
/* O envio em andamento: só uma barrinha fina no lugar do nome da miniatura que ele preenche (Pedro, 19/10/2026). */
.produto-slot--carregando .produto-slot__nome { visibility: hidden; }
.upload-barra { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); pointer-events: none; }
.upload-barra .upload-progress-track { height: 3px; margin: 0; }
/* Prompt: o poço do texto com as etiquetas em chips (.promptw, .script) e o editor com a contagem. */
.produto-prompt { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; transition: box-shadow var(--duracao-cor) var(--curva-casa); }
/* O prompt é sempre um campo livre (sem Editar): um anel cinza discreto aparece enquanto a pessoa escreve nele, sem roxo (Pedro, 23/10/2026). */
.produto-prompt--editando:focus-within { box-shadow: var(--shadow-poco), 0 0 0 1px var(--borda-escolha); }
.produto-roteiro { flex: 1; min-height: 0; overflow: hidden; padding: var(--space-12) var(--space-14) var(--space-2); color: var(--texto-forte); font: 500 13px/1.62 var(--font-texto); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.produto-roteiro__vazio { color: var(--texto-nota); }
.produto-chip { height: var(--space-20); font-size: 11px; vertical-align: 1px; }
.produto-chip img { width: 15px; height: 15px; margin: 0 var(--space-5) 0 calc(var(--space-3) * -1); border-radius: var(--radius-4); object-fit: cover; }
.produto-chip--solto { opacity: .7; }
.produto-prompt textarea { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: var(--space-12) var(--space-14) var(--space-2); color: var(--texto-titulo); font: 500 13px/1.55 var(--font-texto); }
.produto-prompt .mention-menu { z-index: 50; }
/* Os planos do Estúdio de cinema (Seedance 2.0 multiplano): cada plano com o número, a duração e o próprio prompt; o total embaixo. */
.produto-planos { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.produto-planos__lista { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-8); overflow-y: auto; scrollbar-width: thin; }
.produto-plano { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-10); border-radius: var(--radius-11); }
.produto-plano__cabeca { display: flex; align-items: center; gap: var(--space-8); }
.produto-plano__tempo { display: inline-flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.produto-plano__segundos { min-width: 30px; text-align: center; color: var(--texto-forte); font: 600 12px/1 var(--font-texto); }
.produto-plano__texto { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--texto-titulo); font: 500 12px/1.5 var(--font-texto); }
.produto-plano__texto:focus-visible { box-shadow: 0 0 0 1px var(--borda-escolha); border-radius: var(--radius-6); }
.produto-planos__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.produto-planos__total { color: var(--texto-nota); font: 500 11px/1.4 var(--font-texto); }
/* A voz do Estúdio de áudio no quadro: a foto do influencer, o título, o roteiro e o player do navegador. */
.produto-voz { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-16); padding: var(--space-20); }
.produto-voz__foto { flex: none; width: 112px; height: 150px; border-radius: var(--radius-11); object-fit: cover; box-shadow: var(--shadow-midia); background: var(--midia-fundo); }
.produto-voz__foto--vazia { display: grid; place-items: center; color: var(--texto-icone); }
.produto-voz__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.produto-voz__titulo { display: inline-flex; align-items: center; gap: var(--space-6); }
.produto-voz__roteiro { color: var(--texto-forte); font: 500 13px/1.5 var(--font-texto); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.produto-voz__audio { width: 100%; }
/* A música da Fenaky Music no quadro (Pedro, 21/10/2026): a foto 3:4 do DJ da página no lugar do disco, com o brilho lima da boate, o
   título, a ideia (ou o estilo da letra própria) e o player do navegador. */
.produto-musica { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-20); padding: var(--space-20) var(--space-24); }
.produto-musica__retrato {
  flex: none; height: 100%; max-height: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-11); object-fit: cover; background: var(--midia-fundo);
  box-shadow: var(--shadow-midia), 0 0 0 1px color-mix(in srgb, var(--lima) 22%, transparent), 0 0 40px -14px var(--lima-brilho);
}
.produto-musica__retrato--vazio { display: grid; place-items: center; color: var(--lima); }
.produto-musica__retrato--vazio .icon { width: 40%; height: 40%; }
.produto-musica__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.produto-musica__titulo { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--lima); }
.produto-musica__ideia { margin: 0; color: var(--texto-forte); font: 500 13px/1.5 var(--font-texto); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.produto-musica__audio { width: 100%; }
/* A música pronta em duas versões (Pedro, 24/10/2026): o rótulo pequeno sobre o player de cada uma. */
.produto-musica__versoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.produto-musica__versao { display: flex; flex-direction: column; gap: var(--space-4); }
.produto-musica__versao-rotulo { color: var(--texto-nota); font: 600 11px/1.2 var(--font-texto); }
/* No celular a foto 3:4 tomava a largura do quadro e o player sumia: lá, a foto sai do quadro (o DJ segue no fundo da página). */
@media (max-width: 560px) { .produto-musica__retrato { display: none; } .produto-musica { padding: var(--space-40) var(--space-16) var(--space-16); } }
/* O modo Letra própria no módulo do meio: o título e o estilo numa linha e a letra, com as ferramentas do prompt, no resto da altura. */
.produto-letra { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.produto-letra__linha { display: flex; gap: var(--space-6); }
.produto-letra__linha .produto-campo { min-width: 0; font-weight: 500; }
.produto-letra__titulo { flex: 1 1 34%; }
.produto-letra__estilo { flex: 2 1 66%; }
.produto-letra__poco textarea { white-space: pre-wrap; }
.produto-letra__instrumental { flex: 1; display: flex; align-items: center; gap: var(--space-8); margin: 0; padding: var(--space-12) var(--space-14); border-radius: var(--radius-12); color: var(--texto-nota); font: 500 12px/1.5 var(--font-texto); }
.produto-letra__instrumental .icon { flex: none; color: var(--lima); }
/* A bandeja dos ajustes finos da música: o que evitar, a fidelidade ao estilo e a ousadia, lado a lado. */
.produto-ajustes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); align-items: end; }
/* Três campos não pedem a altura das grades: a bandeja dos ajustes encosta no configurador, na altura do que tem. */
.produto-bandeja[data-bandeja="musica-ajustes"] { top: auto; }
.produto-bandeja[data-bandeja="musica-ajustes"] .produto-bandeja__corpo { flex: none; }
.produto-ajuste { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.produto-ajuste .produto-campo { width: 100%; }
@media (max-width: 900px) { .produto-ajustes { grid-template-columns: minmax(0, 1fr); } }
.produto-historico__audio { position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; place-items: center; width: var(--space-20); height: var(--space-20); border-radius: var(--radius-circulo); color: var(--lima); background: var(--midia-fundo); }
.produto-prompt__ferramentas { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-8) var(--space-6); }
.produto-prompt__contagem { margin-left: auto; color: var(--texto-nota); font: 500 10.5px/1 var(--font-display); font-variant-numeric: tabular-nums; }
/* A contagem que abre as ferramentas fica à esquerda; o Magic e o microfone fecham a linha à direita (Pedro, 20/10/2026). */
.produto-prompt__contagem:first-child { margin-left: 0; }
/* Acima do limite do modelo escolhido (o texto veio de um modelo que aceita mais): o pedido só sai depois de encurtar. */
.produto-prompt__contagem[data-acima] { color: var(--erro); }
.produto-prompt__acoes { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
/* Trecho e marcação (Trocar personagem no motor C): em duas colunas, sem rolagem do módulo, a linha do tempo do trecho à esquerda e uma
   marcação por personagem à direita (Pedro, 19/10/2026); numa largura estreita elas empilham. */
.produto-modulo--meio[data-meio="trecho"] { overflow-y: auto; scrollbar-width: thin; }
.produto-modulo--meio .segment-timeline { margin: 0; }
.produto-trecho { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; gap: var(--space-12); }
.produto-trecho > * { min-width: 0; }
.produto-marcas { display: flex; flex-direction: column; gap: var(--space-6); max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.produto-marcas > * { flex: none; margin: 0; }
.produto-marcas .pin-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5) var(--space-8); padding: var(--space-6) var(--space-8); }
.produto-marcas .pin-mark { grid-column: 1 / -1; min-height: 30px; padding-block: 0; }
/* Saída: Modelo, Formato e Duração em linhas de 34 px e o CTA de 44 px no pé (.cspec, .cs-row). */
.produto-modulo--saida { gap: var(--space-8); padding: var(--space-10); }
.produto-saida { display: flex; flex-direction: column; border-radius: var(--radius-12); background: color-mix(in srgb, var(--branco) 2%, transparent); box-shadow: inset 0 0 0 1px var(--filete-midia); }
.produto-saida__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); height: calc(var(--space-32) + var(--space-2)); padding: 0 var(--space-4) 0 var(--space-12); }
.produto-saida__linha + .produto-saida__linha { border-top: 1px solid var(--divisor-sombra); box-shadow: inset 0 1px 0 var(--divisor-luz); }
.produto-saida__linha > span:first-child { color: var(--texto-controle); font: 500 11.5px/1 var(--font-texto); }
.produto-saida__valor { display: flex; align-items: center; gap: var(--space-6); }
.produto-saida__fixo { display: inline-flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-10); color: var(--texto-forte); font: 600 12px/1 var(--font-texto); }
.produto-saida__fixo small { color: var(--texto-controle); font: 500 10.5px/1 var(--font-display); }
.produto-seg { display: inline-grid; grid-auto-flow: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-9); }
.produto-seg__opcao { display: flex; align-items: center; justify-content: center; gap: var(--space-6); height: var(--space-26); padding: 0 var(--space-8); border: 0; border-radius: var(--radius-7); background: none; cursor: pointer; color: var(--texto-controle); font: 600 11.5px/1 var(--font-display); white-space: nowrap; transition: color var(--duracao-cor), background var(--duracao-cor); }
.produto-seg__opcao:hover { color: var(--texto-forte); }
.produto-seg__opcao:is([aria-pressed="true"], [aria-selected="true"]) { color: var(--texto-titulo); background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base)); box-shadow: var(--shadow-seg-acesa); }
.produto-seg__opcao[aria-disabled="true"] { opacity: var(--opacidade-desligado); cursor: not-allowed; }
.produto-seg__opcao:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: 1px; }
/* Videos of up to one minute below the Creator plan: the padlock leads to the plans (public/product-studio.js lockedMarkup). */
.produto-seg__opcao--cadeado { gap: var(--space-4); color: var(--texto-dica); }
.produto-seg__opcao--cadeado svg { width: 11px; height: 11px; flex: none; }
.produto-seg__opcao--cadeado:hover { color: var(--texto-forte); }
/* With the long options the Duração row has up to seven choices: only when they do not fit, the choices go under the label and wrap in the
   well instead of running past the screen; when they fit, the row is the one it always was. */
.produto-saida__linha:has(.produto-seg) { flex-wrap: wrap; height: auto; min-height: calc(var(--space-32) + var(--space-2)); row-gap: var(--space-4); }
.produto-saida__linha:has(.produto-seg) > .produto-saida__valor { max-width: 100%; margin-left: auto; }
.produto-saida__linha .produto-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.produto-seg__forma { display: inline-block; border: 1.5px solid currentColor; border-radius: var(--radius-2); }
.produto-seg__forma--vertical { width: 8px; height: 13px; }
.produto-seg__forma--horizontal { width: 13px; height: 8px; }
.produto-seg__forma--quadrado { width: 11px; height: 11px; }
.produto-erro { margin: 0; color: var(--erro); font: 600 11px/1.4 var(--font-texto); }
.produto-cta-caixa { display: flex; flex-direction: column; gap: var(--space-6); margin-top: auto; }
/* A model with many options (the Ninja: mode, eight formats, 5 to 20 s, sound, reasoning and seed): the rows scroll inside the module and the
   button to generate stays in view. The list and the number fields are plain wells until the model's own skin arrives. */
.produto-saida { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.produto-campo { height: calc(var(--space-26) + var(--space-2)); padding: 0 var(--space-8); border: 0; border-radius: var(--radius-8); color: var(--texto-forte); font: 600 12px/1 var(--font-texto); }
.produto-campo:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: 1px; }
.produto-campo--numero { width: 11ch; }
.produto-campos { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-4); }
.produto-campos .produto-campo--numero { width: 7ch; }
.produto-cta { height: calc(var(--space-40) + var(--space-4)); }
.produto-cta .icon { width: 15px; height: 15px; }

/* ── Bandeja de escolha: sobe acima do configurador até logo abaixo do menu, no alto do palco (fecha 420 ms depois da escolha) ── */
.produto-bandeja {
  position: absolute; left: var(--space-40); right: calc(var(--space-64) * 2 + var(--space-4)); top: var(--space-6); bottom: calc(248px + var(--space-12) * 2); z-index: 45;
  max-width: 1280px; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20) var(--space-22) var(--space-18);
  animation: fk-produto-bandeja var(--duracao-contador) var(--curva-casa) both;
}
.produto-bandeja[hidden] { display: none; }
@keyframes fk-produto-bandeja { from { opacity: 0; transform: translateY(var(--space-24)) scale(.985); filter: blur(var(--space-10)); } }
.produto-bandeja__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-20); padding-bottom: var(--space-14); border-bottom: 1px solid var(--sulco-luz); }
.produto-bandeja__titulo { margin: var(--space-10) 0 0; color: var(--texto-titulo); font: 600 22px/1.1 var(--font-display); letter-spacing: -.025em; }
.produto-bandeja__apoio { margin: var(--space-6) 0 0; color: var(--texto-leitura); font: 500 12px/1.4 var(--font-texto); }
.produto-bandeja__ferramentas { display: flex; align-items: center; gap: var(--space-10); }
.produto-bandeja__corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-14); }
.produto-bandeja__corpo--sem-envio { grid-template-columns: minmax(0, 1fr); }
.produto-bandeja__grade { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: var(--space-4); }
/* O envio: o poço só com o ícone e a ação, centrados; a dica fica abaixo, fora da linha tracejada. */
.produto-envio-caixa { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.fk-areaenvio.produto-envio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-10); height: 132px; padding: var(--space-16); border-radius: var(--radius-16); text-align: center; cursor: pointer; background: var(--poco); box-shadow: var(--shadow-poco); }
.produto-envio:hover { box-shadow: var(--shadow-poco), inset 0 0 0 1px var(--traco-envio-hover); }
.produto-envio:focus-within { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-envio__icone { display: grid; place-items: center; width: var(--space-40); height: var(--space-40); border-radius: var(--radius-circulo); background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base)); box-shadow: var(--shadow-tecla); color: var(--texto-tecla); }
.produto-envio__titulo { color: var(--texto-forte); font: 600 12px/1.2 var(--font-texto); }
.produto-envio__dica { margin: 0; padding: 0 var(--space-4); color: var(--texto-nota); font: 500 10.5px/1.4 var(--font-texto); text-align: center; }
/* As grades que a bandeja recebe (influencers, vídeos, trends, imagens): cartões pequenos na largura da bandeja. */
.produto-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: var(--space-12) var(--space-10); align-content: start; margin: 0; padding: 0; list-style: none; }
.produto-grade--videos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.produto-cartao { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--texto-leitura); font: 600 10.5px/1.25 var(--font-texto); }
.produto-cartao__foto { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-11); overflow: hidden; background: var(--midia-fundo); box-shadow: var(--shadow-midia); transition: box-shadow var(--duracao-cor) var(--curva-casa); }
.produto-grade--videos .produto-cartao__foto { aspect-ratio: 9 / 16; }
.produto-cartao__foto > :is(img, video, .catalog-portrait, .portrait, .owned-preview-media) { position: absolute; inset: 0; width: 100%; height: 100%; }
.produto-cartao__foto :is(img, video, .owned-preview-placeholder) { width: 100%; height: 100%; object-fit: cover; }
.produto-cartao:hover .produto-cartao__foto { box-shadow: var(--shadow-midia-hover); }
.produto-cartao[aria-pressed="true"] .produto-cartao__foto { box-shadow: var(--shadow-midia-escolhida); }
.produto-cartao[aria-pressed="true"] { color: var(--texto-forte); }
.produto-cartao:focus-visible { outline: none; }
.produto-cartao:focus-visible .produto-cartao__foto { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-cartao__uso { position: absolute; left: var(--space-6); top: var(--space-6); }
.produto-bandeja__grade .empty-state { min-height: 0; height: 100%; gap: var(--space-6); padding: var(--space-12) 0; color: var(--texto-nota); }
.produto-bandeja__grade .empty-state > .icon { width: var(--space-20); height: var(--space-20); margin: 0; }
.produto-bandeja__grade .empty-state h2 { margin: 0; color: var(--texto-forte); font: 600 14px/1.3 var(--font-display); }
.produto-bandeja__grade .empty-state p { margin: 0; font: 500 12px/1.5 var(--font-texto); }
.produto-bandeja__grade .audio-list { margin: 0; }
/* O campo "O que é @ImagemN" (ou "Para que serve @AudioN") do slot que abriu a bandeja: uma linha só, acima da grade. */
.produto-dica { margin: 0 0 var(--space-14); }
.produto-dica .genai-tag { margin-right: 0; }
.produto-veu { position: absolute; inset: 0; z-index: 39; padding: 0; border: 0; cursor: default; background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(var(--space-6)); backdrop-filter: blur(var(--space-6)); }
.produto-veu[hidden] { display: none; }

/* A pílula do topo: o pedido em andamento (ou pronto) quando a pessoa está em outra página. */
.produto-pilula {
  display: inline-flex; align-items: center; gap: var(--space-8); height: var(--tamanho-saldo); padding: 0 var(--space-12) 0 var(--space-8);
  border: 0; border-radius: var(--radius-pilula); cursor: pointer; color: var(--texto-tecla); font: 600 11.5px/1 var(--font-texto); white-space: nowrap;
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base)); box-shadow: var(--shadow-tecla);
}
.produto-pilula[hidden] { display: none; }
.produto-pilula:hover { color: var(--branco); background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base)); }
.produto-pilula:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.produto-pilula .icon { width: var(--space-14); height: var(--space-14); color: var(--sucesso); }
.produto-pilula__anel { width: var(--space-16); height: var(--space-16); border-radius: var(--radius-circulo); background: conic-gradient(var(--lima) calc(var(--produto-progresso, 0) * 1%), color-mix(in srgb, var(--branco) 14%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 52%, var(--bg) 54%); mask: radial-gradient(circle, transparent 52%, var(--bg) 54%); }
.produto-pilula__lado { color: var(--texto-unidade); font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Telas mais baixas que a prancha: o título encolhe e a frase sai. Abaixo de 1100 px a página empilha (celular fica fora deste desenho). */
@media (max-height: 820px) { .produto-titulo { font-size: 32px; } .produto-frase { display: none; } }
@media (max-width: 1100px) {
  /* A luz ambiente do player passa 80 px do quadro e, com a página empilhada, empurrava a tela para o lado no celular (Pedro,
     22/10/2026). O corte fica na borda do main, que é a da tela à direita e a do trilho à esquerda. */
  main:has(> .produto-pagina) { overflow-x: clip; }
  .produto-pagina { position: static; display: flex; flex-direction: column; gap: var(--space-16); }
  .produto-palco, .produto-historico, .produto-config, .produto-bandeja { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; max-height: none; }
  .produto-palco { grid-template-columns: minmax(0, 1fr); }
  .produto-historico__lista { flex-direction: row; overflow-x: auto; }
  .produto-historico__todos { flex-direction: row; align-self: flex-start; width: auto; margin-inline: var(--space-12); padding: 0 var(--space-10); height: var(--tamanho-tecla-sm); font-size: 11px; }
  .produto-config__corpo { grid-template-columns: minmax(0, 1fr); }
  .produto-veu { position: fixed; }
}
@media (prefers-reduced-motion: reduce) {
  .produto-esquerda > *, .produto-config, .produto-bandeja { animation: none; }
  .produto-etapa--agora .produto-etapa__ponto::after { animation: none; }
}