/* Fenaky Design System · bundle (00-base + 54 componentes). Origem: pacote aprovado
   fenaky-design-system/project/components/bundle.css (sha256 47c28a355bea9726a867396c893e18452bec012d942a71c9dd3f086089623958). Sem alteração de regra; as 8
   URLs do grão do ambiente do artefato apontam para grain.png, servido ao lado deste arquivo. */
/* Source: 00-base.css */
/* Fenaky Design System · 00-base — as primitivas do material.
   Página, casca, módulo, poço, sulco, tecla, CTA, segmentado, rótulo, vidro e etiqueta @, mais o foco e o movimento
   reduzido. Toda cor, sombra, raio, espaço, duração e curva vem de var(--token) (tokens.json); os gradientes são
   montados aqui a partir das paradas. Fontes: Main.dc.html, NotificacoesCatalogo.dc.html, Planos, Conta e Home do
   canvas aprovado e public/material.css (PR #129). Só este arquivo define estas classes; os componentes as usam. */

/* Medidas pela borda em toda peça fk- (como nas pranchas). */
:where([class*="fk-"]),
:where([class*="fk-"])::before,
:where([class*="fk-"])::after { box-sizing: border-box; }

/* Foco do teclado: um anel cinza (--anel-foco) de 2 px a 3 px do elemento, fora do lima e das teclas. Especificidade zero, para um
   componente levar o anel ao contêiner quando o campo não tem borda própria (ex.: o poço do prompt). */
:where(:focus-visible) { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }

/* ── Página ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.fk-pagina {
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  color: var(--texto);
  font-family: var(--font-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Grade de pontos opcional, mais viva no alto à direita, para as cascas parecerem soltas da página. */
.fk-pagina--pontos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--camada-fundo);
  pointer-events: none;
  background-image: radial-gradient(var(--pagina-pontos) 1px, transparent 1.4px);
  background-size: var(--tamanho-grade-pontos) var(--tamanho-grade-pontos);
  /* Na máscara só o alfa conta: var(--bg) é opaco. */
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 28%, var(--bg) 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 70% at 72% 28%, var(--bg) 20%, transparent 80%);
}

/* ── Casca: flutua sobre a página (rail, painéis, central, diálogos, pop-up, cards grandes) ─────────────────── */
/* Grão por cima do gradiente das paradas, borda clara no topo (::after mascarado) e sombra longa. */
.fk-casca {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-22);
  background:
    url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao),
    linear-gradient(180deg, var(--casca-topo) 0%, var(--casca-meio) 34%, var(--casca-base) 100%);
  box-shadow: var(--shadow-casca);
}
.fk-casca::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--camada-casca-filete);
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--casca-filete-topo), var(--casca-filete) 14%, var(--casca-filete-meio) 60%, var(--casca-filete-base));
  /* Só a moldura de 1 px fica: o miolo (content-box) é recortado. Na máscara só o alfa conta. */
  -webkit-mask: linear-gradient(var(--bg) 0 0) content-box, linear-gradient(var(--bg) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Compacta: toast e card de canto (raio 16, paradas próprias, filete mais curto). */
.fk-casca--compacta {
  border-radius: var(--radius-16);
  background:
    url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao),
    linear-gradient(180deg, var(--casca-compacta-topo) 0%, var(--casca-compacta-meio) 45%, var(--casca-compacta-base) 100%);
  box-shadow: var(--shadow-toast);
}
.fk-casca--compacta::after {
  background: linear-gradient(180deg, var(--casca-compacta-filete-topo), var(--casca-filete) 24%, var(--casca-filete-meio) 70%, var(--casca-filete));
}
/* Pro: o único fundo violeta do sistema (card Pro de Planos), com o mesmo grão e profundidade. */
.fk-casca--pro {
  background:
    url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao),
    linear-gradient(155deg, var(--pro-topo) 0%, var(--pro-meio) 48%, var(--pro-base) 100%);
  box-shadow: var(--shadow-casca-pro);
}
.fk-casca--pro::after {
  background: linear-gradient(180deg, var(--pro-filete-topo), var(--pro-filete-alto) 30%, var(--pro-filete-meio) 70%, var(--pro-filete-base));
}

/* ── Módulo: pousa dentro da casca ──────────────────────────────────────────────────────────────────────────── */
.fk-modulo {
  border-radius: var(--radius-16);
  padding: var(--space-14);
  background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base));
  box-shadow: var(--shadow-modulo);
}
.fk-modulo--interativo { cursor: pointer; transition: box-shadow var(--duracao-cor) var(--curva-opacidade); }
.fk-modulo--interativo:hover {
  background: linear-gradient(180deg, var(--modulo-hover-topo), var(--modulo-hover-base));
  box-shadow: var(--shadow-modulo-hover);
}

/* ── Poço: rebaixado na casca (campos, buscas, trilhos, envio, leituras) ───────────────────────────────────── */
.fk-poco {
  border-radius: var(--radius-12);
  background: var(--poco);
  box-shadow: var(--shadow-poco);
}
.fk-poco--fundo { box-shadow: var(--shadow-poco-fundo); }

/* ── Sulco: linha gravada (escura em cima, luz embaixo) ────────────────────────────────────────────────────── */
.fk-sulco {
  display: block;
  height: var(--tamanho-sulco);
  margin: 0;
  border: 0;
  border-top: 1px solid var(--sulco-sombra);
  border-bottom: 1px solid var(--sulco-luz);
}
/* Vertical: entre colunas; estica na altura do contêiner flex ou grid. */
.fk-sulco--vertical {
  width: var(--tamanho-sulco);
  height: auto;
  align-self: stretch;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--sulco-sombra);
  border-right: 1px solid var(--sulco-luz);
}

/* ── Tecla: em relevo, afunda 1 px ao pressionar ───────────────────────────────────────────────────────────── */
.fk-tecla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: var(--tamanho-tecla);
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-9);
  cursor: pointer;
  color: var(--texto-tecla);
  font: 600 11.5px/1 var(--font-texto);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
  transition: background var(--duracao-hover), color var(--duracao-hover), transform var(--duracao-pressao), box-shadow var(--duracao-rapida);
}
.fk-tecla:hover { color: var(--branco); background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base)); }
.fk-tecla:active { transform: translateY(1px); box-shadow: var(--shadow-tecla-pressionada); }
.fk-tecla--sm { height: var(--tamanho-tecla-sm); padding: 0 var(--space-10); font-size: 11px; }
/* Acesa: tecla avulsa ligada (ex.: Trocar enquanto o slot está Escolhendo). */
.fk-tecla--acesa,
.fk-tecla[aria-pressed="true"] {
  color: var(--branco);
  background: linear-gradient(180deg, var(--tecla-acesa-topo), var(--tecla-acesa-base));
  box-shadow: var(--shadow-tecla-acesa);
}
.fk-tecla--acesa:hover,
.fk-tecla[aria-pressed="true"]:hover { background: linear-gradient(180deg, var(--tecla-acesa-hover-topo), var(--tecla-acesa-hover-base)); }
/* Indisponível: volta à tecla em repouso, esmaecida, sem hover nem afundar. */
.fk-tecla:disabled,
.fk-tecla:disabled:hover,
.fk-tecla:disabled:active,
.fk-tecla[aria-disabled="true"],
.fk-tecla[aria-disabled="true"]:hover,
.fk-tecla[aria-disabled="true"]:active {
  opacity: var(--opacidade-desligado);
  cursor: not-allowed;
  transform: none;
  color: var(--texto-tecla);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}

/* ── CTA: a próxima ação, em lima com topo aceso e brilho ──────────────────────────────────────────────────── */
.fk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  width: 100%;
  height: var(--tamanho-cta);
  padding: 0;
  border: 0;
  border-radius: var(--radius-14);
  cursor: pointer;
  color: var(--tinta-lima);
  font: 700 13.5px/1 var(--font-texto);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--lima-topo) 0%, var(--lima-meio) 55%, var(--lima-base) 100%);
  box-shadow: var(--shadow-cta);
  transition: filter var(--duracao-hover), transform var(--duracao-pressao);
}
.fk-cta:hover { color: var(--tinta-lima); filter: brightness(1.05); }
.fk-cta:active { transform: translateY(1px); }
/* Ocupado: listras claras andando a -45° sobre o lima (passo de 18 px na diagonal = ladrilho de 25,46 px). */
.fk-cta--ocupado,
.fk-cta[aria-busy="true"] {
  cursor: progress;
  background:
    repeating-linear-gradient(-45deg, var(--lima-listra) 0 9px, transparent 9px 18px),
    linear-gradient(180deg, var(--lima-topo) 0%, var(--lima-meio) 55%, var(--lima-base) 100%);
  background-size: 25.46px 25.46px, 100% 100%;
  animation: fk-cta-listras var(--duracao-listras) var(--curva-linear) infinite;
}
@keyframes fk-cta-listras { to { background-position: 25.46px 0, 0 0; } }
/* Silencioso: quando o lima passa a outra ação (ex.: Baixar vídeo), esta vira tecla. */
.fk-cta--silencioso {
  color: var(--texto);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
  animation: fk-cta-silencia var(--duracao-silencio) var(--curva-casa);
}
@keyframes fk-cta-silencia { from { opacity: .3; transform: scale(.97); } }
.fk-cta--silencioso:hover { filter: none; color: var(--branco); background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base)); }
.fk-cta--silencioso:active { box-shadow: var(--shadow-tecla-pressionada); }
/* Indisponível: perde o lima (Notificacoes.dc.html e Assets.dc.html, .cta.is-off). */
.fk-cta:disabled,
.fk-cta:disabled:hover,
.fk-cta:disabled:active,
.fk-cta[aria-disabled="true"],
.fk-cta[aria-disabled="true"]:hover,
.fk-cta[aria-disabled="true"]:active {
  cursor: not-allowed;
  transform: none;
  filter: none;
  animation: none;
  color: var(--texto-nota);
  background: linear-gradient(180deg, var(--cta-desligado-topo), var(--cta-desligado-base));
  box-shadow: var(--shadow-cta-desligado);
}

/* ── Segmentado: o trilho é um poço; a escolha é a tecla acesa cinza ───────────────────────────────────────── */
.fk-seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-11);
  background: var(--poco);
  box-shadow: var(--shadow-poco-trilho);
}
.fk-seg__opcao {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  height: var(--tamanho-seg-opcao);
  padding: 0 var(--space-10);
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  cursor: pointer;
  color: var(--texto-controle);
  font: 600 12px/1 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duracao-hover), background var(--duracao-hover);
}
.fk-seg__opcao:hover { color: var(--texto-hover); }
.fk-seg__opcao--acesa,
.fk-seg__opcao[aria-pressed="true"],
.fk-seg__opcao[aria-selected="true"],
.fk-seg__opcao[aria-current]:not([aria-current="false"]) {
  color: var(--texto-aceso);
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base));
  box-shadow: var(--shadow-seg-acesa);
}
/* Deslizante: a tecla acesa é uma peça só (.fk-seg__indicador, filho do .fk-seg) que corre por trás das opções.
   --n = número de opções, --i = índice escolhido (a partir de 0), ambos no .fk-seg. */
.fk-seg--deslizante .fk-seg__opcao { transition: color var(--duracao-cor); }
.fk-seg--deslizante :is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-pressed="true"], .fk-seg__opcao[aria-selected="true"], .fk-seg__opcao[aria-current]:not([aria-current="false"])) {
  background: transparent;
  box-shadow: none;
}
.fk-seg__indicador {
  position: absolute;
  z-index: 0;
  top: var(--space-3);
  bottom: var(--space-3);
  left: var(--space-3);
  width: calc((100% - (var(--n, 2) + 1) * var(--space-3)) / var(--n, 2));
  border-radius: var(--radius-8);
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base));
  box-shadow: var(--shadow-seg-acesa);
  transform: translateX(calc(var(--i, 0) * (100% + var(--space-3))));
  transition: transform var(--duracao-deslize) var(--curva-casa);
  pointer-events: none;
}

/* ── Rótulo: caixa-alta em Space Grotesk, com número e leitura à direita ──────────────────────────────────── */
.fk-rotulo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  color: var(--texto-rotulo);
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* Número e parte direita em texto-controle: o canvas usa #85858b e #8a8a90, que caem para 4,1 e 4,4:1 dentro de módulo. */
.fk-rotulo__n { color: var(--texto-controle); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.fk-rotulo__dir {
  margin-left: auto;
  color: var(--texto-controle);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ── Vidro: chip sobre foto e vídeo ─────────────────────────────────────────────────────────────────────────── */
.fk-vidro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--tamanho-vidro);
  padding: 0 var(--space-10);
  border-radius: var(--radius-pilula);
  color: var(--texto-forte);
  font: 600 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--veu-vidro);
  -webkit-backdrop-filter: blur(var(--desfoque-vidro));
  backdrop-filter: blur(var(--desfoque-vidro));
  box-shadow: var(--shadow-vidro);
}
.fk-vidro--sm { height: var(--tamanho-vidro-sm); padding: 0 var(--space-8); font-size: 10.5px; }

/* ── Etiqueta @: referência dentro do texto (@Imagem1, @Audio1) ──────────────────────────────────────────── */
.fk-ref {
  display: inline-flex;
  align-items: center;
  height: var(--tamanho-ref);
  padding: 0 var(--space-7);
  margin: 0 var(--space-1);
  border-radius: var(--radius-6);
  vertical-align: var(--space-1);
  color: var(--texto-titulo);
  font: 600 11.5px/1 var(--font-display);
  white-space: nowrap;
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--ref-base));
  box-shadow: var(--shadow-ref);
}

/* ── Menos movimento: nada desliza nem anda; as listras ficam paradas. ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-tecla, .fk-cta, .fk-seg__opcao, .fk-seg__indicador, .fk-modulo--interativo { transition: none; }
  .fk-cta--ocupado, .fk-cta[aria-busy="true"], .fk-cta--silencioso { animation: none; }
}

/* Source: Abas.css */
/* Fenaky Design System · Abas — fileira de abas sublinhadas sobre a página, com contagem opcional e painéis que trocam.
   Fontes: Main.dc.html (.tab, "Referências" da galeria e .tgrid), Assets.dc.html e Notificacoes.dc.html (.tabs, .tabrow,
   .atab, .ct com tick-a/tick-b, .ink, .count), CriarMobile.dc.html (.tstrip, .tstrip.sliding, .tab a 12 px, .tind) e SPEC
   ("Abas: o sublinhado desliza; conteúdo da aba faz crossfade com leve deslocamento"). Só tokens; nenhuma primitiva é
   redefinida.
   Tipografia: o rótulo é o estilo `aba` (Manrope 12,5/1, 600) e a contagem à direita é `numero-contagem` (Space Grotesk
   11,5/1, 500); os valores estão repetidos abaixo porque o CSS não herda uma classe tipográfica. O número da aba
   (Space Grotesk 11/1, 500) vem de .atab .ct e não tem estilo próprio nas fundações. */

/* ── Fileira: a linha de base de 1 px corre por toda a largura; a contagem, se houver, fica à direita. ─────────────── */
.fk-abas {
  /* Folga da lista para o anel de foco (2 px + 3 px de afastamento) não ser cortado quando ela rola. */
  --fk-abas-folga: calc(var(--tamanho-foco) + var(--tamanho-foco-afastamento));
  /* Espessura do sublinhado (Main, Assets, CriarMobile: 2 px). As fundações não têm --tamanho-aba-sublinhado. */
  --fk-abas-sublinhado: var(--space-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-28);
  min-width: 0;
  border-bottom: var(--space-1) solid var(--linha-abas);
  font-family: var(--font-texto);
}
/* A lista (role="tablist"): as abas lado a lado, 28 px entre elas (Main). Quando a fileira não cabe (celular, painel
   estreito), a lista encolhe e rola de lado sem barra; a contagem à direita nunca fica por cima das abas. A folga com
   margem negativa não muda a posição das abas: só dá espaço ao anel de foco dentro da área que rola. */
.fk-abas__lista {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  gap: var(--space-28);
  min-width: 0;
  margin: calc(var(--fk-abas-folga) * -1);
  padding: var(--fk-abas-folga);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--fk-abas-folga);
  scrollbar-width: none;
}
.fk-abas__lista::-webkit-scrollbar { display: none; }

/* ── Aba: estilo `aba`, sublinhado de 2 px em texto-forte quando ativa, 14 px de respiro embaixo (Main). ──────────── */
.fk-abas__aba {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0 0 var(--space-14);
  border: 0;
  border-bottom: var(--fk-abas-sublinhado) solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--texto-aba);
  font: 600 12.5px/1 var(--font-texto);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duracao-hover) var(--curva-opacidade);
}
.fk-abas__aba:hover { color: var(--texto-hover); }
.fk-abas__aba[aria-selected="true"],
.fk-abas__aba--ativa {
  color: var(--texto-forte);
  border-bottom-color: var(--texto-forte);
}
/* Número ao lado do rótulo (Assets, .atab .ct). Repouso em texto-nota (5,8:1 na página); na aba ativa clareia para
   texto-leitura (o canvas usa #b9b9bf; o token mais próximo é #b7b7bd, 9,9:1 na página). */
.fk-abas__n {
  display: inline-block;
  color: var(--texto-nota);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: color var(--duracao-hover) var(--curva-opacidade);
}
.fk-abas__aba[aria-selected="true"] .fk-abas__n,
.fk-abas__aba--ativa .fk-abas__n { color: var(--texto-leitura); }

/* Tique: quando o número muda, ele cai 6 px e entra do desfoque (Notificacoes, .ct.tick-a/.tick-b, 700 ms na curva da
   casa). Alterne -a e -b a cada mudança para a animação recomeçar sem reflow. */
.fk-abas__n--muda-a { animation: fk-abas-n-a var(--duracao-silencio) var(--curva-casa); }
.fk-abas__n--muda-b { animation: fk-abas-n-b var(--duracao-silencio) var(--curva-casa); }
@keyframes fk-abas-n-a { from { opacity: 0; transform: translateY(calc(var(--space-6) * -1)); filter: blur(var(--desfoque-dica)); } }
@keyframes fk-abas-n-b { from { opacity: 0; transform: translateY(calc(var(--space-6) * -1)); filter: blur(var(--desfoque-dica)); } }

/* Contagem do resultado, à direita da fileira (Assets, .count: "13 assets"), estilo `numero-contagem`, na mesma base do
   texto das abas (14 px de respiro + 2 px do sublinhado). */
.fk-abas__contagem {
  display: flex;
  flex: none;
  align-items: center;
  padding-bottom: calc(var(--space-14) + var(--fk-abas-sublinhado));
  color: var(--texto-controle);
  font: 500 11.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Deslizante: um sublinhado só (.fk-abas__tinta) corre até a aba escolhida, com brilho (Assets e Notificações). ──
   Abas de 34 px (Assets .atab; as fundações não têm --tamanho-aba, então é --tamanho-seg-opcao + 4 px) com 12 px
   embaixo e 30 px entre elas. O consumidor põe no .fk-abas__lista --x (offsetLeft da aba ativa) e --w (offsetWidth
   dela); a tinta desce 1 px e cobre a linha de base. A folga da lista cresce para 12 px, o raio do brilho. */
.fk-abas--deslizante {
  --fk-abas-folga: var(--space-12);
  --fk-abas-altura: calc(var(--tamanho-seg-opcao) + var(--space-4));
}
.fk-abas--deslizante .fk-abas__lista { gap: var(--space-30); }
.fk-abas--deslizante .fk-abas__aba {
  height: var(--fk-abas-altura);
  padding-bottom: var(--space-12);
  border-bottom: 0;
  transition-duration: var(--duracao-curta);
}
.fk-abas--deslizante .fk-abas__n { transition-duration: var(--duracao-curta); }
.fk-abas--deslizante .fk-abas__contagem {
  height: var(--fk-abas-altura);
  padding-bottom: var(--space-12);
}
.fk-abas__tinta {
  position: absolute;
  left: 0;
  bottom: calc(var(--fk-abas-folga) - var(--space-1));
  width: var(--w, 0px);
  height: var(--fk-abas-sublinhado);
  border-radius: var(--radius-2);
  background: var(--texto-forte);
  /* Brilho do canvas: 0 0 12px rgba(255,255,255,.35); a cor vem de texto-forte a 35%. */
  box-shadow: 0 0 var(--space-12) color-mix(in srgb, var(--texto-forte) 35%, transparent);
  transform: translateX(var(--x, 0px));
  transition: transform var(--duracao-deslize) var(--curva-casa), width var(--duracao-deslize) var(--curva-casa);
  pointer-events: none;
}

/* ── Compacta: celular (CriarMobile). 12 px (estilo `link-topo` em peso e corpo), 16 px entre abas, 12 px embaixo. ── */
.fk-abas--compacta .fk-abas__lista { gap: var(--space-16); }
.fk-abas--compacta .fk-abas__aba {
  padding-bottom: var(--space-12);
  font-size: 12px;
}
.fk-abas--compacta .fk-abas__contagem { padding-bottom: calc(var(--space-12) + var(--fk-abas-sublinhado)); }
/* Toque na compacta (.tstrip.sliding + .tind): o sublinhado viaja da aba anterior à tocada em 500 ms na curva da casa,
   sem brilho, rente ao texto; depois a aba volta a desenhar o próprio sublinhado. O consumidor põe --x0/--w0 (origem) e
   --x/--w (destino) no .fk-abas__lista, liga .fk-abas--deslizando na fileira e a tira ao fim (animationend). */
.fk-abas--compacta .fk-abas__tinta {
  display: none;
  bottom: var(--fk-abas-folga);
  box-shadow: none;
  transition: none;
}
.fk-abas--compacta.fk-abas--deslizando .fk-abas__tinta {
  display: block;
  animation: fk-abas-toque var(--duracao-central-fecha) var(--curva-casa) both;
}
.fk-abas--compacta.fk-abas--deslizando .fk-abas__aba[aria-selected="true"],
.fk-abas--compacta.fk-abas--deslizando .fk-abas__aba--ativa { border-bottom-color: transparent; }
@keyframes fk-abas-toque {
  from { transform: translateX(var(--x0, 0px)); width: var(--w0, 0px); }
  to { transform: translateX(var(--x, 0px)); width: var(--w, 0px); }
}

/* ── Painéis: empilhados na mesma célula; o que sai some e desce 12 px, o que entra sobe com atraso (Main, .tgrid). ── */
.fk-abas__paineis {
  display: grid;
  min-width: 0;
}
.fk-abas__painel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--space-12));
  /* Saída (.tgrid): opacidade em 280 ms, deslocamento em 500 ms; some do Tab e da leitura ao fim. */
  transition:
    opacity var(--duracao-anel) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    visibility 0s linear var(--duracao-central-fecha);
}
.fk-abas__painel--aberto {
  opacity: 1;
  visibility: inherit;
  pointer-events: auto;
  transform: none;
  /* Entrada: 120 ms depois (3 × --duracao-escalonamento; não há token de 120 ms), opacidade em 450 ms e deslocamento
     em 700 ms. */
  transition:
    opacity var(--duracao-media) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 3),
    transform var(--duracao-silencio) var(--curva-casa) calc(var(--duracao-escalonamento) * 3),
    visibility 0s;
}

/* ── Menos movimento: a tinta salta, o número troca sem tique e os painéis trocam sem deslizar. ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-abas__aba, .fk-abas__n, .fk-abas__tinta { transition: none; }
  .fk-abas__n--muda-a, .fk-abas__n--muda-b,
  .fk-abas--compacta.fk-abas--deslizando .fk-abas__tinta { animation: none; }
  .fk-abas--compacta.fk-abas--deslizando .fk-abas__tinta { display: none; }
  .fk-abas--compacta.fk-abas--deslizando .fk-abas__aba[aria-selected="true"],
  .fk-abas--compacta.fk-abas--deslizando .fk-abas__aba--ativa { border-bottom-color: var(--texto-forte); }
  .fk-abas__lista { scroll-behavior: auto; }
  .fk-abas__painel, .fk-abas__painel--aberto { transform: none; transition: none; }
}

/* Source: AnelProgresso.css */
/* Fenaky Design System · AnelProgresso — o andamento de um pedido em anel lima, com a porcentagem ou um ícone no centro.
   O trilho é o branco a 10 % (14 % no médio); o valor é o lima com ponta redonda e brilho, começando às 12 h e
   correndo no sentido horário. Um só valor, --fk-anelprogresso-valor (0 a 100, no próprio anel ou num ancestral),
   move o arco: o círculo do valor leva pathLength="100", então o mesmo cálculo serve a todos os tamanhos.
   Tamanhos (geometria do SVG na marcação, traço e brilho aqui):
     grande 116 (r 50, traço 4)      Main, Ginga, Motion (.ringbox/.ring/.pct)
     compacto 100 (o mesmo SVG 116)  GingaHorizontal, TrocarHorizontal (.ringbox 100, .pct 26/13)
     médio 58 (r 25, traço 3)        Notificacoes, card em produção (.pring-c)
     pequeno 36 (r 15,5, traço 3)    Notificacoes, toast do pedido (.job .lead/.pring/.pic), num poço redondo
     mini 32 (r 12,5, traço 2,5)     NotificacoesMobile, toast do pedido (.k-job .tic/.tring)
     giro 34 (r 14, traço 2,5)       Assets, card em produção sem porcentagem (.spin)
   Cores só por var(--token); quando o canvas usa outra opacidade da mesma cor ela sai do token com color-mix, dizendo
   a conta. Medidas que não são token saem de somas de tokens.
   Fonte única da receita do anel (lima, ponta redonda, pathLength 100, nascer às 12 h, brilho, cheio e saída 1,6×).
   Três componentes trazem um anel embutido na própria marcação, com a geometria da prancheta deles e esta mesma
   receita: Player (.fk-player__anel, os valores do grande e do compacto), CentralNotificacoes
   (.fk-centralnotificacoes__anel, os do pequeno) e Toast (.fk-toast__anel, 22 px, r 8, traço 2,6, com .fk-toast--cheio
   e .fk-toast--pronto, do catálogo de notificações). Nesses três, use o anel do componente; se a receita mudar aqui
   (traço, brilho, curva), mude lá também. Este componente serve aos outros lugares: o card em produção da grade
   (médio e giro), linhas de pedido fora do toast e da central (pequeno e mini) e quadros novos que não usam o Player. */

/* ── Base: caixa quadrada, o SVG ocupa tudo e o centro fica no meio ─────────────────────────────────────────── */
.fk-anelprogresso {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  /* 116 px = 2 × 56 + 4 (Main .ringbox). */
  width: calc(var(--space-56) * 2 + var(--space-4));
  height: calc(var(--space-56) * 2 + var(--space-4));
  vertical-align: middle;
}
/* O SVG gira -90° para o arco nascer às 12 h; overflow visível para o brilho não ser cortado. */
.fk-anelprogresso__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}
.fk-anelprogresso__fundo,
.fk-anelprogresso__valor { fill: none; stroke-width: 4; }
/* Trilho: rgba(255,255,255,.1) = branco a 10 %. */
.fk-anelprogresso__fundo { stroke: color-mix(in srgb, var(--branco) 10%, transparent); }
/* Valor: lima, ponta redonda; brilho drop-shadow 6 px a 65 % (Main .ring .val). 100 = pathLength do círculo. */
.fk-anelprogresso__valor {
  stroke: var(--lima);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--fk-anelprogresso-valor, 0));
  filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--lima) 65%, transparent));
  transition:
    stroke-dashoffset var(--duracao-rapida) var(--curva-linear),
    filter var(--duracao-curta) var(--curva-opacidade);
}

/* ── Centro: número com a unidade, ou um ícone ──────────────────────────────────────────────────────────────── */
/* Número: as quatro propriedades do estilo tipográfico numero-anel de tokens.json (Space Grotesk 600, 30 px, entrelinha
   1, -0,03em), repetidas aqui de propósito: uma classe CSS não herda outra, e o compacto e o médio trocam o tamanho.
   Se numero-anel mudar em tokens.json, mude estas linhas (e .fk-player__pct, que faz o mesmo). Cor texto-aceso,
   algarismos tabulares. */
.fk-anelprogresso__numero {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  color: var(--texto-aceso);
  font: 600 30px/1 var(--font-display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Unidade (%): 14 px em texto-unidade, 2 px depois do número (Main .pct small). */
.fk-anelprogresso__unidade {
  margin-left: var(--space-2);
  color: var(--texto-unidade);
  font-size: 14px;
  letter-spacing: 0;
}
/* Ícone: o glifo do pedido (setas de troca) no centro, em currentColor. */
.fk-anelprogresso__icone {
  position: relative;
  display: block;
  width: var(--space-14);
  height: var(--space-14);
  color: var(--texto-hover);
}

/* ── Tamanhos ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* Compacto 100 (2 × 48 + 4): o mesmo SVG 116 escalado, como no canvas; número 26/13 (GingaHorizontal .pct). */
.fk-anelprogresso--compacto {
  width: calc(var(--space-48) * 2 + var(--space-4));
  height: calc(var(--space-48) * 2 + var(--space-4));
}
.fk-anelprogresso--compacto .fk-anelprogresso__numero { font-size: 26px; }
.fk-anelprogresso--compacto .fk-anelprogresso__unidade { font-size: 13px; }

/* Médio 58 (56 + 2), traço 3, trilho a 14 %, brilho 5 px a 70 %; número 15/10 com sombra para ler sobre a foto
   escurecida (Notificacoes .pring-c). A unidade era #c3c3c8, sem token: vale texto-suave (#cacacf), o mais próximo. */
.fk-anelprogresso--medio {
  width: calc(var(--space-56) + var(--space-2));
  height: calc(var(--space-56) + var(--space-2));
}
.fk-anelprogresso--medio :is(.fk-anelprogresso__fundo, .fk-anelprogresso__valor) { stroke-width: 3; }
.fk-anelprogresso--medio .fk-anelprogresso__fundo { stroke: color-mix(in srgb, var(--branco) 14%, transparent); }
.fk-anelprogresso--medio .fk-anelprogresso__valor { filter: drop-shadow(0 0 var(--space-5) color-mix(in srgb, var(--lima) 70%, transparent)); }
.fk-anelprogresso--medio .fk-anelprogresso__numero {
  font-size: 15px;
  letter-spacing: -.02em;
  text-shadow: 0 var(--space-1) var(--space-8) var(--sulco-sombra);
}
.fk-anelprogresso--medio .fk-anelprogresso__unidade { margin-left: var(--space-1); font-size: 10px; color: var(--texto-suave); }

/* Pequeno 36, traço 3, brilho 4 px a 70 %, dentro de um poço redondo com o ícone do pedido no centro
   (Notificacoes .job .lead, .pring, .pic). O ícone era #e4e4e8, sem token: vale texto-hover (#e2e2e6). */
.fk-anelprogresso--pequeno,
.fk-anelprogresso--mini {
  border-radius: var(--radius-circulo);
  background: var(--poco);
  box-shadow: var(--shadow-poco-trilho);
  transition:
    transform var(--duracao-media) var(--curva-casa),
    box-shadow var(--duracao-central-fecha) var(--curva-opacidade);
}
/* O poço do pequeno recorta o brilho por dentro (overflow: hidden, como o .lead); o do mini deixa o brilho vazar. */
.fk-anelprogresso--pequeno {
  overflow: hidden;
  width: calc(var(--space-32) + var(--space-4));
  height: calc(var(--space-32) + var(--space-4));
}
.fk-anelprogresso--pequeno :is(.fk-anelprogresso__fundo, .fk-anelprogresso__valor) { stroke-width: 3; }
:is(.fk-anelprogresso--pequeno, .fk-anelprogresso--mini) .fk-anelprogresso__valor {
  filter: drop-shadow(0 0 var(--space-4) color-mix(in srgb, var(--lima) 70%, transparent));
}
:is(.fk-anelprogresso--pequeno, .fk-anelprogresso--mini) .fk-anelprogresso__icone {
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    color var(--duracao-curta) var(--curva-opacidade);
}

/* Mini 32, traço 2,5, ícone de 12 px em texto-icone (#cfcfd4); o arco anda em 300 ms (NotificacoesMobile .tring). */
.fk-anelprogresso--mini {
  width: var(--space-32);
  height: var(--space-32);
}
.fk-anelprogresso--mini :is(.fk-anelprogresso__fundo, .fk-anelprogresso__valor) { stroke-width: 2.5; }
.fk-anelprogresso--mini .fk-anelprogresso__valor {
  transition:
    stroke-dashoffset var(--duracao-curta) var(--curva-linear),
    filter var(--duracao-curta) var(--curva-opacidade);
}
.fk-anelprogresso--mini .fk-anelprogresso__icone { width: var(--space-12); height: var(--space-12); color: var(--texto-icone); }

/* ── Cheio: chegou a 100 % e o vídeo ainda não abriu ───────────────────────────────────────────────────────── */
/* Pequeno: o poço cresce 12 %, o brilho vai a 9 px com o lima inteiro e o ícone acende em lima (Notificacoes .is-full). */
.fk-anelprogresso--pequeno.fk-anelprogresso--cheio { transform: scale(1.12); }
.fk-anelprogresso--pequeno.fk-anelprogresso--cheio .fk-anelprogresso__valor { filter: drop-shadow(0 0 var(--space-9) var(--lima)); }
.fk-anelprogresso--pequeno.fk-anelprogresso--cheio .fk-anelprogresso__icone { color: var(--lima); }
/* Mini: o poço perde o filete claro de baixo e ganha um halo lima de 4 px a 13 % e um brilho de 20 px a 38 %
   (NotificacoesMobile .k-job.full .tic: inset 0 2px 4px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.55), halo, brilho).
   As duas sombras internas são as de --shadow-poco-trilho sem o 0 1px 0 branco. O preto a 75 % e a 55 % sai de
   --sulco-sombra (preto a 60 %) trocando só o alfa (cor relativa, rgb(from …)); color-mix não sobe o alfa.
   A primeira declaração é a reserva para navegador sem cor relativa: o poço inteiro + halo + brilho, com o filete. */
.fk-anelprogresso--mini.fk-anelprogresso--cheio {
  box-shadow:
    var(--shadow-poco-trilho),
    0 0 0 var(--space-4) color-mix(in srgb, var(--lima) 13%, transparent),
    0 0 var(--space-20) color-mix(in srgb, var(--lima) 38%, transparent);
  box-shadow:
    inset 0 var(--space-2) var(--space-4) rgb(from var(--sulco-sombra) r g b / .75),
    inset 0 0 0 var(--space-1) rgb(from var(--sulco-sombra) r g b / .55),
    0 0 0 var(--space-4) color-mix(in srgb, var(--lima) 13%, transparent),
    0 0 var(--space-20) color-mix(in srgb, var(--lima) 38%, transparent);
}

/* ── Concluído: o vídeo está pronto e o anel sai ───────────────────────────────────────────────────────────── */
/* O arco abre para fora (1,6×) e some; o centro encolhe à metade e some. Quem toma o lugar (miniatura, vídeo) é
   do componente que contém o anel (Notificacoes .job.is-media .pring e .pic). */
.fk-anelprogresso__svg {
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-zoom) var(--curva-casa);
}
.fk-anelprogresso__numero {
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa);
}
.fk-anelprogresso--concluido .fk-anelprogresso__svg { opacity: 0; transform: rotate(-90deg) scale(1.6); }
.fk-anelprogresso--concluido :is(.fk-anelprogresso__numero, .fk-anelprogresso__icone) { opacity: 0; transform: scale(.5); }
.fk-anelprogresso--concluido:is(.fk-anelprogresso--pequeno, .fk-anelprogresso--mini) { transform: none; }

/* ── Giro: andamento sem porcentagem ───────────────────────────────────────────────────────────────────────── */
/* 34 px (32 + 2), trilho branco a 16 %, um quarto de volta em texto-forte (#f2f2f4), sem brilho, uma volta por
   segundo (Assets .spin). Só quando o servidor não informa a porcentagem; havendo número, use o médio. */
.fk-anelprogresso--giro {
  width: calc(var(--space-32) + var(--space-2));
  height: calc(var(--space-32) + var(--space-2));
}
.fk-anelprogresso--giro :is(.fk-anelprogresso__fundo, .fk-anelprogresso__valor) { stroke-width: 2.5; }
.fk-anelprogresso--giro .fk-anelprogresso__fundo { stroke: color-mix(in srgb, var(--branco) 16%, transparent); }
.fk-anelprogresso--giro .fk-anelprogresso__valor {
  stroke: var(--texto-forte);
  stroke-dasharray: 25 75;
  stroke-dashoffset: 0;
  filter: none;
  transition: none;
}
.fk-anelprogresso--giro .fk-anelprogresso__svg {
  animation: fk-anelprogresso-giro var(--duracao-giro) var(--curva-linear) infinite;
}
@keyframes fk-anelprogresso-giro {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

/* ── Menos movimento: o arco salta para o valor e os estados trocam secos; o giro fica parado no quarto de volta.
   A saída do concluído só esmaece, sem abrir nem encolher. ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-anelprogresso,
  .fk-anelprogresso__svg,
  .fk-anelprogresso__valor,
  .fk-anelprogresso__numero,
  .fk-anelprogresso__icone { transition: none; }
  .fk-anelprogresso--giro .fk-anelprogresso__svg { animation: none; }
  .fk-anelprogresso--concluido .fk-anelprogresso__svg { transform: rotate(-90deg); }
  .fk-anelprogresso--concluido :is(.fk-anelprogresso__numero, .fk-anelprogresso__icone) { transform: none; }
}

/* Source: AreaEnvio.css */
/* Fenaky Design System · AreaEnvio — o poço de envio de arquivo (vídeo, imagem, áudio).
   Um poço de fundo com uma linha tracejada gravada; acende em lima enquanto um arquivo passa por cima, troca o texto
   pelo nome do arquivo e pela porcentagem enquanto envia e mostra o visto quando termina.
   Fontes: Main.dc.html (.drop, .drop-ic, .dstack, .dend, .dpct, .dbar: a peça canônica, 80 px), Ginga.dc.html
   (.drop.strip de 110 px, .drop.big de 212 px com a onda de 96 barras, .dsave, .is-err e .is-warn),
   TrocarHorizontal.dc.html (o cartão vertical de 208 × 300 da barra, com .dz-face, .dz-key e .upbar) e
   CriarMobile.dc.html (o poço compacto do celular).
   Marcação: <label class="fk-poco fk-poco--fundo fk-areaenvio">; o poço e a tecla vêm das primitivas de 00-base.css.
   Valores que não são token vêm de um token por color-mix() ou calc(), com a origem anotada ao lado.
   Tipografia: o título segue o canvas (Manrope 600 13,5/1,2, entre .item-titulo e .cta-rotulo); a dica é o estilo
   .numero-meta (Space Grotesk 500 11,5/1,2); a porcentagem é o .numero-envio (Space Grotesk 600 22/1, −0,02 em). */

.fk-areaenvio {
  /* A tecla do ícone: 46 px no Main e no Ginga (o --shadow-tecla-icone foi medido nela); 44 px no celular e no cartão. */
  --fk-areaenvio-icone: 46px;
  /* Tempos do canvas que não têm token próprio, montados dos tokens de duração. */
  --fk-areaenvio-sai: calc(4 * var(--duracao-escalonamento));                     /* .16s: o texto que sai some */
  --fk-areaenvio-sai-icone: calc(3 * var(--duracao-escalonamento));               /* .12s: o ícone que sai some */
  --fk-areaenvio-desliza-saida: calc(var(--duracao-hover) + var(--duracao-rapida)); /* .35s */
  --fk-areaenvio-chega-icone: calc(var(--duracao-marca) + var(--duracao-escalonamento)); /* .22s */
  --fk-areaenvio-atraso: calc(2 * var(--duracao-escalonamento));                  /* .08s: quem chega espera */
  --fk-areaenvio-atraso-desliza: calc(1.5 * var(--duracao-escalonamento));        /* .06s */
  --fk-areaenvio-longa: calc(2 * var(--duracao-cor));                             /* .5s */

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  height: calc(2 * var(--space-40)); /* 80 px, Main .drop */
  padding: 0 var(--space-18) 0 var(--space-16);
  cursor: pointer;
  color: var(--texto);
  font-family: var(--font-texto);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--fk-areaenvio-longa) var(--curva-casa), box-shadow var(--duracao-curta) var(--curva-opacidade);
}
/* O poço da área é o de fundo (sombra 2 px 6 px) com o raio de 16 dos cards; especificidade dupla para não depender da
   ordem do bundle. */
.fk-poco.fk-areaenvio { border-radius: var(--radius-16); }

/* A linha tracejada gravada (1,5 px, traço do canvas), 6 px para dentro. */
.fk-areaenvio::before {
  content: '';
  position: absolute;
  inset: var(--space-6);
  border-radius: var(--radius-11);
  border: 1.5px dashed var(--traco-envio);
  pointer-events: none;
  transition:
    border-color var(--duracao-cor) var(--curva-opacidade),
    border-width var(--duracao-cor) var(--curva-opacidade),
    inset var(--duracao-media) var(--curva-casa);
}
/* O clarão lima que sobe com o arquivo em cima. */
.fk-areaenvio::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 140% at 30% 50%, var(--lima-envio), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duracao-curta) var(--curva-opacidade);
}
/* Tudo dentro fica acima da linha e do clarão e deixa o clique e o arrasto para o poço inteiro. */
:where(.fk-areaenvio) > * { position: relative; z-index: 1; pointer-events: none; }

.fk-areaenvio:hover::before { border-color: var(--traco-envio-hover); }
.fk-areaenvio:hover .fk-areaenvio__icone { color: var(--branco); }
/* Foco do teclado: o anel vai ao poço, porque o input de arquivo é invisível. */
.fk-areaenvio:has(.fk-areaenvio__arquivo:focus-visible) {
  outline: var(--tamanho-foco) solid var(--anel-foco);
  outline-offset: var(--tamanho-foco-afastamento);
}

/* O input de arquivo real: invisível, mas focável e lido pelo leitor de tela. */
.fk-areaenvio > .fk-areaenvio__arquivo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* ── Arquivo em cima: o poço mantém a largura; a linha abre para fora e acende, o clarão sobe ─────────────── */
/* O canvas troca a sombra do poço por inset 0 2px 6px rgba(0,0,0,.8) + anel + brilho; aqui o poço de fundo fica por
   baixo do anel (diferença de 1 px escuro, invisível) e o anel cobre a luz da base. */
.fk-areaenvio.fk-areaenvio--sobre {
  box-shadow:
    0 0 0 1px var(--lima-envio-borda),
    0 22px 60px -20px color-mix(in srgb, var(--lima) 42%, transparent), /* rgba(215,255,63,.42) */
    var(--shadow-poco-fundo);
}
.fk-areaenvio.fk-areaenvio--sobre::before { inset: var(--space-4); border-color: var(--lima); }
.fk-areaenvio.fk-areaenvio--sobre::after { opacity: 1; }
.fk-areaenvio.fk-areaenvio--sobre .fk-areaenvio__icone { transform: translateY(-3px); color: var(--lima); }
/* Enquanto o arquivo está em cima, o poço inteiro é o alvo: a tecla de escolher recua. */
.fk-areaenvio.fk-areaenvio--sobre .fk-areaenvio__tecla { opacity: var(--opacidade-pilha-segunda); } /* 0,3 do canvas */

/* Quente: o arquivo está bem em cima; a linha engrossa e chega à borda, o brilho dobra. */
.fk-areaenvio.fk-areaenvio--sobre.fk-areaenvio--quente {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--lima) 70%, transparent),      /* rgba(215,255,63,.7) */
    0 26px 70px -18px color-mix(in srgb, var(--lima) 55%, transparent), /* rgba(215,255,63,.55) */
    var(--shadow-poco-fundo);
}
.fk-areaenvio.fk-areaenvio--sobre.fk-areaenvio--quente::before { inset: var(--space-3); border-width: 2px; }
.fk-areaenvio.fk-areaenvio--sobre.fk-areaenvio--quente .fk-areaenvio__icone { transform: translateY(-4px) scale(1.06); }

/* ── Enviando: a linha vira traço contínuo apagado ──────────────────────────────────────────────────────── */
.fk-areaenvio.fk-areaenvio--enviando::before { border-style: solid; border-color: color-mix(in srgb, var(--branco) 7%, transparent); } /* rgba(255,255,255,.07) */

/* ── Recusado: a dica vira a mensagem em --erro (Main .is-err); a linha tingida vem do Ginga e vale para todas ── */
.fk-areaenvio.fk-areaenvio--recusado::before { border-color: color-mix(in srgb, var(--erro) 42%, transparent); } /* rgba(255,169,167,.42) */
.fk-areaenvio.fk-areaenvio--recusado .fk-areaenvio__repouso .fk-areaenvio__dica:not(.fk-areaenvio__salva) { color: var(--erro); }

/* ── Aviso: formato não aceito em cima do poço, ou outro arquivo durante um envio. No Main só o status tinge;
   a linha, o ícone e o título em âmbar vêm do Ginga (.is-warn) e valem para todas as variantes. ───────────────── */
.fk-areaenvio.fk-areaenvio--aviso::before { border-color: var(--aviso); }
.fk-areaenvio.fk-areaenvio--aviso .fk-areaenvio__icone { color: var(--aviso); }
.fk-areaenvio.fk-areaenvio--aviso .fk-areaenvio__repouso .fk-areaenvio__titulo,
.fk-areaenvio.fk-areaenvio--aviso .fk-areaenvio__envio .fk-areaenvio__dica { color: var(--aviso); }

/* ── Ícone: tecla de 46 px; a seta e o visto trocam no mesmo lugar ───────────────────────────────────────── */
.fk-areaenvio__icone {
  display: grid;
  place-items: center;
  width: var(--fk-areaenvio-icone);
  height: var(--fk-areaenvio-icone);
  border-radius: var(--radius-13);
  color: var(--texto-tecla);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla-icone);
  transition: transform var(--duracao-media) var(--curva-casa), color var(--duracao-cor);
}
/* Quem sai some rápido; quem chega vem um instante depois, para os dois nunca se lerem um sobre o outro. */
.fk-areaenvio__icone svg {
  grid-area: 1 / 1;
  transition:
    opacity var(--fk-areaenvio-chega-icone) var(--curva-opacidade) var(--fk-areaenvio-atraso),
    transform var(--duracao-media) var(--curva-casa) var(--duracao-escalonamento);
}
.fk-areaenvio__icone .fk-areaenvio__icone-pronto {
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--fk-areaenvio-sai-icone) var(--curva-opacidade), transform var(--duracao-curta) var(--curva-casa);
}
.fk-areaenvio.fk-areaenvio--pronto .fk-areaenvio__icone .fk-areaenvio__icone-pronto {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--fk-areaenvio-chega-icone) var(--curva-opacidade) var(--fk-areaenvio-atraso),
    transform var(--duracao-media) var(--curva-casa) var(--duracao-escalonamento);
}
.fk-areaenvio.fk-areaenvio--pronto .fk-areaenvio__icone .fk-areaenvio__icone-enviar {
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--fk-areaenvio-sai-icone) var(--curva-opacidade), transform var(--duracao-curta) var(--curva-casa);
}
/* A seta sobe e desce enquanto o arquivo está em cima e enquanto envia. */
.fk-areaenvio.fk-areaenvio--sobre .fk-areaenvio__icone-enviar,
.fk-areaenvio.fk-areaenvio--enviando:not(.fk-areaenvio--pronto) .fk-areaenvio__icone-enviar {
  animation: fk-areaenvio-empurra var(--duracao-listras) ease-in-out infinite; /* .9s */
}
@keyframes fk-areaenvio-empurra { 50% { transform: translateY(-3px); } }

/* ── Pilhas: o repouso e o envio ocupam o mesmo lugar e se revezam ───────────────────────────────────────── */
/* A metade que sai fica invisível também para o leitor de tela: visibility vira hidden só depois do fade (sai) e
   volta a visible na hora em que a outra metade chega. */
.fk-areaenvio__pilha { display: grid; min-width: 0; }
.fk-areaenvio__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fk-areaenvio__pilha > * {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: visible;
  transition:
    opacity var(--duracao-anel) var(--curva-opacidade) var(--fk-areaenvio-atraso),
    transform var(--fk-areaenvio-longa) var(--curva-casa) var(--fk-areaenvio-atraso-desliza),
    visibility 0s;
}
.fk-areaenvio__repouso,
.fk-areaenvio__envio { display: flex; flex-direction: column; gap: var(--space-7); }
.fk-areaenvio .fk-areaenvio__envio {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--fk-areaenvio-sai) var(--curva-opacidade),
    transform var(--fk-areaenvio-desliza-saida) var(--curva-casa),
    visibility 0s linear var(--fk-areaenvio-sai);
}
.fk-areaenvio.fk-areaenvio--enviando .fk-areaenvio__repouso {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity var(--fk-areaenvio-sai) var(--curva-opacidade),
    transform var(--fk-areaenvio-desliza-saida) var(--curva-casa),
    visibility 0s linear var(--fk-areaenvio-sai);
}
.fk-areaenvio.fk-areaenvio--enviando .fk-areaenvio__envio {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--duracao-anel) var(--curva-opacidade) var(--fk-areaenvio-atraso),
    transform var(--fk-areaenvio-longa) var(--curva-casa) var(--fk-areaenvio-atraso-desliza),
    visibility 0s;
}
/* À direita a porcentagem e a tecla dividem um lugar: quem chega espera o outro sair. */
.fk-areaenvio__pilha--fim { justify-items: end; }
.fk-areaenvio:not(.fk-areaenvio--enviando) .fk-areaenvio__pilha--fim > .fk-areaenvio__repouso,
.fk-areaenvio.fk-areaenvio--enviando .fk-areaenvio__pilha--fim > .fk-areaenvio__envio {
  transition:
    opacity calc(6 * var(--duracao-escalonamento)) var(--curva-opacidade) var(--fk-areaenvio-sai), /* .24s com .16s de espera */
    transform var(--fk-areaenvio-longa) var(--curva-casa) var(--duracao-pressao),
    visibility 0s;
}

/* Título (frase de ação ou nome do arquivo) e dica (formatos e limites, estado do envio ou a mensagem). */
.fk-areaenvio__titulo {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-forte); /* o canvas usa #f0f0f2; o token mais próximo é #f2f2f4 (17,6:1 no poço) */
  font: 600 13.5px/1.2 var(--font-texto);
  transition: color var(--duracao-cor);
}
/* = .numero-meta de tokens.json, com números tabulares. */
.fk-areaenvio__dica {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-controle); /* #8e8e94: 6,0:1 no poço */
  font: 500 11.5px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Linha de onde o arquivo fica salvo (Ginga .dsave), com o ícone de pasta. */
.fk-areaenvio__salva {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--texto-nota); /* #8a8a90: 5,7:1 no poço */
  font-family: var(--font-texto);
}
.fk-areaenvio__salva svg { flex: none; }

/* A tecla Escolher arquivo é só desenho (um span aria-hidden dentro do label): o clique é do poço inteiro.
   32 px de altura (Main .dend .key): a tecla padrão tem 30 px; os 32 px são os do alvo de botão (--tamanho-alvo),
   que o canvas usa aqui para a tecla ter o peso do alvo que ela representa. */
.fk-tecla.fk-areaenvio__tecla {
  height: var(--tamanho-alvo);
  transition: opacity var(--duracao-cor) var(--curva-opacidade), background var(--duracao-hover), box-shadow var(--duracao-rapida);
}

/* A leitura grande da porcentagem (= .numero-envio). */
.fk-areaenvio__pct {
  display: block;
  color: var(--texto-titulo);
  font: 600 22px/1 var(--font-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* No canvas o % herda o small da pilha (500, Space Grotesk, entrelinha 1,2) e só muda tamanho e cor. */
.fk-areaenvio__pct small { display: inline; margin-left: var(--space-1); color: var(--texto-unidade); font: 500 12px/1.2 var(--font-display); }

/* ── Barra de envio: 3 px alinhada ao texto, lima com halo ───────────────────────────────────────────────── */
.fk-areaenvio > .fk-areaenvio__barra {
  position: absolute;
  left: calc(var(--space-16) + var(--fk-areaenvio-icone) + var(--space-16)); /* 78 px: começa com o texto */
  right: var(--space-18);
  bottom: var(--space-13);
  height: var(--tamanho-trilho);
  border-radius: var(--radius-3);
  background: color-mix(in srgb, var(--branco) 8%, transparent); /* rgba(255,255,255,.08) */
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--curva-opacidade);
}
.fk-areaenvio.fk-areaenvio--enviando > .fk-areaenvio__barra { opacity: 1; transition: opacity var(--duracao-curta) var(--curva-opacidade); }
/* A largura vem do consumidor (style="width: 64%"). */
.fk-areaenvio__progresso {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--lima);
  box-shadow: var(--shadow-brilho-lima);
}
/* A barra só desliza enquanto enche: um envio novo começa do 0 na hora e ela sai cheia enquanto o poço volta. */
.fk-areaenvio.fk-areaenvio--correndo .fk-areaenvio__progresso { transition: width var(--duracao-pressao) var(--curva-linear); }

/* ── Faixa (Ginga .drop.strip): 110 px, para imagens, com a linha de onde o arquivo fica salvo ────────────── */
.fk-areaenvio--faixa { height: 110px; padding: 0 var(--space-24) 0 var(--space-22); }
.fk-areaenvio--faixa > .fk-areaenvio__barra {
  left: calc(var(--space-22) + var(--fk-areaenvio-icone) + var(--space-16)); /* 84 px */
  right: var(--space-28);
  bottom: var(--space-16);
}

/* ── Áudio (Ginga .drop.big): 212 px, a mesma linha de cima e a onda de 96 barras embaixo, no lugar da barra ─── */
.fk-areaenvio--audio {
  height: 212px; /* Ginga .drop.big */
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 0;
  padding: var(--space-30) var(--space-26) 0 var(--space-24);
}
.fk-areaenvio--audio > .fk-areaenvio__barra { display: none; }
.fk-areaenvio__onda {
  grid-column: 1 / -1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px; /* Ginga .wave; as barras vão de 6 a 54 px */
  padding: 0 var(--space-4);
}
/* Cada barra traz --i (a posição, 0 a 95) e a altura no style. Em repouso a onda respira devagar, cada barra
   71 ms adiantada em relação à anterior. */
.fk-areaenvio__pico {
  display: block;
  flex: none;
  width: var(--tamanho-trilho); /* 3 px, a mesma linha do trilho */
  border-radius: var(--radius-3);
  background: color-mix(in srgb, var(--branco) 13%, transparent); /* rgba(255,255,255,.13) */
  transform: scaleY(.55);
  transition: background var(--duracao-curta);
  animation: fk-areaenvio-onda-repouso calc(2 * var(--duracao-giro) + var(--duracao-deslize)) ease-in-out infinite; /* 2,6 s */
  animation-delay: calc(var(--i, 0) * -71ms); /* passo do canvas */
}
.fk-areaenvio--audio:hover .fk-areaenvio__pico { background: color-mix(in srgb, var(--branco) 22%, transparent); } /* .22 */
/* Arquivo em cima: a onda inteira acende e dança; enviando, só as barras já enviadas (--aceso). */
.fk-areaenvio--audio.fk-areaenvio--sobre .fk-areaenvio__pico,
.fk-areaenvio--audio.fk-areaenvio--enviando .fk-areaenvio__pico.fk-areaenvio__pico--aceso {
  background: var(--lima);
  box-shadow: 0 0 var(--space-8) color-mix(in srgb, var(--lima) 45%, transparent); /* rgba(215,255,63,.45) */
  animation: fk-areaenvio-onda var(--duracao-silencio) ease-in-out infinite alternate; /* .7s */
  animation-delay: calc(var(--i, 0) * -43ms); /* passo do canvas */
}
/* Aviso: a onda fica âmbar e respira mais devagar (as barras já enviadas continuam acesas). */
.fk-areaenvio--audio.fk-areaenvio--aviso .fk-areaenvio__pico:not(.fk-areaenvio__pico--aceso),
.fk-areaenvio--audio.fk-areaenvio--aviso:not(.fk-areaenvio--enviando) .fk-areaenvio__pico {
  background: color-mix(in srgb, var(--aviso) 35%, transparent); /* rgba(242,207,150,.35) */
  box-shadow: none;
  animation-duration: calc(var(--duracao-varredura) + var(--duracao-deslize)); /* 3,4 s */
}
@keyframes fk-areaenvio-onda-repouso { 0%, 100% { transform: scaleY(.42); } 50% { transform: scaleY(.66); } }
@keyframes fk-areaenvio-onda { from { transform: scaleY(.25); } to { transform: scaleY(1.08); } }

/* ── Cartão (TrocarHorizontal .drop): o poço vertical de 208 × 300 da barra, no começo da fileira de cards ───── */
/* Três faces no mesmo lugar: __repouso, __soltar (arquivo em cima) e __envio; cada uma traz a sua tecla de ícone.
   Fundo com grade de pontos que acende em lima; com o arquivo em cima o cartão cresce para 1,025 e ganha um anel. */
.fk-areaenvio--cartao {
  --fk-areaenvio-icone: 44px; /* .dz-key */
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  width: 208px;  /* TrocarHorizontal .drop e .dcol */
  height: 300px; /* a altura dos cards 9:16 da fileira */
  padding: var(--space-22) var(--space-18);
  transition:
    transform var(--duracao-media) var(--curva-casa),
    box-shadow calc(var(--duracao-hover) + var(--duracao-rapida)) var(--curva-opacidade),      /* .35s */
    background-color calc(var(--duracao-hover) + var(--duracao-rapida)) var(--curva-opacidade);
}
.fk-poco.fk-areaenvio.fk-areaenvio--cartao { border-radius: var(--radius-14); }
.fk-areaenvio.fk-areaenvio--cartao::before { inset: var(--space-8); border-radius: var(--radius-9); }
/* A grade de pontos de 14 px, mais viva no centro (no lugar do clarão). */
.fk-areaenvio.fk-areaenvio--cartao::after {
  z-index: var(--camada-fundo);
  opacity: 1;
  background: radial-gradient(color-mix(in srgb, var(--branco) 7.5%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px; /* rgba(255,255,255,.075) */
  -webkit-mask-image: radial-gradient(circle at 50% 45%, var(--bg) 15%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, var(--bg) 15%, transparent 72%);
}
.fk-areaenvio--cartao:hover .fk-areaenvio__repouso .fk-areaenvio__icone { color: var(--texto-tecla); transform: translateY(-2px); }
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre {
  transform: scale(1.025);
  background-color: color-mix(in srgb, var(--tinta-lima) 30%, var(--poco)); /* ≈ #0e0f08 do canvas */
  box-shadow:
    0 0 0 1px var(--lima-envio-borda),
    0 0 0 6px color-mix(in srgb, var(--lima) 7%, transparent),          /* rgba(215,255,63,.07) */
    0 0 54px -8px color-mix(in srgb, var(--lima) 40%, transparent),     /* rgba(215,255,63,.4) */
    var(--shadow-poco-fundo);
}
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre::before { inset: var(--space-5); border-width: 1.5px; }
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre::after {
  background-image: radial-gradient(color-mix(in srgb, var(--lima) 24%, transparent) 1px, transparent 1.4px); /* rgba(215,255,63,.24) */
}
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--enviando::before { border-color: color-mix(in srgb, var(--branco) 10%, transparent); } /* .1 */

/* As faces: coluna centrada; quem não está na vez desce (ou sobe), encolhe para .97 e desfoca 4 px. Todas trocam
   com o mesmo tempo (opacidade .3 s, deslize .5 s); quem sai só fica invisível para o leitor de tela depois do fade
   (--fk-areaenvio-face-vis), quem chega fica visível na hora. */
.fk-areaenvio--cartao > .fk-areaenvio__pilha { width: 100%; }
.fk-areaenvio.fk-areaenvio--cartao .fk-areaenvio__pilha > * {
  --fk-areaenvio-face-vis: 0s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  text-align: center;
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--fk-areaenvio-longa) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    visibility 0s linear var(--fk-areaenvio-face-vis);
}
.fk-areaenvio.fk-areaenvio--cartao .fk-areaenvio__soltar,
.fk-areaenvio.fk-areaenvio--cartao .fk-areaenvio__envio {
  --fk-areaenvio-face-vis: var(--duracao-curta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.97);
  filter: blur(var(--desfoque-texto));
}
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre .fk-areaenvio__repouso,
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--enviando .fk-areaenvio__repouso {
  --fk-areaenvio-face-vis: var(--duracao-curta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.97);
  filter: blur(var(--desfoque-texto));
}
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre:not(.fk-areaenvio--enviando) .fk-areaenvio__soltar,
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--enviando .fk-areaenvio__envio {
  --fk-areaenvio-face-vis: 0s;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
}

/* A tecla do ícone fica acima do texto, com 4 px a mais embaixo; a da face de soltar já vem acesa em lima. */
.fk-areaenvio--cartao .fk-areaenvio__icone {
  margin-bottom: var(--space-4);
  transition: transform var(--duracao-media) var(--curva-casa), color var(--duracao-cor) var(--curva-opacidade), box-shadow var(--duracao-curta) var(--curva-opacidade);
}
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre .fk-areaenvio__icone { transform: none; color: var(--texto-tecla); }
.fk-areaenvio.fk-areaenvio--cartao .fk-areaenvio__icone.fk-areaenvio__icone--aceso {
  color: var(--lima);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 14%, transparent),   /* .14 */
    0 0 0 1px var(--sulco-sombra),                                        /* preto a .6 */
    0 10px 22px var(--sulco-sombra),                                      /* preto a .6 */
    0 0 24px -4px color-mix(in srgb, var(--lima) 45%, transparent);     /* rgba(215,255,63,.45) */
}
/* Textos do cartão: frase em linhas equilibradas; formatos em Space Grotesk; enviando, o nome do arquivo numa linha
   e a leitura "Enviando… 64%" / "Pronto" (= .vidro-rotulo, Space Grotesk 600 11/1). */
.fk-areaenvio--cartao .fk-areaenvio__titulo {
  max-width: 150px;
  overflow: visible;
  white-space: normal;
  text-wrap: balance;
  color: var(--texto-campo); /* #e8e8eb: 16,1:1 no poço */
  font: 600 12.5px/1.4 var(--font-texto);
}
.fk-areaenvio--cartao .fk-areaenvio__dica {
  overflow: visible;
  white-space: normal;
  color: var(--texto-rotulo); /* #909096: 6,2:1 no poço */
  font: 500 11px/1.3 var(--font-display);
  letter-spacing: .01em;
}
.fk-areaenvio--cartao .fk-areaenvio__envio .fk-areaenvio__titulo {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-forte);
  font: 600 12px/1.3 var(--font-texto);
}
.fk-areaenvio--cartao .fk-areaenvio__envio .fk-areaenvio__dica {
  color: var(--texto-suave); /* o canvas usa #c9c9ce; o token é #cacacf (12,0:1 no poço) */
  font: 600 11px/1 var(--font-display);
  letter-spacing: 0;
}
/* Recusado: a linha dos formatos vira o motivo, para os formatos nunca serem ditos duas vezes. */
.fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--recusado .fk-areaenvio__repouso .fk-areaenvio__dica {
  max-width: 164px;
  text-wrap: balance;
  letter-spacing: 0;
  color: var(--erro);
  font: 600 11px/1.4 var(--font-texto);
  animation: fk-areaenvio-motivo var(--fk-areaenvio-longa) var(--curva-casa) both;
}
@keyframes fk-areaenvio-motivo { from { opacity: 0; transform: translateY(4px); } }
/* O trilho do cartão: um sulco de 5 px com o lima em degradê (TrocarHorizontal .upbar). */
.fk-areaenvio__trilho {
  display: block;
  width: 100%;
  height: var(--space-5);
  border-radius: var(--radius-pilula);
  /* #050506 do canvas: o preto de --divisor-sombra (.5) sobre o poço */
  background: linear-gradient(var(--divisor-sombra), var(--divisor-sombra)), var(--poco);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--bg) 85%, transparent), /* rgba(0,0,0,.85) */
    0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent);     /* rgba(255,255,255,.05) */
  overflow: hidden;
}
.fk-areaenvio__trilho .fk-areaenvio__progresso {
  background: linear-gradient(90deg, var(--lima-base), var(--lima-topo));
  box-shadow: 0 0 10px color-mix(in srgb, var(--lima) 80%, transparent); /* .8 (o --shadow-brilho-lima é .85) */
}
/* A legenda fica fora do poço, logo abaixo, na coluna de 208 px (TrocarHorizontal .dcap). */
.fk-areaenvio__legenda {
  display: block;
  width: 208px;
  margin-top: var(--space-10);
  color: var(--texto-dica); /* #85858b: 5,4:1 na página */
  font: 500 11px/1.2 var(--font-texto);
  text-align: center;
}

/* ── Compacta (CriarMobile): celular, duas colunas, sem a tecla; a porcentagem sobe para a linha do nome ──── */
.fk-areaenvio--compacta {
  --fk-areaenvio-icone: 44px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
  height: auto;
  min-height: 78px; /* CriarMobile .drop */
  padding: var(--space-14) var(--space-14) var(--space-16) var(--space-14);
}
.fk-areaenvio--compacta.fk-areaenvio--sobre { transform: scale(1.015); }
.fk-areaenvio--compacta.fk-areaenvio--sobre.fk-areaenvio--quente { transform: scale(1.02); }
.fk-areaenvio--compacta .fk-areaenvio__repouso,
.fk-areaenvio--compacta .fk-areaenvio__envio { gap: var(--space-6); }
.fk-areaenvio--compacta .fk-areaenvio__titulo { font-size: 13px; line-height: 1.25; }
.fk-areaenvio--compacta .fk-areaenvio__dica { font-size: 11px; line-height: 1.4; }
.fk-areaenvio--compacta .fk-areaenvio__repouso .fk-areaenvio__dica { white-space: normal; }
.fk-areaenvio__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); min-width: 0; }
.fk-areaenvio--compacta .fk-areaenvio__pct { flex: none; font-size: 17px; }
.fk-areaenvio--compacta .fk-areaenvio__pct small { font-size: 11px; line-height: 1.4; }
.fk-areaenvio--compacta > .fk-areaenvio__barra {
  left: calc(var(--space-14) + var(--fk-areaenvio-icone) + var(--space-12)); /* 70 px */
  right: var(--space-18);
  bottom: var(--space-11);
}

/* ── Menos movimento: tudo troca na hora; a seta e a onda ficam paradas; nada cresce, desliza nem desfoca. ──── */
@media (prefers-reduced-motion: reduce) {
  .fk-areaenvio,
  .fk-areaenvio::before,
  .fk-areaenvio::after,
  .fk-areaenvio .fk-areaenvio__icone,
  .fk-areaenvio__icone svg,
  .fk-areaenvio .fk-areaenvio__icone .fk-areaenvio__icone-enviar,
  .fk-areaenvio .fk-areaenvio__icone .fk-areaenvio__icone-pronto,
  .fk-areaenvio .fk-areaenvio__pilha > *,
  .fk-areaenvio.fk-areaenvio--cartao .fk-areaenvio__pilha > *,
  .fk-areaenvio > .fk-areaenvio__barra,
  .fk-areaenvio .fk-areaenvio__progresso,
  .fk-areaenvio .fk-areaenvio__pico,
  .fk-tecla.fk-areaenvio__tecla { transition: none !important; }
  .fk-areaenvio .fk-areaenvio__icone-enviar,
  .fk-areaenvio .fk-areaenvio__pico,
  .fk-areaenvio .fk-areaenvio__dica { animation: none !important; }
  /* O celular e o cartão não crescem com o arquivo em cima (inclusive quente); as faces do cartão só trocam. */
  .fk-areaenvio--compacta.fk-areaenvio--sobre,
  .fk-areaenvio--compacta.fk-areaenvio--sobre.fk-areaenvio--quente,
  .fk-areaenvio.fk-areaenvio--cartao.fk-areaenvio--sobre { transform: none; }
  .fk-areaenvio.fk-areaenvio--cartao .fk-areaenvio__pilha > * { transform: none !important; filter: none !important; }
}

/* Source: BarraCriacao.css */
/* Fenaky Design System · BarraCriacao — o painel Criar vídeo deitado em barra, no alto da área de criação.
   Uma casca larga com dois módulos lado a lado: à esquerda o que entra no vídeo (Elenco no Trocar personagem,
   Referências no Gerar com Ginga), à direita o texto (Prompt ou Roteiro), um sulco e a linha de Saída (formato,
   duração, 1080p e a ação em lima). Embaixo dela, o palco troca galeria, seletores e player sem que a barra se mova.
   Fontes: TrocarHorizontal.dc.html (section.shell 300 px + 1fr, .slot/.pick/.thumb/.txt/.over/.name/.key.xs,
   .choosing, .flash, swapA/wasA/flashA, .ta 13,5/1,6, .cnt, a linha de .seg + .well.chip + .cta 44 px) e
   GingaHorizontal.dc.html (360 px + 1fr, altura mínima 264, .slots 80 px, .alist, .script 13,5/1,75, .swell.editing,
   .lbl .r.rsw com .rc/.rn, .pulse, a dica "Digite @", .cta de 268 px).
   Usa sem redefinir: .fk-casca, .fk-modulo, .fk-poco, .fk-rotulo, .fk-sulco, .fk-tecla (+ --xs, --sm), .fk-seg e
   .fk-segmentado__silhueta, .fk-prompt (+ __texto, __roteiro, __barra, __contagem, __aviso), .fk-cta (+ --barra, __sep,
   __lado, __giro, --ocupado, --espiar, --silencioso), .fk-botaoredondo, .fk-chipvidro--escolhendo, a fileira
   .fk-referenciaminiatura__fileira--barra (ReferenciaMiniatura) e a lista .fk-faixaaudio-lista (FaixaAudio).
   Aqui ficam só o arranjo da barra, o slot vertical do Elenco, a leitura do rótulo 02 do Roteiro e as medidas que a barra
   muda nas peças que recebe, por classes próprias.
   Medidas sem token: quando a barra usa um número do canvas que não é token (112 px, 36 px, 50 px, 350 ms, 620 ms,
   750 ms, 1,5 s), ele fica escrito como literal, com a origem no comentário, em vez de somar tokens sem relação.
   Tipografia: cada texto diz o estilo do sistema que segue. Onde o valor é igual ao estilo (1080p = .opcao), a marcação
   usa a classe do estilo; onde a barra difere, o desvio está escrito e explicado. */

/* ── Bloco: use com .fk-casca ─────────────────────────────────────────────────────────────────────────────────── */
/* Grade de duas colunas, 8 px de borda e de vão (TrocarHorizontal: 300 px + 1fr). A largura é a da coluna de conteúdo
   (o canvas usa 1160 px dentro de max-width 1160). */
.fk-barracriacao {
  --fk-barracriacao-coluna: 300px;
  display: grid;
  grid-template-columns: var(--fk-barracriacao-coluna) minmax(0, 1fr);
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8);
}
/* Gerar com Ginga: a coluna das referências tem 360 px (cinco lugares de 60 px e quatro vãos de 8, mais o respiro do
   módulo) e a barra não baixa de 264 px, para a lista de áudios ter 105 px (GingaHorizontal section.shell). */
.fk-barracriacao--ginga {
  --fk-barracriacao-coluna: 360px;
  min-height: 264px;
}

/* ── Módulo: use com .fk-modulo. Pilha de 12 px; o da direita estica o poço do texto. ─────────────────────────── */
.fk-barracriacao__modulo {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

/* ── Referências (Gerar com Ginga): a fileira de imagens em cima, a lista de áudios ocupando o resto ───────────── */
/* Fileira: .fk-referenciaminiatura__fileira .fk-referenciaminiatura__fileira--barra + esta classe. A faixa tem a altura
   de um lugar (80 px, GingaHorizontal .slots) e não encolhe, para enviar ou tirar uma imagem não mexer na lista. */
.fk-barracriacao__referencias {
  flex: none;
  min-height: 80px;
}
/* Lista de áudios: .fk-poco .fk-faixaaudio-lista + esta classe. Fica com a altura que sobra no módulo (105 px numa barra
   de 264) e recorta a linha empurrada para baixo enquanto as alturas deslizam (GingaHorizontal .alist). As linhas, o
   sulco entre elas e --fk-faixaaudio-linhas são da FaixaAudio. */
.fk-barracriacao__audios {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Elenco (Trocar personagem): dois slots verticais e o knob de seta entre eles ─────────────────────────────── */
/* Use com role="group" e aria-labelledby apontando para o rótulo 01. */
.fk-barracriacao__elenco {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}
/* Knob (.fk-botaoredondo, 28 px) na altura do meio da miniatura: 8 de respiro + 112 / 2 − 28 / 2 = 50 px
   (TrocarHorizontal .knob no elenco, margin-top: 50px). */
.fk-barracriacao__elo { margin-top: 50px; cursor: default; }

/* Slot: use com .fk-poco. Miniatura em cima, legenda e nome, e a tecla Trocar na largura toda. */
.fk-barracriacao__slot {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-8);
  /* 400 ms ease (TrocarHorizontal .slot). */
  transition: box-shadow var(--duracao-contador) var(--curva-opacidade);
}
/* Escolhendo: a galeria está escolhendo para este slot. Filete claro de 1,5 px a 88 % e halo de 6 px a 9 % por fora
   do poço (TrocarHorizontal .slot.editing). O filete cobre a linha de luz de 1 px da base do poço. */
.fk-barracriacao__slot--escolhendo,
.fk-barracriacao__slot:has(> .fk-barracriacao__trocar[aria-pressed="true"]) {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--texto-forte) 88%, transparent),
    0 0 0 var(--space-6) color-mix(in srgb, var(--texto-forte) 9%, transparent),
    var(--shadow-poco);
}

/* Escolher: a miniatura e o nome são um botão só, que abre o mesmo seletor que a tecla Trocar. */
.fk-barracriacao__escolher {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-9);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Miniatura: 112 px de altura (TrocarHorizontal .thumb, height: 112px), raio 9, enquadrada pelo rosto. */
.fk-barracriacao__miniatura {
  position: relative;
  display: block;
  width: 100%;
  height: 112px;
  border-radius: var(--radius-9);
  overflow: hidden;
  background: var(--midia-fundo);
  box-shadow: var(--shadow-miniatura);
}
/* Reflexo de 9 % até 30 % da altura e filete interno de 10 % por cima da foto (.thumb::after). */
.fk-barracriacao__miniatura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 10%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 9%, transparent), transparent 30%);
  pointer-events: none;
}
/* Camadas: <img> ou <video> (primeiro quadro de um vídeo enviado). A --atual é a escolha; a --anterior só faz a ponte
   da troca e some depois que a nova chegou. */
.fk-barracriacao__camada {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.fk-barracriacao__camada--atual { transition: transform var(--duracao-deslize) var(--curva-casa); }
.fk-barracriacao__escolher:hover .fk-barracriacao__camada--atual { transform: scale(1.05); }
/* Vídeo enviado sem o primeiro quadro ainda: a marca de filme (16 px) num fundo escuro em radial. A cor do canvas
   (#1c1c1f → #111113, ícone #5d5d63) vira casca-meio → poco e texto-separador, os tokens mais próximos. Fica por cima
   das camadas até o <video> desenhar o primeiro quadro; então a página o tira. */
.fk-barracriacao__vazio {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--texto-separador);
  background: radial-gradient(circle at 50% 40%, var(--casca-meio), var(--poco) 75%);
}

/* "Escolhendo": .fk-vidro .fk-chipvidro .fk-chipvidro--escolhendo .fk-chipvidro--base-centro dentro da miniatura.
   Aqui só a aparição: acende em 350 ms ease e sobe 5 px em 500 ms na curva da casa (TrocarHorizontal .choosing:
   transition opacity .35s ease, transform .5s). */
.fk-barracriacao__escolhendo {
  z-index: 3;
  opacity: 0;
  transform: translateY(var(--space-5));
  transition:
    opacity 350ms var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa);
}
:is(.fk-barracriacao__slot--escolhendo, .fk-barracriacao__slot:has(> .fk-barracriacao__trocar[aria-pressed="true"])) .fk-barracriacao__escolhendo {
  opacity: 1;
  transform: none;
}

/* Texto: legenda em caixa-alta e o nome, com 2 px de recuo. */
.fk-barracriacao__texto-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-2);
}
/* Legenda: o estilo .legenda (Space Grotesk 500, caixa-alta) na medida da barra, 10 px e .1em em vez de 10,5 px e
   .08em (TrocarHorizontal .over). Exceção da barra: o slot vertical tem 130 px de largura útil e a legenda mais
   larga ("Personagem") precisa caber em uma linha. Cor texto-dica sobre o poço (5,4:1); ao escolher, texto-link. */
.fk-barracriacao__legenda {
  color: var(--texto-dica);
  font: 500 10px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color var(--duracao-curta) var(--curva-opacidade);
}
:is(.fk-barracriacao__slot--escolhendo, .fk-barracriacao__slot:has(> .fk-barracriacao__trocar[aria-pressed="true"])) .fk-barracriacao__legenda {
  color: var(--texto-link);
}
/* Nome: o estilo .item-titulo (Manrope 600 13 px) com entrelinha 1,2 em vez de 1,35 (TrocarHorizontal .name). Exceção
   da barra: o nome é uma linha só, com reticências, e a entrelinha menor fecha a pilha legenda + nome em 4 px. */
.fk-barracriacao__nome {
  overflow: hidden;
  color: var(--texto-forte);
  font: 600 13px/1.2 var(--font-texto);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Trocar: .fk-tecla .fk-tecla--xs (24 px) na largura do slot; aria-pressed acende a tecla e o slot. */
.fk-barracriacao__trocar { width: 100%; }

/* ── Troca: o slot recebe --troca-a ou --troca-b (alternando, para repetir) quando a escolha muda ──────────────── */
/* A foto nova entra de escala 1,14, desfoque de 10 px e brilho 1,5 em 750 ms na curva da casa
   (TrocarHorizontal swapA: .75s var(--e)). */
.fk-barracriacao__slot--troca-a .fk-barracriacao__camada--atual { animation: fk-barracriacao-entra-a 750ms var(--curva-casa) both; }
.fk-barracriacao__slot--troca-b .fk-barracriacao__camada--atual { animation: fk-barracriacao-entra-b 750ms var(--curva-casa) both; }
@keyframes fk-barracriacao-entra-a {
  from { opacity: 0; transform: scale(1.14); filter: blur(var(--desfoque-vidro)) brightness(1.5); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes fk-barracriacao-entra-b {
  from { opacity: 0; transform: scale(1.14); filter: blur(var(--desfoque-vidro)) brightness(1.5); }
  to { opacity: 1; transform: none; filter: none; }
}
/* A anterior faz a ponte e sai em 300 ms depois de 620 ms, quando a nova já cobriu quase tudo (TrocarHorizontal wasA:
   .3s ease .62s). Assim um vídeo enviado sem quadro mostra a marca, não a foto velha. */
.fk-barracriacao__slot--troca-a .fk-barracriacao__camada--anterior { animation: fk-barracriacao-sai-a var(--duracao-curta) var(--curva-opacidade) 620ms both; }
.fk-barracriacao__slot--troca-b .fk-barracriacao__camada--anterior { animation: fk-barracriacao-sai-b var(--duracao-curta) var(--curva-opacidade) 620ms both; }
@keyframes fk-barracriacao-sai-a { to { opacity: 0; } }
@keyframes fk-barracriacao-sai-b { to { opacity: 0; } }
/* Lampejo: anel branco de 2 px a 95 % com brilho de 26 px a 30 % que se abre até 14 px e some em 1 s (flashA). */
.fk-barracriacao__lampejo {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.fk-barracriacao__slot--troca-a .fk-barracriacao__lampejo { animation: fk-barracriacao-lampejo-a var(--duracao-giro) ease-out; }
.fk-barracriacao__slot--troca-b .fk-barracriacao__lampejo { animation: fk-barracriacao-lampejo-b var(--duracao-giro) ease-out; }
@keyframes fk-barracriacao-lampejo-a {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 var(--space-2) color-mix(in srgb, var(--branco) 95%, transparent),
      0 0 0 var(--space-2) color-mix(in srgb, var(--branco) 40%, transparent),
      0 0 var(--space-26) color-mix(in srgb, var(--branco) 30%, transparent);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 0%, transparent),
      0 0 0 var(--space-14) color-mix(in srgb, var(--branco) 0%, transparent),
      0 0 var(--space-26) color-mix(in srgb, var(--branco) 0%, transparent);
  }
}
@keyframes fk-barracriacao-lampejo-b {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 var(--space-2) color-mix(in srgb, var(--branco) 95%, transparent),
      0 0 0 var(--space-2) color-mix(in srgb, var(--branco) 40%, transparent),
      0 0 var(--space-26) color-mix(in srgb, var(--branco) 30%, transparent);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 0%, transparent),
      0 0 0 var(--space-14) color-mix(in srgb, var(--branco) 0%, transparent),
      0 0 var(--space-26) color-mix(in srgb, var(--branco) 0%, transparent);
  }
}

/* ── Rótulo 02 do Roteiro (Ginga): a contagem à direita dá lugar a "Escolhendo" enquanto o palco escolhe o roteiro ── */
/* .fk-rotulo__dir + esta classe, com dois filhos empilhados na mesma célula e alinhados à direita (GingaHorizontal
   .lbl .r.rsw). A troca é a do canvas: opacidade em 300 ms ease e 5 px de deslize em 450 ms na curva da casa, sem
   desfoque e sem espera (por isso não é o .fk-rotulo__troca do Rotulo, que espera 160 ms e desfoca). */
.fk-barracriacao__leitura { display: inline-grid; }
.fk-barracriacao__leitura > * {
  grid-area: 1 / 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-7);
  white-space: nowrap;
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa);
}
/* "Escolhendo": o estilo do .fk-rotulo__dir com peso 600 e texto-aceso (.rsw .rn), sobre o módulo. Escondido, desce. */
.fk-barracriacao__leitura-escolhendo {
  opacity: 0;
  transform: translateY(var(--space-5));
  color: var(--texto-aceso);
  font-weight: 600;
}
/* --escolhendo: o roteiro está sendo escolhido; a contagem sobe e some, "Escolhendo" chega de baixo. */
.fk-barracriacao__leitura--escolhendo .fk-barracriacao__leitura-contagem { opacity: 0; transform: translateY(calc(var(--space-5) * -1)); }
.fk-barracriacao__leitura--escolhendo .fk-barracriacao__leitura-escolhendo { opacity: 1; transform: none; }
/* --escolhida (junto com --escolhendo): uma receita caiu no roteiro e o palco segue aberto; a contagem nova volta. */
.fk-barracriacao__leitura--escolhendo.fk-barracriacao__leitura--escolhida .fk-barracriacao__leitura-contagem { opacity: 1; transform: none; }
.fk-barracriacao__leitura--escolhendo.fk-barracriacao__leitura--escolhida .fk-barracriacao__leitura-escolhendo { opacity: 0; transform: translateY(var(--space-5)); }
/* Ponto vivo de 6 px em texto-forte, com o anel que se abre 8 px e some em 1,5 s (GingaHorizontal .pulse / ping). */
.fk-barracriacao__pulso {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circulo);
  background: var(--texto-forte);
  animation: fk-barracriacao-pulso 1.5s ease-out infinite;
}
@keyframes fk-barracriacao-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--texto-forte) 55%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--texto-forte) 0%, transparent); }
}

/* ── Texto: o poço .fk-prompt estica até o sulco ──────────────────────────────────────────────────────────────── */
.fk-barracriacao__prompt {
  flex: 1;
  transition: box-shadow 350ms var(--curva-casa); /* GingaHorizontal .swell: .35s var(--e) */
}
/* Roteiro escolhendo (Ginga, Receitas abertas no palco): o poço ganha o anel de escolha, 2 px de texto-forte e halo
   de 6 px (GingaHorizontal .swell.editing). */
.fk-barracriacao__prompt--escolhendo {
  box-shadow:
    0 0 0 var(--space-2) var(--texto-forte),
    0 0 0 var(--space-6) var(--anel-escolha),
    var(--shadow-poco);
}
/* Na barra o texto é maior que no painel lateral: Manrope 13,5 px com 13 14 4 px de respiro (.ta e .script). É o estilo
   .campo (Manrope 500) com 0,5 px a mais, exceção da barra, que tem mais largura de linha. O texto estica no poço até
   as teclas: a textarea com altura mínima de 84 px e entrelinha 1,6 (.ta); o roteiro sem altura mínima (a barra de
   264 px dá a ele 84 px) e com a sua entrelinha de 1,75 (.script). */
.fk-barracriacao .fk-prompt .fk-barracriacao__texto {
  flex: 1;
  padding: var(--space-13) var(--space-14) var(--space-4);
  font-size: 13.5px;
}
.fk-barracriacao .fk-prompt textarea.fk-barracriacao__texto {
  min-height: var(--fk-prompt-altura, 84px);
  line-height: 1.6;
}
.fk-barracriacao .fk-prompt .fk-prompt__roteiro.fk-barracriacao__texto { min-height: 0; }
.fk-barracriacao .fk-prompt .fk-barracriacao__texto::placeholder { color: var(--texto-dica); }
/* O que um atalho acabou de escrever fica selecionado, e digitar substitui (.ta::selection, branco a 24 %). */
.fk-barracriacao__texto::selection { color: var(--branco); background: color-mix(in srgb, var(--texto-forte) 24%, transparent); }
/* Atalhos e contagem: 8 px por todos os lados dentro do poço; a contagem em texto-controle (.cnt, 6,0:1 no poço).
   Trocar: a contagem fica aqui, em .fk-prompt__contagem. Ginga: a contagem fica no rótulo (__leitura). */
.fk-barracriacao .fk-prompt .fk-barracriacao__atalhos { padding: var(--space-8); }
.fk-barracriacao .fk-prompt .fk-barracriacao__contagem { color: var(--texto-controle); }
/* Dica do Roteiro: "Digite @ para citar uma referência", Manrope 500 10,5 px em texto-dica, encostada à direita.
   É o tamanho e o peso do estilo .legenda, mas em Manrope, sem caixa-alta e sem espaçamento: exceção da barra, uma frase
   de ajuda e não uma legenda. */
.fk-barracriacao__dica {
  margin-left: auto;
  color: var(--texto-dica);
  font: 500 10.5px/1 var(--font-texto);
  white-space: nowrap;
}

/* ── Saída: rótulo 03, formato, duração, 1080p e a ação, numa linha com vão de 10 px ───────────────────────────── */
/* Numa coluna estreita a ação desce para a linha de baixo e encosta à direita (o canvas tem largura para tudo). */
.fk-barracriacao__saida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
}
/* Segmentados da linha: cada opção do tamanho do texto (repeat(n, auto)), não colunas iguais. Use com .fk-seg. */
.fk-barracriacao .fk-barracriacao__seg { grid-auto-columns: auto; }
/* 1080p: um poço de leitura de 36 px (TrocarHorizontal .chip, height: 36px), raio 10, em texto-link (13,6:1 no poço).
   A letra é o estilo .opcao (Space Grotesk 600 12/1): use class="fk-poco opcao fk-barracriacao__qualidade". */
.fk-barracriacao__qualidade {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-10);
  color: var(--texto-link);
  white-space: nowrap;
}
/* Ação: .fk-cta .fk-cta--barra (44 px). Do tamanho do texto, no mínimo 244 px, empurrada para a direita.
   No Ginga, 268 px fixos (o rótulo "Gerar com Ginga" é mais longo e a porcentagem muda de largura). */
.fk-barracriacao .fk-barracriacao__acao {
  flex: none;
  width: auto;
  min-width: 244px;
  margin-left: auto;
}
.fk-barracriacao--ginga .fk-barracriacao__acao { width: 268px; }

/* ── Menos movimento: o slot acende sem transição, nada escala nem desfoca, a troca vira um esmaecer de 300 ms. ─── */
@media (prefers-reduced-motion: reduce) {
  .fk-barracriacao__slot,
  .fk-barracriacao__prompt,
  .fk-barracriacao__escolhendo,
  .fk-barracriacao__camada--atual,
  .fk-barracriacao__leitura > * { transition: none; }
  .fk-barracriacao__escolhendo,
  .fk-barracriacao__leitura > * { transform: none !important; }
  .fk-barracriacao__escolher:hover .fk-barracriacao__camada--atual { transform: none; }
  .fk-barracriacao__pulso { animation: none; }
  .fk-barracriacao__slot--troca-a .fk-barracriacao__camada--atual { animation: fk-barracriacao-esmaece-a var(--duracao-curta) var(--curva-opacidade) both; }
  .fk-barracriacao__slot--troca-b .fk-barracriacao__camada--atual { animation: fk-barracriacao-esmaece-b var(--duracao-curta) var(--curva-opacidade) both; }
  .fk-barracriacao__slot--troca-a .fk-barracriacao__lampejo,
  .fk-barracriacao__slot--troca-b .fk-barracriacao__lampejo { animation: none; }
}
@keyframes fk-barracriacao-esmaece-a { from { opacity: 0; } to { opacity: 1; } }
@keyframes fk-barracriacao-esmaece-b { from { opacity: 0; } to { opacity: 1; } }

/* Source: BarraProgresso.css */
/* Fenaky Design System · BarraProgresso — o andamento de uma tarefa numa linha: lima com halo enquanto anda,
   verde de sucesso quando termina, um trecho correndo quando ainda não há porcentagem.
   Fontes: Main.dc.html (.dbar do envio: trilho .08, halo 10 px .85; .track do player: trilho .14, halo 12 px),
   Motion.dc.html (.jbar da lista de trabalhos; .well.prog e .prog.indet do envio), CriarMobile.dc.html (.mtrack que
   aparece crescendo de scaleX .6 e vira .ok em sucesso; .sbar e .is-done), Assets.dc.html e Notificacoes.dc.html
   (.ptrack sobre a miniatura, indeterminado em 1,9 s) e Termos.dc.html (.well.bar da leitura, role="progressbar",
   com o rótulo "Leitura", a porcentagem e "Seção 7 de 11" / "Leitura concluída").
   Cores só por var(--token); quando o canvas usa outra opacidade da mesma cor, ela sai do token com color-mix() e a
   conta fica anotada. Durações que não são token saem de somas de tokens. O trilho, o poço e o rótulo vêm das
   primitivas (.fk-poco, .fk-rotulo); este arquivo não as redefine. */

/* ── Trilho (padrão: linha de 3 px sobre casca ou módulo) ─────────────────────────────────────────────────────── */
/* O valor (0 a 100) entra por --fk-barraprogresso-valor no trilho, junto com aria-valuenow; um style="width" no
   preenchimento também vale. */
.fk-barraprogresso {
  position: relative;
  display: block;
  width: 100%;
  height: var(--tamanho-trilho);
  overflow: hidden;
  border-radius: var(--radius-3);
  background: color-mix(in srgb, var(--branco) 8%, transparent); /* rgba(255,255,255,.08): .dbar e .jbar */
  /* Aparecer e sumir (CriarMobile .mtrack): some em .4 s com o recolher em .7 s; volta em .5 s crescendo em .9 s. */
  transform-origin: 0 50%;
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade),
    transform var(--duracao-dialogo) var(--curva-casa);
}
.fk-barraprogresso__valor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--fk-barraprogresso-valor, 0) * 1%);
  max-width: 100%;
  border-radius: inherit;
  background: var(--lima);
  box-shadow: var(--shadow-brilho-lima); /* 0 0 10px rgba(215,255,63,.85) */
  /* Enche em linha reta (Main .track .2 s); a cor muda devagar ao concluir (CriarMobile .6 s). */
  transition:
    width var(--duracao-rapida) var(--curva-linear),
    background-color var(--duracao-deslize) var(--curva-opacidade),
    box-shadow var(--duracao-deslize) var(--curva-opacidade);
}

/* ── Sobre mídia: no pé da miniatura ou do player, trilho mais claro e halo de 12 px ──────────────────────────── */
/* Main .track, Assets e Notificacoes .ptrack. Halo: a cor é --lima-halo (a mesma de --shadow-brilho-lima, .85) e o
   raio é o de 12 px do canvas; não há token de sombra com esse raio, então o px fica escrito aqui. */
.fk-barraprogresso--midia { background: color-mix(in srgb, var(--branco) 14%, transparent); } /* rgba(255,255,255,.14) */
.fk-barraprogresso--midia .fk-barraprogresso__valor { box-shadow: 0 0 12px var(--lima-halo); } /* rgba(215,255,63,.85) */

/* ── Pé: assenta a barra no rodapé do contêiner (que precisa de position: relative) ─────────────────────────── */
/* A margem vem de --fk-barraprogresso-margem: 12 px no card (padrão, Assets .ptrack), 16 px no player (Main .track),
   14 px no player compacto. */
.fk-barraprogresso--pe {
  position: absolute;
  left: var(--fk-barraprogresso-margem, var(--space-12));
  right: var(--fk-barraprogresso-margem, var(--space-12));
  bottom: var(--fk-barraprogresso-margem, var(--space-12));
  width: auto;
}

/* ── Poço: barra que mede uma leitura ou um envio dentro da casca (Termos .well.bar) ─────────────────────────── */
/* Marcação: class="fk-poco fk-barraprogresso fk-barraprogresso--poco". O poço de 10 px com 3 px de folga guarda
   o preenchimento de 4 px; o raio cai de 12 para 7. */
.fk-poco.fk-barraprogresso--poco {
  height: var(--space-10);
  padding: var(--space-3);
  overflow: visible;
  border-radius: var(--radius-7);
  background: var(--poco);
}
.fk-barraprogresso--poco .fk-barraprogresso__valor {
  position: static;
  display: block;
  height: 100%;
  border-radius: var(--radius-3);
  /* Raio de --shadow-brilho-lima (10 px) com o alfa .75 de Termos; não há token de sombra com esse alfa. */
  box-shadow: 0 0 10px color-mix(in srgb, var(--lima) 75%, transparent); /* rgba(215,255,63,.75) */
  /* A leitura acompanha a rolagem com a curva da casa (Termos .25 s). */
  transition:
    width var(--duracao-cor) var(--curva-casa),
    background-color var(--duracao-deslize) var(--curva-opacidade),
    box-shadow var(--duracao-deslize) var(--curva-opacidade);
}

/* ── Concluída: o lima vira sucesso e o halo apaga (CriarMobile .mtrack.ok, .is-done .sbar) ──────────────────── */
.fk-barraprogresso--concluida .fk-barraprogresso__valor {
  width: 100%;
  background-color: var(--sucesso);
  box-shadow: none;
}

/* ── Indeterminada: sem porcentagem, um trecho de 40 % atravessa o trilho (Assets .ptrack, 1,9 s) ────────────── */
/* 1,9 s = duracao-varredura (2,8 s) − duracao-dialogo (0,9 s). Sem aria-valuenow no trilho. */
.fk-barraprogresso--indeterminada .fk-barraprogresso__valor {
  left: -40%;
  width: 40%;
  transition: none;
  animation: fk-barraprogresso-corre calc(var(--duracao-varredura) - var(--duracao-dialogo)) var(--curva-varredura) infinite;
}
@keyframes fk-barraprogresso-corre { to { left: 100%; } }
/* No poço o trecho corre só na largura do conteúdo, sem invadir a folga de 3 px dos lados: o preenchimento vira uma
   janela do tamanho do conteúdo (3 px para dentro de cada lado, altura toda do poço) recortada por clip-path, e o
   trecho é o ::before dela. O halo ainda se espalha pela folga de cima e de baixo, como na leitura. */
.fk-barraprogresso--poco.fk-barraprogresso--indeterminada .fk-barraprogresso__valor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  width: auto;
  height: auto;
  max-width: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: inset(0);
  transition: none;
  animation: none;
}
.fk-barraprogresso--poco.fk-barraprogresso--indeterminada .fk-barraprogresso__valor::before {
  content: '';
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  left: -40%;
  width: 40%;
  border-radius: var(--radius-3);
  background: var(--lima);
  box-shadow: 0 0 10px color-mix(in srgb, var(--lima) 75%, transparent); /* o mesmo halo do poço, acima */
  animation: fk-barraprogresso-corre calc(var(--duracao-varredura) - var(--duracao-dialogo)) var(--curva-varredura) infinite;
}

/* ── Oculta: fora de cena antes de começar ou depois de sair (CriarMobile .mtrack sem .on) ───────────────────── */
.fk-barraprogresso--oculta {
  opacity: 0;
  transform: scaleX(.6);
  transition:
    opacity var(--duracao-contador) var(--curva-opacidade),
    transform var(--duracao-silencio) var(--curva-casa);
}

/* ── Bloco de leitura: rótulo com o valor, a barra (e uma tecla ao lado) e a nota embaixo (Termos .prog) ─────── */
/* O rótulo é a primitiva .fk-rotulo com .fk-rotulo__dir; a tecla ao lado vem do componente dela. */
.fk-barraprogresso-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.fk-barraprogresso-bloco__linha {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.fk-barraprogresso-bloco__linha > .fk-barraprogresso { flex: 1; min-width: 0; }
/* Nota: Space Grotesk 500 11,5 px em texto-controle (6,0:1 na casca); o número em destaque em texto-hover-rail. */
.fk-barraprogresso-bloco__nota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 15px; /* 11,5 × 1,3 = 14,95: a linha não pula quando o fim aparece */
  margin: 0;
  color: var(--texto-controle);
  font: 500 11.5px/1.3 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-barraprogresso-bloco__nota b { font-weight: 600; color: var(--texto-hover-rail); }
/* "Leitura concluída": entra subindo 4 px quando o valor chega a 100 (Termos .fin.is-done). */
.fk-barraprogresso-bloco__fim {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--sucesso);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-4));
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    visibility 0s var(--curva-linear) var(--duracao-curta);
}
.fk-barraprogresso-bloco__fim--visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    visibility 0s;
}

/* ── Menos movimento: nada desliza nem cresce; o indeterminado vira um trecho parado de 46 % (Assets). ──────── */
@media (prefers-reduced-motion: reduce) {
  .fk-barraprogresso,
  .fk-barraprogresso--oculta,
  .fk-barraprogresso__valor,
  .fk-barraprogresso-bloco__fim { transition: none; }
  .fk-barraprogresso--oculta { transform: none; }
  .fk-barraprogresso--indeterminada .fk-barraprogresso__valor { left: 0; width: 46%; animation: none; }
  .fk-barraprogresso--poco.fk-barraprogresso--indeterminada .fk-barraprogresso__valor::before { left: 0; width: 46%; animation: none; }
}

/* Source: BotaoRedondo.css */
/* Fenaky Design System · BotaoRedondo — os botões redondos só de ícone: o knob (marca e controle do player), o play
   sobre o vídeo (canto do card e grande no centro do quadro) e a tecla redonda de fechar e das setas, com o empurrão
   da seta e a entrada no palco da prévia.
   Fontes: .knob (todas as pranchas; Main 24 px entre os slots; Home e PreviewVideo .pv-ctrl .knob 32 px; Conta .hold,
   .toast .knob e .dlg-head .knob; Suporte .closed .knob), Home .play (card de vídeo), Home e PreviewVideo .pv-big,
   .pv-nav e .pv-x, Home .vmore .key (seta que anda 2 px). A tecla em si (.fk-tecla) é primitiva de 00-base.css.
   Forma canônica da tecla redonda: .fk-tecla.fk-botaoredondo (é a única que compõe com os tamanhos 24/40/48, a seta e o
   palco). .fk-tecla--redonda (Tecla) é um alias de mesmo pixel mantido para as páginas que já o usam; não junte os dois
   no mesmo elemento. */

/* ── Bloco: forma comum ────────────────────────────────────────────────────────────────────────────────────────── */
.fk-botaoredondo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tamanho-botao-redondo);
  height: var(--tamanho-botao-redondo);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circulo);
  text-decoration: none;
}
.fk-botaoredondo > svg { flex: none; }

/* ── Knob: radial de botao-redondo-topo para tecla-base, ícone de traço em texto-icone (7,1:1) ────────────────── */
.fk-botaoredondo:not(.fk-tecla, .fk-botaoredondo--play, .fk-botaoredondo--play-grande) {
  color: var(--texto-icone);
  background: radial-gradient(circle at 50% 30%, var(--botao-redondo-topo), var(--tecla-base) 70%);
  box-shadow: var(--shadow-botao-redondo);
}
/* Knob como controle (<button> ou <a>): o ícone clareia e o botão afunda 1 px (PreviewVideo .pv-ctrl .knob:
   transition color .15s, transform .1s). O play grande é <button> também, mas tem o próprio movimento e não afunda
   (.pv-big): fica fora destas regras. */
:is(button, a).fk-botaoredondo:not(.fk-tecla, .fk-botaoredondo--play-grande) {
  cursor: pointer;
  transition: color var(--duracao-hover), transform var(--duracao-pressao);
}
:is(button, a).fk-botaoredondo:not(.fk-tecla, .fk-botaoredondo--play-grande, :disabled, [aria-disabled="true"]):hover { color: var(--branco); }
:is(button, a).fk-botaoredondo:not(.fk-tecla, .fk-botaoredondo--play-grande, :disabled, [aria-disabled="true"]):active { transform: translateY(1px); }
:is(button, a).fk-botaoredondo:not(.fk-tecla, .fk-botaoredondo--play-grande):is(:disabled, [aria-disabled="true"]) {
  opacity: var(--opacidade-desligado);
  cursor: not-allowed;
}

/* Tamanhos do knob: 24 marca entre slots (Main), 28 padrão, 32 controle do player (.pv-ctrl), 40 cabeçalho de diálogo
   (Conta e Suporte .dlg-head .knob). Sem token de 40: --tamanho-tecla + --space-10, como em Tecla --xl. Os knobs de
   26, 30 e 36 px da Conta ficam fora da escala: o componente consumidor os resolve no próprio CSS, de tokens
   (ex.: Saldo .fk-saldo__icone = --tamanho-tecla). */
.fk-botaoredondo--sm { width: var(--tamanho-botao-redondo-sm); height: var(--tamanho-botao-redondo-sm); }
.fk-botaoredondo--md { width: var(--tamanho-alvo); height: var(--tamanho-alvo); }
.fk-botaoredondo--lg { width: calc(var(--tamanho-tecla) + var(--space-10)); height: calc(var(--tamanho-tecla) + var(--space-10)); }

/* Tinta do ícone no knob: o estado do fato ao lado (Conta .knob.hold, .toast .knob, .dlg-head .knob; Suporte .closed). */
.fk-botaoredondo.fk-botaoredondo--sucesso { color: var(--sucesso); }
.fk-botaoredondo.fk-botaoredondo--aviso { color: var(--aviso); }
.fk-botaoredondo.fk-botaoredondo--erro { color: var(--erro); }
.fk-botaoredondo.fk-botaoredondo--neutro { color: var(--neutro); }

/* ── Tecla redonda: .fk-tecla + .fk-botaoredondo (fechar, setas). Material, hover, :active e desligado vêm da
   primitiva; aqui ficam a forma, os tamanhos do palco e o movimento. ──────────────────────────────────────────── */
.fk-tecla.fk-botaoredondo {
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  padding: 0;
  border-radius: var(--radius-circulo);
}
/* 24 px numa lista apertada (GingaHorizontal .alist.n3); 40 px o fechar do palco (.pv-x); 48 px as setas do palco
   (.pv-nav). Sem token de tamanho de 48 px: --space-48. */
.fk-tecla.fk-botaoredondo--sm { width: var(--tamanho-alvo-minimo); height: var(--tamanho-alvo-minimo); }
.fk-tecla.fk-botaoredondo--lg { width: calc(var(--tamanho-tecla) + var(--space-10)); height: calc(var(--tamanho-tecla) + var(--space-10)); }
.fk-tecla.fk-botaoredondo--xl { width: var(--space-48); height: var(--space-48); }

/* Seta: o ícone anda 2 px para onde aponta sob o ponteiro (Home .pv-nav svg e .vmore .key: 300 ms na curva da casa). */
.fk-botaoredondo--anterior > svg,
.fk-botaoredondo--proxima > svg { transition: transform var(--duracao-curta) var(--curva-casa); }
.fk-botaoredondo--anterior:not(:disabled, [aria-disabled="true"]):hover > svg { transform: translateX(calc(var(--space-2) * -1)); }
.fk-botaoredondo--proxima:not(:disabled, [aria-disabled="true"]):hover > svg { transform: translateX(var(--space-2)); }

/* Palco (prévia de vídeo e player abrindo, Home .vwrap.open .pv-nav e .pv-x): ao abrir, voltam com 380 ms de atraso,
   opacidade em 500 ms (ease) e posição em 900 ms na curva da casa. Recolhidos (--oculto): a anterior 14 px para a
   direita, a próxima 14 px para a esquerda, o fechar em escala .8. Sob o ponteiro a pressão volta a ser imediata. */
.fk-botaoredondo.fk-botaoredondo--palco {
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-atraso-entrada),
    transform var(--duracao-dialogo) var(--curva-casa) var(--duracao-atraso-entrada),
    background var(--duracao-hover),
    color var(--duracao-hover),
    box-shadow var(--duracao-rapida);
}
.fk-botaoredondo.fk-botaoredondo--palco:not(.fk-botaoredondo--oculto):is(:hover, :active) {
  transition: transform var(--duracao-pressao), background var(--duracao-hover), color var(--duracao-hover), box-shadow var(--duracao-rapida);
}
.fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--oculto {
  transform: scale(.8);
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--anterior.fk-botaoredondo--oculto { transform: translateX(var(--space-14)); }
.fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--proxima.fk-botaoredondo--oculto { transform: translateX(calc(var(--space-14) * -1)); }

/* ── Play sobre o vídeo ────────────────────────────────────────────────────────────────────────────────────────── */
/* Canto do card (Home .play): 28 px de vidro, ícone branco cheio de 11 px. Fica dentro do card que é o botão:
   é marca (aria-hidden), não alvo. */
.fk-botaoredondo.fk-botaoredondo--play {
  color: var(--branco);
  background: var(--veu-play);
  -webkit-backdrop-filter: blur(var(--desfoque-saida));
  backdrop-filter: blur(var(--desfoque-saida));
  box-shadow: var(--shadow-play);
  transition: opacity var(--duracao-curta) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
/* No canto de baixo à esquerda, a 10 px (o card precisa de position: relative). */
.fk-botaoredondo--canto {
  position: absolute;
  z-index: 2;
  left: var(--space-10);
  bottom: var(--space-10);
}

/* Grande (PreviewVideo .pv-big): 68 px no centro do quadro, só com o vídeo pausado. O canvas usa rgba(10,10,12,.45),
   desfoque de 12 px e três sombras; aqui saem dos tokens: --veu-play (.55) a 81,8 % dá .45; os filetes são --branco
   a 20 % e 18 %; a sombra é --sulco-sombra (.6) a 75 % = .45. 68 px = --space-64 + --space-4. */
.fk-botaoredondo.fk-botaoredondo--play-grande {
  width: calc(var(--space-64) + var(--space-4));
  height: calc(var(--space-64) + var(--space-4));
  cursor: pointer;
  color: var(--branco);
  background: color-mix(in srgb, var(--veu-play) 81.8%, transparent);
  -webkit-backdrop-filter: blur(var(--desfoque-veu));
  backdrop-filter: blur(var(--desfoque-veu));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--branco) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--branco) 18%, transparent),
    0 12px 30px color-mix(in srgb, var(--sulco-sombra) 75%, transparent);
  /* Opacidade em 300 ms (ease) e escala em 550 ms (= --duracao-media + --duracao-pressao) na curva da casa (.pv-big). */
  transition: opacity var(--duracao-curta) var(--curva-opacidade), transform calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa);
}
/* No centro do quadro (o quadro precisa de position: relative). Margem = metade de 68 px. */
.fk-botaoredondo--centro {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  margin: calc((var(--space-32) + var(--space-2)) * -1) 0 0 calc((var(--space-32) + var(--space-2)) * -1);
}

/* Oculto: o vídeo está tocando (o play do canto some em escala .7, o grande em .8) ou o palco ainda não abriu. */
.fk-botaoredondo.fk-botaoredondo--oculto { opacity: 0; pointer-events: none; }
.fk-botaoredondo.fk-botaoredondo--play.fk-botaoredondo--oculto { transform: scale(.7); }
.fk-botaoredondo.fk-botaoredondo--play-grande.fk-botaoredondo--oculto { transform: scale(.8); }

/* ── Menos movimento: nada transita, anda nem escala; o oculto só some. O afundar de 1 px na pressão fica: é o
   retorno do toque, não deslocamento. ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :is(button, a).fk-botaoredondo:not(.fk-tecla, .fk-botaoredondo--play-grande),
  .fk-botaoredondo.fk-botaoredondo--palco,
  .fk-botaoredondo.fk-botaoredondo--palco:not(.fk-botaoredondo--oculto):is(:hover, :active),
  .fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--oculto,
  .fk-botaoredondo.fk-botaoredondo--play,
  .fk-botaoredondo.fk-botaoredondo--play-grande,
  .fk-botaoredondo--anterior > svg,
  .fk-botaoredondo--proxima > svg { transition: none; }
  .fk-botaoredondo--anterior:not(:disabled, [aria-disabled="true"]):hover > svg,
  .fk-botaoredondo--proxima:not(:disabled, [aria-disabled="true"]):hover > svg,
  .fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--oculto,
  .fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--anterior.fk-botaoredondo--oculto,
  .fk-botaoredondo.fk-botaoredondo--palco.fk-botaoredondo--proxima.fk-botaoredondo--oculto,
  .fk-botaoredondo.fk-botaoredondo--play.fk-botaoredondo--oculto,
  .fk-botaoredondo.fk-botaoredondo--play-grande.fk-botaoredondo--oculto { transform: none; }
}

/* Source: Busca.css */
/* Fenaky Design System · Busca — poço com lupa, entrada de busca e tecla redonda Limpar.
   Fontes: Assets.dc.html e Notificacoes.dc.html (barra de ferramentas: .well.search de 40 px, .key.round.clr de 28 px,
   "Buscar por nome ou tipo") e Redes.dc.html (cabeçalho do painel de canais: .well.search compacta de 34 px, "Buscar
   canal", e a linha .nomatch "Nenhum canal encontrado."). O poço é a primitiva .fk-poco e a tecla Limpar é .fk-tecla
   com .fk-tecla--redonda; aqui ficam só as medidas da busca. */

/* ── Busca: o poço inteiro é clicável e recebe o anel de foco ─────────────────────────────────────────────── */
/* Use num <label> com .fk-poco. Altura 40 px (Assets .search): sem token de 40, derivada da tecla padrão + 10
   (--tamanho-tecla + --space-10), a mesma conta da .fk-tecla--xl que fica ao lado dela na barra. A largura é do
   consumidor: 380 px na barra de Assets, a coluna inteira no painel de Redes. */
.fk-busca {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  min-width: 0;
  height: calc(var(--tamanho-tecla) + var(--space-10));
  margin: 0;
  padding: 0 var(--space-5) 0 var(--space-14);
  color: var(--texto-dica);
  cursor: text;
}
/* O anel fica no poço, não no texto (Assets .search:focus-within): :focus-within funciona em todo navegador, então a
   busca focada nunca fica sem indicador. Quando a tecla Limpar está focada pelo teclado ela mostra o próprio anel e o
   poço apaga o dele, para não dobrar (melhoria progressiva: sem :has(), os dois anéis aparecem juntos). */
.fk-busca:focus-within {
  outline: var(--tamanho-foco) solid var(--anel-foco);
  outline-offset: var(--tamanho-foco-afastamento);
}
.fk-busca:has(.fk-busca__limpar:focus-visible) { outline: 0; }

/* Lupa: 15 px na barra, 14 px na compacta (o consumidor dá o tamanho no SVG); herda a cor de dica do poço. */
.fk-busca__icone { flex: none; display: block; }

/* ── Entrada: input type="search" sem moldura, ocupando a altura toda ─────────────────────────────────────── */
/* As pranchas não zeram a folga do input: o texto começa 2 px depois do vão, pela folga lateral padrão do Chrome.
   Ela fica explícita (--space-2) para o texto cair no mesmo pixel em qualquer navegador. */
.fk-busca__entrada {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font: 500 13px/1 var(--font-texto);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}
.fk-busca__entrada:focus-visible { outline: 0; }
.fk-busca__entrada::placeholder { color: var(--texto-contagem); opacity: 1; }
/* O "x" nativo do navegador sai: quem limpa é a tecla redonda do sistema. */
.fk-busca__entrada::-webkit-search-cancel-button,
.fk-busca__entrada::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ── Limpar: tecla redonda de 28 px dentro do poço, só quando há texto ────────────────────────────────────── */
/* Use com .fk-tecla .fk-tecla--redonda (o relevo, o hover e o afundar vêm de lá). 28 px = --tamanho-botao-redondo,
   6 px de folga em cima e embaixo e 5 px à direita no poço de 40 (Assets .clr). A Tecla não tem redonda de 28, por
   isso a medida fica aqui; três níveis de classe vencem a .fk-tecla--redonda (32 px) em qualquer ordem do bundle, e o
   :not() deixa a .fk-tecla--xs (24 px) da compacta valer sozinha. */
.fk-busca .fk-busca__limpar:not(.fk-tecla--xs) {
  width: var(--tamanho-botao-redondo);
  height: var(--tamanho-botao-redondo);
}
/* Some sozinha enquanto o campo está vazio (o placeholder aparece); `hidden` também vale. A .fk-tecla é
   inline-flex, então o [hidden] do navegador perderia sem esta regra. */
.fk-busca__entrada:placeholder-shown ~ .fk-busca__limpar,
.fk-busca__limpar[hidden] { display: none; }

/* ── Compacta: no cabeçalho de painéis e cascas laterais (Redes .search) ──────────────────────────────────── */
/* 34 px: sem token de 34 como altura de campo, derivada da tecla padrão + 4 (--tamanho-tecla + --space-4).
   Raio 10, folga 12, vão 9, texto 12,5 px em texto-campo e placeholder em texto-dica, como na prancha. Duas classes
   para o raio vencer o da .fk-poco em qualquer ordem. */
.fk-busca.fk-busca--compacta {
  gap: var(--space-9);
  height: calc(var(--tamanho-tecla) + var(--space-4));
  padding: 0 var(--space-12);
  border-radius: var(--radius-10);
}
.fk-busca--compacta .fk-busca__entrada { color: var(--texto-campo); font-size: 12.5px; }
.fk-busca--compacta .fk-busca__entrada::placeholder { color: var(--texto-dica); }
/* Na compacta a Limpar é a .fk-tecla--redonda.fk-tecla--xs (24 px) e encosta a 5 px da borda, como na barra: a margem
   negativa desconta a folga de 12 (5 - 12 = -7 px), sem depender de :has(). */
.fk-busca--compacta .fk-busca__limpar { margin-right: calc(var(--space-5) - var(--space-12)); }

/* ── Indisponível: o poço inteiro esmaece como a tecla desligada ──────────────────────────────────────────── */
.fk-busca:has(.fk-busca__entrada:disabled) { opacity: var(--opacidade-desligado); cursor: not-allowed; }
.fk-busca__entrada:disabled { cursor: not-allowed; }
/* Sem :has(), esmaece ao menos a entrada (o texto e o placeholder). */
@supports not selector(:has(*)) {
  .fk-busca__entrada:disabled { opacity: var(--opacidade-desligado); }
}

/* ── Sem resultado: a linha curta abaixo da busca numa lista (Redes .nomatch) ─────────────────────────────── */
/* Para a galeria inteira vazia use o EstadoVazio; esta linha é para listas dentro de painéis. Entra subindo 10 px
   com desfoque de 4 px em --duracao-media e --curva-casa (Redes @keyframes pop). */
.fk-busca__vazio {
  margin: 0;
  padding: var(--space-14) var(--space-4) var(--space-10);
  text-align: center;
  color: var(--texto-apoio);
  font: 500 12px/1.4 var(--font-texto);
  text-wrap: pretty;
  animation: fk-busca-vazio var(--duracao-media) var(--curva-casa) both;
}
@keyframes fk-busca-vazio {
  from { opacity: 0; transform: translateY(var(--space-10)) scale(.98); filter: blur(var(--desfoque-texto)); }
  to { opacity: 1; transform: none; filter: none; }
}

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

/* Source: CabecalhoInstitucional.css */
/* Fenaky Design System · CabecalhoInstitucional — o cabeçalho das páginas avulsas sem rail (Termos de uso e Privacidade,
   Agentes de IA; no produto terms.html, privacy.html e agentes.html). À esquerda, o F em quadro e o nome Fenaky; à direita,
   o seletor deslizante dos três documentos e a tecla "Abrir o estúdio". Embaixo, o sulco na largura da coluna. O link
   "Pular para o conteúdo" fica escondido acima e desce no foco.
   Fontes: Termos.dc.html e Agentes.dc.html (.top, .top-r, .brand, .docs, .top .key, .top .studio, .groove.hline, .skip,
   .rise), com a mesma geometria nas duas (SPEC: "mesma coluna, largura, altura e itens"). Estreito: derivado de
   public/legal.css (flex-wrap do .legal-header, vão de 12 px entre linhas do .legal-nav), porque o canvas não tem
   prancheta celular destas páginas.
   O trilho é a primitiva .fk-seg (--deslizante), a tecla é .fk-tecla e a linha é .fk-sulco (00-base). A coluna que o
   cabeçalho divide com o documento e o rodapé é --tamanho-coluna-institucional (1200 px); quem a aplica é o pai. */

/* ── Raiz: ocupa 100 % do pai, que deve ter a coluna institucional (no canvas, x 120 a 1320 em 1440) ─────────────── */
.fk-cabecalhoinstitucional {
  position: relative;
  z-index: 2; /* .top z 2: acima da área de leitura que começa logo abaixo */
  width: 100%;
  container-type: inline-size;
  container-name: fk-cabecalhoinstitucional;
  font-family: var(--font-texto);
}

/* ── Linha de 64 px: marca à esquerda, ações à direita, 24 px no mínimo entre elas ───────────────────────────────── */
.fk-cabecalhoinstitucional__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  height: var(--tamanho-topo);
}

/* ── Marca: F em quadro de 32 px (raio 10) + "Fenaky" no estilo tipográfico `marca` ──────────────────────────────── */
/* Estilo `marca` de tokens.json (Space Grotesk 600 19 px, entrelinha 1, −0,035em; .brand do canvas), repetido aqui
   porque o estilo é uma classe e o componente não a herda. Altura 40 e raio 11 dão ao anel de foco a forma de uma
   tecla; 4 px à direita afastam o anel do "y". */
.fk-cabecalhoinstitucional__marca {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-10);
  height: var(--space-40);
  padding-right: var(--space-4);
  border-radius: var(--radius-11);
  color: var(--texto-titulo);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.fk-cabecalhoinstitucional__marca:hover { color: var(--branco); }
.fk-cabecalhoinstitucional__marca img {
  display: block;
  flex: none;
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-marca-quadro);
}

/* ── Ações: seletor dos documentos + tecla do estúdio, 12 px entre eles ──────────────────────────────────────────── */
.fk-cabecalhoinstitucional__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

/* Seletor dos documentos (use com .fk-seg .fk-seg--deslizante, --n e --i no próprio nav). No canvas são 3 colunas
   iguais em 389 px (.docs): 389 = 3 opções de 125,67 px + 4 trilhos de 3 px. A largura sai dessa opção e de --n, então
   um 4.º documento dá 4 × 125,67 + 5 × 3 = 517,67 px sem mexer no CSS. Para um rótulo que não caiba em 125,67 px (ícone
   14 + vão 7 + texto + 2 × 8 de lado), troque --fk-cabecalhoinstitucional-docs-opcao pela largura natural da opção mais
   longa; para uma largura fechada, defina --fk-cabecalhoinstitucional-docs-largura. Opções de 30 px com 8 px de lado
   (.docs .seg-b). */
.fk-cabecalhoinstitucional__docs {
  --fk-cabecalhoinstitucional-docs-opcao: calc((389px - 4 * var(--space-3)) / 3);
  flex: none;
  width: var(--fk-cabecalhoinstitucional-docs-largura,
    calc(var(--n, 3) * var(--fk-cabecalhoinstitucional-docs-opcao) + (var(--n, 3) + 1) * var(--space-3)));
}
.fk-cabecalhoinstitucional__docs .fk-seg__opcao { padding: 0 var(--space-8); }
.fk-cabecalhoinstitucional__docs .fk-seg__opcao svg { flex: none; }

/* Tecla "Abrir o estúdio" (use com .fk-tecla). .top .key: 36 px, raio 10, 14 px de lado, 7 px até a seta, e 12 px em vez
   dos 11,5 da .fk-tecla: é o estilo tipográfico `link-topo` (Manrope 600 12/1), o mesmo das ações do Topo.
   36 = --tamanho-tecla + --space-6, a mesma derivação de .fk-tecla--lg. */
.fk-cabecalhoinstitucional__estudio {
  flex: none;
  gap: var(--space-7);
  height: calc(var(--tamanho-tecla) + var(--space-6));
  padding: 0 var(--space-14);
  border-radius: var(--radius-10);
  font-size: 12px; /* estilo link-topo */
}
/* A seta sai do cinza e anda 1 px (--space-1) para o alto e a direita no hover (.top .studio:hover svg). */
.fk-cabecalhoinstitucional__estudio svg {
  flex: none;
  color: var(--texto-apoio);
  transition: color var(--duracao-rapida) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-cabecalhoinstitucional__estudio:hover svg {
  color: var(--branco);
  transform: translate(var(--space-1), calc(-1 * var(--space-1)));
}

/* ── Sulco na largura da coluna, logo abaixo dos 64 px (.groove.hline top 64) ────────────────────────────────────── */
/* Use um elemento .fk-sulco com esta classe; ele não muda o sulco, só o encosta na linha. */
.fk-cabecalhoinstitucional__sulco { width: 100%; }

/* ── Pular para o conteúdo (use com .fk-tecla): 32 px, escondido acima; desce para 16 px do topo ao receber foco ─── */
.fk-cabecalhoinstitucional__pular {
  position: absolute;
  left: 0;
  top: var(--space-16);
  z-index: var(--camada-rail); /* .skip z 30 no canvas: o mesmo degrau do rail */
  height: var(--tamanho-alvo);
  padding: 0 var(--space-14);
  transform: translateY(-200%);
  transition: transform var(--duracao-curta) var(--curva-casa);
}
.fk-cabecalhoinstitucional__pular:focus { transform: none; }

/* ── Entrada (opcional): marca e ações sobem de um desfoque, 40 ms uma depois da outra (.rise de Termos) ─────────── */
/* @keyframes itIn do canvas: 950 ms na curva da casa, depois de 80 ms (2 × --duracao-escalonamento); começa 40 px
   abaixo, na escala .96 (a mesma de --duracao-entrada e do diálogo; não há token de escala) e com 16 px de desfoque. */
.fk-cabecalhoinstitucional--entrada .fk-cabecalhoinstitucional__marca,
.fk-cabecalhoinstitucional--entrada .fk-cabecalhoinstitucional__acoes {
  animation: fk-cabecalhoinstitucional-entra var(--duracao-entrada) var(--curva-casa) calc(var(--fk-cabecalhoinstitucional-d, 0ms) + 2 * var(--duracao-escalonamento)) both;
}
.fk-cabecalhoinstitucional--entrada .fk-cabecalhoinstitucional__acoes { --fk-cabecalhoinstitucional-d: var(--duracao-escalonamento); }
@keyframes fk-cabecalhoinstitucional-entra {
  0% { opacity: 0; transform: translateY(var(--space-40)) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Estreito (coluna com menos de 680 px, onde marca + 389 + 12 + tecla + 24 não cabem) ─────────────────────────── */
/* A linha quebra, como a do .legal-header. A marca e a tecla do estúdio ficam na primeira linha; o seletor desce para a
   segunda e ocupa a coluna inteira, 12 px abaixo (o vão entre linhas do .legal-nav). Em cima, 12 px = (64 − 40) / 2,
   para a marca ficar na mesma altura da linha larga; embaixo, 16 px (o vão entre linhas do .legal-header) antes do
   sulco. Abaixo de 400 px os ícones das opções saem para os três rótulos caberem em colunas iguais. */
@container fk-cabecalhoinstitucional (max-width: 679px) {
  .fk-cabecalhoinstitucional__linha {
    flex-wrap: wrap;
    row-gap: var(--space-12);
    height: auto;
    min-height: var(--tamanho-topo);
    padding: var(--space-12) 0 var(--space-16);
  }
  .fk-cabecalhoinstitucional__acoes { display: contents; }
  .fk-cabecalhoinstitucional__marca { order: 0; }
  .fk-cabecalhoinstitucional__estudio { order: 1; }
  .fk-cabecalhoinstitucional__docs { order: 2; flex: 1 0 100%; width: 100%; }
}
@container fk-cabecalhoinstitucional (max-width: 399px) {
  .fk-cabecalhoinstitucional__docs .fk-seg__opcao svg { display: none; }
}

/* ── Menos movimento: sem entrada; a seta e o pular mudam sem transição (o indicador já salta em 00-base) ────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-cabecalhoinstitucional--entrada .fk-cabecalhoinstitucional__marca,
  .fk-cabecalhoinstitucional--entrada .fk-cabecalhoinstitucional__acoes { animation: none; }
  .fk-cabecalhoinstitucional__estudio svg,
  .fk-cabecalhoinstitucional__pular { transition: none; }
}

/* Source: Campo.css */
/* Fenaky Design System · Campo — rótulo, poço com entrada de texto e linha de apoio (dica ou erro + contagem).
   Fontes: Suporte.dc.html (diálogo Novo atendimento: .fld, .inp, .ta, .fmeta, .hint.err, .count), PlanoResumo.dc.html
   (Pix: .fld, .inpw, .inp.num), Redes.dc.html (.lbl + .fin/.fld compactos), Conta.dc.html (.ref-row, link de
   indicação só leitura com a tecla Copiar) e Main.dc.html (o anel de foco fica no poço, não no texto). O poço é a
   primitiva .fk-poco com .fk-poco--campo (o anel de foco vem de Poco.css, não é redefinido aqui); o rótulo em caixa-alta,
   quando usado, é a primitiva .fk-rotulo. */

/* ── Pilha e par: o arranjo dos campos num formulário ─────────────────────────────────────────────────────── */
/* Pilha: campos em coluna, 14 px entre eles (Suporte .fields). */
.fk-campo__pilha {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  min-width: 0;
}
/* Par lado a lado, 10 px entre eles (PlanoResumo .two: CPF e celular). O canvas não desenha o par em tela estreita;
   derivado: o CPF formatado em Space Grotesk 12,5 px ocupa ~100 px + 24 px de respiro, então abaixo de 140 px por
   coluna o par empilha sozinho, sem media query, mantendo os 10 px. */
.fk-campo__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--space-10);
  min-width: 0;
}

/* ── Grupo: rótulo em cima, poço, linha de apoio ──────────────────────────────────────────────────────────── */
.fk-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  margin: 0;
}
/* Rótulo em frase (diálogos e formulários): Manrope 600 12 px em texto-link (Suporte .fld). */
.fk-campo__rotulo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  color: var(--texto-link);
  font: 600 12px/1 var(--font-texto);
}
/* Parte direita do rótulo (limite, "opcional"): mesma leitura do .fk-rotulo__dir. */
.fk-campo__rotulo-dir {
  margin-left: auto;
  color: var(--texto-controle);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ── Poço: a moldura rebaixada que recebe o anel de foco ──────────────────────────────────────────────────── */
/* Use junto com .fk-poco e .fk-poco--campo. Altura 44 px (Suporte .inp); o texto ocupa a altura toda para o clique valer no poço inteiro. */
.fk-campo__poco {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  cursor: text;
}
/* Foco: não há regra aqui. O anel de 2 px em --foco, afastado 2 px, é o de .fk-poco--campo (Poco.css), o mesmo de
   Prompt e Busca (Main .well:has(.ta:focus-visible), Assets .rwell:focus-within). Suporte .fw:focus-within desenhava
   o anel colado ao poço em box-shadow; o sistema unifica no anel da primitiva. */
.fk-campo__poco--area { display: block; height: auto; }

/* ── Entrada: o input ou textarea sem moldura própria ─────────────────────────────────────────────────────── */
.fk-campo__entrada {
  display: block;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 var(--space-16);
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: transparent;
  color: var(--texto-campo);
  font: 500 13px/1 var(--font-texto);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}
.fk-campo__entrada:focus-visible { outline: 0; }
.fk-campo__entrada::placeholder { color: var(--texto-dica); opacity: 1; }
.fk-campo__entrada::selection { background: var(--violeta); color: var(--tinta-violeta); }
/* Área de texto (Suporte .fld .ta): 136 px, sem alça, entrelinha 1,55. */
textarea.fk-campo__entrada,
.fk-campo__entrada--area {
  height: 136px;
  padding: var(--space-14) var(--space-16) var(--space-12);
  line-height: 1.55;
  resize: none;
  text-overflow: clip;
}
/* Números, documentos e telefones (PlanoResumo .inp.num): Space Grotesk tabular. */
.fk-campo__entrada--numero {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ── Linha de apoio: dica que vira erro no lugar, contagem à direita (Suporte .fmeta) ─────────────────────── */
.fk-campo__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  /* Suporte: .fields gap 14 com margin-top -2 = 12 px abaixo do poço; aqui 8 do grupo + 4. */
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-2);
}
.fk-campo__dica {
  flex: 1;
  min-width: 0;
  color: var(--texto-controle);
  font: 500 11.5px/1.45 var(--font-texto);
  text-wrap: pretty;
  transition: color var(--duracao-cor) var(--curva-opacidade);
}
.fk-campo__contagem {
  color: var(--texto-controle);
  font: 500 11px/1.5 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Erro: só a dica muda, para a cor de erro; o poço não ganha borda (Suporte .hint.err). */
.fk-campo--erro .fk-campo__dica,
.fk-campo:has(.fk-campo__entrada[aria-invalid="true"]) .fk-campo__dica { color: var(--erro); }

/* ── Compacto: dentro de painéis e módulos, com .fk-rotulo em caixa-alta em cima (Redes .lbl + .fin/.fld) ── */
/* 7 px entre rótulo e poço nas duas fontes: Pix .fld gap 7; Redes .fin-g gap 8 com .lbl+.well margin-top -1. */
.fk-campo--compacto { gap: var(--space-7); }
.fk-campo--compacto .fk-campo__poco { height: 40px; }
.fk-campo--compacto .fk-campo__poco--area { height: auto; }
.fk-campo--compacto .fk-campo__entrada { padding: 0 var(--space-12); font-size: 12.5px; }
.fk-campo--compacto textarea.fk-campo__entrada,
.fk-campo--compacto .fk-campo__entrada--area {
  height: auto;
  min-height: 58px;
  padding: var(--space-10) var(--space-12);
  line-height: 1.5;
}

/* ── Com ação: link só leitura com a tecla Copiar dentro do poço (Conta .ref-row) ─────────────────────────── */
.fk-campo__poco--acao {
  gap: var(--space-8);
  height: 48px;
  padding: 0 var(--space-7) 0 var(--space-14);
  cursor: default;
}
.fk-campo__poco--acao .fk-campo__entrada {
  padding: 0;
  color: var(--texto-link);
  font: 500 12.5px/1 var(--font-display);
}
/* A tecla quadrada de 34 px (o .fk-tecla dá o relevo; aqui só a medida). */
.fk-campo__acao {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-10);
}
/* Ícone que troca por um visto ao copiar (Conta .stack/.alt): o atual sobe e some; o novo chega de baixo.
   Tempos exatos de Conta: volta .4s/.6s (--duracao-contador, --duracao-deslize); saída .3s/.5s (--duracao-curta,
   --duracao-central-fecha); entrada .5s/.8s com atraso .25s (--duracao-central-fecha, 2 × --duracao-contador,
   --duracao-cor). O desfoque de 6 px de Conta .stack não tem token (os vizinhos são 4 e 8): 2 × --desfoque-dica. */
.fk-campo__icones { display: grid; }
.fk-campo__icones > * {
  grid-area: 1 / 1;
  transition:
    opacity var(--duracao-contador) var(--curva-opacidade),
    transform var(--duracao-deslize) var(--curva-casa),
    filter var(--duracao-contador) var(--curva-opacidade),
    visibility 0s;
}
.fk-campo__icones > :last-child { color: var(--sucesso); }
.fk-campo__icones > :last-child,
.fk-campo__icones--trocado > :first-child {
  opacity: 0;
  visibility: hidden;
  filter: blur(calc(var(--desfoque-dica) * 2));
  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-campo__icones > :last-child { transform: translateY(var(--space-8)); }
.fk-campo__icones--trocado > :first-child { transform: translateY(calc(var(--space-8) * -1)); }
.fk-campo__icones--trocado > :last-child {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-cor),
    transform calc(var(--duracao-contador) * 2) var(--curva-casa) var(--duracao-cor),
    filter var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-cor),
    visibility 0s;
}

/* ── Indisponível: o grupo inteiro esmaece como a tecla desligada ─────────────────────────────────────────── */
.fk-campo--desligado,
.fk-campo:has(.fk-campo__entrada:disabled) { opacity: var(--opacidade-desligado); }
.fk-campo--desligado .fk-campo__poco,
.fk-campo:has(.fk-campo__entrada:disabled) .fk-campo__poco,
.fk-campo__entrada:disabled { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .fk-campo__dica,
  .fk-campo__icones > *,
  .fk-campo__icones > :last-child,
  .fk-campo__icones--trocado > :first-child,
  .fk-campo__icones--trocado > :last-child { transition: none; }
  .fk-campo__icones > *,
  .fk-campo__icones--trocado > * { filter: none; }
  .fk-campo__icones > :last-child,
  .fk-campo__icones--trocado > :first-child { transform: none; }
}

/* Source: CardCanto.css */
/* Fenaky Design System · CardCanto — o card persistente do canto: pede uma ação sem bloquear (créditos zerados,
   pendência da assinatura). Ícone em tecla, título, texto, CTA lima + "Agora não" e o X de fechar. Nunca modal.
   Fonte: NotificacoesCatalogo.dc.html, seção 06 (.cc, .cc-b, .cc-a, .t-ic, .t-cl, @keyframes ccA/ccO e a regra de
   menos movimento) e NOTIF.md item 5; textos, quebra das ações e posição no celular de credit-notice.js e
   credit-notice.css (origin/codex/home-clean-state). O material é a casca compacta de 00-base.css
   (.fk-casca.fk-casca--compacta): aqui só o raio 18 e a sombra própria do card, a grade e as peças.
   Marcação: <section class="fk-casca fk-casca--compacta fk-cardcanto" aria-labelledby="…">, dentro de um host
   role="status" que já existe na página (ver README). */

/* ── Bloco: grade ícone 32 · corpo · fechar 24, vão de 12 ──────────────────────────────────────────────────────── */
.fk-cardcanto.fk-casca {
  /* Medidas locais sem token próprio no sistema, cada uma derivada de tokens e citada da fonte:
     36 px = altura das ações em .cc-a (tecla 30 + 6, a mesma derivação de .fk-tecla--lg);
     44 px = alvo de toque das ações no celular (credit-notice.css, min-height 44 = 40 + 4);
     .98 = escala de partida de @keyframes ccA; 6 px = desfoque final de @keyframes ccO (desfoque-vidro 10 × .6). */
  --fk-cardcanto-acao: calc(var(--tamanho-tecla) + var(--space-6));
  --fk-cardcanto-acao-toque: calc(var(--space-40) + var(--space-4));
  --fk-cardcanto-escala-entrada: .98;
  --fk-cardcanto-desfoque-saida: calc(var(--desfoque-vidro) * .6);
  display: grid;
  grid-template-columns: var(--tamanho-alvo) minmax(0, 1fr) var(--tamanho-alvo-minimo);
  column-gap: var(--space-12);
  align-items: start;
  width: var(--tamanho-card-canto);
  max-width: 100%;
  padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16);
  border-radius: var(--radius-18);
  box-shadow: var(--shadow-card-canto);
  color: var(--texto);
  font-family: var(--font-texto);
  -webkit-font-smoothing: antialiased;
}
.fk-cardcanto[hidden] { display: none; }

/* Fixo no canto da tela: 24 px das bordas, com a largura de credit-notice.css (min(360, 100% − 32)).
   Camada: o app usa z-index 90 ("acima do conteúdo e abaixo dos diálogos"), mas na escala do sistema 90 é o véu do
   pop-up e o diálogo fica em 81. Para manter a mesma intenção, o card fica em camada-pilha-recolhida − 1 (59): acima
   do conteúdo, do rail (30) e dos painéis (20), abaixo da pilha de toasts, da central, dos diálogos e do pop-up. */
.fk-cardcanto--fixo.fk-casca {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: calc(var(--camada-pilha-recolhida) - 1);
  width: min(var(--tamanho-card-canto), calc(100% - var(--space-32)));
}
/* Celular (credit-notice.css, @media max-width 760px): o painel aberto e o botão de gerar ficam embaixo, então o card
   vai para baixo do topo (top 70 = topo 62 + 8) e para o lado do rail. O app usa left: rail-offset + 4, e o
   rail-offset do celular é 82 (rail de 62 a 8 px da borda + 12 de vão): 8 + 62 + 12 + 4 = 86 px, 16 px além do rail. */
@media (max-width: 760px) {
  .fk-cardcanto--fixo.fk-casca {
    top: calc(var(--tamanho-topo-celular) + var(--space-8));
    right: var(--space-8);
    bottom: auto;
    left: calc(var(--space-8) + var(--tamanho-rail-celular) + var(--space-12) + var(--space-4));
    width: auto;
  }
}

/* ── Ícone: tecla de 32 px, raio 10; a cor semântica vai no traço, nunca no fundo (.t-ic) ─────────────────────── */
.fk-cardcanto__icone {
  display: grid;
  place-items: center;
  width: var(--tamanho-alvo);
  height: var(--tamanho-alvo);
  border-radius: var(--radius-10);
  color: var(--texto-link);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.fk-cardcanto__icone > svg { display: block; flex: none; }
.fk-cardcanto__icone--aviso { color: var(--aviso); }
.fk-cardcanto__icone--erro { color: var(--erro); }
.fk-cardcanto__icone--sucesso { color: var(--sucesso); }

/* ── Corpo (.cc-b, .cc h4, .cc p) ─────────────────────────────────────────────────────────────────────────────────
   Título = estilo tipográfico titulo-aviso (Space Grotesk 600 15/1.3, −.01em). Texto = estilo corpo-compacto
   (Manrope 500 12,5) com a entrelinha 1.5 de .cc p, não 1.55. Os estilos do sistema são classes, sem variável de
   tamanho, por isso os valores são repetidos aqui e não devem divergir deles. */
.fk-cardcanto__corpo { min-width: 0; padding-top: var(--space-6); }
.fk-cardcanto__titulo {
  margin: 0;
  color: var(--texto-titulo);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.01em;
}
.fk-cardcanto__texto {
  margin: var(--space-4) 0 0;
  color: var(--texto-apoio);
  font-family: var(--font-texto);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}

/* ── Ações: CTA lima e tecla de 36 px, raio 11 (.cc-a). Quebram de linha quando falta espaço, como em
   credit-notice.css: "Ver Passe Ilimitado" + "Agora não" somam cerca de 240 px e cabem nos 252 do corpo a 360 px,
   mas não no celular (telefone de 375: card de 375 − 86 − 8 = 281 px, corpo de 173). ──────────────────────────── */
.fk-cardcanto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-14);
}
.fk-cardcanto__acoes > .fk-cta {
  width: auto;
  height: var(--fk-cardcanto-acao);
  padding: 0 var(--space-16);
  border-radius: var(--radius-11);
  font-size: 12.5px;
}
.fk-cardcanto__acoes > .fk-tecla {
  height: var(--fk-cardcanto-acao);
  padding: 0 var(--space-14);
  border-radius: var(--radius-11);
  font-size: 12px;
}
/* Celular: as duas ações dividem a linha e sobem a 44 px de toque, como em credit-notice.css. */
@media (max-width: 760px) {
  .fk-cardcanto__acoes > :is(.fk-cta, .fk-tecla) {
    flex: 1 1 auto;
    height: var(--fk-cardcanto-acao-toque);
  }
}

/* ── Fechar: X de 24 px sem relevo; clareia sob o ponteiro (.t-cl) ────────────────────────────────────────────── */
.fk-cardcanto__fechar {
  display: grid;
  place-items: center;
  width: var(--tamanho-alvo-minimo);
  height: var(--tamanho-alvo-minimo);
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--texto-nota);
  cursor: pointer;
  transition: background var(--duracao-hover), color var(--duracao-hover);
}
.fk-cardcanto__fechar:hover { background: var(--fundo-hover-forte); color: var(--branco); }
.fk-cardcanto__fechar > svg { display: block; flex: none; }

/* ── Movimento (@keyframes ccA e ccO): entra subindo 18 px de um desfoque de 10 px em 600 ms com a curva da casa;
   sai descendo 12 px e desfocando 6 px em 260 ms, acelerando. O canvas não tem duração de 600 ms própria do card:
   é a mesma de --duracao-deslize. ─────────────────────────────────────────────────────────────────────────────── */
.fk-cardcanto--entra { animation: fk-cardcanto-entra var(--duracao-deslize) var(--curva-casa) both; }
.fk-cardcanto--sai { pointer-events: none; animation: fk-cardcanto-sai var(--duracao-saida) var(--curva-saida) both; }
@keyframes fk-cardcanto-entra {
  from {
    opacity: 0;
    transform: translateY(var(--space-18)) scale(var(--fk-cardcanto-escala-entrada));
    filter: blur(var(--desfoque-vidro));
  }
}
@keyframes fk-cardcanto-sai {
  to { opacity: 0; transform: translateY(var(--space-12)); filter: blur(var(--fk-cardcanto-desfoque-saida)); }
}

/* Menos movimento: como no catálogo, o card está entre os que mudam "na hora" (.cc na lista de
   animation-duration .01ms e animation-delay 0s); só os toasts viram fade. A animação de .01ms ainda dispara
   animationend, então o consumidor continua escondendo o card no fim da saída. O X mantém a transição de cor
   (.t-cl não está na lista do canvas). */
@media (prefers-reduced-motion: reduce) {
  .fk-cardcanto--entra,
  .fk-cardcanto--sai { animation-duration: .01ms; animation-delay: 0s; }
}

/* Source: CardPlano.css */
/* Fenaky Design System · CardPlano — o card de um plano mensal na vitrine de Planos (desktop).
   Monta-se sobre as primitivas: a casca (.fk-casca, .fk-casca--pro), a vaga e a elevação de Casca.css
   (.fk-casca-vaga, .fk-casca--elevavel, .fk-casca__recorte), a tecla suave de 40 px de Tecla.css
   (.fk-tecla--xl.fk-tecla--suave), o CTA de 40 px de Cta.css (.fk-cta.fk-cta--resultado) e o sulco (.fk-sulco, que
   Sulco.css tinge no Pro).
   Este arquivo traz só o que é do card: a vaga de 240 × 514, o selo acima da borda, a face (nome, preço, créditos,
   ação) e as duas listas de saídas (Gerar com Ginga, Troca de Personagem), o tom Pro dos textos e as ondas de saída
   e de volta da vitrine. Fonte: Planos.dc.html (.slot, .pc, .ribbon, .face, .ph, .amt, .pcred, .punit, .pick,
   .otitle, .orows, .ov, .os, .oq, .pro …, riseIn, .slot.out, .slot.back-in). */

/* ── Vaga: a peça que entra e sai da vitrine; a casca mora dentro dela e sobe sob o ponteiro ─────────────────────── */
/* 240 × 514 no canvas (cinco vagas a cada 255 px). O consumidor pode mudar a largura e a altura na própria vaga. */
.fk-cardplano {
  position: relative;
  flex: none;
  width: 240px;
  height: 514px;
}
.fk-cardplano > .fk-cardplano__casca { position: absolute; inset: 0; }

/* Valores do canvas que ainda não têm token próprio nas fundações (candidatos a shadow-selo-neutro e a um desfoque
   de saída de card). Ficam aqui, num lugar só, em vez de emprestar tokens de outro componente:
   - sombra do selo neutro, exata de Planos .ribbon.plain: luz de 15 % de branco, aro preto de 60 % (= --sulco-sombra)
     e queda 0 4 10 a 50 % de preto (= --divisor-sombra);
   - desfoque da vaga que sai, exato de Planos .slot.out: 12 px (--desfoque-saida é o de 8 px dos controles). */
.fk-cardplano {
  --fk-cardplano-sombra-selo:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 15%, transparent),
    0 0 0 1px var(--sulco-sombra),
    0 4px 10px var(--divisor-sombra);
  --fk-cardplano-desfoque-sai: 12px;
}

/* ── Selo acima da borda: "Recomendado" (violeta, só no Pro) ou neutro ("Menor preço por crédito") ───────────────── */
/* 24 px, metade para fora da casca (top −12), centrado; fica fora do recorte para não ser cortado. */
.fk-cardplano__selo {
  position: absolute;
  z-index: calc(var(--camada-casca-filete) + 1);
  top: calc(-1 * var(--space-12));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: var(--space-24);
  padding: 0 var(--space-12);
  border-radius: var(--radius-7);
  color: var(--texto-forte);
  font: 700 11px/1 var(--font-texto);
  letter-spacing: .01em;
  white-space: nowrap;
  /* Neutro: a tecla acesa cinza (#3a3a40 → #2a2a2e), com a sombra exata do canvas declarada na vaga. */
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base));
  box-shadow: var(--fk-cardplano-sombra-selo);
}
.fk-cardplano__selo--recomendado {
  color: var(--branco);
  background: linear-gradient(180deg, var(--selo-recomendado-topo), var(--selo-recomendado) 60%, var(--selo-recomendado-base));
  box-shadow: var(--shadow-selo-recomendado);
}

/* ── Face: o que se lê no card ──────────────────────────────────────────────────────────────────────────────────── */
.fk-cardplano__face {
  position: absolute;
  inset: 0 0 auto 0;
  padding: var(--space-26) var(--space-20) 0;
}

/* Nome à esquerda, preço e ciclo à direita, alinhados pela linha de base. */
.fk-cardplano__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-10);
}
/* Espelha o estilo tipográfico titulo-plano de tokens.json (Space Grotesk 600, 24/1, −.03em): mude os dois juntos. */
.fk-cardplano__nome {
  margin: 0;
  color: var(--texto-titulo);
  font: 600 24px/1 var(--font-display);
  letter-spacing: -.03em;
}
.fk-cardplano__preco {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-6);
}
/* Espelha o estilo numero-preco de tokens.json (Space Grotesk 500, 30/1, −.035em): mude os dois juntos. */
.fk-cardplano__valor {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--texto-aceso);
  font: 500 30px/1 var(--font-display);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fk-cardplano__moeda {
  color: var(--texto-unidade);
  font: 600 12px/1 var(--font-texto);
  letter-spacing: 0;
}
.fk-cardplano__ciclo {
  color: var(--texto-controle);
  font: 500 11.5px/1 var(--font-texto);
}

/* Créditos do ciclo e preço de um crédito. #ececef do canvas vira --texto (#ededef), o token mais próximo. */
.fk-cardplano__creditos {
  margin: var(--space-14) 0 0;
  color: var(--texto);
  font: 600 14px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-cardplano__unidade {
  margin: var(--space-5) 0 0;
  color: var(--texto-controle);
  font: 500 12px/1.3 var(--font-texto);
  font-variant-numeric: tabular-nums;
}

/* Ação "Ver plano" (Planos .pick): 40 px, raio 11, 12,5 px, a linha inteira. Nos planos comuns é a tecla suave
   .fk-tecla--xl, que já tem exatamente essas medidas. No Pro é o CTA lima de 40 px (.fk-cta--resultado: 40 px e
   12,5 px); o card só acerta o raio para 11, como a tecla ao lado. */
.fk-cardplano__acao { display: flex; margin-top: var(--space-20); }
.fk-cardplano__acao > .fk-cardplano__escolher { width: 100%; }
.fk-cardplano__acao > .fk-cardplano__escolher.fk-cta { border-radius: var(--radius-11); }

/* Sulco entre a ação e as saídas (22 em cima, 18 embaixo) e entre as duas listas (16 e 16). */
.fk-cardplano__face > .fk-sulco { margin: var(--space-22) 0 var(--space-18); }
.fk-cardplano__saidas > .fk-sulco { margin: var(--space-16) 0; }

/* ── Saídas: quantos vídeos o saldo do ciclo paga, por duração ──────────────────────────────────────────────────── */
/* Título em caixa-alta com ícone de 13 px na coluna de 14; a nota "(Seedance 2.5)" desce para a segunda linha.
   O canvas usa #a6a6ac no título; o token mais próximo é --texto-unidade (#a9a9af). */
.fk-cardplano__saida-titulo {
  display: grid;
  grid-template-columns: var(--space-14) 1fr;
  align-items: center;
  column-gap: var(--space-7);
  row-gap: var(--space-4);
  margin: 0 0 var(--space-12);
  color: var(--texto-unidade);
  font: 600 10.5px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fk-cardplano__saida-titulo > svg { color: var(--texto-controle); }
.fk-cardplano__saida-nota {
  grid-column: 2;
  color: var(--texto-dica);
  font: 500 11px/1.2 var(--font-display);
  letter-spacing: .02em;
  text-transform: none;
}

/* Linhas de 16 px a cada 26. A lista alta (Troca de Personagem) reserva 94 px, para os cards alinharem mesmo quando
   o saldo não cobre a duração mais longa e a linha some. */
.fk-cardplano__linhas {
  display: grid;
  grid-auto-rows: var(--space-16);
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fk-cardplano__linhas--alta { min-height: 94px; align-content: start; }
.fk-cardplano__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  height: var(--space-16);
}
/* "25 vídeos 5 s": o número alinha à direita numa coluna de --fk-cardplano-digitos caracteres (o mais largo da lista). */
.fk-cardplano__qtd {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  color: var(--texto-controle);
  font: 500 12px/1 var(--font-texto);
  white-space: nowrap;
}
.fk-cardplano__qtd > b {
  display: inline-block;
  min-width: calc(var(--fk-cardplano-digitos, 0) * 1ch);
  text-align: right;
  color: var(--texto-forte);
  font: 600 15px/1 var(--font-display);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.fk-cardplano__seg {
  color: var(--texto-link);
  font: 600 12px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Qualidade à direita: "1080p Full HD". */
.fk-cardplano__qualidade {
  color: var(--texto-unidade);
  font: 500 11px/1 var(--font-display);
  white-space: nowrap;
}
.fk-cardplano__qualidade > i { font-style: normal; color: var(--texto-dica); }

/* ── Pro: os textos de apoio passam ao lilás para ler sobre o violeta (Planos, .pro …) ───────────────────────────── */
.fk-casca--pro :is(.fk-cardplano__moeda, .fk-cardplano__ciclo, .fk-cardplano__unidade, .fk-cardplano__qtd,
  .fk-cardplano__qualidade, .fk-cardplano__qualidade > i, .fk-cardplano__saida-nota, .fk-cardplano__saida-titulo > svg) {
  color: var(--pro-texto-apoio);
}
.fk-casca--pro :is(.fk-cardplano__saida-titulo, .fk-cardplano__seg) { color: var(--pro-texto); }

/* ── Vitrine: a onda de saída quando um plano abre e a onda de volta ────────────────────────────────────────────── */
/* --fk-cardplano-atraso: o consumidor dá a cada vaga 55 ms por posição de distância do plano aberto (Planos, --d). */
/* --fk-cardplano-espera: quanto a onda de volta aguarda o resumo recolher antes de começar. 340 ms no canvas
   (.slot.back-in: calc(var(--d) + 340ms)) = --duracao-curta (300) + --duracao-escalonamento (40). */
.fk-cardplano { --fk-cardplano-espera: calc(var(--duracao-curta) + var(--duracao-escalonamento)); }
/* Saindo: sobe 26 px, encolhe a .94 e desfoca 12 px; some do ponteiro. Opacidade em 320 ms no canvas → --duracao-curta.
   Tirar a vaga do foco e da leitura é do consumidor (atributo inert na vaga). */
.fk-cardplano--sai {
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-26))) scale(.94);
  filter: blur(var(--fk-cardplano-desfoque-sai));
  pointer-events: none;
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade) var(--fk-cardplano-atraso, 0ms),
    transform var(--duracao-deslize) var(--curva-casa) var(--fk-cardplano-atraso, 0ms),
    filter var(--duracao-contador) var(--curva-opacidade) var(--fk-cardplano-atraso, 0ms);
}
/* Voltando: sobe 40 px de um desfoque de 16 px e da escala .96 (riseIn), em 900 ms (.slot.back-in .9s →
   --duracao-dialogo, o mesmo subir-do-desfoque do diálogo), depois da espera e do atraso da vaga. */
.fk-cardplano--entra {
  animation: fk-cardplano-entra var(--duracao-dialogo) var(--curva-casa)
    calc(var(--fk-cardplano-espera) + var(--fk-cardplano-atraso, 0ms)) both;
}
@keyframes fk-cardplano-entra {
  0% { opacity: 0; transform: translateY(var(--space-40)) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Menos movimento: sem onda; a vaga só some ou aparece, sem deslocamento, escala nem desfoque. ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-cardplano--sai { transition: none; transform: none; filter: none; }
  .fk-cardplano--entra { animation: none; }
}

/* Source: CardRetrato.css */
/* Fenaky Design System · CardRetrato — o retrato 3:4 de um personagem, clicável, em grade ou carrossel.
   Quadro de mídia (fio de 1 px e sombra de contato), foto que aproxima 3% sob o ponteiro, anel claro de 2 px quando o
   personagem está no painel, nome em vidro que aparece sob o ponteiro, selo "No painel", etiqueta @Imagem, legenda
   embaixo (nome e ação) e a variante vitrine do catálogo da Home.
   Fontes: Main.dc.html (.pcard, .pframe, .pname, .badge, .it/itIn, .it.fresh/freshIn/ringOut), Ginga.dc.html (.pcard
   com .pcap, .pframe .tag, .icard .hov, .icard.dim), Home.dc.html (.pcard 225 × 300, .pframe::before/::after, .phint)
   e HomeMobile.dc.html (.pframe 168 × 224, .pcard:active, .pcard.opened). Usa as primitivas .fk-vidro e .fk-ref sem
   redefini-las; o chip do nome e da dica é .fk-chipvidro e a etiqueta é .fk-etiqueta--clara (componentes ChipVidro e
   Etiqueta): aqui só se posiciona e se revela.
   API em propriedades personalizadas, todas com o prefixo do componente:
   --fk-cardretrato-escala, --fk-cardretrato-desloca (recorte da foto), --fk-cardretrato-atraso (escalonamento da
   entrada) e --fk-cardretrato-zoom-duracao (interna, muda na vitrine). */

/* ── Card: o botão inteiro (ou link) ─────────────────────────────────────────────────────────────────────────── */
.fk-cardretrato {
  /* Durações sem token próprio, derivadas dos vizinhos: 500 ms (aproximação da foto em Main e Ginga) e 800 ms
     (aproximação na vitrine da Home). */
  --fk-cardretrato-zoom-duracao: calc(var(--duracao-curta) + var(--duracao-rapida));
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-14);
  background: transparent;
  color: inherit;
  font-family: var(--font-texto);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* ── Quadro: a moldura 3:4 que recorta a foto ─────────────────────────────────────────────────────────────── */
.fk-cardretrato__quadro {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-14);
  overflow: hidden;
  background: var(--midia-fundo);
  box-shadow: var(--shadow-midia);
  transition: box-shadow var(--duracao-curta) var(--curva-opacidade);
}
/* Foto: cobre o quadro. Retratos do atlas do catálogo trazem uma lasca do vizinho à direita e embaixo; o consumidor
   passa o recorte (Ginga this.crops, medido em scripts/catalog-portrait-crops.json): --fk-cardretrato-escala (padrão 1)
   e --fk-cardretrato-desloca (padrão 0 0). São as propriedades scale e translate, que se somam ao zoom do ponteiro
   (transform). */
.fk-cardretrato__foto {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  scale: var(--fk-cardretrato-escala, 1);
  translate: var(--fk-cardretrato-desloca, 0 0);
  transition: transform var(--fk-cardretrato-zoom-duracao) var(--curva-casa), filter var(--duracao-curta) var(--curva-opacidade);
}

/* ── Sobre a foto ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Nome: chip de vidro de 24 px (fk-vidro fk-chipvidro fk-chipvidro--md) a 8 px do canto de baixo; aparece sob o
   ponteiro, no foco e quando o card está escolhido (Main .pname: 5 px, 250 ms ease e 400 ms na curva da casa). */
.fk-cardretrato__nome,
.fk-cardretrato__dica {
  position: absolute;
  z-index: 3;
  left: var(--space-8);
  bottom: var(--space-8);
  max-width: calc(100% - var(--space-16));
  opacity: 0;
  transform: translateY(var(--space-5));
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-contador) var(--curva-casa);
  pointer-events: none;
}
/* Selo "No painel": pílula clara de 24 px no canto de cima à direita, que entra encolhida (Main .badge/badgeIn). */
.fk-cardretrato__selo {
  position: absolute;
  z-index: 3;
  top: var(--space-10);
  right: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--space-24);
  padding: 0 var(--space-9);
  border-radius: var(--radius-pilula);
  color: var(--tinta-pilula);
  background: var(--pilula);
  font: 700 10.5px/1 var(--font-texto); /* estilo .selo */
  white-space: nowrap;
  box-shadow: var(--shadow-pilula);
  animation: fk-cardretrato-selo var(--duracao-media) var(--curva-casa) both;
}
.fk-cardretrato__selo > svg { flex: none; width: var(--space-11); height: var(--space-11); }
@keyframes fk-cardretrato-selo { from { opacity: 0; transform: translateY(calc(-1 * var(--space-4))) scale(.85); } }
/* Etiqueta @ImagemN do roteiro (fk-ref fk-etiqueta--clara fk-etiqueta--lg): canto de cima à esquerda, a 10 px. */
.fk-cardretrato__etiqueta {
  position: absolute;
  z-index: 3;
  top: var(--space-10);
  left: var(--space-10);
}

/* ── Legenda embaixo do quadro (Ginga .pcap): nome à esquerda, ação à direita ──────────────────────────────── */
/* Altura de linha 1,4, não 1: o nome corta o excesso e, em 1, cortava as pernas de g, j e p. */
.fk-cardretrato__legenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-width: 0;
  color: var(--texto-unidade);
  font: 600 11.5px/1.4 var(--font-texto);
}
.fk-cardretrato__legenda-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-link);
}
.fk-cardretrato__legenda-acao {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--texto-controle);
}
.fk-cardretrato__legenda-acao > svg { flex: none; width: var(--space-13); height: var(--space-13); }

/* ── Sob o ponteiro: o fio acende, a foto aproxima 3%, o nome e a dica sobem, a ação acende ────────────────── */
.fk-cardretrato:hover .fk-cardretrato__quadro { box-shadow: var(--shadow-midia-hover); }
.fk-cardretrato:hover .fk-cardretrato__foto { transform: scale(1.03); }
.fk-cardretrato:is(:hover, :focus-visible) :is(.fk-cardretrato__nome, .fk-cardretrato__dica) { opacity: 1; transform: none; }
.fk-cardretrato:hover .fk-cardretrato__legenda-acao { color: var(--texto-forte); }

/* ── Escolhido (aria-pressed="true" ou --escolhido): anel de 2 px com halo, nome fixo, ação acesa ──────────── */
:is(.fk-cardretrato--escolhido, .fk-cardretrato[aria-pressed="true"]) .fk-cardretrato__quadro { box-shadow: var(--shadow-midia-escolhida); }
:is(.fk-cardretrato--escolhido, .fk-cardretrato[aria-pressed="true"]) .fk-cardretrato__nome { opacity: 1; transform: none; }
:is(.fk-cardretrato--escolhido, .fk-cardretrato[aria-pressed="true"]) .fk-cardretrato__legenda-acao { color: var(--texto-forte); }

/* ── Indisponível (aria-disabled="true" ou --indisponivel): a galeria já está cheia (Ginga .icard.dim). A foto
   apaga e perde cor; como a tecla desligada, não reage ao ponteiro. O CSS só muda a aparência: o app ignora o
   clique, o Enter e o Espaço nesse card (ver README). ──────────────────────────────────────────────────────── */
:is(.fk-cardretrato--indisponivel, .fk-cardretrato[aria-disabled="true"]) { cursor: not-allowed; }
:is(.fk-cardretrato--indisponivel, .fk-cardretrato[aria-disabled="true"]) .fk-cardretrato__foto,
:is(.fk-cardretrato--indisponivel, .fk-cardretrato[aria-disabled="true"]):hover .fk-cardretrato__foto {
  transform: none;
  filter: grayscale(.6) brightness(.55);
}
:is(.fk-cardretrato--indisponivel, .fk-cardretrato[aria-disabled="true"]):hover .fk-cardretrato__quadro { box-shadow: var(--shadow-midia); }
:is(.fk-cardretrato--indisponivel, .fk-cardretrato[aria-disabled="true"]) .fk-cardretrato__dica { display: none; }
:is(.fk-cardretrato--indisponivel, .fk-cardretrato[aria-disabled="true"]):hover .fk-cardretrato__legenda-acao { color: var(--texto-controle); }

/* ── Vitrine: o carrossel "Explore Influences" da Home. Raio 12, filete interno com luz no alto, sombra de pé que
   escurece sob o ponteiro, anel claro também no foco, dica "Ver personagem" a 10 px e aperto de 3% no toque.
   Sombras e filete são os tokens shadow-midia-vitrine*, cópia exata do canvas; a sombra de pé é midia-sombra-pe. ─ */
.fk-cardretrato--vitrine {
  --fk-cardretrato-zoom-duracao: calc(var(--duracao-contador) * 2);
  border-radius: var(--radius-12);
}
.fk-cardretrato--vitrine .fk-cardretrato__quadro {
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-midia-vitrine);
  transition: box-shadow var(--duracao-contador) var(--curva-casa), transform var(--duracao-curta) var(--curva-casa);
}
.fk-cardretrato--vitrine .fk-cardretrato__quadro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 55%, var(--midia-sombra-pe));
  opacity: 0;
  transition: opacity var(--duracao-contador) var(--curva-opacidade);
  pointer-events: none;
}
.fk-cardretrato--vitrine .fk-cardretrato__quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: var(--shadow-midia-vitrine-filete);
  pointer-events: none;
}
.fk-cardretrato--vitrine:is(:hover, :focus-visible, .fk-cardretrato--aberto) .fk-cardretrato__quadro { box-shadow: var(--shadow-midia-vitrine-anel); }
.fk-cardretrato--vitrine:hover .fk-cardretrato__quadro::before { opacity: 1; }
.fk-cardretrato--vitrine:active .fk-cardretrato__quadro { transform: scale(.97); }
/* Dica da vitrine (Home .phint): chip de 26 px a 10 px do canto, sobe 6 px em 300 ms ease e 500 ms na curva. */
.fk-cardretrato--vitrine .fk-cardretrato__dica {
  left: var(--space-10);
  bottom: var(--space-10);
  max-width: calc(100% - var(--space-20));
  transform: translateY(var(--space-6));
  transition: opacity var(--duracao-curta) var(--curva-opacidade), transform calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-casa);
}
/* Vitrine em tela de toque (HomeMobile, 168 × 224): sombra de contato de 26 px, anel do aberto com sombra de 34 px,
   e nada de ponteiro: o :hover que fica preso depois do toque não acende anel, sombra de pé, zoom nem dica. */
@media (hover: none) {
  .fk-cardretrato--vitrine .fk-cardretrato__quadro,
  .fk-cardretrato--vitrine:hover:not(:focus-visible, .fk-cardretrato--aberto) .fk-cardretrato__quadro { box-shadow: var(--shadow-midia-vitrine-celular); }
  .fk-cardretrato--vitrine:is(:focus-visible, .fk-cardretrato--aberto) .fk-cardretrato__quadro { box-shadow: var(--shadow-midia-vitrine-anel-celular); }
  .fk-cardretrato--vitrine:hover:not(:focus-visible) .fk-cardretrato__quadro::before { opacity: 0; }
  .fk-cardretrato--vitrine:hover:not(:focus-visible) .fk-cardretrato__foto { transform: none; }
  .fk-cardretrato--vitrine:hover:not(:focus-visible) .fk-cardretrato__dica { opacity: 0; transform: translateY(var(--space-6)); }
}

/* ── Entrada na grade (Main itIn): sobe 40 px de um desfoque de 16 px, depois de 380 ms mais o atraso do card
   (--fk-cardretrato-atraso: o consumidor escalona, ex. 150 ms + 20 ms por card, até 560 ms). ─────────────────── */
.fk-cardretrato--entra {
  animation: fk-cardretrato-entra var(--duracao-entrada) var(--curva-casa) calc(var(--fk-cardretrato-atraso, 0ms) + var(--duracao-atraso-entrada)) both;
}
@keyframes fk-cardretrato-entra {
  0% { opacity: 0; transform: translateY(var(--space-40)) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
/* ── Novo: o retrato que acabou de ser enviado e escolhido (Main .it.fresh): o card chega de 18 px e de um desfoque
   de 10 px em 900 ms, e uma onda clara sai do anel até 18 px em 1,6 s, 350 ms depois (ease-out do canvas, sem token
   de curva). O consumidor tira a classe após ~2,2 s. */
.fk-cardretrato--novo { animation: fk-cardretrato-chega calc(var(--duracao-media) * 2) var(--curva-casa) both; }
.fk-cardretrato--novo .fk-cardretrato__quadro {
  animation: fk-cardretrato-onda var(--duracao-pulso) ease-out calc(var(--duracao-media) - var(--duracao-pressao));
}
@keyframes fk-cardretrato-chega {
  0% { opacity: 0; transform: translateY(var(--space-18)) scale(.86); filter: blur(var(--desfoque-chegada)); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes fk-cardretrato-onda {
  0% { box-shadow: 0 0 0 2px var(--texto-forte), 0 0 0 2px color-mix(in srgb, var(--texto-forte) 55%, transparent); }
  100% { box-shadow: 0 0 0 2px var(--texto-forte), 0 0 0 var(--space-18) color-mix(in srgb, var(--texto-forte) 0%, transparent); }
}

/* ── Menos movimento (como no canvas): nada transiciona nem anima; anel, nome e aproximação trocam na hora, e o
   card aparece no lugar, sem entrada nem onda. ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-cardretrato__quadro, .fk-cardretrato__foto, .fk-cardretrato__nome, .fk-cardretrato__dica,
  .fk-cardretrato--vitrine .fk-cardretrato__quadro, .fk-cardretrato--vitrine .fk-cardretrato__quadro::before,
  .fk-cardretrato--vitrine .fk-cardretrato__dica { transition: none; }
  .fk-cardretrato__selo, .fk-cardretrato--entra, .fk-cardretrato--novo, .fk-cardretrato--novo .fk-cardretrato__quadro { animation: none; }
}

/* Source: CardVideo.css */
/* Fenaky Design System · CardVideo — o card de vídeo 9:16 que se escolhe numa galeria: quadro com pôster, play no canto,
   duração em vidro, selo "No painel" quando está no painel, prévia muda que toca sob o ponteiro e legenda com seta.
   Variante solta (sem legenda) para o carrossel da Home, que sobe 4 px, ganha anel e apaga os vizinhos.
   Fontes: Main.dc.html (.vcard, .vframe, .hv, .fv, .badge, .dur, .vcap, .cap-t, .it.fresh e ringOut) e Home.dc.html
   (.vc, .vmedia e seu ::after, .hvid com vin/vout, .vc.on, .has-hv). O play é o BotaoRedondo --play --canto e a duração
   é a primitiva .fk-vidro--sm; aqui ficam só a posição e os estados que o card impõe a eles. */

/* ── Card: o botão inteiro (quadro + legenda) ──────────────────────────────────────────────────────────────────── */
.fk-cardvideo {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

/* ── Quadro 9:16: fundo de espera, fio de 1 px e sombra de contato (Main .vframe) ─────────────────────────────── */
.fk-cardvideo__quadro {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-14);
  background: var(--midia-fundo);
  box-shadow: var(--shadow-midia);
  transition: box-shadow var(--duracao-curta) var(--curva-opacidade);
}
/* Pôster: <img> do quadro ou, no vídeo que a pessoa enviou, o próprio <video preload="metadata"> parado em #t=0.1.
   Zoom 1.03 sob o ponteiro em 500 ms (2 × --duracao-cor) na curva da casa. */
.fk-cardvideo__poster,
.fk-cardvideo__previa {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--duracao-cor) * 2) var(--curva-casa);
}
/* Prévia muda (<video autoplay muted loop playsinline>), posta pelo consumidor só enquanto o card está sob o ponteiro.
   Entra num fade de --duracao-media. */
.fk-cardvideo__previa {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: fk-cardvideo-previa var(--duracao-media) var(--curva-opacidade) both;
}
@keyframes fk-cardvideo-previa { from { opacity: 0; } }

/* Play no canto de baixo à esquerda: .fk-botaoredondo--play --canto (28 px de vidro, a 10 px). */
.fk-cardvideo__play { z-index: 2; }

/* Duração (Main .glass.dur): .fk-vidro --sm de 22 px, a 10 px da direita e 13 px do pé, centrada na altura do play. */
.fk-cardvideo__duracao {
  position: absolute;
  z-index: 2;
  right: var(--space-10);
  bottom: var(--space-13);
}

/* Selo "No painel" (Main .badge): pílula clara de 24 px no canto de cima à direita, com visto de 11 px.
   Tipografia do estilo .selo (Manrope 700 10,5 px, entrelinha 1). */
.fk-cardvideo__selo {
  position: absolute;
  z-index: 2;
  top: var(--space-10);
  right: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--space-24);
  padding: 0 var(--space-9);
  border-radius: var(--radius-pilula);
  color: var(--tinta-pilula);
  background: var(--pilula);
  font-family: var(--font-texto);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-pilula);
  animation: fk-cardvideo-selo var(--duracao-media) var(--curva-casa) both;
}
.fk-cardvideo__selo > svg { flex: none; }
@keyframes fk-cardvideo-selo { from { opacity: 0; transform: translateY(calc(var(--space-4) * -1)) scale(.85); } }

/* ── Legenda: nome do vídeo (ou "Usar este vídeo") e seta; corta com reticências. Estilo .controle ───────────── */
.fk-cardvideo__legenda {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  color: var(--texto-unidade);
  font-family: var(--font-texto);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
}
.fk-cardvideo__legenda > svg { flex: none; }
.fk-cardvideo__titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sob o ponteiro (ou --ativo, posto pelo consumidor no toque e no teclado): fio claro, zoom e legenda acesa ──── */
.fk-cardvideo:is(:hover, .fk-cardvideo--ativo) .fk-cardvideo__quadro { box-shadow: var(--shadow-midia-hover); }
.fk-cardvideo:is(:hover, .fk-cardvideo--ativo) :is(.fk-cardvideo__poster, .fk-cardvideo__previa) { transform: scale(1.03); }
.fk-cardvideo:is(:hover, .fk-cardvideo--ativo) .fk-cardvideo__legenda { color: var(--texto-forte); }

/* ── Escolhido (aria-pressed="true" ou --escolhido): anel de 2 px com halo de 6 px; vence o hover ─────────────── */
:is(.fk-cardvideo[aria-pressed="true"], .fk-cardvideo--escolhido) .fk-cardvideo__quadro { box-shadow: var(--shadow-midia-escolhida); }
:is(.fk-cardvideo[aria-pressed="true"], .fk-cardvideo--escolhido) .fk-cardvideo__legenda { color: var(--texto-forte); }

/* ── Novo: o vídeo que a pessoa acabou de enviar estoura na grade e solta um anel (Main .it.fresh e ringOut) ───── */
/* O pulo leva 900 ms (--duracao-dialogo); o anel abre de 2 px a 18 px em --duracao-pulso, 350 ms depois
   (--duracao-pressao + --duracao-cor). O canvas usa ease-out no anel; aqui é --curva-opacidade (ease). */
.fk-cardvideo--novo { animation: fk-cardvideo-novo var(--duracao-dialogo) var(--curva-casa) both; }
@keyframes fk-cardvideo-novo {
  0% { opacity: 0; transform: translateY(var(--space-18)) scale(.86); filter: blur(var(--desfoque-vidro)); }
  100% { opacity: 1; transform: none; filter: none; }
}
.fk-cardvideo--novo .fk-cardvideo__quadro {
  animation: fk-cardvideo-anel var(--duracao-pulso) var(--curva-opacidade) calc(var(--duracao-pressao) + var(--duracao-cor));
}
@keyframes fk-cardvideo-anel {
  0% { box-shadow: 0 0 0 var(--space-2) var(--texto-forte), 0 0 0 var(--space-2) color-mix(in srgb, var(--texto-forte) 55%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-2) var(--texto-forte), 0 0 0 var(--space-18) color-mix(in srgb, var(--texto-forte) 0%, transparent); }
}

/* ── Solto: o card do carrossel da Home (.vc), só o quadro, raio 12 e brilho de vidro por cima ────────────────── */
.fk-cardvideo--solto {
  flex: none;
  display: block;
  border-radius: var(--radius-12);
  transition: transform var(--duracao-deslize) var(--curva-casa);
}
.fk-cardvideo--solto .fk-cardvideo__quadro {
  border-radius: var(--radius-12);
  transition: box-shadow var(--duracao-media) var(--curva-casa), filter calc(var(--duracao-cor) * 2) var(--curva-opacidade);
}
/* Brilho de vidro (Home .vmedia::after): filete interno de 1 px a 8 %, luz de 1 px no topo a 14 % e um véu claro que
   some aos 30 %. O aro escuro que --shadow-ref traz por fora cai fora do quadro e é cortado pelo overflow. */
.fk-cardvideo--solto .fk-cardvideo__quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--filete-midia), transparent 30%);
  box-shadow: var(--shadow-filtro-filete), var(--shadow-ref);
  pointer-events: none;
}
/* Zoom mais lento no carrossel: 800 ms (--duracao-silencio + --duracao-pressao). */
.fk-cardvideo--solto .fk-cardvideo__poster { transition-duration: calc(var(--duracao-silencio) + var(--duracao-pressao)); }
/* A prévia do carrossel nasce de um desfoque claro em 800 ms e, ao sair, derrete de volta no pôster em 380 ms. */
.fk-cardvideo--solto .fk-cardvideo__previa {
  transform: none;
  transition: none;
  animation: fk-cardvideo-previa-entra calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa) both;
}
@keyframes fk-cardvideo-previa-entra {
  from { opacity: 0; filter: blur(var(--desfoque-dialogo)) brightness(1.3); transform: scale(1.06); }
  to { opacity: 1; filter: none; transform: none; }
}
.fk-cardvideo--solto .fk-cardvideo__previa--sai { animation: fk-cardvideo-previa-sai var(--duracao-atraso-entrada) var(--curva-opacidade) both; }
@keyframes fk-cardvideo-previa-sai {
  from { opacity: 1; filter: none; transform: none; }
  to { opacity: 0; filter: blur(var(--desfoque-saida)); transform: scale(1.02); }
}
/* Ativo no carrossel: sobe 4 px, anel claro de 2 px (92 %) com halo de 6 px (10 %) e sombra de pé (--shadow-midia-ativa,
   Home .vc.on .vmedia), e o play some em escala .7. */
.fk-cardvideo--solto:is(:hover, .fk-cardvideo--ativo) { transform: translateY(calc(var(--space-4) * -1)); }
.fk-cardvideo--solto:is(:hover, .fk-cardvideo--ativo, :focus-visible) .fk-cardvideo__quadro { box-shadow: var(--shadow-midia-ativa); }
.fk-cardvideo--solto:is(:hover, .fk-cardvideo--ativo) .fk-cardvideo__play { opacity: 0; transform: scale(.7); }
/* Apagado: enquanto um card do carrossel está ativo, os outros escurecem (Home .has-hv .vc:not(.on)). */
.fk-cardvideo--solto.fk-cardvideo--apagado:not(:hover, .fk-cardvideo--ativo) .fk-cardvideo__quadro { filter: brightness(.58) saturate(.75); }

/* ── Menos movimento: nada desliza, escala aos poucos nem estoura; a prévia só aparece e a que sai some. O play
   já para de transitar pela regra de BotaoRedondo. ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-cardvideo--solto,
  .fk-cardvideo__quadro,
  .fk-cardvideo--solto .fk-cardvideo__quadro,
  .fk-cardvideo__poster,
  .fk-cardvideo--solto .fk-cardvideo__poster,
  .fk-cardvideo__previa { transition: none; }
  .fk-cardvideo--novo,
  .fk-cardvideo--novo .fk-cardvideo__quadro,
  .fk-cardvideo__selo,
  .fk-cardvideo__previa,
  .fk-cardvideo--solto .fk-cardvideo__previa,
  .fk-cardvideo--solto .fk-cardvideo__previa--sai { animation: none; }
  .fk-cardvideo--solto .fk-cardvideo__previa--sai { opacity: 0; }
}

/* Source: Carrossel.css */
/* Fenaky Design System · Carrossel — a fila horizontal de mídia que se arrasta: janela com bordas que se dissolvem,
   trilho que desliza um card inteiro por vez, setas, contagem no rótulo, módulo final "Ver todos", posição em trilho
   rebaixado, troca de conteúdo em cascata e a onda que chama a atenção. No celular vira rolagem nativa com encaixe.
   Fontes: Home.dc.html (.row, .arrows, .count, .vport, .vtrack, .vmore, .vfan, .pport, .ptrack, .pcard.out/.pre,
   .cat.ping .pframe/wave, .cat-f, .tip, .pos; lógica wheel/dragDown/dragMove/dragUp/move), HomeMobile.dc.html
   (.vscroll, .pscroll, .vedge/.pedge com view(x), .pos/.vpos/.ppos com scroll-timeline) e PreviewVideo.dc.html (o
   trilho acompanha o card ativo). Os cards dentro dele são CardVideo (--solto) e CardRetrato (--vitrine); as setas são
   BotaoRedondo; o rótulo é a primitiva .fk-rotulo. Aqui ficam só a janela, o trilho, os itens e as peças próprias.
   Pretos com opacidade saem de --bg na mesma opacidade (o canvas usa rgba(0,0,0,a)); brancos, de --branco e
   --texto-forte; a máscara usa --bg porque nela só o alfa conta. */

/* ── Bloco: geometria por variáveis (padrão = vídeos de exemplo da Home, 150 × 266 com 12 px entre eles) ─────────── */
.fk-carrossel {
  --fk-carrossel-item: 150px;
  --fk-carrossel-vao: var(--space-12);
  /* A janela sangra para fora da coluna; o trilho devolve a sangria à esquerda, então o 1º card fica na coluna. */
  --fk-carrossel-sangria-esq: var(--space-40);
  --fk-carrossel-sangria-dir: var(--space-40);
  --fk-carrossel-fim: var(--space-40);
  /* Folga acima (o card sobe 4 px e ganha anel de 6 px) e abaixo (a sombra do card some antes do corte). */
  --fk-carrossel-folga-topo: var(--space-12);
  --fk-carrossel-folga-base: calc(var(--space-32) + var(--space-4));
  /* Bordas: transparente até a, opaca a partir de b; à direita, opaca até c do fim, 40 % em d do fim, some no fim. */
  --fk-carrossel-mascara-a: var(--space-28);
  --fk-carrossel-mascara-b: calc(var(--space-32) + var(--space-6));
  --fk-carrossel-mascara-c: 170px;
  --fk-carrossel-mascara-d: calc(var(--space-56) + var(--space-4));
  /* Módulo Ver todos: 288 px é o mínimo (Home .vmore, que cabe o leque aberto de ±60 px). O script o alarga em menos de
     um passo para que (trilho − janela) seja múltiplo do passo: a última parada continua num card inteiro e o módulo
     fecha na margem direita em qualquer largura. Na Home (18 cards de 162 px, janela de 1340 px) o acréscimo é zero. */
  --fk-carrossel-mais-min: 288px;
  --fk-carrossel-mais: var(--fk-carrossel-mais-min);
  position: relative;
  min-width: 0;
}

/* ── Cabeçalho: rótulo (com a contagem) à esquerda, setas à direita, 30 px de altura e 8 px até a janela ──────────── */
/* Altura fixa como no canvas (.row 30 px): as setas de 32 px transbordam 1 px em cima e embaixo, centradas. */
.fk-carrossel__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: var(--tamanho-tecla);
  margin-bottom: var(--space-8);
}
.fk-carrossel__setas { display: flex; flex: none; gap: var(--space-8); }

/* Contagem ao lado do rótulo (Home .count): poço de 18 px, Space Grotesk 600 10 px, números tabulares.
   Cor: o canvas usa #b9b9bf; o token mais próximo é --texto-leitura (#b7b7bd, 9,9:1 sobre --poco). */
.fk-carrossel__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:
    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;
}

/* ── Janela: recorta o trilho, dissolve as bordas e pega o arrasto ──────────────────────────────────────────────── */
.fk-carrossel__janela {
  position: relative;
  margin: 0 calc(var(--fk-carrossel-sangria-dir) * -1) 0 calc(var(--fk-carrossel-sangria-esq) * -1);
  /* clip, não hidden: o foco do teclado num card fora da vista não pode rolar a janela por baixo do trilho. */
  overflow: hidden;
  overflow: clip;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* A borda esquerda é totalmente clara nos 28 px onde o card anterior apareceria: o trilho parado nunca deixa uma
     lasca; o card em movimento ainda se dissolve nos últimos 10 px. */
  -webkit-mask-image: linear-gradient(90deg, transparent var(--fk-carrossel-mascara-a), var(--bg) var(--fk-carrossel-mascara-b), var(--bg) calc(100% - var(--fk-carrossel-mascara-c)), color-mix(in srgb, var(--bg) 40%, transparent) calc(100% - var(--fk-carrossel-mascara-d)), transparent);
  mask-image: linear-gradient(90deg, transparent var(--fk-carrossel-mascara-a), var(--bg) var(--fk-carrossel-mascara-b), var(--bg) calc(100% - var(--fk-carrossel-mascara-c)), color-mix(in srgb, var(--bg) 40%, transparent) calc(100% - var(--fk-carrossel-mascara-d)), transparent);
}
/* No fim do trilho a borda direita fica limpa: o último card (ou o módulo Ver todos) aparece inteiro. */
.fk-carrossel__janela--fim {
  -webkit-mask-image: linear-gradient(90deg, transparent var(--fk-carrossel-mascara-a), var(--bg) var(--fk-carrossel-mascara-b));
  mask-image: linear-gradient(90deg, transparent var(--fk-carrossel-mascara-a), var(--bg) var(--fk-carrossel-mascara-b));
}
.fk-carrossel__janela :is(img, a, video) { -webkit-user-drag: none; }
.fk-carrossel--arrastando :is(.fk-carrossel__janela, .fk-carrossel__janela *) { cursor: grabbing; }

/* ── Trilho: a fila de itens; desliza em 1 s na curva da casa e para sempre num card inteiro ───────────────────── */
.fk-carrossel__trilho {
  display: flex;
  gap: var(--fk-carrossel-vao);
  width: max-content;
  margin: 0;
  padding: var(--fk-carrossel-folga-topo) var(--fk-carrossel-fim) var(--fk-carrossel-folga-base) var(--fk-carrossel-sangria-esq);
  list-style: none;
  transform: translateX(calc(var(--fk-carrossel-x, 0px) * -1));
  transition: transform var(--duracao-giro) var(--curva-casa);
}
/* Arrastando: o trilho segue o ponteiro sem transição. Seco: a troca de conteúdo volta ao início sem deslizar. */
.fk-carrossel__trilho--arrastando,
.fk-carrossel__trilho--seco { transition: none; }

/* ── Item: a vaga de um card. A largura fixa o card; o card ocupa 100 % dela. ─────────────────────────────────── */
.fk-carrossel__item {
  --fk-carrossel-atraso: 0ms;
  position: relative;
  flex: none;
  width: var(--fk-carrossel-item);
  /* Volta da troca de conteúdo: 600 ms ease na opacidade, 1 s na curva da casa na posição e 700 ms no desfoque,
     cada card com o seu atraso (55 ms por posição na Home). */
  transition:
    opacity var(--duracao-deslize) var(--curva-opacidade) var(--fk-carrossel-atraso),
    transform var(--duracao-giro) var(--curva-casa) var(--fk-carrossel-atraso),
    filter var(--duracao-silencio) var(--curva-opacidade) var(--fk-carrossel-atraso);
}
.fk-carrossel__item > * { width: 100%; }
/* A vaga do módulo Ver todos não tem largura de card: mede o módulo e estica na altura da fila. */
.fk-carrossel__item--mais { display: flex; width: auto; }
.fk-carrossel__item--mais > .fk-carrossel__mais { width: var(--fk-carrossel-mais); }
/* Saindo (filtro trocado): sobe 18 px, encolhe a .96 e desfoca 10 px (--desfoque-chegada, o token do .pcard.out), 22 ms
   por posição (280 ms ease, 450 ms na curva da casa, 300 ms ease). */
.fk-carrossel__item--saindo {
  opacity: 0;
  transform: translateY(calc(var(--space-18) * -1)) scale(.96);
  filter: blur(var(--desfoque-chegada));
  transition:
    opacity var(--duracao-anel) var(--curva-opacidade) var(--fk-carrossel-atraso),
    transform var(--duracao-media) var(--curva-casa) var(--fk-carrossel-atraso),
    filter var(--duracao-curta) var(--curva-opacidade) var(--fk-carrossel-atraso);
}
/* Chegando: o novo conteúdo nasce 40 px abaixo, em .96 e com desfoque de 16 px, sem transição; tirar a classe o traz. */
.fk-carrossel__item--chegando {
  opacity: 0;
  transform: translateY(var(--space-40)) scale(.96);
  filter: blur(var(--desfoque-entrada));
  transition: none;
}

/* ── Onda: chama a atenção para a fila ("Explorar influencers"): cada card sobe 10 px e volta, 45 ms por posição ─── */
/* Anima a vaga (li), não a raiz do card: o transform e o filter próprios do card (subida no hover, --apagado) ficam
   intactos, como no canvas, onde a onda anda no .pframe e o card no .pcard. */
.fk-carrossel--onda .fk-carrossel__item {
  animation: fk-carrossel-onda var(--duracao-dialogo) var(--curva-casa) var(--fk-carrossel-onda-atraso, 0ms) both;
}
@keyframes fk-carrossel-onda {
  0% { transform: none; }
  35% { transform: translateY(calc(var(--space-10) * -1)); }
  100% { transform: none; }
}

/* ── Ver todos: o módulo que fecha a fila e abre a galeria inteira, em vez de repetir quadros (Home .vmore) ──────── */
/* Compõe a primitiva: <a class="fk-modulo fk-carrossel__mais">. O fundo e a sombra vêm do .fk-modulo; aqui ficam o raio
   de 12 px e o recheio do .vmore, a largura de --fk-carrossel-mais e o hover/foco próprios. Estica na altura dos cards. */
.fk-carrossel__mais {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--fk-carrossel-mais);
  padding: var(--space-16) var(--space-14) var(--space-14) var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-12);
  color: var(--texto-hover);
  text-decoration: none;
  transition:
    background var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-deslize) var(--curva-casa),
    box-shadow var(--duracao-media) var(--curva-casa);
}
/* O foco do teclado mostra o mesmo que o ponteiro (sobe, abre o leque, anda a seta), além do anel global de foco. */
.fk-carrossel__mais:is(:hover, :focus-visible) {
  color: var(--branco);
  transform: translateY(calc(var(--space-4) * -1));
  background: linear-gradient(180deg, var(--modulo-hover-topo), var(--modulo-hover-base));
}
/* Rótulo "Galeria" do módulo: <span class="fk-rotulo fk-carrossel__mais-rotulo">, em --texto-unidade (canvas #a9a9af). */
.fk-carrossel__mais-rotulo { position: relative; z-index: 1; color: var(--texto-unidade); }
.fk-carrossel__mais-rodape {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
}
.fk-carrossel__mais-titulo {
  display: block;
  margin: 0;
  color: var(--texto-forte);
  font: 500 19px/1.18 var(--font-display);
  letter-spacing: -.02em;
}
.fk-carrossel__mais-titulo > span { display: block; color: var(--texto-titulo-apagado); }
/* A seta do módulo (<span class="fk-tecla fk-botaoredondo fk-carrossel__mais-seta" aria-hidden="true">) clareia e anda
   2 px quando o módulo está sob o ponteiro ou no foco (350 ms na curva da casa = --duracao-pressao + --duracao-cor). */
.fk-carrossel__mais-seta { transition: background var(--duracao-hover), transform calc(var(--duracao-pressao) + var(--duracao-cor)) var(--curva-casa); }
.fk-carrossel__mais:is(:hover, :focus-visible) .fk-carrossel__mais-seta {
  color: var(--branco);
  background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base));
  transform: translateX(var(--space-2));
}

/* Leque: três quadros da galeria abertos no meio do módulo (74 × 132 a 44 px do topo); abrem mais sob o ponteiro. */
.fk-carrossel__leque {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 74px;
  height: 132px;
  margin-left: -37px;
  pointer-events: none;
}
.fk-carrossel__leque img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-9);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg) 70%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--branco) 10%, transparent),
    0 10px 22px -8px color-mix(in srgb, var(--bg) 90%, transparent);
  transform-origin: 50% 100%;
  transition: transform var(--duracao-silencio) var(--curva-casa), filter var(--duracao-central-fecha) var(--curva-opacidade);
}
.fk-carrossel__leque img:nth-child(1) { transform: translateX(-50px) rotate(-10deg) scale(.92); filter: brightness(.62) saturate(.8); }
.fk-carrossel__leque img:nth-child(2) { transform: translateX(50px) rotate(10deg) scale(.92); filter: brightness(.62) saturate(.8); }
.fk-carrossel__leque img:nth-child(3) { transform: translateY(calc(var(--space-4) * -1)); }
.fk-carrossel__mais:is(:hover, :focus-visible) .fk-carrossel__leque img:nth-child(1) { transform: translateX(-60px) rotate(-13deg) scale(.92); filter: brightness(.75) saturate(.9); }
.fk-carrossel__mais:is(:hover, :focus-visible) .fk-carrossel__leque img:nth-child(2) { transform: translateX(60px) rotate(13deg) scale(.92); filter: brightness(.75) saturate(.9); }
.fk-carrossel__mais:is(:hover, :focus-visible) .fk-carrossel__leque img:nth-child(3) { transform: translateY(calc(var(--space-8) * -1)); }

/* ── Rodapé: dica com o knob de arrastar à esquerda e a posição à direita (Home .cat-f, .tip) ─────────────────── */
.fk-carrossel__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: var(--tamanho-tecla);
  margin-top: var(--space-12);
}
/* Cor: --texto-controle (#8e8e94, 5,2:1 a 5,5:1 sobre a casca). */
.fk-carrossel__dica {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: 0;
  color: var(--texto-controle);
  font: 500 12px/1.3 var(--font-texto);
}

/* Posição: trilho rebaixado de 140 × 6 px; o polegar (4 px, claro a 55 %) mostra o pedaço visível e anda junto.
   O script escreve --fk-carrossel-polegar (largura) e --fk-carrossel-polegar-x (deslocamento). Marca: aria-hidden. */
.fk-carrossel__posicao {
  position: relative;
  display: block;
  flex: none;
  width: 140px;
  height: var(--space-6);
  border-radius: var(--radius-6);
  background: color-mix(in srgb, var(--branco) 8%, transparent);
  box-shadow:
    inset 0 1px 3px color-mix(in srgb, var(--bg) 80%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent),
    0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent);
}
.fk-carrossel__polegar {
  position: absolute;
  left: 0;
  top: 1px;
  width: var(--fk-carrossel-polegar, 28px);
  height: var(--space-4);
  border-radius: var(--radius-4);
  background: color-mix(in srgb, var(--texto-forte) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--branco) 35%, transparent), 0 0 6px var(--anel-escolha);
  transform: translateX(var(--fk-carrossel-polegar-x, 0px));
  transition: transform var(--duracao-giro) var(--curva-casa), width var(--duracao-deslize) var(--curva-casa);
}

/* ── Retratos: a vitrine "Explore Influences" dentro da casca (225 × 300, 16 px entre eles) ────────────────────── */
/* A janela sangra 40 px à esquerda e 28 px à direita (a folga da casca); bordas 24/36 e 130/40; 30 px sob os cards.
   O cabeçalho alinha pela base (título de seção à esquerda, filtro e setas à direita) e fica a 12 px da janela. */
.fk-carrossel--retratos {
  --fk-carrossel-item: 225px;
  --fk-carrossel-vao: var(--space-16);
  --fk-carrossel-sangria-dir: var(--space-28);
  --fk-carrossel-folga-base: var(--space-30);
  --fk-carrossel-mascara-a: var(--space-24);
  --fk-carrossel-mascara-b: calc(var(--space-32) + var(--space-4));
  --fk-carrossel-mascara-c: 130px;
  --fk-carrossel-mascara-d: var(--space-40);
}
/* 51 px como Home .cat-h: rótulo de 18 px (a contagem), 10 px e o título de 30 px somam 58; alinhados pela base, os
   7 px a mais sobem para a folga da casca. */
.fk-carrossel--retratos > .fk-carrossel__cabecalho { align-items: flex-end; height: 51px; margin-bottom: var(--space-12); }
/* O sulco sob a vitrine (<hr class="fk-sulco fk-carrossel__sulco">) sobe 2 px para dentro da folga de 30 px. */
.fk-carrossel__sulco { margin-top: calc(var(--space-2) * -1); }

/* ── Toque (celular): rolagem nativa com encaixe no início de cada card, sem setas nem arrasto próprio ────────────── */
/* Vídeos 120 × 213 com 10 px; retratos 168 × 224 com 12 px. Bordas: some nos 12 (14) px da esquerda e nos 24 px da
   direita. A posição ocupa a largura toda: 4 px de poço, polegar cinza de 2 px. */
.fk-carrossel--toque {
  --fk-carrossel-item: 120px;
  --fk-carrossel-vao: var(--space-10);
  --fk-carrossel-sangria-esq: var(--space-12);
  --fk-carrossel-sangria-dir: var(--space-16);
  --fk-carrossel-fim: var(--space-24);
  --fk-carrossel-folga-topo: var(--space-10);
  --fk-carrossel-folga-base: var(--space-12);
  --fk-carrossel-mascara-b: var(--space-12);
  timeline-scope: --fk-carrossel-rolagem;
}
.fk-carrossel--toque.fk-carrossel--retratos {
  --fk-carrossel-item: 168px;
  --fk-carrossel-vao: var(--space-12);
  --fk-carrossel-sangria-esq: var(--space-16);
  --fk-carrossel-folga-topo: var(--space-8);
  --fk-carrossel-mascara-b: var(--space-14);
}
.fk-carrossel--toque > .fk-carrossel__cabecalho { height: var(--space-20); margin-bottom: var(--space-10); }
.fk-carrossel--toque.fk-carrossel--retratos > .fk-carrossel__cabecalho { align-items: center; height: var(--space-20); margin-bottom: var(--space-14); }
.fk-carrossel--toque .fk-carrossel__janela {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: auto;
  touch-action: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fk-carrossel-sangria-esq);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--bg) var(--fk-carrossel-mascara-b), var(--bg) calc(100% - var(--space-24)), transparent);
  mask-image: linear-gradient(90deg, transparent 0, var(--bg) var(--fk-carrossel-mascara-b), var(--bg) calc(100% - var(--space-24)), transparent);
}
.fk-carrossel--toque .fk-carrossel__janela::-webkit-scrollbar { display: none; }
/* A janela rolável recebe o foco do teclado (tabindex="0"): o anel fica para dentro, sem ser cortado. */
.fk-carrossel--toque .fk-carrossel__janela:focus-visible { outline-offset: calc(var(--space-2) * -1); }
.fk-carrossel--toque .fk-carrossel__trilho { transform: none; transition: none; }
.fk-carrossel--toque .fk-carrossel__item { scroll-snap-align: start; }
.fk-carrossel--toque .fk-carrossel__posicao {
  width: auto;
  height: var(--space-4);
  border-radius: var(--radius-4);
  overflow: hidden;
  background: var(--poco);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg) 80%, transparent), 0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent);
}
/* Polegar do celular: degradê cinza (#7a7a82 → #56565d no canvas; os tokens mais próximos são --texto-contagem e
   --texto-separador). Mínimo de 24 px. */
.fk-carrossel--toque .fk-carrossel__polegar {
  width: var(--fk-carrossel-polegar, 24px);
  height: var(--space-2);
  border-radius: var(--radius-2);
  background: linear-gradient(90deg, var(--texto-contagem), var(--texto-separador));
  box-shadow: none;
  transition: none;
}
/* Fora da casca a página é tão escura quanto o poço: a posição ganha um chão claro para continuar visível. */
.fk-carrossel__posicao--pagina,
.fk-carrossel--toque .fk-carrossel__posicao--pagina {
  background: color-mix(in srgb, var(--branco) 5%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--bg) 90%, transparent), 0 1px 0 color-mix(in srgb, var(--branco) 6%, transparent);
}
/* No celular não há rodapé nem sulco: a dica vem solta depois da posição, 16 px abaixo, em linhas de 1,45
   (HomeMobile .cat-f). */
.fk-carrossel--toque > .fk-carrossel__dica { margin-top: var(--space-16); line-height: 1.45; }
/* Vídeos: 4 px até a posição (HomeMobile .vfoot); retratos: 2 px (.ppos). */
.fk-carrossel--toque .fk-carrossel__posicao { margin-top: var(--space-4); }
.fk-carrossel--toque.fk-carrossel--retratos .fk-carrossel__posicao { margin-top: var(--space-2); }

/* Onde há animação guiada pela rolagem, o CSS move o polegar (o script escreve --fk-carrossel-polegar-curso) e as
   vagas encolhem a .9 e escurecem ao cruzar as bordas. Sem ela, o script escreve --fk-carrossel-polegar-x. A animação
   fica na vaga (li), como o canvas a põe no .vedge/.pedge, para não apagar o transform e o filter do próprio card. */
@supports (animation-timeline: scroll()) {
  .fk-carrossel--toque .fk-carrossel__janela { scroll-timeline: --fk-carrossel-rolagem x; }
  .fk-carrossel--toque .fk-carrossel__polegar { animation: fk-carrossel-polegar linear both; animation-timeline: --fk-carrossel-rolagem; }
  .fk-carrossel--toque .fk-carrossel__item {
    animation: fk-carrossel-borda-entra linear both, fk-carrossel-borda-sai linear forwards;
    animation-timeline: view(x), view(x);
    animation-range: entry 0% entry 100%, exit 0% exit 100%;
  }
}
@keyframes fk-carrossel-polegar { from { transform: none; } to { transform: translateX(var(--fk-carrossel-polegar-curso, 0px)); } }
@keyframes fk-carrossel-borda-entra { from { transform: scale(.9); filter: brightness(.42); } to { transform: none; filter: none; } }
@keyframes fk-carrossel-borda-sai { to { transform: scale(.9); filter: brightness(.42); } }

/* ── Menos movimento: o trilho pula direto para a parada, a troca é seca, nada ondula nem encolhe na borda. ───────── */
@media (prefers-reduced-motion: reduce) {
  .fk-carrossel__trilho,
  .fk-carrossel__item,
  .fk-carrossel__item--saindo,
  .fk-carrossel__mais,
  .fk-carrossel__mais-seta,
  .fk-carrossel__leque img,
  .fk-carrossel__polegar { transition: none; }
  .fk-carrossel--onda .fk-carrossel__item,
  .fk-carrossel--toque .fk-carrossel__item { animation: none; }
}

/* Source: Casca.css */
/* Fenaky Design System · Casca — o que a casca faz além do material.
   O material (.fk-casca, .fk-casca--compacta, .fk-casca--pro) é primitiva de 00-base.css e não é redefinido aqui.
   Este arquivo acrescenta: a vaga e a casca que sobe sob o ponteiro (card de plano), o recorte interno, a folha que
   sobe da base no celular e a pega da folha. Fontes: Planos.dc.html (.slot, .pc, .slot:hover .pc, .pc>.clip),
   HomeMobile.dc.html (.sheet.shell, .grab), CriarMobile.dc.html (.grip, .sheet.is-drag) e NotificacoesMobile.dc.html
   (.csheet.shell). */

/* ── Recorte: mídia rente às bordas sem cortar o que sai da casca (selo acima do card de plano) ─────────────── */
/* Fora do fluxo, como .pc>.clip: a casca (ou a vaga) precisa de altura própria. */
.fk-casca__recorte {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
/* No fluxo: o conteúdo do recorte dá a altura da casca. Use quando a casca não tem altura fixa e o recorte é o
   único filho no fluxo (derivado de .pc>.clip, que no canvas fica numa vaga de altura fixa). */
.fk-casca__recorte--fluxo {
  position: relative;
  inset: auto;
}

/* ── Vaga: o lugar do card na grade; lê o ponteiro e não se move ──────────────────────────────────────────── */
/* Planos.dc.html, .slot: o ponteiro é lido na vaga, não na casca, para a borda de baixo não fugir do cursor quando o
   card sobe e o hover não piscar. A casca fica no fluxo e preenche a vaga (grade de uma célula), então a altura da
   vaga vem do conteúdo do card ou da linha da grade. .fk-casca-vaga é o nome antigo, mantido como sinônimo porque o
   CardPlano o usa; em código novo use .fk-casca__vaga. */
.fk-casca__vaga,
.fk-casca-vaga {
  position: relative;
  display: grid;
}

/* ── Elevável: sobe 4 px sob o ponteiro, com a sombra mais longa (card de plano) ──────────────────────────── */
.fk-casca--elevavel {
  transition: transform var(--duracao-media) var(--curva-casa), box-shadow var(--duracao-media) var(--curva-casa);
}
/* Sem vaga, a própria casca responde ao ponteiro. */
.fk-casca--elevavel:not(:is(.fk-casca__vaga, .fk-casca-vaga) > *):hover,
:is(.fk-casca__vaga, .fk-casca-vaga):hover > .fk-casca--elevavel,
.fk-casca--elevavel:focus-within,
.fk-casca--elevada {
  transform: translateY(calc(-1 * var(--space-4)));
  box-shadow: var(--shadow-casca-elevada);
}
.fk-casca--pro.fk-casca--elevavel:not(:is(.fk-casca__vaga, .fk-casca-vaga) > *):hover,
:is(.fk-casca__vaga, .fk-casca-vaga):hover > .fk-casca--pro.fk-casca--elevavel,
.fk-casca--pro.fk-casca--elevavel:focus-within,
.fk-casca--pro.fk-casca--elevada { box-shadow: var(--shadow-casca-pro-elevada); }

/* ── Folha: casca presa à base da tela do celular, cantos de cima 28, sombra para cima ─────────────────────── */
/* --fk-casca-recolhe: quanto a folha leva para sair. 450 ms nas folhas de HomeMobile (.sheet); a central no celular
   (NotificacoesMobile .csheet) leva 500 ms: ela passa --duracao-central-fecha. */
.fk-casca--folha {
  --fk-casca-recolhe: var(--duracao-media);
  border-radius: var(--radius-28) var(--radius-28) 0 0;
  box-shadow: var(--shadow-folha);
  transition: transform var(--duracao-dialogo) var(--curva-casa), visibility 0s;
}
/* Recolhida: desce para fora da tela (altura + 40 px) acelerando; só some do foco depois de sair. */
.fk-casca--folha.fk-casca--recolhida {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + var(--space-40)));
  transition: transform var(--fk-casca-recolhe) var(--curva-recolher), visibility 0s linear var(--fk-casca-recolhe);
}

/* Pega: faixa de toque de 30 px no topo da folha com um traço rebaixado (poço) de 40 × 5 que alarga sob o ponteiro
   (HomeMobile .grab). Sombra: o canvas usa uma própria de 1 px; aqui vale a do trilho (--shadow-poco-trilho). */
.fk-casca__pega {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--space-30);
  padding: 0;
  border: 0;
  border-radius: var(--radius-28) var(--radius-28) 0 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.fk-casca__pega::before {
  content: '';
  display: block;
  width: var(--space-40);
  height: var(--space-5);
  border-radius: var(--radius-pilula);
  background: var(--poco);
  box-shadow: var(--shadow-poco-trilho);
  transition: width var(--duracao-curta) var(--curva-casa), background var(--duracao-cor) var(--curva-opacidade);
}
/* 52 px = 48 + 4 (HomeMobile .grab:hover span). */
.fk-casca__pega:hover::before { width: calc(var(--space-48) + var(--space-4)); }
/* Arrastando (CriarMobile .sheet.is-drag .grip i): 56 px e o traço acende. O canvas usa #45454c; o token mais
   próximo é --tecla-acesa-topo (#4a4a51). O consumidor põe a classe no pointerdown e tira no pointerup. */
.fk-casca__pega--arrastando { cursor: grabbing; }
.fk-casca__pega--arrastando::before,
.fk-casca__pega--arrastando:hover::before {
  width: var(--space-56);
  background: var(--tecla-acesa-topo);
}
.fk-casca__pega:focus-visible { outline-offset: calc(-1 * var(--tamanho-foco-afastamento) - var(--tamanho-foco)); }

/* ── Menos movimento: a casca não sobe nem desliza; muda só a sombra e a visibilidade. ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-casca--elevavel,
  .fk-casca--folha,
  .fk-casca--folha.fk-casca--recolhida,
  .fk-casca__pega::before { transition: none; }
  .fk-casca--elevavel:not(:is(.fk-casca__vaga, .fk-casca-vaga) > *):hover,
  :is(.fk-casca__vaga, .fk-casca-vaga):hover > .fk-casca--elevavel,
  .fk-casca--elevavel:focus-within,
  .fk-casca--elevada { transform: none; }
}

/* Source: CentralNotificacoes.css */
/* Fenaky Design System · CentralNotificacoes — o histórico de notificações, aberto pelo sino do topo.
   Desktop: painel em casca de 400 px que desliza da direita sobre o conteúdo, logo abaixo do topo, com véu leve.
   Celular (--folha): folha que sobe da borda de baixo, com alça, até 92 px do alto.
   Abas "Todas / Não lidas" no segmentado deslizante, grupos Hoje / Ontem / Esta semana, itens com ícone, miniatura ou
   anel de andamento, ponto de não lida, "Marcar tudo como lido" e o estado vazio.
   A casca (.fk-casca), o segmentado (.fk-seg, .fk-seg--deslizante, .fk-seg__indicador), o sulco, o rótulo, o módulo e as
   teclas são primitivas de 00-base.css; o sino e o contador são do Topo. Este arquivo só define .fk-centralnotificacoes*.
   Fontes: Notificacoes.dc.html (.cscrim, .shell.central, .ci/.ce, .chead, .cbar, .ctabs, .cind, .cnum, .mark, .cpane,
   .cw/.cwi, .cgl/.cgs, .citem, .clead, .cic, .cth, .cbadge, .cring, .ctxt, .cmeta, .ctime, .cact, .cdot, .cpct, .cempty),
   NotificacoesMobile.dc.html (.scrim, .clayer, .csheet, .grab, .chrow, .ctitle, .cmark, .ctabs, .ccount, .cbody, .cpane,
   .coll/.cin, .cgl, .nitem, .nlink, .nic, .nring, .nh/.nt, .ntime, .ndot, .nd, .nacts/.nk, .cempty) e NOTIF.md (item 2).
   Valores sem token próprio saem de tokens existentes por calc() ou color-mix(), com a origem anotada ao lado. */

/* ── Medidas e sombras locais ──────────────────────────────────────────────────────────────────────────────────── */
/* Cada medida composta é escrita uma vez aqui e reutilizada. Elas valem no painel, na camada da folha, no véu e no item
   e no vazio usados soltos (catálogos, prévias). :where() mantém a especificidade em zero. */
:where(.fk-centralnotificacoes, .fk-centralnotificacoes__camada, .fk-centralnotificacoes__veu, .fk-centralnotificacoes__item, .fk-centralnotificacoes__vazio) {
  /* 36 px: a guia do item (ícone, miniatura, anel), a altura das abas da folha, o pé da lista da folha e o alto do vazio. */
  --fk-centralnotificacoes-guia: calc(var(--space-32) + var(--space-4));
  /* 44 px: o respiro no pé da lista do desktop e o apagado no pé da lista da folha (canvas .cpane do desktop: padding de 44; .cpane da folha: máscara de 44). */
  --fk-centralnotificacoes-pe: calc(var(--space-40) + var(--space-4));
  /* 52 px: o apagado no pé da lista do desktop e a alça da folha aberta sob o ponteiro (canvas .cpane: máscara de 52; .grab:hover span: 52). */
  --fk-centralnotificacoes-mascara: calc(var(--space-48) + var(--space-4));
  /* 17 px: a altura da contagem (canvas .cnum e .ccount) e da hora na folha (.ntime), que é a linha do título de 13 px. */
  --fk-centralnotificacoes-linha: calc(var(--space-16) + var(--space-1));
  /* 17 px do alto até o ponto: 12 de padding + 5, para o ponto de 7 px ficar no meio da linha do título (canvas .cdot). */
  --fk-centralnotificacoes-ponto-alto: calc(var(--space-12) + var(--space-5));
  /* 42 e 46 px: o knob do vazio no desktop e na folha (canvas .cempty .knob: 42 no desktop, 46 no celular). */
  --fk-centralnotificacoes-knob: calc(var(--tamanho-tecla) + var(--space-12));
  --fk-centralnotificacoes-knob-folha: calc(var(--tamanho-tecla) + var(--space-16));
  /* 34 px: "Ver todas" no vazio (canvas .cempty .key) = a tecla de 30 + 4. */
  --fk-centralnotificacoes-tecla-vazio: calc(var(--tamanho-tecla) + var(--space-4));
  /* 28 px: as teclas de ação da folha (canvas .nk) = a tecla de 30 − 2. */
  --fk-centralnotificacoes-tecla-folha: calc(var(--tamanho-tecla) - var(--space-2));
  /* 6 px: o desfoque da cascata, da troca de lista e do véu da folha = 2 × --desfoque-dica (canvas 6 px). */
  --fk-centralnotificacoes-desfoque: calc(var(--desfoque-dica) * 2);
  /* Sombras do canvas sem token próprio (as do sistema diferem de 1 a 2 px). O preto é --bg na opacidade do original. */
  /* .cth: aro preto .75 + 0 4px 10px a .5. */
  --fk-centralnotificacoes-sombra-miniatura: 0 0 0 var(--space-1) color-mix(in srgb, var(--bg) 75%, transparent), 0 var(--space-4) var(--space-10) color-mix(in srgb, var(--bg) 50%, transparent);
  /* .cbadge: aro de 2 px na cor da casca + 0 2px 5px a .5. */
  --fk-centralnotificacoes-sombra-selo: 0 0 0 var(--space-2) var(--casca-compacta-meio), 0 var(--space-2) var(--space-5) color-mix(in srgb, var(--bg) 50%, transparent);
  /* .cdot e .ndot: brilho branco de 8 px (60 % no desktop, 55 % na folha). */
  --fk-centralnotificacoes-brilho-ponto: 0 0 var(--space-8) color-mix(in srgb, var(--branco) 60%, transparent);
  --fk-centralnotificacoes-brilho-ponto-folha: 0 0 var(--space-8) color-mix(in srgb, var(--branco) 55%, transparent);
  /* .cring .val: drop-shadow lima de 4 px a 70 % (entre --lima-brilho e --lima-halo). */
  --fk-centralnotificacoes-brilho-arco: drop-shadow(0 0 var(--space-4) color-mix(in srgb, var(--lima) 70%, transparent));
}

/* ── Véu: escurece e desfoca a página por trás do painel; clicar nele fecha a central ─────────────────────────── */
/* Abrindo: opacidade em 550 ms (--duracao-media + --duracao-pressao). Fechando: 400 ms (--duracao-contador). */
.fk-centralnotificacoes__veu {
  position: absolute;
  inset: 0;
  z-index: var(--camada-central-veu);
  background: var(--veu-central);
  -webkit-backdrop-filter: blur(var(--desfoque-veu-central)) saturate(.9);
  backdrop-filter: blur(var(--desfoque-veu-central)) saturate(.9);
  transition: opacity calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-opacidade), visibility 0s;
}
.fk-centralnotificacoes__veu--recolhido {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracao-contador) var(--curva-opacidade), visibility 0s var(--curva-linear) var(--duracao-contador);
}

/* ── Painel ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Vai no mesmo elemento que .fk-casca. Aberto por padrão; recolhido com aria-hidden="true" ou --recolhida.
   Abre em 850 ms na curva da casa; recolhe em 500 ms acelerando (--curva-recolher), 30 px além da borda. */
.fk-centralnotificacoes {
  z-index: var(--camada-central);
  display: flex;
  flex-direction: column;
  width: var(--tamanho-painel-central);
  color: var(--texto);
  font-family: var(--font-texto);
  transition: transform var(--duracao-central-abre) var(--curva-casa), visibility 0s;
}
/* Os filhos ficam acima do grão; o filete (::after da casca) continua por cima de tudo. */
.fk-centralnotificacoes > * { position: relative; z-index: 1; }
:is(.fk-centralnotificacoes--recolhida, .fk-centralnotificacoes[aria-hidden="true"]) {
  transform: translateX(calc(100% + var(--space-30)));
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--duracao-central-fecha) var(--curva-recolher), visibility 0s var(--curva-linear) var(--duracao-central-fecha);
}
/* Ancorada: à direita, logo abaixo do topo (64 + 8 px), para o sino que a abriu ficar à vista. O contêiner posiciona. */
.fk-centralnotificacoes--ancorada {
  position: absolute;
  top: calc(var(--tamanho-topo) + var(--space-8));
  right: var(--space-12);
  bottom: var(--space-12);
}

/* ── Cascata de entrada: cabeçalho, barra, sulco, grupos e itens chegam da direita, saindo de um desfoque ────── */
/* --fk-centralnotificacoes-atraso: 0 ms no cabeçalho, 50 ms na barra, 80 ms no sulco; nas linhas, n × 36 ms até
   --duracao-escalonamento-teto (560 ms). Todos esperam mais 140 ms (--duracao-escalonamento + --duracao-pressao).
   Entrando: opacidade e desfoque em 500 ms (--duracao-central-fecha), posição em 900 ms (--duracao-dialogo) na curva
   da casa. Saindo: 180 ms (--duracao-marca) e 300 ms (--duracao-curta), sem atraso. Desfoque de 6 px = 2 × --desfoque-dica. */
.fk-centralnotificacoes__cascata {
  --fk-centralnotificacoes-espera: calc(var(--fk-centralnotificacoes-atraso, 0ms) + var(--duracao-escalonamento) + var(--duracao-pressao));
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) var(--fk-centralnotificacoes-espera),
    transform var(--duracao-dialogo) var(--curva-casa) var(--fk-centralnotificacoes-espera),
    filter var(--duracao-central-fecha) var(--curva-opacidade) var(--fk-centralnotificacoes-espera);
}
:is(.fk-centralnotificacoes--recolhida, .fk-centralnotificacoes[aria-hidden="true"]) .fk-centralnotificacoes__cascata {
  opacity: 0;
  transform: translateX(var(--space-22));
  filter: blur(var(--fk-centralnotificacoes-desfoque));
  transition:
    opacity var(--duracao-marca) var(--curva-opacidade),
    transform var(--duracao-curta) var(--curva-opacidade),
    filter var(--duracao-marca) var(--curva-opacidade);
}

/* ── Cabeçalho: rótulo "Central", título e fechar ───────────────────────────────────────────────────────────── */
.fk-centralnotificacoes__cabecalho {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-18) 0 var(--space-20);
}
.fk-centralnotificacoes__titulos { min-width: 0; }
/* Space Grotesk 600 21 px (o canvas usa 21; o estilo titulo-painel é 20). */
.fk-centralnotificacoes__titulo {
  margin: var(--space-8) 0 0;
  color: var(--texto-titulo);
  font: 600 21px/1 var(--font-display);
  letter-spacing: -.02em;
}

/* ── Barra: abas e "Marcar tudo como lido" ──────────────────────────────────────────────────────────────────── */
.fk-centralnotificacoes__barra {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-18) var(--space-14);
}
/* As abas são um .fk-seg.fk-seg--deslizante de 2 opções (--n: 2) com 212 px (canvas .ctabs). */
.fk-centralnotificacoes__abas { width: 212px; flex: none; }
.fk-centralnotificacoes__abas .fk-seg__opcao { gap: var(--space-6); }
/* Contagem de não lidas na aba: cinza no poço; na aba escolhida vira a pílula clara do sino (16,9:1).
   Fundo do cinza: --branco a 8 %; número em --texto-suave (o canvas usa #c9c9ce, 1 ponto abaixo), 10,1:1. */
.fk-centralnotificacoes__contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-18);
  height: var(--fk-centralnotificacoes-linha);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pilula);
  color: var(--texto-suave);
  background: color-mix(in srgb, var(--branco) 8%, transparent);
  font: 600 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: background var(--duracao-curta), color var(--duracao-curta);
}
/* Nada não lido: a contagem sai da aba (hidden). */
.fk-centralnotificacoes__contagem[hidden] { display: none; }
:is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-selected="true"], .fk-seg__opcao[aria-pressed="true"]) .fk-centralnotificacoes__contagem {
  color: var(--tinta-pilula);
  background: var(--pilula);
}
/* Marcar tudo como lido: ação de texto (sem tecla), em --texto-suave; sob o ponteiro, branco num fundo de 5 %.
   Sem nada não lido fica em 38 % e não responde (canvas .mark[aria-disabled]). */
.fk-centralnotificacoes__marcar:not(.fk-tecla) {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-6);
  height: var(--tamanho-tecla);
  padding: 0 var(--space-8);
  margin-right: calc(var(--space-6) * -1);
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  cursor: pointer;
  color: var(--texto-suave);
  font: 600 11.5px/1 var(--font-texto);
  white-space: nowrap;
  transition: color var(--duracao-hover), background var(--duracao-hover), opacity var(--duracao-curta);
}
.fk-centralnotificacoes__marcar:not(.fk-tecla):hover {
  color: var(--branco);
  background: color-mix(in srgb, var(--branco) 5%, transparent);
}
.fk-centralnotificacoes__marcar:is(:disabled, [aria-disabled="true"]) {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}
.fk-centralnotificacoes__marcar > svg { flex: none; }

/* Sulco entre a barra e a lista, recuado 18 px dos dois lados. */
.fk-centralnotificacoes__sulco { margin: 0 var(--space-18); }

/* ── Corpo e listas: uma lista por aba, sobrepostas; rola sem barra e some nas bordas ─────────────────────────── */
.fk-centralnotificacoes__corpo {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* A máscara apaga 12 px no alto e 52 px no pé (só o alfa conta: --bg é opaco).
   Entrando: 450 ms (--duracao-media) na opacidade e no desfoque e 700 ms (--duracao-silencio) na posição, depois de
   120 ms (3 × --duracao-escalonamento). Saindo: 200 ms (--duracao-rapida) e 350 ms (--duracao-hover + --duracao-rapida). */
.fk-centralnotificacoes__lista {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-8) var(--space-12) var(--fk-centralnotificacoes-pe);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--bg) var(--space-12), var(--bg) calc(100% - var(--fk-centralnotificacoes-mascara)), transparent);
  mask-image: linear-gradient(180deg, transparent 0, var(--bg) var(--space-12), var(--bg) calc(100% - var(--fk-centralnotificacoes-mascara)), transparent);
  transition:
    opacity var(--duracao-media) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 3),
    transform var(--duracao-silencio) var(--curva-casa) calc(var(--duracao-escalonamento) * 3),
    filter var(--duracao-media) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 3),
    visibility 0s;
}
.fk-centralnotificacoes__lista::-webkit-scrollbar { display: none; }
.fk-centralnotificacoes__lista--oculta {
  opacity: 0;
  transform: translateY(var(--space-10));
  filter: blur(var(--fk-centralnotificacoes-desfoque));
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform calc(var(--duracao-hover) + var(--duracao-rapida)) var(--curva-casa),
    filter var(--duracao-rapida) var(--curva-opacidade),
    visibility 0s var(--curva-linear) calc(var(--duracao-hover) + var(--duracao-rapida));
}

/* ── Linha: cada grupo e cada item abre e recolhe a própria altura (lido em Não lidas, pedido concluído) ─────── */
/* Abre em 600 ms (--duracao-deslize). Recolhendo, o ponto apaga primeiro: a opacidade sai em 220 ms
   (--duracao-rapida + 20) depois de --fk-centralnotificacoes-saida, a altura 60 ms depois (1,5 × --duracao-escalonamento)
   em 500 ms (--duracao-central-fecha). Em Não lidas, a saída de cada linha é 340 ms + min(n × 40, 360) ms. */
.fk-centralnotificacoes__linha {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--duracao-deslize) var(--curva-casa),
    opacity var(--duracao-contador) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 3),
    visibility 0s;
}
.fk-centralnotificacoes__linha--fora {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--duracao-central-fecha) var(--curva-casa) calc(var(--fk-centralnotificacoes-saida, 0ms) + var(--duracao-escalonamento) * 1.5),
    opacity calc(var(--duracao-rapida) + 20ms) var(--curva-opacidade) var(--fk-centralnotificacoes-saida, 0ms),
    visibility 0s var(--curva-linear) calc(var(--fk-centralnotificacoes-saida, 0ms) + var(--duracao-escalonamento-teto));
}
/* O miolo recorta a altura, mas deixa 20 px para a sombra e o anel de foco do item. */
.fk-centralnotificacoes__linha-miolo {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--space-20);
}
.fk-centralnotificacoes__linha-miolo > .fk-centralnotificacoes__cascata:has(> .fk-centralnotificacoes__item) { padding-bottom: var(--space-6); }

/* ── Grupo: Hoje / Ontem / Esta semana, com a data à direita ────────────────────────────────────────────────── */
/* <h3 class="__grupo"> nas duas variantes: o nome em span.fk-rotulo e, opcional, a data em __grupo-data. */
.fk-centralnotificacoes__grupo {
  display: flex;
  margin: 0;
  font: inherit;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-8) var(--space-10);
}
/* Data: o canvas usa #7f7f86 (4,2:1 no item não lido); --texto-controle mantém 4,8:1 a 5,5:1 na casca. */
.fk-centralnotificacoes__grupo-data {
  color: var(--texto-controle);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ── Item: um módulo mais leve que o .fk-modulo; o não lido é mais claro e ganha sombra ─────────────────────── */
/* O preto das sombras do canvas é --bg (#0a0a0b, opaco) na mesma opacidade do original (color-mix com transparent).
   Lido: branco a 3 % → 1,2 %; filetes de 5 % e 3,5 %; base preta a .5.
   Não lido: 5,8 % → 2,2 %, filetes de 8,5 % e 6 %, base .55 e a sombra de 8 px do módulo. Sob o ponteiro: 7,2 % → 3 %. */
.fk-centralnotificacoes__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--fk-centralnotificacoes-guia) minmax(0, 1fr);
  gap: var(--space-12);
  padding: var(--space-12) var(--space-30) var(--space-12) var(--space-12);
  border-radius: var(--radius-14);
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 3%, transparent), color-mix(in srgb, var(--branco) 1.2%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--branco) 3.5%, transparent),
    0 1px 0 color-mix(in srgb, var(--bg) 50%, transparent);
  transition: background var(--duracao-cor) var(--curva-opacidade), box-shadow var(--duracao-cor) var(--curva-opacidade);
}
.fk-centralnotificacoes__item--nao-lida {
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 5.8%, transparent), color-mix(in srgb, var(--branco) 2.2%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 8.5%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--branco) 6%, transparent),
    0 1px 0 color-mix(in srgb, var(--bg) 55%, transparent),
    0 8px 18px -10px color-mix(in srgb, var(--bg) 70%, transparent);
}
.fk-centralnotificacoes__item:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 7.2%, transparent), color-mix(in srgb, var(--branco) 3%, transparent));
}
/* Em andamento: terceira coluna para a porcentagem; sem ponto. */
.fk-centralnotificacoes__item--andamento {
  grid-template-columns: var(--fk-centralnotificacoes-guia) minmax(0, 1fr) auto;
  padding-right: var(--space-16);
}
/* Acabou de chegar (vídeo pronto com a central aberta): um aro claro se abre e some em 1,9 s
   (--duracao-pulso + --duracao-curta), depois de 300 ms (--duracao-curta). O canvas usa ease-out; a curva do sistema que
   desacelera do mesmo jeito, sem passar do ponto, é --curva-troca. */
.fk-centralnotificacoes__item--nova { animation: fk-centralnotificacoes-nova calc(var(--duracao-pulso) + var(--duracao-curta)) var(--curva-troca) var(--duracao-curta); }
@keyframes fk-centralnotificacoes-nova {
  0% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--branco) 8.5%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--branco) 6%, transparent),
      0 0 0 1.5px color-mix(in srgb, var(--texto-forte) 85%, transparent),
      0 0 0 1.5px color-mix(in srgb, var(--texto-forte) 40%, transparent);
  }
  100% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--branco) 8.5%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--branco) 6%, transparent),
      0 0 0 1.5px transparent,
      0 0 0 var(--space-16) transparent;
  }
}

/* ── Guia: o que abre o item (ícone em tecla, miniatura com selo ou anel de andamento) ───────────────────────── */
.fk-centralnotificacoes__guia {
  position: relative;
  width: var(--fk-centralnotificacoes-guia);
  height: var(--fk-centralnotificacoes-guia);
}
.fk-centralnotificacoes__guia--miniatura { height: var(--space-48); }
/* Ícone de 16 px numa tecla de 36 px, raio 11; a cor é a do fato (sucesso, aviso, erro), nunca o fundo. */
.fk-centralnotificacoes__icone {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--fk-centralnotificacoes-guia);
  border-radius: var(--radius-11);
  color: var(--texto-link);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.fk-centralnotificacoes__icone--sucesso { color: var(--sucesso); }
.fk-centralnotificacoes__icone--aviso { color: var(--aviso); }
.fk-centralnotificacoes__icone--erro { color: var(--erro); }
/* Miniatura 3:4 (36 × 48), raio 9, com filete de 9 % e reflexo de 8 % no alto; sombra local do canvas .cth. */
.fk-centralnotificacoes__miniatura {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-9);
  background: var(--midia-fundo);
  box-shadow: var(--fk-centralnotificacoes-sombra-miniatura);
}
.fk-centralnotificacoes__miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fk-centralnotificacoes__miniatura::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 8%, transparent), transparent 35%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 9%, transparent);
}
/* Selo no canto da miniatura: 18 px (--space-18), com o visto (sucesso) ou a exclamação (erro) de 10 px.
   O canvas usa #2c2c31 → #1d1d21 e um aro #19191c; aqui --ref-base → --casca-topo e o aro --casca-compacta-meio
   (cada um a 1 ponto do original). */
.fk-centralnotificacoes__selo {
  position: absolute;
  right: calc(var(--space-6) * -1);
  bottom: calc(var(--space-5) * -1);
  display: grid;
  place-items: center;
  width: var(--space-18);
  height: var(--space-18);
  border-radius: var(--radius-circulo);
  color: var(--texto-link);
  background: linear-gradient(180deg, var(--ref-base), var(--casca-topo));
  box-shadow: var(--fk-centralnotificacoes-sombra-selo);
}
.fk-centralnotificacoes__selo--sucesso { color: var(--sucesso); }
.fk-centralnotificacoes__selo--erro { color: var(--erro); }
/* Anel de andamento: poço redondo de 36 px com o arco lima (o SVG traz trilho e arco; r 15,5, traço 3, 97,39 de
   perímetro) e o ícone de Trocar no meio, em --texto-hover (o canvas usa #e4e4e8). */
.fk-centralnotificacoes__anel {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--fk-centralnotificacoes-guia);
  height: var(--fk-centralnotificacoes-guia);
  border-radius: var(--radius-circulo);
  color: var(--texto-hover);
  background: var(--poco);
  box-shadow: var(--shadow-poco-trilho);
}
.fk-centralnotificacoes__anel-arco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.fk-centralnotificacoes__anel-trilho { fill: none; stroke: color-mix(in srgb, var(--branco) 10%, transparent); }
/* O arco brilha em lima a 70 % (entre --lima-brilho e --lima-halo) e anda em 200 ms lineares a cada passo. */
.fk-centralnotificacoes__anel-valor {
  fill: none;
  stroke: var(--lima);
  stroke-linecap: round;
  filter: var(--fk-centralnotificacoes-brilho-arco);
  transition: stroke-dashoffset var(--duracao-rapida) var(--curva-linear);
}

/* ── Texto: título, descrição (até 2 linhas), hora e ação ───────────────────────────────────────────────────── */
.fk-centralnotificacoes__texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
/* Título 600 12,5 px: lido em --texto-icone (10,8:1), não lido e em andamento em --texto-aceso (13:1 ou mais). */
.fk-centralnotificacoes__item-titulo {
  margin: 0;
  color: var(--texto-icone);
  font: 600 12.5px/1.35 var(--font-texto);
  transition: color var(--duracao-cor) var(--curva-opacidade);
}
/* Descrição 500 12 px, cortada em 2 linhas: lida em --texto-controle (5,2:1), não lida em --texto-unidade (6,6:1). */
.fk-centralnotificacoes__descricao {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--texto-controle);
  font: 500 12px/1.45 var(--font-texto);
  text-wrap: pretty;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color var(--duracao-cor) var(--curva-opacidade);
}
:is(.fk-centralnotificacoes__item--nao-lida, .fk-centralnotificacoes__item--andamento) .fk-centralnotificacoes__item-titulo { color: var(--texto-aceso); }
:is(.fk-centralnotificacoes__item--nao-lida, .fk-centralnotificacoes__item--andamento) .fk-centralnotificacoes__descricao { color: var(--texto-unidade); }
.fk-centralnotificacoes__meta {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-5);
}
/* Hora relativa em Space Grotesk tabular (o canvas usa #7f7f86; --texto-controle pelo contraste, como na data). */
.fk-centralnotificacoes__hora {
  color: var(--texto-controle);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ação: um só controle por item, e o ::after dele cobre o item inteiro (o card todo é clicável). A seta anda 2 px. */
.fk-centralnotificacoes__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--texto-icone);
  font: 600 11.5px/1 var(--font-texto);
  text-decoration: none;
  transition: color var(--duracao-hover);
}
.fk-centralnotificacoes__acao > svg { flex: none; transition: transform calc(var(--duracao-hover) + var(--duracao-rapida)) var(--curva-casa); }
.fk-centralnotificacoes__acao::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius-14);
}
.fk-centralnotificacoes__item:hover .fk-centralnotificacoes__acao { color: var(--branco); }
.fk-centralnotificacoes__item:hover .fk-centralnotificacoes__acao > svg { transform: translateX(var(--space-2)); }
/* O anel de foco vai para o item inteiro (o ::after), não para o texto da ação. */
.fk-centralnotificacoes__acao:focus-visible { outline: 0; }
.fk-centralnotificacoes__acao:focus-visible::after { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }

/* Ponto de não lida: 7 px claro com brilho de 60 %, no alto à direita; entra em escala. */
.fk-centralnotificacoes__ponto {
  position: absolute;
  top: var(--fk-centralnotificacoes-ponto-alto);
  right: var(--space-13);
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-circulo);
  background: var(--pilula);
  box-shadow: var(--fk-centralnotificacoes-brilho-ponto);
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--duracao-curta) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-centralnotificacoes__item--nao-lida .fk-centralnotificacoes__ponto { opacity: 1; transform: none; }
.fk-centralnotificacoes__item--andamento .fk-centralnotificacoes__ponto { display: none; }

/* Porcentagem do andamento: Space Grotesk 600 15 px tabular; o "%" em 10,5 px e --texto-unidade (o canvas usa #a1a1a7). */
.fk-centralnotificacoes__porcentagem {
  align-self: center;
  color: var(--texto-titulo);
  font: 600 15px/1 var(--font-display);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.fk-centralnotificacoes__porcentagem small { margin-left: var(--space-1); color: var(--texto-unidade); font-size: 10.5px; }

/* Texto só para leitor de tela ("Não lida: " antes do título; o anúncio das mudanças de estado). */
.fk-centralnotificacoes__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Vazio: "Você está em dia." em módulo, sobre a lista de Não lidas ───────────────────────────────────────── */
/* Vai no mesmo elemento que .fk-modulo. Aparece depois que as linhas recolhem: 850 ms de espera
   (--duracao-central-abre), opacidade e desfoque em 500 ms, posição em 800 ms (2 × --duracao-contador).
   Some em 250 ms (--duracao-cor) e 500 ms. Desfoque de 8 px = --desfoque-saida. */
.fk-centralnotificacoes__vazio {
  position: absolute;
  top: var(--fk-centralnotificacoes-guia);
  left: var(--space-12);
  right: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-30) var(--space-26) var(--space-24);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-14));
  filter: blur(var(--desfoque-saida));
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    filter var(--duracao-cor) var(--curva-opacidade),
    visibility 0s var(--curva-linear) var(--duracao-central-fecha);
}
.fk-centralnotificacoes__vazio--visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-central-abre),
    transform calc(var(--duracao-contador) * 2) var(--curva-casa) var(--duracao-central-abre),
    filter var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-central-abre),
    visibility 0s;
}
/* Knob de 42 px (--tamanho-tecla + --space-12) com a bandeja de 18 px. */
.fk-centralnotificacoes__vazio-icone.fk-botaoredondo {
  width: var(--fk-centralnotificacoes-knob);
  height: var(--fk-centralnotificacoes-knob);
}
.fk-centralnotificacoes__vazio-titulo {
  margin: var(--space-6) 0 0;
  color: var(--texto-forte);
  font: 600 16px/1.2 var(--font-display);
}
.fk-centralnotificacoes__vazio-texto {
  margin: 0 0 var(--space-6);
  color: var(--texto-apoio);
  font: 500 12.5px/1.5 var(--font-texto);
  text-wrap: pretty;
}
/* "Ver todas": tecla de 34 px (a tecla de 30 + 4) com 14 px de lado. */
.fk-tecla.fk-centralnotificacoes__vazio-acao { height: var(--fk-centralnotificacoes-tecla-vazio); padding: 0 var(--space-14); }

/* ═══ Celular: folha que sobe da borda de baixo ═══════════════════════════════════════════════════════════════ */
/* Camada recortada onde a folha anda: fechada abaixo da borda, nunca soma ao transbordo da tela. */
.fk-centralnotificacoes__camada {
  position: absolute;
  inset: 0;
  z-index: var(--camada-central);
  overflow: clip;
  pointer-events: none;
}
/* Véu da folha: o mesmo --veu-central, com desfoque de 6 px (2 × --desfoque-dica); o canvas usa rgba(4,4,5,.45). */
.fk-centralnotificacoes__veu--folha {
  -webkit-backdrop-filter: blur(var(--fk-centralnotificacoes-desfoque));
  backdrop-filter: blur(var(--fk-centralnotificacoes-desfoque));
  transition: opacity var(--duracao-central-fecha) var(--curva-opacidade), visibility 0s;
}
.fk-centralnotificacoes__veu--folha.fk-centralnotificacoes__veu--recolhido {
  transition: opacity var(--duracao-media) var(--curva-opacidade), visibility 0s var(--curva-linear) var(--duracao-media);
}
/* A folha: de ponta a ponta, do pé até 92 px do alto (topo do celular 62 + 30), raio 28 só em cima, sombra para
   cima. Abre em 900 ms (--duracao-dialogo) na curva da casa; recolhe 40 px além da borda em 500 ms acelerando. */
.fk-centralnotificacoes--folha {
  position: absolute;
  top: calc(var(--tamanho-topo-celular) + var(--space-30));
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  pointer-events: auto;
  border-radius: var(--radius-28) var(--radius-28) 0 0;
  box-shadow: var(--shadow-folha);
  transition: transform var(--duracao-dialogo) var(--curva-casa), visibility 0s;
}
:is(.fk-centralnotificacoes--folha.fk-centralnotificacoes--recolhida, .fk-centralnotificacoes--folha[aria-hidden="true"]) {
  transform: translateY(calc(100% + var(--space-40)));
  transition: transform var(--duracao-central-fecha) var(--curva-recolher), visibility 0s var(--curva-linear) var(--duracao-central-fecha);
}
/* Na folha nada entra pela direita: os itens sobem (abaixo). */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__cascata { opacity: 1; transform: none; filter: none; transition: none; }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__cabecalho {
  display: block;
  padding: 0 var(--space-16);
  touch-action: none;
}
/* Alça: alvo de 30 px na largura toda; o traço de 40 × 5 px é um poço que alarga para 52 px sob o ponteiro (300 ms). */
.fk-centralnotificacoes__alca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--space-30);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.fk-centralnotificacoes__alca::before {
  content: '';
  display: block;
  width: var(--space-40);
  height: var(--space-5);
  border-radius: var(--radius-pilula);
  background: var(--poco);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg) 85%, transparent), 0 1px 0 color-mix(in srgb, var(--branco) 8%, transparent);
  transition: width var(--duracao-curta) var(--curva-casa);
}
.fk-centralnotificacoes__alca:hover::before { width: var(--fk-centralnotificacoes-mascara); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__titulos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-4);
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__titulo {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.025em;
}
/* Marcar tudo como lido vira tecla de 32 px no celular; sem nada não lido, 42 % (canvas .cmark.is-off). */
.fk-tecla.fk-centralnotificacoes__marcar {
  height: var(--tamanho-alvo);
  padding: 0 var(--space-11) 0 var(--space-10);
  font-size: 11.5px;
}
.fk-tecla.fk-centralnotificacoes__marcar:is(:disabled, [aria-disabled="true"]) { opacity: .42; }
/* Abas de 36 px na largura toda, 16 px abaixo do título. */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__abas { width: auto; margin-top: var(--space-16); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__abas .fk-seg__opcao {
  height: var(--fk-centralnotificacoes-guia);
  gap: var(--space-7);
  font-size: 12.5px;
}
/* Na folha a contagem é sempre a pílula clara, com raio 6 e 600 10 px; some em escala (.4) quando zera. */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__contagem {
  min-width: 0;
  border-radius: var(--radius-6);
  color: var(--tinta-pilula);
  background: var(--pilula);
  font-size: 10px;
  letter-spacing: .02em;
  transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-cor) var(--curva-opacidade);
}
.fk-centralnotificacoes__contagem--vazia { opacity: 0; transform: scale(.4); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__corpo { margin-top: var(--space-4); overflow: clip; }
/* Lista: 16 px dos lados, pé com a área segura; a máscara apaga 14 px no alto e 44 px no pé. */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__lista {
  padding: var(--space-4) var(--space-16) calc(var(--fk-centralnotificacoes-guia) + env(safe-area-inset-bottom, 0px));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--bg) var(--space-14), var(--bg) calc(100% - var(--fk-centralnotificacoes-pe)), transparent);
  mask-image: linear-gradient(180deg, transparent 0, var(--bg) var(--space-14), var(--bg) calc(100% - var(--fk-centralnotificacoes-pe)), transparent);
}
/* Linhas da folha: abrem e fecham a altura em 550 ms (--duracao-media + --duracao-pressao), sem atrasos. */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__linha,
.fk-centralnotificacoes--folha .fk-centralnotificacoes__linha--fora {
  transition: grid-template-rows calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa), opacity var(--duracao-contador) var(--curva-opacidade), visibility 0s;
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__linha-miolo { overflow: hidden; }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__linha-miolo > .fk-centralnotificacoes__cascata { padding-bottom: 0; }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__grupo { display: flex; margin: var(--space-14) var(--space-2) var(--space-10); padding: 0; }
/* Item da folha: é o módulo (raio 16, padding 12), 8 px entre um e outro; o não lido só muda o texto. */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__item,
.fk-centralnotificacoes--folha .fk-centralnotificacoes__item--nao-lida,
.fk-centralnotificacoes--folha .fk-centralnotificacoes__item:hover {
  margin: 0 0 var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-16);
  background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base));
  box-shadow: var(--shadow-modulo);
}
/* Os itens sobem 22 px de um desfoque de 10 px (--desfoque-vidro) a cada abertura, em 800 ms, com o atraso da linha. */
.fk-centralnotificacoes--folha:not(.fk-centralnotificacoes--recolhida, [aria-hidden="true"]) .fk-centralnotificacoes__item {
  animation: fk-centralnotificacoes-sobe calc(var(--duracao-contador) * 2) var(--curva-casa) var(--fk-centralnotificacoes-atraso, 0ms) backwards;
}
@keyframes fk-centralnotificacoes-sobe {
  from { opacity: 0; transform: translateY(var(--space-22)); filter: blur(var(--desfoque-vidro)); }
}
/* Item que abre um destino inteiro: a cobertura (<a>) é o alvo; o item afunda a 99 % ao tocar. */
.fk-centralnotificacoes__cobertura {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.fk-centralnotificacoes__item--clicavel { transition: box-shadow var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-rapida) var(--curva-casa); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__item--clicavel:hover { box-shadow: var(--shadow-modulo-hover); }
.fk-centralnotificacoes__item--clicavel:active { transform: scale(.99); }
/* Guia da folha: ícone em --texto-icone; mídia em poço com --shadow-miniatura, raio 8; vídeo 9:16 com 64 px. */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__icone { color: var(--texto-icone); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__icone--sucesso { color: var(--sucesso); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__icone--aviso { color: var(--aviso); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__icone--erro { color: var(--erro); }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__miniatura { border-radius: var(--radius-8); background: var(--poco); box-shadow: var(--shadow-miniatura); }
.fk-centralnotificacoes__guia--video { height: var(--space-64); }
/* Cabeça do item na folha: título à esquerda, hora (com o ponto antes) à direita. */
.fk-centralnotificacoes__item-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__texto { display: block; }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__item-titulo {
  min-width: 0;
  color: var(--texto-leitura);
  font-size: 13px;
  line-height: 1.3;
  transition-duration: var(--duracao-media);
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__descricao {
  display: block;
  margin-top: var(--space-3);
  overflow: visible;
  transition-duration: var(--duracao-media);
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__item--nao-lida .fk-centralnotificacoes__item-titulo { color: var(--texto-aceso); }
.fk-centralnotificacoes__item-topo .fk-centralnotificacoes__hora {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-6);
  height: var(--fk-centralnotificacoes-linha);
}
/* O ponto dentro da hora: escondido, ele recolhe a própria margem (-13 px = 7 + 6 do vão) e a hora encosta na borda. */
.fk-centralnotificacoes__hora .fk-centralnotificacoes__ponto {
  position: static;
  display: block;
  margin: 0 calc(var(--space-13) * -1) 0 0;
  box-shadow: var(--fk-centralnotificacoes-brilho-ponto-folha);
  transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-curta) var(--curva-opacidade), margin var(--duracao-media) var(--curva-casa);
}
.fk-centralnotificacoes__item--nao-lida .fk-centralnotificacoes__hora .fk-centralnotificacoes__ponto { margin: 0; }
/* Ações da folha: teclas de 28 px, raio 8, 11,5 px, 10 px abaixo do texto. */
.fk-centralnotificacoes__acoes { display: flex; gap: var(--space-8); margin-top: var(--space-10); }
.fk-tecla.fk-centralnotificacoes__tecla {
  position: relative;
  z-index: 3;
  height: var(--fk-centralnotificacoes-tecla-folha);
  padding: 0 var(--space-11);
  border-radius: var(--radius-8);
  font-size: 11.5px;
}
/* Vazio da folha: no fluxo, 64 px do alto, knob de 46 px com o visto em --sucesso, título de 18 px, texto em 30 ch.
   Aparece depois de 300 ms (--duracao-curta); some em 200 ms e 400 ms (--duracao-contador). */
.fk-centralnotificacoes--folha .fk-centralnotificacoes__vazio {
  position: static;
  padding: var(--space-64) var(--space-28) var(--space-24);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--duracao-contador) var(--curva-casa),
    filter var(--duracao-rapida) var(--curva-opacidade),
    visibility 0s var(--curva-linear) var(--duracao-contador);
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__vazio--visivel {
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-curta),
    transform calc(var(--duracao-contador) * 2) var(--curva-casa) var(--duracao-curta),
    filter var(--duracao-central-fecha) var(--curva-opacidade) var(--duracao-curta),
    visibility 0s;
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__vazio-icone.fk-botaoredondo {
  width: var(--fk-centralnotificacoes-knob-folha);
  height: var(--fk-centralnotificacoes-knob-folha);
  color: var(--sucesso);
}
.fk-centralnotificacoes--folha .fk-centralnotificacoes__vazio-titulo { font-size: 18px; letter-spacing: -.015em; }
.fk-centralnotificacoes--folha .fk-centralnotificacoes__vazio-texto { max-width: 30ch; }

/* ── No app: véu, painel e camada fixos na janela ─────────────────────────────────────────────────────────────── */
/* As regras acima usam position: absolute, que serve a pranchetas e prévias (o contêiner posicionado é a cena). Numa
   página que rola, use os modificadores fixos: o véu cobre a janela inteira e a central não rola com o conteúdo. */
.fk-centralnotificacoes__veu--fixo,
.fk-centralnotificacoes--ancorada.fk-centralnotificacoes--fixa,
.fk-centralnotificacoes__camada--fixa { position: fixed; }

/* ── Menos movimento: o painel e a folha aparecem e somem no lugar; nada desliza, sobe, recolhe nem pulsa. ────── */
@media (prefers-reduced-motion: reduce) {
  .fk-centralnotificacoes,
  .fk-centralnotificacoes *,
  .fk-centralnotificacoes::after,
  .fk-centralnotificacoes *::before,
  .fk-centralnotificacoes *::after,
  .fk-centralnotificacoes__veu {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  :is(.fk-centralnotificacoes--recolhida, .fk-centralnotificacoes[aria-hidden="true"]),
  :is(.fk-centralnotificacoes--recolhida, .fk-centralnotificacoes[aria-hidden="true"]) .fk-centralnotificacoes__cascata,
  .fk-centralnotificacoes__lista--oculta,
  .fk-centralnotificacoes__vazio { transform: none; filter: none; }
}

/* Source: ChipVidro.css */
/* Fenaky Design System · ChipVidro — o chip de vidro fosco que fica por cima de foto e vídeo: duração, formato,
   1080p, nome do personagem, "Pronto", "Escolhendo", "Ver folha completa", o número do slot e os botões redondos só
   de ícone. O material (véu, desfoque de 10 px, filete interno, Space Grotesk 600 11 px) é a primitiva .fk-vidro de
   00-base.css; este arquivo acrescenta tamanhos, pontos vivos, avatar, espiada, aviso, ação, posições, revelação no
   hover e a chegada do personagem.
   Fontes: .glass em Main, Assets, Notificacoes, Ajuda, Avatares, Home, HomeMobile, NotificacoesMobile, Resultado,
   Sobre, TrocarHorizontal, GingaHorizontal, Ginga, CriarMobile, Motion, Redes, Planos e PlanoResumo; .wait em Assets. */

/* ── Bloco: sempre junto de .fk-vidro (class="fk-vidro fk-chipvidro") ─────────────────────────────────────────── */
.fk-vidro.fk-chipvidro {
  flex: none;
  max-width: 100%;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
}
.fk-chipvidro > svg { flex: none; }
/* Texto que pode não caber (nome do arquivo, resumo do pedido): corta com reticências (Main .pname, Motion .chips). */
.fk-chipvidro__texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tamanhos. 26 px é o da primitiva; 22 px é .fk-vidro--sm (00-base). ──────────────────────────────────────── */
/* 24 px: miniaturas da biblioteca, nome no card de retrato, "Baixar vídeo", chips do player compacto
   (Assets, Notificacoes, TrocarHorizontal, GingaHorizontal, Main .pname, Ajuda .r-dl). Sem token de 24 px de vidro:
   --tamanho-vidro menos --space-2. */
.fk-chipvidro--md {
  height: calc(var(--tamanho-vidro) - var(--space-2));
  padding: 0 var(--space-9);
  font-size: 10.5px;
}
/* 20 px: selo "Nova" no trilho, duração na grade de três, 1080p dentro da tabela de Planos
   (GingaHorizontal .tnew, CriarMobile .g3 .dur, Planos e PlanoResumo .tbl th .glass): --tamanho-vidro-sm menos --space-2. */
.fk-chipvidro--xs {
  height: calc(var(--tamanho-vidro-sm) - var(--space-2));
  padding: 0 var(--space-7);
  font-size: 10px;
}
/* Ao lado de texto corrido, numa célula de tabela (Planos .tbl tbody th .glass): 6 px de folga, 1 px acima
   (vertical-align: 1px no canvas; é um deslocamento, por isso o token de espaço de 1 px). */
.fk-chipvidro--em-linha { margin-left: var(--space-6); vertical-align: var(--space-1); }

/* ── Só ícone: redondo, ícone no centro (HomeMobile .pexp, Resultado .tplay 26 px e .xp 28 px) ──────────────── */
.fk-chipvidro--icone {
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
}
.fk-chipvidro--icone.fk-chipvidro--lg {
  width: var(--tamanho-botao-redondo);
  height: var(--tamanho-botao-redondo);
}

/* ── Número do slot (Sobre .cn): 20 px, no mínimo redondo, número centrado ───────────────────────────────────── */
.fk-chipvidro--numero {
  justify-content: center;
  min-width: calc(var(--tamanho-vidro-sm) - var(--space-2));
  height: calc(var(--tamanho-vidro-sm) - var(--space-2));
  padding: 0 var(--space-6);
  font-size: 10.5px;
}

/* ── Ponto vivo: lima que pisca enquanto o vídeo é gerado (Assets e Notificacoes .livedot) ─────────────────────── */
/* Diâmetro de 6 px e brilho de 8 px pelos tokens de espaço, como o ponto do Selo (.fk-selo__ponto): a família
   tamanho não tem medida de ponto. */
.fk-chipvidro__ponto {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circulo);
  background: var(--lima);
  /* rgba(215,255,63,.9) do canvas = o lima a 90%. */
  box-shadow: 0 0 var(--space-8) color-mix(in srgb, var(--lima) 90%, transparent);
  /* 1,4 s no canvas; sem token: a mesma expressão do Selo (.fk-selo__ponto), --duracao-giro × 1,4. */
  animation: fk-chipvidro-pisca calc(var(--duracao-giro) * 1.4) ease-in-out infinite;
}
@keyframes fk-chipvidro-pisca { 50% { opacity: .35; } }

/* ── Escolhendo: o slot que está sendo trocado (TrocarHorizontal .choosing.glass) ─────────────────────────────── */
.fk-chipvidro--escolhendo {
  gap: var(--space-5);
  height: calc(var(--tamanho-vidro-sm) - var(--space-2));
  padding: 0 var(--space-7);
  font-size: 9.5px;
  letter-spacing: .02em;
}
/* Ponto branco de 5 px com brilho rgba(255,255,255,.8) (= branco a 80%) e piscar mais fundo (.25). */
.fk-chipvidro--escolhendo .fk-chipvidro__ponto {
  width: var(--space-5);
  height: var(--space-5);
  background: var(--texto-forte);
  box-shadow: 0 0 var(--space-6) color-mix(in srgb, var(--branco) 80%, transparent);
  animation-name: fk-chipvidro-pisca-fundo;
}
@keyframes fk-chipvidro-pisca-fundo { 50% { opacity: .25; } }

/* ── Giro: ícone de espera que gira (Assets .wait .spin, 1 s linear) ───────────────────────────────────────────── */
.fk-chipvidro__giro { animation: fk-chipvidro-gira var(--duracao-giro) var(--curva-linear) infinite; }
@keyframes fk-chipvidro-gira { to { transform: rotate(360deg); } }

/* ── Avatar: o personagem escolhido marcado no quadro pronto (Ajuda .r-who) ────────────────────────────────────── */
.fk-chipvidro--avatar {
  gap: var(--space-5);
  height: var(--tamanho-vidro-sm);
  padding: 0 var(--space-8) 0 var(--space-3);
  font-size: 10px;
}
.fk-chipvidro__avatar {
  display: block;
  flex: none;
  /* 16 px: o rosto ocupa a altura do chip de 22 px menos 3 px em cima e embaixo (o mesmo respiro da esquerda). */
  width: calc(var(--tamanho-vidro-sm) - 2 * var(--space-3));
  height: calc(var(--tamanho-vidro-sm) - 2 * var(--space-3));
  border-radius: var(--radius-circulo);
  object-fit: cover;
  /* rgba(0,0,0,.5) do canvas, o mesmo valor de --divisor-sombra. */
  box-shadow: 0 0 0 var(--space-1) var(--divisor-sombra);
}

/* ── Espiada: nome forte, ponto e ação ("Juno · Ver folha"), no card de Avatares (.peek) ──────────────────────── */
.fk-chipvidro--espiada { padding: 0 var(--space-11) 0 var(--space-12); }
.fk-chipvidro__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--branco);
  font: 600 12px/1 var(--font-display);
  letter-spacing: -.01em;
}
/* Ponto de 3 px rgba(255,255,255,.4) (= branco a 40%). */
.fk-chipvidro__sep {
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-circulo);
  background: color-mix(in srgb, var(--branco) 40%, transparent);
}
/* #d2d2d6 no canvas; sem token: --texto-icone (#cfcfd4), o vizinho mais próximo. */
.fk-chipvidro__acao { color: var(--texto-icone); font-weight: 500; }

/* ── Aviso: a espera do 1080p ("Finalizando 1080p", Assets .wait) ──────────────────────────────────────────────── */
/* Fundo rgba(58,46,26,.86) = --aviso-fundo a 86%; filete rgba(242,207,150,.24) = --aviso a 24%. */
.fk-vidro.fk-chipvidro--aviso {
  color: var(--aviso);
  background: color-mix(in srgb, var(--aviso-fundo) 86%, transparent);
  box-shadow: inset 0 0 0 var(--space-1) color-mix(in srgb, var(--aviso) 24%, transparent);
}

/* ── Como controle (<button> ou <a>): o véu escurece; o redondo cresce 10% (Resultado .tile:hover .xp, 400 ms e
   200 ms); o de texto afunda 1 px no :active (NotificacoesMobile .tck:active). O hover só existe onde há ponteiro
   (@media (hover: hover), como em PlanosMobile), para o véu não ficar preso escuro depois de um toque. O aviso
   guarda a própria tinta: não escurece no hover. ──────────────────────────────────────────────────────────────── */
:is(button, a).fk-chipvidro {
  cursor: pointer;
  transition: transform var(--duracao-contador) var(--curva-casa), background-color var(--duracao-rapida);
}
@media (hover: hover) {
  /* rgba(10,10,12,.72) do canvas: --veu-vidro (alfa .5) com 44% de --bg dá alfa .72 no mesmo tom. */
  :is(button, a).fk-chipvidro:not(.fk-chipvidro--aviso):hover { background-color: color-mix(in srgb, var(--veu-vidro) 56%, var(--bg)); }
  /* scale(1.1) é o valor de Resultado .xp; não há token de escala. */
  :is(button, a).fk-chipvidro--icone:hover { transform: scale(1.1); }
}
:is(button, a).fk-chipvidro:not(.fk-chipvidro--icone):active { transform: translateY(var(--space-1)); }

/* ── Posições sobre a mídia (o pai é position: relative; overflow: hidden). 8 px da borda, como Resultado .xp e
   .tplay, HomeMobile .pexp, Main .pname e Ajuda .r-who; o pai cuida da camada se tiver vídeo de hover por cima.
   Main .dur fica a 10 px da direita e 13 px da base, e Assets a 9 px do lado e 10 px da base: o sistema
   consolida em 8 px (padrão) e 10 px (--folga-10). ──────────────────────────────────────────────────────────── */
.fk-chipvidro--topo-esq { position: absolute; left: var(--space-8); top: var(--space-8); }
.fk-chipvidro--topo-dir { position: absolute; right: var(--space-8); top: var(--space-8); }
.fk-chipvidro--base-esq { position: absolute; left: var(--space-8); bottom: var(--space-8); }
.fk-chipvidro--base-dir { position: absolute; right: var(--space-8); bottom: var(--space-8); }
/* Centrado sem transform (TrocarHorizontal .choosing: left 0, right 0, margin auto), para a revelação poder mover. */
.fk-chipvidro--base-centro { position: absolute; left: 0; right: 0; bottom: var(--space-10); width: fit-content; margin: 0 auto; }
/* "Escolhendo" no slot fica mais baixo: 6 px da base (TrocarHorizontal .choosing). */
.fk-chipvidro--escolhendo.fk-chipvidro--base-centro { bottom: var(--space-6); }
.fk-chipvidro--centro { position: absolute; inset: 0; width: fit-content; margin: auto; }
/* Nome no card: no máximo a largura do card menos as duas folgas (Main .pname: calc(100% - 16px)). */
.fk-chipvidro--topo-esq, .fk-chipvidro--topo-dir, .fk-chipvidro--base-esq, .fk-chipvidro--base-dir {
  max-width: calc(100% - var(--space-16));
}
/* Folga de 10 px: a dica e a espiada dos cards de retrato (Home, Ajuda, PreviewVideo e FolhaPersonagem .phint;
   Avatares .peek: left/bottom 10 px, max-width calc(100% - 20px)). Junte a um dos quatro cantos. */
.fk-chipvidro--folga-10.fk-chipvidro--topo-esq { left: var(--space-10); top: var(--space-10); max-width: calc(100% - var(--space-20)); }
.fk-chipvidro--folga-10.fk-chipvidro--topo-dir { right: var(--space-10); top: var(--space-10); max-width: calc(100% - var(--space-20)); }
.fk-chipvidro--folga-10.fk-chipvidro--base-esq { left: var(--space-10); bottom: var(--space-10); max-width: calc(100% - var(--space-20)); }
.fk-chipvidro--folga-10.fk-chipvidro--base-dir { right: var(--space-10); bottom: var(--space-10); max-width: calc(100% - var(--space-20)); }

/* Fila de chips no alto do player: resumo à esquerda, estado à direita (Main, Assets, Motion .chips). */
.fk-chipvidro__fila {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  top: var(--space-16);
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  pointer-events: none;
}
.fk-chipvidro__fila > .fk-chipvidro { min-width: 0; }

/* ── Revelar: some até o ponteiro ou o foco chegar ao card (pai direto), ou até o card ficar escolhido.
   Home e Ajuda .phint, Avatares .peek: 6 px, opacidade 300 ms ease, movimento 500 ms na curva da casa.
   Sem ponteiro (toque) não há hover: o chip fica sempre à mostra, como o .pexp de HomeMobile. ────────────────── */
.fk-chipvidro--revelar {
  opacity: 0;
  transform: translateY(var(--space-6));
  transition: opacity var(--duracao-curta) var(--curva-opacidade), transform var(--duracao-central-fecha) var(--curva-casa);
}
:where(:focus-visible, :focus-within, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) > .fk-chipvidro--revelar,
.fk-chipvidro--revelar.fk-chipvidro--visivel {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  :where(:hover) > .fk-chipvidro--revelar { opacity: 1; transform: none; }
}
@media (hover: none) {
  .fk-chipvidro--revelar { opacity: 1; transform: none; }
}

/* ── Entrada: o chip chega com o card novo (Notificacoes .acard.fresh .glass, capIn): sobe 6 px e desembaça 4 px em
   600 ms na curva da casa. O atraso (550 ms no canvas) é do consumidor. ─────────────────────────────────────────── */
.fk-chipvidro--entrada { animation: fk-chipvidro-entra var(--duracao-deslize) var(--curva-casa) backwards; }
@keyframes fk-chipvidro-entra { from { opacity: 0; transform: translateY(var(--space-6)); filter: blur(var(--desfoque-texto)); } }

/* ── Chegou: o personagem trocado é marcado no quadro pronto (Ajuda .ph-done .r-who). O chip pulsa 12%, o avatar
   estoura de 55% a 120% e um anel de 1,5 px sai do chip. Canvas: pulso .6 s após .85 s, avatar .7 s após .55 s,
   anel 1,1 s após .9 s; aqui com os tokens vizinhos (560, 850 e 900 ms; 1,1 s = --duracao-giro + --duracao-pressao).
   A curva do anel é cubic-bezier(.2,.7,.2,1); --curva-troca (.2,.7,.3,1) é a mais próxima. ─────────────────────── */
.fk-chipvidro--chegou { animation: fk-chipvidro-pulsa var(--duracao-deslize) var(--curva-casa) var(--duracao-central-abre); }
.fk-chipvidro--chegou .fk-chipvidro__avatar { animation: fk-chipvidro-estoura var(--duracao-zoom) var(--curva-casa) var(--duracao-escalonamento-teto) both; }
.fk-chipvidro--chegou::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* rgba(242,242,244,.75): --texto-forte com a opacidade do quadro multiplicada por .75 no keyframe.
     Anel de 1,5 px = metade de --tamanho-trilho (3 px). */
  box-shadow: 0 0 0 calc(var(--tamanho-trilho) / 2) var(--texto-forte);
  opacity: 0;
  pointer-events: none;
  animation: fk-chipvidro-anel calc(var(--duracao-giro) + var(--duracao-pressao)) var(--curva-troca) var(--duracao-dialogo);
}
.fk-chipvidro--chegou:not([class*="fk-chipvidro--topo"], [class*="fk-chipvidro--base"], .fk-chipvidro--centro) { position: relative; }
@keyframes fk-chipvidro-pulsa { 0% { transform: none; } 40% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes fk-chipvidro-estoura { 0% { transform: scale(.55); } 55% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes fk-chipvidro-anel { 0% { opacity: .675; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22, 1.65); } }

/* ── Menos movimento: nada pisca, gira, sobe ou pulsa; a revelação vira corte seco. ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Mesma especificidade das regras que animam, para vencer :is(button, a).fk-chipvidro (0,1,1). */
  :is(button, a).fk-chipvidro, .fk-chipvidro--revelar { transition: none; }
  :is(button, a).fk-chipvidro:not(.fk-chipvidro--icone):active { transform: none; }
  .fk-chipvidro__ponto, .fk-chipvidro__giro, .fk-chipvidro--entrada, .fk-chipvidro--chegou,
  .fk-chipvidro--chegou .fk-chipvidro__avatar, .fk-chipvidro--chegou::after { animation: none; }
  .fk-chipvidro--revelar { transform: none; }
  :is(button, a).fk-chipvidro--icone:hover { transform: none; }
}

/* Source: Comparador.css */
/* Fenaky Design System · Comparador — antes e depois de uma troca de personagem: o vídeo gerado embaixo (dono do som,
   do tempo e do laço) e o trecho original por cima, cortado por uma costura de luz suave que a pessoa arrasta.
   Fontes: comportamento e geometria de public/before-after.js e before-after.css (app, origin/codex/home-clean-state e
   PR #129); material do quadro e dos controles de Resultado.dc.html (.stage, .ctrl, .seek, .time) e Main.dc.html
   (.frame), onde o comparador de Trocar personagem ocupa o lugar do player (DESIGN.md, Sua criação). O violeta do app
   (aro da alça, brilho da costura e trilho) sai: no canvas aprovado o violeta é só link, foco e Pro, e a luz do player
   é branca (Resultado .trk-h). Usa as primitivas .fk-vidro (etiquetas), .fk-tecla e .fk-botaoredondo (controles). */

/* ── Bloco: largura pela proporção do resultado, limitada por uma altura máxima ──────────────────────────────── */
/* O consumidor define --fk-comparador-razao (largura / altura do vídeo gerado; 9:16 = .5625) e, se quiser, a altura
   máxima. O script mantém --fk-comparador-pos (0 % a 100 %), a pluma e a opacidade das etiquetas. */
.fk-comparador {
  --fk-comparador-razao: .5625;
  --fk-comparador-altura-max: 68dvh;
  --fk-comparador-pos: 50%;
  /* Meia largura da costura suave: 6 % (before-after.css), menor perto das bordas para a mistura não sair do quadro. */
  --fk-comparador-pluma: 6%;
  --fk-comparador-progresso: 0;
  /* Medidas próprias do componente, sem token equivalente; cada uma cita de onde veio. */
  --fk-comparador-largura-min: 240px;   /* before-after.css .ba: espaço mínimo para a linha de controles */
  --fk-comparador-halo: 120px;          /* before-after.css .ba-seam::before */
  --fk-comparador-alca: 46px;           /* before-after.css .ba-handle */
  --fk-comparador-alca-celular: 40px;   /* before-after.css .ba-handle, até 700 px */
  --fk-comparador-botao: 34px;          /* Resultado.dc.html .ctrl .round */
  --fk-comparador-controles-altura: 38px; /* Resultado.dc.html .ctrl */
  --fk-comparador-posicao-altura: 34px; /* Resultado.dc.html .seek */
  /* Recuo da alça nas pontas: meia alça mais o anel de foco (afastamento + traço), para o foco nunca ser cortado. */
  --fk-comparador-alca-recuo: calc(var(--fk-comparador-alca) / 2 + var(--tamanho-foco-afastamento) + var(--tamanho-foco));
  width: min(100%, max(var(--fk-comparador-largura-min), calc(var(--fk-comparador-altura-max) * var(--fk-comparador-razao))));
  margin-inline: auto;
  font-family: var(--font-texto);
}

/* ── Quadro: a moldura do player (raio 24, bisel de 7 px, sombra longa), com grão e fio interno ──────────────── */
/* O quadro ocupa a largura do bloco, então herda o mesmo mínimo de 240 px e fica sempre alinhado com os controles.
   Abaixo desse mínimo (altura-max × razão < 240 px) a altura máxima cede um pouco, em vez de o quadro estreitar. */
.fk-comparador__quadro {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--fk-comparador-razao);
  overflow: hidden;
  border-radius: var(--radius-24);
  background: var(--poco);
  box-shadow: var(--shadow-moldura);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
/* Grão sobre a imagem: o canvas usa .06 no quadro e .075 na casca; o grão do sistema já traz o alfa da casca, então
   aqui fica a .8 dele (.06 / .075). */
.fk-comparador__quadro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao);
  opacity: .8;
}
/* Fio interno de 1 px a 10 % e luz no topo a 20 % (Main .frame::after, Resultado .stage::after). */
.fk-comparador__quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 10%, transparent), inset 0 1px 0 var(--filete-midia-hover);
}

/* As duas camadas preenchem o mesmo quadro, centradas e recortadas como a geração. */
.fk-comparador__depois,
.fk-comparador__antes,
.fk-comparador__vazio {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.fk-comparador__depois { z-index: 0; }
/* O original some no resultado ao longo da costura, sem corte duro: os dois se leem na divisa. A máscara só lê o alfa. */
.fk-comparador__antes {
  z-index: 1;
  -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)));
}

/* ── Costura: um fio de luz branca de 2 px que esmaece nas pontas, com halo largo e baixo ─────────────────────── */
.fk-comparador__costura {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--fk-comparador-pos);
  width: var(--space-2);
  translate: -50% 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--branco) 90%, transparent) 18%, var(--branco) 50%, color-mix(in srgb, var(--branco) 90%, transparent) 82%, transparent);
  /* O brilho da agulha do trecho (Resultado .trk-h: 6 px a 70 %) mais um fio de 2 px. */
  box-shadow: 0 0 6px color-mix(in srgb, var(--branco) 70%, transparent), 0 0 2px var(--branco);
}
.fk-comparador__costura::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--fk-comparador-halo);
  translate: -50% 0;
  background: radial-gradient(calc(var(--space-30) * 2) 70% at 50% 50%, var(--fundo-hover-forte), transparent 70%);
  mix-blend-mode: screen;
}

/* ── Etiquetas Antes / Depois: chips de vidro no alto, que apagam quando a costura chega perto da borda ─────── */
/* Junto de .fk-vidro: 24 px e 10,5 px como a etiqueta sobre mídia de Resultado (.dtag). */
.fk-vidro.fk-comparador__etiqueta {
  position: absolute;
  z-index: 4;
  top: var(--space-12);
  height: calc(var(--tamanho-vidro) - var(--space-2));
  font-size: 10.5px;
  pointer-events: none;
  transition: opacity var(--duracao-rapida) var(--curva-casa);
}
.fk-comparador__etiqueta--antes { left: var(--space-12); opacity: var(--fk-comparador-antes-alfa, 1); }
.fk-comparador__etiqueta--depois { right: var(--space-12); opacity: var(--fk-comparador-depois-alfa, 1); }

/* Selo do resultado (1080p, Finalizando 1080p, Prévia 480p) no canto de baixo, como o .selo de Resultado (14 px). */
.fk-comparador__sobreposto {
  position: absolute;
  z-index: 4;
  left: var(--space-14);
  bottom: var(--space-14);
  pointer-events: none;
}
/* O selo claro do resultado pronto (Resultado .selo): pílula de 26 px, 11 px Space Grotesk, tinta-pilula (16,9:1) e
   sombra de 4/12 px a 45 % (divisor-sombra, 50 %, a 90 %). Vai dentro de __sobreposto. */
.fk-comparador__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--tamanho-vidro);
  padding: 0 var(--space-10);
  border-radius: var(--radius-pilula);
  white-space: nowrap;
  color: var(--tinta-pilula);
  font: 600 11px/1 var(--font-display);
  background: var(--pilula);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--divisor-sombra) 90%, transparent);
}
.fk-comparador__selo > svg { flex: none; }

/* ── Alça: o knob de 46 px no meio da costura, com ícone de duas setas ─────────────────────────────────────── */
/* 46 px do app; 40 px no celular. Material do knob (BotaoRedondo), sem o aro violeta do app: o halo é o da escolha
   (--anel-escolha, 12 %), a 6 px em repouso a metade dele e a 9 px sob o ponteiro.
   A alça acompanha a costura, mas para a um recuo das bordas: em 0 % e 100 % (Home/End) ela e o anel de foco ficam
   inteiros dentro do quadro, enquanto a costura vai até a borda. */
.fk-comparador__alca {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: clamp(var(--fk-comparador-alca-recuo), var(--fk-comparador-pos), 100% - var(--fk-comparador-alca-recuo));
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: var(--fk-comparador-alca);
  height: var(--fk-comparador-alca);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circulo);
  cursor: ew-resize;
  color: var(--texto-icone);
  font-size: 20px;
  background: radial-gradient(circle at 50% 30%, var(--botao-redondo-topo), var(--tecla-base) 70%);
  box-shadow: var(--shadow-botao-redondo), 0 0 0 6px color-mix(in srgb, var(--anel-escolha) 50%, transparent);
  transition: scale var(--duracao-rapida) var(--curva-casa), box-shadow var(--duracao-rapida) var(--curva-casa), color var(--duracao-hover);
}
.fk-comparador__alca > svg { display: block; width: 1em; height: 1em; }
.fk-comparador__alca:hover,
.fk-comparador--arrastando .fk-comparador__alca {
  scale: 1.08;
  color: var(--branco);
  box-shadow: var(--shadow-botao-redondo), 0 0 0 9px var(--anel-escolha);
}

/* ── Controles: reproduzir, posição, tempo e som, embaixo do quadro (Resultado .ctrl) ─────────────────────────── */
.fk-comparador__controles {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  min-width: 0;
  height: var(--fk-comparador-controles-altura);
  margin-top: var(--space-14);
}
/* Teclas redondas de 34 px (Resultado .ctrl .round) sobre .fk-tecla.fk-botaoredondo. */
.fk-comparador__controles .fk-comparador__botao.fk-tecla {
  flex: none;
  width: var(--fk-comparador-botao);
  height: var(--fk-comparador-botao);
}
.fk-comparador__botao > svg { flex: none; pointer-events: none; }

/* Posição: <input type="range"> com o trilho rebaixado de 6 px, o preenchimento claro e o ponto de 12 px.
   O preenchimento guarda sempre a ponta redonda (6 px) embaixo do ponto, então 0:00 não mostra toco. */
.fk-comparador__posicao {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: var(--fk-comparador-posicao-altura);
  margin: 0 var(--space-6);
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.fk-comparador__posicao::-webkit-slider-runnable-track {
  height: var(--space-6);
  border-radius: var(--radius-6);
  background:
    linear-gradient(180deg, var(--texto-aceso), var(--texto-suave)) 0 0 / calc(var(--space-6) + (100% - var(--space-6)) * var(--fk-comparador-progresso)) 100% no-repeat,
    var(--poco);
  box-shadow: var(--shadow-poco);
}
.fk-comparador__posicao::-moz-range-track {
  height: var(--space-6);
  border-radius: var(--radius-6);
  background: var(--poco);
  box-shadow: var(--shadow-poco);
}
.fk-comparador__posicao::-moz-range-progress {
  height: var(--space-6);
  border-radius: var(--radius-6);
  background: linear-gradient(180deg, var(--texto-aceso), var(--texto-suave));
}
.fk-comparador__posicao::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--space-12);
  height: var(--space-12);
  margin-top: calc(var(--space-3) * -1);
  border: 0;
  border-radius: var(--radius-circulo);
  background: var(--texto-aceso);
  box-shadow: 0 0 0 1px var(--sulco-sombra), 0 2px 6px var(--sulco-sombra);
  transition: transform var(--duracao-curta) var(--curva-casa);
}
.fk-comparador__posicao::-moz-range-thumb {
  width: var(--space-12);
  height: var(--space-12);
  border: 0;
  border-radius: var(--radius-circulo);
  background: var(--texto-aceso);
  box-shadow: 0 0 0 1px var(--sulco-sombra), 0 2px 6px var(--sulco-sombra);
  transition: transform var(--duracao-curta) var(--curva-casa);
}
.fk-comparador__posicao:not(:disabled):is(:hover, :active)::-webkit-slider-thumb { transform: scale(1.25); }
.fk-comparador__posicao:not(:disabled):is(:hover, :active)::-moz-range-thumb { transform: scale(1.25); }
.fk-comparador__posicao:disabled { opacity: var(--opacidade-desligado); cursor: default; }

/* Tempo: Space Grotesk 11,5 px, o atual em texto-forte e o total em texto-leitura. Fica sobre a casca: 8,4:1 no
   casca-topo e mais nos tons de baixo (9,4:1 no casca-base); o atual, 15:1 ou mais. */
.fk-comparador__tempo {
  flex: none;
  min-width: 0;
  white-space: nowrap;
  text-align: right;
  color: var(--texto-leitura);
  font: 500 11.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-comparador__tempo b { font-weight: 600; color: var(--texto-forte); }

/* Dica sob o comparador no diálogo do Assets ("Arraste a divisão…"): 11 px em texto-dica (4,6:1 na casca). */
.fk-comparador__dica {
  margin: var(--space-10) 0 0;
  text-align: center;
  color: var(--texto-dica);
  font: 500 11px/1.5 var(--font-texto);
}

/* ── Variantes e estados ─────────────────────────────────────────────────────────────────────────────────────── */
/* Compacto: dentro de um diálogo, o quadro perde o bisel e a sombra longa e fica como a mídia do diálogo (Resultado
   .dmedia: raio 14 e só um anel de 1 px de preto a .8; o fio interno já vem de __quadro::after). O anel a .8 são os
   dois anéis de sombra do sistema empilhados: .6 + .5 × (1 − .6) = .8, a primeira parada de --shadow-moldura. */
.fk-comparador--compacto .fk-comparador__quadro {
  border-radius: var(--radius-14);
  box-shadow: 0 0 0 1px var(--sulco-sombra), 0 0 0 1px var(--divisor-sombra);
}
/* Pendente: a troca ainda não tem resultado. O original ocupa a metade esquerda, com corte seco; a direita fica no
   poço (__vazio) e a costura vira um fio de 1 px a 35 %, sem alça nem arrasto. A marcação do pendente não traz alça
   nem __depois; se vierem (ex.: a mesma marcação do pronto só com a classe trocada), ficam escondidos. */
.fk-comparador--pendente .fk-comparador__quadro { cursor: default; }
.fk-comparador--pendente .fk-comparador__alca,
.fk-comparador--pendente .fk-comparador__depois { display: none; }
.fk-comparador__vazio { z-index: 0; background: var(--poco); }
.fk-comparador--pendente .fk-comparador__antes {
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: inset(0 50% 0 0);
}
.fk-comparador--pendente .fk-comparador__costura {
  left: 50%;
  width: var(--space-1);
  background: color-mix(in srgb, var(--branco) 35%, transparent);
  box-shadow: none;
}
.fk-comparador--pendente .fk-comparador__costura::before { display: none; }
/* Carregando: o original esperando dados fica um pouco mais apagado, sem congelar o resultado. */
.fk-comparador--carregando .fk-comparador__antes { filter: saturate(.85) brightness(.92); }

/* ── Celular: alça de 40 px e ícone de 18 px (before-after.css, até 700 px) ─────────────────────────────────── */
@media (max-width: 700px) {
  .fk-comparador { --fk-comparador-alca: var(--fk-comparador-alca-celular); }
  .fk-comparador__alca { font-size: 18px; }
}

/* ── Menos movimento: a alça e as etiquetas mudam sem transição; o script não faz a varredura de entrada. ────── */
@media (prefers-reduced-motion: reduce) {
  .fk-comparador__alca,
  .fk-vidro.fk-comparador__etiqueta,
  .fk-comparador__posicao::-webkit-slider-thumb { transition: none; }
  /* Em regra própria: um navegador que não conhece o pseudo -moz descartaria a lista inteira. */
  .fk-comparador__posicao::-moz-range-thumb { transition: none; }
  .fk-comparador__alca:hover,
  .fk-comparador--arrastando .fk-comparador__alca { scale: none; }
}

/* Source: Cta.css */
/* Fenaky Design System · Cta — tamanhos, largura, peças internas e estados extras da ação em lima.
   O CTA em si (.fk-cta 50 px, :hover, :active, --ocupado/aria-busy com listras, --silencioso e desligado) é primitiva
   de 00-base.css; aqui ficam só os modificadores e as peças que as pranchas usam além dela. Fontes: Main e Ginga
   (painel: giro, "Ver progresso" com o player fechado), TrocarHorizontal e GingaHorizontal (barra 44 px com separador e
   créditos ao lado; "Baixar vídeo" 40 px no fim), Home, Ajuda, Mais, Influencers, PreviewVideo, Assets, Notificacoes,
   Conta, Suporte, Sobre e Projetos (46 px no topo e nas páginas), NotificacoesCatalogo, Notificacoes e CriarMobile
   (48 px em pop-up e no fim da geração no celular), Termos e Agentes (diálogo 42 px), Termos (34 px no fim do texto),
   PlanoResumo (38 px no Pix), NotificacoesCatalogo (card de canto 36 px), HomeMobile e NotificacoesMobile (52 px no
   celular), Avatares (retrato no CTA), Resultado (chamada ao ficar pronto), Home, Ajuda, FolhaPersonagem e PreviewVideo
   (CTA da página recua quando um diálogo abre).
   Alturas sem token próprio são derivadas de --tamanho-cta (50 px) somando ou subtraindo um --space-*. */

/* ── Largura: ajusta ao conteúdo (o padrão de 00-base ocupa a linha inteira) ─────────────────────────────────────── */
/* Topo e páginas (Conta, Suporte .cta: 0 20): inline-flex com 20 px de cada lado. */
.fk-cta--auto {
  display: inline-flex;
  width: auto;
  padding: 0 var(--space-20);
}
/* Correção óptica do canvas: o ícone pesa mais que a letra, então o lado do ícone leva menos respiro.
   Ícone antes do texto (Assets/Notificacoes "Criar vídeo" com +, 0 20 0 16); ícone depois (Home/Ajuda/Mais/Influencers/
   PreviewVideo/FolhaPersonagem "Criar vídeo ↗", 0 18 0 22). */
.fk-cta--auto.fk-cta--icone-antes { padding: 0 var(--space-20) 0 var(--space-16); }
.fk-cta--auto.fk-cta--icone-depois { padding: 0 var(--space-18) 0 var(--space-22); }

/* ── Tamanhos (o padrão de 50 px, raio 14 e 13,5 px está em 00-base) ──────────────────────────────────────────────── */
/* 52 px: ação principal no celular (HomeMobile e NotificacoesMobile .acts, folha do vídeo). Pressão de toque com
   leve encolhimento (HomeMobile .cta:active). 50 + 2. */
.fk-cta--celular { height: calc(var(--tamanho-cta) + var(--space-2)); }
.fk-cta--celular:active { transform: translateY(1px) scale(.99); }
/* 48 px: ação de pop-up ao lado de uma tecla do mesmo porte (NotificacoesCatalogo .md-a, Notificacoes .mact, flex 1) e
   "Baixar vídeo" no fim da geração no celular (CriarMobile .gdone). Raio e texto do padrão. 50 − 2 (= --space-48, o
   valor que PopUp.css já aplica dentro de .fk-popup__acoes). */
.fk-cta--popup { height: calc(var(--tamanho-cta) - var(--space-2)); }
/* 46 px: CTA de página e de topo (Home/Ajuda/Mais/Influencers/PreviewVideo "Criar vídeo", Assets, Notificacoes, Conta,
   Suporte, Projetos "Novo projeto"). Raio 13, 13 px. 50 − 4. */
.fk-cta--md {
  height: calc(var(--tamanho-cta) - var(--space-4));
  border-radius: var(--radius-13);
  font-size: 13px;
}
/* 44 px: ação do painel em barra (TrocarHorizontal, GingaHorizontal). Raio 12, 13 px, 22 px de cada lado. Nunca ocupa
   a linha: do tamanho do texto; o mínimo (244 px em TrocarHorizontal, 268 fixos em GingaHorizontal) é do contexto.
   50 − 6. */
.fk-cta--barra {
  width: auto;
  height: calc(var(--tamanho-cta) - var(--space-6));
  padding: 0 var(--space-22);
  border-radius: var(--radius-12);
  font-size: 13px;
}
/* 42 px: ação de diálogo ao lado de teclas (Termos e Agentes .dlg-act, Suporte .cta.sm). Raio 12, 12,5 px. 50 − 8. */
.fk-cta--sm {
  height: calc(var(--tamanho-cta) - var(--space-8));
  border-radius: var(--radius-12);
  font-size: 12.5px;
}
/* 40 px: "Baixar vídeo" no fim da geração do painel em barra (TrocarHorizontal e GingaHorizontal, acima das teclas de
   36 "Ajustar" e "Criar outro"). Ocupa a coluna; raio 14 do padrão, 12,5 px, ícone de 14. 50 − 10. */
.fk-cta--resultado {
  height: calc(var(--tamanho-cta) - var(--space-10));
  font-size: 12.5px;
}
/* 38 px: ação dentro da coluna do Pix ("Copiar código Pix", PlanoResumo .pix-side .cta.sm). Ocupa a coluna; raio 11, 12 px,
   ícone de 14. 50 − 12. */
.fk-cta--pagamento {
  height: calc(var(--tamanho-cta) - var(--space-12));
  border-radius: var(--radius-11);
  font-size: 12px;
}
/* 36 px: ação de card de canto e de toast (NotificacoesCatalogo .cc-a "Ver planos"). Sempre do tamanho do texto.
   Raio 11, 12,5 px, 16 px de cada lado. 50 − 14. */
.fk-cta--xs {
  display: inline-flex;
  width: auto;
  height: calc(var(--tamanho-cta) - var(--space-14));
  padding: 0 var(--space-16);
  border-radius: var(--radius-11);
  font-size: 12.5px;
}
/* 34 px: CTA no fim de um texto longo ("Abrir o estúdio", Termos .doc a.cta), ao lado da tecla de 34 "Voltar ao início".
   Do tamanho do texto, raio 10, 14 px de cada lado, 12 px, ícone de 13. O brilho por baixo encolhe para
   0 8px 20px -8px (o --shadow-cta tem 0 12px 30px -8px), porque a peça fica no meio da leitura; as outras camadas
   são as do --shadow-cta, montadas dos tokens (o preto a 65% do contorno vem de --bg, o preto do sistema). 50 − 16. */
.fk-cta--documento {
  display: inline-flex;
  width: auto;
  height: calc(var(--tamanho-cta) - var(--space-16));
  padding: 0 var(--space-14);
  border-radius: var(--radius-10);
  font-size: 12px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 60%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--sulco-sombra) 20%, transparent),
    0 0 0 1px color-mix(in srgb, var(--bg) 65%, transparent),
    0 8px 20px -8px var(--lima-brilho);
}

/* ── Peças internas ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Ícone: 16 px no CTA de 50 e 52, 15 px de 48 a 42, 14 px em 40 e 38, 13 px em 34 (o consumidor passa width/height no
   svg). Nunca encolhe. */
.fk-cta__icone { flex: none; }
/* Giro do "Gerando…": o mesmo arco de Main/Ginga/Redes, uma volta por segundo. */
.fk-cta__giro {
  flex: none;
  animation: fk-cta-giro var(--duracao-giro) var(--curva-linear) infinite;
}
@keyframes fk-cta-giro { to { transform: rotate(360deg); } }
/* Separador e valor ao lado (TrocarHorizontal: "Gerar vídeo | 4 créditos"). Filete de 1 × 16 px na tinta do lima a 25%. */
.fk-cta__sep {
  flex: none;
  width: var(--space-1);
  height: var(--space-16);
  background: color-mix(in srgb, var(--tinta-lima) 25%, transparent);
}
.fk-cta__lado { font-variant-numeric: tabular-nums; }
/* No silencioso a tecla é cinza: o filete vira luz e o valor ao lado recua. */
.fk-cta--silencioso .fk-cta__sep { background: color-mix(in srgb, var(--branco) 14%, transparent); }
.fk-cta--silencioso .fk-cta__lado { color: var(--texto-unidade); }
/* Retrato do personagem no início do CTA (Avatares "Criar com Juno"): 30 px, raio 9, rosto no terço de cima. */
.fk-cta__avatar {
  flex: none;
  width: var(--space-30);
  height: var(--space-30);
  border-radius: var(--radius-9);
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tinta-lima) 35%, transparent),
    0 2px 5px color-mix(in srgb, var(--tinta-lima) 30%, transparent);
}
/* Com retrato o respiro da esquerda cai para 6 px, alinhando a foto ao canto (Avatares: 0 16 0 6, 13 px). */
.fk-cta--com-avatar { padding: 0 var(--space-16) 0 var(--space-6); font-size: 13px; }

/* ── Estados extras ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Espiar: gerando com o player fechado, o CTA ocupado vira "Ver progresso · 42%" e reabre o player (Main .is-busy.peek). */
.fk-cta--ocupado.fk-cta--espiar,
.fk-cta[aria-busy="true"].fk-cta--espiar { cursor: pointer; }

/* Chamada: um anel lima se abre uma vez quando a ação fica disponível (Resultado .acts .cta, ctaLit 1.5s ease-out).
   Nenhum token de duração ou curva tem esse sentido (--duracao-pulso é 1,6 s e se repete; --curva-casa freia cedo
   demais e o anel sumiria antes de abrir), então os dois valores do canvas ficam em variáveis locais com a origem.
   O atraso é do contexto (Resultado espera 2,5 s pela revelação): o consumidor passa --fk-cta-atraso. */
.fk-cta--chamar {
  --fk-cta-chamada-duracao: 1500ms; /* Resultado ctaLit */
  --fk-cta-chamada-curva: ease-out; /* Resultado ctaLit */
  animation: fk-cta-chama var(--fk-cta-chamada-duracao) var(--fk-cta-chamada-curva) var(--fk-cta-atraso, 0s);
}
@keyframes fk-cta-chama {
  0%   { box-shadow: var(--shadow-cta), 0 0 0 0 color-mix(in srgb, var(--lima) 50%, transparent); }
  100% { box-shadow: var(--shadow-cta), 0 0 0 var(--space-12) color-mix(in srgb, var(--lima) 0%, transparent); }
}

/* Recuo: só um lima aceso por vez. Dentro de .fk-dialogo__pagina o recuo já é automático (Dialogo.css apaga todo .fk-cta
   da página com .fk-dialogo__pagina--recuada). Para um CTA fora dessa casca, sob uma folha ou camada com o próprio
   lima (FolhaPersonagem .is-open .page .cta, PreviewVideo .is-open .home .cta), use --recuavel e, enquanto a camada
   estiver aberta, --recuada. Mesmo filtro e mesma duração do Dialogo: 600 ms (--duracao-media + --duracao-hover) na
   curva de opacidade, nos dois sentidos (canvas: filter .6s ease). */
.fk-cta--recuavel {
  transition:
    filter calc(var(--duracao-media) + var(--duracao-hover)) var(--curva-opacidade),
    transform var(--duracao-pressao);
}
.fk-cta--recuada,
.fk-cta--recuada:hover { filter: saturate(0) brightness(.7); }

/* ── Menos movimento: o giro para, a chamada não acontece e o recuo é imediato. ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-cta__giro, .fk-cta--chamar { animation: none; }
  .fk-cta--recuavel { transition: none; }
}

/* Source: Dialogo.css */
/* Fenaky Design System · Dialogo — a casca de diálogo genérica: uma pergunta ou um formulário curto que a própria
   pessoa abriu, com título, Fechar e ações, sobre a página escurecida e desfocada.
   Fontes: Conta.dc.html (Cancelar a assinatura? / Desconectar Claude?: .layer, .scrim, .dlg, .dlg-head, .dlg-desc,
   .dlg-sum, .dlg-actions, .key.danger fixa em 164 px), Suporte.dc.html (Novo atendimento: 520 px, gap 18, subtítulo,
   campos, .note e ações de 42 px), Termos.dc.html e Agentes.dc.html (Preferências de cookies: 560/540 px, rótulo +
   título de 24 px, Fechar com texto, .opts/.opt/.sw, .dlg-detail, .dlg-act em grade e as partes em cascata .dl),
   e Home.dc.html (o recuo opcional da página, .page em scale(.985), quando o diálogo é uma camada de mídia).
   O véu é o das quatro pranchas de diálogo (rgba(5,5,6,.6) com blur(8px), sem saturate), não o do PopUp (.62/12).
   Usa as primitivas .fk-casca, .fk-poco, .fk-modulo, .fk-sulco, .fk-rotulo, .fk-tecla e .fk-cta e as peças de
   BotaoRedondo, Tecla (--xl, --perigo), Cta (--sm, --auto, --recuavel/--recuada), Campo e Link sem redefini-las.
   Tamanhos de fonte: onde tokens.json tem estilo igual, o comentário o cita; os demais são os px exatos das pranchas. Cor só por var(--token);
   quando o canvas usa outra opacidade ou um tom entre dois tokens, sai deles por color-mix() ou rgb(from …). */

/* ── Raiz: cobre a tela (ou o palco, com --contido); véu atrás, caixa centrada na frente ─────────────────────────── */
/* A raiz é o contexto de empilhamento na camada do véu (80); dentro dela o véu fica em --camada-dialogo-veu e a caixa
   em --camada-dialogo (81), a mesma ordem que as duas camadas têm na página.
   Tela baixa: a raiz rola (overflow-y: auto) e a caixa centraliza por margin: auto, que vira 0 quando ela não cabe;
   assim a caixa nunca é cortada em cima e as ações chegam rolando, enquanto o véu fica parado (position: fixed). */
.fk-dialogo {
  position: fixed;
  inset: 0;
  z-index: var(--camada-dialogo-veu);
  display: grid;
  /* 12 px de folga em volta, como o pop-up no celular (NotificacoesMobile: 12 px de margem lateral). */
  padding: var(--space-12);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  visibility: hidden;
  /* Fechado, só sai do foco e da árvore de acessibilidade depois que a caixa saiu: 550 ms (Conta e Termos .55s). */
  transition: visibility 0s var(--curva-linear) calc(var(--duracao-media) + var(--duracao-pressao));
}
.fk-dialogo--aberto { visibility: visible; pointer-events: auto; transition: visibility 0s; }
/* Contido: dentro de um palco position: relative (prévias, pranchas, um painel que é a tela); o véu cobre só o palco. */
.fk-dialogo--contido { position: absolute; }
.fk-dialogo--contido .fk-dialogo__veu { position: absolute; }

/* Véu das pranchas de diálogo: Conta e Suporte .scrim rgba(5,5,6,.6), Termos e Agentes rgba(6,6,7,.6), todos com
   blur(8px) e sem saturate. A cor sai de --veu-dialogo (5,5,6) com o alfa .6 das pranchas; o desfoque de 8 px tem o
   valor de --desfoque-saida e fica numa variável própria para o consumidor ajustar. Entra em 450 ms (Termos .45s;
   Conta .4s). Um clique nele fecha o diálogo. O .62 com blur 12 e saturate(.8) é do PopUp, que chega sozinho. */
.fk-dialogo__veu {
  --fk-dialogo-veu-desfoque: var(--desfoque-saida);
  position: fixed;
  inset: 0;
  z-index: var(--camada-dialogo-veu);
  background: rgb(from var(--veu-dialogo) r g b / .6);
  -webkit-backdrop-filter: blur(var(--fk-dialogo-veu-desfoque));
  backdrop-filter: blur(var(--fk-dialogo-veu-desfoque));
  opacity: 0;
  transition: opacity var(--duracao-media) var(--curva-opacidade);
}
.fk-dialogo--aberto .fk-dialogo__veu { opacity: 1; }

/* ── Caixa: casca de 468 px (raio 22 da casca), padding 22, coluna com vão de 16 ──────────────────────────────── */
/* Fecha em 300/500/300 ms (opacidade, descida na curva da casa, desfoque) de volta a 28 px abaixo, escala .96
   (Conta, Suporte, Termos e Agentes .dlg: translateY(28px) scale(.96)) e desfoque de 14 px. A largura sai de
   --fk-dialogo-largura (padrão --tamanho-dialogo) e nunca passa da tela. */
.fk-dialogo__caixa {
  position: relative;
  z-index: var(--camada-dialogo);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: var(--fk-dialogo-largura, var(--tamanho-dialogo));
  margin: auto;
  padding: var(--space-22);
  outline: 0;
  box-shadow: var(--shadow-dialogo);
  opacity: 0;
  transform: translateY(var(--space-28)) scale(.96);
  filter: blur(var(--desfoque-dialogo));
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade);
}
/* Abre 50 ms depois do véu: opacidade 500 ms, subida 900 ms (--duracao-dialogo) na curva da casa, foco 550 ms.
   O atraso de 50 ms é metade de --duracao-pressao. */
.fk-dialogo--aberto .fk-dialogo__caixa {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-opacidade) calc(var(--duracao-pressao) / 2),
    transform var(--duracao-dialogo) var(--curva-casa) calc(var(--duracao-pressao) / 2),
    filter calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-opacidade) calc(var(--duracao-pressao) / 2);
}

/* ── Cabeçalho: ícone (opcional), rótulo + título, Fechar à direita, alinhados pelo alto ──────────────────────── */
.fk-dialogo__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
}
/* Ícone: o knob de 40 px de BotaoRedondo (.fk-botaoredondo--lg), com o traço na cor do fato (--erro numa
   confirmação destrutiva). Só marca o lugar no cabeçalho. */
.fk-dialogo__icone { flex: none; }
.fk-dialogo__textos {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}
/* Ao lado do ícone, o texto desce 3 px para o título alinhar ao meio do knob (Conta); com subtítulo, 2 px (Suporte). */
.fk-dialogo__icone + .fk-dialogo__textos { padding-top: var(--space-3); }
.fk-dialogo__icone + .fk-dialogo__textos:has(.fk-dialogo__subtitulo) { padding-top: var(--space-2); }
.fk-dialogo__fechar { flex: none; }

/* Título: 600 21/1,15 Space Grotesk, −0,02em (Conta e Suporte .dlg-head h2). Sem estilo igual em tokens.json: fica
   entre titulo-painel (20) e titulo-dialogo (26, do pop-up). Recebe o foco ao abrir (tabindex="-1"), sem anel: não é um controle. */
.fk-dialogo__titulo {
  margin: 0;
  color: var(--texto-titulo);
  font: 600 21px/1.15 var(--font-display);
  letter-spacing: -.02em;
}
.fk-dialogo__titulo:focus { outline: none; }
/* Subtítulo sob o título, dentro do cabeçalho (Suporte .dlg-head p): 12,5/1,55 em --texto-unidade (#a9a9af);
   é o estilo corpo-compacto de tokens.json. */
.fk-dialogo__subtitulo {
  margin: 0;
  color: var(--texto-unidade);
  font: 500 12.5px/1.55 var(--font-texto);
  text-wrap: pretty;
}

/* ── Corpo ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Descrição: 13/1,6 (Conta .dlg-desc; o estilo corpo tem 13/1,5, a prancha abre a entrelinha). O #b4b4ba do canvas (Conta) não é token: usa --texto-leitura (#b7b7bd), o mais próximo. */
.fk-dialogo__descricao {
  margin: 0;
  color: var(--texto-leitura);
  font: 500 13px/1.6 var(--font-texto);
  text-wrap: pretty;
}
.fk-dialogo__descricao b,
.fk-dialogo__descricao strong { font-weight: 600; color: var(--texto); }

/* Resumo: poço com duas colunas de fato (Plano · Período pago até), padding 12 14 (Conta .dlg-sum). Rótulos 500 12/1,2;
   o valor é o estilo numero-topo de tokens.json (Space Grotesk 600 13/1). */
.fk-dialogo__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
  color: var(--texto-apoio);
  font: 500 12px/1.2 var(--font-texto);
}
.fk-dialogo__resumo > div { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.fk-dialogo__resumo > div + div { text-align: right; }
.fk-dialogo__resumo b {
  color: var(--texto-forte);
  font: 600 13px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Opções: módulo com linhas de escolha separadas por sulco (Termos/Agentes .opts, .opt). */
.fk-dialogo__opcoes {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}
.fk-dialogo__opcoes > .fk-sulco { margin: 0 var(--space-12); }
.fk-dialogo__opcao {
  display: flex;
  align-items: center;
  gap: var(--space-18);
  width: 100%;
  margin: 0;
  padding: var(--space-13) var(--space-12) var(--space-13) var(--space-14);
  border: 0;
  border-radius: var(--radius-12);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background var(--duracao-rapida) var(--curva-opacidade);
}
button.fk-dialogo__opcao { cursor: pointer; }
/* Branco a 3,5 % sob o ponteiro (Termos button.opt:hover). */
button.fk-dialogo__opcao:hover { background: color-mix(in srgb, var(--branco) 3.5%, transparent); }
.fk-dialogo__opcao-textos { display: flex; flex: 1; flex-direction: column; gap: var(--space-5); min-width: 0; }
/* Título da opção 600 13/1,25 (item-titulo tem 13/1,35) e explicação 500 12/1,5 (Termos .opt b, .opt small). */
.fk-dialogo__opcao-textos strong { color: var(--texto); font: 600 13px/1.25 var(--font-texto); }
.fk-dialogo__opcao-textos small { color: var(--texto-apoio); font: 500 12px/1.5 var(--font-texto); }

/* Chave: trilho-poço de 42 × 24 com o botão de 18 px (Termos .sw); ligada, o trilho vira tecla acesa e o botão clareia. */
.fk-dialogo__chave {
  position: relative;
  flex: none;
  width: calc(var(--space-40) + var(--space-2));
  height: var(--space-24);
  border-radius: var(--radius-pilula);
  background: var(--poco);
  box-shadow: var(--shadow-poco-trilho);
  /* 350 ms (Termos .sw): --duracao-curta + metade de --duracao-pressao. */
  transition: background calc(var(--duracao-curta) + var(--duracao-pressao) / 2) var(--curva-opacidade);
}
/* Botão: #46464d → #2a2a2f no canvas = 72 % --tecla-acesa-topo + 28 % --botao-redondo-topo → --tecla-hover-base.
   Sombra: luz de 14 % no topo, aro de preto a .65 e queda 0 2px 5px de --sulco-sombra (.6). */
.fk-dialogo__chave > i {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: var(--space-18);
  height: var(--space-18);
  border-radius: var(--radius-circulo);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tecla-acesa-topo) 72%, var(--botao-redondo-topo)), var(--tecla-hover-base) 70%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 14%, transparent),
    0 0 0 1px rgb(from var(--sulco-sombra) r g b / .65),
    0 var(--space-2) var(--space-5) var(--sulco-sombra);
  transition: transform calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-casa), background var(--duracao-curta) var(--curva-opacidade);
}
.fk-dialogo__chave--ligada,
[aria-checked="true"] > .fk-dialogo__chave { background: linear-gradient(180deg, var(--tecla-acesa-topo), var(--tecla-acesa-base)); }
.fk-dialogo__chave--ligada > i,
[aria-checked="true"] > .fk-dialogo__chave > i {
  transform: translateX(var(--space-18));
  background: radial-gradient(circle at 50% 30%, var(--branco), var(--texto-icone) 70%);
}
/* Fixa: sempre ligada e sem toque (Necessários · sempre ativos). Opacidade .55 = 1 − --opacidade-desligado. */
.fk-dialogo__chave--fixa { opacity: calc(1 - var(--opacidade-desligado)); }

/* Detalhe: a linha miúda antes das ações (prazo, link para a política), 12,5/1,5 em --texto-apoio (Termos .dlg-detail;
   corpo-compacto tem 12,5/1,55). */
.fk-dialogo__detalhe {
  margin: 0;
  color: var(--texto-apoio);
  font: 500 12.5px/1.5 var(--font-texto);
  text-wrap: pretty;
}

/* ── Ações: à direita, vão de 10, 4 px a mais de respiro (Conta). Teclas de 40 px = .fk-tecla--xl. ─────────────── */
.fk-dialogo__acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-10);
  padding-top: var(--space-4);
}
/* A confirmação tem largura fixa para o rótulo trocar por "Cancelando…" com o giro sem mexer o par. Conta
   .key.danger { width: 164px }: sem token de largura, 164 = 2 × --space-64 + --space-32 + --space-4. */
.fk-dialogo__confirmar {
  width: var(--fk-dialogo-confirmar, calc(var(--space-64) * 2 + var(--space-32) + var(--space-4)));
  padding: 0;
}
/* Nota à esquerda das ações (Suporte .note: "Até 5 atendimentos em aberto."), 11,5/1,55 em --texto-controle
   (o estilo nota de tokens.json tem 11/1,5; a prancha usa 11,5). */
.fk-dialogo__nota {
  margin: 0 auto 0 0;
  color: var(--texto-controle);
  font: 500 11.5px/1.55 var(--font-texto);
}
/* Grade: três escolhas lado a lado, a última (o CTA) um pouco maior (Termos/Agentes .dlg-act: 1fr 1fr 1,15fr, vão 8,
   teclas de 42 px com raio 12 e 12 px, o tamanho do estilo opcao; CTA de 42 px com raio 12 e 12,5 px). As frações
   são as da prancha. */
.fk-dialogo__acoes--grade {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: var(--space-8);
  padding-top: 0;
}
.fk-dialogo__acoes--grade > .fk-tecla,
.fk-dialogo__acoes--grade > .fk-cta {
  width: auto;
  height: calc(var(--tamanho-cta) - var(--space-8));
  padding: 0 var(--space-10);
  border-radius: var(--radius-12);
}
.fk-dialogo__acoes--grade > .fk-tecla { font-size: 12px; }
.fk-dialogo__acoes--grade > .fk-cta { font-size: 12.5px; }

/* ── Partes em cascata (opcional): cada filho com .fk-dialogo__parte e --i (0, 1, 2…) chega depois da caixa ───────── */
/* Fechado: 10 px abaixo e desfocado (4 px), some em 200/300/200 ms. Aberto: 120 ms + --i × 40 ms depois, opacidade e
   foco em 450 ms e subida em 800 ms na curva da casa (Termos/Agentes .dl, --d 0, 40, 80, 120, 160 ms). */
.fk-dialogo__parte {
  opacity: 0;
  transform: translateY(var(--space-10));
  filter: blur(var(--desfoque-texto));
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--duracao-curta) var(--curva-casa),
    filter var(--duracao-rapida) var(--curva-opacidade);
}
.fk-dialogo--aberto .fk-dialogo__parte {
  --fk-dialogo-espera: calc((var(--i, 0) + 3) * var(--duracao-escalonamento));
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--duracao-media) var(--curva-opacidade) var(--fk-dialogo-espera),
    transform calc(var(--duracao-dialogo) - var(--duracao-pressao)) var(--curva-casa) var(--fk-dialogo-espera),
    filter var(--duracao-media) var(--curva-opacidade) var(--fk-dialogo-espera);
}

/* ── Variantes ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Formulário (Suporte, Novo atendimento): 520 px (468 + 48 + 4), vão de 18, ações de 42 px com a nota à esquerda;
   o CTA Enviar tem pelo menos 136 px e 18 px de cada lado. Entre a linha de apoio dos campos e as ações a prancha
   deixa 34 px (o vão de 18 + os 16 px da margem do parágrafo .fmeta): aqui, 16 px no alto das ações. */
.fk-dialogo--formulario { --fk-dialogo-largura: calc(var(--tamanho-dialogo) + var(--space-48) + var(--space-4)); }
.fk-dialogo--formulario .fk-dialogo__caixa { gap: var(--space-18); }
.fk-dialogo--formulario .fk-dialogo__acoes { padding-top: var(--space-16); }
/* Teclas de 42 px com raio 12 e 12,5 px (Suporte .dlg-actions .key). */
.fk-dialogo--formulario .fk-dialogo__acoes > .fk-tecla {
  height: calc(var(--tamanho-cta) - var(--space-8));
  padding: 0 var(--space-16);
  border-radius: var(--radius-12);
  font-size: 12.5px;
}
.fk-dialogo--formulario .fk-dialogo__acoes > .fk-cta {
  width: auto;
  min-width: calc(var(--space-64) * 2 + var(--space-8));
  padding: 0 var(--space-18);
}
/* Preferências (Termos, Preferências de cookies): 560 px (468 + 64 + 28), sem ícone, rótulo em cima do título de
   24 px/1,15 (−0,025em; Termos .dlg-h h2; titulo-plano tem 24/1, sem estilo igual), Fechar como tecla com texto e descrição em --texto-unidade (#a9a9af). Agentes usa 540 px:
   style="--fk-dialogo-largura: 540px". */
.fk-dialogo--preferencias { --fk-dialogo-largura: calc(var(--tamanho-dialogo) + var(--space-64) + var(--space-28)); }
.fk-dialogo--preferencias .fk-dialogo__cabecalho { justify-content: space-between; gap: var(--space-16); }
.fk-dialogo--preferencias .fk-dialogo__titulo { font-size: 24px; letter-spacing: -.025em; }
.fk-dialogo--preferencias .fk-dialogo__descricao { color: var(--texto-unidade); }

/* ── A página atrás (opcional, só camada de mídia): recua um pouco (Home .page: scale(.985) saturate(.8) brightness(.9)) */
/* Só para o diálogo que é uma camada de mídia sobre a Home (FolhaPersonagem). Conta, Suporte, Termos e Agentes não
   recuam a página: ela fica legível, só desfocada, sob o véu. Ponha .fk-dialogo__pagina no contêiner da página (nunca
   em volta do .fk-dialogo: o transform prenderia o fixed) e .fk-dialogo__pagina--recuada enquanto o diálogo estiver
   aberto. O CTA da página recua pelo próprio Cta (.fk-cta--recuavel + .fk-cta--recuada), não por esta classe.
   Escala na curva da casa em 900 ms (Home .9s); filtro em 600 ms (Home .6s). */
.fk-dialogo__pagina {
  transform-origin: 50% 40%;
  transition: transform var(--duracao-dialogo) var(--curva-casa), filter var(--duracao-deslize) var(--curva-opacidade);
}
.fk-dialogo__pagina--recuada { transform: scale(.985); filter: saturate(.8) brightness(.9); }

/* Anúncio do ocupado: região role="status" fora da vista (só para leitor de tela), dentro da caixa. */
.fk-dialogo__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Menos movimento: nada sobe, encolhe nem desfoca; véu, caixa, partes e página trocam na hora (as pranchas zeram
   as transições). A raiz some da árvore no mesmo instante. ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-dialogo,
  .fk-dialogo--aberto,
  .fk-dialogo__veu,
  .fk-dialogo__caixa,
  .fk-dialogo--aberto .fk-dialogo__caixa,
  .fk-dialogo__parte,
  .fk-dialogo--aberto .fk-dialogo__parte,
  .fk-dialogo__pagina,
  .fk-dialogo__opcao,
  .fk-dialogo__chave,
  .fk-dialogo__chave > i { transition: none; }
  .fk-dialogo__caixa,
  .fk-dialogo__parte { transform: none; filter: none; }
  .fk-dialogo__pagina--recuada { transform: none; }
}

/* Source: Esqueleto.css */
/* Fenaky Design System · Esqueleto — o lugar reservado enquanto a conta é reverificada.
   Guarda só a geometria medida da superfície anterior (altura do corpo, do rodapé ou do palco) e mostra "Verificando sua
   conta…" com três linhas paradas; nenhum arquivo, prompt, referência, resultado ou URL da conta anterior fica.
   Sem shimmer, sem fade e sem animação de entrada: o esqueleto aparece e sai no lugar.
   Fontes: public/studio-verification.js e public/video.css (.studio-verification-content, -status, -lines, -footer,
   -stage, -media, .studio-session-result; origin/codex/home-clean-state, igual no PR #129) e DESIGN.md (reverificação do
   Criar vídeo). O canvas não tem prancheta de reverificação; o acabamento vem dele: as linhas e a vaga do CTA são poços
   rebaixados (.fk-poco, trilho de Main .seg/.track), a mídia do palco é o quadro vazio do Player (Main .frame).
   O material (.fk-casca, .fk-poco, .fk-sulco) e o painel (.fk-painelcontextual__*) não são redefinidos aqui.

   Entradas do consumidor (propriedades personalizadas no style, sempre px inteiros já limitados a 0…20 000):
     --fk-esqueleto-altura   altura medida do corpo do painel ou do palco (padrão 520 no painel, 640 no palco)
     --fk-esqueleto-rodape   altura medida do rodapé do painel (padrão 100)
   Constantes do palco (video.css; não há token de tamanho para elas, por isso ficam nomeadas aqui):
     --fk-esqueleto-palco-largura  760px   largura máxima do palco
     --fk-esqueleto-midia-altura   360px   altura máxima da mídia; a largura sai dela em 16:9 (640 px) */

/* ── Raiz: status + linhas, empilhados no alto da área reservada ─────────────────────────────────────────────── */
/* 18 px entre o status e as linhas (video.css .studio-verification-content). */
.fk-esqueleto {
  display: grid;
  align-content: start;
  gap: var(--space-18);
  min-width: 0;
  min-height: var(--fk-esqueleto-altura, auto);
}

/* Status: video.css usa 12 px/500 solto; aqui entra o estilo mais próximo da escala, .corpo-compacto (Manrope 500,
   12,5/1,55). video.css usa --muted (#b9b4c4); o par neutro mais próximo é texto-leitura (#b7b7bd), 8,4:1 a 9,4:1 sobre
   a casca (do topo à base) e 9,9:1 sobre a página. */
.fk-esqueleto__status {
  margin: 0;
  color: var(--texto-leitura);
  font: 500 12.5px/1.55 var(--font-texto);
}

/* Linhas: três trilhos de 12 px, raio 6, 12 px entre eles, larguras 100 %, 82 % e 62 % (video.css). O fundo
   #25252d do app vira poço com a sombra do trilho: o que ainda não chegou fica rebaixado, nunca em relevo. */
.fk-esqueleto__linhas {
  display: grid;
  gap: var(--space-12);
}
.fk-esqueleto__linhas > * {
  display: block;
  width: 100%;
  height: var(--space-12);
  border-radius: var(--radius-6);
  background: var(--poco);
  box-shadow: var(--shadow-poco-trilho);
}
.fk-esqueleto__linhas > :nth-child(2) { width: 82%; }
.fk-esqueleto__linhas > :nth-child(3) { width: 62%; }

/* ── Painel: o corpo de um .fk-painelcontextual em reverificação ─────────────────────────────────────────────── */
/* O corpo do painel já tem 12 px; mais 6 px alinham o status e as linhas aos 18 px do cabeçalho. Padrão 520 px
   (studio-verification.js) quando não há medida. */
.fk-esqueleto--painel {
  padding: var(--space-6);
  min-height: var(--fk-esqueleto-altura, 520px);
}

/* Rodapé: mesma altura medida do rodapé anterior (padrão 100) e só a vaga do CTA, no pé, onde o CTA estava. Vai junto
   com .fk-painelcontextual__rodape, que dá as folgas. Com rodapé 0 o consumidor não põe o rodapé. */
.fk-esqueleto__rodape {
  box-sizing: border-box;
  height: var(--fk-esqueleto-rodape, 100px);
  overflow: clip;
}
/* Vaga do CTA: 50 px e raio 14 (--tamanho-cta, .fk-cta) e no pé do rodapé (margin-top: auto), como o CTA do canvas,
   que fica abaixo da leitura. video.css usa 42 × raio 8 (o botão antigo) centrado na altura. */
.fk-esqueleto__acao {
  display: block;
  flex: none;
  width: 100%;
  height: var(--tamanho-cta);
  margin-top: auto;
  border-radius: var(--radius-14);
  background: var(--poco);
  box-shadow: var(--shadow-poco);
}

/* ── Palco: a área neutra que guarda o lugar do estúdio, de um resultado ou de uma página privada ─────────────── */
/* 20 px entre as peças e no máximo 760 px de largura, centrado (video.css .studio-verification-stage). Padrão 640 px. */
.fk-esqueleto--palco {
  --fk-esqueleto-palco-largura: 760px;
  --fk-esqueleto-midia-altura: 360px;
  gap: var(--space-20);
  width: min(100%, var(--fk-esqueleto-palco-largura));
  min-height: var(--fk-esqueleto-altura, 640px);
  margin-inline: auto;
}
/* Resultado: o palco que guarda um resultado ocupa a janela menos o topo (video.css: calc(100dvh - 72px) no main,
   com o rodapé mínimo escondido; aqui o topo é o do canvas, --tamanho-topo 64). Vale a maior das duas alturas. */
.fk-esqueleto--resultado {
  min-height: max(var(--fk-esqueleto-altura, 640px), calc(100dvh - var(--tamanho-topo)));
}
/* Mídia: sempre 16:9. A altura para em 360 px, então a largura para em 640 px (360 × 16/9) e a mídia centra no palco;
   video.css limita só a altura e achata o quadro em palcos largos. No app é --surface com filete --line e raio 12; aqui
   é o quadro vazio do Player (poço com a moldura de 7 px e raio 24, Main .frame), sem pôster, grão nem varredura. */
.fk-esqueleto__midia {
  display: block;
  justify-self: center;
  width: min(100%, calc(var(--fk-esqueleto-midia-altura, 360px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-24);
  background: var(--poco);
  box-shadow: var(--shadow-moldura);
}
/* Na página, as linhas do palco ganham o filete de mídia em volta: a sombra interna do poço some no preto da página. */
.fk-esqueleto--palco .fk-esqueleto__linhas > * {
  box-shadow: var(--shadow-poco-trilho), 0 0 0 1px var(--filete-midia);
}

/* Nada se move: o esqueleto entra e sai sem transição, inclusive com movimento normal (DESIGN.md: sem shimmer, fade
   nem animação de entrada). Por isso não há regra de prefers-reduced-motion: já está parado. */
.fk-esqueleto,
.fk-esqueleto__linhas > *,
.fk-esqueleto__midia,
.fk-esqueleto__acao { animation: none; transition: none; }

/* Source: EstadoVazio.css */
/* Fenaky Design System · EstadoVazio — o que aparece no lugar de uma lista, grade ou painel sem nada para mostrar:
   ícone em knob (ou em poço), título em Space Grotesk, uma frase que diz o que fazer e, quando houver, a ação.
   Fontes: Assets e Notificacoes .empty (busca sem resultado, o padrão), Notificacoes .card.cempty (central, aba Não
   lidas), NotificacoesMobile .cempty (celular), Avatares .shell.empty (filtro sem personagem, em casca), Influencers
   .empty (elenco vazio, o destaque), TrocarHorizontal .empty (bandeja "Meus personagens", alinhado à esquerda),
   Agentes .well.empty (em linha, dentro do poço), Projetos .empty (ícone em poço, duas teclas e nota) e Redes .empty.
   O material em volta é do consumidor: .fk-modulo (Assets, central), .fk-casca (Avatares), .fk-poco (Agentes) ou nada
   (Influencers, TrocarHorizontal).
   Em todas as pranchas o vazio fica SOBREPOSTO à lista (position: absolute dentro do contêiner da lista, que é
   position: relative): a lista sai e o vazio sobe no mesmo lugar. Isso é o --sobreposto, com --fk-estadovazio-topo,
   -recuo, -largura e -altura.

   Medidas e tempos: cada variante só troca as propriedades --fk-estadovazio-*. Distâncias e tamanhos vêm da escala de
   espaço (--space-*), que é neutra. Os tempos das pranchas que não têm token com o mesmo sentido ficam como constantes
   locais, com a origem ao lado; tokens de duração só entram quando o sentido é o mesmo (--duracao-central-abre: esperar
   a central abrir; --duracao-atraso-entrada: esperar o que sai abrir caminho). Assim, mudar a pressão de uma tecla ou o
   giro de carregamento não mexe no vazio. */

/* ── Bloco: coluna centrada (Assets e Notificacoes .empty, card de 400 px) ───────────────────────────────────────── */
.fk-estadovazio {
  /* Movimento (Assets .empty): entra de 16 px abaixo num desfoque de 8 px, com opacidade em 500 ms, posição em 800 ms e
     desfoque em 500 ms, 300 ms depois de a lista sair (.empty.show). Sai em 300 / 500 / 300 ms (.empty). */
  --fk-estadovazio-y: var(--space-16);
  --fk-estadovazio-escala: 1;
  --fk-estadovazio-desfoque: var(--desfoque-saida);  /* 8 px: o que sai desfoca até 8 px */
  --fk-estadovazio-atraso: 300ms;                    /* Assets .empty.show: delay .3s */
  --fk-estadovazio-entra-opacidade: 500ms;           /* opacity .5s */
  --fk-estadovazio-entra-posicao: 800ms;             /* transform .8s */
  --fk-estadovazio-entra-desfoque: 500ms;            /* filter .5s */
  --fk-estadovazio-sai-opacidade: 300ms;             /* Assets .empty: opacity .3s */
  --fk-estadovazio-sai-posicao: 500ms;               /* transform .5s (e visibility no fim) */
  --fk-estadovazio-sai-desfoque: 300ms;              /* filter .3s */
  /* Medidas */
  --fk-estadovazio-icone: var(--space-40);           /* knob de 40 px (Assets e Notificacoes .empty .knob) */
  --fk-estadovazio-acao: calc(var(--tamanho-tecla) + var(--space-4)); /* tecla de 34 px: a tecla de 30 um degrau maior */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-28) var(--space-24) var(--space-24);
  text-align: center;
  transition:
    opacity var(--fk-estadovazio-entra-opacidade) var(--curva-opacidade) var(--fk-estadovazio-atraso),
    transform var(--fk-estadovazio-entra-posicao) var(--curva-casa) var(--fk-estadovazio-atraso),
    filter var(--fk-estadovazio-entra-desfoque) var(--curva-opacidade) var(--fk-estadovazio-atraso),
    visibility 0s;
}
/* Recém-inserido (o vazio nasce quando a lista esvazia): parte do estado oculto, como no canvas. */
@starting-style {
  .fk-estadovazio {
    opacity: 0;
    transform: translateY(var(--fk-estadovazio-y)) scale(var(--fk-estadovazio-escala));
    filter: blur(var(--fk-estadovazio-desfoque));
  }
}
/* Oculto: há conteúdo. Some sem clique e fora do Tab; a visibilidade só troca no fim da saída. Ocupa espaço se estiver
   no fluxo: para a lista e o vazio dividirem o mesmo lugar, use --sobreposto (ou tire o vazio do DOM). */
.fk-estadovazio.fk-estadovazio--oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--fk-estadovazio-y)) scale(var(--fk-estadovazio-escala));
  filter: blur(var(--fk-estadovazio-desfoque));
  transition:
    opacity var(--fk-estadovazio-sai-opacidade) var(--curva-opacidade),
    transform var(--fk-estadovazio-sai-posicao) var(--curva-casa),
    filter var(--fk-estadovazio-sai-desfoque) var(--curva-opacidade),
    visibility 0s linear var(--fk-estadovazio-sai-posicao);
}

/* ── Sobreposto: no lugar da lista, por cima dela (o padrão de todas as pranchas) ─────────────────────────────────── */
/* O contêiner da lista leva position: relative. Topo, recuo lateral, largura e altura são do consumidor:
   Assets e Notificacoes .empty: topo 36 px, largura 400 px (centrado). Notificacoes .cempty: topo 36 px, recuo 12 px.
   Avatares: topo 44 px, largura 420 px. Agentes: topo −21 px (cobre os cabeçalhos das colunas que somem), altura 132 px.
   Influencers: topo 0, altura 560 px (o destaque centra na vertical). Com largura definida, as margens automáticas
   centram o vazio sem usar transform, que é do movimento. */
.fk-estadovazio--sobreposto {
  position: absolute;
  top: var(--fk-estadovazio-topo, 0px);
  right: var(--fk-estadovazio-recuo, 0px);
  left: var(--fk-estadovazio-recuo, 0px);
  width: var(--fk-estadovazio-largura, auto);
  height: var(--fk-estadovazio-altura, auto);
  margin-inline: auto;
}

/* ── Peças ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Ícone em knob: o mesmo material do BotaoRedondo (radial de botao-redondo-topo para tecla-base), maior. Marca, não
   alvo: aria-hidden. Traço em texto-icone (7,1:1 sobre o knob). */
.fk-estadovazio__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--fk-estadovazio-icone);
  height: var(--fk-estadovazio-icone);
  border-radius: var(--radius-circulo);
  color: var(--texto-icone);
  background: radial-gradient(circle at 50% 30%, var(--botao-redondo-topo), var(--tecla-base) 70%);
  box-shadow: var(--shadow-botao-redondo);
}
.fk-estadovazio__icone > svg { flex: none; }
/* Em poço (Projetos .empty .ico): 52 px rebaixado, raio 16, traço em texto-unidade (8,4:1). Para "nada nesta situação". */
.fk-estadovazio__icone--poco {
  width: calc(var(--space-48) + var(--space-4));
  height: calc(var(--space-48) + var(--space-4));
  border-radius: var(--radius-16);
  color: var(--texto-unidade);
  background: var(--poco);
  box-shadow: var(--shadow-poco);
}
/* Sucesso (NotificacoesMobile .cempty .knob): o vazio é uma boa notícia ("Tudo em dia."). */
.fk-estadovazio__icone--sucesso { color: var(--sucesso); }

/* Título: Space Grotesk 600, 17 px (Assets e Notificacoes .empty h3), em texto-forte. */
.fk-estadovazio__titulo {
  margin: var(--space-6) 0 0;
  color: var(--texto-forte);
  font: 600 17px/1.2 var(--font-display);
}
/* Frase: Manrope 500, 12,5 px, em texto-apoio (7:1 na página, 6,6:1 no módulo, 6:1 no topo da casca). */
.fk-estadovazio__texto {
  margin: 0 0 var(--space-6);
  color: var(--texto-apoio);
  font: 500 12.5px/1.5 var(--font-texto);
}
/* Ações: duas teclas lado a lado (Projetos .eacts) ou o CTA no destaque. */
.fk-estadovazio__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
/* Tecla sozinha com seta depois do texto: 34 px, 14 px de cada lado (Assets, Notificacoes, NotificacoesMobile
   .empty .key, estilo inline "height: 34px; padding: 0 14px"). */
.fk-estadovazio__acao {
  height: var(--fk-estadovazio-acao);
  padding: 0 var(--space-14);
}
/* Em par, sem seta: 16 px de cada lado (Projetos .eacts .key {height:34px; padding:0 16px}). */
.fk-estadovazio__acoes > .fk-estadovazio__acao { padding: 0 var(--space-16); }
/* Nota de rodapé com ícone (Projetos .pnote, "Os projetos ficam vinculados à sua conta Google."), em texto-controle;
   10 px abaixo da ação, além do gap (Projetos .empty .pnote {margin:10px 0 0}). */
.fk-estadovazio__nota {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-10) 0 0;
  color: var(--texto-controle);
  font: 500 11.5px/1.3 var(--font-texto);
}
.fk-estadovazio__nota > svg { flex: none; }
/* Corpo: agrupa título e frase quando o ícone e a ação ficam ao lado (variante em linha). */
.fk-estadovazio__corpo { min-width: 0; }

/* ── Painel: dentro da central de notificações (Notificacoes .card.cempty) ───────────────────────────────────────── */
/* No canvas é um .card (módulo) a 12 px das bordas da central, 36 px abaixo das abas. Ícone 42 px, título 16 px,
   30/26/24 de respiro (vence o respiro de 14 px do .fk-modulo). Espera a central abrir antes de subir 14 px:
   .cempty.show {.5s / .8s / .5s, delay .85s}; .cempty {.25s / .5s / .25s}. */
.fk-estadovazio--painel {
  --fk-estadovazio-y: var(--space-14);
  --fk-estadovazio-atraso: var(--duracao-central-abre);   /* 850 ms: a central termina de deslizar */
  --fk-estadovazio-sai-opacidade: 250ms;                   /* .cempty: opacity .25s */
  --fk-estadovazio-sai-desfoque: 250ms;                    /* filter .25s */
  --fk-estadovazio-icone: calc(var(--space-40) + var(--space-2)); /* 42 px, inline no .knob */
  padding: var(--space-30) var(--space-26) var(--space-24);
}
.fk-estadovazio--painel .fk-estadovazio__titulo { font-size: 16px; }

/* ── Celular: a central em folha no celular (NotificacoesMobile .cempty) ─────────────────────────────────────────── */
/* Knob de 46 px, título de 18 px com −0,015em, frase em até 30 caracteres, 64/28/24 de respiro (a folha não tem abas
   em cima do vazio). Entra como o padrão (.5s / .8s / .5s depois de .3s) e sai mais rápido: .2s / .4s / .2s. */
.fk-estadovazio--celular {
  --fk-estadovazio-y: var(--space-14);
  --fk-estadovazio-sai-opacidade: 200ms;   /* NotificacoesMobile .cempty: opacity .2s */
  --fk-estadovazio-sai-posicao: 400ms;     /* transform .4s */
  --fk-estadovazio-sai-desfoque: 200ms;    /* filter .2s */
  --fk-estadovazio-icone: calc(var(--space-40) + var(--space-6)); /* 46 px */
  padding: var(--space-64) var(--space-28) var(--space-24);
}
.fk-estadovazio--celular .fk-estadovazio__titulo { font-size: 18px; letter-spacing: -.015em; }
.fk-estadovazio--celular .fk-estadovazio__texto { max-width: 30ch; }

/* ── Casca: filtro de catálogo sem resultado, numa casca própria (Avatares .shell.empty, 420 px) ─────────────────── */
/* Knob de 44 px, título de 20 px com −0,02em em texto-titulo, frase em até 30 caracteres com 1,55, tecla de 36 px,
   30/28/26 de respiro. Sobe 40 px de um desfoque de 16 px em escala .96, como os cards que entram:
   .empty.show {.6s / 1s / .6s, delay .38s}; .empty {.25s / .5s / .3s}. */
.fk-estadovazio--casca {
  --fk-estadovazio-y: var(--space-40);
  --fk-estadovazio-escala: .96;
  --fk-estadovazio-desfoque: var(--desfoque-entrada);          /* 16 px */
  --fk-estadovazio-atraso: var(--duracao-atraso-entrada);      /* 380 ms: a grade sai antes */
  --fk-estadovazio-entra-opacidade: 600ms;                     /* Avatares .empty.show: opacity .6s */
  --fk-estadovazio-entra-posicao: 1000ms;                      /* transform 1s */
  --fk-estadovazio-entra-desfoque: 600ms;                      /* filter .6s */
  --fk-estadovazio-sai-opacidade: 250ms;                       /* .empty: opacity .25s */
  --fk-estadovazio-sai-desfoque: 300ms;                        /* filter .3s */
  --fk-estadovazio-icone: calc(var(--space-40) + var(--space-4)); /* 44 px, inline no .knob */
  --fk-estadovazio-acao: calc(var(--tamanho-tecla) + var(--space-6)); /* 36 px, inline na .key */
  padding: var(--space-30) var(--space-28) var(--space-26);
}
.fk-estadovazio--casca .fk-estadovazio__titulo {
  color: var(--texto-titulo);
  font-size: 20px;
  letter-spacing: -.02em;
}
.fk-estadovazio--casca .fk-estadovazio__texto { max-width: 30ch; line-height: 1.55; }

/* ── Destaque: a página inteira está vazia, primeiro uso (Influencers .empty) ────────────────────────────────────── */
/* Knob de 52 px, título de 24 px em texto-titulo, frase de 13 px em até 44 caracteres e o CTA lima de 46 px.
   Sem gap: o ritmo vem das margens (22 / 10 / 24). Centrado na vertical quando tem altura (560 px em Influencers).
   Sobe 40 px de um desfoque de 16 px em escala .96: .empty.on {.7s / 1.1s / .8s, delay .45s}; .empty {.4s / .6s / .4s}. */
.fk-estadovazio--destaque {
  --fk-estadovazio-y: var(--space-40);
  --fk-estadovazio-escala: .96;
  --fk-estadovazio-desfoque: var(--desfoque-entrada);   /* 16 px */
  --fk-estadovazio-atraso: 450ms;                       /* Influencers .empty.on: delay .45s */
  --fk-estadovazio-entra-opacidade: 700ms;              /* opacity .7s */
  --fk-estadovazio-entra-posicao: 1100ms;               /* transform 1.1s */
  --fk-estadovazio-entra-desfoque: 800ms;               /* filter .8s */
  --fk-estadovazio-sai-opacidade: 400ms;                /* .empty: opacity .4s */
  --fk-estadovazio-sai-posicao: 600ms;                  /* transform .6s */
  --fk-estadovazio-sai-desfoque: 400ms;                 /* filter .4s */
  --fk-estadovazio-icone: calc(var(--space-48) + var(--space-4)); /* 52 px, inline no .knob */
  justify-content: center;
  gap: 0;
  padding: 0;
}
.fk-estadovazio--destaque .fk-estadovazio__titulo {
  margin-top: var(--space-22);
  color: var(--texto-titulo);
  font-size: 24px;
  letter-spacing: -.02em;
}
.fk-estadovazio--destaque .fk-estadovazio__texto {
  max-width: 44ch;
  margin: var(--space-10) 0 var(--space-24);
  font-size: 13px;
  line-height: 1.55;
}
/* Sem o gap do padrão, a nota leva os 20 px que teria depois do CTA (Projetos: 10 de gap + 10 de margem). */
.fk-estadovazio--destaque .fk-estadovazio__nota { margin-top: var(--space-20); }

/* ── Lateral: alinhado à esquerda, ao lado de uma área de envio (TrocarHorizontal .empty) ────────────────────────── */
/* Título 15 px, frase equilibrada, ícone de 40 px com 4 px a mais embaixo, 28 px de recuo. Sai para cima (10 px,
   desfoque de 6 px) quando o primeiro item chega (.empty.gone {.3s / .5s / .3s}); volta sem espera (.4s / .6s / .4s). */
.fk-estadovazio--lateral {
  --fk-estadovazio-y: calc(var(--space-10) * -1);
  --fk-estadovazio-desfoque: 6px;                 /* TrocarHorizontal .empty.gone: blur(6px) */
  --fk-estadovazio-atraso: 0s;
  --fk-estadovazio-entra-opacidade: 400ms;        /* .empty: opacity .4s */
  --fk-estadovazio-entra-posicao: 600ms;          /* transform .6s */
  --fk-estadovazio-entra-desfoque: 400ms;         /* filter .4s */
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 0 var(--space-28);
  text-align: left;
}
.fk-estadovazio--lateral .fk-estadovazio__icone { margin-bottom: var(--space-4); }
.fk-estadovazio--lateral .fk-estadovazio__titulo {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.fk-estadovazio--lateral .fk-estadovazio__texto {
  margin: 0;
  line-height: 1.55;
  text-wrap: balance;
}
.fk-estadovazio--lateral .fk-estadovazio__acoes { justify-content: flex-start; }

/* ── Em linha: ícone, texto e ação lado a lado, na altura da linha que substitui (Agentes .well.empty) ───────────── */
/* Grade ícone 44 / texto / ação (380 px em Agentes: a caixa do endereço MCP), 20 px entre colunas, 26 px nas
   laterais, 132 px de altura, raio 16 quando o consumidor usa .fk-poco. Entra de 16 px num desfoque de 10 px:
   .is-empty .empty {.6s / 1s / .6s, delay .35s}; .empty {.3s / .5s / .3s}. */
.fk-estadovazio--linha {
  --fk-estadovazio-desfoque: var(--desfoque-chegada);   /* 10 px: o que chega parte de 10 px */
  --fk-estadovazio-atraso: 350ms;                       /* Agentes .is-empty .empty: delay .35s */
  --fk-estadovazio-entra-opacidade: 600ms;              /* opacity .6s */
  --fk-estadovazio-entra-posicao: 1000ms;               /* transform 1s */
  --fk-estadovazio-entra-desfoque: 600ms;               /* filter .6s */
  --fk-estadovazio-icone: calc(var(--space-40) + var(--space-4)); /* 44 px */
  --fk-estadovazio-linha-altura: calc(var(--space-64) * 2 + var(--space-4)); /* 132 px (Agentes .empty height) */
  display: grid;
  grid-template-columns: var(--fk-estadovazio-icone) minmax(0, 1fr) var(--fk-estadovazio-linha-acao, auto);
  align-items: center;
  gap: var(--space-20);
  min-height: var(--fk-estadovazio-linha-altura);
  padding: 0 var(--space-26);
  border-radius: var(--radius-16);
  text-align: left;
}
.fk-estadovazio--linha .fk-estadovazio__titulo { margin: 0; font-size: 16px; }
.fk-estadovazio--linha .fk-estadovazio__texto {
  margin: var(--space-7) 0 0;
  line-height: 1.55;
  text-wrap: pretty;
}
.fk-estadovazio--linha .fk-estadovazio__acoes { justify-content: flex-end; }

/* ── Menos movimento: troca na hora, sem subir, escalar, desfocar nem esperar (Influencers, Avatares e Agentes:
   transition none; NotificacoesMobile: .01ms). ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-estadovazio,
  .fk-estadovazio.fk-estadovazio--oculto {
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Source: Etapas.css */
/* Fenaky Design System · Etapas — o andamento de um pedido em passos nomeados, ao lado do player.
   Lista (padrão): cada linha tem uma bolinha e o nome da etapa; a bolinha é um poço redondo que vira tecla com
   visto quando a etapa termina e ganha o anel lima pulsando e o ponto lima enquanto ela acontece. Compacta: a mesma
   lista no layout em barra. Guia: os passos de uma tela vazia, numerados e com descrição. Barras: no celular, quatro
   trilhos de 3 px enchendo em lima, com a etapa e "n de 4" embaixo.
   Fontes: Main.dc.html e Ginga.dc.html (.steps, .step, .sdot, @keyframes pulse; card 2 px 0 + lista 2 px 14 px),
   Motion.dc.html (.steps do pedido e .wsteps/.wstep/.wt/.sn da boas-vindas, card 2 px 16 px),
   TrocarHorizontal.dc.html e GingaHorizontal.dc.html (compacta: bolinha 20, ponto 6, 12 px, linha 9 px),
   CriarMobile.dc.html (.stepper, .sbars, .sbar, .slabel, .cnt).
   A lista mora num módulo: <ol class="fk-modulo fk-modulo--lista fk-etapas">. O respiro 4 × 14 do .fk-modulo--lista
   (Modulo.css) é a soma exata do canvas (card 2 px 0 + lista 2 px 14 px); compacta e guia trocam esse respiro.
   Cores por var(--token). Quando o canvas usa outra opacidade da mesma cor, ela sai do token com rgb(from …) e o alfa
   do canvas; quando usa um cinza vizinho de um token, sai do token com a conta ao lado. Cada declaração com rgb(from …)
   vem logo depois de uma igual com o valor literal do canvas: navegador sem relative color (Safari < 18,
   Firefox < 128) descarta a segunda e fica com a primeira, sem perder os três estados.
   Durações que não são token saem de somas de tokens. */

/* ── Lista ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Especificidade zero no reset: o respiro é do módulo (ou de quem usa a lista fora dele). */
:where(.fk-etapas) { margin: 0; padding: 0; list-style: none; }

/* Linha: Manrope 600 12,5 px, 11 px em cima e embaixo, 12 px entre a bolinha e o nome. A cor muda em 400 ms.
   Pendente em texto-nota (#8a8a90, o valor de Main e Ginga). O módulo fica sobre a página (medido no render do
   canvas: #0e0e0f a #131314), onde dá 5,4 a 5,6:1. */
.fk-etapas__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-11) 0;
  color: var(--texto-nota);
  font: 600 12.5px/1.2 var(--font-texto);
  transition: color calc(var(--duracao-curta) + var(--duracao-pressao)) var(--curva-opacidade); /* .4s */
}
/* Pendente na compacta: texto-dica (#85858b, TrocarHorizontal e GingaHorizontal), também sobre a página: 5,1 a 5,3:1. */
:where(.fk-etapas--compacta) .fk-etapas__item { color: var(--texto-dica); }
/* Pendente com o módulo dentro da casca: texto-controle (#8e8e94, o valor de Motion, cujo pedido mora no palco).
   O módulo sobre a casca fica de #1c1c1e a #262628; ali texto-nota cairia a 4,4:1 e texto-dica a 4,1:1, e
   texto-controle dá 4,6 a 5,2:1. :where() mantém a especificidade de uma classe, para atual e feita vencerem. */
:where(.fk-casca) .fk-etapas__item { color: var(--texto-controle); }
/* Divisor gravado entre linhas: escuro em cima, luz logo abaixo. */
.fk-etapas__item + .fk-etapas__item {
  border-top: 1px solid var(--divisor-sombra);
  box-shadow: inset 0 1px 0 var(--divisor-luz);
}
/* Atual: o nome acende. */
.fk-etapas__item--atual,
.fk-etapas__item[aria-current="step"] { color: var(--texto-forte); }
/* Feita: #b9b9be no canvas = texto-leitura (#b7b7bd) + 2/2/1. */
.fk-etapas__item--feita {
  color: #b9b9be;
  color: rgb(from var(--texto-leitura) calc(r + 2) calc(g + 2) calc(b + 1));
}

/* Bolinha: poço redondo de 22 px (fundo poco, sombra interna 2/4 a 75 % e filete branco de 6 %). */
.fk-etapas__ponto {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--space-22);
  height: var(--space-22);
  border-radius: var(--radius-circulo);
  color: var(--texto-forte);
  background: var(--poco);
  box-shadow: inset 0 var(--space-2) var(--space-4) rgba(0, 0, 0, .75), inset 0 0 0 1px var(--filete-midia);
  box-shadow:
    inset 0 var(--space-2) var(--space-4) rgb(from var(--sulco-sombra) r g b / .75),
    inset 0 0 0 1px var(--filete-midia); /* rgba(255,255,255,.06) */
}
/* O visto (svg 11 px, traço 3,2) herda texto-forte. Não há token de ícone: 11 e 10 px são os do canvas. */
.fk-etapas__ponto > svg { display: block; width: 11px; height: 11px; }

/* Feita: a bolinha vira tecla, de #3d3d43 (botao-redondo-topo #3c3c42 + 1) a #2b2b30 (ref-base). */
.fk-etapas__item--feita .fk-etapas__ponto {
  background: linear-gradient(180deg, #3d3d43, var(--ref-base));
  background: linear-gradient(180deg, rgb(from var(--botao-redondo-topo) calc(r + 1) calc(g + 1) calc(b + 1)), var(--ref-base));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55);
  box-shadow:
    inset 0 1px 0 rgb(from var(--branco) r g b / .16),
    0 0 0 1px rgb(from var(--sulco-sombra) r g b / .55);
}

/* Atual: anel lima de 1,5 px e uma onda que se abre até 11 px e some, a cada 1,6 s; ponto lima de 7 px com brilho. */
:is(.fk-etapas__item--atual, .fk-etapas__item[aria-current="step"]) .fk-etapas__ponto {
  animation: fk-etapas-pulso var(--duracao-pulso) ease-out infinite;
}
:is(.fk-etapas__item--atual, .fk-etapas__item[aria-current="step"]) .fk-etapas__ponto::after {
  content: '';
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-circulo);
  background: var(--lima);
  box-shadow: 0 0 var(--space-8) rgba(215, 255, 63, .9);
  box-shadow: 0 0 var(--space-8) rgb(from var(--lima) r g b / .9);
}
@keyframes fk-etapas-pulso {
  0% {
    box-shadow: inset 0 0 0 1.5px var(--lima), 0 0 0 0 rgba(215, 255, 63, .45);
    box-shadow: inset 0 0 0 1.5px var(--lima), 0 0 0 0 rgb(from var(--lima) r g b / .45);
  }
  100% {
    box-shadow: inset 0 0 0 1.5px var(--lima), 0 0 0 var(--space-11) rgba(215, 255, 63, 0);
    box-shadow: inset 0 0 0 1.5px var(--lima), 0 0 0 var(--space-11) rgb(from var(--lima) r g b / 0);
  }
}

/* Só para leitores de tela: "concluída" ao lado do nome da etapa feita (o visto é decorativo). */
.fk-etapas__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Compacta: no layout em barra (TrocarHorizontal, GingaHorizontal) ───────────────────────────────────────── */
/* Card 2 px 0 + lista 0 14 px = 2 × 14; linha de 9 px, 12 px de letra, bolinha 20, ponto 6, visto 10.
   A cor da pendente está junto da lista, acima. */
.fk-etapas.fk-etapas--compacta { padding: var(--space-2) var(--space-14); }
.fk-etapas--compacta .fk-etapas__item { padding: var(--space-9) 0; font-size: 12px; }
.fk-etapas--compacta .fk-etapas__ponto { width: var(--space-20); height: var(--space-20); }
.fk-etapas--compacta .fk-etapas__ponto > svg { width: 10px; height: 10px; }
.fk-etapas--compacta :is(.fk-etapas__item--atual, .fk-etapas__item[aria-current="step"]) .fk-etapas__ponto::after {
  width: var(--space-6);
  height: var(--space-6);
}

/* ── Guia: passos numerados com descrição, numa tela ainda vazia (Motion, boas-vindas, no palco) ────────────── */
/* Card 2 × 16; linha de 12 px alinhada pelo topo; título 600 12,5/1,25 e descrição 500 11,5/1,45 com 4 px entre eles. */
.fk-etapas.fk-etapas--guia { padding: var(--space-2) var(--space-16); }
.fk-etapas--guia .fk-etapas__item { align-items: flex-start; padding: var(--space-12) 0; }
.fk-etapas__texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
/* Título pendente #a6a6ac = texto-unidade (#a9a9af) − 3; feito em texto-suave (o token cobre o #c9c9ce do canvas). */
.fk-etapas__titulo {
  color: #a6a6ac;
  color: rgb(from var(--texto-unidade) calc(r - 3) calc(g - 3) calc(b - 3));
  font: 600 12.5px/1.25 var(--font-texto);
  transition: color calc(var(--duracao-curta) + var(--duracao-pressao)) var(--curva-opacidade);
}
/* Descrição em texto-controle (#8e8e94, o do canvas): 4,6:1 no topo da casca (#262628), no limite de 4,5:1. */
.fk-etapas__descricao {
  color: var(--texto-controle);
  font: 500 11.5px/1.45 var(--font-texto);
  text-wrap: pretty;
}
.fk-etapas__item--feita .fk-etapas__titulo { color: var(--texto-suave); }
:is(.fk-etapas__item--atual, .fk-etapas__item[aria-current="step"]) .fk-etapas__titulo { color: var(--texto-forte); }
:is(.fk-etapas__item--atual, .fk-etapas__item[aria-current="step"]) .fk-etapas__descricao { color: var(--texto-apoio); }
/* Número do passo pendente dentro da bolinha: Space Grotesk 600 10,5 px. Sai quando o passo vira atual ou feito. */
.fk-etapas__numero {
  color: var(--texto-controle);
  font: 600 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ── Barras: o andamento no celular, sob o player (CriarMobile) ─────────────────────────────────────────────── */
/* Coluna com a largura do quadro (232 em 9:16, 294 em 16:9), 9 px entre os trilhos e a leitura. */
.fk-etapas--barras {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  transition: width calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa); /* .8s */
}
.fk-etapas__trilhos {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--space-4);
}
/* Trilho de 3 px em branco a 12 %; o preenchimento lima com brilho de 8 px corre em 200 ms lineares. */
.fk-etapas__trilho {
  height: var(--tamanho-trilho);
  border-radius: var(--radius-3);
  background: rgba(255, 255, 255, .12);
  background: rgb(from var(--branco) r g b / .12);
  overflow: hidden;
}
.fk-etapas__preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--lima);
  box-shadow: 0 0 var(--space-8) rgba(215, 255, 63, .8);
  box-shadow: 0 0 var(--space-8) rgb(from var(--lima) r g b / .8);
  transition: width var(--duracao-rapida) var(--curva-linear), background var(--duracao-deslize) var(--curva-opacidade);
}
/* Pronto: os quatro trilhos passam do lima ao verde de sucesso, sem brilho. */
.fk-etapas--pronta .fk-etapas__preenchimento { background: var(--sucesso); box-shadow: none; }
/* Leitura: etapa à esquerda em Manrope 600 11,5 px (texto-link), "n de 4" à direita em Space Grotesk 500 11 px.
   O canvas usa #85858c na contagem = texto-dica (#85858b) + 0/0/1; fica em texto-dica (5,4:1 sobre a página;
   não use as barras dentro de módulo). */
.fk-etapas__leitura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  color: var(--texto-link);
  font: 600 11.5px/1 var(--font-texto);
}
.fk-etapas__contagem {
  flex: none;
  color: var(--texto-dica);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ── Menos movimento: nada pulsa nem corre. A etapa atual fica com o anel lima parado (o primeiro quadro do pulso),
   para não perder a marca quando a animação sai. */
@media (prefers-reduced-motion: reduce) {
  .fk-etapas__item, .fk-etapas__titulo, .fk-etapas--barras, .fk-etapas__preenchimento { transition: none; }
  :is(.fk-etapas__item--atual, .fk-etapas__item[aria-current="step"]) .fk-etapas__ponto {
    animation: none;
    box-shadow: inset 0 0 0 1.5px var(--lima);
  }
}

/* Source: Etiqueta.css */
/* Fenaky Design System · Etiqueta — a referência @Imagem1…5 / @Audio1…3 em todos os lugares onde ela aparece.
   A etiqueta em si (.fk-ref: 21 px, padding 0 7, raio 6, Space Grotesk 600 11,5 px, gradiente seg-acesa-topo → ref-base,
   shadow-ref, margem 0 1 px e vertical-align 1 px para assentar na linha do texto) é primitiva de 00-base.css; aqui ficam
   só os modificadores que as pranchas usam além dela. Fontes: Ginga.dc.html (.tag no roteiro, .script .tag.nu-a/.nu-b,
   .ref .tag como legenda da miniatura, .vh-text .lbl .tag, .arow-open .tag, .pframe .tag e .icard .tag sobre o retrato),
   GingaHorizontal.dc.html (.script .tag.tight, .ref .tag de 17 px, .alist.n3 .amain .tag, .pk-titles .lbl .tag,
   .tile .tag, .ltag e .ltag.none) e CriarMobile.dc.html (.tag de 20 px, .script .tag.tp e .tagc no rótulo).
   Dentro de outros componentes quem manda é o componente: no roteiro do Prompt a entrada é .fk-prompt__ref--nova e o
   tamanho do celular vem de .fk-prompt--compacto; na FaixaAudio a faixa já solta e encolhe a etiqueta; na miniatura do
   celular o tamanho vem de .fk-referenciaminiatura--quadrada. Os valores são os mesmos daqui. */

/* ── No texto ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Colada: a pontuação logo depois da etiqueta encosta nela ("com @Audio1.") em vez de flutuar a uma folga de distância
   (GingaHorizontal .script .tag.tight). Quem monta o texto põe a classe quando o próximo trecho começa com . , ; : ! ? */
.fk-ref.fk-etiqueta--colada { margin-right: 0; }

/* Celular: 20 px, padding 0 6, 11 px, para o roteiro de 12,5 px/1,75 do celular (CriarMobile .tag). 21 − 1. */
.fk-ref.fk-etiqueta--celular {
  height: calc(var(--tamanho-ref) - var(--space-1));
  padding: 0 var(--space-6);
  font-size: 11px;
}
/* No celular a colada avança 1 px sobre a pontuação (CriarMobile .script .tag.tp: margin-right −1 px). */
.fk-ref.fk-etiqueta--celular.fk-etiqueta--colada { margin-right: calc(var(--space-1) * -1); }

/* Entrada ao citar: a etiqueta recém-citada sobe 5 px, cresce de 80 % e desfoca para nítida (Ginga e CriarMobile,
   .script .tag.nu-a/.nu-b, .6 s na curva da casa). Duas classes com o mesmo quadro: alterne --entra-a e --entra-b a cada
   nova citação para o navegador repetir a animação sem recriar o elemento. */
.fk-ref.fk-etiqueta--entra-a { animation: fk-etiqueta-entra-a var(--duracao-deslize) var(--curva-casa); }
.fk-ref.fk-etiqueta--entra-b { animation: fk-etiqueta-entra-b var(--duracao-deslize) var(--curva-casa); }
@keyframes fk-etiqueta-entra-a {
  from { opacity: 0; transform: translateY(var(--space-5)) scale(.8); filter: blur(var(--desfoque-texto)); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes fk-etiqueta-entra-b {
  from { opacity: 0; transform: translateY(var(--space-5)) scale(.8); filter: blur(var(--desfoque-texto)); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ── Fora do texto ────────────────────────────────────────────────────────────────────────────────────────────── */
/* Solta: em linha flex (faixa de áudio, lista de citações), sem a margem e o desnível de quem mora no texto
   (Ginga e CriarMobile .arow-open .tag). */
.fk-ref.fk-etiqueta--solta { flex: none; margin: 0; vertical-align: baseline; }

/* Pequena: 19 px, padding 0 6, 10,5 px, com a margem 0 1 px da etiqueta. No título do seletor ("Escolhendo @Imagem2")
   e na faixa de áudio quando há três (GingaHorizontal .pk-titles .lbl .tag e .alist.n3 .amain .tag). Zera o
   espaçamento e a caixa-alta do .fk-rotulo, para a etiqueta continuar lida como o nome no texto. 21 − 2. */
.fk-ref.fk-etiqueta--sm {
  flex: none;
  height: calc(var(--tamanho-ref) - var(--space-2));
  padding: 0 var(--space-6);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
}

/* Rótulo: 19 px, padding 0 6, 11 px, sem margem, no rótulo de cima do painel ("Trocando @Imagem1", Ginga .vh-text .lbl
   .tag). No celular o padding é 0 7 (CriarMobile .tagc, "Escolhendo @Imagem2", "Referências @Imagem3"). */
.fk-ref.fk-etiqueta--rotulo {
  flex: none;
  height: calc(var(--tamanho-ref) - var(--space-2));
  padding: 0 var(--space-6);
  margin: 0;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
.fk-ref.fk-etiqueta--rotulo.fk-etiqueta--celular {
  height: calc(var(--tamanho-ref) - var(--space-2));
  padding: 0 var(--space-7);
}

/* Coluna: largura mínima de 62 px com o texto centrado, para @Audio1, @Audio2 e @Audio3 alinharem numa lista
   (GingaHorizontal .ltag, que mantém a margem 0 1 px). Com --reserva a etiqueta some mas guarda o lugar (.ltag.none:
   áudio fora do painel). 62 = space-64 − space-2. */
.fk-ref.fk-etiqueta--coluna {
  flex: none;
  min-width: calc(var(--space-64) - var(--space-2));
  justify-content: center;
}
.fk-ref.fk-etiqueta--reserva { visibility: hidden; }

/* ── Sobre mídia ──────────────────────────────────────────────────────────────────────────────────────────────── */
/* Clara: a pílula clara no canto do retrato escolhido (Ginga .icard .tag e GingaHorizontal .pframe .tag, 22 px, padding
   0 8, 11 px). Fundo pilula, texto tinta-pilula (16,9:1), sombra shadow-etiqueta-clara (0 4 10 a 45 %). Quem posiciona
   é o card (topo e esquerda 7 a 10 px). 21 + 1. */
.fk-ref.fk-etiqueta--clara {
  height: calc(var(--tamanho-ref) + var(--space-1));
  padding: 0 var(--space-8);
  margin: 0;
  font-size: 11px;
  color: var(--tinta-pilula);
  background: var(--pilula);
  box-shadow: var(--shadow-etiqueta-clara);
}
/* Clara grande: retrato do catálogo de Ginga (.pframe .tag, 24 px, padding 0 9, 11,5 px). 21 + 3. */
.fk-ref.fk-etiqueta--clara.fk-etiqueta--lg {
  height: calc(var(--tamanho-ref) + var(--space-3));
  padding: 0 var(--space-9);
  font-size: 11.5px;
}
/* Clara pequena: azulejo da grade de imagens (GingaHorizontal .tile .tag, 19 px, padding 0 6, 10 px). */
.fk-ref.fk-etiqueta--clara.fk-etiqueta--sm {
  height: calc(var(--tamanho-ref) - var(--space-2));
  padding: 0 var(--space-6);
  margin: 0;
  font-size: 10px;
}

/* Mínima: 17 px, padding 0 3, 9 px, centrada no pé da miniatura de 60 px da barra (GingaHorizontal .ref .tag). 21 − 4. */
.fk-ref.fk-etiqueta--xs {
  height: calc(var(--tamanho-ref) - var(--space-4));
  padding: 0 var(--space-3);
  margin: 0;
  font-size: 9px;
  letter-spacing: -.01em;
}

/* Legenda: só o texto, com sombra, no pé escuro da miniatura de 61 px do painel lateral (Ginga .ref .tag: "na foto de
   61 px a etiqueta lê melhor como legenda do que espremida numa pílula"). 12 px de altura, 10 px, texto-aceso, sombra de
   texto shadow-etiqueta-legenda (0 1 2 a 85 % e 0 0 8 a 60 %, como no canvas). Quem posiciona é a miniatura. */
.fk-ref.fk-etiqueta--legenda {
  justify-content: center;
  height: var(--space-12);
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 10px;
  letter-spacing: -.015em;
  color: var(--texto-aceso);
  background: none;
  box-shadow: none;
  text-shadow: var(--shadow-etiqueta-legenda);
}

/* ── Menos movimento: a etiqueta citada aparece no lugar, sem subir nem desfocar. ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-ref.fk-etiqueta--entra-a, .fk-ref.fk-etiqueta--entra-b { animation: none; }
}

/* Source: FaixaAudio.css */
/* Fenaky Design System · FaixaAudio — o áudio de referência (@Audio1…3) como uma faixa: tecla redonda de ouvir, a
   etiqueta, a forma de onda (as barras já ouvidas acesas) e a duração. Três lugares, um mesmo desenho:
   - painel (padrão): cada áudio é um poço de 36 px no módulo Referências do painel lateral (Ginga .arow, .arow-open,
     .bars, .bar, .dur; .slot-row.editing + .choosing "Trocando"; .slot.fa/.fb; .add-row). --celular é o mesmo poço no
     painel do celular (CriarMobile .arow, .bar, .adur, .arow.is-play).
   - lista: as faixas dividem um poço só, com sulco entre elas, na barra horizontal (GingaHorizontal .alist, .arow,
     .amain, .wv, .atime, .aring, .anote, .flash, .aadd, .aplus; .alist.n0 e .n3).
   - biblioteca: a linha de Meus áudios, em material de módulo (Ginga .arow2, .a-txt, .a-name, .a-meta, .eq, .act;
     CriarMobile .arow2 de 60 px).
   O poço (.fk-poco), a tecla (.fk-tecla) e a etiqueta (.fk-ref) são primitivas de 00-base.css; aqui só o que é da faixa.
   Cores do canvas sem token exato: barra #5b5b62 → --texto-separador (#5c5c62); barra sob o ponteiro #7a7a82, #707078
   e barra do celular #77777e → misturas de --texto-contagem com --texto-separador (91 %, 60 % e 82 % dão o valor exato);
   rótulo da linha de adicionar #c9c9ce → --texto-suave (#cacacf). Pretos com alfa vêm de --sulco-sombra (preto a 60 %):
   por color-mix quando o alfa é menor e por cor relativa (rgb(from … / α)) quando é maior.
   Medidas do canvas sem token, mantidas com a origem ao lado: pílula de 17 px e texto de 9,5 px (Ginga .choosing),
   desfoque de 7 px (GingaHorizontal xfA), 350 ms do anel (.aring), defasagens de 37 ms, -.2 s e -.35 s (.bar, .eq i)
   e ícones de 9 e 10 px da compacta (.alist.n3). */

/* ── Faixa (painel lateral): poço de 36 px = respiro 4 + tecla 28 + 4 ────────────────────────────────────────────── */
/* Use junto com .fk-poco. A lista do painel empilha as faixas com 6 px entre elas (.fk-faixaaudio-pilha). */
.fk-faixaaudio {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
  transition: box-shadow var(--duracao-curta);
}
.fk-faixaaudio-pilha { display: flex; flex-direction: column; gap: var(--space-6); }

/* Ouvir / pausar: tecla redonda de 28 px com o ícone cheio de 11 px. */
.fk-tecla.fk-faixaaudio__tocar {
  flex: none;
  width: var(--tamanho-botao-redondo);
  height: var(--tamanho-botao-redondo);
  padding: 0;
  border-radius: var(--radius-circulo);
}
.fk-faixaaudio__tocar > svg { flex: none; }
/* Os dois ícones moram na tecla; o estado tocando troca qual aparece. */
.fk-faixaaudio__icone-pausar,
.fk-faixaaudio--tocando .fk-faixaaudio__icone-tocar { display: none; }
.fk-faixaaudio--tocando .fk-faixaaudio__icone-pausar { display: block; }

/* Trocar: o resto da faixa é um botão só (etiqueta, onda e duração), que abre a escolha do áudio. */
.fk-faixaaudio__abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-9);
  height: var(--tamanho-botao-redondo);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* A etiqueta fica solta na linha, sem a margem e o desnível de quem mora no texto (= Etiqueta --solta). */
.fk-faixaaudio__abrir > .fk-ref { flex: none; margin: 0; vertical-align: baseline; }

/* Onda em barras: 40 barras de 2 px espalhadas em 26 px de altura; a altura de cada uma vem do consumidor. */
.fk-faixaaudio__barras {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  height: var(--space-26);
  overflow: hidden;
}
.fk-faixaaudio__barra {
  display: block;
  flex: none;
  width: var(--space-2);
  border-radius: var(--radius-2);
  background: var(--texto-separador);
  transition: background var(--duracao-curta);
}
/* Acesa: o trecho já ouvido (as 15 primeiras de 40 no canvas). */
.fk-faixaaudio__barra--acesa { background: var(--texto-hover-rail); }
.fk-faixaaudio__abrir:hover .fk-faixaaudio__barra { background: color-mix(in srgb, var(--texto-contagem) 91%, var(--texto-separador)); }
.fk-faixaaudio__abrir:hover .fk-faixaaudio__barra--acesa { background: var(--branco); }

/* Duração: Space Grotesk 500 11 px em texto-apoio (7,0:1 no poço), números tabulares. */
.fk-faixaaudio__tempo {
  flex: none;
  color: var(--texto-apoio);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tocando: as barras acesas pulsam de 45 % a 110 % da altura, cada uma 37 ms adiantada (--i = índice da barra; 37 ms é
   a defasagem do canvas, sem token). 550 ms = --duracao-media + --duracao-pressao. */
.fk-faixaaudio--tocando .fk-faixaaudio__barra--acesa {
  animation: fk-faixaaudio-eq calc(var(--duracao-media) + var(--duracao-pressao)) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -37ms);
}
@keyframes fk-faixaaudio-eq { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } }

/* Trocando: enquanto a galeria escolhe o áudio para esta faixa, o poço ganha o anel de escolha (2 px de texto-forte e
   halo de 6 px) e a pílula clara "Trocando" assenta no meio da borda de cima. */
.fk-faixaaudio--trocando {
  box-shadow: var(--shadow-poco), 0 0 0 var(--space-2) var(--texto-forte), 0 0 0 var(--space-6) var(--anel-escolha);
}
.fk-faixaaudio__aviso {
  position: absolute;
  left: 50%;
  top: calc(var(--space-9) * -1);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 17px; /* Ginga .choosing, sem token de tamanho */
  padding: 0 var(--space-6);
  border-radius: var(--radius-pilula);
  white-space: nowrap;
  pointer-events: none;
  color: var(--tinta-pilula);
  font: 700 9.5px/1 var(--font-texto);
  background: var(--pilula);
  /* 0 3 8 a 55 % do canvas: sulco-sombra (60 %) a 91,67 %. */
  box-shadow: 0 3px 8px color-mix(in srgb, var(--sulco-sombra) 91.67%, transparent);
  opacity: 0;
  transform: translate(-50%, 5px) scale(.85);
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-faixaaudio--trocando > .fk-faixaaudio__aviso { opacity: 1; transform: translate(-50%, 0); }

/* Trocada: quando o áudio novo entra, um anel branco de 2 px se abre 13 px e apaga (Ginga .slot.fa/.fb, ringA, 900 ms;
   no celular, CriarMobile .arow.fl-a/.fl-b: 1 s depois de 250 ms, o tempo da folha de escolha fechar).
   Alterne --troca-a e --troca-b a cada troca para a animação recomeçar sem recriar a faixa. */
.fk-faixaaudio::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.fk-faixaaudio--troca-a::after { animation: fk-faixaaudio-anel-a var(--duracao-dialogo) var(--curva-casa); }
.fk-faixaaudio--troca-b::after { animation: fk-faixaaudio-anel-b var(--duracao-dialogo) var(--curva-casa); }
.fk-faixaaudio--celular.fk-faixaaudio--troca-a::after { animation: fk-faixaaudio-anel-a var(--duracao-giro) var(--curva-casa) var(--duracao-cor); }
.fk-faixaaudio--celular.fk-faixaaudio--troca-b::after { animation: fk-faixaaudio-anel-b var(--duracao-giro) var(--curva-casa) var(--duracao-cor); }
@keyframes fk-faixaaudio-anel-a {
  0% { opacity: 1; box-shadow: 0 0 0 var(--space-2) var(--branco), 0 0 0 0 color-mix(in srgb, var(--branco) 50%, transparent), 0 0 var(--space-26) color-mix(in srgb, var(--branco) 30%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 0 var(--space-2) var(--branco), 0 0 0 var(--space-13) color-mix(in srgb, var(--branco) 0%, transparent), 0 0 var(--space-26) color-mix(in srgb, var(--branco) 0%, transparent); }
}
@keyframes fk-faixaaudio-anel-b {
  0% { opacity: 1; box-shadow: 0 0 0 var(--space-2) var(--branco), 0 0 0 0 color-mix(in srgb, var(--branco) 50%, transparent), 0 0 var(--space-26) color-mix(in srgb, var(--branco) 30%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 0 var(--space-2) var(--branco), 0 0 0 var(--space-13) color-mix(in srgb, var(--branco) 0%, transparent), 0 0 var(--space-26) color-mix(in srgb, var(--branco) 0%, transparent); }
}

/* Sem áudio: no lugar das faixas, uma linha tracejada de 42 px que abre a escolha (Ginga e CriarMobile .add-row).
   Tracejado branco a 12 % (24 % sob o ponteiro); texto-unidade (6,4:1 no módulo) que clareia para texto-forte. */
.fk-faixaaudio-adicionar {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  height: calc(var(--space-40) + var(--space-2));
  padding: 0 var(--space-12);
  border: 1px dashed color-mix(in srgb, var(--branco) 12%, transparent);
  border-radius: var(--radius-12);
  background: transparent;
  cursor: pointer;
  color: var(--texto-unidade);
  font: 600 11.5px/1 var(--font-texto);
  text-align: left;
  transition: color var(--duracao-hover), border-color var(--duracao-hover);
}
.fk-faixaaudio-adicionar > svg { flex: none; }
.fk-faixaaudio-adicionar:hover { color: var(--texto-forte); border-color: color-mix(in srgb, var(--branco) 24%, transparent); }

/* ── Celular: o mesmo poço com tecla de 30 px (CriarMobile .arow) ─────────────────────────────────────────────── */
/* Sem trecho ouvido: todas as barras em cinza mais claro (#77777e); tocando, todas acendem e pulsam. */
.fk-faixaaudio--celular { padding: var(--space-5) var(--space-10) var(--space-5) var(--space-5); border-radius: var(--radius-12); }
.fk-faixaaudio--celular .fk-tecla.fk-faixaaudio__tocar { width: var(--tamanho-tecla); height: var(--tamanho-tecla); }
.fk-faixaaudio--celular .fk-faixaaudio__abrir { height: var(--tamanho-tecla); }
.fk-faixaaudio--celular .fk-faixaaudio__barras { height: var(--space-24); }
.fk-faixaaudio--celular .fk-faixaaudio__barra { background: color-mix(in srgb, var(--texto-contagem) 82%, var(--texto-separador)); }
.fk-faixaaudio--celular .fk-faixaaudio__abrir:hover .fk-faixaaudio__barra { background: var(--texto-link); }
.fk-faixaaudio--celular.fk-faixaaudio--tocando .fk-faixaaudio__barra {
  background: var(--texto-hover-rail);
  animation: fk-faixaaudio-eq calc(var(--duracao-media) + var(--duracao-pressao)) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -37ms);
}

/* ── Lista: as faixas dividem um poço só (barra horizontal) ───────────────────────────────────────────────────── */
/* .fk-poco + .fk-faixaaudio-lista. O poço tem a altura que o módulo dá (105 px no canvas) e as linhas a dividem:
   --fk-faixaaudio-linhas = faixas + a linha de adicionar (1 a 3). 105 px dá 105, 52,5 ou 35 px por linha, que deslizam em 550 ms
   quando uma linha entra ou sai; o poço recorta a que é empurrada para baixo. Com 3 linhas, use --compacta. */
.fk-faixaaudio-lista {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fk-faixaaudio-lista > .fk-faixaaudio {
  flex: none;
  height: calc(100% / var(--fk-faixaaudio-linhas, 1));
  min-height: 0;
  padding: 0 var(--space-10) 0 var(--space-7);
  transition: height calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa);
}
/* Sulco entre linhas: sombra de 55 % em cima (sulco-sombra a 91,67 %) e luz de linha-tabela embaixo. */
.fk-faixaaudio-lista > .fk-faixaaudio + .fk-faixaaudio {
  border-top: 1px solid color-mix(in srgb, var(--sulco-sombra) 91.67%, transparent);
  box-shadow: inset 0 1px 0 var(--linha-tabela);
}
/* A tecla da lista é a redonda de 32 px; na compacta encolhe para 24 px (ícone de 9 px) deslizando em 450 ms. */
.fk-faixaaudio-lista .fk-tecla.fk-faixaaudio__tocar {
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  transition: width var(--duracao-media) var(--curva-casa), height var(--duracao-media) var(--curva-casa), background var(--duracao-hover), color var(--duracao-hover), transform var(--duracao-pressao), box-shadow var(--duracao-rapida);
}
.fk-faixaaudio-lista .fk-faixaaudio__abrir { position: relative; gap: var(--space-8); height: 100%; }

/* Onda em traços (SVG): um traço de 2 px a cada 4 px, pontas redondas, no centro de 24 px. Dois <path>: o já ouvido
   (--acesa, texto-hover-rail) e o resto (--base). A caixa recorta a onda quando o painel estreita. */
.fk-faixaaudio__onda-caixa {
  flex: 1;
  min-width: 0;
  height: var(--space-24);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: opacity var(--duracao-curta);
}
.fk-faixaaudio__onda {
  display: block;
  flex: none;
  height: var(--space-24);
  transition: height var(--duracao-media) var(--curva-casa);
}
.fk-faixaaudio__onda path { fill: none; stroke-width: 2; stroke-linecap: round; }
.fk-faixaaudio__onda-base { stroke: var(--texto-separador); }
.fk-faixaaudio__onda-acesa { stroke: var(--texto-hover-rail); }
.fk-faixaaudio__abrir:hover .fk-faixaaudio__onda-base { stroke: color-mix(in srgb, var(--texto-contagem) 60%, var(--texto-separador)); }
/* Tocando, a onda respira (opacidade de 1 a 55 % em 1,1 s = --duracao-giro + --duracao-pressao). */
.fk-faixaaudio--tocando .fk-faixaaudio__onda { animation: fk-faixaaudio-respira calc(var(--duracao-giro) + var(--duracao-pressao)) ease-in-out infinite alternate; }
@keyframes fk-faixaaudio-respira { from { opacity: 1; } to { opacity: .55; } }
.fk-faixaaudio-lista .fk-faixaaudio__tempo { transition: opacity var(--duracao-cor); }

/* Escolhendo (lista): o anel fica por dentro do poço, 3 px afastado (inset 1,5 px de texto-forte e brilho de 14 px a
   8 %); a onda apaga a 30 %, a duração some e a nota "Escolhendo" entra pela direita sobre um fundo de poço que nasce
   em degradê, para a onda terminar antes do ponto. */
.fk-faixaaudio__anel {
  position: absolute;
  inset: var(--space-3);
  border-radius: var(--radius-9);
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texto-forte) 0%, transparent);
  transition: box-shadow calc(var(--duracao-curta) + 50ms) var(--curva-casa); /* 350 ms do .aring do canvas */
}
.fk-faixaaudio__nota {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding-left: var(--space-18);
  color: var(--texto-aceso);
  font: 600 10.5px/1 var(--font-texto);
  white-space: nowrap;
  background: linear-gradient(90deg, color-mix(in srgb, var(--poco) 0%, transparent), var(--poco) var(--space-16));
  opacity: 0;
  transform: translateX(var(--space-6));
  pointer-events: none;
  transition: opacity var(--duracao-curta), transform var(--duracao-media) var(--curva-casa);
}
/* Ponto que pulsa: 6 px em texto-forte, onda de 8 px a 55 % que apaga em 1,5 s. */
.fk-faixaaudio__pulso {
  flex: none;
  display: inline-block;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circulo);
  background: var(--texto-forte);
  animation: fk-faixaaudio-pulso calc(var(--duracao-pulso) - var(--duracao-pressao)) ease-out infinite;
}
@keyframes fk-faixaaudio-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--texto-forte) 55%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--texto-forte) 0%, transparent); }
}
/* Na lista o anel é o de dentro: a faixa perde o anel do painel e, se não é a primeira, guarda a luz do sulco. */
.fk-faixaaudio-lista > .fk-faixaaudio--trocando { box-shadow: none; }
.fk-faixaaudio--trocando .fk-faixaaudio__anel {
  box-shadow: inset 0 0 0 1.5px var(--texto-forte), inset 0 0 var(--space-14) color-mix(in srgb, var(--texto-forte) 8%, transparent);
}
.fk-faixaaudio--trocando .fk-faixaaudio__onda-caixa { opacity: .3; }
.fk-faixaaudio-lista .fk-faixaaudio--trocando .fk-faixaaudio__tempo { opacity: 0; }
.fk-faixaaudio--trocando .fk-faixaaudio__nota { opacity: 1; transform: none; }
/* Escolhida: o áudio novo já entrou e a galeria segue aberta; a onda e a duração voltam e a nota sai. */
.fk-faixaaudio--trocando.fk-faixaaudio--escolhida .fk-faixaaudio__onda-caixa { opacity: 1; }
.fk-faixaaudio-lista .fk-faixaaudio--trocando.fk-faixaaudio--escolhida .fk-faixaaudio__tempo { opacity: 1; }
.fk-faixaaudio--trocando.fk-faixaaudio--escolhida .fk-faixaaudio__nota { opacity: 0; transform: translateX(var(--space-6)); }

/* Trocada (lista): o lampejo é por dentro, 2 px afastado (anel branco de 2 px e brilho de 22 px a 50 %, 1,1 s), e a
   etiqueta, a onda e a duração chegam de 114 % com desfoque de 7 px em 700 ms. */
.fk-faixaaudio-lista > .fk-faixaaudio::after { inset: var(--space-2); border-radius: var(--radius-9); z-index: 4; }
.fk-faixaaudio-lista > .fk-faixaaudio--troca-a::after { animation: fk-faixaaudio-lampejo-a calc(var(--duracao-giro) + var(--duracao-pressao)) ease-out; }
.fk-faixaaudio-lista > .fk-faixaaudio--troca-b::after { animation: fk-faixaaudio-lampejo-b calc(var(--duracao-giro) + var(--duracao-pressao)) ease-out; }
.fk-faixaaudio-lista > .fk-faixaaudio--troca-a .fk-faixaaudio__abrir { animation: fk-faixaaudio-chega-a var(--duracao-zoom) var(--curva-casa); }
.fk-faixaaudio-lista > .fk-faixaaudio--troca-b .fk-faixaaudio__abrir { animation: fk-faixaaudio-chega-b var(--duracao-zoom) var(--curva-casa); }
@keyframes fk-faixaaudio-lampejo-a {
  0% { opacity: 1; box-shadow: inset 0 0 0 var(--space-2) var(--branco), inset 0 0 var(--space-22) color-mix(in srgb, var(--branco) 50%, transparent); }
  100% { opacity: 0; box-shadow: inset 0 0 0 var(--space-2) var(--branco), inset 0 0 var(--space-22) color-mix(in srgb, var(--branco) 0%, transparent); }
}
@keyframes fk-faixaaudio-lampejo-b {
  0% { opacity: 1; box-shadow: inset 0 0 0 var(--space-2) var(--branco), inset 0 0 var(--space-22) color-mix(in srgb, var(--branco) 50%, transparent); }
  100% { opacity: 0; box-shadow: inset 0 0 0 var(--space-2) var(--branco), inset 0 0 var(--space-22) color-mix(in srgb, var(--branco) 0%, transparent); }
}
/* 7 px é o desfoque do xfA do canvas; o token mais próximo (--desfoque-saida, 8 px) não é o mesmo. */
@keyframes fk-faixaaudio-chega-a { from { opacity: 0; transform: scale(1.14); filter: blur(7px); } }
@keyframes fk-faixaaudio-chega-b { from { opacity: 0; transform: scale(1.14); filter: blur(7px); } }

/* Compacta (3 linhas de 35 px): respiro 0 9 0 5, tecla de 24 px, etiqueta de 19 px, onda de 18 px, anel 2 px afastado. */
.fk-faixaaudio-lista--compacta > .fk-faixaaudio { padding: 0 var(--space-9) 0 var(--space-5); }
.fk-faixaaudio-lista--compacta .fk-tecla.fk-faixaaudio__tocar { width: var(--tamanho-alvo-minimo); height: var(--tamanho-alvo-minimo); }
.fk-faixaaudio-lista--compacta .fk-faixaaudio__tocar svg { width: 9px; height: 9px; } /* .alist.n3 .key.round svg */
.fk-faixaaudio-lista--compacta .fk-faixaaudio__abrir > .fk-ref { height: calc(var(--tamanho-ref) - var(--space-2)); padding: 0 var(--space-6); font-size: 10.5px; }
.fk-faixaaudio-lista--compacta .fk-faixaaudio__onda { height: var(--space-18); }
.fk-faixaaudio-lista--compacta .fk-faixaaudio__anel { inset: var(--space-2); border-radius: var(--radius-8); }

/* Linha de adicionar (lista): um lugar tracejado onde as faixas têm a tecla, o nome e o que ela aceita. */
.fk-faixaaudio--adicionar .fk-faixaaudio__abrir {
  gap: var(--space-10);
  color: var(--texto-suave);
  font: 600 11.5px/1 var(--font-texto);
  transition: color var(--duracao-hover);
}
.fk-faixaaudio__mais {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tamanho-tecla);
  height: var(--tamanho-tecla);
  border-radius: var(--radius-circulo);
  border: 1px dashed color-mix(in srgb, var(--branco) 26%, transparent);
  color: var(--texto-unidade);
  transition: border-color var(--duracao-rapida), color var(--duracao-rapida);
}
.fk-faixaaudio-lista--compacta .fk-faixaaudio__mais { width: var(--tamanho-alvo-minimo); height: var(--tamanho-alvo-minimo); }
.fk-faixaaudio-lista--compacta .fk-faixaaudio__mais svg { width: 10px; height: 10px; } /* .alist.n3 .aplus svg */
/* O que a linha aceita: Manrope 500 em texto-dica (5,4:1 no poço). */
.fk-faixaaudio__dica { font-weight: 500; color: var(--texto-dica); transition: opacity var(--duracao-curta), color var(--duracao-hover); }
.fk-faixaaudio--adicionar .fk-faixaaudio__abrir:hover,
.fk-faixaaudio--adicionar .fk-faixaaudio__abrir:hover .fk-faixaaudio__dica { color: var(--texto-forte); }
.fk-faixaaudio--adicionar .fk-faixaaudio__abrir:hover .fk-faixaaudio__mais { border-color: color-mix(in srgb, var(--branco) 50%, transparent); color: var(--texto-forte); }
.fk-faixaaudio--adicionar.fk-faixaaudio--trocando .fk-faixaaudio__dica { opacity: .3; }
.fk-faixaaudio--adicionar.fk-faixaaudio--trocando .fk-faixaaudio__mais { border-style: solid; border-color: var(--texto-forte); color: var(--texto-forte); }
/* Sem áudio: a linha é o poço inteiro, então a oferta fica no meio. */
.fk-faixaaudio-lista--vazia .fk-faixaaudio--adicionar .fk-faixaaudio__abrir { justify-content: center; padding-right: var(--space-7); }

/* ── Biblioteca: a linha de Meus áudios, em material de módulo ───────────────────────────────────────────────── */
/* 62 px, respiro 0 12, raio 14, vão 12; tecla redonda de 34 px (ícone 12), nome e meta, etiqueta e a ação. */
.fk-faixaaudio--biblioteca {
  height: calc(var(--space-56) + var(--space-6));
  padding: 0 var(--space-12);
  gap: var(--space-12);
  border-radius: var(--radius-14);
  background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base));
  box-shadow: var(--shadow-modulo);
}
.fk-faixaaudio--biblioteca .fk-tecla.fk-faixaaudio__tocar { width: calc(var(--tamanho-tecla-redonda) + var(--space-2)); height: calc(var(--tamanho-tecla-redonda) + var(--space-2)); }
.fk-faixaaudio__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
/* Nome: Manrope 600 13 px em texto (15,7:1 sobre a página); meta: Space Grotesk 500 11 px em texto-nota (5,4:1).
   As linhas de uma linha só recortam no padding: 2 px em cima e 3 embaixo (devolvidos pela margem) guardam acentos e
   as pernas de g, j, p e q. */
.fk-faixaaudio__nome {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  min-width: 0;
  color: var(--texto);
  font: 600 13px/1.2 var(--font-texto);
}
.fk-faixaaudio__nome > span:first-child,
.fk-faixaaudio__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--space-2) 0 var(--space-3);
  margin: calc(var(--space-2) * -1) 0 calc(var(--space-3) * -1);
}
.fk-faixaaudio__meta {
  color: var(--texto-nota);
  font: 500 11px/1.35 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-faixaaudio--biblioteca > .fk-ref { flex: none; margin: 0; vertical-align: baseline; }
.fk-faixaaudio__acao { flex: none; min-width: calc(var(--space-64) + var(--space-24)); }
/* Equalizador: três barras de 2 px em texto-forte, presas na base, ao lado do nome do áudio que toca (500 ms). */
.fk-faixaaudio__eq { flex: none; display: none; align-items: flex-end; gap: var(--space-2); height: var(--space-11); }
.fk-faixaaudio--tocando .fk-faixaaudio__eq { display: inline-flex; }
.fk-faixaaudio__eq i {
  display: block;
  width: var(--space-2);
  height: 100%;
  border-radius: var(--radius-2);
  background: var(--texto-forte);
  transform-origin: bottom;
  animation: fk-faixaaudio-eq var(--duracao-central-fecha) ease-in-out infinite alternate;
}
/* Defasagens do canvas (.eq i), sem token: a 2.ª barra 200 ms e a 3.ª 350 ms adiantadas. */
.fk-faixaaudio__eq i:nth-child(2) { animation-delay: -.2s; }
.fk-faixaaudio__eq i:nth-child(3) { animation-delay: -.35s; }
/* No vídeo: o filete vira um anel de 1,5 px em texto-forte a 60 %; a linha mostra a etiqueta e a ação Remover
   (Ginga .arow2.used, CriarMobile .arow2.cur). A primeira e a última camada são as de --shadow-modulo: o brilho de cima
   (branco a 6,5 %) e a queda 0 8 18 -10 em preto a 70 % (o preto de --sulco-sombra, por cor relativa). */
.fk-faixaaudio--biblioteca.fk-faixaaudio--usada {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 6.5%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--texto-forte) 60%, transparent),
    0 8px 18px -10px rgb(from var(--sulco-sombra) r g b / .7);
}
/* Recém-enviada: desce 12 px, cresce de 97 % e sai do desfoque de 8 px em 900 ms (Ginga .arow2.nu-a/.nu-b). */
.fk-faixaaudio--biblioteca.fk-faixaaudio--nova-a { animation: fk-faixaaudio-nova-a var(--duracao-dialogo) var(--curva-casa); }
.fk-faixaaudio--biblioteca.fk-faixaaudio--nova-b { animation: fk-faixaaudio-nova-b var(--duracao-dialogo) var(--curva-casa); }
@keyframes fk-faixaaudio-nova-a { from { opacity: 0; transform: translateY(calc(var(--space-12) * -1)) scale(.97); filter: blur(var(--desfoque-saida)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fk-faixaaudio-nova-b { from { opacity: 0; transform: translateY(calc(var(--space-12) * -1)) scale(.97); filter: blur(var(--desfoque-saida)); } to { opacity: 1; transform: none; filter: none; } }
/* Celular: 60 px, respiro 0 10 0 11, vão 11, nome de 12,5 px e ação de 68 × 30 (CriarMobile .arow2). */
.fk-faixaaudio--biblioteca.fk-faixaaudio--celular {
  height: calc(var(--space-56) + var(--space-4));
  padding: 0 var(--space-10) 0 var(--space-11);
  gap: var(--space-11);
}
.fk-faixaaudio--biblioteca.fk-faixaaudio--celular .fk-faixaaudio__nome { font-size: 12.5px; }
.fk-faixaaudio--biblioteca.fk-faixaaudio--celular .fk-faixaaudio__acao { min-width: calc(var(--space-64) + var(--space-4)); height: var(--tamanho-tecla); }

/* ── Foco ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Na lista, o poço recorta (overflow: hidden) e o botão Trocar ocupa a altura toda da linha: o anel global, 3 px por
   fora, sairia cortado. Ali ele vem 2 px para dentro, no raio do anel de escolha. Na compacta, a tecla fica a 5 px da
   borda: o anel encosta 2 px nela (e não 3) para sobrar 1 px antes do recorte. */
.fk-faixaaudio-lista .fk-faixaaudio__abrir:focus-visible {
  outline-offset: calc(var(--space-2) * -1);
  border-radius: var(--radius-9);
}
.fk-faixaaudio-lista--compacta .fk-faixaaudio__abrir:focus-visible { border-radius: var(--radius-8); }
.fk-faixaaudio-lista--compacta .fk-faixaaudio__tocar:focus-visible { outline-offset: var(--space-2); }

/* ── Menos movimento: nada pulsa, respira nem desliza; os estados trocam no lugar. ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-faixaaudio, .fk-faixaaudio__aviso, .fk-faixaaudio__barra, .fk-faixaaudio__onda, .fk-faixaaudio__onda-caixa,
  .fk-faixaaudio__anel, .fk-faixaaudio__nota, .fk-faixaaudio__tempo, .fk-faixaaudio-lista > .fk-faixaaudio,
  .fk-faixaaudio-lista .fk-tecla.fk-faixaaudio__tocar { transition: none; }
  .fk-faixaaudio__barra, .fk-faixaaudio__onda, .fk-faixaaudio__eq i, .fk-faixaaudio__pulso, .fk-faixaaudio::after,
  .fk-faixaaudio__abrir, .fk-faixaaudio--biblioteca { animation: none !important; }
}

/* Source: FaixaAviso.css */
/* Fenaky Design System · FaixaAviso — a faixa fina no topo da página com o aviso geral do sistema (o mesmo para todos,
   escrito no admin): ícone âmbar numa tecla, a mensagem, um link violeta opcional e o X de fechar. Desce do topo
   empurrando o conteúdo e sobe ao fechar.
   Fontes: NotificacoesCatalogo.dc.html, seção 06 (.bnr, .bn-ic, .bnr a, .bnr .t-cl, .t-cl, bnA/puA, bnO/puO e o
   movimento reduzido da linha 488); NOTIF.md ("Faixa no topo ... desce do topo empurrando o conteúdo"; saída igual à
   do toast); public/site-notice.css e site-notice.js do app (faixa presa no topo, texto que quebra, 760 px, altura
   medida para deslocar rail e painéis). Só var(--token); o link é o .fk-link--violeta de Link, sem redefinição. */

/* ── Faixa: material escuro com grão, filete claro embaixo e sombra curta sobre a página ─────────────────────────── */
.fk-faixaaviso {
  container: fk-faixaaviso / inline-size;
  position: relative;
  /* --camada-faixa (70, o z-index de .site-notice-banner no app): presa no topo, passa por cima do rail, dos painéis
     sobrepostos e dos filetes das cascas quando a página rola; fica sob os véus de diálogo e pop-up e sob os toasts.
     (O 3 do canvas só valia dentro do palco da prancheta.) */
  z-index: var(--camada-faixa);
  margin: 0;
  /* #e4e4e8 do canvas (.bnr): 12,5:1 sobre --faixa-topo, 13,8:1 sobre --faixa-base. */
  color: var(--texto-faixa);
  /* Espelha o estilo .corpo-compacto do tokens.css (500 · 12,5 px / 1,55 · Manrope), que a marcação também põe em
     .fk-faixaaviso__texto; aqui fica na raiz para o link herdar a mesma letra. Se o estilo mudar, mude esta linha.
     Numa linha os glifos ficam onde o canvas (12,5 px / 1) os põe. */
  font: 500 12.5px/1.55 var(--font-texto);
  /* O canvas usa o grão antigo a 7 % e 160 px; o sistema usa o grão das cascas (alfa embutido, 192 px). */
  background:
    url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao),
    linear-gradient(180deg, var(--faixa-topo), var(--faixa-base));
  box-shadow: var(--shadow-faixa);
}
.fk-faixaaviso[hidden] { display: none; }
/* Presa: fica no alto da janela enquanto a página rola (o app real: position sticky, top 0). */
.fk-faixaaviso--presa { position: sticky; top: 0; }

/* Linha: centrada, 40 px numa linha (24 px do ícone + 8 + 8), 48 px dos lados para o X caber sem cobrir o texto. */
.fk-faixaaviso__linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  min-height: var(--tamanho-faixa);
  padding: var(--space-8) var(--space-48);
}

/* Ícone: a tecla de 24 px com raio 8 e o triângulo de aviso em âmbar (8,8:1 sobre a tecla). */
.fk-faixaaviso__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--tamanho-alvo-minimo);
  height: var(--tamanho-alvo-minimo);
  border-radius: var(--radius-8);
  color: var(--aviso);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.fk-faixaaviso__icone > svg { display: block; }

/* Mensagem: texto puro do admin (até 300 caracteres no app); quebra até dentro de palavras longas, como no app. */
.fk-faixaaviso__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Link opcional: .fk-link .fk-link--violeta (violeta 6,6:1, sob o ponteiro 9,9:1); aqui só o peso 600 do canvas. */
.fk-faixaaviso__link {
  flex: none;
  font-weight: 600;
}

/* Fechar: 24 px transparente a 10 px da direita e 8 px do topo; sob o ponteiro ganha fundo e fica branco. */
.fk-faixaaviso__fechar {
  position: absolute;
  z-index: 1;
  top: var(--space-8);
  right: var(--space-10);
  display: grid;
  place-items: center;
  width: var(--tamanho-alvo-minimo);
  height: var(--tamanho-alvo-minimo);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  color: var(--texto-nota);
  background: transparent;
  cursor: pointer;
  transition: background var(--duracao-hover), color var(--duracao-hover);
}
.fk-faixaaviso__fechar:hover {
  color: var(--branco);
  background: var(--fundo-hover-forte);
}
.fk-faixaaviso__fechar > svg { display: block; }

/* ── Estreita (faixa de até 760 px, o corte @media (max-width: 760px) do app): alinha à esquerda, o texto ocupa a linha ao lado do ícone
   e o link desce para baixo do texto, alinhado com ele (24 px do ícone + 10 px do vão). Lados de 16 px como no app;
   à direita 40 px, o bastante para o X (10 + 24 + 6). ─────────────────────────────────────────────────────────── */
@container fk-faixaaviso (max-width: 760px) {
  .fk-faixaaviso__linha {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--space-2);
    padding: var(--space-8) var(--space-40) var(--space-8) var(--space-16);
  }
  /* (24 − 19,4) / 2 ≈ 2 px: a primeira linha do texto fica no meio do ícone e do X. */
  .fk-faixaaviso__texto {
    flex: 1 1 calc(100% - var(--tamanho-alvo-minimo) - var(--space-10));
    padding-top: var(--space-2);
  }
  /* O link desce e pode quebrar: .fk-link--violeta é nowrap (e vem depois no bundle, daí os dois seletores); aqui um
     texto de link longo quebra na largura da linha em vez de vazar da faixa. */
  .fk-faixaaviso .fk-faixaaviso__link {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: calc(var(--tamanho-alvo-minimo) + var(--space-10));
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── Movimento: desce do topo empurrando o conteúdo; sobe ao fechar ─────────────────────────────────────────────────
   A faixa sobe 100 % da própria altura e a margem de baixo negativa puxa o conteúdo junto: a borda de baixo da faixa e
   o topo do conteúdo andam sempre juntos, como no canvas (bnA e puA na mesma curva). A margem precisa da altura:
   40 px por padrão; se a mensagem quebrar, o consumidor mede e põe em --fk-faixaaviso-altura (o app já mede para
   deslocar o rail e os painéis). O contêiner da faixa corta o que passa acima do topo (no app, a janela). */
.fk-faixaaviso--entra {
  animation: fk-faixaaviso-desce var(--duracao-entrada-toast) var(--curva-casa) both;
}
.fk-faixaaviso--sai {
  pointer-events: none;
  animation: fk-faixaaviso-sobe var(--duracao-saida) var(--curva-saida) both;
}
@keyframes fk-faixaaviso-desce {
  from {
    transform: translateY(-100%);
    margin-bottom: calc(var(--fk-faixaaviso-altura, var(--tamanho-faixa)) * -1);
  }
}
@keyframes fk-faixaaviso-sobe {
  to {
    transform: translateY(-100%);
    margin-bottom: calc(var(--fk-faixaaviso-altura, var(--tamanho-faixa)) * -1);
  }
}

/* ── Menos movimento: a faixa aparece e some no lugar. A duração quase nula (.01ms, a mesma do canvas) mantém o
   animationend, que o consumidor usa para pôr hidden depois da saída. ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-faixaaviso--entra,
  .fk-faixaaviso--sai { animation-duration: .01ms; animation-delay: 0s; }
  .fk-faixaaviso__fechar { transition: none; }
}

/* Source: FichaElenco.css */
/* Fenaky Design System · FichaElenco — o slot do painel Criar vídeo: um poço com a miniatura 3:4, a legenda (Vídeo
   original, Personagem, Referência), o nome, a meta e a tecla Trocar. Enquanto a galeria escolhe para ele, ganha o anel
   claro e a pílula "Escolhendo…"; quando a escolha muda, a borda lampeja, a miniatura dá um salto, a foto nova entra por
   cima da antiga (desfoque e escala) e o nome e a meta sobem no lugar.
   Fontes: Main.dc.html (.slot, .slot.editing, .slot.fl-a/.fl-b, .thumb, .thumb .lyr, .s-txt, .s-cap, .s-name, .s-meta,
   .pick-tag, a linha "quem aparece no vídeo vira" entre os slots), CriarMobile.dc.html (.slot.cast, .thumb.is-empty,
   .tempty, .link, o tray "Escolhendo" .ly-pick com .trow2, .beat, .tagc, a tecla Concluir e o remover .key.round). O poço (.fk-poco), a tecla (.fk-tecla, aria-pressed) e o knob
   (.fk-botaoredondo) são de 00-base.css e BotaoRedondo.css; aqui só o que é da ficha. */

/* ── Bloco: o poço da ficha ───────────────────────────────────────────────────────────────────────────────────── */
/* Use junto com .fk-poco (raio 12, fundo e sombra rebaixada). Medidas de Main: vão 12, respiro 8 10 8 8. */
.fk-fichaelenco {
  /* Miniatura 54 × 76 (Main .thumb). Sem token: 48 + 6 e 64 + 12. */
  --fk-fichaelenco-mini-largura: calc(var(--space-48) + var(--space-6));
  --fk-fichaelenco-mini-altura: calc(var(--space-64) + var(--space-12));
  --fk-fichaelenco-mini-raio: var(--radius-9);
  /* Salto da miniatura na troca (Main 1,05; o celular usa 1,06). */
  --fk-fichaelenco-salto: 1.05;
  /* Atraso da troca: 0 no painel; o celular espera a folha fechar (CriarMobile .25 s = --duracao-cor). */
  --fk-fichaelenco-atraso: 0s;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-10) var(--space-8) var(--space-8);
  min-width: 0;
}

/* Anel de escolha (::after) e lampejo da troca (::before): 1 px por fora do poço, raio 12 + 1. */
.fk-fichaelenco::before,
.fk-fichaelenco::after {
  content: '';
  position: absolute;
  inset: calc(var(--space-1) * -1);
  border-radius: var(--radius-13);
  pointer-events: none;
}
/* Escolhendo: filete de 1,5 px em texto-forte a 85 %, halo de 5 px a 7 % e brilho branco a 22 % (Main .slot::after).
   O 1,5 px é valor do canvas sem token (fica entre --space-1 e --space-2); 350 ms = --duracao-cor + --duracao-pressao. */
.fk-fichaelenco::after {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--texto-forte) 85%, transparent),
    0 0 0 var(--space-5) color-mix(in srgb, var(--texto-forte) 7%, transparent),
    0 0 var(--space-30) calc(var(--space-6) * -1) color-mix(in srgb, var(--branco) 22%, transparent);
  opacity: 0;
  transition: opacity calc(var(--duracao-cor) + var(--duracao-pressao)) var(--curva-opacidade);
}
.fk-fichaelenco--escolhendo::after,
.fk-fichaelenco:has(> .fk-fichaelenco__trocar[aria-pressed="true"])::after { opacity: 1; }

/* Lampejo: anel branco de 2 px com brilho a 34 %, que acende em 14 % e apaga (Main .slot::before, 1,1 s =
   --duracao-giro + --duracao-pressao). As classes -a e -b alternam para a animação recomeçar a cada escolha. */
.fk-fichaelenco::before {
  box-shadow:
    0 0 0 var(--space-2) var(--branco),
    0 0 calc(var(--space-32) + var(--space-4)) var(--space-3) color-mix(in srgb, var(--branco) 34%, transparent);
  opacity: 0;
}
.fk-fichaelenco--troca-a::before { animation: fk-fichaelenco-lampejo-a calc(var(--duracao-giro) + var(--duracao-pressao)) var(--curva-casa) var(--fk-fichaelenco-atraso); }
.fk-fichaelenco--troca-b::before { animation: fk-fichaelenco-lampejo-b calc(var(--duracao-giro) + var(--duracao-pressao)) var(--curva-casa) var(--fk-fichaelenco-atraso); }
@keyframes fk-fichaelenco-lampejo-a { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fk-fichaelenco-lampejo-b { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* ── Miniatura 3:4 com camadas que se cruzam ──────────────────────────────────────────────────────────────────── */
.fk-fichaelenco__miniatura {
  position: relative;
  flex: none;
  width: var(--fk-fichaelenco-mini-largura);
  height: var(--fk-fichaelenco-mini-altura);
  border-radius: var(--fk-fichaelenco-mini-raio);
  overflow: hidden;
  background: var(--midia-fundo);
  box-shadow: var(--shadow-miniatura);
}
/* Reflexo do alto (8 % até 35 % da altura) e filete interno de 9 % por cima da foto (Main .thumb::after). */
.fk-fichaelenco__miniatura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 9%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 8%, transparent), transparent 35%);
  pointer-events: none;
}
/* Camada: duas <img> (e um <video> de arquivo enviado) empilhadas; só a --frente aparece. A que sai fica atrás,
   a que entra vem de escala 1,12 e desfoque de 6 px (--desfoque-dica × 2). Opacidade e desfoque em 550 ms
   (--duracao-media + --duracao-pressao), escala em 800 ms (--duracao-silencio + --duracao-pressao) na curva da casa. */
.fk-fichaelenco__camada {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  filter: blur(calc(var(--desfoque-dica) * 2));
  transition:
    opacity calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-opacidade),
    transform calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa),
    filter calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-opacidade);
}
.fk-fichaelenco__camada--frente { opacity: 1; transform: none; filter: none; }
/* Vídeo enviado: entra já de frente, com a mesma chegada em 600 ms (Main .thumb video.lyr). */
video.fk-fichaelenco__camada { animation: fk-fichaelenco-camada var(--duracao-deslize) var(--curva-casa); }
@keyframes fk-fichaelenco-camada { from { opacity: 0; transform: scale(1.12); filter: blur(calc(var(--desfoque-dica) * 2)); } }

/* Vazia: ainda sem imagem (CriarMobile .thumb.is-empty + .tempty). O fundo vira poço, o filete fica e um + no centro. */
.fk-fichaelenco__miniatura--vazia {
  background: var(--poco);
  box-shadow: inset 0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 8%, transparent);
}
.fk-fichaelenco__miniatura--vazia .fk-fichaelenco__camada { opacity: 0; }
.fk-fichaelenco__vazio {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--texto-controle);
}

/* Salto da miniatura na troca: .9 → 1,05 → 1 em 700 ms (Main .slot.fl-a .thumb). */
.fk-fichaelenco--troca-a .fk-fichaelenco__miniatura { animation: fk-fichaelenco-salto-a var(--duracao-silencio) var(--curva-casa) var(--fk-fichaelenco-atraso); }
.fk-fichaelenco--troca-b .fk-fichaelenco__miniatura { animation: fk-fichaelenco-salto-b var(--duracao-silencio) var(--curva-casa) var(--fk-fichaelenco-atraso); }
@keyframes fk-fichaelenco-salto-a { 0% { transform: scale(.9); } 45% { transform: scale(var(--fk-fichaelenco-salto)); } 100% { transform: none; } }
@keyframes fk-fichaelenco-salto-b { 0% { transform: scale(.9); } 45% { transform: scale(var(--fk-fichaelenco-salto)); } 100% { transform: none; } }

/* ── Texto: legenda, nome e meta ──────────────────────────────────────────────────────────────────────────────── */
.fk-fichaelenco__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Legenda = estilo tipográfico `legenda` de tokens.json (Space Grotesk 500 10,5 px/1, .08em), repetido aqui porque o
   estilo é classe e o componente não a herda; caixa-alta, texto-dica sobre o poço (5,4:1). */
.fk-fichaelenco__legenda {
  color: var(--texto-dica);
  font: 500 10.5px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Nome = estilo `nome` (Manrope 600 14 px/1,2) em texto-forte (17:1 no poço); corta com reticências. */
.fk-fichaelenco__nome {
  display: block;
  overflow: hidden;
  color: var(--texto-forte);
  font: 600 14px/1.2 var(--font-texto);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Meta = estilo `numero-meta` (Space Grotesk 500 11,5 px/1,2) tabular em texto-apoio (7,1:1 no poço): "00:17 · 9:16". */
.fk-fichaelenco__meta {
  display: block;
  overflow: hidden;
  color: var(--texto-apoio);
  font: 500 11.5px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Meta em palavras (Personagem: "AI influencer", "Meu personagem"): a mesma medida em Manrope (Main, slot P). */
.fk-fichaelenco__meta--texto { font-family: var(--font-texto); }

/* Nome e meta sobem 6 px saindo do desfoque de 4 px em 600 ms; a meta 60 ms depois (Main .slot.fl-a .s-name).
   60 ms = --duracao-escalonamento × 1,5. */
.fk-fichaelenco--troca-a :is(.fk-fichaelenco__nome, .fk-fichaelenco__meta) { animation: fk-fichaelenco-texto-a var(--duracao-deslize) var(--curva-casa) var(--fk-fichaelenco-atraso) both; }
.fk-fichaelenco--troca-b :is(.fk-fichaelenco__nome, .fk-fichaelenco__meta) { animation: fk-fichaelenco-texto-b var(--duracao-deslize) var(--curva-casa) var(--fk-fichaelenco-atraso) both; }
.fk-fichaelenco:is(.fk-fichaelenco--troca-a, .fk-fichaelenco--troca-b) .fk-fichaelenco__meta {
  animation-delay: calc(var(--fk-fichaelenco-atraso) + var(--duracao-escalonamento) * 1.5);
}
@keyframes fk-fichaelenco-texto-a { from { opacity: 0; transform: translateY(var(--space-6)); filter: blur(var(--desfoque-texto)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fk-fichaelenco-texto-b { from { opacity: 0; transform: translateY(var(--space-6)); filter: blur(var(--desfoque-texto)); } to { opacity: 1; transform: none; filter: none; } }

/* ── Ação: a tecla Trocar (ou o remover redondo) à direita ────────────────────────────────────────────────────── */
/* O material, o hover, o afundar e o acesa (aria-pressed="true") vêm de .fk-tecla. */
.fk-fichaelenco__trocar { flex: none; }
/* Remover: tecla redonda de 30 px com o X de 12 px (CriarMobile, tray, .key.round com style 30 × 30 quando canRemove).
   Forma de .fk-tecla.fk-botaoredondo (32 px); aqui só desce a --tamanho-tecla. Três classes para vencer a forma. */
.fk-fichaelenco > .fk-tecla.fk-fichaelenco__remover {
  flex: none;
  width: var(--tamanho-tecla);
  height: var(--tamanho-tecla);
}

/* ── Pílula "Escolhendo…" no alto à direita, sobre a borda do poço ───────────────────────────────────────────── */
/* 18 px de altura (--tamanho-ref − 3), 9 px acima da borda e 14 px da direita; pílula clara em tinta-pilula (16,9:1);
   Manrope 700 9,5 px. A sombra é .45 (--sulco-sombra a 75 %). Entra de 5 px abaixo em escala .85: opacidade em 250 ms,
   posição em 450 ms na curva da casa. */
.fk-fichaelenco__escolhendo {
  position: absolute;
  z-index: 2;
  top: calc(var(--space-9) * -1);
  right: var(--space-14);
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  height: calc(var(--tamanho-ref) - var(--space-3));
  padding: 0 var(--space-8);
  border-radius: var(--radius-pilula);
  color: var(--tinta-pilula);
  background: var(--pilula);
  font: 700 9.5px/1 var(--font-texto);
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 var(--space-4) var(--space-10) color-mix(in srgb, var(--sulco-sombra) 75%, transparent);
  opacity: 0;
  transform: translateY(var(--space-5)) scale(.85);
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
  pointer-events: none;
}
/* Ponto de 5 px que pulsa a 25 % a cada 1,2 s (--duracao-giro + --duracao-rapida). */
.fk-fichaelenco__escolhendo::before {
  content: '';
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-circulo);
  background: var(--tinta-pilula);
  animation: fk-fichaelenco-pulso calc(var(--duracao-giro) + var(--duracao-rapida)) ease-in-out infinite;
}
@keyframes fk-fichaelenco-pulso { 50% { opacity: .25; } }
.fk-fichaelenco--escolhendo .fk-fichaelenco__escolhendo,
.fk-fichaelenco:has(> .fk-fichaelenco__trocar[aria-pressed="true"]) .fk-fichaelenco__escolhendo { opacity: 1; transform: none; }

/* ── Celular: compacta (linhas do Elenco, CriarMobile .slot.cast) e bandeja (o tray "Escolhendo", .ly-pick .slot) ── */
/* As duas usam o texto do celular (.s-txt/.s-cap/.s-name/.s-meta de CriarMobile): vão 5, legenda de 11 px em
   texto-nota, nome 13,5, meta 11; o salto vai a 1,06 e toda troca espera 250 ms (--duracao-cor), o tempo de a folha
   fechar (CriarMobile .slot.fl-a ... .25s). */
.fk-fichaelenco:is(.fk-fichaelenco--compacta, .fk-fichaelenco--bandeja) {
  --fk-fichaelenco-mini-raio: var(--radius-8);
  --fk-fichaelenco-salto: 1.06;
  --fk-fichaelenco-atraso: var(--duracao-cor);
}
.fk-fichaelenco:is(.fk-fichaelenco--compacta, .fk-fichaelenco--bandeja) .fk-fichaelenco__texto { gap: var(--space-5); }
.fk-fichaelenco:is(.fk-fichaelenco--compacta, .fk-fichaelenco--bandeja) .fk-fichaelenco__legenda { color: var(--texto-nota); font-size: 11px; }
.fk-fichaelenco:is(.fk-fichaelenco--compacta, .fk-fichaelenco--bandeja) .fk-fichaelenco__nome { font-size: 13.5px; }
.fk-fichaelenco:is(.fk-fichaelenco--compacta, .fk-fichaelenco--bandeja) .fk-fichaelenco__meta { font-size: 11px; }
/* Compacta: miniatura 42 × 56 (40 + 2, 56), vão 11, respiro 6 8 6 6. */
.fk-fichaelenco--compacta {
  --fk-fichaelenco-mini-largura: calc(var(--space-40) + var(--space-2));
  --fk-fichaelenco-mini-altura: var(--space-56);
  gap: var(--space-11);
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-6);
}
/* Bandeja: a miniatura do celular sem redução, 44 × 60 (.thumb: 40 + 4, 56 + 4), vão 12, respiro 7 9 7 7. Fica sempre
   em escolha (o tray só existe enquanto a galeria escolhe): use com --escolhendo. */
.fk-fichaelenco--bandeja {
  --fk-fichaelenco-mini-largura: calc(var(--space-40) + var(--space-4));
  --fk-fichaelenco-mini-altura: calc(var(--space-56) + var(--space-4));
  gap: var(--space-12);
  padding: var(--space-7) var(--space-9) var(--space-7) var(--space-7);
}

/* ── Topo da bandeja: "● Escolhendo @Imagem2" à esquerda e a tecla Concluir à direita (CriarMobile .trow2) ────── */
/* Linha de 32 px com vão 10. O rótulo é .fk-rotulo com .fk-rotulo__pulso (Rotulo) e a etiqueta
   .fk-ref.fk-etiqueta--rotulo.fk-etiqueta--celular (Etiqueta, o .tagc de 19 px);
   a tecla Concluir sobe a 32 px com 13 px de lado (.trow2 .key) e leva o ✓ de 13 px. */
.fk-fichaelenco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  height: var(--space-32);
}
.fk-fichaelenco-topo > .fk-rotulo { min-width: 0; }
.fk-fichaelenco-topo > .fk-tecla {
  flex: none;
  height: var(--space-32);
  padding: 0 var(--space-13);
}

/* ── Elo: a linha "quem aparece no vídeo vira" entre o vídeo e o personagem ───────────────────────────────────── */
/* Knob de 24 px (.fk-botaoredondo--sm) centrado sob a miniatura: 23 px de recuo (8 + 54/2 − 12), 24 px de altura
   (--space-24, a altura do knob; não é alvo de toque), puxado 4 px para cima e para baixo para encostar nos poços;
   texto Manrope 500 11 px. O canvas usa #8a8a90 (texto-nota), que cai para 4,4:1 dentro do módulo; como no número do
   rótulo (00-base), vai em texto-controle. */
.fk-fichaelenco-elo {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: var(--space-24);
  margin: calc(var(--space-4) * -1) 0;
  padding-left: calc(var(--space-22) + var(--space-1));
}
.fk-fichaelenco-elo__texto {
  color: var(--texto-controle);
  font: 500 11px/1 var(--font-texto);
}
/* Celular (CriarMobile .link): 22 px de altura, 6 px de puxão e 17 px de recuo. */
.fk-fichaelenco-elo--compacta {
  height: var(--space-22);
  margin: calc(var(--space-6) * -1) 0;
  padding-left: calc(var(--space-16) + var(--space-1));
}

/* ── Menos movimento: nada lampeja, salta, sobe nem se desfoca; a foto troca na hora e a pílula só aparece. ──── */
@media (prefers-reduced-motion: reduce) {
  .fk-fichaelenco__camada,
  .fk-fichaelenco__escolhendo { transition: none; }
  .fk-fichaelenco::before,
  .fk-fichaelenco .fk-fichaelenco__miniatura,
  .fk-fichaelenco .fk-fichaelenco__nome,
  .fk-fichaelenco .fk-fichaelenco__meta,
  .fk-fichaelenco__escolhendo::before,
  video.fk-fichaelenco__camada { animation: none; }
}

/* Source: FiltroVisual.css */
/* Fenaky Design System · FiltroVisual — filtro por imagem (catálogo de personagens).
   Um grupo é um módulo (fieldset) com rótulo numerado e uma grade de opções; cada opção é uma miniatura quadrada
   (ou 4:3 na grade larga) com legenda, que liga e desliga com anel claro e marca de visto. Inclui a contagem do grupo
   no rótulo, o rodapé "N filtros ativos · Limpar filtros" e o contador da tecla Filtros quando o painel está fechado.
   Fonte: Avatares.dc.html (.fgroup, .fgrid, .fg2, .fopt, .fth, .fat, .fchk, .fcap, .lbl .r.hot, .fbtn, .fcount) e
   public/catalog-filters.js. Usa as primitivas .fk-modulo, .fk-rotulo, .fk-tecla e .fk-sulco sem redefini-las. */

/* ── Grupo: módulo do painel, como fieldset ─────────────────────────────────────────────────────────────────── */
/* O grupo exige as duas classes (.fk-filtrovisual.fk-modulo). A folga de 12 px (fieldset.fgroup do canvas) usa o
   seletor composto para vencer os 14 px de .fk-modulo por especificidade, e não pela ordem das folhas. */
.fk-filtrovisual {
  min-width: 0;
  margin: 0;
  border: 0;
}
.fk-filtrovisual.fk-modulo { padding: var(--space-12); }
/* O legend flutua para ocupar a largura e deixar o rótulo em flex (número, nome e contagem à direita). */
.fk-filtrovisual__titulo {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--space-9);
}
/* Contagem do grupo ("1 ativo", "2 ativos"): fica na .fk-rotulo__dir e acende ao haver escolha. */
.fk-filtrovisual__ativos { transition: color var(--duracao-rapida) var(--curva-opacidade); }
.fk-filtrovisual__ativos--aceso {
  color: var(--texto-hover-rail);
  animation: fk-filtrovisual-dica var(--duracao-media) var(--curva-casa) both;
}
@keyframes fk-filtrovisual-dica { from { opacity: 0; transform: translateX(calc(var(--space-6) * -1)); filter: blur(var(--desfoque-dica)); } }

/* ── Grade: três por linha; a larga leva duas miniaturas 4:3 (Óculos) ──────────────────────────────────────── */
.fk-filtrovisual__grade {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}
.fk-filtrovisual__grade--larga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-filtrovisual__grade--larga .fk-filtrovisual__miniatura { aspect-ratio: 4 / 3; }
/* Legendas de duas palavras longas (Cabelo): reservam duas linhas para as miniaturas ficarem alinhadas. */
.fk-filtrovisual__grade--legenda-longa .fk-filtrovisual__legenda { min-height: 2.4em; }

/* ── Opção: botão com miniatura e legenda ─────────────────────────────────────────────────────────────────── */
.fk-filtrovisual__opcao {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-12);
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.fk-filtrovisual__miniatura {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--poco);
  box-shadow: var(--shadow-filtro);
  transition: box-shadow var(--duracao-anel) var(--curva-opacidade);
}
/* Fio interno e reflexo do alto, por cima da foto. */
.fk-filtrovisual__miniatura::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-filtro-filete);
  background: linear-gradient(180deg, var(--filtro-reflexo), transparent 38%);
  pointer-events: none;
}
/* Foto: recorte do retrato 3:4 dado pelo consumidor em % da miniatura (largura, esquerda, topo) e origem do zoom. */
.fk-filtrovisual__foto {
  position: absolute;
  left: var(--fv-esquerda, 0);
  top: var(--fv-topo, 0);
  width: var(--fv-largura, 100%);
  height: auto;
  max-width: none;
  transform-origin: var(--fv-origem, 50% 30%);
  filter: brightness(.9) saturate(.92);
  transition: transform var(--duracao-zoom) var(--curva-casa), filter var(--duracao-curta) var(--curva-opacidade);
}
/* As propriedades --fv-* (recorte, origem do zoom, atlas e célula) são reservadas a este componente. */
/* Atlas de produtos (acessórios e Com óculos): grade 3 × 2, a célula vem de --fv-col (0 a 2) e --fv-lin (0 a 1).
   O consumidor passa a imagem em --fv-atlas: url(...). Na grade larga mostra a largura toda e os 75% do meio. */
.fk-filtrovisual__atlas {
  position: absolute;
  inset: 0;
  background-color: var(--filtro-atlas-fundo);
  background-image: var(--fv-atlas, none);
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: calc(var(--fv-col, 0) * 50%) calc(var(--fv-lin, 0) * 100%);
  filter: brightness(.96) saturate(.94);
  transition: transform var(--duracao-zoom) var(--curva-casa), filter var(--duracao-curta) var(--curva-opacidade);
}
.fk-filtrovisual__grade--larga .fk-filtrovisual__atlas {
  background-size: 300% 266.667%;
  background-position: calc(var(--fv-col, 0) * 50%) calc(10% + var(--fv-lin, 0) * 80%);
}
/* Marca de escolhido: pílula clara com o visto, entra girando com mola.
   20 px de pílula e 11 px de visto são os de .fchk e do seu svg em Avatares.dc.html (sem token de tamanho próprio). */
.fk-filtrovisual__marca {
  position: absolute;
  z-index: 2;
  top: var(--space-5);
  right: var(--space-5);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circulo);
  color: var(--tinta-pilula);
  background: var(--pilula);
  box-shadow: var(--shadow-filtro-marca);
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  transition: opacity var(--duracao-marca) var(--curva-opacidade), transform var(--duracao-media) var(--curva-mola);
}
.fk-filtrovisual__marca svg { display: block; width: 11px; height: 11px; }
/* Manrope 600 11/1.2 é o .fcap do canvas: não há estilo tipográfico igual (.controle-sm é 11/1, sem as duas linhas). */
.fk-filtrovisual__legenda {
  color: var(--texto-unidade);
  font: 600 11px/1.2 var(--font-texto);
  text-wrap: balance;
  transition: color var(--duracao-rapida) var(--curva-opacidade);
}

/* Sob o ponteiro: o fio acende, a foto aproxima e clareia, a legenda sobe para quase branco. */
.fk-filtrovisual__opcao:hover .fk-filtrovisual__miniatura { box-shadow: var(--shadow-filtro-hover); }
.fk-filtrovisual__opcao:hover :is(.fk-filtrovisual__foto, .fk-filtrovisual__atlas) { transform: scale(1.07); filter: brightness(1.05) saturate(1); }
.fk-filtrovisual__opcao:hover .fk-filtrovisual__legenda { color: var(--texto-hover-rail); }

/* Escolhida (aria-pressed="true"): anel de 2 px com halo, marca visível, legenda acesa. */
:is(.fk-filtrovisual__opcao--escolhida, .fk-filtrovisual__opcao[aria-pressed="true"]) .fk-filtrovisual__miniatura { box-shadow: var(--shadow-filtro-escolhido); }
:is(.fk-filtrovisual__opcao--escolhida, .fk-filtrovisual__opcao[aria-pressed="true"]) .fk-filtrovisual__marca { opacity: 1; transform: none; }
:is(.fk-filtrovisual__opcao--escolhida, .fk-filtrovisual__opcao[aria-pressed="true"]) .fk-filtrovisual__legenda { color: var(--texto-aceso); }

/* ── Rodapé do painel: total ativo e Limpar filtros (tecla com aria-disabled quando não há filtro) ─────────── */
.fk-filtrovisual__rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.fk-filtrovisual__rodape > .fk-sulco { margin: 0 var(--space-4); }
.fk-filtrovisual__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-left: var(--space-6);
}
/* Manrope 500 11/1.5 = estilo tipográfico .nota. */
.fk-filtrovisual__total {
  color: var(--texto-nota);
  font: 500 11px/1.5 var(--font-texto);
  font-variant-numeric: tabular-nums;
}

/* ── Tecla Filtros: abre e fecha o painel; fechada, mostra quantos filtros estão ligados ──────────────────── */
/* Altura de 34 px, a das teclas do topo (tamanho-saldo), com folga de 13 px. Use com .fk-tecla. */
.fk-filtrovisual__alternar {
  height: var(--tamanho-saldo);
  padding: 0 var(--space-13);
}
.fk-filtrovisual__alternar > svg { flex: none; }
/* O contador nasce sem largura (margem -6 px come o gap da tecla) e abre espaço antes de o número entrar com mola.
   18 px de lado, raio 9 e Space Grotesk 700 10,5/1 são os de .fcount em Avatares.dc.html. */
.fk-filtrovisual__contador {
  display: inline-grid;
  place-items: center;
  width: 0;
  height: 18px;
  margin-left: calc(var(--space-6) * -1);
  border-radius: var(--radius-9);
  overflow: hidden;
  opacity: 0;
  transform: scale(.4);
  color: var(--tinta-pilula);
  background: var(--pilula);
  font: 700 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: width var(--duracao-contador) var(--curva-casa), margin var(--duracao-contador) var(--curva-casa), opacity var(--duracao-rapida) var(--curva-opacidade), transform var(--duracao-media) var(--curva-mola);
}
.fk-filtrovisual__contador--visivel {
  width: 18px;
  margin-left: 0;
  opacity: 1;
  transform: none;
}

/* ── Menos movimento: troca de estado sem zoom, giro nem deslize. ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-filtrovisual__miniatura, .fk-filtrovisual__foto, .fk-filtrovisual__atlas, .fk-filtrovisual__marca,
  .fk-filtrovisual__legenda, .fk-filtrovisual__ativos, .fk-filtrovisual__contador { transition: none; }
  .fk-filtrovisual__ativos--aceso { animation: none; }
}

/* Source: FolhaPersonagem.css */
/* Fenaky Design System · FolhaPersonagem — a folha completa do personagem (frente, costas e rosto) com a lupa.
   A prévia pública de um personagem do catálogo: a folha 3:2 recortada em raio 14, uma lente redonda que amplia 2,2×
   o ponto sob o ponteiro (a vista sob o ponteiro fica acesa e as vizinhas escurecem), a leitura discreta à esquerda do
   rodapé e a única ação, "Criar com este personagem", em lima no centro.
   Fonte: FolhaPersonagem.dc.html (.sheet, .sheet-img, .zone, .lens-pos, .lens, .lens i, .dfoot, .readout, .rise e os
   estados .is-zoom, .intro, .glide, .glide.fast, .is-closed), sobre o diálogo da Home (Home.dc.html, .dlg).
   Embalagem (uma regra só, repetida no README, em Dialogo e no livro 05):
   - desktop: o Dialogo (.fk-dialogo, véu e Esc) com a caixa .fk-dialogo__caixa.fk-folhapersonagem__caixa — 920 × 700,
     padding 10/10/20, vão 20 — e o fechar .fk-folhapersonagem__fechar de 36 px fora da caixa, a −50 px da direita;
   - celular (HomeMobile.dc.html, .sheet.psheet): .fk-casca.fk-casca--folha.fk-folhapersonagem__caixa--folha, padding
     0 × 12 × 24, com a pega (.fk-casca__pega) no alto; sem lupa e com a ação na largura inteira.
   A ação é a primitiva .fk-cta com .fk-cta--auto (Cta), dentro do invólucro .fk-folhapersonagem__vaga, que é quem sobe.
   Cores: os pretos do canvas saem de --bg na mesma opacidade e os brancos de --branco (color-mix), como em CardRetrato.
   Durações sem token próprio são somas de tokens, ditas ao lado de cada uma. */

/* ── Raiz: coluna com a folha e o rodapé, 20 px entre eles (o diálogo de 920 × 700 do canvas) ─────────────────── */
.fk-folhapersonagem {
  /* Largura da folha (900 px no canvas; o produto limita a 1080 px), ampliação da lente e diâmetro da lente. */
  --fp-largura: 900px;
  --fp-zoom: 2.2;
  --fp-lente: 184px;
  /* Espera comum antes do rodapé subir: 220 ms = duracao-rapida + metade de duracao-escalonamento. */
  --fp-atraso: calc(var(--duracao-rapida) + var(--duracao-escalonamento) / 2);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  width: var(--fp-largura);
  max-width: 100%;
  color: var(--texto);
  font-family: var(--font-texto);
}

/* Título só para leitores de tela ("Folha de estilo" no canvas): a folha não leva título visível. */
.fk-folhapersonagem__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Folha: 3:2, poço por trás, contorno preto de 1 px e filete claro por dentro ────────────────────────────── */
.fk-folhapersonagem__folha {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-14);
  background: var(--poco);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 80%, transparent); /* rgba(0,0,0,.8) */
}
.fk-folhapersonagem__folha::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--branco) 10%, transparent),  /* rgba(255,255,255,.1) */
    inset 0 1px 0 color-mix(in srgb, var(--branco) 18%, transparent);    /* rgba(255,255,255,.18) */
}

/* Imagem: a folha inteira, sem rótulos. Volta (ao abrir) em 700 / 1100 / 800 ms depois de 200 ms. */
.fk-folhapersonagem__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity var(--duracao-silencio) var(--curva-opacidade) var(--duracao-rapida),
    transform calc(var(--duracao-entrada) + var(--duracao-hover)) var(--curva-casa) var(--duracao-rapida), /* 1100 ms */
    filter calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-opacidade) var(--duracao-rapida); /* 800 ms */
}

/* ── Zonas: uma faixa por vista, divididas no meio de cada calha; sob o ponteiro a lente é o cursor ─────────── */
/* --fp-inicio e --fp-largura-zona em % da folha. Juno (1536 px): frente 0–28,78%, costas 28,78–54,78%, rosto 54,78–100%. */
.fk-folhapersonagem__zona {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fp-inicio, 0%);
  width: var(--fp-largura-zona, 100%);
  z-index: 2;
  cursor: none;
}
.fk-folhapersonagem__zona::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 36%, transparent); /* rgba(8,8,10,.36) */
  opacity: 0;
  transition: opacity calc(var(--duracao-curta) + var(--duracao-pressao)) var(--curva-opacidade); /* 400 ms */
}
/* Ampliando: as vistas vizinhas escurecem e a vista sob a lente fica acesa. */
.fk-folhapersonagem__folha--ampliando .fk-folhapersonagem__zona::after { opacity: 1; }
.fk-folhapersonagem__folha--ampliando .fk-folhapersonagem__zona--ativa::after { opacity: 0; }
/* Demonstração (a lente pousada na abertura) não é hover: a folha inteira continua acesa. */
.fk-folhapersonagem__folha--demonstracao .fk-folhapersonagem__zona::after { opacity: 0; }

/* ── Lente: posição (translate) e lente (fundo ampliado) andam na mesma curva, para o detalhe não sair da mira ── */
/* Três velocidades: seguir o cursor (100 ms, curva-troca), alcançar o cursor que entrou com a lente pousada ou
   sumindo (--rapida, 300 ms) e deslizar entre pontos pousados (--deslizando, 550 ms = duracao-media + duracao-pressao). */
.fk-folhapersonagem__lente-pos {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: var(--fp-lente);
  height: var(--fp-lente);
  pointer-events: none;
  will-change: transform;
  transition: transform var(--duracao-pressao) var(--curva-troca);
}
.fk-folhapersonagem__lente-pos--deslizando { transition: transform calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa); }
.fk-folhapersonagem__lente-pos--deslizando.fk-folhapersonagem__lente-pos--rapida { transition: transform var(--duracao-curta) var(--curva-casa); }

.fk-folhapersonagem__lente {
  position: relative;
  width: var(--fp-lente);
  height: var(--fp-lente);
  border-radius: var(--radius-circulo);
  /* Cor de espera enquanto a imagem carrega: o canvas usa o cinza claro da folha, #8b8a8c. Sem token de mídia para
     ela, vale o cinza mais próximo da escala, texto-rotulo (#909096), para a lente não virar um disco escuro. */
  background-color: var(--texto-rotulo);
  background-image: var(--fp-imagem, none);
  background-repeat: no-repeat;
  /* A folha ampliada: o script troca pelo tamanho medido quando a folha não está na --fp-largura. */
  background-size: calc(var(--fp-largura) * var(--fp-zoom)) calc(var(--fp-largura) * var(--fp-zoom) * 2 / 3);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg) 70%, transparent),              /* rgba(0,0,0,.7) */
    0 0 0 4px color-mix(in srgb, var(--casca-meio) 60%, transparent),      /* rgba(22,22,24,.6) */
    0 0 0 5px color-mix(in srgb, var(--branco) 24%, transparent),          /* rgba(255,255,255,.24) */
    0 24px 48px -10px color-mix(in srgb, var(--bg) 80%, transparent);      /* rgba(0,0,0,.8) */
  opacity: 0;
  transform: scale(.6);
  filter: blur(calc(var(--desfoque-dica) * 2)); /* 6 px */
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    background-position var(--duracao-pressao) var(--curva-troca);
}
.fk-folhapersonagem__lente-pos--deslizando .fk-folhapersonagem__lente {
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    background-position calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa);
}
.fk-folhapersonagem__lente-pos--deslizando.fk-folhapersonagem__lente-pos--rapida .fk-folhapersonagem__lente {
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    background-position var(--duracao-curta) var(--curva-casa);
}
.fk-folhapersonagem__folha--ampliando .fk-folhapersonagem__lente { opacity: 1; transform: none; filter: none; }
/* Na abertura a lente já pousa na vista da frente e surge depois que a folha assentou (900 ms após 1100 ms). */
.fk-folhapersonagem__folha--demonstracao.fk-folhapersonagem__folha--ampliando .fk-folhapersonagem__lente {
  animation: fk-folhapersonagem-lente var(--duracao-dialogo) var(--curva-casa) calc(var(--duracao-entrada) + var(--duracao-hover)) backwards;
}
@keyframes fk-folhapersonagem-lente { from { opacity: 0; transform: scale(.6); filter: blur(calc(var(--desfoque-dica) * 2)); } }
/* Vidro: reflexo no alto à esquerda, filete claro e sombra interna embaixo. */
.fk-folhapersonagem__lente::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circulo);
  background: radial-gradient(circle at 32% 22%, color-mix(in srgb, var(--branco) 20%, transparent), transparent 44%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--branco) 32%, transparent),  /* rgba(255,255,255,.32) */
    inset 0 -14px 28px color-mix(in srgb, var(--bg) 22%, transparent);  /* rgba(0,0,0,.22) */
}

/* Mira: anel de 8 px no centro da lente; perto da borda a lente para inteira dentro da folha (6 px de folga) e a mira
   sai do centro para continuar sob o cursor. */
.fk-folhapersonagem__mira {
  position: absolute;
  left: calc(var(--fp-lente) / 2 - var(--space-4));
  top: calc(var(--fp-lente) / 2 - var(--space-4));
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-circulo);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--branco) 75%, transparent),  /* rgba(255,255,255,.75) */
    0 0 0 2px color-mix(in srgb, var(--bg) 25%, transparent);      /* rgba(0,0,0,.25) */
  transition: transform var(--duracao-pressao) var(--curva-troca);
}
.fk-folhapersonagem__lente-pos--deslizando .fk-folhapersonagem__mira { transition: transform calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa); }
.fk-folhapersonagem__lente-pos--deslizando.fk-folhapersonagem__lente-pos--rapida .fk-folhapersonagem__mira { transition: transform var(--duracao-curta) var(--curva-casa); }

/* ── Rodapé: a ação no centro; a leitura da lupa quieta na borda esquerda ───────────────────────────────────── */
.fk-folhapersonagem__rodape {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--tamanho-cta);
}
/* Leitura: uma linha de estado, não um campo (sem poço nem borda). "Passe o mouse para ampliar" em repouso e na
   demonstração; "<Vista> · ampliado 2,2×" acesa enquanto amplia. texto-rotulo lê 5,9:1 na base da casca. */
.fk-folhapersonagem__leitura {
  position: absolute;
  left: var(--space-2);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--texto-rotulo);
  font: 500 11.5px/1 var(--font-display); /* estilo tipográfico numero-contagem (tokens.css): 500 11,5/1 Space Grotesk */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transition: color var(--duracao-cor) var(--curva-opacidade);
}
/* Ícone da lupa: #7c7c82 no canvas; sem token, texto-contagem (#7d7d84), 4,6:1 na casca (ícone pede 3:1). */
.fk-folhapersonagem__leitura svg {
  flex: none;
  color: var(--texto-contagem);
  transition:
    transform calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-casa), /* 500 ms */
    color var(--duracao-cor) var(--curva-opacidade);
}
.fk-folhapersonagem__leitura--acesa { color: var(--texto-hover-rail); }
.fk-folhapersonagem__leitura--acesa svg { color: var(--texto-hover-rail); transform: scale(1.12); }
/* A ação: CTA de 50 px que ajusta ao texto, com 26 px de cada lado (o canvas, width:auto; padding:0 26px). Vai dentro
   de .fk-folhapersonagem__vaga, que sobe e desce; assim a transição de filtro e pressão continua sendo só a do Cta. */
.fk-folhapersonagem__vaga { display: flex; justify-content: center; }
.fk-folhapersonagem__rodape .fk-folhapersonagem__acao { padding: 0 var(--space-26); }

/* ── Entrada e saída (o diálogo abre e fecha; ver Dialogo) ─────────────────────────────────────────────────────── */
/* Entrada: a imagem surge de um desfoque com leve escala depois de 250 ms; a ação e a leitura sobem 10 px em
   escalonamento (--fp-d: 60 ms na vaga da ação, 120 ms na leitura, mais --fp-atraso). Sobem pelo translate
   individual, num invólucro próprio no caso da ação, para a pressão (transform) e o hover do CTA continuarem intactos. */
.fk-folhapersonagem--entrada .fk-folhapersonagem__imagem {
  animation: fk-folhapersonagem-imagem calc(var(--duracao-entrada) + var(--duracao-hover)) var(--curva-casa) var(--duracao-cor) backwards;
}
@keyframes fk-folhapersonagem-imagem { from { opacity: 0; transform: scale(1.04); filter: blur(var(--desfoque-vidro)); } }
.fk-folhapersonagem--entrada .fk-folhapersonagem__sobe {
  animation: fk-folhapersonagem-sobe calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa) calc(var(--fp-d, 0ms) + var(--fp-atraso)) backwards; /* 800 ms */
}
@keyframes fk-folhapersonagem-sobe { from { opacity: 0; translate: 0 var(--space-10); } }
/* Ao reabrir, as mesmas peças voltam por transição (sem replay da animação). */
.fk-folhapersonagem__sobe {
  transition:
    opacity var(--duracao-deslize) var(--curva-opacidade) calc(var(--fp-d, 0ms) + var(--fp-atraso)),
    translate calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa) calc(var(--fp-d, 0ms) + var(--fp-atraso));
}
.fk-folhapersonagem__leitura.fk-folhapersonagem__sobe {
  transition:
    color var(--duracao-cor) var(--curva-opacidade),
    opacity var(--duracao-deslize) var(--curva-opacidade) calc(var(--fp-d, 0ms) + var(--fp-atraso)),
    translate calc(var(--duracao-silencio) + var(--duracao-pressao)) var(--curva-casa) calc(var(--fp-d, 0ms) + var(--fp-atraso));
}
/* Saindo: a imagem some para o desfoque (250 / 400 / 300 ms) e o rodapé desce 10 px (200 / 300 ms), sem espera. */
.fk-folhapersonagem--saindo .fk-folhapersonagem__imagem {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(var(--desfoque-vidro));
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform calc(var(--duracao-curta) + var(--duracao-pressao)) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade);
}
.fk-folhapersonagem--saindo .fk-folhapersonagem__sobe,
.fk-folhapersonagem--saindo .fk-folhapersonagem__leitura.fk-folhapersonagem__sobe {
  opacity: 0;
  translate: 0 var(--space-10);
  transition: opacity var(--duracao-rapida) var(--curva-opacidade), translate var(--duracao-curta) var(--curva-opacidade);
}
.fk-folhapersonagem--saindo .fk-folhapersonagem__folha { pointer-events: none; }

/* ── Embalagem: a caixa do diálogo no desktop e a folha do celular (ver o comentário do topo) ──────────────────── */
/* Desktop: soma-se a .fk-dialogo__caixa. 920 = 900 da folha + 2 × 10; altura 700 = 10 + 600 + 20 + 50 + 20. */
.fk-folhapersonagem__caixa {
  --fk-dialogo-largura: calc(var(--fp-largura, 900px) + var(--space-20));
  padding: var(--space-10) var(--space-10) var(--space-20);
}
/* Fechar: a tecla redonda de 36 px fora da caixa, alinhada ao topo, a −50 px da direita (canvas .dlg > .dx). Sem token
   de 36: --tamanho-tecla + --space-6. Dois níveis de classe para valer sobre .fk-tecla.fk-botaoredondo (32 px). */
.fk-folhapersonagem__caixa > .fk-folhapersonagem__fechar {
  position: absolute;
  top: 0;
  right: calc(-1 * (var(--space-48) + var(--space-2)));
  width: calc(var(--tamanho-tecla) + var(--space-6));
  height: calc(var(--tamanho-tecla) + var(--space-6));
}
/* Celular: soma-se a .fk-casca.fk-casca--folha. Padding 0 × 12 × 24 (HomeMobile .sheet.shell); a pega vem antes. */
.fk-folhapersonagem__caixa--folha {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-12) var(--space-24);
}

/* ── Estreita: sem lupa; a ação ocupa a linha inteira ───────────────────────────────────────────────────────────── */
/* Limite 736 px de folha = o celular do livro (até 760 px de janela) menos o padding de 12 + 12 da folha do celular.
   A folha do desktop tem 900 px e nunca entra aqui. No celular o vão cai para 12 e o CTA vai a 52 px
   (HomeMobile .sheet .cta: margin-top 12, height 52 = tamanho-cta + space-2). */
@container (max-width: 736px) {
  .fk-folhapersonagem__rodape { height: auto; }
  .fk-folhapersonagem__leitura,
  .fk-folhapersonagem__lente-pos { display: none; }
  .fk-folhapersonagem__zona { cursor: auto; }
  .fk-folhapersonagem__folha .fk-folhapersonagem__zona::after { opacity: 0; }
  .fk-folhapersonagem__vaga,
  .fk-folhapersonagem__rodape .fk-folhapersonagem__acao { width: 100%; }
  .fk-folhapersonagem__rodape .fk-folhapersonagem__acao { height: calc(var(--tamanho-cta) + var(--space-2)); }
  /* A raiz é o contêiner e não se estiliza daqui: o vão de 20 vira 12 pela margem da folha (−8). */
  /* Raio 20 do quadro do celular (HomeMobile .sframe); sem token de 20: --radius-14 + --radius-6. */
  .fk-folhapersonagem__folha {
    margin-bottom: calc(var(--space-12) - var(--space-20));
    border-radius: calc(var(--radius-14) + var(--radius-6));
  }
}
/* Sem ponteiro fino (toque) a lupa não existe: lente, leitura e véu das vistas somem e a zona devolve o cursor. */
@media (hover: none), (pointer: coarse) {
  .fk-folhapersonagem__leitura,
  .fk-folhapersonagem__lente-pos { display: none; }
  .fk-folhapersonagem__zona { cursor: auto; }
  .fk-folhapersonagem__folha .fk-folhapersonagem__zona::after { opacity: 0; }
}

/* ── Menos movimento: a lente aparece e acompanha sem deslizar; nada sobe nem desfoca ao abrir. ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-folhapersonagem *,
  .fk-folhapersonagem *::before,
  .fk-folhapersonagem *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Source: Link.css */
/* Fenaky Design System · Link — texto que leva a outro lugar ou faz uma ação leve, sem peso de tecla.
   Fontes: o `a` global das pranchas (a{color:#d6d6da} a:hover{#fff}, com o sublinhado do navegador), .toplink de
   Planos e PlanoResumo, .lnk de Agentes, .bnr a de NotificacoesCatalogo, .doc a de Termos, .foot a.mail de Agentes e
   Termos, .quiet de PlanoResumo, Conta e Suporte, .quiet de Resultado e .lk de Home, Ajuda, Mais e PreviewVideo.
   Só var(--token); o foco é o anel global de 00-base (2 px de --foco, afastado 3 px). */

/* ── Neutro: o link padrão das pranchas (Planos no topo, Minha conta no texto). ──────────────────────────────── */
.fk-link {
  border-radius: var(--radius-3);
  color: var(--texto-link);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--duracao-hover), text-decoration-color var(--duracao-hover);
}
.fk-link:hover { color: var(--branco); }
/* Como <button>: perde a cara de botão e herda a letra do texto em volta. */
.fk-link:where(button) {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}

/* Topo: Planos, à direita do local (link-topo, 600 12 px). Na página atual, branco com sublinhado violeta de 2 px. */
.fk-link--topo { font: 600 12px/1 var(--font-texto); }
.fk-link--topo[aria-current]:not([aria-current="false"]) {
  color: var(--texto-aceso);
  text-decoration-color: var(--violeta);
  text-decoration-thickness: 2px;
  text-underline-offset: var(--space-7);
}

/* Rodapé: e-mail e links do pé da página; o sublinhado só aparece sob o ponteiro. */
.fk-link--rodape {
  font: 600 12px/1 var(--font-texto);
  text-decoration: none;
}
.fk-link--rodape:hover { text-decoration: underline; text-underline-offset: var(--space-3); }

/* ── Violeta: link destacado dentro de uma frase (Termos de uso, e-mail, Fale com o suporte na faixa). ────────── */
.fk-link--violeta {
  color: var(--violeta);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--violeta-sublinhado);
  text-underline-offset: var(--space-3);
}
.fk-link--violeta:hover { color: var(--violeta-hover); }

/* ── Discreto: a saída secundária de um painel (Escolher outro plano, Cancelar assinatura). ──────────────────── */
/* #b4b4ba do canvas não é token: usa --texto-leitura (#b7b7bd), o cinza mais próximo (8,4:1 no topo da casca, 9,9:1 na página). */
.fk-link--discreto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  height: var(--tamanho-tecla);
  padding: 0 var(--space-2);
  border-radius: var(--radius-3);
  color: var(--texto-leitura);
  font: 600 12px/1 var(--font-texto);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--branco) 20%, transparent);
  text-underline-offset: var(--space-5);
  transition: color var(--duracao-rapida), text-decoration-color var(--duracao-rapida);
}
.fk-link--discreto:hover {
  color: var(--branco);
  text-decoration-color: color-mix(in srgb, var(--branco) 50%, transparent);
}
/* Perigo: a saída que desfaz algo (Cancelar assinatura, Encerrar atendimento) avisa em vermelho só sob o ponteiro. */
.fk-link--perigo:hover {
  color: var(--erro);
  text-decoration-color: color-mix(in srgb, var(--erro) 50%, transparent);
}

/* ── Ação: link curto ao lado de um título de bloco (Assistir trecho, Ver completa, Criar outro). ────────────── */
/* Sem sublinhado; sob o ponteiro ganha um fundo leve e o ícone anda 2 px na direção da seta. */
.fk-link--acao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--tamanho-tecla-sm);
  padding: 0 var(--space-8);
  border-radius: var(--radius-8);
  color: var(--texto-unidade);
  font: 600 11.5px/1 var(--font-texto);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duracao-hover), background var(--duracao-hover);
}
.fk-link--acao:hover {
  color: var(--branco);
  background: color-mix(in srgb, var(--branco) 4%, transparent);
}
/* Deslocamento de 350 ms do canvas: --duracao-deslocamento, token proposto às fundações. Enquanto ele não existir,
   o valor de reserva soma os dois tokens que dão os mesmos 350 ms. */
.fk-link--acao .fk-link__icone { transition: transform var(--duracao-deslocamento, calc(var(--duracao-hover) + var(--duracao-rapida))) var(--curva-casa); }
.fk-link--acao:hover .fk-link__icone { transform: translate(var(--space-2), calc(var(--space-2) * -1)); }
/* Rente: alinha o texto à borda direita do bloco, compensando o padding. */
.fk-link--rente { margin-right: calc(var(--space-8) * -1); }

.fk-link__icone { flex: none; display: block; }

/* ── Chamada: convite para descer a página, com a seta numa tecla redonda (Explorar influencers). ────────────── */
.fk-link--chamada {
  display: inline-flex;
  align-items: center;
  gap: var(--space-11);
  /* 46 px do canvas (.lk de Home) = a tecla de 30 px (--tamanho-tecla) + 8 px (--space-8) acima e abaixo. */
  height: calc(var(--tamanho-tecla) + var(--space-8) * 2);
  padding: 0;
  color: var(--texto-hover);
  font: 600 12.5px/1 var(--font-texto);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duracao-hover);
}
.fk-link--chamada:hover { color: var(--branco); }
/* A tecla é a primitiva .fk-tecla, redonda e de 30 px, só decorativa: quem reage é o link inteiro. */
.fk-link .fk-link__tecla {
  width: var(--tamanho-tecla);
  height: var(--tamanho-tecla);
  padding: 0;
  border-radius: var(--radius-circulo);
  transition: background var(--duracao-hover), transform var(--duracao-deslocamento, calc(var(--duracao-hover) + var(--duracao-rapida))) var(--curva-casa);
}
/* Desliga a pressão própria da primitiva (1 px e sombra afundada) quando o clique cai sobre a tecla. */
.fk-link .fk-link__tecla:active { transform: none; box-shadow: var(--shadow-tecla); }
/* Sob o ponteiro no link, a tecla acende e desce 2 px. */
.fk-link--chamada:hover .fk-link__tecla {
  background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base));
  transform: translateY(var(--space-2));
}

/* Celular (HomeMobile, NotificacoesMobile): ocupa a largura toda, centrada, 13 px, com tecla de 28 px que desce
   3 px ao toque. 44 px = --tamanho-alvo (32 px) + --space-12; o raio de 12 px arredonda o anel de foco. */
.fk-link--chamada-celular {
  display: flex;
  justify-content: center;
  width: 100%;
  height: calc(var(--tamanho-alvo) + var(--space-12));
  border-radius: var(--radius-12);
  font-size: 13px;
}
.fk-link--chamada-celular .fk-link__tecla {
  width: var(--tamanho-botao-redondo);
  height: var(--tamanho-botao-redondo);
}
.fk-link--chamada-celular:active .fk-link__tecla { transform: translateY(var(--space-3)); }

@media (prefers-reduced-motion: reduce) {
  .fk-link, .fk-link--acao .fk-link__icone, .fk-link .fk-link__tecla { transition: none; }
  .fk-link--acao:hover .fk-link__icone,
  .fk-link--chamada:hover .fk-link__tecla,
  .fk-link--chamada-celular:active .fk-link__tecla { transform: none; }
}

/* Source: ModeloCriarVideo.css */
/* Fenaky Design System · ModeloCriarVideo — o padrão de página do Criar vídeo.
   Rail à esquerda, o painel de criação (na lateral, que dobra, ou em barra no alto) e o palco: topo de 64 px com o
   seletor de layout, a galeria, os seletores contextuais que o painel abre (vídeo original, personagem) e o player que
   sobe no lugar de tudo ao Gerar. Este arquivo só monta o lugar de cada peça e a troca entre as vistas do palco; o
   material e as peças vêm das primitivas (00-base.css) e dos componentes Rail, PainelContextual, BarraCriacao, Topo,
   SeletorLayout, Abas, CardVideo, CardRetrato, AreaEnvio, Player, Etapas e Modulo, sem redefini-los.
   Origem: Main.dc.html (lateral: .stage, .pane, .it, .ggrid, .grid, .tgrid, .player, .info, .is-closed, .is-spread,
   .reflow, .dealt) e TrocarHorizontal.dc.html (barra: coluna de 1160, h1, .mode, .stage de 420, .gscroll, player
   compacto). As medidas sem token próprio são somas de tokens, indicadas ao lado. */

/* ── Raiz: a janela inteira. Vai no mesmo elemento que .fk-pagina (e .fk-pagina--pontos). ───────────────────────── */
/* No produto ocupa a viewport (o consumidor dá height: 100dvh); nas pranchetas, 1440 × 900. */
.fk-modelocriarvideo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* O que o consumidor esconde com o atributo hidden (as ações de cada fase, o chip "Pronto") some mesmo quando a peça
   tem display próprio. */
.fk-modelocriarvideo [hidden] { display: none; }

/* Rail: a 12 px das bordas da janela, por cima de tudo que corre no palco. Duas classes para vencer a casca. */
.fk-modelocriarvideo .fk-modelocriarvideo__rail {
  position: absolute;
  z-index: var(--camada-rail);
  left: var(--space-12);
  top: var(--space-12);
  bottom: var(--space-12);
}
/* O painel lateral é um .fk-painelcontextual--ancorado (x = 100, 12 px do alto e da base, 384 px). */

/* ── Palco: tudo à direita do painel (Main .stage) ────────────────────────────────────────────────────────────── */
/* Começa em 484 px (100 do rail + 384 do painel), com 64 px de respiro do painel e 40 px da borda direita. Quando o
   painel dobra, desliza até 100 px e o respiro cai para 40 (950 ms na curva da casa). */
.fk-modelocriarvideo__palco {
  position: absolute;
  left: calc(var(--tamanho-inicio-conteudo) + var(--tamanho-painel-criar));
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--space-40) 0 var(--space-64);
  transition:
    left var(--duracao-entrada) var(--curva-casa),
    padding-left var(--duracao-entrada) var(--curva-casa);
}
.fk-modelocriarvideo--recolhido .fk-modelocriarvideo__palco {
  left: var(--tamanho-inicio-conteudo);
  padding-left: var(--space-40);
}

/* ── Vista: galeria, escolher vídeo e escolher personagem dividem a área sob o topo (Main .pane) ─────────────── */
/* Só a vista aberta é visível e recebe cliques; a que fecha continua no DOM até os cards terminarem de sair (1 s). */
.fk-modelocriarvideo__vista {
  position: absolute;
  left: var(--space-64);
  right: var(--space-40);
  top: var(--tamanho-topo);
  bottom: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transition:
    visibility 0s var(--curva-linear) var(--duracao-giro),
    left var(--duracao-entrada) var(--curva-casa);
}
.fk-modelocriarvideo__vista--aberta {
  visibility: visible;
  pointer-events: auto;
  transition:
    visibility 0s,
    left var(--duracao-entrada) var(--curva-casa);
}
.fk-modelocriarvideo--recolhido .fk-modelocriarvideo__vista { left: var(--space-40); }

/* ── Item: cada peça de uma vista entra e sai sozinha, no próprio atraso --d (ms) ────────────────────────────── */
/* Sair também é animação (trocar entra por sai recomeça a animação, coisa que uma transição não faria): sobe 20 px,
   encolhe a .95 e desfoca 8 px em 550 ms (média + pressão), com metade do atraso. Entrar: sobe de 40 px, .96 e 16 px
   de desfoque, em 950 ms, depois do atraso do item mais 380 ms (o tempo de a vista anterior sair). */
.fk-modelocriarvideo__item {
  opacity: 0;
  animation: fk-modelocriarvideo-sai calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-casa) calc(var(--d, 0ms) * .5) both;
}
.fk-modelocriarvideo__vista--aberta .fk-modelocriarvideo__item {
  opacity: 1;
  animation: fk-modelocriarvideo-entra var(--duracao-entrada) var(--curva-casa) calc(var(--d, 0ms) + var(--duracao-atraso-entrada)) both;
}
@keyframes fk-modelocriarvideo-sai {
  0% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: translateY(calc(-1 * var(--space-20))) scale(.95); filter: blur(var(--desfoque-saida)); }
}
@keyframes fk-modelocriarvideo-entra {
  0% { opacity: 0; transform: translateY(var(--space-40)) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Redistribuir: o painel dobrou ou voltou e a galeria muda de colunas. Os cards saem depressa (400 ms, um quarto do
   atraso), a grade troca e eles voltam sem esperar outra vista (60 % do atraso + 40 ms). */
.fk-modelocriarvideo__vista--aberta.fk-modelocriarvideo__vista--refluxo .fk-modelocriarvideo__galeria .fk-modelocriarvideo__item {
  animation: fk-modelocriarvideo-sai var(--duracao-contador) var(--curva-casa) calc(var(--d, 0ms) * .25) both;
}
.fk-modelocriarvideo__vista--aberta.fk-modelocriarvideo__vista--redistribui .fk-modelocriarvideo__galeria .fk-modelocriarvideo__item {
  animation-delay: calc(var(--d, 0ms) * .6 + var(--duracao-escalonamento));
}

/* ── Galeria (a vista de abertura) ───────────────────────────────────────────────────────────────────────────── */
/* Título 32 px (titulo-pagina) a 32 px do topo; texto de apoio a 8 px. */
.fk-modelocriarvideo__abertura {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-32);
}
.fk-modelocriarvideo__titulo {
  margin: 0;
  color: var(--texto-titulo);
  font: 600 32px/1.1 var(--font-display);
  letter-spacing: -.025em;
}
/* corpo em texto-apoio: 7,1:1 sobre a página. */
.fk-modelocriarvideo__texto {
  margin: 0;
  color: var(--texto-apoio);
  font: 500 13px/1.5 var(--font-texto);
  text-wrap: pretty;
}
/* A fileira de abas (.fk-abas) da galeria: 30 px abaixo do título. */
.fk-modelocriarvideo__abas { margin-top: var(--space-30); }
/* Cinco colunas ao lado do painel; oito quando ele dobra (o consumidor põe --larga depois que os cards saíram). */
.fk-modelocriarvideo__galeria {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-26) var(--space-16);
  margin-top: var(--space-26);
}
.fk-modelocriarvideo__galeria--larga {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-24) var(--space-14);
}

/* ── Seletor contextual: o painel pediu "Trocar" e a escolha abre no palco (Main .p-videos, .p-people) ───────── */
/* Cabeça: rótulo com o slot, título e texto à esquerda; Concluir à direita, na base do texto. */
.fk-modelocriarvideo__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: var(--space-28);
}
.fk-modelocriarvideo__cabeca .fk-modelocriarvideo__titulo { margin-top: var(--space-12); }
.fk-modelocriarvideo__cabeca .fk-modelocriarvideo__texto { margin-top: var(--space-8); }
/* Concluir: tecla de 36 px (tecla + 6) com 14 px nas laterais, o tamanho das ações do palco. */
.fk-modelocriarvideo__acao {
  height: calc(var(--tamanho-tecla) + var(--space-6));
  padding: 0 var(--space-14);
}
/* Envio (.fk-areaenvio) 20 px abaixo da cabeça. */
.fk-modelocriarvideo__envio { margin-top: var(--space-20); }
/* Rótulo da galeria do seletor, 22 px abaixo do envio. */
.fk-modelocriarvideo__secao { margin-top: var(--space-22); }
/* Linha das origens do personagem: segmentado deslizante de 480 px à esquerda, contagem à direita. */
.fk-modelocriarvideo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-18);
}
.fk-modelocriarvideo__origens { width: 480px; }
/* Contagem na página (100 gratuitos, 126 na galeria): texto-contagem, 4,8:1 sobre a página. */
.fk-modelocriarvideo__contagem {
  color: var(--texto-contagem);
  font: 500 11.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rolagem: a grade ocupa o resto da vista e rola sozinha, sem barra, apagando nos últimos 44 px. Sai 8 px para os
   lados para o anel de escolha (2 + 6 px) não ser cortado. */
.fk-modelocriarvideo__rolagem {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: var(--space-12);
}
.fk-modelocriarvideo__rolagem--origens { margin-top: var(--space-14); }
.fk-modelocriarvideo__grade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--space-8));
  right: calc(-1 * var(--space-8));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start;
  padding: var(--space-8) var(--space-8) var(--space-56);
  overflow: auto;
  scrollbar-width: none;
  /* Na máscara só o alfa conta: var(--bg) é opaco. */
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-40) - var(--space-4)), transparent);
  mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-40) - var(--space-4)), transparent);
}
.fk-modelocriarvideo__grade::-webkit-scrollbar { display: none; }
.fk-modelocriarvideo__grade--videos { gap: var(--space-20) var(--space-14); }
/* Retratos: uma grade por origem; a aberta faz crossfade e sobe 12 px (some em 280 ms, entra em 450 ms depois de
   120 ms). A aberta herda a visibilidade da vista, então fechada ela some também da ordem do Tab. */
.fk-modelocriarvideo__grade--retratos {
  gap: var(--space-14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-12));
  transition:
    opacity var(--duracao-anel) var(--curva-opacidade),
    transform var(--duracao-central-fecha) var(--curva-casa),
    visibility 0s var(--curva-linear) var(--duracao-central-fecha);
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-64)), transparent);
  mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-64)), transparent);
}
.fk-modelocriarvideo__grade--aberta {
  opacity: 1;
  visibility: inherit;
  transform: none;
  transition:
    opacity var(--duracao-media) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 3),
    transform var(--duracao-silencio) var(--curva-casa) calc(var(--duracao-escalonamento) * 3),
    visibility 0s;
}

/* ── Estúdio: o player e os detalhes sobem no lugar de todas as vistas ao Gerar (Main .player) ───────────────── */
/* Vai no mesmo elemento que .fk-player__palco (que dá a entrada, a saída e o --oculto). Aqui ficam o lugar (64 px do
   topo, 24 px da base) e o deslize junto do palco quando o painel dobra. */
.fk-modelocriarvideo .fk-modelocriarvideo__estudio {
  position: absolute;
  left: var(--space-64);
  right: var(--space-40);
  top: var(--tamanho-topo);
  bottom: var(--space-24);
  transition:
    opacity var(--duracao-silencio) var(--curva-opacidade) var(--duracao-media),
    transform calc(var(--duracao-giro) + var(--duracao-pressao)) var(--curva-casa) var(--duracao-media),
    filter calc(var(--duracao-contador) * 2) var(--curva-opacidade) var(--duracao-media),
    visibility 0s,
    left var(--duracao-entrada) var(--curva-casa);
}
.fk-modelocriarvideo .fk-modelocriarvideo__estudio.fk-player__palco--oculto {
  transition:
    opacity var(--duracao-contador) var(--curva-opacidade),
    transform var(--duracao-deslize) var(--curva-casa),
    filter var(--duracao-contador) var(--curva-opacidade),
    visibility 0s var(--curva-linear) var(--duracao-deslize),
    left var(--duracao-entrada) var(--curva-casa);
}
.fk-modelocriarvideo--recolhido .fk-modelocriarvideo__estudio { left: var(--space-40); }

/* Detalhes ao lado do quadro (9:16): uma coluna de 330 px com rótulo, título, texto, etapas, resumo e, por último,
   as ações. Os dois grupos só ganham forma em 16:9 (--largo): o quadro largo em cima e, embaixo, título e ações ao
   lado das etapas, numa faixa de 720 px. */
.fk-modelocriarvideo__detalhes {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 330px;
}
.fk-modelocriarvideo__grupo { display: contents; }
.fk-modelocriarvideo__acoes { order: 1; margin-top: var(--space-4); }
.fk-modelocriarvideo__detalhes--largo {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-28);
  width: 720px;
}
.fk-modelocriarvideo__detalhes--largo .fk-modelocriarvideo__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.fk-modelocriarvideo__detalhes--largo .fk-modelocriarvideo__grupo:first-child { flex: 1; min-width: 0; }
.fk-modelocriarvideo__detalhes--largo .fk-modelocriarvideo__grupo:last-child { flex: none; width: 330px; }
/* Título da criação: 26 px (titulo-dialogo, entrelinha 1,15), anunciado quando muda. */
.fk-modelocriarvideo__criacao {
  margin: var(--space-4) 0 0;
  color: var(--texto-titulo);
  font: 600 26px/1.15 var(--font-display);
  letter-spacing: -.025em;
}
/* Texto da criação: corpo-compacto em texto-apoio (7,1:1 na página). */
.fk-modelocriarvideo__subtitulo {
  margin: 0;
  color: var(--texto-apoio);
  font: 500 12.5px/1.55 var(--font-texto);
  text-wrap: pretty;
}
/* Ações enquanto gera (Voltar à galeria + nota) e quando fica pronto (Baixar vídeo em lima, Ajustar e Criar outro). */
.fk-modelocriarvideo__fila {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.fk-modelocriarvideo__pilha {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.fk-modelocriarvideo__par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
/* Baixar vídeo: o CTA em 46 px (cta − 4) ao lado do quadro. */
.fk-modelocriarvideo__baixar { height: calc(var(--tamanho-cta) - var(--space-4)); }
/* Nota na página: texto-nota, 5,8:1. */
.fk-modelocriarvideo__nota {
  color: var(--texto-nota);
  font: 500 11px/1.5 var(--font-texto);
}

/* ── Barra: o painel vira uma barra no alto e o palco fica embaixo dela (TrocarHorizontal.dc.html) ───────────── */
/* Sem painel lateral: o palco começa logo depois do rail, com 40 px dos dois lados, e não dobra. */
.fk-modelocriarvideo--barra .fk-modelocriarvideo__palco {
  left: var(--tamanho-inicio-conteudo);
  padding: 0 var(--space-40);
  transition: none;
}
/* Coluna central de 1160 px: título, modo, a barra (.fk-barracriacao) e a cena. */
.fk-modelocriarvideo__coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
/* Título centrado: 30 px (titulo-secao com entrelinha 1,1). */
.fk-modelocriarvideo__titulo--barra {
  font-size: 30px;
  text-align: center;
}
/* Modo grande sob o título: trilho com 4 px de folga e raio 14, opções de 40 px (seg-modo + 2) com 22 px nas laterais
   e texto a 13 px, cada uma do tamanho do próprio texto. */
.fk-modelocriarvideo__modo {
  margin-top: var(--space-18);
  grid-auto-columns: auto;
  padding: var(--space-4);
  border-radius: var(--radius-14);
}
.fk-modelocriarvideo__modo .fk-seg__opcao {
  height: calc(var(--tamanho-seg-modo) + var(--space-2));
  padding: 0 var(--space-22);
  border-radius: var(--radius-10);
  font-size: 13px;
}
.fk-modelocriarvideo__barra { margin-top: var(--space-18); }
/* Cena: a área de 420 px sob a barra onde galeria, seletores e player se revezam (termina 15 px acima da base). */
.fk-modelocriarvideo__cena {
  position: relative;
  width: 100%;
  height: 420px;
  margin-top: var(--space-20);
}
.fk-modelocriarvideo__cena .fk-modelocriarvideo__vista { inset: 0; }
/* Na barra o item entra em 1 s (giro) e sai em 500 ms, sobe 22 px e encolhe a .94 com 6 px de desfoque. */
.fk-modelocriarvideo__cena .fk-modelocriarvideo__item {
  animation: fk-modelocriarvideo-sai-barra var(--duracao-central-fecha) var(--curva-casa) var(--d, 0ms) both;
}
.fk-modelocriarvideo__cena .fk-modelocriarvideo__vista--aberta .fk-modelocriarvideo__item {
  animation: fk-modelocriarvideo-entra var(--duracao-giro) var(--curva-casa) calc(var(--d, 0ms) + var(--duracao-atraso-entrada)) both;
}
@keyframes fk-modelocriarvideo-sai-barra {
  0% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: translateY(calc(-1 * var(--space-22))) scale(.94); filter: blur(var(--space-6)); }
}
/* Galeria da barra: as abas no alto e a grade de sete colunas rolando embaixo delas (42 px), apagando nos últimos
   78 px. Os 8 px de folga dos lados guardam o anel de escolha. */
.fk-modelocriarvideo__cena .fk-modelocriarvideo__abas { margin-top: 0; }
.fk-modelocriarvideo__cena .fk-modelocriarvideo__abas .fk-abas__aba { padding-bottom: var(--space-13); }
.fk-modelocriarvideo__rolagem--barra {
  position: absolute;
  top: calc(var(--space-40) + var(--space-2));
  left: calc(-1 * var(--space-8));
  right: calc(-1 * var(--space-8));
  bottom: 0;
  margin: 0;
  padding: var(--space-8) var(--space-8) var(--space-48);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-40) * 2 + var(--space-2)), transparent);
  mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-40) * 2 + var(--space-2)), transparent);
}
.fk-modelocriarvideo__rolagem--barra::-webkit-scrollbar { display: none; }
.fk-modelocriarvideo__galeria--barra {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-24) var(--space-14);
  margin-top: 0;
}
/* O player da barra sobe na cena (4 px acima dela) e usa o quadro compacto (.fk-player--compacto, 216 × 384) com
   56 px até os detalhes (.fk-player__palco--compacto), numa coluna de 340 px com 10 px entre as peças. */
.fk-modelocriarvideo__cena .fk-modelocriarvideo__estudio {
  inset: calc(-1 * var(--space-4)) 0 0 0;
}
.fk-modelocriarvideo__cena .fk-modelocriarvideo__detalhes {
  gap: var(--space-10);
  width: 340px;
}
.fk-modelocriarvideo__cena .fk-modelocriarvideo__criacao {
  margin-top: var(--space-2);
  font-size: 23px;
}
.fk-modelocriarvideo__cena .fk-modelocriarvideo__subtitulo { font-size: 12px; }
.fk-modelocriarvideo__cena .fk-modelocriarvideo__baixar {
  height: var(--space-40);
  font-size: 12.5px;
}

/* ── Menos movimento: nada desliza, escala ou desfoca; as vistas trocam num crossfade curto ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-modelocriarvideo__palco,
  .fk-modelocriarvideo__vista,
  .fk-modelocriarvideo__vista--aberta,
  .fk-modelocriarvideo .fk-modelocriarvideo__estudio,
  .fk-modelocriarvideo .fk-modelocriarvideo__estudio.fk-player__palco--oculto { transition: none; }
  .fk-modelocriarvideo__item,
  .fk-modelocriarvideo__cena .fk-modelocriarvideo__item { animation: fk-modelocriarvideo-apaga var(--duracao-rapida) var(--curva-opacidade) both; }
  .fk-modelocriarvideo__vista--aberta .fk-modelocriarvideo__item,
  .fk-modelocriarvideo__cena .fk-modelocriarvideo__vista--aberta .fk-modelocriarvideo__item,
  .fk-modelocriarvideo__vista--aberta.fk-modelocriarvideo__vista--refluxo .fk-modelocriarvideo__galeria .fk-modelocriarvideo__item { animation: fk-modelocriarvideo-acende var(--duracao-curta) var(--curva-opacidade) var(--duracao-hover) both; }
  .fk-modelocriarvideo__grade--retratos,
  .fk-modelocriarvideo__grade--aberta { transform: none; transition: opacity var(--duracao-rapida) var(--curva-opacidade), visibility 0s; }
}
@keyframes fk-modelocriarvideo-apaga { from { opacity: 1; } to { opacity: 0; } }
@keyframes fk-modelocriarvideo-acende { from { opacity: 0; } to { opacity: 1; } }

/* Source: ModeloPaginaApp.css */
/* Fenaky Design System · ModeloPaginaApp — o esqueleto de toda página do app com rail: a página com pontos, o rail
   preso à esquerda, a coluna principal com o topo de 64 px, o cabeçalho da página (sobretítulo, título de 32 px, apoio
   e a ação à direita) e o conteúdo que ocupa o resto. Variantes: conteúdo em painel (uma casca até a base), em colunas,
   em rolagem com as bordas esmaecidas e a do celular (rail de 62 px, título de 36 px, ações empilhadas). A troca de
   página sobe o que sai para o desfoque e traz o que entra de baixo, com escalonamento por peça.
   Fontes: Projetos.dc.html (main left 100, padding 0 40 12, flex; .head margin 18 0 26, .h1, .sub, .cta.sm, .panel),
   Conta.dc.html e Suporte.dc.html (.phead com .lbl "Seu espaço", .h1 margin 10 0 8, .who, .lead, .key.out
   margin-bottom −9, .layout 1fr 404 gap 16, .body 392 1fr), Assets.dc.html (.head h1, .head p), Influencers.dc.html
   (.top z 5, .page rolando com a máscara de 22 e 58 px, .ttl gap 12), Redes.dc.html (.view/.view.on: a vista que sai
   some em 700 ms; .cell sai a −18 px, .97 e 8 px; cellIn), Projetos/Assets/Resultado (rise/itIn 40 px, .96, 16 px,
   950 ms, opacidade cheia aos 55 %), HomeMobile/NotificacoesMobile/PlanosMobile (.col margin 0 16 0 94, .hero
   padding 12, .h1 500 36/1.05, .lede margin 16 13,5/1,62 32ch, .acts coluna gap 6 margin 24, rise 22 px e 10 px) e
   SPEC.md ("Casca do app": rail 12/76, topo 64, conteúdo em x = 100 + 40).
   As peças são de outros componentes e não são redefinidas aqui: .fk-pagina, .fk-casca, .fk-rotulo, .fk-cta (00-base),
   .fk-rail (Rail), .fk-topo (Topo). Este arquivo só posiciona e dá o ritmo vertical. Só var(--token), mais cinco
   medidas do canvas sem token, guardadas como propriedades locais na raiz com a origem de cada uma. */

/* ── Raiz: a página inteira (use junto com .fk-pagina e, no desktop, .fk-pagina--pontos) ───────────────────────────── */
/* O consumidor dá a altura: a janela (--tela) ou a do quadro onde a página é mostrada. */
.fk-modelopaginaapp {
  /* Medidas do canvas sem token nas fundações, guardadas aqui com a origem (o consumidor pode trocar cada uma):
     a camada do topo sobre o que rola (Influencers .top, z-index 5; abaixo do rail, --camada-rail 30), as laterais
     da grade em colunas (Conta .layout 404 px; Suporte .body 392 px), o respiro entre o cabeçalho e a primeira
     seção no celular (HomeMobile .vblock, 34 px) e o apoio do celular (HomeMobile .lede, Manrope 500 13,5/1,62). */
  --fk-modelopaginaapp-camada-topo: 5;
  --fk-modelopaginaapp-lateral: 404px;
  --fk-modelopaginaapp-lateral-esquerda: 392px;
  --fk-modelopaginaapp-respiro-celular: 34px;
  --fk-modelopaginaapp-apoio-celular: 500 13.5px/1.62 var(--font-texto);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.fk-modelopaginaapp--tela {
  height: 100vh;
  height: 100dvh;
}

/* ── Rail: a casca de 76 px a 12 px das bordas, acima do conteúdo (use junto com .fk-casca .fk-rail) ─────────────── */
.fk-modelopaginaapp__rail {
  position: absolute;
  top: var(--space-12);
  bottom: var(--space-12);
  left: var(--space-12);
  z-index: var(--camada-rail);
}

/* ── Principal: tudo à direita do rail. Começa em x = 100 (12 + 76 + 12) e respira 40 px de cada lado ──────────────── */
/* 12 px embaixo, para a casca do conteúdo parar na mesma linha da base do rail (Projetos). */
.fk-modelopaginaapp__principal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--tamanho-inicio-conteudo);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 var(--space-40) var(--space-12);
}
/* O topo (.fk-topo) fica em cima do conteúdo que rola ou que sobe na troca de página (Influencers .top: z 5). */
.fk-modelopaginaapp__topo {
  position: relative;
  z-index: var(--fk-modelopaginaapp-camada-topo);
  flex: none;
}

/* ── Corpo: o <main> da página, com o cabeçalho e o conteúdo ─────────────────────────────────────────────────── */
/* O topo fica fora dele. Com troca de página ou rolagem, a tag <main> pode ir direto em __vistas ou __rolagem, que
   já ocupam o resto da coluna; sem elas, use <main class="fk-modelopaginaapp__corpo">. */
.fk-modelopaginaapp__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ── Cabeçalho da página: textos à esquerda, a ação à direita, alinhados pela base ───────────────────────────────── */
/* 18 px abaixo do topo e 26 px até o conteúdo (Projetos .head; Conta .phead 18 + .layout 26). */
.fk-modelopaginaapp__cabecalho {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  margin: var(--space-18) 0 var(--space-26);
}
.fk-modelopaginaapp__textos { min-width: 0; }
/* Sobretítulo opcional (use junto com .fk-rotulo): "Seu espaço" nas páginas da conta, 10 px acima do título. */
.fk-modelopaginaapp__sobretitulo { margin: 0 0 var(--space-10); }
/* Título: estilo titulo-pagina (Space Grotesk 600 32/1,1, −0,025em), 18,0:1 sobre --bg. Um contador em poço pode
   vir ao lado, 12 px depois (Influencers .ttl). */
.fk-modelopaginaapp__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  color: var(--texto-titulo);
  font: 600 32px/1.1 var(--font-display);
  letter-spacing: -.025em;
}
.fk-modelopaginaapp__titulo:focus { outline: none; }
/* Apoio: uma linha que diz o que a página guarda (corpo 500 13/1,5 em --texto-apoio, 7,1:1 sobre --bg), 8 px abaixo. */
.fk-modelopaginaapp__apoio {
  margin: var(--space-8) 0 0;
  color: var(--texto-apoio);
  font: 500 13px/1.5 var(--font-texto);
}
/* O nome em destaque dentro do apoio (Conta .who b: 600 em --texto-link, 13,7:1). */
.fk-modelopaginaapp__apoio b,
.fk-modelopaginaapp__apoio strong { color: var(--texto-link); font-weight: 600; }
/* Ação: o CTA de página (.fk-cta--auto --md, 46 px) ou uma tecla; nunca encolhe. */
.fk-modelopaginaapp__acao {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
/* Tecla ao lado de um sobretítulo (Conta "Sair da conta Google", 36 px): desce 9 px para assentar na linha do apoio. */
.fk-modelopaginaapp__acao--baixa { margin-bottom: calc(var(--space-9) * -1); }

/* ── Conteúdo: ocupa o que sobra até a base ───────────────────────────────────────────────────────────────────── */
.fk-modelopaginaapp__conteudo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
/* Painel: o conteúdo é uma casca que desce até a base (Projetos .panel; use junto com .fk-casca). */
.fk-modelopaginaapp__conteudo--painel {
  display: flex;
  flex-direction: column;
}
/* Colunas: cascas lado a lado com 16 px entre elas e a lateral de 404 px à direita (Conta .layout). As linhas seguintes
   repetem a grade. Com --lateral-esquerda, a lateral vem antes, com 392 px (Suporte .body). */
.fk-modelopaginaapp__conteudo--colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fk-modelopaginaapp-lateral);
  align-content: start;
  gap: var(--space-16);
}
.fk-modelopaginaapp__conteudo--lateral-esquerda {
  grid-template-columns: var(--fk-modelopaginaapp-lateral-esquerda) minmax(0, 1fr);
}

/* ── Rolagem: o cabeçalho e o conteúdo rolam por baixo do topo parado (Influencers .page) ──────────────────────── */
/* Ocupa a largura toda da coluna (as margens negativas devolvem os 40 px ao padding, para a máscara ir de borda a
   borda) e chega à base. A máscara apaga 22 px em cima e 58 px embaixo; na máscara só o alfa conta, então as paradas
   são --bg com o alfa do canvas em cor relativa. Não use color-mix(…, transparent) aqui: o Chrome deixa a caixa
   inteira transparente com essas paradas (conferido no render). */
.fk-modelopaginaapp__rolagem {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 calc(var(--space-40) * -1) calc(var(--space-12) * -1);
  padding: var(--space-22) var(--space-40) var(--space-64);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(from var(--bg) r g b / .55) var(--space-9), var(--bg) var(--space-22), var(--bg) calc(100% - var(--space-56) - var(--space-2)), rgb(from var(--bg) r g b / .5) calc(100% - var(--space-28)), rgb(from var(--bg) r g b / .12) calc(100% - var(--space-9)), transparent);
  mask-image: linear-gradient(180deg, transparent 0, rgb(from var(--bg) r g b / .55) var(--space-9), var(--bg) var(--space-22), var(--bg) calc(100% - var(--space-56) - var(--space-2)), rgb(from var(--bg) r g b / .5) calc(100% - var(--space-28)), rgb(from var(--bg) r g b / .12) calc(100% - var(--space-9)), transparent);
}
.fk-modelopaginaapp__rolagem::-webkit-scrollbar { display: none; }
.fk-modelopaginaapp__rolagem > .fk-modelopaginaapp__cabecalho { margin-top: 0; }

/* ── Troca de página: vistas empilhadas no mesmo lugar ─────────────────────────────────────────────────────────── */
/* Cada vista leva o seu cabeçalho e o seu conteúdo (ou uma __rolagem com os dois); a célula única da grade tem a altura
   da coluna, para a rolagem de uma vista rolar dentro dela. Só a vista --atual aparece; a que sai fica visível 700 ms
   (--duracao-silencio) para as peças terminarem de subir, e só então some do foco e da leitura. */
.fk-modelopaginaapp__vistas {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.fk-modelopaginaapp__vista {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s var(--curva-linear) var(--duracao-silencio);
}
.fk-modelopaginaapp__vista--atual {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Peça: cada bloco que entra e sai (cabeçalho, filtros, cada casca). --d = atraso da peça (40 ms por peça,
   --duracao-escalonamento). Ao carregar, a peça sobe 40 px de 96 % e de 16 px de desfoque em 950 ms. Preenchimento
   backwards: terminada a entrada, a animação solta a peça, e a transição de saída consegue partir do lugar. */
.fk-modelopaginaapp__peca {
  animation: fk-modelopaginaapp-entra var(--duracao-entrada) var(--curva-casa) var(--d, 0ms) backwards;
}
/* Na troca, a vista nova espera 380 ms (--duracao-atraso-entrada) para a velha sair antes. O consumidor põe
   __vistas--trocando na primeira troca e deixa: na carga da página a vista aberta entra só com o --d de cada peça. */
.fk-modelopaginaapp__vistas--trocando .fk-modelopaginaapp__vista--atual .fk-modelopaginaapp__peca {
  animation-delay: calc(var(--d, 0ms) + var(--duracao-atraso-entrada));
}
/* A que sai sobe 18 px, encolhe a 97 % e desfoca 8 px: opacidade e desfoque em 300 ms, movimento em 500 ms
   (2 × --duracao-cor) na curva da casa, com um terço do atraso da peça (Redes .view .cell). */
.fk-modelopaginaapp__vista:not(.fk-modelopaginaapp__vista--atual) .fk-modelopaginaapp__peca {
  animation: none;
  opacity: 0;
  transform: translateY(calc(var(--space-18) * -1)) scale(.97);
  filter: blur(var(--desfoque-saida));
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade) calc(var(--d, 0ms) / 3),
    transform calc(var(--duracao-cor) * 2) var(--curva-casa) calc(var(--d, 0ms) / 3),
    filter var(--duracao-curta) var(--curva-opacidade) calc(var(--d, 0ms) / 3);
}
@keyframes fk-modelopaginaapp-entra {
  0% { opacity: 0; transform: translateY(var(--space-40)) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Celular (até 760 px): rail de 62 px a 8 px, coluna de x = 94 a 16 px da direita, tudo rola junto ─────────────── */
/* Não há @media: o consumidor põe --celular na raiz junto com .fk-rail--compacto no rail e .fk-topo--celular no topo
   (no servidor ou com matchMedia('(max-width: 760px)'); ver o README), porque as três classes mudam juntas.
   A coluna começa em 8 + 62 + 24 (HomeMobile .col). */
.fk-modelopaginaapp--celular .fk-modelopaginaapp__rail {
  top: var(--space-8);
  bottom: var(--space-8);
  left: var(--space-8);
}
.fk-modelopaginaapp--celular .fk-modelopaginaapp__principal {
  left: 0;
  display: block;
  padding: 0 var(--space-16) var(--space-16) calc(var(--space-8) + var(--tamanho-rail-celular) + var(--space-24));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.fk-modelopaginaapp--celular .fk-modelopaginaapp__principal::-webkit-scrollbar { display: none; }
.fk-modelopaginaapp--celular .fk-modelopaginaapp__corpo { display: block; }
/* Cabeçalho do celular: empilhado, 12 px abaixo do topo; o título vai a 500 36/1,05 com −0,04em e a segunda linha
   apagada (.fk-modelopaginaapp__apagado, --texto-titulo-apagado, 6,2:1 sobre --bg, texto grande). */
.fk-modelopaginaapp--celular .fk-modelopaginaapp__cabecalho {
  display: block;
  margin: 0;
  padding-top: var(--space-12);
}
.fk-modelopaginaapp--celular .fk-modelopaginaapp__titulo {
  display: block;
  font: 500 36px/1.05 var(--font-display);
  letter-spacing: -.04em;
}
.fk-modelopaginaapp__apagado { color: var(--texto-titulo-apagado); }
/* Apoio: 16 px abaixo, 13,5/1,62 e no máximo 32 caracteres por linha; o destaque em --texto-forte (HomeMobile .lede). */
.fk-modelopaginaapp--celular .fk-modelopaginaapp__apoio {
  max-width: 32ch;
  margin-top: var(--space-16);
  font: var(--fk-modelopaginaapp-apoio-celular);
  text-wrap: pretty;
}
.fk-modelopaginaapp--celular .fk-modelopaginaapp__apoio b,
.fk-modelopaginaapp--celular .fk-modelopaginaapp__apoio strong { color: var(--texto-forte); }
/* Ações: em coluna, 6 px entre elas, 24 px abaixo do texto (o CTA vai em .fk-cta--celular, 52 px). */
.fk-modelopaginaapp--celular .fk-modelopaginaapp__acao {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  margin-top: var(--space-24);
}
.fk-modelopaginaapp--celular .fk-modelopaginaapp__acao > .fk-link { align-self: center; }
/* Seções depois do cabeçalho: 34 px de respiro (HomeMobile .vblock). */
.fk-modelopaginaapp--celular .fk-modelopaginaapp__conteudo { margin-top: var(--fk-modelopaginaapp-respiro-celular); }
/* Entrada do celular: mais curta, 22 px e 10 px de desfoque (HomeMobile rise; 10 px = --desfoque-vidro). */
.fk-modelopaginaapp--celular .fk-modelopaginaapp__peca { animation-name: fk-modelopaginaapp-entra-celular; }
@keyframes fk-modelopaginaapp-entra-celular {
  from { opacity: 0; transform: translateY(var(--space-22)); filter: blur(var(--desfoque-vidro)); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ── Menos movimento: a página troca no lugar, sem subir, desfocar nem esperar. ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-modelopaginaapp__peca,
  .fk-modelopaginaapp__vistas--trocando .fk-modelopaginaapp__vista--atual .fk-modelopaginaapp__peca,
  .fk-modelopaginaapp--celular .fk-modelopaginaapp__peca { animation: none; }
  .fk-modelopaginaapp__vista,
  .fk-modelopaginaapp__vista:not(.fk-modelopaginaapp__vista--atual) .fk-modelopaginaapp__peca { transition: none; }
  .fk-modelopaginaapp__vista:not(.fk-modelopaginaapp__vista--atual) .fk-modelopaginaapp__peca { transform: none; filter: none; }
}

/* Source: Modulo.css */
/* Fenaky Design System · Modulo — o que se monta DENTRO do módulo (.fk-modulo, definido em 00-base.css).
   A superfície (brilho 4,2% → 1,6%, filete interno, sombra curta, raio 16, respiro 14) e o hover do módulo clicável
   (.fk-modulo--interativo) são primitivas e não mudam aqui. Este arquivo só acrescenta os arranjos aprovados no canvas:
   pilha de seção (Main, Motion, CriarMobile), versão compacta (CriarMobile), linha de ajuste (Main · Saída), lista com divisores (Main · etapas,
   Conta · fatos), resumo mini (Main · player), atalho para outra tela (Resultado · Guardado nos Assets) e a entrada. */

/* ── Pilha: seção do painel (rótulo numerado em cima, conteúdo embaixo, 10 px entre eles) ─────────────────────── */
.fk-modulo--pilha {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
/* Compacto: o mesmo módulo no celular, 12 px em cima e embaixo (CriarMobile.dc.html, .card no sheet). */
.fk-modulo--compacto { padding: var(--space-12) var(--space-14); }

/* ── Linha de ajuste: nome à esquerda, controle à direita (Formato, Duração) ─────────────────────────────────── */
.fk-modulo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
}
.fk-modulo__nome {
  min-width: 0;
  color: var(--texto-suave);
  font: 600 12.5px/1 var(--font-texto);
}

/* ── Lista: linhas separadas por divisor gravado (etapas do player, fatos da conta) ──────────────────────────── */
/* No canvas o respiro é do módulo (2 px 0) somado ao da lista (2 px 14 px), ou 0 + 4 px 16 px em Conta: 4 px em
   cima e embaixo nos dois. A lateral segue a do módulo (14). */
.fk-modulo--lista {
  margin: 0;
  padding: var(--space-4) var(--space-14);
  list-style: none;
}
.fk-modulo__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-11) 0;
  color: var(--texto-suave);
  font: 600 12.5px/1.2 var(--font-texto);
}
.fk-modulo__item + .fk-modulo__item {
  border-top: 1px solid var(--divisor-sombra);
  box-shadow: inset 0 1px 0 var(--divisor-luz);
}
.fk-modulo__item > .fk-modulo__valor { margin-left: auto; }

/* ── Mini: resumo numa linha (miniaturas, seta e o valor à direita) ──────────────────────────────────────────── */
.fk-modulo--mini {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
}
/* Largura mínima útil do resumo: 2 miniaturas + seta + "4 créditos" ≈ 220 px. Abaixo disso o valor quebra antes
   de passar da borda (o fecho encolhe; as miniaturas não). */
.fk-modulo--mini > .fk-modulo__fim { flex: 0 1 auto; min-width: 0; }
/* Miniatura de mídia dentro do módulo: 40 × 56 no resumo (Main .mini .thumb), mesma pele da miniatura do elenco. */
.fk-modulo__miniatura {
  position: relative;
  flex: none;
  width: 40px;
  height: 56px;
  border-radius: var(--radius-8);
  overflow: hidden;
  background: var(--midia-fundo);
  box-shadow: var(--shadow-miniatura);
}
.fk-modulo__miniatura > img,
.fk-modulo__miniatura > video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Filete e reflexo por cima da foto (no canvas .09 e .08; aqui os dois em casca-filete-base, .08). */
.fk-modulo__miniatura::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--casca-filete-base);
  background: linear-gradient(180deg, var(--casca-filete-base), transparent 35%);
  pointer-events: none;
}
/* Seta entre o antes e o depois: o botão redondo pequeno (24 px, Main .knob com style 24 px), só desenho. */
.fk-modulo__seta {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tamanho-botao-redondo-sm);
  height: var(--tamanho-botao-redondo-sm);
  border-radius: var(--radius-circulo);
  color: var(--texto-icone);
  background: radial-gradient(circle at 50% 30%, var(--botao-redondo-topo), var(--tecla-base) 70%);
  box-shadow: var(--shadow-botao-redondo);
}
/* Fecho à direita: valor em cima, nota embaixo, alinhados à direita. */
.fk-modulo__fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  margin-left: auto;
  text-align: right;
}
.fk-modulo__valor {
  color: var(--texto-forte);
  font: 600 12px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fk-modulo__fim > .fk-modulo__valor { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* O canvas usa #8a8a90 (4,4:1 sobre módulo); no sistema a nota dentro do módulo sobe para texto-controle (4,6:1). */
.fk-modulo__nota {
  color: var(--texto-controle);
  font: 500 11px/1.5 var(--font-texto);
}

/* ── Atalho: o módulo inteiro é um link para outra tela (Resultado · Guardado nos Assets) ───────────────────── */
/* Peça própria, sem .fk-modulo--interativo: no canvas (.saved:hover) o fundo NÃO clareia; acende o filete e a
   sombra projetada cresce (shadow-modulo-atalho-hover, 12 px 22 px), e o módulo sobe 1 px. O hover genérico do
   módulo clicável (.ni, .vmore) clareia o fundo e mantém a sombra curta; por isso o atalho repõe o fundo de repouso.
   Foco do teclado recebe o mesmo retorno do ponteiro (subida, miniatura, seta), além do anel global.
   Movimento: sombra em duracao-curta ease (.3 s ease no canvas); transform na curva da casa em duracao-media
   (450 ms, o mais próximo dos .5 s do canvas; o token de 600 ms fica para a miniatura, que no canvas usa .6 s). */
.fk-modulo--atalho {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-9) var(--space-12) var(--space-9) var(--space-9);
  color: var(--texto);
  text-decoration: none;
  transition: box-shadow var(--duracao-curta) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-modulo--atalho:hover,
.fk-modulo--atalho:focus-visible {
  color: var(--branco);
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base));
  box-shadow: var(--shadow-modulo-atalho-hover);
}
/* Miniatura do atalho: 36 × 48, anel escuro e filete claro, sem sombra projetada nem reflexo (.saved .th). */
.fk-modulo--atalho .fk-modulo__miniatura {
  width: 36px;
  height: 48px;
  box-shadow: var(--shadow-miniatura-atalho);
}
.fk-modulo--atalho .fk-modulo__miniatura::after { content: none; }
.fk-modulo--atalho .fk-modulo__miniatura > img { transition: transform var(--duracao-deslize) var(--curva-casa); }
.fk-modulo--atalho:hover .fk-modulo__miniatura > img,
.fk-modulo--atalho:focus-visible .fk-modulo__miniatura > img { transform: scale(1.06); }
.fk-modulo__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.fk-modulo__titulo {
  overflow: hidden;
  color: var(--texto);
  font: 600 12.5px/1.2 var(--font-texto);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fk-modulo__meta {
  overflow: hidden;
  color: var(--texto-controle);
  font: 500 11px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Abrir ↗": a seta anda 2 px para o destino (no canvas .35 s; aqui duracao-curta, 300 ms). */
.fk-modulo__ir {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--texto-unidade);
  font: 600 11.5px/1 var(--font-texto);
  transition: color var(--duracao-hover);
}
.fk-modulo__ir svg { transition: transform var(--duracao-curta) var(--curva-casa); }
.fk-modulo--atalho:hover .fk-modulo__ir,
.fk-modulo--atalho:focus-visible .fk-modulo__ir { color: var(--branco); }
.fk-modulo--atalho:hover .fk-modulo__ir svg,
.fk-modulo--atalho:focus-visible .fk-modulo__ir svg { transform: translate(2px, -2px); }

/* ── Entrada: o módulo sobe do desfoque para o lugar (itIn do canvas) ────────────────────────────────────────── */
/* --d = atraso do módulo (escalonamento de 40 ms por item; numa troca de conteúdo some duracao-atraso-entrada).
   fill backwards: depois de chegar, a animação solta o transform, para o hover do atalho continuar subindo. */
.fk-modulo--entra {
  animation: fk-modulo-entra var(--duracao-entrada) var(--curva-casa) var(--d, 0ms) backwards;
}
@keyframes fk-modulo-entra {
  0% { opacity: 0; transform: translateY(var(--space-40)) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Menos movimento: entra pronto, não sobe nem amplia. ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-modulo--entra { animation: none; }
  .fk-modulo--atalho,
  .fk-modulo--atalho .fk-modulo__miniatura > img,
  .fk-modulo__ir,
  .fk-modulo__ir svg { transition: none; }
  .fk-modulo--atalho:hover,
  .fk-modulo--atalho:focus-visible,
  .fk-modulo--atalho:hover .fk-modulo__miniatura > img,
  .fk-modulo--atalho:focus-visible .fk-modulo__miniatura > img,
  .fk-modulo--atalho:hover .fk-modulo__ir svg,
  .fk-modulo--atalho:focus-visible .fk-modulo__ir svg { transform: none; }
}

/* Source: PainelContextual.css */
/* Fenaky Design System · PainelContextual — a casca lateral que configura o trabalho da tela, ao lado do rail.
   Cabeçalho (rótulo, título, fechar ou ação, segmentado de modo, busca ou descrição), sulco, corpo que rola com
   módulos e rodapé com a leitura do que sai e, quando a tela tem ação final, o CTA. Dobra para a esquerda num
   desfoque e volta pelo mesmo caminho.
   O material (.fk-casca), os módulos (.fk-modulo), o poço (.fk-poco), o sulco (.fk-sulco + --cabecalho/--rodape do
   Sulco), a tecla (.fk-tecla) e o CTA (.fk-cta) não são redefinidos aqui: este arquivo só dá a forma do painel.
   Fontes: Main.dc.html e Ginga.dc.html (aside#painel 384 px, .panel, .is-closed .panel, .readout, .fade-end),
   Motion.dc.html (aside 356 px com .hdesc e .readout de duas linhas), Redes.dc.html (aside 340 px com contagem no
   título e tecla de ação) e Avatares.dc.html (.fpanel 308 px, Filtros). */

/* Bordas do corpo que rola: comprimentos animáveis pela linha do tempo da rolagem (Ginga .fade-end, --fs e --fe). */
@property --fk-painelcontextual-borda-topo { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fk-painelcontextual-borda-fim { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ── Raiz: vai no mesmo elemento que .fk-casca ─────────────────────────────────────────────────────────────────── */
/* Largura: 384 px no Criar vídeo (--tamanho-painel-criar). Motion usa 356, Redes 340 e Filtros 308: o consumidor
   troca --fk-painelcontextual-largura na raiz. Abrindo (volta): opacidade em 500 ms depois de 120 ms (3 × 40 ms),
   deslize em 950 ms na curva da casa depois de 60 ms (1,5 × 40 ms) e desfoque em 550 ms (450 + 100) depois de 100 ms
   — os tempos exatos de .panel em Main. */
.fk-painelcontextual {
  --fk-painelcontextual-largura: var(--tamanho-painel-criar);
  display: flex;
  flex-direction: column;
  width: var(--fk-painelcontextual-largura);
  min-height: 0;
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 3),
    transform var(--duracao-entrada) var(--curva-casa) calc(var(--duracao-escalonamento) * 1.5),
    filter calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-opacidade) var(--duracao-pressao),
    visibility 0s;
}

/* Ancorado: o lugar do canvas, colado ao rail (x = 100) e a 12 px do alto e da base da janela. Duas classes para
   vencer o position: relative da casca. */
.fk-painelcontextual.fk-painelcontextual--ancorado {
  position: absolute;
  left: var(--tamanho-inicio-conteudo);
  top: var(--space-12);
  bottom: var(--space-12);
}

/* Recolhido (o X dobrou o painel): sai 40 px para a esquerda, encolhe a .98 e some num desfoque de 12 px; a opacidade
   cai em 320 ms (8 × 40 ms), o deslize leva 600 ms, o desfoque 400 ms (300 + 100) e só no fim (600 ms) o painel sai da
   ordem de foco. Main .is-closed .panel. */
.fk-painelcontextual--recolhido {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(-1 * var(--space-40))) scale(.98);
  filter: blur(var(--desfoque-veu));
  transition:
    opacity calc(var(--duracao-escalonamento) * 8) var(--curva-opacidade),
    transform var(--duracao-deslize) var(--curva-casa),
    filter calc(var(--duracao-curta) + var(--duracao-pressao)) var(--curva-opacidade),
    visibility 0s var(--curva-linear) var(--duracao-deslize);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* 18 px nas laterais e no alto, 12 px embaixo; 16 px entre a linha do título e o segmentado de modo (Main). */
.fk-painelcontextual__cabecalho {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-18) var(--space-18) var(--space-12);
}
/* Com descrição no lugar do segmentado (Motion): 12 px entre título e texto, 8 px embaixo. */
.fk-painelcontextual__cabecalho--descricao {
  gap: var(--space-12);
  padding-bottom: var(--space-8);
}
/* Painel de lista (Redes, com a busca na segunda linha; Filtros, só com a linha do título): 14 px entre as linhas e
   14 px embaixo. Redes.dc.html header, padding 18px 18px 14px e gap 14px; Avatares .fpanel header, 14 px embaixo. */
.fk-painelcontextual__cabecalho--lista {
  gap: var(--space-14);
  padding-bottom: var(--space-14);
}
/* Linha do título: títulos à esquerda, fechar (tecla redonda de 32 px) ou tecla de ação à direita. */
.fk-painelcontextual__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.fk-painelcontextual__titulos {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
/* Espelha o estilo titulo-painel (Space Grotesk 600, 20 px, entrelinha 1, -0,02em), em texto-titulo: 15,3:1 sobre a
   casca. 9 px até a contagem (Redes h1). */
.fk-painelcontextual__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  margin: 0;
  color: var(--texto-titulo);
  font: 600 20px/1 var(--font-display);
  letter-spacing: -.02em;
}
/* Contagem ao lado do título (Redes "Seus canais 3", .cnt): uma pílula rebaixada no poço. Grade de 22 px de largura
   mínima por 20 px de altura, 6 px nas laterais, raio 7. O número usa 600 11 px Space Grotesk (o peso e o tamanho do
   estilo controle-sm, na família display) em texto-icone (#cfcfd4), que lê 12,7:1 sobre o poço. A sombra é
   shadow-contagem-pilula: sombra interna de 3 px e filete claro de 1 px. */
.fk-painelcontextual__contagem {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: var(--space-22);
  height: var(--space-20);
  padding: 0 var(--space-6);
  border-radius: var(--radius-7);
  background: var(--poco);
  box-shadow: var(--shadow-contagem-pilula);
  color: var(--texto-icone);
  font: 600 11px/1 var(--font-display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Descrição sob o título (Motion .hdesc): 12,5 px/1,5, ou seja, o estilo corpo-compacto com entrelinha 1,5, em
   texto-apoio (6,0:1 sobre a casca). */
.fk-painelcontextual__descricao {
  margin: 0;
  color: var(--texto-apoio);
  font: 500 12.5px/1.5 var(--font-texto);
  text-wrap: pretty;
}
.fk-painelcontextual__topo > .fk-tecla { flex: none; }
/* Tecla de ação no lugar do X (Redes "Novo canal"): 32 px de altura, a do X e do alvo mínimo (tamanho-alvo). */
.fk-painelcontextual__topo > .fk-tecla:not(.fk-tecla--redonda) { height: var(--tamanho-alvo); }

/* ── Corpo: rola sozinho entre o cabeçalho e o rodapé, sem barra visível (Main .scroll) ───────────────────────── */
.fk-painelcontextual__corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-12);
  overflow: auto;
  scrollbar-width: none;
}
.fk-painelcontextual__corpo::-webkit-scrollbar { display: none; }
.fk-painelcontextual__corpo > * { flex: none; }

/* Bordas que somem: a base esmaece só enquanto há mais painel abaixo (56 px de faixa) e o alto só depois de rolar
   (22 px), então um painel que cabe mostra o último módulo inteiro (Ginga .fade-end). Sem linha do tempo de rolagem,
   fica um esmaecimento fixo de 14 px na base. Na máscara só o alfa conta: var(--bg) é opaco. */
.fk-painelcontextual__corpo--bordas {
  -webkit-mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-14)), transparent);
  mask-image: linear-gradient(180deg, var(--bg) calc(100% - var(--space-14)), transparent);
}
@supports (animation-timeline: scroll()) {
  .fk-painelcontextual__corpo--bordas {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--bg) var(--fk-painelcontextual-borda-topo), var(--bg) calc(100% - var(--fk-painelcontextual-borda-fim)), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, var(--bg) var(--fk-painelcontextual-borda-topo), var(--bg) calc(100% - var(--fk-painelcontextual-borda-fim)), transparent 100%);
    animation: fk-painelcontextual-borda-topo linear both, fk-painelcontextual-borda-fim linear both;
    animation-timeline: scroll(self), scroll(self);
    animation-range: 0 var(--space-22), calc(100% - var(--space-56)) 100%;
  }
}
@keyframes fk-painelcontextual-borda-topo { from { --fk-painelcontextual-borda-topo: 0px; } to { --fk-painelcontextual-borda-topo: var(--space-22); } }
@keyframes fk-painelcontextual-borda-fim { from { --fk-painelcontextual-borda-fim: var(--space-56); } to { --fk-painelcontextual-borda-fim: 0px; } }

/* ── Rodapé: sulco, leitura e, quando a tela tem uma ação final, o CTA; sempre à vista ─────────────────────────── */
/* Sem CTA (Redes: "Canais e agendamento · Gratuitos"), o rodapé fica só com o sulco e a leitura. */
.fk-painelcontextual__rodape {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: 0 var(--space-12) var(--space-12);
}
/* Leitura (vai num .fk-poco): o que sai à esquerda, o custo à direita. Espelha o estilo numero-leitura (Space Grotesk
   500, 12 px, entrelinha 1,2) em texto-leitura (9,9:1 no poço); os valores em negrito vão em texto-forte (600). */
.fk-painelcontextual__leitura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-11) var(--space-14);
  color: var(--texto-leitura);
  font: 500 12px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-painelcontextual__leitura b { font-weight: 600; color: var(--texto-forte); }
.fk-painelcontextual__leitura > b { flex: none; }
/* Leitura que pode quebrar em duas linhas (Motion: "Esta edição usa até 30 créditos…"): entrelinha 1,35. */
.fk-painelcontextual__leitura--longa { line-height: 1.35; }

/* ── Menos movimento: o painel dobra e volta no lugar, sem deslize nem desfoque ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-painelcontextual,
  .fk-painelcontextual--recolhido { transition: none; }
  .fk-painelcontextual--recolhido { transform: none; filter: none; }
}

/* Source: PilhaToasts.css */
/* Fenaky Design System · PilhaToasts — a pilha de toasts do canto inferior direito, a 24 px das bordas.
   Até três na tela: o mais novo na frente; os de trás recuam 10 px a partir do filete do topo, escalam .96 e .92 e
   escurecem para 70% e 45% da luz do da frente sob uma camada escura (a casca segue opaca, a página não vaza pelo
   filete). Recolhida, uma pílula +N (no máximo +2) fica 4 px acima do filete mais alto; com o mouse ou o Tab a pilha
   abre, 10 px entre eles, e a pílula some. Do quarto em diante, só na central.
   Fontes: NotificacoesCatalogo.dc.html (02 Pilha: .pile, .tw.p0/.p1/.p2/.px, .pile.open, .tdim, .tmore, as cotas .mk e o
   bloco de reduced-motion), Notificacoes.dc.html (.toasts, .toasts.under, .toasts.tucked, .tw .hit, .tw.back .tin/.tbar,
   altura dos de trás igual à do da frente, transição de altura) e NOTIF.md (item 1). Cada item leva um Toast (.fk-toast);
   este arquivo não redefine nenhuma classe do toast, só a posição, a luz, a pílula e o movimento da pilha. Só var(--token);
   os tempos próprios da pilha são os tokens duracao-pilha-* (cada um cita no tokens.json o valor do canvas). */

/* Opacidade do conteúdo dos toasts de trás. Registrada para poder transicionar no item e chegar herdada aos filhos do
   toast, sem mexer nas transições que o Toast já põe neles (o fechar, a troca andamento → pronto). */
@property --fk-pilha-conteudo {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* ── Região ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Altura 0 ancorada no canto: os itens crescem para cima a partir da borda de baixo. */
.fk-pilhatoasts {
  position: fixed;
  z-index: var(--camada-toasts);
  right: var(--space-24);
  bottom: var(--space-24);
  width: var(--tamanho-toast);
  max-width: calc(100vw - 2 * var(--space-24));
  height: 0;
  /* Volta da central (.toasts): espera o painel sair. Opacidade e desfoque em 500 ms depois de 320 ms (8 passos de
     escalonamento); deslocamento em 850 ms depois de 280 ms (7 passos); a camada volta a 95 aos 450 ms. */
  transition:
    opacity var(--duracao-pilha-volta) var(--curva-opacidade) calc(8 * var(--duracao-escalonamento)),
    transform var(--duracao-pilha-volta-desliza) var(--curva-casa) calc(7 * var(--duracao-escalonamento)),
    filter var(--duracao-pilha-volta) var(--curva-opacidade) calc(8 * var(--duracao-escalonamento)),
    visibility 0s,
    z-index 0s var(--curva-linear) var(--duracao-media);
}
/* A região tem altura 0: um anel nela seria um traço achatado no rodapé do canto. Ela só recebe foco como último recurso,
   quando o último toast fecha e não há para onde devolver o foco (ver o README); o anel fica no alvo que recebe o foco. */
.fk-pilhatoasts:focus { outline: 0; }
/* Dentro de um contêiner posicionado (palco de documentação, prévia, quadro do celular): mesma pilha, sem fixar na janela. */
.fk-pilhatoasts--local { position: absolute; max-width: calc(100% - 2 * var(--space-24)); }

/* Com pop-up ou diálogo aberto (.toasts.under): desce para baixo do véu (70 < 80), desfoca com a página, não recebe
   clique nem foco e o tempo para (o script pausa os relógios). Nunca dois modais. */
.fk-pilhatoasts--sob-veu {
  z-index: var(--camada-pilha-sob-veu);
  pointer-events: none;
  transition:
    opacity var(--duracao-pilha-volta) var(--curva-opacidade),
    transform var(--duracao-pilha-volta-desliza) var(--curva-casa),
    filter var(--duracao-pilha-volta) var(--curva-opacidade),
    visibility 0s,
    z-index 0s;
}
/* Com a central aberta (.toasts.tucked): passa para baixo do painel (60 < 65), que já mostra o mesmo andamento, e se
   recolhe nele: 28 px para a direita, .97, desfoque de 6 px (o dobro de desfoque-dica). Opacidade e desfoque em 300 ms
   depois de 120 ms (3 passos), deslocamento em 600 ms. Tudo volta quando a central fecha. */
.fk-pilhatoasts--guardada {
  z-index: var(--camada-pilha-recolhida);
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--tamanho-pilha-guardada)) scale(.97);
  filter: blur(calc(2 * var(--desfoque-dica)));
  pointer-events: none;
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade) calc(3 * var(--duracao-escalonamento)),
    transform var(--duracao-deslize) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade) calc(3 * var(--duracao-escalonamento)),
    visibility 0s var(--curva-linear) var(--duracao-deslize),
    z-index 0s;
}

/* ── Itens: um por toast, o mais novo na frente ──────────────────────────────────────────────────────────────── */
/* Na marcação o mais novo vem primeiro, para o Tab chegar ao da frente antes dos de trás. A escala parte do topo,
   então cada um de trás mostra exatamente 10 px do próprio filete acima do da frente. */
.fk-pilhatoasts__item {
  --fk-pilha-escuro: 0;
  --fk-pilha-conteudo: 1;
  /* Movimento comum a todos os estados: posição e escala em 420 ms na curva da casa (como o toast que entra); a altura,
     quando o script a fixa (o andamento que vira vídeo pronto, 66 → 124 px), em 700 ms na curva-pilha. */
  --fk-pilha-mov:
    transform var(--duracao-entrada-toast) var(--curva-casa),
    opacity var(--duracao-entrada-toast) var(--curva-casa),
    height var(--duracao-pilha-altura) var(--curva-pilha);
  /* O conteúdo volta (à frente ou com a pilha aberta) em 350 ms depois de 120 ms (3 passos), como o .tin do produto. */
  --fk-pilha-mostra: --fk-pilha-conteudo var(--duracao-pilha-conteudo-volta) var(--curva-opacidade) calc(3 * var(--duracao-escalonamento));
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: 50% 0;
  transition: var(--fk-pilha-mov), var(--fk-pilha-mostra);
}
/* Preenche o vão de 10 px acima de cada um: com a pilha aberta, o ponteiro passa de um toast ao outro sem fechá-la. */
.fk-pilhatoasts__item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-12));
  height: var(--space-12);
}
/* Os de trás, recolhidos: recuam, escurecem e o conteúdo e a barra de tempo somem em 160 ms (.tw.back .tin e .tbar),
   para o texto e a barra não vazarem enquanto trocam de lugar ou de altura. Só o filete e a casca escurecida ficam. */
.fk-pilhatoasts__item--segundo,
.fk-pilhatoasts__item--terceiro {
  --fk-pilha-conteudo: 0;
  transition: var(--fk-pilha-mov), --fk-pilha-conteudo var(--duracao-pilha-conteudo) var(--curva-opacidade);
}
.fk-pilhatoasts__item--segundo {
  --fk-pilha-escuro: var(--opacidade-pilha-segunda);
  z-index: 2;
  transform: translateY(calc(-1 * var(--space-10))) scale(.96);
}
.fk-pilhatoasts__item--terceiro {
  --fk-pilha-escuro: var(--opacidade-pilha-terceira);
  z-index: 1;
  transform: translateY(calc(-2 * var(--space-10))) scale(.92);
}
/* Quarto em diante (ou ainda não chegou): fora da tela e do Tab; ele vive na central. */
.fk-pilhatoasts__item--fora {
  --fk-pilha-conteudo: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
/* Recolhida, os de trás ficam com a altura do da frente (o script escreve --fk-pilha-frente na região quando as
   alturas diferem, ex.: um vídeo pronto de 124 px atrás de um aviso de 66 px): só os 10 px do filete aparecem. */
.fk-pilhatoasts__item--segundo > :not(.fk-pilhatoasts__mais),
.fk-pilhatoasts__item--terceiro > :not(.fk-pilhatoasts__mais) {
  height: var(--fk-pilha-frente, auto);
  overflow: hidden;
}
/* O conteúdo do toast (ícone, textos, fechar, barra) segue --fk-pilha-conteudo; a camada escura não. Some só a
   opacidade herdada: nenhuma classe do Toast é redefinida e as transições dele continuam. */
.fk-pilhatoasts__item > .fk-toast > :not(.fk-pilhatoasts__escurece) {
  opacity: var(--fk-pilha-conteudo);
}
.fk-pilhatoasts__item:is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > .fk-toast > :not(.fk-pilhatoasts__escurece) {
  pointer-events: none;
}

/* A camada que escurece: último filho do toast, sobre o conteúdo e sob o filete da casca (camada 3), que continua
   aceso. Cor da página, opacidade .3 e .55 (70% e 45% da luz do da frente). */
.fk-pilhatoasts .fk-pilhatoasts__escurece {
  position: absolute;
  inset: 0;
  z-index: calc(var(--camada-casca-filete) - 1);
  border-radius: inherit;
  background: var(--bg);
  opacity: var(--fk-pilha-escuro, 0);
  pointer-events: none;
  transition: opacity var(--duracao-entrada-toast) var(--curva-opacidade);
}

/* ── Aberta: com o mouse, com o foco do teclado dentro, ou pelo script (.fk-pilhatoasts--aberta) ──────────────── */
/* Cada um mostra a própria altura, 10 px entre eles, sem escurecer e com o conteúdo de volta. Os deslocamentos padrão
   valem para alturas iguais; com alturas diferentes o script escreve em cada item --fk-pilha-y (soma das alturas abaixo
   + 10 px por vão, negativa). Só o foco visível abre: depois de um clique num X, a pilha ainda fecha quando o ponteiro sai. */
.fk-pilhatoasts--aberta :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro),
.fk-pilhatoasts:has(:focus-visible) :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) {
  --fk-pilha-escuro: 0;
  --fk-pilha-conteudo: 1;
  transition: var(--fk-pilha-mov), var(--fk-pilha-mostra);
}
.fk-pilhatoasts--aberta :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > .fk-toast > :not(.fk-pilhatoasts__escurece),
.fk-pilhatoasts:has(:focus-visible) :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > .fk-toast > :not(.fk-pilhatoasts__escurece) {
  pointer-events: auto;
}
.fk-pilhatoasts--aberta .fk-pilhatoasts__item--segundo,
.fk-pilhatoasts:has(:focus-visible) .fk-pilhatoasts__item--segundo {
  transform: translateY(var(--fk-pilha-y, calc(-100% - var(--space-10))));
}
.fk-pilhatoasts--aberta .fk-pilhatoasts__item--terceiro,
.fk-pilhatoasts:has(:focus-visible) .fk-pilhatoasts__item--terceiro {
  transform: translateY(var(--fk-pilha-y, calc(-200% - 2 * var(--space-10))));
}
.fk-pilhatoasts--aberta :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > :not(.fk-pilhatoasts__mais),
.fk-pilhatoasts:has(:focus-visible) :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > :not(.fk-pilhatoasts__mais) {
  height: auto;
}
/* O ponteiro só abre onde há ponteiro de verdade: no toque, o :hover ficaria preso depois do toque. */
@media (hover: hover) {
  .fk-pilhatoasts:hover :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) {
    --fk-pilha-escuro: 0;
    --fk-pilha-conteudo: 1;
    transition: var(--fk-pilha-mov), var(--fk-pilha-mostra);
  }
  .fk-pilhatoasts:hover :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > .fk-toast > :not(.fk-pilhatoasts__escurece) { pointer-events: auto; }
  .fk-pilhatoasts:hover .fk-pilhatoasts__item--segundo { transform: translateY(var(--fk-pilha-y, calc(-100% - var(--space-10)))); }
  .fk-pilhatoasts:hover .fk-pilhatoasts__item--terceiro { transform: translateY(var(--fk-pilha-y, calc(-200% - 2 * var(--space-10)))); }
  .fk-pilhatoasts:hover :is(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro) > :not(.fk-pilhatoasts__mais) { height: auto; }
}

/* ── Pílula +N: quantos esperam atrás do da frente ───────────────────────────────────────────────────────────── */
/* Vai dentro do item, antes do toast. O número sai da própria pilha (+1 com um atrás, +2 com dois), 4 px acima
   do filete mais alto: topo = -(10 px × atrás + 4 + 18 da pílula). Nunca cobre um filete; some quando a pilha abre.
   Gradiente do canvas #36363c → #26262b, que não virou token: usa as paradas mais próximas, tecla-hover-topo (#38383e)
   e tecla-hover-base (#2a2a2f); a sombra do canvas (.13 / .7 / .55) fica com shadow-botao-redondo (.14 / .65 / .6). */
.fk-pilhatoasts__mais {
  --fk-pilha-atras: 1;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(-1 * (var(--fk-pilha-atras) * var(--space-10) + var(--space-4) + var(--space-18)));
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-28);
  height: var(--space-18);
  padding: 0 var(--space-7);
  border-radius: var(--radius-pilula);
  color: var(--texto-tecla);
  font: 600 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base));
  box-shadow: var(--shadow-botao-redondo);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(var(--space-4)) scale(.7);
  /* Sai (.tmore): 200 ms de opacidade e 350 ms de escala; sobe com o terceiro em 500 ms. */
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--duracao-pilha-pilula-sai) var(--curva-casa),
    top var(--duracao-pilha-pilula) var(--curva-casa);
}
.fk-pilhatoasts__mais::before { content: '+' counter(fk-pilha-atras); counter-reset: fk-pilha-atras var(--fk-pilha-atras); }
.fk-pilhatoasts:has(.fk-pilhatoasts__item--terceiro) .fk-pilhatoasts__mais { --fk-pilha-atras: 2; }
/* Aparece (.tmore.on: 300 ms de opacidade e 600 ms de escala, atrasada 150 ms, depois que o novo pousou) só no da frente,
   com alguém atrás e com a pilha recolhida. Pode ir uma pílula em cada item: só a do item da frente (sem classe de
   posição e não saindo) aparece. */
.fk-pilhatoasts:has(.fk-pilhatoasts__item--segundo) .fk-pilhatoasts__item:not(:where(.fk-pilhatoasts__item--segundo, .fk-pilhatoasts__item--terceiro, .fk-pilhatoasts__item--fora, .fk-pilhatoasts__item--saindo)) > .fk-pilhatoasts__mais {
  opacity: 1;
  transform: translateX(-50%);
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade) var(--duracao-hover),
    transform var(--duracao-deslize) var(--curva-casa) var(--duracao-hover),
    top var(--duracao-pilha-pilula) var(--curva-casa);
}
/* Some quando a pilha abre (mesma força do seletor acima, e depois dele). */
.fk-pilhatoasts.fk-pilhatoasts--aberta .fk-pilhatoasts__item > .fk-pilhatoasts__mais,
.fk-pilhatoasts:has(:focus-visible) .fk-pilhatoasts__item > .fk-pilhatoasts__mais {
  opacity: 0;
  transform: translateX(-50%) translateY(var(--space-4)) scale(.7);
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--duracao-pilha-pilula-sai) var(--curva-casa);
}
@media (hover: hover) {
  .fk-pilhatoasts:hover .fk-pilhatoasts__item > .fk-pilhatoasts__mais {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--space-4)) scale(.7);
    transition:
      opacity var(--duracao-rapida) var(--curva-opacidade),
      transform var(--duracao-pilha-pilula-sai) var(--curva-casa);
  }
}

/* ── Entrar, sair e o relógio ────────────────────────────────────────────────────────────────────────────────── */
/* Quem desliza é o toast, com as classes dele (.fk-toast--entra ao chegar, .fk-toast--sai ao sair: da direita, 420 ms na
   curva da casa; para a direita, 260 ms na curva-saida). A pilha faz o resto na mesma curva e no mesmo tempo: o novo
   entra na frente e empurra os outros para trás. Saindo (X, Esc ou tempo), o item fica no lugar e por cima, fora do
   clique e sem pílula; os outros só tomam o lugar dele quando a saída termina (260 ms), para os textos não se
   cruzarem. Aí o script o retira do DOM e reordena a pilha. */
.fk-pilhatoasts__item--saindo { z-index: 4; pointer-events: none; }
/* O tempo de todos para enquanto a pessoa está na pilha (ponteiro ou foco), e com a pilha sob o véu ou guardada na
   central: só o relógio do Toast (.fk-toast__tempo-valor) é pausado; o desenho dele não muda. */
.fk-pilhatoasts:is(:hover, :focus-within, .fk-pilhatoasts--sob-veu, .fk-pilhatoasts--guardada) .fk-toast__tempo-valor { animation-play-state: paused; }

/* ── Anúncio do erro: lido, não visto ────────────────────────────────────────────────────────────────────────── */
/* A região da pilha fica sempre em aria-live="polite". Um erro também é escrito numa região irmã, assertiva e oculta
   (.sr do canvas), que só anuncia a frase do erro; trocar o aria-live da pilha montada falha nos leitores de tela. */
.fk-pilhatoasts__anuncio {
  position: absolute;
  width: var(--space-1);
  height: var(--space-1);
  margin: calc(-1 * var(--space-1));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Menos movimento: a pilha troca de lugar sem andar (o toast já entra e sai num fade, pelo Toast) ────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-pilhatoasts,
  .fk-pilhatoasts__item,
  .fk-pilhatoasts .fk-pilhatoasts__escurece,
  .fk-pilhatoasts .fk-pilhatoasts__mais { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Source: Player.css */
/* Fenaky Design System · Player — o quadro onde o vídeo pedido nasce e depois toca.
   Gerando: o quadro do vídeo original desfocado e escuro, a varredura de luz descendo, o anel lima com a porcentagem
   e a etapa, o resumo em vidro e o trilho de 3 px no pé. Pronto: anel, varredura e trilho somem e o vídeo gerado sai
   de um desfoque claro; a luz ambiente sobe. Prévia: o vídeo tocando com a barra de controles de vidro (play, tempo,
   linha do tempo com cabeça lima, som) e o play grande quando pausado.
   Fontes: Main.dc.html (.player, .frame-wrap, .ambient, .frame, .poster, .result, .sweep, .meter, .ring, .pct, .mlabel,
   .chips, .track; 9:16 338 × 600 e 16:9 720 × 405), Ginga.dc.html (igual), TrocarHorizontal.dc.html e
   GingaHorizontal.dc.html (compacto: raio 22, anel 100, folgas 12/14) e PreviewVideo.dc.html / Home.dc.html (.pv-frame,
   .pv-amb, .pv-shade, .pv-hit, .pv-ctrl, .tm, .pv-track, .pv-rail, .pv-fill, .pv-head, .is-paused).
   Cores só por var(--token); quando o canvas usa outra opacidade da mesma cor, ela sai do token com color-mix (para
   menos) ou com rgb(from …) (para mais), dizendo a conta. Durações que não são token saem de somas de tokens. */

/* ── Palco opcional: o quadro e a coluna de detalhes sobem juntos no lugar do que estava aberto ─────────────────── */
/* Main .player: 48 px entre o quadro e a coluna; em 16:9 a coluna vai para baixo, a 28 px. Compacto (barra): 56 px. */
.fk-player__palco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-48);
}
.fk-player__palco--largo { flex-direction: column; gap: var(--space-28); }
.fk-player__palco--compacto { gap: var(--space-56); }

/* ── Bloco: o quadro com a luz ambiente atrás ───────────────────────────────────────────────────────────────── */
.fk-player {
  position: relative;
  flex: none;
  isolation: isolate;
}

/* Entrada e saída (Main .player / .is-gen .player). Sai em 400 ms de opacidade e 600 ms de movimento; entra depois de
   450 ms, com opacidade em 700 ms, movimento em 1,1 s (giro + pressão) e foco em 800 ms (2 × contador). */
:is(.fk-player, .fk-player__palco) {
  transition:
    opacity var(--duracao-silencio) var(--curva-opacidade) var(--duracao-media),
    transform calc(var(--duracao-giro) + var(--duracao-pressao)) var(--curva-casa) var(--duracao-media),
    filter calc(var(--duracao-contador) * 2) var(--curva-opacidade) var(--duracao-media),
    visibility 0s;
}
:is(.fk-player--oculto, .fk-player__palco--oculto) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--space-40)) scale(.96);
  filter: blur(var(--desfoque-entrada));
  transition:
    opacity var(--duracao-contador) var(--curva-opacidade),
    transform var(--duracao-deslize) var(--curva-casa),
    filter var(--duracao-contador) var(--curva-opacidade),
    visibility 0s var(--curva-linear) var(--duracao-deslize);
}
/* Dentro de um palco, quem entra é o palco: o quadro não repete a entrada. */
.fk-player__palco > .fk-player { transition: none; }

/* Luz ambiente: a mesma imagem (ou o quadro do vídeo) espalhada 80 px além do quadro, sem receber cliques. */
.fk-player__ambiente {
  position: absolute;
  z-index: -1;
  top: calc(var(--space-40) * -2);
  left: calc(var(--space-40) * -2);
  width: calc(100% + var(--space-40) * 4);
  height: calc(100% + var(--space-40) * 4);
  object-fit: cover;
  filter: blur(var(--desfoque-ambiente)) saturate(1.5);
  opacity: .3;
  pointer-events: none;
  /* 1,4 s = 2 × silêncio. */
  transition: opacity calc(var(--duracao-silencio) * 2) var(--curva-opacidade);
}
.fk-player--pronto .fk-player__ambiente { opacity: .5; }

/* ── Quadro: poço com bisel de 7 px, sombra longa, grão e filete claro no topo ──────────────────────────────── */
/* Tamanho: --fk-player-largura e --fk-player-altura (Main 338 × 600 em 9:16 e 720 × 405 em 16:9). Sem eles, ocupa a
   largura do contêiner na proporção do formato. A troca de formato anima a largura e a altura (800 ms, curva da casa). */
.fk-player__quadro {
  position: relative;
  overflow: hidden;
  width: var(--fk-player-largura, 100%);
  height: var(--fk-player-altura, auto);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-24);
  background: var(--poco);
  box-shadow: var(--shadow-moldura);
  transition: width calc(var(--duracao-contador) * 2) var(--curva-casa), height calc(var(--duracao-contador) * 2) var(--curva-casa);
}
.fk-player--largo .fk-player__quadro { aspect-ratio: 16 / 9; }
/* Grão sobre a imagem: o canvas usa o ladrilho antigo a .06; o do sistema já traz o alfa da casca (.075), então .06 / .075 = .8. */
.fk-player__quadro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao);
  opacity: .8;
}
/* Filete: 1 px de branco a 10% em volta e 1 px a 20% no topo. */
.fk-player__quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 10%, transparent),
    inset 0 var(--space-1) 0 color-mix(in srgb, var(--branco) 20%, transparent);
}

/* Pôster: o quadro do vídeo original, 8% maior que o quadro para o desfoque não mostrar borda, apagado e escuro. */
.fk-player__poster {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  /* 22 px = véu (12) + vidro (10). */
  filter: blur(calc(var(--desfoque-veu) + var(--desfoque-vidro))) saturate(.6) brightness(.48);
  transition: opacity var(--duracao-giro) var(--curva-opacidade);
}
.fk-player--pronto .fk-player__poster { opacity: 0; }

/* Resultado: escondido num desfoque claro e 8% maior; ao ficar pronto, assenta em 900 ms (opacidade), 1,5 s (foco,
   5 × curta) e 1,7 s (escala, giro + silêncio). */
.fk-player__resultado {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 24 px = entrada (16) + saída (8). */
  filter: blur(calc(var(--desfoque-entrada) + var(--desfoque-saida))) brightness(1.35);
  transform: scale(1.08);
  transition:
    opacity var(--duracao-dialogo) var(--curva-opacidade),
    filter calc(var(--duracao-curta) * 5) var(--curva-casa),
    transform calc(var(--duracao-giro) + var(--duracao-silencio)) var(--curva-casa);
}
.fk-player--pronto .fk-player__resultado { opacity: 1; filter: none; transform: none; }
/* 16:9 mostra a parte de cima da cena, onde está o rosto (Main 24%; na barra compacta, 15%). */
.fk-player--largo :is(.fk-player__resultado, .fk-player__poster) { object-position: 50% 24%; }
.fk-player--largo.fk-player--compacto :is(.fk-player__resultado, .fk-player__poster) { object-position: 50% 15%; }

/* Varredura: uma faixa de 45% da altura desce de cima a baixo em 2,8 s, com o centro tingido de lima. */
.fk-player__varredura {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: -45%;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--branco) 5%, transparent) 40%,
    color-mix(in srgb, var(--lima) 12%, transparent) 50%,
    color-mix(in srgb, var(--branco) 5%, transparent) 60%,
    transparent);
  animation: fk-player-varredura var(--duracao-varredura) var(--curva-varredura) infinite;
  transition: opacity var(--duracao-central-fecha);
}
@keyframes fk-player-varredura { to { top: 110%; } }
.fk-player--pronto .fk-player__varredura { opacity: 0; }

/* ── Medidor: anel com a porcentagem e a etapa, no centro do quadro ─────────────────────────────────────────── */
/* --fk-player-progresso (0 a 100, no .fk-player) move o anel e o trilho juntos. */
.fk-player__medidor {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  pointer-events: none;
  transition: opacity var(--duracao-central-fecha) var(--curva-opacidade), transform calc(var(--duracao-contador) * 2) var(--curva-casa);
}
.fk-player--pronto .fk-player__medidor { opacity: 0; transform: scale(.9); }
/* 116 px (2 × 56 + 4); compacto 100 px (2 × 48 + 4). O SVG é sempre viewBox 0 0 116 116, r = 50, e escala junto. */
.fk-player__anel-caixa {
  position: relative;
  width: calc(var(--space-56) * 2 + var(--space-4));
  height: calc(var(--space-56) * 2 + var(--space-4));
}
.fk-player__anel {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}
/* Traço de 4 unidades do viewBox (em SVG, 1 px de CSS = 1 unidade): escala junto com o anel. */
.fk-player__anel :is(.fk-player__anel-fundo, .fk-player__anel-valor) { fill: none; stroke-width: var(--space-4); }
.fk-player__anel-fundo { stroke: color-mix(in srgb, var(--branco) 10%, transparent); }
/* 314,16 = 2π × 50. */
.fk-player__anel-valor {
  stroke: var(--lima);
  stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: calc(314.16px * (1 - var(--fk-player-progresso, 0) / 100));
  filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--lima) 65%, transparent));
  transition: stroke-dashoffset var(--duracao-rapida) var(--curva-linear);
}
/* Número: o estilo .numero-anel (Space Grotesk 600 30 px, entrelinha 1, -0,03em) em texto-aceso; a unidade no tamanho de
   .numero-valor (14 px) em texto-unidade. Os tamanhos ficam aqui porque o compacto os troca. */
.fk-player__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-aceso);
  font: 600 30px/1 var(--font-display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fk-player__pct-unidade { margin-left: var(--space-2); color: var(--texto-unidade); font-size: 14px; }
/* Etapa: o estilo .aba (Manrope 600 12,5 px, entrelinha 1) em texto-link, com sombra para ler sobre a imagem escurecida. */
.fk-player__etapa {
  color: var(--texto-link);
  font: 600 12.5px/1 var(--font-texto);
  text-shadow: 0 var(--space-1) var(--space-8) var(--sulco-sombra);
}

/* ── Chips de vidro no alto e trilho no pé ──────────────────────────────────────────────────────────────────── */
/* Resumo do pedido à esquerda (.fk-vidro), "Pronto" à direita quando terminar. */
.fk-player__chips {
  position: absolute;
  z-index: 6;
  left: var(--space-16);
  right: var(--space-16);
  top: var(--space-16);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.fk-player__chips > * { pointer-events: auto; }
.fk-player__trilho {
  position: absolute;
  z-index: 6;
  left: var(--space-16);
  right: var(--space-16);
  bottom: var(--space-16);
  height: var(--tamanho-trilho);
  overflow: hidden;
  border-radius: var(--radius-3);
  background: color-mix(in srgb, var(--branco) 14%, transparent);
  transition: opacity var(--duracao-central-fecha);
}
.fk-player__trilho-valor {
  display: block;
  width: calc(var(--fk-player-progresso, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--lima);
  box-shadow: 0 0 var(--space-12) var(--lima-halo);
  transition: width var(--duracao-rapida) var(--curva-linear);
}
.fk-player--pronto .fk-player__trilho { opacity: 0; }

/* ── Compacto: o player da barra horizontal (TrocarHorizontal, GingaHorizontal) ─────────────────────────────── */
.fk-player--compacto .fk-player__ambiente {
  /* 70 px = 56 + 14; desfoque 70 = ambiente (80) − vidro (10). */
  top: calc((var(--space-56) + var(--space-14)) * -1);
  left: calc((var(--space-56) + var(--space-14)) * -1);
  width: calc(100% + (var(--space-56) + var(--space-14)) * 2);
  height: calc(100% + (var(--space-56) + var(--space-14)) * 2);
  filter: blur(calc(var(--desfoque-ambiente) - var(--desfoque-vidro))) saturate(1.5);
}
/* Raio 22 e sombra longa um pouco menor (44 / 100 px, = 40 + 4 e 2 × 48 + 4); o preto vem de sulco-sombra com o alfa do
   canvas. O bisel (1, 7 e 8 px) é o mesmo de --shadow-moldura. */
.fk-player--compacto .fk-player__quadro {
  border-radius: var(--radius-22);
  box-shadow:
    0 0 0 var(--space-1) rgb(from var(--sulco-sombra) r g b / .8),
    0 0 0 var(--space-7) color-mix(in srgb, var(--branco) 3%, transparent),
    0 0 0 var(--space-8) rgb(from var(--sulco-sombra) r g b / .55),
    0 calc(var(--space-40) + var(--space-4)) calc(var(--space-48) * 2 + var(--space-4)) calc(var(--space-24) * -1) rgb(from var(--sulco-sombra) r g b / .95);
}
.fk-player--compacto .fk-player__medidor { gap: var(--space-14); }
.fk-player--compacto .fk-player__anel-caixa {
  width: calc(var(--space-48) * 2 + var(--space-4));
  height: calc(var(--space-48) * 2 + var(--space-4));
}
/* Tipo do compacto (TrocarHorizontal .pct, .pct small, .mlabel): número 26 px no peso e no espaçamento de .numero-anel,
   unidade no tamanho de .numero-topo (13 px) e etapa no tamanho de .link-topo (Manrope 600 12 px). */
.fk-player--compacto .fk-player__pct { font-size: 26px; }
.fk-player--compacto .fk-player__pct-unidade { font-size: 13px; }
.fk-player--compacto .fk-player__etapa { font-size: 12px; }
.fk-player--compacto .fk-player__chips { left: var(--space-12); right: var(--space-12); top: var(--space-12); gap: var(--space-6); }
.fk-player--compacto .fk-player__trilho { left: var(--space-14); right: var(--space-14); bottom: var(--space-14); }

/* ── Prévia: o vídeo pronto tocando, com controles (PreviewVideo e Home .pv-*) ──────────────────────────────── */
/* Quadro de raio 18; a luz ambiente é mais baixa (.18) e dessaturada. Ela só acende na camada da cena que está na frente
   (.fk-player__ambiente--ativo, o .pv-amb.on do canvas): ao abrir, quando o quadro do vídeo carregou; ao trocar de clipe, a
   camada antiga apaga e a nova acende juntas, em 1,1 s (giro + pressão). */
.fk-player--previa .fk-player__quadro { border-radius: var(--radius-18); }
.fk-player--previa .fk-player__quadro::before { z-index: 6; }
.fk-player--previa .fk-player__quadro::after { z-index: 7; }
.fk-player--previa .fk-player__ambiente {
  top: calc(var(--space-40) * -1);
  left: calc(var(--space-30) * -2);
  width: calc(100% + var(--space-30) * 4);
  height: calc(100% + var(--space-40) * 2);
  filter: blur(calc(var(--desfoque-ambiente) - var(--desfoque-vidro))) saturate(.6);
  opacity: 0;
  transition: opacity calc(var(--duracao-giro) + var(--duracao-pressao)) var(--curva-opacidade);
}
.fk-player--previa .fk-player__ambiente--ativo { opacity: .18; }
.fk-player--previa .fk-player__resultado { opacity: 1; filter: none; transform: none; transition: filter var(--duracao-contador) var(--curva-opacidade); }
/* Pausado: a imagem escurece a 80% e o play grande aparece (BotaoRedondo --play-grande sem --oculto). */
.fk-player--pausado :is(.fk-player__resultado, .fk-player__poster) { filter: brightness(.8); }

/* Sombra no pé (170 px, 3 × 56 + 2) para os controles lerem sobre qualquer cena. */
.fk-player__sombra {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--space-56) * 3 + var(--space-2));
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(from var(--sulco-sombra) r g b / .52));
}
/* Alvo: o quadro todo é o botão de tocar e pausar. O anel de foco fica por dentro, porque o quadro recorta o que sai. */
.fk-player__alvo {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.fk-player__alvo:focus-visible { outline-offset: calc((var(--tamanho-foco) + var(--tamanho-foco-afastamento)) * -1); border-radius: inherit; }

/* Barra de controles: vidro de 48 px a 10 px das bordas, raio 13; escurece de .5 para .62 sob o ponteiro. */
.fk-player__controles {
  position: absolute;
  z-index: 5;
  left: var(--space-10);
  right: var(--space-10);
  bottom: var(--space-10);
  height: var(--space-48);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: 0 var(--space-8);
  border-radius: var(--radius-13);
  background: var(--veu-controles);
  -webkit-backdrop-filter: blur(var(--desfoque-controles)) saturate(1.4);
  backdrop-filter: blur(var(--desfoque-controles)) saturate(1.4);
  box-shadow:
    inset 0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 12%, transparent),
    inset 0 var(--space-1) 0 color-mix(in srgb, var(--branco) 10%, transparent),
    0 var(--space-10) var(--space-28) calc(var(--space-6) * -1) var(--sulco-sombra);
  transition: background var(--duracao-curta);
}
.fk-player:hover .fk-player__controles { background: rgb(from var(--veu-controles) r g b / .62); }
/* Tempo: o estilo .vidro-rotulo (Space Grotesk 600 11 px, entrelinha 1) em algarismos tabulares; o atual em texto-forte,
   o total em texto-unidade, alinhado à direita. O total depende da .fk-player__sombra para chegar a 4,5:1 (ver README). */
.fk-player__tempo {
  flex: none;
  width: var(--space-30);
  color: var(--texto-forte);
  font: 600 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-player__tempo--total { color: var(--texto-unidade); text-align: right; }
/* Linha do tempo: alvo de 20 px; o trilho de 3 px engrossa para 5 px sob o ponteiro. */
.fk-player__linha {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--space-20);
  display: flex;
  align-items: center;
}
.fk-player__linha-trilho {
  position: relative;
  width: 100%;
  height: var(--tamanho-trilho);
  border-radius: var(--radius-3);
  background: color-mix(in srgb, var(--branco) 18%, transparent);
  box-shadow: inset 0 var(--space-1) var(--space-1) color-mix(in srgb, var(--sulco-sombra) 66.7%, transparent);
  transition: height var(--duracao-rapida) var(--curva-casa);
}
.fk-player__linha:hover .fk-player__linha-trilho { height: var(--space-5); }
/* --fk-player-tempo (0 a 100, no .fk-player) é a posição da reprodução. */
.fk-player__linha-valor {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--fk-player-tempo, 0) * 1%);
  border-radius: inherit;
  background: var(--lima);
  box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--lima) 60%, transparent);
  transition: width var(--duracao-pressao) var(--curva-linear);
}
.fk-player__cabeca {
  position: absolute;
  top: 50%;
  left: calc(var(--fk-player-tempo, 0) * 1%);
  width: var(--space-11);
  height: var(--space-11);
  margin: calc(var(--space-11) / -2) 0 0 calc(var(--space-11) / -2);
  border-radius: var(--radius-circulo);
  background: var(--lima-topo);
  box-shadow:
    0 0 0 var(--space-3) color-mix(in srgb, var(--lima) 20%, transparent),
    0 0 var(--space-12) color-mix(in srgb, var(--lima) 80%, transparent),
    inset 0 var(--space-1) 0 color-mix(in srgb, var(--branco) 70%, transparent);
  transition: left var(--duracao-pressao) var(--curva-linear);
}
/* Salto: a cada volta do vídeo (ou troca de clipe) a linha recomeça de uma vez; a cabeça nunca varre para trás. */
.fk-player__linha--salto :is(.fk-player__linha-valor, .fk-player__cabeca) { transition: none; }

/* ── Menos movimento: sem varredura; o player só aparece e some em opacidade; o resto troca de uma vez. ──────── */
@media (prefers-reduced-motion: reduce) {
  .fk-player__varredura { animation: none; }
  :is(.fk-player, .fk-player__palco),
  :is(.fk-player--oculto, .fk-player__palco--oculto) { transform: none; filter: none; }
  :is(.fk-player, .fk-player__palco) { transition: opacity var(--duracao-curta) var(--curva-opacidade) var(--duracao-hover), visibility 0s; }
  :is(.fk-player--oculto, .fk-player__palco--oculto) { transition: opacity var(--duracao-cor) var(--curva-opacidade), visibility 0s var(--curva-linear) var(--duracao-cor); }
  .fk-player__palco > .fk-player,
  .fk-player__ambiente,
  .fk-player__quadro,
  .fk-player__poster,
  .fk-player__resultado,
  .fk-player--previa .fk-player__resultado,
  .fk-player__medidor,
  .fk-player__anel-valor,
  .fk-player__trilho,
  .fk-player__trilho-valor,
  .fk-player__controles,
  .fk-player__linha-trilho,
  .fk-player__linha-valor,
  .fk-player__cabeca { transition: none; }
  .fk-player--pronto .fk-player__medidor { transform: none; }
}

/* Source: Poco.css */
/* Fenaky Design System · Poco — o que se lê dentro do poço.
   A primitiva .fk-poco (fundo var(--poco), raio 12, sombra interna) e .fk-poco--fundo vêm de 00-base.css e não são
   redefinidas aqui. Este arquivo acrescenta a profundidade de trilho, o anel de foco do contêiner, o poço de ícone com o
   par nome e metadado e as quatro leituras que o canvas aprovado repete: leitura (Main, rodapé do painel), fatos e linhas
   (Resultado), texto (Assets .quote, Resultado .desc). Toda cor, sombra, raio, espaço, duração e curva vem de var(--token). */

/* ── Profundidade ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Trilho: o poço raso de trilhos e chaves (Main .seg, Agentes .tgl, Mais .ico): sombra interna de 4 px, raio 11. */
.fk-poco--trilho {
  border-radius: var(--radius-11);
  box-shadow: var(--shadow-poco-trilho);
}

/* ── Foco no contêiner ─────────────────────────────────────────────────────────────────────────────────────── */
/* Quando o campo de texto não tem borda própria, o anel de foco segue o poço arredondado e não o controle nu:
   Main .well:has(.ta:focus-visible) e Assets .rwell:focus-within, ambos com afastamento de 2 px. Só a entrada de texto
   passa o anel ao poço; uma tecla dentro dele (Limpar, Copiar, anexar) mantém o próprio anel, como na Busca. */
.fk-poco--campo :is(textarea, input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), [contenteditable]:not([contenteditable="false"]), .fk-poco__entrada):focus-visible {
  outline: none;
}
.fk-poco--campo:has(:is(textarea, input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), [contenteditable]:not([contenteditable="false"]), .fk-poco__entrada):focus-visible) {
  outline: var(--tamanho-foco) solid var(--anel-foco);
  outline-offset: var(--space-2);
}
/* O mesmo anel, fixo, para documentação e testes visuais (regra separada: um navegador sem :has() ainda a aplica). */
.fk-poco--focado {
  outline: var(--tamanho-foco) solid var(--foco);
  outline-offset: var(--space-2);
}

/* ── Poço de ícone: quadradinho rebaixado com um ícone de traço (Projetos .oico) ─────────────────────────────── */
.fk-poco--icone {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tamanho-tecla);
  height: var(--tamanho-tecla);
  border-radius: var(--radius-9);
  color: var(--texto-unidade);
}
/* Par ícone + nome + metadado, fora do poço (Projetos .porig, .o1, .o2). */
.fk-poco__par {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  min-width: 0;
}
.fk-poco__par-texto { min-width: 0; }
.fk-poco__nome,
.fk-poco__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fk-poco__nome { color: var(--texto-tecla); font: 600 12.5px/1.2 var(--font-texto); }
.fk-poco__meta {
  margin-top: var(--space-5);
  color: var(--texto-dica);
  font: 500 11.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* As leituras abaixo têm min-width: 0 para encolher dentro de grid e flex; o texto longo termina em reticências. */

/* ── Leitura: uma linha com o que o pedido entrega e o custo (Main, rodapé do painel Criar vídeo) ───────────── */
.fk-poco--leitura {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin: 0;
  padding: var(--space-11) var(--space-14);
  color: var(--texto-leitura);
  font: 500 12px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-poco--leitura b,
.fk-poco--leitura .fk-poco__valor { flex: none; font-weight: 600; color: var(--texto-forte); }
/* Resumo: cede largura ao custo e termina em reticências quando o contêiner aperta. */
.fk-poco__resumo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Fatos: até quatro números lado a lado, separados por sulcos gravados (Resultado .facts) ────────────────── */
.fk-poco--fatos {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--fk-poco-colunas, 3), minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
.fk-poco__fato {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
  padding: var(--space-12) var(--space-14);
}
.fk-poco__fato + .fk-poco__fato { box-shadow: inset 1px 0 0 var(--sulco-sombra), inset 2px 0 0 var(--linha-tabela); }
.fk-poco__fato dt,
.fk-poco__fato .fk-poco__chave {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-nota);
  font: 600 9.5px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fk-poco__fato dd,
.fk-poco__fato .fk-poco__valor {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-forte);
  font: 600 14px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Estreito: duas colunas, para poços com menos de 270 px. O sulco vertical só entre as colunas e um sulco horizontal
   a partir da segunda linha (o mesmo traço das .rows). */
.fk-poco--fatos-estreito { --fk-poco-colunas: 2; }
.fk-poco--fatos-estreito .fk-poco__fato:nth-child(odd) { box-shadow: none; }
.fk-poco--fatos-estreito .fk-poco__fato:nth-child(odd):nth-child(n + 3) {
  box-shadow: inset 0 1px 0 var(--sulco-sombra), inset 0 2px 0 var(--linha-tabela);
}
.fk-poco--fatos-estreito .fk-poco__fato:nth-child(even):nth-child(n + 3) {
  box-shadow: inset 1px 0 0 var(--sulco-sombra), inset 2px 0 0 var(--linha-tabela),
    inset 0 1px 0 var(--sulco-sombra), inset 0 2px 0 var(--linha-tabela);
}

/* ── Linhas: chave à esquerda, valor à direita, 40 px por linha (Resultado .rows) ───────────────────────────── */
.fk-poco--linhas {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-2) var(--space-14);
}
.fk-poco__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  height: var(--space-40);
}
.fk-poco__linha + .fk-poco__linha { box-shadow: inset 0 1px 0 var(--sulco-sombra), inset 0 2px 0 var(--linha-tabela); }
.fk-poco__linha dt,
.fk-poco__linha .fk-poco__chave {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-apoio);
  font: 500 12px/1 var(--font-texto);
}
.fk-poco__linha dd,
.fk-poco__linha .fk-poco__valor {
  margin: 0;
  color: var(--texto-forte);
  font: 600 12.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Complemento do valor (· Pro, · 1080 × 1920): mesmo corpo, peso 500, cinza de controle. */
.fk-poco__extra { font-weight: 500; color: var(--texto-controle); }

/* ── Texto: o prompt ou a descrição guardada, só leitura (Assets .quote, Resultado .desc) ───────────────────── */
/* Texto corrido: Assets .quote, Manrope 500 12,5/1,6. */
.fk-poco--texto {
  min-width: 0;
  margin: 0;
  padding: var(--space-12) var(--space-14);
  color: var(--texto-link);
  font: 500 12.5px/1.6 var(--font-texto);
  text-wrap: pretty;
}
/* Recorte em três linhas, com "Ver completa" fora do poço: Resultado .clamp, 12,5/1,55 (o estilo .corpo-compacto). */
.fk-poco__recorte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.55;
}

/* Source: PopUp.css */
/* Fenaky Design System · PopUp — o modal do momento importante (decidir agora).
   Casca central de 440 px sobre a página escurecida e desfocada; entra subindo de um desfoque.
   Exemplo aprovado: "Pagamento confirmado." com o saldo contando de 238 a 488, o +250 que acende, a barra antes/novo,
   o resumo do plano e as ações (CTA lima "Criar vídeo" + tecla "Ver minha conta").
   Fontes: Notificacoes.dc.html (.mscrim, .mwrap, .shell.modal, .mtop, .mok, .mchk, .mtitle, .mdesc, .mcount, .mrow,
   .mnum, .mplus, .mcap, .mbar, .rows, .row, .mact), NotificacoesMobile.dc.html (.mwrap com 12 px nas laterais, saída de
   260 ms acelerando, subida escalonada .mi, mola do .mplus, menos movimento), NotificacoesCatalogo.dc.html (seção 05)
   e NOTIF.md (item 3).
   Usa as primitivas .fk-casca, .fk-poco, .fk-modulo, .fk-rotulo, .fk-tecla (.fk-tecla--redonda de Tecla.css), .fk-cta
   e o estilo tipográfico .titulo-dialogo (tokens.css) sem redefini-los. Cor só por var(--token); quando o canvas usa
   outra opacidade da mesma cor, ela sai do token por color-mix(), e cada cor que não é token diz de quais tokens veio. */

/* ── Raiz: cobre a tela (ou o palco, com --contido); véu atrás, rolagem com a caixa na frente ───────────────────── */
.fk-popup {
  position: fixed;
  inset: 0;
  z-index: var(--camada-popup-veu);
  pointer-events: none;
  visibility: hidden;
  /* Fechado, só sai do foco e da árvore de acessibilidade depois que a caixa terminou de sair (500 ms no desktop). */
  transition: visibility 0s var(--curva-linear) calc(var(--duracao-curta) + var(--duracao-rapida));
}
.fk-popup--aberto { visibility: visible; transition: visibility 0s; }
/* Contido: dentro de um palco position: relative (prévias, pranchas, um painel que é a tela). */
.fk-popup--contido { position: absolute; }

/* Véu: rgba(5,5,6,.62) com desfoque de 12 px e saturate(.8). Fica parado enquanto a rolagem corre por cima dele. */
.fk-popup__veu {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--veu-dialogo);
  -webkit-backdrop-filter: blur(var(--desfoque-veu)) saturate(.8);
  backdrop-filter: blur(var(--desfoque-veu)) saturate(.8);
  opacity: 0;
  transition: opacity var(--duracao-media) var(--curva-opacidade);
}
.fk-popup--aberto .fk-popup__veu { opacity: 1; }

/* Rolagem: a camada transparente que centraliza a caixa e rola quando a tela é mais baixa que ela (celular deitado,
   zoom de 200%), para o Fechar e as ações nunca ficarem fora de alcance (WCAG 1.4.10). margin: auto na caixa é o
   centro seguro: quando não cabe, ela encosta no alto em vez de vazar para cima. O clique aqui, fora da caixa, fecha.
   Os 12 px de respiro vêm do .mwrap do celular (padding 0 12px), estendidos ao alto e ao pé. */
.fk-popup__rolagem {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  padding: var(--space-12);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--texto-separador) transparent;
}
.fk-popup--aberto .fk-popup__rolagem { pointer-events: auto; }

/* ── Caixa: casca de 440 px, raio 26, padding 22 ──────────────────────────────────────────────────────────────── */
/* Fecha como a prancheta desktop (Notificacoes .shell.modal): opacidade 300 ms ease, volta 500 ms na curva da casa
   (300 + 200) e desfoque 300 ms, de volta a 28 px abaixo, escala .96 e desfoque de 14 px. */
.fk-popup__caixa {
  position: relative;
  width: 100%;
  max-width: var(--tamanho-popup);
  margin: auto;
  padding: var(--space-22);
  border-radius: var(--radius-26);
  box-shadow: var(--shadow-dialogo);
  opacity: 0;
  transform: translateY(var(--space-28)) scale(.96);
  filter: blur(var(--desfoque-dialogo));
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade);
}
/* Entra subindo de um desfoque, 50 ms depois do véu: opacidade 500 ms (300 + 200), subida 900 ms na curva da casa,
   foco 550 ms (450 + 100). O atraso de 50 ms é metade de --duracao-pressao. */
.fk-popup--aberto .fk-popup__caixa {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-opacidade) calc(var(--duracao-pressao) / 2),
    transform var(--duracao-dialogo) var(--curva-casa) calc(var(--duracao-pressao) / 2),
    filter calc(var(--duracao-media) + var(--duracao-pressao)) var(--curva-opacidade) calc(var(--duracao-pressao) / 2);
}

/* ── Topo: o selo do evento à esquerda, Fechar (tecla redonda de 32 px) à direita ─────────────────────────────── */
.fk-popup__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
/* Selo: tecla de 46 px, raio 14, com o ícone na cor semântica (nunca o fundo). Sombra do canvas: luz de 12% no topo,
   aro de --sulco-sombra (.6) e queda 0 4px 12px de --divisor-sombra (.5). */
.fk-popup__selo {
  --fk-popup-cor: var(--sucesso);
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--space-48) - var(--space-2));
  height: calc(var(--space-48) - var(--space-2));
  border-radius: var(--radius-14);
  color: var(--fk-popup-cor);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 12%, transparent),
    0 0 0 1px var(--sulco-sombra),
    0 var(--space-4) var(--space-12) var(--divisor-sombra);
}
/* O tamanho do ícone vem do próprio svg (width="22" height="22", como o <svg> do .mok no canvas). */
.fk-popup__selo > svg {
  display: block;
  filter: drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--fk-popup-cor) 45%, transparent));
}
/* Um halo sai do selo uma vez, 500 ms depois de abrir (450 + 50), até 18 px, em 1,6 s. A curva é o ease-out do
   canvas (.mok::before: halo 1.6s ease-out .5s); não há token de curva ease-out, então a palavra-chave fica aqui. */
.fk-popup__selo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.fk-popup--aberto .fk-popup__selo::before {
  animation: fk-popup-halo var(--duracao-pulso) ease-out calc(var(--duracao-media) + var(--duracao-pressao) / 2);
}
@keyframes fk-popup-halo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fk-popup-cor) 42%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-18) color-mix(in srgb, var(--fk-popup-cor) 0%, transparent); }
}
/* O visto (path com pathLength 23) se desenha a cada abertura: 700 ms na curva da casa, 400 ms depois de abrir
   (450 − 50: começa quando a caixa já subiu metade). Continua desenhado enquanto o pop-up sai. */
.fk-popup__traco { stroke-dasharray: 23; stroke-dashoffset: 0; }
.fk-popup--aberto .fk-popup__traco {
  animation: fk-popup-traco var(--duracao-silencio) var(--curva-casa) calc(var(--duracao-media) - var(--duracao-pressao) / 2) backwards;
}
@keyframes fk-popup-traco { from { stroke-dashoffset: 23; } }
/* Variantes de cor do selo, das cores semânticas dos toasts (NOTIF.md: cor no ícone, não no fundo). */
.fk-popup--aviso .fk-popup__selo { --fk-popup-cor: var(--aviso); }
.fk-popup--erro .fk-popup__selo { --fk-popup-cor: var(--erro); }

/* ── Textos: rótulo do contexto a 18 px do topo, título 26 px, texto 13 px ────────────────────────────────────── */
.fk-popup__contexto { margin-top: var(--space-18); }
/* A fonte do título (600 26/1,1 Space Grotesk, −0,025em) vem do estilo .titulo-dialogo, aplicado na marcação
   (<h2 class="titulo-dialogo fk-popup__titulo">); aqui só a posição e a cor. */
.fk-popup__titulo {
  margin: var(--space-9) 0 0;
  color: var(--texto-titulo);
}
/* #a1a1a7 no canvas = metade de --texto-unidade (#a9a9af) e metade de --texto-apoio (#9a9aa0). */
.fk-popup__texto {
  margin: var(--space-10) 0 0;
  color: color-mix(in srgb, var(--texto-unidade) 50%, var(--texto-apoio));
  font: 500 13px/1.55 var(--font-texto);
  text-wrap: pretty;
}

/* ── Saldo: poço com o número que conta, o +N que acende, a legenda e a barra antes/novo ─────────────────────── */
.fk-popup__saldo {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: var(--space-18);
  padding: var(--space-18) var(--space-18) var(--space-16);
}
.fk-popup__linha-saldo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
}
/* 52/0,9 da prancheta Notificações (.mnum); o estilo numero-popup (58 px) é da versão do catálogo. */
.fk-popup__numero {
  color: var(--texto-aceso);
  font: 600 52px/.9 var(--font-display);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
/* +N: pílula de 26 px (.mplus: height 26px), 300 ms de opacidade e 500 ms de movimento na curva da casa. */
.fk-popup__ganho {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--space-26);
  margin-bottom: var(--space-4);
  padding: 0 var(--space-10);
  border-radius: var(--radius-pilula);
  color: var(--sucesso);
  background: var(--sucesso-fundo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sucesso) 22%, transparent);
  font: 600 12px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(var(--space-6)) scale(.85);
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform calc(var(--duracao-curta) + var(--duracao-rapida)) var(--curva-casa);
}
.fk-popup__ganho--aceso { opacity: 1; transform: none; }
.fk-popup__legenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  color: var(--texto-apoio);
  font: 500 12px/1 var(--font-texto);
}
.fk-popup__legenda b {
  color: var(--texto-nota);
  font: 500 11.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Barra de 6 px: o que já havia (--antes, ex.: 238/488 = 48,77%) em cinza e o que entrou (--novo) em verde com brilho.
   Trilho: branco a 5%, sombra interna de 1 px a .85 de preto e luz de 5% embaixo. A primeira declaração é a reserva
   para navegadores sem cor relativa (Firefox < 128, Safari < 16.4): o mesmo relevo com --sulco-sombra (.6). A segunda
   leva o mesmo preto a .85, como no canvas.
   Parte antiga: #45454b → #66666d no canvas = 75% --tecla-acesa-topo + 25% --tecla-acesa-base → 30% --texto-contagem
   + 70% --texto-separador. */
.fk-popup__barra {
  position: relative;
  display: block;
  height: var(--space-6);
  margin-top: var(--space-2);
  border-radius: var(--radius-6);
  overflow: hidden;
  background: color-mix(in srgb, var(--branco) 5%, transparent);
  box-shadow:
    inset 0 1px var(--space-2) var(--sulco-sombra),
    0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent);
  box-shadow:
    inset 0 1px var(--space-2) rgb(from var(--sulco-sombra) r g b / .85),
    0 1px 0 color-mix(in srgb, var(--branco) 5%, transparent);
}
.fk-popup__barra-antes,
.fk-popup__barra-novo { position: absolute; top: 0; bottom: 0; }
.fk-popup__barra-antes {
  left: 0;
  width: var(--antes, 0%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tecla-acesa-topo) 75%, var(--tecla-acesa-base)),
    color-mix(in srgb, var(--texto-contagem) 30%, var(--texto-separador)));
}
.fk-popup__barra-novo {
  left: var(--antes, 0%);
  width: var(--novo, 0%);
  background: var(--sucesso);
  box-shadow: 0 0 var(--space-10) color-mix(in srgb, var(--sucesso) 60%, transparent);
}

/* ── Resumo: módulo (padding 2 + 2 da lista) com linhas de 38 px separadas por um divisor gravado ─────────────── */
.fk-popup__resumo {
  margin: var(--space-12) 0 0;
  padding: var(--space-4) var(--space-14);
  list-style: none;
}
.fk-popup__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  height: calc(var(--space-40) - var(--space-2));
  color: var(--texto-apoio);
  font: 500 12.5px/1 var(--font-texto);
}
/* O canvas usa #ececef no valor; o token mais próximo é --texto (#ededef). */
.fk-popup__item b {
  color: var(--texto);
  font: 600 12.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fk-popup__item + .fk-popup__item {
  border-top: 1px solid var(--divisor-sombra);
  box-shadow: inset 0 1px 0 var(--divisor-luz);
}

/* ── Ações: CTA lima que ocupa o resto + tecla de 48 px com raio 14 ───────────────────────────────────────────── */
.fk-popup__acoes {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-18);
}
.fk-popup__acoes > .fk-cta { flex: 1; width: auto; height: var(--space-48); }
.fk-popup__acoes > .fk-tecla {
  flex: none;
  height: var(--space-48);
  padding: 0 var(--space-18);
  border-radius: var(--radius-14);
  font-size: 12.5px;
}

/* Texto só para leitor de tela: a frase do saldo dentro da caixa e a região role="status" que anuncia o pop-up
   quando ele abre sem levar o foco. */
.fk-popup__leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Celular (≤ 520 px, NotificacoesMobile) ────────────────────────────────────────────────────────────────────
   Caixa com a largura menos 12 px de cada lado, padding 18, ações de 50 px. Sai como o toast (NOTIF.md): 260 ms
   acelerando, esmaecendo e desfocando só na segunda metade (120 ms de atraso = 3 × --duracao-escalonamento, 140 ms
   de duração). Os blocos sobem em cascata (.mi: rise .9s na curva da casa, de 22 px e 10 px de desfoque), com os
   atrasos do canvas 120/160/190/220/260/300/340 ms escritos como múltiplos de --duracao-escalonamento (40 ms).
   O +N entra com mola (.mplus: transform .55s cubic-bezier(.3,1.6,.5,1)); o token mais próximo é --curva-mola
   (.34,1.56,.64,1), em 550 ms (300 + 250). */
@media (max-width: 520px) {
  .fk-popup { transition: visibility 0s var(--curva-linear) var(--duracao-media); }
  .fk-popup--aberto { transition: visibility 0s; }
  .fk-popup__caixa {
    padding: var(--space-18);
    transition:
      opacity calc(var(--duracao-saida) - 3 * var(--duracao-escalonamento)) var(--curva-linear) calc(3 * var(--duracao-escalonamento)),
      transform var(--duracao-saida) var(--curva-saida),
      filter calc(var(--duracao-saida) - 3 * var(--duracao-escalonamento)) var(--curva-opacidade) calc(3 * var(--duracao-escalonamento));
  }
  .fk-popup__titulo { margin-top: var(--space-10); }
  .fk-popup__texto { margin-top: var(--space-8); line-height: 1.5; color: var(--texto-apoio); }
  .fk-popup__saldo { padding: var(--space-16) var(--space-16) var(--space-14) var(--space-18); }
  .fk-popup__item { height: var(--space-40); }
  .fk-popup__acoes { margin-top: var(--space-16); }
  .fk-popup__acoes > .fk-cta, .fk-popup__acoes > .fk-tecla { height: var(--tamanho-cta); }
  .fk-popup__acoes > .fk-tecla { padding: 0 var(--space-16); }
  .fk-popup__ganho {
    transition:
      opacity var(--duracao-curta) var(--curva-opacidade),
      transform calc(var(--duracao-curta) + var(--duracao-cor)) var(--curva-mola);
  }
  .fk-popup__topo { --fk-popup-passo: 3; }
  .fk-popup__contexto { --fk-popup-passo: 4; }
  .fk-popup__titulo { --fk-popup-passo: 4.75; }
  .fk-popup__texto { --fk-popup-passo: 5.5; }
  .fk-popup__saldo { --fk-popup-passo: 6.5; }
  .fk-popup__resumo { --fk-popup-passo: 7.5; }
  .fk-popup__acoes { --fk-popup-passo: 8.5; }
  .fk-popup--aberto :is(.fk-popup__topo, .fk-popup__contexto, .fk-popup__titulo, .fk-popup__texto,
    .fk-popup__saldo, .fk-popup__resumo, .fk-popup__acoes) {
    animation: fk-popup-subida var(--duracao-dialogo) var(--curva-casa)
      calc(var(--duracao-escalonamento) * var(--fk-popup-passo, 0)) both;
  }
}
@keyframes fk-popup-subida {
  from { opacity: 0; transform: translateY(var(--space-22)); filter: blur(var(--desfoque-chegada)); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ── Menos movimento: sem subida, escala nem desfoque; véu e caixa só esmaecem (250 ms); visto, halo, cascata e +N
   parados. */
@media (prefers-reduced-motion: reduce) {
  .fk-popup__caixa,
  .fk-popup--aberto .fk-popup__caixa {
    transform: none;
    filter: none;
    transition: opacity var(--duracao-cor) var(--curva-opacidade);
  }
  .fk-popup__veu { transition: opacity var(--duracao-cor) var(--curva-opacidade); }
  .fk-popup--aberto .fk-popup__selo::before,
  .fk-popup--aberto .fk-popup__traco,
  .fk-popup--aberto :is(.fk-popup__topo, .fk-popup__contexto, .fk-popup__titulo, .fk-popup__texto,
    .fk-popup__saldo, .fk-popup__resumo, .fk-popup__acoes) { animation: none; }
  .fk-popup__ganho { transition: none; }
  .fk-popup { transition: visibility 0s var(--curva-linear) var(--duracao-cor); }
  .fk-popup--aberto { transition: visibility 0s; }
}

/* Source: Prompt.css */
/* Fenaky Design System · Prompt — o texto que pede o vídeo: área de texto num poço, com atalhos, @etiquetas e contagem.
   Fontes: Main.dc.html (.well + .ta + .pbar + .pcount: "Quem o personagem substitui", 800 caracteres, + Roupa/+ Posição/
   + Acessório), Ginga.dc.html (.swell + .script + .tag + .caret + .cites: Roteiro com @Imagem/@Audio e a linha Citar,
   1500), Motion.dc.html (.pwell + .pta + .exs: Prompt da edição com Exemplos e o texto que troca) e CriarMobile.dc.html
   (.ta 66 px + .qchips + .wfoot: a versão compacta do celular). O poço é a primitiva .fk-poco, as teclas são .fk-tecla,
   as etiquetas são .fk-ref e o "CITAR" usa o estilo .rotulo-sm; aqui ficam só o arranjo, as medidas e o movimento
   próprios do prompt. */

/* ── Poço do prompt: guarda o texto, os atalhos e a contagem, e recebe o anel de foco ─────────────────────────────── */
/* Use junto com .fk-poco. As alturas são medidas do canvas sem token equivalente (são do componente, não do sistema):
   84 px é a textarea de Trocar (Main .ta), 66 px a do celular (CriarMobile .ta) e 132 px a altura mínima do Roteiro
   (Ginga .script). Mude a do texto com --fk-prompt-altura no poço (a Motion usa 88 px). */
.fk-prompt {
  --fk-prompt-altura-padrao: 84px;
  --fk-prompt-roteiro-altura: 132px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* O anel segue o poço arredondado que guarda o texto e as teclas, não o texto nu. O afastamento é 2 px, e não o
   --tamanho-foco-afastamento (3 px) das teclas: é o valor do canvas para o poço (Main e TrocarHorizontal:
   .well:has(.ta:focus-visible){outline-offset:2px}), que mantém o anel dentro do respiro do módulo. */
.fk-prompt:has(:is(.fk-prompt__texto, .fk-prompt__roteiro):focus-visible) {
  outline: var(--tamanho-foco) solid var(--anel-foco);
  outline-offset: var(--space-2);
}

/* ── Texto: a textarea sem moldura própria ────────────────────────────────────────────────────────────────────── */
/* Main .ta: Manrope 500 13/1,55 (o estilo .campo), 12 × 14 px. */
.fk-prompt__texto {
  display: block;
  width: 100%;
  height: var(--fk-prompt-altura, var(--fk-prompt-altura-padrao));
  margin: 0;
  padding: var(--space-12) var(--space-14);
  border: 0;
  border-radius: inherit;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--texto-campo);
  font: 500 13px/1.55 var(--font-texto);
  -webkit-appearance: none;
  appearance: none;
}
.fk-prompt__texto:focus-visible { outline: 0; }
.fk-prompt__texto::placeholder { color: var(--texto-dica); opacity: 1; }
/* Com a barra de atalhos embaixo, o texto encosta nela (Main: padding-bottom 6 px). */
.fk-prompt__texto:has(+ .fk-prompt__barra) { padding-bottom: var(--space-6); }

/* ── Roteiro: texto com @etiquetas em relevo dentro da frase (Gerar com Ginga) ───────────────────────────────────── */
/* Um elemento editável (contenteditable) com as etiquetas .fk-ref.fk-prompt__ref como peças inteiras. Ginga .script:
   13/1,75, 13 14 4 px. A cor do canvas (#e4e4e7) não é token: usa texto-campo (#e8e8eb), a do texto digitado.
   pre-wrap mostra as quebras gravadas como "\n" no texto, que é o que a página lê e envia (veja o README). */
.fk-prompt__roteiro {
  min-height: var(--fk-prompt-roteiro-altura);
  margin: 0;
  padding: var(--space-13) var(--space-14) var(--space-4);
  outline: 0;
  color: var(--texto-campo);
  font: 500 13px/1.75 var(--font-texto);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: var(--texto-forte);
  cursor: text;
}
.fk-prompt__roteiro:focus-visible { outline: 0; }
/* Vazio: a dica no lugar do texto, com a cor do placeholder da textarea. Só vale se o elemento ficar mesmo vazio: a
   página tira o <br> que o navegador deixa ao apagar tudo. */
.fk-prompt__roteiro:empty::before {
  content: attr(data-placeholder);
  color: var(--texto-dica);
  pointer-events: none;
}
/* Etiqueta dentro do roteiro: o elemento .fk-prompt__ref vai junto com a primitiva .fk-ref, que dá o desenho; aqui ficam
   só o movimento de chegada e a medida do compacto. A recém-citada chega de baixo, desfocada e menor (Ginga .tag.nu-a /
   tagA, 0,6 s). */
.fk-prompt__ref--nova { animation: fk-prompt-ref var(--duracao-deslize) var(--curva-casa); }
@keyframes fk-prompt-ref {
  from { opacity: 0; transform: translateY(var(--space-5)) scale(.8); filter: blur(var(--desfoque-texto)); }
  to { opacity: 1; transform: none; filter: none; }
}
/* Cursor de demonstração (prévias, tutoriais, quadro parado): a barra que pisca no fim do texto (Ginga .caret:
   1,5 × 15 px, 2 px à esquerda, 2 px abaixo da linha de base, 1,1 s em degrau). 1,5 px = metade do --tamanho-trilho
   (3 px); 15 px é a medida do canvas, a altura das letras na linha de 13 px, sem token próprio. 1,1 s = giro + pressão.
   Some quando o roteiro ganha o foco e o cursor real aparece. */
.fk-prompt__roteiro--cursor:not(:focus)::after {
  content: '';
  display: inline-block;
  width: calc(var(--tamanho-trilho) / 2);
  height: 15px;
  margin-left: var(--space-2);
  vertical-align: calc(var(--space-2) * -1);
  background: var(--texto-forte);
  animation: fk-prompt-cursor calc(var(--duracao-giro) + var(--duracao-pressao)) steps(1) infinite;
}
@keyframes fk-prompt-cursor { 50% { opacity: 0; } }

/* ── Barra de atalhos: teclas que começam uma frase, e a contagem à direita, dentro do poço (Main .pbar) ────────── */
.fk-prompt__barra {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-10) var(--space-8);
}
/* Cada atalho é .fk-tecla .fk-tecla--sm (26 px); aqui só não encolhe. */
.fk-prompt__atalho { flex: none; }

/* ── Contagem: caracteres usados / limite ─────────────────────────────────────────────────────────────────────── */
/* Main .pcount: Space Grotesk 500 11 px em texto-nota, tabular, encostada à direita da barra. Ela muda a cada tecla:
   fica visível e ligada ao texto por aria-describedby, sem aria-live. O que é falado vai no .fk-prompt__aviso. */
.fk-prompt__contagem {
  margin-left: auto;
  padding-right: var(--space-4);
  color: var(--texto-nota);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Aviso falado: região viva escondida que só fala perto do limite e no limite ───────────────────────────────── */
/* Escondida da vista e presente para o leitor de tela (o padrão de texto só para leitor), dentro do poço. */
.fk-prompt__aviso {
  position: absolute;
  width: var(--space-1);
  height: var(--space-1);
  margin: calc(var(--space-1) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Citar: uma tecla por referência, sob o roteiro; o toque escreve a etiqueta no fim do texto (Ginga .cites) ──── */
.fk-prompt__citar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-8) var(--space-9) var(--space-12);
}
/* "CITAR": use com a classe de estilo .rotulo-sm (Space Grotesk 600 10 px, .12em), que é o Ginga .sublbl. Aqui ficam só
   a cor (#85858b = texto-dica, 5,4:1 no poço), a caixa-alta e a linha da altura da citação, para o rótulo ficar no meio
   da primeira fileira de teclas. */
.fk-prompt__citar-rotulo {
  flex: none;
  color: var(--texto-dica);
  line-height: calc(var(--tamanho-tecla-sm) - var(--space-4));
  text-transform: uppercase;
}
/* Todas as referências ficam à vista: quatro teclas por linha; com cinco imagens e três áudios a lista quebra. */
.fk-prompt__citacoes {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-4);
  min-width: 0;
}
/* Use junto com .fk-tecla: Space Grotesk 10 px, 5 px de lado, raio 7 (Ginga .key.sm.tagkey). A altura de 22 px é a
   tecla pequena (--tamanho-tecla-sm, 26 px) menos 4 px: a citação é a tecla pequena um degrau abaixo. */
.fk-prompt__citacao {
  flex: none;
  gap: var(--space-5);
  height: calc(var(--tamanho-tecla-sm) - var(--space-4));
  padding: 0 var(--space-5);
  border-radius: var(--radius-7);
  font-family: var(--font-display);
  font-size: 10px;
}

/* ── Pé: dica à esquerda, contagem à direita, na base do poço (CriarMobile .wfoot) ─────────────────────────────── */
.fk-prompt__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-6) var(--space-12) var(--space-9);
  color: var(--texto-dica);
  font: 500 11px/1 var(--font-texto);
}
.fk-prompt__pe .fk-prompt__contagem { padding-right: 0; color: var(--texto-dica); }

/* ── Exemplos: textos prontos em teclas, fora do poço, logo abaixo (Motion .exs) ─────────────────────────────────── */
/* Cada exemplo é .fk-tecla .fk-tecla--sm com aria-pressed: o escolhido fica aceso enquanto o texto é o dele. */
.fk-prompt__exemplos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.fk-prompt__exemplos-rotulo {
  margin-right: var(--space-2);
  color: var(--texto-controle);
  font: 500 11px/1 var(--font-texto);
}

/* ── Compacto: celular (CriarMobile) ──────────────────────────────────────────────────────────────────────────── */
/* Texto 66 px com entrelinha 1,5; atalhos e citações numa fileira sob o texto; a contagem desce para o pé. */
.fk-prompt--compacto { --fk-prompt-altura-padrao: 66px; }
.fk-prompt--compacto .fk-prompt__texto {
  padding: var(--space-11) var(--space-13) var(--space-4);
  line-height: 1.5;
}
.fk-prompt--compacto .fk-prompt__roteiro {
  min-height: 0;
  padding: var(--space-11) var(--space-13) var(--space-4);
  font-size: 12.5px;
}
/* Etiqueta do roteiro no celular: 6 px de lado, 11 px (CriarMobile .tag); 20 px = --tamanho-ref (21 px) menos 1 px. */
.fk-prompt--compacto .fk-prompt__ref {
  height: calc(var(--tamanho-ref) - var(--space-1));
  padding: 0 var(--space-6);
  font-size: 11px;
}
.fk-prompt--compacto .fk-prompt__barra,
.fk-prompt--compacto .fk-prompt__citar {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-12) var(--space-2);
}
/* Atalhos do celular: .key.xs de 26 px com raio 8 (o .fk-tecla--sm dá a altura). */
.fk-prompt--compacto .fk-prompt__atalho { border-radius: var(--radius-8); }
/* Citações do celular: 26 px, 7 px de lado, Space Grotesk 11 px, raio 8 (CriarMobile .key.xs.tagkey). */
.fk-prompt--compacto .fk-prompt__citacao {
  height: var(--tamanho-tecla-sm);
  padding: 0 var(--space-7);
  border-radius: var(--radius-8);
  font-size: 11px;
}

/* ── Movimento: o texto que troca e o realce de volta ao prompt ──────────────────────────────────────────────────── */
/* Trocado: um exemplo escolhido entra no lugar, subindo do desfoque (Motion .pwell.fl-a .ta / taA, 0,6 s; 5 px de
   desfoque = desfoque-texto + 1). Para repetir: tire a classe, leia offsetWidth e ponha de novo. */
.fk-prompt--trocado :is(.fk-prompt__texto, .fk-prompt__roteiro) { animation: fk-prompt-troca var(--duracao-deslize) var(--curva-casa); }
@keyframes fk-prompt-troca {
  from { opacity: .1; filter: blur(calc(var(--desfoque-texto) + var(--space-1))); transform: translateY(var(--space-6)); }
}
/* Realce: anel branco que se abre e some ao voltar do player para ajustar o texto (Ginga .swell.fa / ringA, 0,9 s).
   O halo de 26 px é o do canvas e a família desfoque não tem esse tamanho: usa a medida --space-26 como raio da sombra. */
.fk-prompt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.fk-prompt--realce::after { animation: fk-prompt-realce var(--duracao-dialogo) var(--curva-casa); }
@keyframes fk-prompt-realce {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 var(--space-2) var(--branco),
      0 0 0 0 color-mix(in srgb, var(--branco) 50%, transparent),
      0 0 var(--space-26) color-mix(in srgb, var(--branco) 30%, transparent);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 var(--space-2) var(--branco),
      0 0 0 var(--space-13) color-mix(in srgb, var(--branco) 0%, transparent),
      0 0 var(--space-26) color-mix(in srgb, var(--branco) 0%, transparent);
  }
}

/* ── Indisponível: o poço esmaece como a tecla desligada e não aceita toque ──────────────────────────────────────── */
/* O certo é a página pôr disabled na textarea e em todas as teclas do poço (ou, no roteiro, contenteditable="false" com
   aria-disabled="true"). O pointer-events cobre quem só marcar o poço: nada lá dentro recebe clique. */
.fk-prompt:has(.fk-prompt__texto:disabled),
.fk-prompt:has(.fk-prompt__roteiro[aria-disabled="true"]),
.fk-prompt--desligado { opacity: var(--opacidade-desligado); }
.fk-prompt:has(.fk-prompt__texto:disabled),
.fk-prompt:has(.fk-prompt__roteiro[aria-disabled="true"]),
.fk-prompt--desligado { pointer-events: none; }

/* ── Menos movimento: a etiqueta aparece no lugar, o texto não sobe, o anel não pisca e o cursor fica aceso. ─────── */
@media (prefers-reduced-motion: reduce) {
  .fk-prompt__ref--nova,
  .fk-prompt--trocado :is(.fk-prompt__texto, .fk-prompt__roteiro),
  .fk-prompt--realce::after,
  .fk-prompt__roteiro--cursor:not(:focus)::after { animation: none; }
}

/* Source: Rail.css */
/* Fenaky Design System · Rail — a navegação principal do app: uma casca vertical presa à esquerda com a marca F, os
   destinos (Avatares, Vídeos, Assets, Motion, Redes), um espaço e, embaixo, Mais e Ajuda.
   Fontes: Main.dc.html (nav.shell, .rail-b, .rail-b.on), Mais.dc.html (a luz do item atual como camada que acende e
   assenta, .rail-b::before, e .rail-b.here enquanto Mais segura a luz), HomeMobile, CriarMobile, NotificacoesMobile e
   PlanosMobile (.rail compacto de 62 px, .rail-div, .acct, .railwrap) e SPEC ("Rail nav.shell à esquerda").
   A casca é a primitiva .fk-casca (00-base); a linha do celular é .fk-sulco; a conta é .fk-tecla--redonda. Só tokens. */

/* ── Rail: a coluna dentro da casca (use junto com .fk-casca) ──────────────────────────────────────────────────────── */
/* Desktop: 76 px de largura, 14 px em cima, 12 embaixo, 6 px entre os itens (Main). */
.fk-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: var(--space-6);
  width: var(--tamanho-rail);
  margin: 0;
  padding: var(--space-14) 0 var(--space-12);
  font-family: var(--font-texto);
}
/* Fixo: preso à janela a 12 px das bordas, acima do painel sobreposto (Main e Mais: left/top/bottom 12, z 30). */
.fk-rail--fixo {
  position: fixed;
  top: var(--space-12);
  bottom: var(--space-12);
  left: var(--space-12);
  z-index: var(--camada-rail);
}

/* ── Marca: o F em quadro, que leva ao início ─────────────────────────────────────────────────────────────────────── */
/* 42 px com raio 13 e 18 px até o primeiro item; sombra 0 4px 12px rgba(0,0,0,.6) (--shadow-rail-marca). */
.fk-rail__marca {
  display: block;
  flex: none;
  margin-bottom: var(--space-18);
  border-radius: var(--radius-13);
}
.fk-rail__marca img {
  display: block;
  width: var(--tamanho-rail-marca);
  height: var(--tamanho-rail-marca);
  border-radius: var(--radius-13);
  box-shadow: var(--shadow-rail-marca);
}

/* ── Item: ícone de 19 px sobre o rótulo, 58 × 58, raio 13 ────────────────────────────────────────────────────────── */
/* A luz do item atual é uma camada (::before) atrás do ícone e do rótulo: acende e assenta (de 86 % a 100 %), para a luz
   poder passar de um item a outro sem salto (Mais.dc.html). Em repouso é igual ao .rail-b.on de Main. */
.fk-rail__item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: var(--tamanho-rail-item);
  height: var(--tamanho-rail-item);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-13);
  background: transparent;
  cursor: pointer;
  color: var(--texto-rail);
  /* O rótulo é o estilo tipográfico rail-rotulo (Manrope 10/600, altura de linha 1); 11 px no compacto. */
  font: 600 10px/1 var(--font-texto);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--duracao-rail-cor) var(--curva-opacidade);
}
.fk-rail__item > svg { flex: none; width: var(--tamanho-rail-icone); height: var(--tamanho-rail-icone); }
.fk-rail__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--camada-rail-luz);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--rail-aceso-topo), var(--rail-aceso-base));
  box-shadow: var(--shadow-rail-aceso);
  opacity: 0;
  transform: scale(.86);
  /* Opacidade em 350 ms, tamanho em 600 ms na curva da casa (Mais.dc.html). */
  transition: opacity var(--duracao-rail-luz) var(--curva-opacidade), transform var(--duracao-rail-assentar) var(--curva-casa);
  pointer-events: none;
}
.fk-rail__item:hover {
  color: var(--texto-hover-rail);
  background: var(--fundo-hover);
}

/* Atual: a página aberta (aria-current="page") e o Mais com o painel aberto (aria-expanded="true") acendem. */
.fk-rail__item.fk-rail__item--atual,
.fk-rail__item[aria-current="page"],
.fk-rail__item[aria-expanded="true"] { color: var(--texto-aceso); }
.fk-rail__item.fk-rail__item--atual::before,
.fk-rail__item[aria-current="page"]::before,
.fk-rail__item[aria-expanded="true"]::before { opacity: 1; transform: none; }

/* Aqui: enquanto um painel do rail (Mais) segura a luz, a página aberta apaga a camada e fica só um tom acima do
   repouso (Mais.dc.html, .rail-b.here: --texto-rail-aqui, #d2d2d7, 11,2:1 na casca). */
.fk-rail__item.fk-rail__item--aqui,
.fk-rail:has(.fk-rail__item[aria-expanded="true"]) .fk-rail__item[aria-current="page"] { color: var(--texto-rail-aqui); }
.fk-rail__item.fk-rail__item--aqui::before,
.fk-rail:has(.fk-rail__item[aria-expanded="true"]) .fk-rail__item[aria-current="page"]::before { opacity: 0; transform: scale(.86); }

/* ── Espaço: empurra Mais e Ajuda para a base ─────────────────────────────────────────────────────────────────────── */
.fk-rail__espaco { flex: 1 1 auto; min-height: 0; }

/* ── Compacto: celular (até 760 px). 62 px, raio 18, 10 px × 4 px por dentro, 2 px entre itens ────────────────────── */
/* Itens 54 × 56 com raio 12, 6 px entre ícone e rótulo de 11 px; cor e fundo em 180 ms. A marca tem 44 px e raio 12. */
.fk-rail--compacto {
  gap: var(--space-2);
  width: var(--tamanho-rail-celular);
  padding: var(--space-10) var(--space-4);
  border-radius: var(--radius-18);
}
.fk-rail--compacto.fk-rail--fixo {
  top: var(--space-8);
  bottom: var(--space-8);
  left: var(--space-8);
}
.fk-rail--compacto .fk-rail__marca { margin-bottom: var(--space-12); border-radius: var(--radius-12); }
.fk-rail--compacto .fk-rail__marca img { width: var(--tamanho-rail-marca-celular); height: var(--tamanho-rail-marca-celular); border-radius: var(--radius-12); }
.fk-rail--compacto .fk-rail__item {
  gap: var(--space-6);
  width: var(--tamanho-rail-item-celular-largura);
  height: var(--tamanho-rail-item-celular-altura);
  border-radius: var(--radius-12);
  font-size: 11px; /* rail-rotulo no celular */
  transition: color var(--duracao-rail-compacto) var(--curva-opacidade), background var(--duracao-rail-compacto) var(--curva-opacidade);
}
/* Divisor: um sulco de 30 px entre a navegação e a conta (use junto com .fk-sulco). */
.fk-rail__divisor {
  flex: none;
  width: var(--space-30);
  margin: var(--space-8) 0 var(--space-10);
}
/* Conta: tecla redonda de 40 px na base do rail compacto (Minha conta ou Entrar com Google; use com .fk-tecla--redonda). */
.fk-rail__conta.fk-tecla {
  width: var(--tamanho-rail-conta);
  height: var(--tamanho-rail-conta);
}

/* ── Menos movimento: a luz troca de item sem acender nem assentar. ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-rail__item,
  .fk-rail__item::before,
  .fk-rail--compacto .fk-rail__item { transition: none; }
}

/* Source: ReferenciaMiniatura.css */
/* Fenaky Design System · ReferenciaMiniatura — a foto de uma imagem de referência (@Imagem1…5) no painel de Gerar com
   Ginga: miniatura com a etiqueta @ no pé, que abre a galeria para trocar a imagem. Inclui as peças da mesma fileira
   (a tecla "+ Imagem" no próximo lugar livre e o contorno tracejado de cada lugar ainda vago), o estado Trocando /
   Escolhendo (anel claro), a troca (lampejo e a foto nova entrando por cima da antiga) e a chegada de uma foto nova.
   Três medidas, uma por prancha:
   · padrão, painel lateral — Ginga.dc.html (.slots, .slot, .ref, .ref .tag, .add, .slot-empty, .choosing,
     .slot.editing, .slot.fa/.fb com ringA, wasA e nowA): fileira de 5 com vão de 7, foto 5:6, raio 11, etiqueta legenda;
   · --barra, painel horizontal — GingaHorizontal.dc.html (.refrow, .ref, .ref .tag, .ref.editing, .ref.chosen, .note,
     .pulse, .flash, .ref.fa/.fb com xfA, .ref.new com pop, .add, .add.editing, .ghost): 60 × 80, raio 10, etiqueta
     mínima centrada, véu com "Escolhendo";
   · --quadrada, celular — CriarMobile.dc.html (.slots, .rslot, .ref, .ref .tag, .add com tracejado interno, .rslot.fl-a):
     fileira de 3 com vão de 8, foto 1:1, raio 11, etiqueta no canto, aproximação sob o ponteiro.
   A etiqueta é a primitiva .fk-ref com os modificadores de Etiqueta.css (--legenda e --xs); aqui só a posição e, no
   celular, a medida de 18 px.
   Cores sem token exato saem dos tokens por color-mix (suporte amplo; nada de rgb(from …)):
   · branco a N % → color-mix(var(--branco) N %);
   · preto até 60 % → color-mix(var(--sulco-sombra) N %), porque sulco-sombra é preto a 60 % (30 % dele = .18, 92 % = .55);
   · preto acima de 60 % (65, 70, 75 %) → color-mix(var(--bg) N %): o sistema não tem preto opaco e bg (#0a0a0b) é o
     mais próximo; a diferença fica abaixo de 8/255 por canal.
   Números sem token levam o valor do canvas no comentário. */

/* ── Fileira ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Cinco lugares por linha no painel lateral; no fim da fileira vêm a tecla + Imagem e as vagas. */
.fk-referenciaminiatura__fileira {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-7);
}
/* Barra: a coluna tem exatamente cinco lugares de 60 px, para escolher ou enviar não mexer no resto do painel. */
.fk-referenciaminiatura__fileira--barra {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}
.fk-referenciaminiatura__fileira--quadrada {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

/* ── Miniatura ────────────────────────────────────────────────────────────────────────────────────────────────── */
.fk-referenciaminiatura {
  /* Cores do canvas derivadas dos tokens (comentário = valor original). */
  --fk-rm-reflexo: color-mix(in srgb, var(--branco) 8%, transparent);            /* rgba(255,255,255,.08) */
  --fk-rm-reflexo-hover: color-mix(in srgb, var(--branco) 14%, transparent);     /* rgba(255,255,255,.14) */
  --fk-rm-filete: color-mix(in srgb, var(--branco) 10%, transparent);            /* rgba(255,255,255,.1) */
  --fk-rm-pe: color-mix(in srgb, var(--bg) 70%, transparent);                    /* rgba(0,0,0,.7) */
  --fk-rm-pe-fim: 52%;
  --fk-rm-fio: color-mix(in srgb, var(--bg) 75%, transparent);                   /* rgba(0,0,0,.75) */
  --fk-rm-contato: color-mix(in srgb, var(--sulco-sombra) 92%, transparent);     /* rgba(0,0,0,.55) */
  /* Sombra exata do .ref do canvas: fio escuro de 1 px e sombra de contato 0 5 12. Não usa shadow-miniatura porque
     esse token traz um filete interno branco a 8 % que o .ref não tem (o filete do .ref é o do ::after, a 10 %). */
  --fk-rm-sombra: 0 0 0 1px var(--fk-rm-fio), 0 5px 12px var(--fk-rm-contato);
  /* Atraso da troca: 0 no painel; no celular a folha fecha antes (CriarMobile .25 s = duracao-cor), ver --quadrada. */
  --fk-rm-atraso: 0s;
  /* Anel da troca: .9 s no painel (Ginga ringA); 1 s no celular (CriarMobile ringA), ver --quadrada. */
  --fk-rm-anel-duracao: var(--duracao-listras);
  --fk-rm-enquadre: 50% 30%;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  padding: 0;
  border: 0;
  border-radius: var(--radius-11);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
  background: var(--midia-fundo);
  box-shadow: var(--fk-rm-sombra);
  transition: box-shadow var(--duracao-curta) var(--curva-opacidade);
  -webkit-tap-highlight-color: transparent;
}
/* Quadro: recorta as fotos no raio (a miniatura em si não recorta, para o anel e a pílula Trocando saírem dela). */
.fk-referenciaminiatura__quadro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.fk-referenciaminiatura__foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fk-rm-enquadre);
  -webkit-user-drag: none;
  user-select: none;
}
/* A foto anterior fica embaixo, invisível; só aparece durante a troca (--troca-a/--troca-b). */
.fk-referenciaminiatura__foto--antes { opacity: 0; }
/* Reflexo do alto, pé escuro para a etiqueta e filete claro de 1 px. */
.fk-referenciaminiatura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--fk-rm-filete);
  background: linear-gradient(180deg, var(--fk-rm-reflexo), transparent 30%, transparent var(--fk-rm-pe-fim), var(--fk-rm-pe));
  transition: background var(--duracao-curta) var(--curva-opacidade);
}
.fk-referenciaminiatura:hover::after {
  background: linear-gradient(180deg, var(--fk-rm-reflexo-hover), transparent 30%, transparent var(--fk-rm-pe-fim), var(--fk-rm-pe));
}
/* Etiqueta @: na foto de 61 px lê melhor como legenda no pé escuro (use .fk-ref.fk-etiqueta--legenda). */
.fk-referenciaminiatura__etiqueta {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: var(--space-6);
  pointer-events: none;
}

/* Lampejo da troca (::before): anel branco de 2 px que se abre 13 px e some, com brilho de 26 px (Ginga ringA). */
.fk-referenciaminiatura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.fk-referenciaminiatura--troca-a::before { animation: fk-referenciaminiatura-anel-a var(--fk-rm-anel-duracao) var(--curva-casa) var(--fk-rm-atraso); }
.fk-referenciaminiatura--troca-b::before { animation: fk-referenciaminiatura-anel-b var(--fk-rm-anel-duracao) var(--curva-casa) var(--fk-rm-atraso); }
/* A foto anterior desfoca e cresce saindo (650 ms = deslize + 50 ms); a nova entra clara e desfocada (850 ms). */
.fk-referenciaminiatura--troca-a .fk-referenciaminiatura__foto--antes { animation: fk-referenciaminiatura-sai-a calc(var(--duracao-deslize) + 50ms) var(--curva-opacidade) var(--fk-rm-atraso) forwards; }
.fk-referenciaminiatura--troca-b .fk-referenciaminiatura__foto--antes { animation: fk-referenciaminiatura-sai-b calc(var(--duracao-deslize) + 50ms) var(--curva-opacidade) var(--fk-rm-atraso) forwards; }
.fk-referenciaminiatura--troca-a .fk-referenciaminiatura__foto:not(.fk-referenciaminiatura__foto--antes) { animation: fk-referenciaminiatura-entra-a var(--duracao-central-abre) var(--curva-casa) var(--fk-rm-atraso) both; }
.fk-referenciaminiatura--troca-b .fk-referenciaminiatura__foto:not(.fk-referenciaminiatura__foto--antes) { animation: fk-referenciaminiatura-entra-b var(--duracao-central-abre) var(--curva-casa) var(--fk-rm-atraso) both; }
/* Pares iguais com nomes diferentes: alternar a classe repete a animação sem recriar o elemento.
   Anel: 2 px (largura do anel de escolha), abre 13 px e brilha 26 px — valores do canvas, sem token. */
@keyframes fk-referenciaminiatura-anel-a {
  0% { opacity: 1; box-shadow: 0 0 0 2px var(--branco), 0 0 0 0 color-mix(in srgb, var(--branco) 50%, transparent), 0 0 26px color-mix(in srgb, var(--branco) 30%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 0 2px var(--branco), 0 0 0 13px color-mix(in srgb, var(--branco) 0%, transparent), 0 0 26px color-mix(in srgb, var(--branco) 0%, transparent); }
}
@keyframes fk-referenciaminiatura-anel-b {
  0% { opacity: 1; box-shadow: 0 0 0 2px var(--branco), 0 0 0 0 color-mix(in srgb, var(--branco) 50%, transparent), 0 0 26px color-mix(in srgb, var(--branco) 30%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 0 2px var(--branco), 0 0 0 13px color-mix(in srgb, var(--branco) 0%, transparent), 0 0 26px color-mix(in srgb, var(--branco) 0%, transparent); }
}
/* Saída: desfoque-saida (8 px) e escala 1,08 (Ginga wasA). Entrada: desfoque-chegada (10 px), brilho 1,5 e escala
   1,16 a partir de 25 % (Ginga nowA). */
@keyframes fk-referenciaminiatura-sai-a { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(var(--desfoque-saida)); transform: scale(1.08); } }
@keyframes fk-referenciaminiatura-sai-b { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(var(--desfoque-saida)); transform: scale(1.08); } }
@keyframes fk-referenciaminiatura-entra-a { from { opacity: .25; filter: blur(var(--desfoque-chegada)) brightness(1.5); transform: scale(1.16); } to { opacity: 1; filter: none; transform: none; } }
@keyframes fk-referenciaminiatura-entra-b { from { opacity: .25; filter: blur(var(--desfoque-chegada)) brightness(1.5); transform: scale(1.16); } to { opacity: 1; filter: none; transform: none; } }

/* ── Trocando / Escolhendo: a galeria está escolhendo para este lugar (aria-pressed="true" ou --editando) ─────── */
/* Anel de 2 px em texto-forte com halo de 6 px em anel-escolha e sombra 0 8 18 em sulco-sombra (preto a 60 %). */
:is(.fk-referenciaminiatura--editando, .fk-referenciaminiatura[aria-pressed="true"]) {
  box-shadow: 0 0 0 2px var(--texto-forte), 0 0 0 6px var(--anel-escolha), 0 8px 18px var(--sulco-sombra);
}
/* Pílula clara no alto, centrada e 9 px acima da borda: "Trocando" numa foto, "Escolhendo" na tecla + Imagem.
   17 px de altura (tamanho-ref − 4), 700 9,5 px (Ginga .choosing; sem estilo tipográfico desse tamanho) em
   tinta-pilula (16,9:1). Sombra 0 3 8 a 55 % (sulco-sombra a 92 %). */
.fk-referenciaminiatura__selo {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(var(--space-9) * -1);
  display: inline-flex;
  align-items: center;
  height: calc(var(--tamanho-ref) - var(--space-4));
  padding: 0 var(--space-6);
  border-radius: var(--radius-pilula);
  white-space: nowrap;
  pointer-events: none;
  color: var(--tinta-pilula);
  font: 700 9.5px/1 var(--font-texto);
  background: var(--pilula);
  box-shadow: 0 var(--space-3) var(--space-8) var(--fk-rm-contato);
  opacity: 0;
  transform: translate(-50%, var(--space-5)) scale(.85);
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
:is(.fk-referenciaminiatura--editando, .fk-referenciaminiatura[aria-pressed="true"]) .fk-referenciaminiatura__selo {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ── Adicionar e vaga: os lugares livres da fileira ──────────────────────────────────────────────────────────── */
/* + Imagem: um poço do tamanho da foto, com o ícone de 16 px sobre o rótulo; acende sob o ponteiro.
   600 10,5 px em Manrope (Ginga .add; o estilo selo tem o mesmo tamanho, mas em 700). */
.fk-referenciaminiatura--adicionar {
  --fk-rm-poco: inset 0 2px 5px var(--fk-rm-fio), inset 0 0 0 1px color-mix(in srgb, var(--branco) 6%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  color: var(--texto-controle); /* #8e8e94: 6,0:1 no poço */
  font: 600 10.5px/1 var(--font-texto);
  background: var(--poco);
  box-shadow: var(--fk-rm-poco);
  transition: color var(--duracao-hover), box-shadow var(--duracao-curta);
}
.fk-referenciaminiatura--adicionar::after { content: none; }
.fk-referenciaminiatura--adicionar:hover { color: var(--texto-forte); }
.fk-referenciaminiatura--adicionar svg { display: block; flex: none; }
/* Escolhendo no painel lateral: poço, anel, halo e a sombra 0 8 18 (Ginga .slot.editing .add). */
:is(.fk-referenciaminiatura--adicionar.fk-referenciaminiatura--editando, .fk-referenciaminiatura--adicionar[aria-pressed="true"]) {
  color: var(--texto-forte);
  box-shadow: var(--fk-rm-poco), 0 0 0 2px var(--texto-forte), 0 0 0 6px var(--anel-escolha), 0 8px 18px var(--sulco-sombra);
}
/* Vaga: só o contorno tracejado, mais quieto que o + Imagem, para a fileira ler como cinco lugares. */
.fk-referenciaminiatura--vaga {
  cursor: default;
  background: color-mix(in srgb, var(--sulco-sombra) 30%, transparent); /* rgba(0,0,0,.18) */
  box-shadow: none;
  border: 1px dashed color-mix(in srgb, var(--branco) 14%, transparent);
}
.fk-referenciaminiatura--vaga::after { content: none; }

/* ── Barra: 60 × 80 no painel horizontal ─────────────────────────────────────────────────────────────────────── */
.fk-referenciaminiatura--barra {
  --fk-rm-pe: color-mix(in srgb, var(--bg) 65%, transparent);                    /* rgba(0,0,0,.65) */
  --fk-rm-pe-fim: 55%;
  --fk-rm-enquadre: 50% 50%;
  flex: none;
  width: calc(var(--space-56) + var(--space-4));   /* 60 */
  height: calc(var(--space-64) + var(--space-16)); /* 80 */
  aspect-ratio: auto;
  border-radius: var(--radius-10);
  /* 350 ms = metade de duracao-silencio, na curva da casa. */
  transition: box-shadow calc(var(--duracao-silencio) / 2) var(--curva-casa);
}
.fk-referenciaminiatura--barra::after,
.fk-referenciaminiatura--barra:hover::after { background: linear-gradient(180deg, var(--fk-rm-reflexo), transparent 30%, transparent var(--fk-rm-pe-fim), var(--fk-rm-pe)); }
.fk-referenciaminiatura--barra .fk-referenciaminiatura__foto { transition: filter calc(var(--duracao-silencio) / 2) var(--curva-opacidade); }
.fk-referenciaminiatura--barra:hover .fk-referenciaminiatura__foto { filter: brightness(1.12); }
/* Etiqueta mínima (.fk-ref.fk-etiqueta--xs) centrada a 4 px do pé, com margens iguais na foto de 60 px. */
.fk-referenciaminiatura--barra .fk-referenciaminiatura__etiqueta {
  left: 50%;
  right: auto;
  bottom: var(--space-4);
  transform: translateX(-50%);
}
/* Escolhendo: a foto escurece sob um véu e o aviso com o ponto pulsante aparece no meio, acima da etiqueta. */
:is(.fk-referenciaminiatura--barra.fk-referenciaminiatura--editando, .fk-referenciaminiatura--barra[aria-pressed="true"]) .fk-referenciaminiatura__foto {
  filter: brightness(.4) saturate(.7);
}
/* Aviso: 600 9,5 px, −0,015 em, texto-aceso com sombra 0 1 6 a 70 % (GingaHorizontal .note). */
.fk-referenciaminiatura__aviso {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  pointer-events: none;
  color: var(--texto-aceso);
  font: 600 9.5px/1 var(--font-texto);
  letter-spacing: -.015em;
  text-shadow: 0 var(--space-1) var(--space-6) color-mix(in srgb, var(--bg) 70%, transparent); /* rgba(0,0,0,.7) */
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity var(--duracao-curta) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
:is(.fk-referenciaminiatura--editando, .fk-referenciaminiatura[aria-pressed="true"]) .fk-referenciaminiatura__aviso { opacity: 1; transform: none; }
/* Escolhida: a escolha caiu no lugar; o véu sai para a foto nova ler na hora e só o anel fica. */
:is(.fk-referenciaminiatura--editando, .fk-referenciaminiatura[aria-pressed="true"]).fk-referenciaminiatura--escolhida .fk-referenciaminiatura__foto { filter: none; }
:is(.fk-referenciaminiatura--editando, .fk-referenciaminiatura[aria-pressed="true"]).fk-referenciaminiatura--escolhida .fk-referenciaminiatura__aviso { opacity: 0; transform: translateY(calc(var(--space-4) * -1)); }
/* Ponto de 6 px em texto-forte com onda de 8 px a 55 % (1,5 s = duracao-curta × 5, ease-out do canvas). */
.fk-referenciaminiatura__pulso {
  flex: none;
  display: inline-block;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circulo);
  background: var(--texto-forte);
  animation: fk-referenciaminiatura-pulso calc(var(--duracao-curta) * 5) ease-out infinite;
}
@keyframes fk-referenciaminiatura-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--texto-forte) 55%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--texto-forte) 0%, transparent); }
}
/* Troca na barra: lampejo por dentro (2 px e brilho de 22 px a 50 %, 1,1 s = giro + 100 ms, ease-out do canvas) e a
   foto nova entra de 1,14 desfocada em 7 px (800 ms = silencio + 100 ms), sem a saída da anterior.
   O lampejo da miniatura ocupa a foto inteira (GingaHorizontal .flash: inset 0, raio herdado). O recuo de 2 px e o raio
   9 (.arow .flash) são da fileira de áudio, não desta peça. */
.fk-referenciaminiatura--barra.fk-referenciaminiatura--troca-a::before { animation: fk-referenciaminiatura-lampejo-a calc(var(--duracao-giro) + 100ms) ease-out var(--fk-rm-atraso); }
.fk-referenciaminiatura--barra.fk-referenciaminiatura--troca-b::before { animation: fk-referenciaminiatura-lampejo-b calc(var(--duracao-giro) + 100ms) ease-out var(--fk-rm-atraso); }
.fk-referenciaminiatura--barra.fk-referenciaminiatura--troca-a .fk-referenciaminiatura__foto--antes,
.fk-referenciaminiatura--barra.fk-referenciaminiatura--troca-b .fk-referenciaminiatura__foto--antes { animation: none; opacity: 1; }
.fk-referenciaminiatura--barra.fk-referenciaminiatura--troca-a .fk-referenciaminiatura__foto:not(.fk-referenciaminiatura__foto--antes) { animation: fk-referenciaminiatura-cruza-a calc(var(--duracao-silencio) + 100ms) var(--curva-casa) var(--fk-rm-atraso) both; }
.fk-referenciaminiatura--barra.fk-referenciaminiatura--troca-b .fk-referenciaminiatura__foto:not(.fk-referenciaminiatura__foto--antes) { animation: fk-referenciaminiatura-cruza-b calc(var(--duracao-silencio) + 100ms) var(--curva-casa) var(--fk-rm-atraso) both; }
@keyframes fk-referenciaminiatura-lampejo-a {
  0% { opacity: 1; box-shadow: inset 0 0 0 2px var(--branco), inset 0 0 22px color-mix(in srgb, var(--branco) 50%, transparent); }
  100% { opacity: 0; box-shadow: inset 0 0 0 2px var(--branco), inset 0 0 22px color-mix(in srgb, var(--branco) 0%, transparent); }
}
@keyframes fk-referenciaminiatura-lampejo-b {
  0% { opacity: 1; box-shadow: inset 0 0 0 2px var(--branco), inset 0 0 22px color-mix(in srgb, var(--branco) 50%, transparent); }
  100% { opacity: 0; box-shadow: inset 0 0 0 2px var(--branco), inset 0 0 22px color-mix(in srgb, var(--branco) 0%, transparent); }
}
/* Desfoque de 7 px (xfA) sem token: fica entre desfoque-texto (4) e desfoque-saida (8). */
@keyframes fk-referenciaminiatura-cruza-a { from { opacity: 0; transform: scale(1.14); filter: blur(7px); } }
@keyframes fk-referenciaminiatura-cruza-b { from { opacity: 0; transform: scale(1.14); filter: blur(7px); } }
/* Chegada: a foto nova sobe 10 px de 70 % e desfocada em 5 px (GingaHorizontal pop; 700 ms = duracao-silencio). */
.fk-referenciaminiatura--entra { animation: fk-referenciaminiatura-chega var(--duracao-silencio) var(--curva-casa) backwards; }
@keyframes fk-referenciaminiatura-chega { from { opacity: 0; transform: translateY(var(--space-10)) scale(.7); filter: blur(5px); } }
/* + Imagem na barra: 600 10 px (GingaHorizontal .add); o ícone de 15 px sobe 7 px e o rótulo fica 8 px abaixo do
   meio; escolhendo, os dois saem e o aviso "Escolhendo" com o ponto toma o lugar. */
.fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar {
  display: block;
  overflow: hidden;
  font-size: 10px;
  transition: color var(--duracao-hover), box-shadow calc(var(--duracao-silencio) / 2) var(--curva-casa);
}
.fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--space-7)));
  transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-cor);
}
.fk-referenciaminiatura__rotulo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--space-8));
  white-space: nowrap;
  transition: opacity var(--duracao-cor) var(--curva-opacidade), transform var(--duracao-media) var(--curva-casa);
}
.fk-referenciaminiatura--adicionar:not(.fk-referenciaminiatura--barra) .fk-referenciaminiatura__rotulo { position: static; }
.fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar .fk-referenciaminiatura__aviso { bottom: 0; }
/* Escolhendo na barra: poço, anel e halo, sem a sombra 0 8 18 da foto (GingaHorizontal .add.editing). */
:is(.fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar.fk-referenciaminiatura--editando, .fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar[aria-pressed="true"]) {
  box-shadow: var(--fk-rm-poco), 0 0 0 2px var(--texto-forte), 0 0 0 6px var(--anel-escolha);
}
:is(.fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar.fk-referenciaminiatura--editando, .fk-referenciaminiatura--barra.fk-referenciaminiatura--adicionar[aria-pressed="true"]) :is(svg, .fk-referenciaminiatura__rotulo) { opacity: 0; }
.fk-referenciaminiatura--barra.fk-referenciaminiatura--vaga { border-radius: var(--radius-10); }

/* ── Quadrada: 1:1 no celular ────────────────────────────────────────────────────────────────────────────────── */
/* A troca começa depois que a folha fecha (.25 s = duracao-cor) e o anel dura 1 s (duracao-giro), como em CriarMobile
   (.rslot.fl-a: ringA 1s .25s; img: nowA .85s .25s). No celular não há saída da foto anterior: só a nova entra. */
.fk-referenciaminiatura--quadrada {
  --fk-rm-enquadre: 50% 22%;
  --fk-rm-atraso: var(--duracao-cor);
  --fk-rm-anel-duracao: var(--duracao-giro);
  aspect-ratio: 1;
}
.fk-referenciaminiatura--quadrada.fk-referenciaminiatura--troca-a .fk-referenciaminiatura__foto--antes,
.fk-referenciaminiatura--quadrada.fk-referenciaminiatura--troca-b .fk-referenciaminiatura__foto--antes { animation: none; opacity: 0; }
/* A foto aproxima 3 % (500 ms = duracao-cor × 2) e o fio acende a 30 %, sem o reflexo mais claro do painel. */
.fk-referenciaminiatura--quadrada .fk-referenciaminiatura__foto { transition: transform calc(var(--duracao-cor) * 2) var(--curva-casa); }
.fk-referenciaminiatura--quadrada:hover .fk-referenciaminiatura__foto { transform: scale(1.03); }
.fk-referenciaminiatura--quadrada:not(.fk-referenciaminiatura--adicionar):hover::after { background: linear-gradient(180deg, var(--fk-rm-reflexo), transparent 30%, transparent var(--fk-rm-pe-fim), var(--fk-rm-pe)); }
.fk-referenciaminiatura--quadrada:not(.fk-referenciaminiatura--adicionar):not(.fk-referenciaminiatura--vaga):hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--branco) 30%, transparent), 0 5px 12px var(--fk-rm-contato);
}
/* Etiqueta no canto de baixo à esquerda, a 5 px: pílula de 18 px (tamanho-ref − 3), padding 0 7, 10 px (CriarMobile .ref .tag). */
.fk-referenciaminiatura--quadrada .fk-referenciaminiatura__etiqueta {
  left: var(--space-5);
  right: auto;
  bottom: var(--space-5);
  height: calc(var(--tamanho-ref) - var(--space-3));
  padding: 0 var(--space-7);
  margin: 0;
  font-size: 10px;
}
/* + Imagem no celular: 600 11 px (CriarMobile .add; o estilo nota tem 11 px, mas em 500), vão 7, em texto-apoio
   (#9a9aa0), com um tracejado de 1,5 px (canvas) a 6 px da borda. */
.fk-referenciaminiatura--quadrada.fk-referenciaminiatura--adicionar {
  gap: var(--space-7);
  color: var(--texto-apoio);
  font-size: 11px;
  transition: color var(--duracao-hover);
}
.fk-referenciaminiatura--quadrada.fk-referenciaminiatura--adicionar::after {
  content: '';
  inset: var(--space-6);
  z-index: 0;
  border-radius: var(--radius-8);
  border: 1.5px dashed color-mix(in srgb, var(--branco) 12%, transparent);
  box-shadow: none;
  background: none;
  transition: border-color var(--duracao-cor) var(--curva-opacidade);
}
.fk-referenciaminiatura--quadrada.fk-referenciaminiatura--adicionar:hover { color: var(--texto-forte); }
.fk-referenciaminiatura--quadrada.fk-referenciaminiatura--adicionar:hover::after { border-color: color-mix(in srgb, var(--branco) 26%, transparent); }

/* ── Menos movimento: a troca e a chegada acontecem no lugar; o ponto fica parado; nada aproxima. ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-referenciaminiatura,
  .fk-referenciaminiatura::after,
  .fk-referenciaminiatura__foto,
  .fk-referenciaminiatura__selo,
  .fk-referenciaminiatura__aviso,
  .fk-referenciaminiatura__rotulo,
  .fk-referenciaminiatura--adicionar svg { transition: none; }
  .fk-referenciaminiatura,
  .fk-referenciaminiatura::before,
  .fk-referenciaminiatura__foto,
  .fk-referenciaminiatura__pulso { animation: none !important; }
  .fk-referenciaminiatura .fk-referenciaminiatura__foto--antes { opacity: 0 !important; }
  .fk-referenciaminiatura--quadrada:hover .fk-referenciaminiatura__foto { transform: none; }
}

/* Source: ResumoPedido.css */
/* Fenaky Design System · ResumoPedido — o pedido levado de Planos até o pagamento: o bilhete do plano escolhido
   (perfurado, com entalhes recortados), a escolha da forma de pagamento (Segmentado vertical com nota), a forma de
   pagamento que troca subindo de um desfoque, a cabeça das camadas de pagamento (ícone, título e
   "Pro · 250 créditos · R$ 450,00") e o recibo da compra confirmada (ganho de créditos e a grade Plano, Valor,
   Pagamento, Próxima renovação).
   Fonte: PlanoResumo.dc.html (.tk-wrap, .ticket, .t-*, .seal, .seg.slide.pm, .pm-t, .sw/.x, .w-head, .w-t, .w-p,
   .ok-k, .gain, .rcpt, .rise/itIn). Material de casca, módulo, poço, sulco, rótulo, segmentado e knob vem das
   primitivas de 00-base.css e do BotaoRedondo.

   Regras de escrita deste arquivo:
   - Cores sempre por token. Valores sem token, derivados (ver README): o lilás de apoio do bilhete #d0c0e3 = mistura
     de --pro-texto 33% com --pro-texto-apoio (#d0c0e6); o cinza do texto do ganho #a4a4aa = --texto-unidade 66% com
     --texto-apoio; o preto de 65% do aro do knob = dois aros de 1 px sobrepostos (50% e 30%, ver o anel).
   - Medidas de movimento (deslocamentos, escalas, desfoques e durações das trocas) ficam LITERAIS, com a origem no
     canvas ao lado: são do movimento do resumo, não da escala de espaço. Token só quando o valor é o mesmo papel
     (--duracao-entrada e --desfoque-entrada na entrada, --duracao-pulso no anel, --curva-casa em tudo).
   - Geometria de sombra e tamanhos de peça únicos (selo 22 px, knob 38 px) também são literais do canvas. */

/* ── Bilhete: a sombra fica no invólucro, porque a máscara dos entalhes cortaria um box-shadow externo ─────────── */
/* O invólucro mede a largura disponível (container inline-size) para o bilhete escolher o arranjo estreito. Ele é um
   bloco: numa coluna (flex ou grade) ou no fluxo normal ocupa a largura toda. Não o ponha numa linha flex sem largura. */
.fk-resumopedido {
  container: fk-resumopedido / inline-size;
  flex: none;
  min-width: 0;
  /* .tk-wrap: 0 1px 0 preto 50% e 0 12px 14px preto 55% (= --sulco-sombra 60% × 91,67%). */
  filter:
    drop-shadow(0 1px 0 var(--divisor-sombra))
    drop-shadow(0 12px 14px color-mix(in srgb, var(--sulco-sombra) 91.67%, transparent));
}
.fk-resumopedido__bilhete {
  /* Centro dos entalhes = centro da perfuração. Arranjo largo (canvas): 18 (padding) + 34 (linha de cima, a altura do
     preço) + 10 + 14,4 (linha de créditos) + 15 (margem da perfuração) + 0,75 (meio traço) ≈ 92 px.
     O arranjo estreito, mais abaixo, troca por 148,5 px. Regra no README ("Altura dos entalhes"). */
  --fk-resumopedido-corte: 92px;
  --fk-resumopedido-apoio: color-mix(in srgb, var(--pro-texto) 33%, var(--pro-texto-apoio));
  --fk-resumopedido-aro: color-mix(in srgb, var(--violeta) 62%, transparent);
  position: relative;
  isolation: isolate;
  overflow: clip; /* Os anéis dos entalhes já são recortados pela máscara; não ampliam a rolagem da página. */
  padding: var(--space-18) var(--space-20) 15px;
  border-radius: var(--radius-16);
  color: var(--branco);
  background:
    url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao),
    linear-gradient(155deg, var(--pro-topo), var(--pro-base));
  box-shadow:
    inset 0 0 0 1px var(--fk-resumopedido-aro),
    inset 0 1px 0 color-mix(in srgb, var(--branco) 16%, transparent);
  /* Dois entalhes de 7 px recortados nas bordas, na altura da perfuração; o fundo atrás aparece por eles.
     Na máscara só o alfa conta: #000 é apenas "opaco", não uma cor de tinta (o canvas usa o mesmo #000). */
  -webkit-mask:
    radial-gradient(circle 8px at 0 var(--fk-resumopedido-corte), transparent 7px, #000 7.6px),
    radial-gradient(circle 8px at 100% var(--fk-resumopedido-corte), transparent 7px, #000 7.6px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 8px at 0 var(--fk-resumopedido-corte), transparent 7px, #000 7.6px),
    radial-gradient(circle 8px at 100% var(--fk-resumopedido-corte), transparent 7px, #000 7.6px);
  mask-composite: intersect;
}
/* Neutro: planos sem o violeta (Start, Plus, Ultra, Max). Derivado: paradas da casca compacta, aro do topo dela,
   apoio em texto-apoio (como o .sunit do resumo de Planos) e o selo na fita .plain de Planos. */
.fk-resumopedido--neutro .fk-resumopedido__bilhete {
  --fk-resumopedido-apoio: var(--texto-apoio);
  --fk-resumopedido-aro: var(--casca-compacta-filete-topo);
  background:
    url(grain.png) 0 0 / var(--tamanho-grao) var(--tamanho-grao),
    linear-gradient(155deg, var(--casca-compacta-topo), var(--casca-compacta-base));
  box-shadow:
    inset 0 0 0 1px var(--fk-resumopedido-aro),
    inset 0 1px 0 color-mix(in srgb, var(--branco) 10%, transparent);
}

.fk-resumopedido__linha {
  display: flex;
  /* Rede de segurança: se um texto do catálogo não couber, a linha quebra em vez de vazar. O arranjo estreito
     (abaixo) é o que mantém a perfuração no lugar; a quebra só evita o transbordo. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-16);
}
.fk-resumopedido__nome { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.fk-resumopedido__plano {
  margin: 0;
  color: var(--branco);
  font: 600 26px/1 var(--font-display);
  letter-spacing: -.03em;
}
/* .seal: 22 px de altura, 9 de recuo, raio 6, Manrope 700 10,5 px. */
.fk-resumopedido__selo {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-9);
  border-radius: var(--radius-6);
  color: var(--branco);
  font: 700 10.5px/1 var(--font-texto);
  white-space: nowrap;
  background: var(--selo-recomendado);
  /* .seal: inset 0 1px 0 branco 22%, 0 4px 10px -2px preto 50%. */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 22%, transparent),
    0 4px 10px -2px var(--divisor-sombra);
}
/* Fita .plain de Planos: tecla cinza (#3a3a40 → #2a2a2e), texto #f2f2f4 e
   inset 0 1px 0 branco 15%, 0 0 0 1px preto 60%, 0 4px 10px preto 50%. */
.fk-resumopedido--neutro .fk-resumopedido__selo {
  color: var(--texto-forte);
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--branco) 15%, transparent),
    0 0 0 1px var(--sulco-sombra),
    0 4px 10px var(--divisor-sombra);
}
.fk-resumopedido__preco {
  margin: 0;
  color: var(--branco);
  font: 600 34px/1 var(--font-display);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fk-resumopedido__moeda {
  margin-right: var(--space-4);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--fk-resumopedido-apoio);
  vertical-align: 4px;
}
.fk-resumopedido__sub {
  margin-top: var(--space-10);
  color: var(--fk-resumopedido-apoio);
  font: 500 12px/1.2 var(--font-texto);
}
.fk-resumopedido__sub b {
  color: var(--branco);
  font: 600 12.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Perfuração (.t-perf): traço de 1,5 px que entra 9 px nos entalhes; os dois anéis de 16 px contornam os recortes
   com o aro. Medidas do canvas. */
.fk-resumopedido__perfuracao {
  position: relative;
  height: 0;
  margin: 15px -9px 13px;
  border-top: 1.5px dashed color-mix(in srgb, var(--fk-resumopedido-apoio) 30%, transparent);
}
.fk-resumopedido__perfuracao::before,
.fk-resumopedido__perfuracao::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circulo);
  box-shadow: inset 0 0 0 1px var(--fk-resumopedido-aro);
}
.fk-resumopedido__perfuracao::before { left: -19px; }
.fk-resumopedido__perfuracao::after { right: -19px; }
.fk-resumopedido__chave {
  color: var(--fk-resumopedido-apoio);
  font: 600 10px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fk-resumopedido__valor {
  justify-items: end;
  color: var(--branco);
  font: 600 13px/1 var(--font-texto);
}
.fk-resumopedido__valor .fk-resumopedido__face { display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
.fk-resumopedido__valor svg { flex: none; }

/* ── Estreito: bilhete com menos de 420 px (celular de 320 a 428 px, com 16 px de margem) ───────────────────────
   Não há prancheta móvel do resumo; o arranjo é derivado do largo, sem mudar nenhuma medida de tipo. O preço desce
   para baixo do nome (10 px abaixo, o mesmo vão da linha de créditos) e a linha de créditos vira duas (6 px entre
   elas, o vão do .acct-t do canvas arredondado ao da escala). O corte fica em
   18 + 26 (nome) + 10 + 34 (preço) + 10 + 14,4 + 6 + 14,4 + 15 + 0,75 ≈ 148,5 px.
   420 px é a largura mínima do pior plano no arranjo largo ("Max · Menor preço por crédito · R$ 1.400,00"). */
@container fk-resumopedido (max-width: 419.98px) {
  .fk-resumopedido__bilhete { --fk-resumopedido-corte: 148.5px; }
  .fk-resumopedido__bilhete > .fk-resumopedido__linha:first-child,
  .fk-resumopedido__bilhete > .fk-resumopedido__sub {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .fk-resumopedido__bilhete > .fk-resumopedido__linha:first-child { gap: var(--space-10); }
  .fk-resumopedido__bilhete > .fk-resumopedido__sub { gap: var(--space-6); }
}

/* ── Forma de pagamento: Segmentado vertical com nota (.seg.slide.pm) ──────────────────────────────────────────
   Vai no MESMO elemento que .fk-seg.fk-seg--deslizante (com --n e --i). Duas linhas de 40 px, uma sobre a outra; a
   tecla acesa cinza (.fk-seg__indicador) desce de uma para a outra na curva da casa. Cada opção leva o ícone e o nome
   (.fk-resumopedido__forma) e uma nota à direita (.fk-resumopedido__forma-nota). */
.fk-seg.fk-resumopedido__formas {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 40px;
  /* .pm: opacity .3s ease ao travar. */
  transition: opacity var(--duracao-curta) var(--curva-opacidade);
}
.fk-resumopedido__formas > .fk-seg__indicador {
  right: var(--space-3);
  bottom: auto;
  width: auto;
  height: calc((100% - (var(--n, 2) + 1) * var(--space-3)) / var(--n, 2));
  transform: translateY(calc(var(--i, 0) * (100% + var(--space-3))));
}
.fk-resumopedido__formas > .fk-seg__opcao {
  height: 40px;
  justify-content: flex-start;
  gap: var(--space-10);
  padding: 0 var(--space-12) 0 var(--space-14);
  min-width: 0;
}
.fk-resumopedido__forma {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-9);
  font: 600 12.5px/1 var(--font-texto);
}
.fk-resumopedido__forma svg { flex: none; }
.fk-resumopedido__forma-nota {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--texto-dica);
  font: 500 11px/1 var(--font-texto);
  transition: color var(--duracao-curta);
}
/* Na escolhida a nota clareia: o canvas usa #b4b4ba; --texto-leitura (#b7b7bd) é o token mais próximo. */
.fk-resumopedido__formas > :is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-pressed="true"]) .fk-resumopedido__forma-nota {
  color: var(--texto-leitura);
}
/* Travada (.pm.lock): depois de gerar o Pix ou abrir o cartão, a escolha fica visível mas não muda mais.
   Opacidade .55 do canvas (sem token de mesmo papel); o passar do mouse não acende nada. */
.fk-resumopedido__formas--travada { opacity: .55; }
.fk-resumopedido__formas--travada > .fk-seg__opcao { cursor: default; }
.fk-resumopedido__formas--travada > .fk-seg__opcao:hover { color: var(--texto-controle); }
.fk-resumopedido__formas--travada > :is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-pressed="true"]):hover { color: var(--texto-aceso); }

/* ── Troca: o texto que muda com a forma de pagamento (ou a fase). Todas as faces ocupam a mesma célula. ──────────
   .sw > .x: a que sai sobe 9 px e some num desfoque de 5 px (opacidade .22s ease, deslocamento .45s na curva da casa,
   desfoque .25s ease); a que entra (swIn) sobe 11 px de um desfoque de 6 px em .8s, com .1s de atraso. */
.fk-resumopedido__troca { display: grid; min-width: 0; }
.fk-resumopedido__face {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-9px);
  filter: blur(5px);
  transition:
    opacity 220ms var(--curva-opacidade),
    transform 450ms var(--curva-casa),
    filter 250ms var(--curva-opacidade),
    visibility 0s var(--curva-linear) 450ms;
}
.fk-resumopedido__face--ativa {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: visibility 0s;
  animation: fk-resumopedido-face 800ms var(--curva-casa) 100ms both;
}
@keyframes fk-resumopedido-face {
  0% { opacity: 0; transform: translateY(11px); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Grande (.sw.big, swBig): título da página e painéis inteiros. Sai a 14 px, escala .985, desfoque 10 px; entra de
   22 px, escala .97, desfoque 12 px, em .9s com .14s de atraso. */
.fk-resumopedido__troca--grande > .fk-resumopedido__face {
  transform: translateY(-14px) scale(.985);
  filter: blur(10px);
}
.fk-resumopedido__troca--grande > .fk-resumopedido__face--ativa {
  transform: none;
  filter: none;
  animation: fk-resumopedido-face-grande 900ms var(--curva-casa) 140ms both;
}
@keyframes fk-resumopedido-face-grande {
  0% { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(12px); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Entrada (.rise, itIn): sobe 40 px, escala .96, de um desfoque de 16 px, em .95s; atraso 120 ms + o escalonado
   (--fk-resumopedido-atraso). ────────────────────────────────────────────────────────────────────────────────── */
.fk-resumopedido--entra .fk-resumopedido__bilhete,
.fk-resumopedido__entra {
  animation: fk-resumopedido-entra var(--duracao-entrada) var(--curva-casa) calc(var(--fk-resumopedido-atraso, 0ms) + 120ms) both;
}
@keyframes fk-resumopedido-entra {
  0% { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(var(--desfoque-entrada)); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Cabeça das camadas de pagamento (.w-head): knob 38, título e a linha do pedido ───────────────────────────── */
.fk-resumopedido__cabeca { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.fk-resumopedido__cabeca .fk-resumopedido__icone { width: 38px; height: 38px; }
.fk-resumopedido__titulo {
  margin: 0;
  color: var(--texto-titulo);
  font: 600 17px/1.15 var(--font-display);
  letter-spacing: -.015em;
}
.fk-resumopedido__meta {
  margin: var(--space-5) 0 0;
  color: var(--texto-apoio);
  font: 500 12px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Confirmado (.ok-k, okRing): o knob verde solta um anel de 18 px uma vez, 1,6 s ease-out (valor da fonte, sem
   token de curva), 600 ms de atraso, fill both. Como no canvas, a animação troca a sombra inteira do knob: fica a luz
   de topo (branco 14%) e o aro preto de 65%, e sai a queda "0 3px 8px" do knob comum. O aro de 65% não tem token:
   são dois aros de 1 px sobrepostos, --divisor-sombra (50%) e ele mesmo a 60% (30%), 1 − .5 × .7 = .65. */
.fk-resumopedido__icone--confirmado { animation: fk-resumopedido-anel var(--duracao-pulso) ease-out 600ms both; }
@keyframes fk-resumopedido-anel {
  0% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--branco) 14%, transparent),
      0 0 0 1px var(--divisor-sombra),
      0 0 0 1px color-mix(in srgb, var(--divisor-sombra) 60%, transparent),
      0 0 0 0 color-mix(in srgb, var(--sucesso) 50%, transparent);
  }
  100% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--branco) 14%, transparent),
      0 0 0 1px var(--divisor-sombra),
      0 0 0 1px color-mix(in srgb, var(--divisor-sombra) 60%, transparent),
      0 0 0 18px color-mix(in srgb, var(--sucesso) 0%, transparent);
  }
}
.fk-resumopedido__giro { animation: fk-resumopedido-giro var(--duracao-giro) var(--curva-linear) infinite; }
@keyframes fk-resumopedido-giro { to { transform: rotate(360deg); } }

/* ── Recibo da compra confirmada ──────────────────────────────────────────────────────────────────────────────── */
/* Ganho (.gain): o número de créditos que entrou, 64 px, com o "+" apagado. Vai num .fk-poco. */
.fk-resumopedido__ganho {
  display: flex;
  align-items: center;
  gap: var(--space-18);
  margin: 0;
  padding: 38px var(--space-24);
}
.fk-resumopedido__ganho-n {
  color: var(--texto-aceso);
  font: 600 64px/.85 var(--font-display);
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  /* .gain b: 0 18px 40px preto 60%. */
  text-shadow: 0 18px 40px var(--sulco-sombra);
}
.fk-resumopedido__ganho-n i {
  margin-right: var(--space-2);
  font-style: normal;
  font-weight: 500;
  color: color-mix(in srgb, var(--texto-forte) 42%, transparent);
}
.fk-resumopedido__ganho-t {
  color: color-mix(in srgb, var(--texto-unidade) 66%, var(--texto-apoio));
  font: 500 12px/1.45 var(--font-texto);
}
.fk-resumopedido__ganho-t b {
  display: block;
  color: var(--texto-forte);
  font: 600 13px/1.3 var(--font-texto);
}
/* Grade 2 × 2 de termos (.rcpt), com filetes de luz entre as células. Vai num .fk-poco (<dl>). */
.fk-resumopedido__recibo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.fk-resumopedido__recibo > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  min-width: 0;
  padding: 21px var(--space-16);
}
.fk-resumopedido__recibo > div:nth-child(2n) { border-left: 1px solid var(--sulco-luz); }
.fk-resumopedido__recibo > div:nth-child(n+3) { border-top: 1px solid var(--sulco-luz); }
.fk-resumopedido__recibo dt {
  color: var(--texto-dica);
  font: 600 10px/1 var(--font-display);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.fk-resumopedido__recibo dd {
  margin: 0;
  color: var(--texto-forte);
  font: 600 13px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ── Menos movimento: a troca é seca, nada entra subindo, o anel e o giro param, a escolha não desliza. ──────── */
@media (prefers-reduced-motion: reduce) {
  .fk-resumopedido__face,
  .fk-resumopedido__face--ativa,
  .fk-resumopedido--entra .fk-resumopedido__bilhete,
  .fk-resumopedido__entra,
  .fk-resumopedido__icone--confirmado,
  .fk-resumopedido__giro,
  .fk-seg.fk-resumopedido__formas,
  .fk-resumopedido__formas > .fk-seg__indicador,
  .fk-resumopedido__forma-nota { transition: none !important; animation: none !important; }
}

/* Source: Rotulo.css */
/* Fenaky Design System · Rotulo — variantes e peças do rótulo em caixa-alta.
   A base (.fk-rotulo, .fk-rotulo__n, .fk-rotulo__dir) é primitiva de 00-base.css e não é redefinida aqui. Este arquivo
   acrescenta o que as pranchas aprovadas fazem com o rótulo: legenda de fieldset, leitura à direita que acende ou troca
   no lugar, chamada de vista com pulso e etiqueta @, tons (claro, suave, aviso, erro, Pro) e linha única.
   Fontes: Main, Avatares (legend.lbl, .lbl .r.hot), Termos (.lbl .r.hs), Ginga (.vh-text .lbl, .beat, .is-full),
   CriarMobile (.tagc), GingaHorizontal (.pk-titles .lbl), Home (.vmore .lbl), Influencers (.ask .lbl), Planos (.pro .lbl).
   Peças que moram em outros componentes e entram no rótulo sem ser redefinidas: a etiqueta @ (.fk-ref.fk-etiqueta--sm,
   Etiqueta) e a contagem em poço ao lado do nome (.fk-carrossel__contagem, Carrossel). */

/* ── Legenda: <legend> de fieldset que se comporta como os outros rótulos (Avatares, legend.lbl) ─────────────── */
/* O legend flutua para ocupar a largura e o flex funcionar; o conteúdo seguinte precisa de clear: both. */
.fk-rotulo--legenda {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--space-9);
}

/* ── Linha única: rótulo em faixa estreita ou com leitura longa (GingaHorizontal, HomeMobile, catálogo) ──────── */
.fk-rotulo--uma-linha { min-width: 0; white-space: nowrap; }
.fk-rotulo--uma-linha .fk-rotulo__dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Leitura à direita que acende: contagem que passa a valer (Avatares, .lbl .r.hot + @keyframes hintIn) ─────── */
/* Fonte de verdade da contagem que acende em qualquer rótulo. Entra 6 px da esquerda saindo de um desfoque e fica em
   texto-hover-rail enquanto vale. (FiltroVisual.css repete o mesmo quadro em .fk-filtrovisual__ativos--aceso.) */
.fk-rotulo__dir--aceso {
  color: var(--texto-hover-rail);
  animation: fk-rotulo-acende var(--duracao-media) var(--curva-casa) both;
}
@keyframes fk-rotulo-acende {
  from { opacity: 0; transform: translateX(calc(-1 * var(--space-6))); filter: blur(var(--desfoque-dica)); }
}

/* ── Leitura que troca no lugar (Termos, .lbl .r.hs) ─────────────────────────────────────────────────────────── */
/* As versões ficam empilhadas na mesma célula, alinhadas à direita; só uma está visível. A que entra espera 160 ms
   (4 × duracao-escalonamento, o .16s do canvas) para a que sai abrir caminho. */
.fk-rotulo__troca {
  display: grid;
  justify-items: end;
}
.fk-rotulo__troca > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity var(--duracao-media) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 4),
    transform var(--duracao-silencio) var(--curva-casa) calc(var(--duracao-escalonamento) * 4),
    filter var(--duracao-media) var(--curva-opacidade) calc(var(--duracao-escalonamento) * 4),
    visibility 0s;
}
.fk-rotulo__troca > [aria-hidden="true"] {
  opacity: 0;
  transform: translateY(var(--space-8));
  filter: blur(var(--desfoque-texto));
  visibility: hidden;
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    visibility 0s linear var(--duracao-media);
}

/* ── Chamada de vista: "● Escolhendo @Imagem2" acima do título de uma escolha (Ginga, .vh-text .lbl) ──────────── */
/* Mais clara que o rótulo de seção porque abre a vista; 19 px = altura da etiqueta compacta (tamanho-ref − 2 px).
   Cor: canvas #b4b4ba, sem token; token mais próximo --texto-leitura (#b7b7bd). */
.fk-rotulo--chamada {
  min-height: calc(var(--tamanho-ref) - var(--space-2));
  margin-bottom: var(--space-10);
  color: var(--texto-leitura);
}
/* Pulso: ponto de 7 px em texto-forte com um anel que se abre até 8 px e some (Ginga e CriarMobile, .beat).
   1,8 s = duracao-pulso (1,6 s) + duracao-rapida (0,2 s). */
.fk-rotulo__pulso {
  flex: none;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-pilula);
  background: var(--texto-forte);
  animation: fk-rotulo-pulso calc(var(--duracao-pulso) + var(--duracao-rapida)) ease-out infinite;
}
@keyframes fk-rotulo-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--texto-forte) 50%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--texto-forte) 0%, transparent); }
}
/* Pulso parado: a vista não está à frente (o canvas só anima a vista aberta). */
.fk-rotulo__pulso--parado { animation: none; }
/* Etiqueta @ na chamada de vista. A geometria (19 px, padding 0 6, sem margem, sem caixa-alta) é a da etiqueta pequena,
   .fk-ref.fk-etiqueta--sm (Etiqueta.css, 10,5 px, de GingaHorizontal .pk-titles .lbl .tag); use as três classes juntas.
   Aqui só sobe o corpo para os 11 px de Ginga .vh-text .lbl .tag e CriarMobile .tagc. 11 px é o estilo tipográfico
   vidro-rotulo/controle-sm, que o tipo publica só como classe, sem variável de tamanho; por isso o número. */
.fk-rotulo .fk-ref.fk-rotulo__ref { font-size: 11px; }

/* ── Tons: só a cor muda; número e leitura à direita acompanham o tom ─────────────────────────────────────────── */
/* Claro: dentro de um card que reage ao ponteiro ("Galeria", Home .vmore .lbl, #a9a9af). */
.fk-rotulo--claro { color: var(--texto-unidade); }
/* Suave: acima de um título de bandeja (GingaHorizontal .pk-titles .lbl): canvas #c9c9ce; token mais próximo
   --texto-suave (#cacacf). */
.fk-rotulo--suave { color: var(--texto-suave); }
/* Aviso: limite atingido; o pulso para e fica âmbar (Ginga .vh-text .lbl.is-full). */
.fk-rotulo--aviso { color: var(--aviso); }
.fk-rotulo--aviso .fk-rotulo__pulso { background: var(--aviso); animation: none; }
/* Erro: pergunta destrutiva no lugar do card, com ícone de 12 px (Influencers .ask .lbl). O margin-top de 9 px do
   canvas é do arranjo da pergunta, não do rótulo: quem monta o contêiner dá o espaço acima. */
.fk-rotulo--erro { color: var(--erro); }
/* Pro: dentro do card Pro, sobre o violeta (Planos .pro .sum .lbl). */
.fk-rotulo--pro { color: var(--pro-texto-apoio); }
:is(.fk-rotulo--claro, .fk-rotulo--suave, .fk-rotulo--aviso, .fk-rotulo--erro, .fk-rotulo--pro) :is(.fk-rotulo__n, .fk-rotulo__dir:not(.fk-rotulo__dir--aceso)) { color: inherit; }
.fk-rotulo > svg { flex: none; }

/* ── Menos movimento: a contagem acende sem entrar, a troca é seca e o pulso fica parado. ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-rotulo__troca > * { transition: none; }
  .fk-rotulo__dir--aceso, .fk-rotulo__pulso { animation: none; }
}

/* Source: Saldo.css */
/* Fenaky Design System · Saldo — o painel "01 Saldo" de Minha conta: os créditos disponíveis em número grande, quanto
   vídeo eles rendem, o medidor de disponíveis e reservados com a legenda, as ações (Criar vídeo, Ver planos) e, à
   direita, um módulo com os fatos da conta (Reservados, Passe Ilimitado, Armazenamento).
   Fontes: Conta.dc.html (.bal, .bal-main, .big, .bal-sub, .alloc, .legend, .bal-actions, .facts, .fact, .knob.hold,
   .mini-meter), Notificacoes.dc.html e Main.dc.html (o saldo novo "cai no lugar": balA/balB) e o app real
   (public/app.js, accountPanel: "crédito disponível" no singular, reservados só quando há, Passe Ilimitado ativo ou
   encerrado, "Saldo indisponível no momento"). O "238 créditos" do topo é do Topo (.fk-topo__saldo), não daqui.
   Só var(--token) e as primitivas de 00-base (.fk-casca, .fk-modulo, .fk-poco, .fk-rotulo, .fk-cta, .fk-tecla) e o
   knob de BotaoRedondo; nada delas é redefinido: os ajustes de medida ficam escopados em .fk-saldo. */

/* ── Painel: casca com a coluna principal e o módulo de fatos de 300 px ───────────────────────────────────────── */
.fk-saldo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px); /* 300 px = Conta .bal; a coluna pode encolher antes de os filhos ocuparem a linha toda. */
  gap: var(--space-28);
  padding: var(--space-22) var(--space-24) var(--space-24);
  container-type: inline-size;
  font-family: var(--font-texto);
  /* Apelidos locais, para o nome dizer o papel aqui. --texto-link é o cinza #d6d6da dos links comuns em repouso, não
     o violeta (que fica nos links destacados, no foco e no Pro); é o cinza da amostra "disponíveis" do canvas
     (Conta .legend .av). --texto-hover-rail é o #e6e6ea dos números em negrito (Conta .bal-sub b e .legend b). */
  --fk-saldo-cor-disponivel: var(--texto-link);
  --fk-saldo-cor-destaque: var(--texto-hover-rail);
  /* Medidas do canvas sem token próprio: o ladrilho das listras é 6 px × √2 = 8,49 px, o que repete as faixas de
     3 + 3 px a -45° sem emenda (Conta .alloc .rs); o medidor de uso tem 196 px (Conta .mini-meter). */
  --fk-saldo-ladrilho: 8.49px;
  --fk-saldo-uso: 196px;
}
.fk-saldo__principal { display: flex; flex-direction: column; min-width: 0; }

/* ── Número: 104 px em Space Grotesk, "créditos disponíveis" na linha de base ──────────────────────────────────── */
.fk-saldo__valor {
  display: flex;
  align-items: baseline;
  gap: var(--space-14);
  /* Embaixo, os 16 px que o <p class="big"> do canvas leva (1em do corpo de 16 px), somados aos 16 da linha seguinte. */
  margin: var(--space-24) 0 var(--space-16);
}
/* A fonte é a do estilo tipográfico numero-saldo de tokens.css (600 104/.8, -.055em), repetida aqui para o
   componente não depender de uma segunda classe na marcação. */
.fk-saldo__numero {
  display: inline-block;
  color: var(--texto-aceso);
  font: 600 104px/.8 var(--font-display);
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  /* Conta .big b: luz de 1 px por baixo (rgba 255/.06 = --filete-midia) e sombra longa (rgba 0/.6 = --sulco-sombra). */
  text-shadow: 0 var(--space-1) 0 var(--filete-midia), 0 var(--space-18) var(--space-40) var(--sulco-sombra);
}
/* O canvas usa #c9c9ce; o token mais próximo é --texto-suave (#cacacf, 10:1 sobre a casca). */
.fk-saldo__unidade { color: var(--texto-suave); font: 600 15px/1.3 var(--font-texto); }

/* Quanto vídeo o saldo rende ("Dá para até 4 min 57 s de vídeo em Full HD (1080p)."). Também leva o aviso de saldo
   indisponível, no lugar do número. */
.fk-saldo__duracao {
  margin: var(--space-16) 0 0;
  color: var(--texto-apoio);
  font: 500 13px/1.5 var(--font-texto);
}
.fk-saldo__duracao b {
  color: var(--fk-saldo-cor-destaque);
  font: 600 13px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Saldo indisponível: o aviso vem logo abaixo do título, na altura do número (24 px). */
.fk-saldo__titulo + .fk-saldo__duracao { margin-top: var(--space-24); }

/* ── Medidor: poço de 12 px, disponível em barra clara e reservado em listras âmbar que andam ─────────────────── */
/* A largura do disponível entra por style (disponíveis ÷ (disponíveis + reservados)); o reservado ocupa o resto. */
.fk-poco.fk-saldo__medidor {
  display: flex;
  gap: var(--space-2);
  height: var(--space-12);
  margin-top: var(--space-22);
  padding: var(--space-2);
  border-radius: var(--radius-8);
}
.fk-saldo__disponivel,
.fk-saldo__reservado {
  display: block;
  height: 100%;
  border-radius: calc(var(--radius-6) - var(--space-1)); /* 5 px do canvas (.alloc i); não há raio de 5 */
}
/* Conta .alloc .av: #f1f1f3 → #b8b8be; os tokens mais próximos são --texto-forte e --texto-leitura. Brilho de 12 px a 10 %. */
.fk-saldo__disponivel {
  flex: 0 1 auto; /* encolhe os 2 px do vão quando chega a 100 % com a reserva ainda saindo */
  background: linear-gradient(180deg, var(--texto-forte), var(--texto-leitura));
  box-shadow: 0 0 var(--space-12) color-mix(in srgb, var(--branco) 10%, transparent);
  transition: width var(--duracao-dialogo) var(--curva-casa);
}
/* Listras de 3 px a -45° num ladrilho de 8,49 px. O canvas anda 1,2 s por ladrilho = --duracao-giro + --duracao-rapida.
   A largura do disponível transita como o passo de Ajuda (.stp, flex-grow .9s na curva da casa). */
.fk-saldo__reservado {
  flex: 1;
  min-width: 0;
  background: repeating-linear-gradient(-45deg, var(--aviso) 0 var(--space-3), var(--aviso-listra) var(--space-3) var(--space-6));
  background-size: var(--fk-saldo-ladrilho) var(--fk-saldo-ladrilho);
  animation: fk-saldo-reserva calc(var(--duracao-giro) + var(--duracao-rapida)) var(--curva-linear) infinite;
}
@keyframes fk-saldo-reserva { to { background-position: var(--fk-saldo-ladrilho) 0; } }
/* Sem reserva o consumidor omite o trecho listrado. Se a reserva acaba com a página aberta, ele dá 100 % ao disponível e
   só põe hidden no trecho no transitionend (propertyName "width") do .fk-saldo__disponivel; com menos movimento, na hora. */
.fk-saldo__reservado[hidden] { display: none; }

/* ── Legenda: amostra de 9 px, número em Space Grotesk, texto de apoio ─────────────────────────────────────────── */
.fk-saldo__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10) var(--space-20);
  margin: var(--space-11) 0 0;
  padding: 0;
  list-style: none;
  color: var(--texto-apoio);
  font: 500 11.5px/1 var(--font-texto);
}
.fk-saldo__chave {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  transition: opacity var(--duracao-curta) var(--curva-opacidade);
}
.fk-saldo__chave b {
  color: var(--fk-saldo-cor-destaque);
  font: 600 11.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-saldo__amostra {
  display: inline-block;
  flex: none;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-3);
}
.fk-saldo__amostra--disponivel { background: var(--fk-saldo-cor-disponivel); }
.fk-saldo__amostra--reservado { background: repeating-linear-gradient(-45deg, var(--aviso) 0 var(--space-2), var(--aviso-listra) var(--space-2) var(--space-4)); }

/* ── Ações: no pé da coluna, 24 px abaixo da legenda no mínimo ─────────────────────────────────────────────────── */
.fk-saldo__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  margin-top: auto;
  padding-top: var(--space-24);
}
/* Conta .bal-actions .key: 42 px, raio 12, 0 16, 12,5 px (a mesma medida do .fk-cta--sm: --tamanho-cta − 8). */
.fk-saldo__acoes .fk-tecla {
  height: calc(var(--tamanho-cta) - var(--space-8));
  padding: 0 var(--space-16);
  border-radius: var(--radius-12);
  font-size: 12.5px;
}

/* ── Fatos: módulo sem respiro próprio, três linhas que dividem a altura, separadas por divisor gravado ─────────── */
.fk-modulo.fk-saldo__fatos {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-4) var(--space-16);
}
.fk-saldo__fato {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-14) 0 var(--space-14) calc(var(--tamanho-tecla) + var(--space-12)); /* 42 = knob de 30 + 12 de vão */
}
.fk-saldo__fato + .fk-saldo__fato {
  border-top: var(--space-1) solid var(--divisor-sombra);
  box-shadow: inset 0 var(--space-1) 0 var(--divisor-luz);
}
/* Nome do fato: 600 10 px, .12em, caixa-alta. O canvas usa #8a8a90 (4,4:1 no módulo); vai para --texto-controle
   (#8e8e94, 4,6:1), como o número do .fk-rotulo em 00-base. */
.fk-saldo__fato-nome {
  margin: 0;
  color: var(--texto-controle);
  font: 600 10px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Knob de 30 px centrado na altura da linha (Conta .knob 30 px; o .fk-botaoredondo padrão tem 28). */
.fk-saldo .fk-saldo__icone {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--tamanho-tecla);
  height: var(--tamanho-tecla);
  margin-top: calc(var(--tamanho-tecla) / -2);
}
.fk-saldo__fato-valor {
  margin: 0;
  color: var(--texto-forte);
  font: 600 14px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* "de 50 GB" ao lado do valor. */
.fk-saldo__fato-de { color: var(--texto-controle); font-weight: 500; }
.fk-saldo__fato-nota {
  display: block;
  margin-top: var(--space-5);
  color: var(--texto-controle);
  font: 500 11.5px/1.45 var(--font-texto);
}
.fk-saldo__fato-nota b { color: var(--texto-forte); font-weight: 600; }
/* Uso do armazenamento: poço de 6 px × 196, raio 4, preenchimento #e9e9ec → #a9a9af (--texto-campo → --texto-unidade). */
.fk-poco.fk-saldo__uso {
  display: block;
  width: var(--fk-saldo-uso);
  max-width: 100%;
  height: var(--space-6);
  margin-top: var(--space-9);
  padding: var(--space-1);
  border-radius: var(--radius-4);
}
.fk-saldo__uso-valor {
  display: block;
  height: 100%;
  border-radius: var(--radius-3);
  background: linear-gradient(180deg, var(--texto-campo), var(--texto-unidade));
}

/* ── O saldo muda (gerando, entregue, devolvido, pagamento confirmado): o número novo cai no lugar ──────────────── */
/* O mesmo tique do saldo do topo (Main e Notificacoes balA/balB): sobe de 7 px acima, saindo do desfoque. O consumidor
   troca o número e repõe a classe; a reserva some com o medidor andando e a chave dela apagando. */
.fk-saldo--muda .fk-saldo__numero { animation: fk-saldo-muda var(--duracao-silencio) var(--curva-casa); }
@keyframes fk-saldo-muda {
  from { opacity: 0; transform: translateY(calc(var(--space-7) * -1)); filter: blur(var(--desfoque-texto)); }
}
/* A chave da reserva apaga quando a reserva acaba (e sai da árvore de acessibilidade ao fim do esmaecer). */
.fk-saldo__chave--some {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracao-curta) var(--curva-opacidade), visibility 0s var(--curva-linear) var(--duracao-curta);
}

/* ── Estreito (derivado): abaixo de 640 px o módulo de fatos desce para baixo das ações ───────────────────────────── */
/* A consulta mede a própria casca (container-type acima); os dois filhos passam a ocupar a linha inteira. */
@container (max-width: 640px) {
  .fk-saldo__principal,
  .fk-modulo.fk-saldo__fatos { grid-column: 1 / -1; }
}

/* ── Menos movimento: as listras param, o número troca no lugar, o medidor salta. ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-saldo__reservado, .fk-saldo--muda .fk-saldo__numero { animation: none; }
  .fk-saldo__disponivel, .fk-saldo__chave { transition: none; }
}

/* Source: Segmentado.css */
/* Fenaky Design System · Segmentado — escolha exclusiva entre 2 a 6 opções curtas.
   O trilho (.fk-seg, um poço), a opção (.fk-seg__opcao), a escolha em tecla acesa cinza e o indicador deslizante
   (.fk-seg--deslizante + .fk-seg__indicador) são primitivas de 00-base.css. Este arquivo só acrescenta o que o canvas
   aprovou por cima delas, com o bloco .fk-segmentado no mesmo elemento que .fk-seg:
   tamanhos (modo, empilhado, redes, compacto, ferramentas), a silhueta de formato, a contagem, a opção indisponível,
   o grupo desligado e a linha "nome à esquerda, segmentado à direita" (.fk-segmentado__linha) dos módulos de saída.
   Fontes: Main.dc.html e Ginga.dc.html (.mode, Formato, Duração), CriarMobile.dc.html (.fhead .mode, .orow),
   Projetos.dc.html (.cnt), Redes.dc.html (.nets, .nets.lock) e Assets.dc.html (.seg.slide, .sthumb, .is-off).

   Valores escritos por extenso, de propósito:
   - Tamanhos de fonte 12,5 / 11,5 / 11 px: são os estilos tipográficos "aba", "controle"/"numero-meta" e "nota"/
     "controle-sm" de tokens.json, mas o tipo só publica classes (.aba, .controle…), não variáveis de tamanho; como a
     opção já usa o atalho font da primitiva, o tamanho entra aqui como número.
   - Contorno da silhueta 1,5 px: valor do canvas (.aspect); não há token de traço.
   - Opacidade 0,35: a de Redes (.nets.lock) e Assets (.is-off). É mais funda que --opacidade-desligado (0,45, da
     tecla indisponível) porque aqui a opção apagada fica ao lado de uma acesa e precisa recuar mais; por isso a
     variável local --fk-segmentado-apagado, e não o token. */

.fk-segmentado {
  /* Largura do trilho dentro de .fk-segmentado__linha (Main: 214 px; celular: 196 px; medidas do canvas). */
  --fk-segmentado-largura: 214px;
  --fk-segmentado-apagado: .35;
  transition: opacity var(--duracao-curta) var(--curva-opacidade);
}

/* ── Modo: Trocar personagem / Gerar com Ginga, no topo do painel Criar vídeo (Main .mode) ─────────────────── */
/* Raio 9 na opção e também no indicador: em Main a escolha do modo é a própria opção (raio 9); o .seg-ind do
   CriarMobile herdou o raio 8 genérico. Igualamos ao Main para a tecla e o anel de foco terem o mesmo canto. */
.fk-segmentado--modo .fk-seg__opcao {
  height: var(--tamanho-seg-modo);
  font-size: 12.5px;
  border-radius: var(--radius-9);
}
.fk-segmentado--modo > .fk-seg__indicador { border-radius: var(--radius-9); }

/* ── Empilhado: ícone sobre o texto, o modo no painel do celular (CriarMobile .fhead .mode) ────────────────── */
/* 48 px = --tamanho-seg-modo (38) + 10. O ícone da escolha sobe 1 px e cresce 8 % (500 ms, o valor de
   --duracao-central-fecha, na curva da casa). */
.fk-segmentado--empilhado .fk-seg__opcao {
  flex-direction: column;
  gap: var(--space-6);
  height: calc(var(--tamanho-seg-modo) + var(--space-10));
  padding: 0 var(--space-6);
  font-size: 12px;
  border-radius: var(--radius-9);
}
.fk-segmentado--empilhado .fk-seg__opcao svg {
  flex: none;
  transition: transform var(--duracao-central-fecha) var(--curva-casa);
}
.fk-segmentado--empilhado :is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-pressed="true"], .fk-seg__opcao[aria-selected="true"], .fk-seg__opcao[aria-current]:not([aria-current="false"])) svg {
  transform: translateY(-1px) scale(1.08);
}

/* ── Redes: a rede social do canal, opção de 36 px (Redes .nets .seg-b) ───────────────────────────────────── */
/* 36 px = --tamanho-seg-opcao (30) + 6; mesma fonte 12 px da primitiva. */
.fk-segmentado--redes .fk-seg__opcao { height: calc(var(--tamanho-seg-opcao) + var(--space-6)); }

/* ── Compacto: opções de 28 px nas linhas de saída do celular (CriarMobile .orow) ─────────────────────────── */
/* 28 px = --tamanho-seg-opcao (30) − 2. */
.fk-segmentado--compacto .fk-seg__opcao {
  height: calc(var(--tamanho-seg-opcao) - var(--space-2));
  padding: 0 var(--space-6);
  gap: var(--space-6);
  font-size: 11.5px;
}

/* ── Ferramentas: o filtro de orientação na barra de ferramentas dos Assets (Assets .seg.slide) ────────────── */
/* Opções coladas (sem vão) com larguras próprias (143, 96 e 115 px no canvas, em style="width: …"), 34 px de altura
   (30 + 4) e sem recuo lateral; o trilho fecha em 40 px, a altura da barra. O indicador acompanha a opção escolhida
   em posição e largura: o consumidor escreve --fk-segmentado-x (offsetLeft da opção − 3) e --fk-segmentado-w
   (offsetWidth) no trilho. Desliza em 500 ms (o valor de --duracao-central-fecha) na curva da casa, como o .sthumb. */
.fk-segmentado--ferramentas {
  display: flex;
  gap: 0;
}
.fk-segmentado--ferramentas > .fk-seg__opcao {
  flex: none;
  height: calc(var(--tamanho-seg-opcao) + var(--space-4));
  padding: 0;
}
.fk-segmentado--ferramentas > .fk-seg__indicador {
  width: var(--fk-segmentado-w, 0);
  transform: translateX(var(--fk-segmentado-x, 0));
  transition: transform var(--duracao-central-fecha) var(--curva-casa), width var(--duracao-central-fecha) var(--curva-casa);
}

/* ── Silhueta: o contorno do formato antes do rótulo (9:16, 16:9) ─────────────────────────────────────────── */
/* Contorno de 1,5 px na cor do texto da opção: acende junto com ela. Main/Ginga: 9 × 14 e 15 × 9. */
.fk-segmentado__silhueta {
  display: inline-block;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-2);
}
.fk-segmentado__silhueta--vertical { width: var(--space-9); height: var(--space-14); }
.fk-segmentado__silhueta--horizontal { width: calc(var(--space-14) + var(--space-1)); height: var(--space-9); }
/* No compacto (celular) a silhueta perde 1 px: 8 × 13 e 14 × 8. */
.fk-segmentado--compacto .fk-segmentado__silhueta--vertical { width: var(--space-8); height: var(--space-13); }
.fk-segmentado--compacto .fk-segmentado__silhueta--horizontal { width: var(--space-14); height: var(--space-8); }
/* Na barra dos Assets: 8 × 12 e 13 × 8. */
.fk-segmentado--ferramentas .fk-segmentado__silhueta--vertical { width: var(--space-8); height: var(--space-12); }
.fk-segmentado--ferramentas .fk-segmentado__silhueta--horizontal { width: var(--space-13); height: var(--space-8); }

/* ── Contagem: quantos itens cada filtro mostra (Projetos .cnt) ───────────────────────────────────────────── */
/* #8a8a90 (--texto-nota) no poço; na escolha clareia para --texto-leitura (o canvas usa #b4b4ba, 3 pontos abaixo). */
.fk-segmentado__contagem {
  color: var(--texto-nota);
  font: 500 11px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: color var(--duracao-rapida);
}
.fk-segmentado :is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-pressed="true"], .fk-seg__opcao[aria-selected="true"], .fk-seg__opcao[aria-current]:not([aria-current="false"])) .fk-segmentado__contagem {
  color: var(--texto-leitura);
}

/* ── Opção indisponível: a escolha fica, as outras recuam (Redes .nets.lock, canal já criado) ─────────────── */
/* Só apaga e tira o ponteiro. Com aria-disabled a opção continua focável e Enter/Espaço ainda disparam click:
   o handler do consumidor precisa ignorar a ativação (ver README). */
.fk-segmentado .fk-seg__opcao:is(:disabled, [aria-disabled="true"]) {
  opacity: var(--fk-segmentado-apagado);
  cursor: default;
  pointer-events: none;
}

/* ── Grupo desligado: o filtro não se aplica (Assets .seg.slide.is-off, aba Áudios) ───────────────────────── */
/* O esmaecer usa --duracao-curta (300 ms; o canvas usa 350 ms, sem token próprio). */
.fk-segmentado--desligado,
.fk-segmentado[aria-disabled="true"] {
  opacity: var(--fk-segmentado-apagado);
  pointer-events: none;
}

/* ── Linha de opção: nome à esquerda, segmentado à direita (Main .card de Saída, CriarMobile .orow) ────────── */
.fk-segmentado__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.fk-segmentado__nome {
  color: var(--texto-suave);
  font: 600 12.5px/1 var(--font-texto);
}
.fk-segmentado__linha > .fk-segmentado { flex: none; width: var(--fk-segmentado-largura); }
/* Celular: nome 12 px em --texto-leitura (o canvas usa #b0b0b6, 7 pontos abaixo) e trilho de 196 px. */
.fk-segmentado__linha--compacta .fk-segmentado__nome { color: var(--texto-leitura); font-size: 12px; }
.fk-segmentado__linha--compacta > .fk-segmentado { --fk-segmentado-largura: 196px; }

@media (prefers-reduced-motion: reduce) {
  .fk-segmentado,
  .fk-segmentado__contagem,
  .fk-segmentado--empilhado .fk-seg__opcao svg,
  .fk-segmentado--ferramentas > .fk-seg__indicador { transition: none; }
}

/* Source: Seletor.css */
/* Fenaky Design System · Seletor — um gatilho que mostra o valor escolhido e abre, logo abaixo, um menu em casca com
   uma lista de opções exclusivas (uma só fica marcada).
   Fontes: Assets.dc.html e Notificacoes.dc.html (ordenar a biblioteca: .sortw, .key.sortb, .shell.menu, .mi) e
   Redes.dc.html (Fuso do canal: .well.pick, .shell.tzmenu, .tzo). O gatilho é a primitiva .fk-tecla (padrão) ou
   .fk-poco (variante --poco); o menu é a primitiva .fk-casca. Só este arquivo define as classes .fk-seletor*. */

/* ── Raiz: âncora do menu ─────────────────────────────────────────────────────────────────────────────────── */
.fk-seletor {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
/* Aberto, o seletor sobe acima dos vizinhos para o menu cobrir a grade (canvas: .tools z 5, .tzrow z 4). */
.fk-seletor:has(> .fk-seletor__gatilho[aria-expanded="true"]),
.fk-seletor--aberto { z-index: var(--camada-painel-sobreposto); }

/* ── Gatilho padrão: tecla de 40 px (Assets .key.sortb). Use junto com .fk-tecla. ─────────────────────────── */
.fk-seletor__gatilho {
  height: 40px;
  padding: 0 var(--space-12) 0 var(--space-13);
  gap: var(--space-8);
  font-size: 12px;
}
.fk-seletor__icone { flex: none; }
.fk-seletor__valor { overflow: hidden; text-overflow: ellipsis; }
/* Seta: gira meia volta enquanto o menu está aberto. */
.fk-seletor__seta {
  flex: none;
  color: var(--texto-controle);
  transition: transform var(--duracao-media) var(--curva-casa);
}
.fk-seletor__gatilho[aria-expanded="true"] .fk-seletor__seta,
.fk-seletor--aberto .fk-seletor__seta { transform: rotate(180deg); }

/* ── Menu: casca de raio 14 que cai 8 px abaixo do gatilho. Use junto com .fk-casca. ───────────────────────── */
.fk-seletor__menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  width: var(--fk-seletor-largura, 200px);
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-14);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--space-6) * -1)) scale(.97);
  transform-origin: top left;
  filter: blur(var(--desfoque-texto));
  pointer-events: none;
  /* Fechando: some em 200 ms, recolhe em 300 ms e só então sai da árvore de acessibilidade. */
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--duracao-curta) var(--curva-casa),
    filter var(--duracao-cor) var(--curva-opacidade),
    visibility 0s var(--curva-linear) var(--duracao-curta);
}
/* As opções ficam acima do grão e abaixo do filete de 1 px da casca (canvas .shell > *). */
.fk-seletor__menu > * { position: relative; z-index: 1; }
.fk-seletor__gatilho[aria-expanded="true"] + .fk-seletor__menu,
.fk-seletor--aberto .fk-seletor__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  pointer-events: auto;
  transition:
    opacity var(--duracao-cor) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade),
    visibility 0s;
}
/* Gatilho no fim de uma linha (Redes, Fuso do canal): o menu alinha pela direita e cresce dali. */
.fk-seletor--direita .fk-seletor__menu { left: auto; right: 0; transform-origin: top right; }

/* ── Opção: linha de 36 px; a marcada fica clara e mostra o visto ─────────────────────────────────────────── */
.fk-seletor__opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  height: 36px;
  padding: 0 var(--space-10) 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-9);
  background: transparent;
  cursor: pointer;
  color: var(--texto-leitura);
  font: 600 12.5px/1 var(--font-texto);
  text-align: left;
  white-space: nowrap;
}
/* Fundo sob o ponteiro: branco a 5 %, o meio exato entre --fundo-hover (3 %) e --fundo-hover-forte (7 %). */
.fk-seletor__opcao:hover,
.fk-seletor__opcao:focus-visible {
  color: var(--texto-forte);
  background: color-mix(in srgb, var(--fundo-hover) 50%, var(--fundo-hover-forte));
}
/* Foco por setas: o anel entra 2 px na opção, porque as vizinhas encostam umas nas outras. */
.fk-seletor__opcao:focus-visible { outline-offset: calc(var(--tamanho-foco) * -1); }
.fk-seletor__opcao[aria-checked="true"] { color: var(--texto-titulo); }
.fk-seletor__marca {
  flex: none;
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--curva-opacidade);
}
.fk-seletor__opcao[aria-checked="true"] .fk-seletor__marca { opacity: 1; }
.fk-seletor__opcao[aria-disabled="true"],
.fk-seletor__opcao:disabled {
  opacity: var(--opacidade-desligado);
  cursor: not-allowed;
  color: var(--texto-leitura);
  background: transparent;
}

/* ── Variante poço: valor de ajuste dentro de um módulo (Redes, Fuso do canal) ─────────────────────────────── */
/* O gatilho é um poço de 30 px com o valor em Space Grotesk; use .fk-poco no lugar de .fk-tecla.
   Os 30 px do gatilho e das opções vêm de --tamanho-seg-opcao: a mesma família de controle de ajuste (canvas 30 px). */
.fk-seletor--poco .fk-seletor__gatilho {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--tamanho-seg-opcao);
  padding: 0 var(--space-10) 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-9);
  cursor: pointer;
  color: var(--texto-link);
  font: 600 11.5px/1 var(--font-display);
  white-space: nowrap;
}
.fk-seletor--poco .fk-seletor__gatilho:hover { color: var(--branco); }
.fk-seletor--poco .fk-seletor__gatilho .fk-seletor__seta { color: var(--texto-dica); }
.fk-seletor--poco .fk-seletor__gatilho:disabled,
.fk-seletor--poco .fk-seletor__gatilho[aria-disabled="true"] {
  opacity: var(--opacidade-desligado);
  cursor: not-allowed;
  color: var(--texto-link);
}
/* Menu compacto: 196 px, 5 px de borda, 2 px entre opções de 30 px. */
.fk-seletor--poco .fk-seletor__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: var(--fk-seletor-largura, 196px);
  padding: var(--space-5);
}
.fk-seletor--poco .fk-seletor__opcao {
  height: var(--tamanho-seg-opcao);
  padding: 0 var(--space-10);
  font: 600 11.5px/1 var(--font-display);
  transition: background var(--duracao-rapida) var(--curva-opacidade), color var(--duracao-rapida) var(--curva-opacidade);
}
.fk-seletor--poco .fk-seletor__opcao:hover,
.fk-seletor--poco .fk-seletor__opcao:focus-visible { color: var(--branco); }
/* A escolha é a tecla acesa cinza do segmentado, sem a sombra de baixo (canvas .tzo.on). */
.fk-seletor--poco .fk-seletor__opcao[aria-checked="true"] {
  color: var(--texto-aceso);
  background: linear-gradient(180deg, var(--seg-acesa-topo), var(--seg-acesa-base));
  box-shadow: var(--shadow-ref);
}

/* ── Menos movimento: o menu aparece e some de vez; a seta vira sem girar. ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-seletor__menu,
  .fk-seletor__gatilho[aria-expanded="true"] + .fk-seletor__menu,
  .fk-seletor--aberto .fk-seletor__menu,
  .fk-seletor__seta,
  .fk-seletor__marca,
  .fk-seletor--poco .fk-seletor__opcao { transition: none; }
}

/* Source: SeletorLayout.css */
/* Fenaky Design System · SeletorLayout — escolhe onde o painel Criar vídeo mora: na lateral ou em barra.
   Fica à esquerda do topo (64 px) da tela de criação. É um .fk-seg compacto de duas opções com ícone, mais a tecla
   "Criar vídeo", que dorme embaixo do seletor enquanto o painel está aberto e sai de baixo dele quando o painel dobra.
   Origem: Main.dc.html e Ginga.dc.html (.tbar, .reopen, .seg.layout), TrocarHorizontal.dc.html e GingaHorizontal.dc.html
   (.seg.layout sem a tecla, porque a barra não dobra). Usa as primitivas .fk-seg, .fk-seg__opcao e .fk-tecla sem
   redefini-las: as classes daqui só ajustam medida e posição, sempre presas à primitiva (.fk-seg.fk-seletorlayout__…)
   para valer qualquer que seja a ordem dos arquivos no bundle. */

/* Raiz: a linha da esquerda do topo (canvas .tbar).
   Variáveis locais, valores exatos do canvas que não têm token próprio (Main .reopen):
   --fk-seletorlayout-reabrir  122px  largura da tecla "Criar vídeo" (.reopen .key{width:122px}) e da margem que a esconde;
   --fk-seletorlayout-deslize  500ms  deslize de volta da tecla ao reabrir o painel (.reopen{transform .5s});
   --fk-seletorlayout-espera    50ms  espera da margem ao dobrar o painel (.is-closed .reopen{margin-right .9s … .05s}). */
.fk-seletorlayout {
  --fk-seletorlayout-reabrir: 122px;
  --fk-seletorlayout-deslize: 500ms;
  --fk-seletorlayout-espera: 50ms;
  display: flex;
  align-items: center;
}

/* Trilho: cada opção do tamanho do próprio texto (canvas: grid-template-columns: repeat(2, auto)), não colunas iguais. */
.fk-seg.fk-seletorlayout__trilho { grid-auto-columns: auto; }

/* Opção compacta (canvas .layout .seg-b{height:28px;font-size:11.5px}): 2 px mais baixa que a do segmentado
   (--tamanho-seg-opcao − --space-2) e meio pixel menor que o estilo .opcao (12 px). Não há estilo tipográfico de
   11,5 px em Space Grotesk; o valor é o do canvas. */
.fk-seg__opcao.fk-seletorlayout__opcao {
  height: calc(var(--tamanho-seg-opcao) - var(--space-2));
  font-size: 11.5px;
}
.fk-seg__opcao.fk-seletorlayout__opcao > svg { flex: none; }

/* ── Tecla "Criar vídeo": dorme embaixo do seletor e sai quando o painel dobra ──────────────────────────────────── */
/* Aberto (repouso): margem negativa igual à largura da tecla, então ela não ocupa lugar e fica sob o seletor, apagada.
   Ao esconder, a margem recolhe em 600 ms, a opacidade cai em 200 ms, a tecla desliza 12 px em 500 ms e a
   visibilidade só vira no fim (600 ms). */
.fk-seletorlayout__reabrir {
  display: flex;
  margin-right: calc(-1 * var(--fk-seletorlayout-reabrir));
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(-1 * var(--space-12)));
  transition:
    margin-right var(--duracao-deslize) var(--curva-casa),
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--fk-seletorlayout-deslize) var(--curva-casa),
    visibility 0s var(--curva-linear) var(--duracao-deslize);
}
/* 122 × 34 px (canvas .reopen .key): a largura fixa é o que a margem negativa esconde; a altura é a do saldo e do
   avatar na mesma linha (tamanho-saldo). */
.fk-seletorlayout__reabrir > .fk-tecla {
  width: var(--fk-seletorlayout-reabrir);
  height: var(--tamanho-saldo);
}
/* Recolhido (painel dobrado): a tecla abre 12 px de respiro e empurra o seletor para a direita em 900 ms (50 ms de
   espera), aparece em 450 ms depois de 300 ms e desliza 12 px até o lugar em 900 ms depois de 200 ms. */
.fk-seletorlayout--recolhido .fk-seletorlayout__reabrir {
  margin-right: var(--space-12);
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    margin-right var(--duracao-dialogo) var(--curva-casa) var(--fk-seletorlayout-espera),
    opacity var(--duracao-media) var(--curva-opacidade) var(--duracao-curta),
    transform var(--duracao-dialogo) var(--curva-casa) var(--duracao-rapida),
    visibility 0s;
}

/* Menos movimento: a tecla aparece e some no lugar, sem deslizar. */
@media (prefers-reduced-motion: reduce) {
  .fk-seletorlayout__reabrir,
  .fk-seletorlayout--recolhido .fk-seletorlayout__reabrir { transition: none; }
}

/* Source: Selo.css */
/* Fenaky Design System · Selo — a pílula que diz em que pé algo está: concluído, processando, em espera, falhou ou
   neutro. Texto curto com ponto, ícone ou luz à esquerda, no tom semântico do estado.
   Fontes: Conta.dc.html (.pill .good/.wait/.bad/.mute com .dot, e o ponto que pisca na espera; repetida em
   PlanoResumo.dc.html e Suporte.dc.html, que acrescenta a transição de .45 s entre estados), Motion.dc.html (.stt
   ok/wait/err, com ícone que gira em produção), Projetos.dc.html (.st ok/gen/wait/err, com a luz lima de Gerando) e
   Resultado.dc.html (.pill "Concluído" com ponto que brilha; lá a pílula mede 22 px, Manrope 600 10,5 px, vão 7,
   padding 0 10 e filete a 14%, e foi unificada no tamanho padrão abaixo: dela o sistema guarda só o brilho do ponto,
   .fk-selo__ponto--brilho). O selo sobre foto ("Finalizando 1080p") é o ChipVidro
   --aviso; o selo claro "No painel" é do CardVideo e do CardRetrato. Valores que não são token vêm de um token por
   color-mix() ou calc(), com a origem anotada ao lado. */

/* ── Selo padrão: 24 px, pílula, Manrope 700 11/1 = o estilo tipográfico "status" de tokens.json (classe .status),
   escrito por extenso porque o selo não pode depender de uma segunda classe. Sem tom = neutro. ─────────────────── */
.fk-selo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-6);
  height: var(--space-24);
  padding: 0 var(--space-10) 0 var(--space-8);
  border-radius: var(--radius-pilula);
  color: var(--neutro);
  background: var(--neutro-fundo);
  box-shadow: inset 0 0 0 var(--space-1) var(--neutro-borda);
  font: 700 11px/1 var(--font-texto);
  white-space: nowrap;
  vertical-align: middle;
  /* Suporte .pill: quando o estado muda no lugar (Aguardando a equipe → Respondido), a cor cruza em .45 s.
     Entre sucesso, aviso, erro e neutro tudo cruza. De e para processando a troca do fundo e do filete é seca:
     o gradiente (background-image) não interpola e o filete muda de uma sombra interna para uma interna e uma
     externa; só a cor do texto e a cor de base cruzam. */
  transition:
    color var(--duracao-media) var(--curva-opacidade),
    background-color var(--duracao-media) var(--curva-opacidade),
    box-shadow var(--duracao-media) var(--curva-opacidade);
}
/* Ícone de 12 px (Motion .stt svg); não há token de tamanho de ícone. */
.fk-selo > svg { flex: none; width: 12px; height: 12px; }

/* ── Tons ────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Sucesso: Pronto, Concluído, Pago, Ativa, Liberado, Respondido. */
.fk-selo--sucesso { color: var(--sucesso); background: var(--sucesso-fundo); box-shadow: inset 0 0 0 var(--space-1) var(--sucesso-borda); }
/* Aviso: espera e andamento que depende de outro (Reservado, Aguardando a equipe, Cancelamento solicitado, Em produção). */
.fk-selo--aviso { color: var(--aviso); background: var(--aviso-fundo); box-shadow: inset 0 0 0 var(--space-1) var(--aviso-borda); }
/* Erro: Não concluído, Recusado, Estornado. Motion usa #3a2023 e Projetos #3b1f20; o token é o de Conta (#3a1f24). */
.fk-selo--erro { color: var(--erro); background: var(--erro-fundo); box-shadow: inset 0 0 0 var(--space-1) var(--erro-borda); }
/* Neutro: o padrão, dito por extenso quando o HTML precisa trocar de tom (Entregue, Devolvido, Encerrado). */
.fk-selo--neutro { color: var(--neutro); background: var(--neutro-fundo); box-shadow: inset 0 0 0 var(--space-1) var(--neutro-borda); }
/* Processando: a tecla cinza com a luz lima (Projetos .st.gen, "Gerando").
   #2c2c31 → #1f1f23 no canvas: ref-base (#2b2b30) é a parada mais próxima, neutro-fundo é a exata.
   Texto #ececef no canvas: --texto (#ededef): 12,0:1 na parada de cima (pior caso), 14,0:1 na de baixo.
   Filete de cima rgba(255,255,255,.09) = --branco a 9%; contorno rgba(0,0,0,.55) = --sulco-sombra (preto .6) a 92%. */
.fk-selo--processando {
  color: var(--texto);
  background-color: var(--neutro-fundo);
  background-image: linear-gradient(180deg, var(--ref-base), var(--neutro-fundo));
  box-shadow:
    inset 0 var(--space-1) 0 color-mix(in srgb, var(--branco) 9%, transparent),
    0 0 0 var(--space-1) color-mix(in srgb, var(--sulco-sombra) 92%, transparent);
}

/* ── Marcas à esquerda do texto ──────────────────────────────────────────────────────────────────────────────── */
/* Ponto: 6 px na cor do texto (Conta, Suporte). Na espera ele pisca. */
.fk-selo__ponto {
  display: block;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circulo);
  background: currentColor;
}
/* Conta .pill.wait .dot: 1,4 s, opacidade .35 no meio. Sem token de 1,4 s: duracao-giro (1 s) × 1,4. */
.fk-selo--aviso .fk-selo__ponto { animation: fk-selo-pisca calc(var(--duracao-giro) * 1.4) ease-in-out infinite; }
@keyframes fk-selo-pisca { 50% { opacity: .35; } }
/* Brilho: o ponto aceso de um resultado que acabou de chegar (Resultado .pill i, 0 0 8px a 70% da cor). */
.fk-selo__ponto--brilho { box-shadow: 0 0 var(--space-8) color-mix(in srgb, currentColor 70%, transparent); }

/* Luz: 7 px de lima que pulsa, só no tom processando (Projetos .st .led, 1,6 s ease-out).
   Brilho rgba(215,255,63,.9) = --lima a 90%; onda de .55 até 0 em 7 px. */
.fk-selo__luz {
  display: block;
  flex: none;
  width: var(--space-7);
  height: var(--space-7);
  margin: 0 var(--space-1) 0 var(--space-2);
  border-radius: var(--radius-circulo);
  background: var(--lima);
  box-shadow: 0 0 var(--space-8) color-mix(in srgb, var(--lima) 90%, transparent);
  animation: fk-selo-luz var(--duracao-pulso) ease-out infinite;
}
@keyframes fk-selo-luz {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lima) 55%, transparent), 0 0 var(--space-8) color-mix(in srgb, var(--lima) 90%, transparent); }
  100% { box-shadow: 0 0 0 var(--space-7) color-mix(in srgb, var(--lima) 0%, transparent), 0 0 var(--space-8) color-mix(in srgb, var(--lima) 90%, transparent); }
}

/* Giro: o ícone de carregamento de "Em produção" (Motion .stt .spin, uma volta por segundo, linear). */
.fk-selo__giro { animation: fk-selo-gira var(--duracao-giro) var(--curva-linear) infinite; }
@keyframes fk-selo-gira { to { transform: rotate(360deg); } }

/* ── Tamanhos ────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Compacto: 21 px, cantos de 7 px, para listas densas sob um título (Motion .stt nos pedidos).
   Um filete branco a 5% em todos os tons, no lugar do filete colorido. Corpo 10,5 px e espaçamento .01em são os de
   Motion .stt (sem token de tamanho de fonte: a tipografia do sistema é por estilo). */
.fk-selo--compacto {
  gap: var(--space-5);
  height: calc(var(--space-20) + var(--space-1));
  padding: 0 var(--space-8) 0 var(--space-7);
  border-radius: var(--radius-7);
  font-size: 10.5px;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 var(--space-1) color-mix(in srgb, var(--branco) 5%, transparent);
}
.fk-selo--compacto.fk-selo--processando {
  box-shadow:
    inset 0 var(--space-1) 0 color-mix(in srgb, var(--branco) 9%, transparent),
    0 0 0 var(--space-1) color-mix(in srgb, var(--sulco-sombra) 92%, transparent);
}
/* Grande: 26 px, Manrope 600 11,5 px e ícone de 13 px, na coluna Situação de tabelas largas (os valores de
   Projetos .st e .st svg, exatos). */
.fk-selo--grande {
  gap: var(--space-7);
  height: var(--space-26);
  padding: 0 var(--space-11) 0 var(--space-9);
  font-size: 11.5px;
  font-weight: 600;
}
.fk-selo--grande > svg { width: 13px; height: 13px; }

/* ── Menos movimento: o ponto e a luz ficam acesos e parados, o ícone não gira e a troca de tom é seca. ─────── */
@media (prefers-reduced-motion: reduce) {
  .fk-selo { transition: none; }
  .fk-selo__ponto, .fk-selo__luz, .fk-selo__giro { animation: none; }
}

/* Source: Sino.css */
/* Fenaky Design System · Sino — a porta da central de notificações: tecla redonda de 34 px ao lado do saldo, com o
   contador de não lidas numa pílula clara. Quando chega algo novo o sino balança pendurado no alto e a pílula dá um
   pulo; com a central aberta ele fica aceso e acima do véu, para mostrar de onde o painel saiu.
   Fontes: Notificacoes.dc.html (.bell, .bell.on, bellA/bellB, .bnum, bpA/bpB), NotificacoesMobile.dc.html (.bell 32 px,
   swA/swB, .pill, jA/jB), NotificacoesCatalogo.dc.html (04 Central, .bell 34 px e .pill) e NOTIF.md (central, item 2).
   É o ÚNICO sino do sistema: o Topo, a Central, o PopUp e os modelos de página usam esta marcação (class="fk-tecla
   fk-sino") e nenhum outro arquivo estiliza o sino ou o contador.
   Só var(--token) e a primitiva .fk-tecla de 00-base, que não é redefinida: o sino a usa e só ajusta a forma.
   Literais de propósito (sem token igual, ver README): 18/17 px e 10,5/10 px da pílula, os anéis de 2,5/2 px, o
   z-index 1 de repouso (camada local do .bell, abaixo de qualquer --camada-*) e o ease-in-out do balanço. */

/* ── Tecla redonda ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Sempre com .fk-tecla (material, hover branco, afunda 1 px). 34 px = a altura do saldo ao lado. z-index 1 = .bell do
   canvas: só o tira do chão da fila de ações; aberto ele sobe para --camada-sino-aberto. */
.fk-tecla.fk-sino {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--tamanho-saldo);
  height: var(--tamanho-saldo);
  padding: 0;
  border-radius: var(--radius-circulo);
  /* A da tecla + o z-index, que só desce 450 ms depois de fechar: o sino volta ao chão quando o véu já sumiu. */
  transition: background var(--duracao-hover), color var(--duracao-hover), transform var(--duracao-pressao), box-shadow var(--duracao-rapida), z-index 0s var(--curva-linear) var(--duracao-media);
}
.fk-sino > svg { flex: none; transform-origin: 50% 3px; }

/* ── Aberto: a central está à vista ──────────────────────────────────────────────────────────────────────────── */
/* Tecla acesa cinza e acima do véu da central (camada 66 > véu 64 e painel 65); sobe na hora, sem atraso. */
.fk-tecla.fk-sino[aria-expanded="true"],
.fk-tecla.fk-sino--aberto {
  z-index: var(--camada-sino-aberto);
  color: var(--branco);
  background: linear-gradient(180deg, var(--tecla-acesa-topo), var(--tecla-acesa-base));
  box-shadow: var(--shadow-tecla-acesa);
  transition: background var(--duracao-hover), color var(--duracao-hover), transform var(--duracao-pressao), box-shadow var(--duracao-rapida), z-index 0s;
}
.fk-tecla.fk-sino[aria-expanded="true"]:hover,
.fk-tecla.fk-sino--aberto:hover { background: linear-gradient(180deg, var(--tecla-acesa-hover-topo), var(--tecla-acesa-hover-base)); }

/* ── Toca: chegou algo novo ──────────────────────────────────────────────────────────────────────────────────── */
/* Balança pendurado no alto: 17°, -14°, 9°, -5°, 2° e para (950 ms, ease-in-out, como o canvas). As duas classes têm
   o mesmo desenho: alterne entre elas a cada chegada para a animação recomeçar sem reflow. */
.fk-sino--toca > svg { animation: fk-sino-toca var(--duracao-entrada) ease-in-out; }
.fk-sino--toca-b > svg { animation: fk-sino-toca-b var(--duracao-entrada) ease-in-out; }
@keyframes fk-sino-toca {
  0%, 100% { transform: none; }
  12% { transform: rotate(17deg); }
  27% { transform: rotate(-14deg); }
  42% { transform: rotate(9deg); }
  57% { transform: rotate(-5deg); }
  72% { transform: rotate(2deg); }
}
@keyframes fk-sino-toca-b {
  0%, 100% { transform: none; }
  12% { transform: rotate(17deg); }
  27% { transform: rotate(-14deg); }
  42% { transform: rotate(9deg); }
  57% { transform: rotate(-5deg); }
  72% { transform: rotate(2deg); }
}

/* ── Contador de não lidas ───────────────────────────────────────────────────────────────────────────────────── */
/* Pílula clara (--pilula, número em --tinta-pilula, 16,9:1) presa ao canto de cima à direita, com um anel de 2,5 px
   da cor da página que a descola da tecla (.bnum, literal: não há espessura de meio pixel entre os tokens). Cresce para
   os lados com o número (mínimo 18 px, folga de 5 px); acima de 99 o consumidor escreve "99+" (ver README). */
.fk-sino__contador {
  position: absolute;
  top: calc(var(--space-5) * -1);
  right: calc(var(--space-7) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pilula);
  background: var(--pilula);
  color: var(--tinta-pilula);
  font: 600 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--bg), 0 3px 8px var(--sulco-sombra);
  pointer-events: none;
  transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-curta) var(--curva-opacidade);
}
/* Nada não lido: a pílula encolhe para .3 e some (fica no DOM, para o pulo de volta partir dela). */
.fk-sino__contador--vazio { opacity: 0; transform: scale(.3); }
/* Chegou algo: pulo de 800 ms (2 × --duracao-contador) na curva da casa. Alterne --pula e --pula-b a cada chegada. */
.fk-sino__contador--pula { animation: fk-sino-pula calc(var(--duracao-contador) * 2) var(--curva-casa); }
.fk-sino__contador--pula-b { animation: fk-sino-pula-b calc(var(--duracao-contador) * 2) var(--curva-casa); }
@keyframes fk-sino-pula {
  0% { transform: scale(.5); }
  35% { transform: scale(1.38) translateY(-1px); }
  65% { transform: scale(.9); }
  100% { transform: none; }
}
@keyframes fk-sino-pula-b {
  0% { transform: scale(.5); }
  35% { transform: scale(1.38) translateY(-1px); }
  65% { transform: scale(.9); }
  100% { transform: none; }
}

/* ── Celular: 32 px na barra de 62 px (NotificacoesMobile) ───────────────────────────────────────────────────── */
.fk-tecla.fk-sino--celular {
  width: var(--tamanho-alvo);
  height: var(--tamanho-alvo);
}
.fk-sino--celular > svg { transform-origin: 50% 2px; }
/* No celular a central é uma folha que cobre a tela com o véu: o sino não acende nem sobe, fica sob o véu como o resto
   da barra (NotificacoesMobile: a tecla não ganha .on e sai do Tab enquanto a folha está aberta). */
.fk-tecla.fk-sino--celular[aria-expanded="true"],
.fk-tecla.fk-sino--celular.fk-sino--aberto {
  z-index: 1; /* o mesmo do repouso */
  color: var(--texto-tecla);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.fk-tecla.fk-sino--celular[aria-expanded="true"]:hover,
.fk-tecla.fk-sino--celular.fk-sino--aberto:hover {
  color: var(--branco);
  background: linear-gradient(180deg, var(--tecla-hover-topo), var(--tecla-hover-base));
}
/* O balanço do celular dura 1 s na curva da casa, com os mesmos ângulos em outros tempos (14/30/46/62/78 %). */
.fk-sino--celular.fk-sino--toca > svg { animation: fk-sino-toca-celular var(--duracao-giro) var(--curva-casa); }
.fk-sino--celular.fk-sino--toca-b > svg { animation: fk-sino-toca-celular-b var(--duracao-giro) var(--curva-casa); }
@keyframes fk-sino-toca-celular {
  0% { transform: none; }
  14% { transform: rotate(17deg); }
  30% { transform: rotate(-14deg); }
  46% { transform: rotate(9deg); }
  62% { transform: rotate(-5deg); }
  78% { transform: rotate(2deg); }
  100% { transform: none; }
}
@keyframes fk-sino-toca-celular-b {
  0% { transform: none; }
  14% { transform: rotate(17deg); }
  30% { transform: rotate(-14deg); }
  46% { transform: rotate(9deg); }
  62% { transform: rotate(-5deg); }
  78% { transform: rotate(2deg); }
  100% { transform: none; }
}
/* Pílula de 17 px, 700 10 px, anel de 2 px (.pill, literal como o 2,5 px do desktop); a sombra a .55 é --sulco-sombra
   (.6) a 92 %. */
.fk-sino--celular .fk-sino__contador {
  right: calc(var(--space-6) * -1);
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg), 0 3px 8px color-mix(in srgb, var(--sulco-sombra) 92%, transparent);
  transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-cor) var(--curva-opacidade);
}
/* O pulo do celular sobe 6 px antes de assentar. */
.fk-sino--celular .fk-sino__contador--pula { animation: fk-sino-pula-celular calc(var(--duracao-contador) * 2) var(--curva-casa); }
.fk-sino--celular .fk-sino__contador--pula-b { animation: fk-sino-pula-celular-b calc(var(--duracao-contador) * 2) var(--curva-casa); }
@keyframes fk-sino-pula-celular {
  0% { transform: scale(.4); }
  30% { transform: translateY(-6px) scale(1.2); }
  58% { transform: translateY(1px) scale(.95); }
  100% { transform: none; }
}
@keyframes fk-sino-pula-celular-b {
  0% { transform: scale(.4); }
  30% { transform: translateY(-6px) scale(1.2); }
  58% { transform: translateY(1px) scale(.95); }
  100% { transform: none; }
}

/* ── Menos movimento: o sino não balança, a pílula troca no lugar; só o z-index segue esperando o véu sair. ───── */
@media (prefers-reduced-motion: reduce) {
  .fk-tecla.fk-sino { transition: z-index 0s var(--curva-linear) var(--duracao-media); }
  .fk-tecla.fk-sino[aria-expanded="true"],
  .fk-tecla.fk-sino--aberto { transition: none; }
  .fk-sino__contador,
  .fk-sino--celular .fk-sino__contador { transition: none; }
  .fk-sino--toca > svg,
  .fk-sino--toca-b > svg,
  .fk-sino--celular.fk-sino--toca > svg,
  .fk-sino--celular.fk-sino--toca-b > svg,
  .fk-sino__contador--pula,
  .fk-sino__contador--pula-b,
  .fk-sino--celular .fk-sino__contador--pula,
  .fk-sino--celular .fk-sino__contador--pula-b { animation: none; }
}

/* Source: Sulco.css */
/* Fenaky Design System · Sulco — a linha gravada que separa partes de uma casca ou de um módulo.
   A primitiva (.fk-sulco e .fk-sulco--vertical: 2 px, sulco-sombra em cima, sulco-luz embaixo) fica em 00-base.css e
   não é redefinida aqui. Este arquivo traz só os usos aprovados do canvas: os recuos fixos do painel, o sulco do rail
   do celular, o tom do card Pro e a linha de seção (rótulo + sulco que corre até a borda).
   Fontes: cabeçalho (0 18px) em Main, Ginga, Motion, Redes, Notificacoes e Suporte; rodapé (0 6px 2px) em Main, Ginga,
   Motion e Redes; HomeMobile, CriarMobile, NotificacoesMobile e PlanosMobile (.rail-div); Planos e PlanosMobile
   (.pro .groove, .sect); Sobre (.vg).
   Dependência de contexto, de propósito: dentro de .fk-casca--pro (primitiva de 00-base) todo sulco passa ao tom
   violeta sem precisar de .fk-sulco--pro. A regra mora só aqui; CardPlano e outros componentes sobre a casca Pro não
   devem repeti-la. A casca não é redefinida: o seletor só lê a classe dela. */

/* Sob o cabeçalho do painel: alinhado ao padding de 18 px do cabeçalho (Main, Ginga, Motion, Redes, Notificacoes, Suporte). */
.fk-sulco--cabecalho { margin-inline: var(--space-18); }

/* Sobre o rodapé do painel (leitura + CTA): 6 px para dentro do padding de 12 px e 2 px de folga embaixo. */
.fk-sulco--rodape { margin: 0 var(--space-6) var(--space-2); }

/* Rail do celular: um traço de 30 px entre grupos de itens (8 px acima, 10 px abaixo). */
.fk-sulco--rail {
  flex: none;
  width: var(--space-30);
  margin: var(--space-8) 0 var(--space-10);
}

/* Card Pro: o preto puro some no violeta; a sombra puxa para o roxo e a luz sobe para .08 (Planos, .pro .groove).
   Vale sozinho dentro de .fk-casca--pro ou com o modificador, em qualquer fundo violeta. */
.fk-sulco--pro,
.fk-casca--pro .fk-sulco {
  border-top-color: var(--sulco-pro-sombra);
  border-bottom-color: var(--sulco-pro-luz);
}
.fk-sulco--vertical.fk-sulco--pro,
.fk-casca--pro .fk-sulco--vertical {
  border-left-color: var(--sulco-pro-sombra);
  border-right-color: var(--sulco-pro-luz);
}

/* Linha de seção: o rótulo abre a seção e o sulco corre até a borda do conteúdo (Planos, "Assinatura mensal"). */
.fk-sulco__secao {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0;
}
.fk-sulco__secao > .fk-sulco { flex: 1; min-width: var(--space-24); }
.fk-sulco__secao > .fk-rotulo { flex: none; }
/* No celular o vão cai para 12 px (PlanosMobile). */
.fk-sulco__secao--compacta { gap: var(--space-12); }

/* Source: Tabela.css */
/* Fenaky Design System · Tabela — o histórico paginado de Minha conta: cabeçalho fixo, registros de 50 px com data,
   lançamento, números alinhados à direita e selo de situação, a linha de fim que leva à página seguinte e a
   paginação com contagem, setas e números. O filtro por tipo (Tudo, Compras e ganhos, Gerações, Estornos) desliza
   uma tecla acesa de largura variável sobre o trilho.
   Fonte: Conta.dc.html, seção "03 Movimentos" (.hist, .hist-head, .seg-f, .seg-ind, .tbl, .tbl-body, .tr, .thead,
   .rows, .row, .row-end, .more-b, .c-date, .c-what, .what, .c-num, .c-money, .pager, .count, .pages, .hist-note) e o
   swapTo() da prancha. Peças de outros componentes usadas aqui, sem redefinir: .fk-casca, .fk-poco, .fk-seg,
   .fk-seg__opcao, .fk-seg__indicador, .fk-rotulo (00-base), .fk-tecla--redonda.fk-tecla--sm (Tecla, 30 px),
   .fk-botaoredondo (BotaoRedondo, o knob do ícone) e .fk-selo (Selo, a coluna Situação).
   Cores do canvas sem token próprio saem do token mais próximo (diferença anotada) ou por color-mix() de um token;
   pretos com opacidade saem de --bg, brancos de --branco. Durações sem token saem de um token por calc(). */

/* ── Bloco: a seção inteira (rótulo, título e filtro, quadro, paginação, nota) ─────────────────────────────────── */
.fk-tabela {
  /* Colunas do histórico: Data 92, Lançamento o resto, Créditos 118, Valor 104, Situação 112 (Conta .tr). */
  --fk-tabela-colunas: 92px minmax(0, 1fr) 118px 104px 112px;
  /* Registros por página e alturas: cabeçalho 38, registro 50, linha de fim 48 (Conta .thead, .row, .row-end).
     As três são medidas próprias do componente, copiadas da prancha como literais (não há token de altura de linha). */
  --fk-tabela-por-pagina: 7;
  --fk-tabela-cabecalho: 38px;
  --fk-tabela-registro: 50px;
  --fk-tabela-fim: 48px;
  /* Largura mínima do corpo: as colunas fixas (92 + 118 + 104 + 112), 4 vãos de 14, 18 + 18 nas laterais e 222 px para
     o Lançamento (knob 30 + vão 12 + 180 de texto, o bastante para "Trocar personagem" e "9:16 · 15 s · em andamento").
     Abaixo disso o quadro rola de lado em vez de esmagar a coluna. Derivada das medidas da prancha Conta (.tr). */
  --fk-tabela-corpo-minimo: 740px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--texto);
  font-family: var(--font-texto);
}
/* Cartão: a seção é a própria casca (Conta .hist, padding 22 24 20). */
.fk-tabela--cartao { padding: var(--space-22) var(--space-24) var(--space-20); }

/* ── Topo: título à esquerda, filtro à direita, 7 px abaixo do rótulo ─────────────────────────────────────────── */
.fk-tabela__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-14) var(--space-20);
  margin-top: var(--space-7);
}
/* Estilo titulo-cartao: Space Grotesk 600 19/1.15, -0,02em, em --texto-titulo (casca 15,6:1). */
.fk-tabela__titulo {
  margin: 0;
  color: var(--texto-titulo);
  font: 600 19px/1.15 var(--font-display);
  letter-spacing: -.02em;
}

/* ── Filtro: segmentado deslizante com colunas de largura própria e contagem ──────────────────────────────────── */
/* No mesmo elemento que .fk-seg.fk-seg--deslizante. Larguras do canvas: 86, 160, 108, 104 (Conta .seg-f, 473 px no
   total com o trilho). Outro conjunto de filtros troca --fk-tabela-filtro-colunas. */
.fk-seg.fk-tabela__filtro {
  --fk-tabela-filtro-colunas: 86px 160px 108px 104px;
  flex: none;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ref-base) transparent;
  grid-template-columns: var(--fk-tabela-filtro-colunas);
}
/* A tecla acesa corre e muda de largura até a opção escolhida: o consumidor mede o botão e põe --fk-tabela-x
   (offsetLeft − 3 px) e --fk-tabela-w (offsetWidth) no .fk-seg. 600 ms na curva da casa (Conta .seg-ind). */
.fk-tabela__filtro > .fk-seg__indicador {
  width: var(--fk-tabela-w, 86px);
  transform: translateX(var(--fk-tabela-x, 0px));
  transition:
    transform var(--duracao-deslize) var(--curva-casa),
    width var(--duracao-deslize) var(--curva-casa);
}
/* Contagem: Space Grotesk 500 10,5 px em --texto-controle (6,0:1 no trilho); na escolha, --texto-unidade
   (#a9a9af, como no canvas). A cor cruza em 250 ms com o deslize. */
.fk-tabela__filtro-contagem {
  color: var(--texto-controle);
  font: 500 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: color var(--duracao-cor);
}
.fk-tabela__filtro :is(.fk-seg__opcao--acesa, .fk-seg__opcao[aria-selected="true"], .fk-seg__opcao[aria-pressed="true"]) .fk-tabela__filtro-contagem {
  color: var(--texto-unidade);
}

/* ── Quadro: o poço que guarda a tabela, cantos de 14 px, 16 px abaixo do topo ────────────────────────────────── */
/* Vai no mesmo elemento que .fk-poco (Conta .well.tbl). Quando o cartão fica mais estreito que o corpo mínimo, o quadro
   rola de lado (o cabeçalho rola junto); na largura da prancha não há barra nenhuma. Barra fina como a .scroll das
   pranchas (#2c2c31): --ref-base (#2b2b30), 1 ponto abaixo. */
.fk-tabela__quadro {
  position: relative;
  margin-top: var(--space-16);
  border-radius: var(--radius-14);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ref-base) transparent;
}
/* Corpo (role="table"): altura fixa de cabeçalho + 7 registros + fim (436 px), para o filtro e a página nunca
   mudarem o tamanho do cartão. */
.fk-tabela__corpo {
  min-width: var(--fk-tabela-corpo-minimo);
  height: calc(var(--fk-tabela-cabecalho) + var(--fk-tabela-por-pagina) * var(--fk-tabela-registro) + var(--fk-tabela-fim));
  overflow: hidden;
}

/* Linha (cabeçalho e registros): a mesma grade de colunas, vão de 14 px, 18 px nas laterais. */
.fk-tabela__linha {
  display: grid;
  grid-template-columns: var(--fk-tabela-colunas);
  align-items: center;
  gap: var(--space-14);
  padding: 0 var(--space-18);
}

/* Cabeçalho: fixo no topo, fundo --tabela-cabecalho, borda preta .7 com luz de 1 px por baixo; estilo rotulo-sm
   em --texto-nota (5,6:1 sobre o cabeçalho). */
.fk-tabela__cabecalho {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--fk-tabela-cabecalho);
  background: var(--tabela-cabecalho);
  /* Canvas: rgba(0,0,0,.7). Derivado de --bg a 70 % (≈ rgba(0,0,0,.7); --bg #0a0a0b fica 4 pontos acima do preto). */
  border-bottom: 1px solid color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: 0 1px 0 var(--divisor-luz);
  color: var(--texto-nota);
  font: 600 10px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fk-tabela__cabecalho > .fk-tabela__direita { text-align: right; justify-content: flex-end; }

/* Registros (role="rowgroup"): coluna que enche o corpo abaixo do cabeçalho (398 px): 7 registros + a linha de fim. */
.fk-tabela__registros {
  display: flex;
  flex-direction: column;
  height: calc(var(--fk-tabela-por-pagina) * var(--fk-tabela-registro) + var(--fk-tabela-fim));
}

/* ── Registro: 50 px, filete de 1 px entre registros, um véu branco a 2,2 % sob o ponteiro ────────────────────── */
/* Atraso de entrada: --fk-tabela-i (posição na página, a partir de 0) × 30 ms, mais 120 ms (Conta .row).
   30 ms = --duracao-escalonamento × .75; 120 ms = --duracao-escalonamento × 3. */
.fk-tabela__registro,
.fk-tabela__fim {
  --fk-tabela-atraso: calc(var(--fk-tabela-i, 0) * var(--duracao-escalonamento) * .75);
  flex: none;
  transition:
    opacity var(--duracao-central-fecha) var(--curva-opacidade) calc(var(--fk-tabela-atraso) + var(--duracao-escalonamento) * 3),
    transform calc(var(--duracao-contador) * 2) var(--curva-casa) calc(var(--fk-tabela-atraso) + var(--duracao-escalonamento) * 3),
    filter var(--duracao-central-fecha) var(--curva-opacidade) calc(var(--fk-tabela-atraso) + var(--duracao-escalonamento) * 3),
    background var(--duracao-rapida);
}
.fk-tabela__registro { height: var(--fk-tabela-registro); }
.fk-tabela__registro + .fk-tabela__registro { border-top: 1px solid var(--linha-tabela); }
.fk-tabela__registro:hover { background: color-mix(in srgb, var(--branco) 2.2%, transparent); } /* rgba(255,255,255,.022) */

/* ── Células ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Célula empilhada: o valor forte em cima, o apoio 5 px abaixo. */
.fk-tabela__celula {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
/* Apoio: Manrope 500 11/1.2 em --texto-nota (5,7:1 no poço), uma linha com reticências. */
.fk-tabela__apoio {
  color: var(--texto-nota);
  font: 500 11px/1.2 var(--font-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fk-tabela__forte { font-weight: 600; }

/* Data: Space Grotesk 600 12,5 px. #e4e4e8 do canvas = metade --texto-hover (#e2e2e6), metade --texto-hover-rail
   (#e6e6ea): exato. */
.fk-tabela__celula--data .fk-tabela__forte {
  color: color-mix(in srgb, var(--texto-hover) 50%, var(--texto-hover-rail));
  font: 600 12.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Lançamento: knob de 30 px com o ícone do tipo, título e detalhe; vão de 12 px. */
.fk-tabela__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
/* Knob do BotaoRedondo (28 px) em 30 px, como .c-what .knob. */
.fk-tabela__item > .fk-tabela__icone {
  width: var(--tamanho-tecla);
  height: var(--tamanho-tecla);
}
/* Título: Manrope 600 13/1.1 em --texto-forte (o canvas usa #f0f0f2, 2 pontos abaixo), uma linha. */
.fk-tabela__celula--texto .fk-tabela__forte {
  color: var(--texto-forte);
  font: 600 13px/1.1 var(--font-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Número: alinhado à direita, estilo numero-valor (Space Grotesk 600 14 px, tabular) em --texto (#ececf0 no canvas). */
.fk-tabela__celula--num {
  align-items: flex-end;
  text-align: right;
}
.fk-tabela__celula--num .fk-tabela__forte {
  color: var(--texto);
  font: 600 14px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Tons do número: crédito que entra (--sucesso), reservado (--aviso), sem custo (--texto-controle) e estornado
   (--erro, inclusive o apoio). Gasto comum fica no padrão. */
.fk-tabela__celula--sucesso .fk-tabela__forte { color: var(--sucesso); }
.fk-tabela__celula--aviso .fk-tabela__forte { color: var(--aviso); }
.fk-tabela__celula--zero .fk-tabela__forte { color: var(--texto-controle); }
.fk-tabela__celula--erro :is(.fk-tabela__forte, .fk-tabela__apoio) { color: var(--erro); }
/* Valor em dinheiro: peso 500 em --texto-icone (#cfcfd4, exato), mais quieto que os créditos. */
.fk-tabela__celula--valor .fk-tabela__forte {
  color: var(--texto-icone);
  font-weight: 500;
}

/* Situação: o selo (Selo) fica na linha de base da célula, como .pill dentro da célula do canvas (1 px abaixo do
   centro do registro). */
.fk-tabela__situacao { min-width: 0; }
.fk-tabela__situacao > .fk-selo { vertical-align: baseline; }

/* ── Linha de fim: 48 px com um sulco de 18 px antes do texto ─────────────────────────────────────────────────── */
/* Numa página que não é a última, diz quanto falta e leva à próxima (--mais); na última, fecha o histórico; se a
   última página é curta, ocupa o espaço livre e fica centrada nele (--preenche). Manrope 500 11,5 px em --texto-nota. */
.fk-tabela__fim {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  height: var(--fk-tabela-fim);
  padding: 0 var(--space-18);
  border-top: 1px solid var(--linha-tabela);
  color: var(--texto-nota);
  font: 500 11.5px/1 var(--font-texto);
}
.fk-tabela__fim::before {
  content: '';
  flex: none;
  width: var(--space-18);
  height: var(--tamanho-sulco);
  border-top: 1px solid var(--sulco-sombra);
  border-bottom: 1px solid color-mix(in srgb, var(--branco) 12%, transparent); /* rgba(255,255,255,.12) */
}
.fk-tabela__fim--preenche {
  flex: 1;
  justify-content: center;
  gap: var(--space-12);
}
.fk-tabela__fim--mais > .fk-tabela__fim-texto {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* "Página 2 ›": botão de texto de 28 px, a seta anda 2 px sob o ponteiro (350 ms na curva da casa).
   #c9c9ce do canvas = --texto-suave (#cacacf, 1 ponto acima); sob o ponteiro, --branco sobre --tecla-silenciosa-hover
   (rgba(255,255,255,.04), o véu do botão de texto silencioso). */
.fk-tabela__mais {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--space-28);
  margin-left: auto;
  margin-right: calc(var(--space-8) * -1);
  padding: 0 var(--space-6) 0 var(--space-10);
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  cursor: pointer;
  color: var(--texto-suave);
  font: 600 11.5px/1 var(--font-texto);
  white-space: nowrap;
  transition: color var(--duracao-rapida), background var(--duracao-rapida);
}
.fk-tabela__mais:hover {
  color: var(--branco);
  background: var(--tecla-silenciosa-hover);
}
/* Seta: 350 ms no canvas, sem token: --duracao-curta (300 ms) × 7/6. */
.fk-tabela__mais > svg {
  flex: none;
  transition: transform calc(var(--duracao-curta) * 7 / 6) var(--curva-casa);
}
.fk-tabela__mais:hover > svg { transform: translateX(var(--space-2)); }

/* ── Troca de página e de filtro ──────────────────────────────────────────────────────────────────────────────── */
/* Saindo: os registros sobem 10 px e desfocam até 6 px, um após o outro (metade do atraso de cada um): opacidade e
   desfoque em 220 ms (= --duracao-marca + --duracao-escalonamento), posição em 320 ms (= --duracao-anel +
   --duracao-escalonamento). O conjunto todo sai em --duracao-atraso-entrada (380 ms): só então troque o conteúdo. */
.fk-tabela__registros--saindo > :is(.fk-tabela__registro, .fk-tabela__fim) {
  opacity: 0;
  transform: translateY(calc(var(--space-10) * -1));
  filter: blur(calc(var(--desfoque-texto) * 1.5));
  transition:
    opacity calc(var(--duracao-marca) + var(--duracao-escalonamento)) var(--curva-opacidade) calc(var(--fk-tabela-atraso) * .5),
    transform calc(var(--duracao-anel) + var(--duracao-escalonamento)) var(--curva-casa) calc(var(--fk-tabela-atraso) * .5),
    filter calc(var(--duracao-marca) + var(--duracao-escalonamento)) var(--curva-opacidade) calc(var(--fk-tabela-atraso) * .5);
}
/* Entrando: o conteúdo novo é posto 28 px abaixo, em escala .97 e desfocado 12 px, sem transição; tire a classe no
   quadro seguinte (o canvas espera 50 ms) e cada registro sobe no seu atraso. */
.fk-tabela__registros--entrando > :is(.fk-tabela__registro, .fk-tabela__fim) {
  opacity: 0;
  transform: translateY(var(--space-28)) scale(.97);
  filter: blur(var(--desfoque-veu));
  transition: none;
}

/* ── Paginação: contagem à esquerda, setas e números à direita, 14 px acima e abaixo ──────────────────────────── */
.fk-tabela__paginacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-10) var(--space-16);
  margin: var(--space-14) 0;
}
/* "1–7 de 17 lançamentos": Manrope 500 12 px em --texto-apoio (casca 6,0:1), o intervalo em Space Grotesk 600 tabular
   em --texto-forte. */
.fk-tabela__intervalo {
  color: var(--texto-apoio);
  font: 500 12px/1 var(--font-texto);
}
.fk-tabela__intervalo > b {
  color: var(--texto-forte);
  font: 600 12px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-tabela__paginas {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
/* Números: trilho do segmentado com colunas de 30 px e opções de 24 px (Conta .pages .seg); a página atual é a
   opção acesa (aria-current="page"). */
.fk-seg.fk-tabela__numeros { grid-auto-columns: var(--tamanho-tecla); }
.fk-tabela__numeros > .fk-seg__opcao {
  height: var(--tamanho-alvo-minimo);
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Nota: o que o histórico precisa explicar, encostada no pé do cartão, sob um divisor gravado ───────────────── */
/* Manrope 500 11,5/1.55 em --texto-nota (casca 4,9:1), ícone de 14 px na mesma cor. */
.fk-tabela__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  margin: auto 0 0;
  padding-top: var(--space-14);
  border-top: 1px solid var(--divisor-sombra);
  box-shadow: inset 0 1px 0 var(--divisor-luz);
  color: var(--texto-nota);
  font: 500 11.5px/1.55 var(--font-texto);
}
.fk-tabela__nota > svg { flex: none; margin-top: var(--space-2); }

/* ── Menos movimento: a troca é seca, o indicador pula, a seta não anda. ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-tabela__registro,
  .fk-tabela__fim,
  .fk-tabela__registros--saindo > :is(.fk-tabela__registro, .fk-tabela__fim),
  .fk-tabela__filtro > .fk-seg__indicador,
  .fk-tabela__filtro-contagem,
  .fk-tabela__mais,
  .fk-tabela__mais > svg { transition: none; }
  .fk-tabela__registros--saindo > :is(.fk-tabela__registro, .fk-tabela__fim) { transform: none; filter: none; }
  .fk-tabela__registros--entrando > :is(.fk-tabela__registro, .fk-tabela__fim) { transform: none; filter: none; }
}

/* Source: Tecla.css */
/* Fenaky Design System · Tecla — tamanhos, formas e variantes da tecla em relevo.
   A tecla em si (.fk-tecla, --sm, --acesa, aria-pressed, :hover, :active e desligada) é primitiva de 00-base.css; aqui
   ficam só os modificadores que as pranchas usam além dela. Fontes: Main (Concluir, Trocar, + Roupa; .phead .key 36 px),
   TrocarHorizontal (.key.xs 24 px), Conta (.round, .round.sm, .dlg-actions .key 40 px, .key.danger + .is-busy, .spin),
   Planos (.key.soft, .pick 40 px), CriarMobile e Ginga (.key.quiet), Assets e Notificacoes (.sq). */

/* ── Tamanhos (o padrão de 30 px e o --sm de 26 px estão em 00-base) ──────────────────────────────────────────────── */
/* 24 px: Trocar dentro da ficha do slot (TrocarHorizontal, .key.xs: 24, padding 0 8, raio 7, 10,5 px, vão 5).
   Altura = alvo mínimo. O .key.xs de CriarMobile (26 px, raio 8, 0 10, 11 px) é o --sm com 1 px a menos de raio:
   descartado em favor do --sm. */
.fk-tecla--xs {
  height: var(--tamanho-alvo-minimo);
  padding: 0 var(--space-8);
  gap: var(--space-5);
  border-radius: var(--radius-7);
  font-size: 10.5px;
}
/* 36 px: ações de cabeçalho e do resultado (Main .phead .key: height 36, padding 0 14, raio e corpo da tecla = 9 px e
   11,5 px). Agentes, Ginga e o .key.back de Planos usam raio 10 e 12 px de corpo; a referência canônica é Main, então o
   lg fica em 9/11,5. Sem token de 36: derivado da tecla padrão + 6 (--tamanho-tecla + --space-6). */
.fk-tecla--lg {
  height: calc(var(--tamanho-tecla) + var(--space-6));
  padding: 0 var(--space-14);
}
/* 40 px: ações de diálogo e "Ver plano" (Conta .dlg-actions .key, Planos .pick: 40, raio 11, 12,5 px).
   Derivado de --tamanho-tecla + --space-10. A largura fixa da confirmação é do Dialogo (.fk-dialogo__confirmar). */
.fk-tecla--xl {
  height: calc(var(--tamanho-tecla) + var(--space-10));
  padding: 0 var(--space-16);
  border-radius: var(--radius-11);
  font-size: 12.5px;
}

/* ── Formas só de ícone ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Quadrada: largura = altura, raio da tecla (Assets/Notificacoes .sq 30 px: Baixar, Usar, Ver andamento). */
.fk-tecla--icone { flex: none; width: var(--tamanho-tecla); padding: 0; }
.fk-tecla--icone.fk-tecla--sm { width: var(--tamanho-tecla-sm); }
.fk-tecla--icone.fk-tecla--xs { width: var(--tamanho-alvo-minimo); }
.fk-tecla--icone.fk-tecla--lg { width: calc(var(--tamanho-tecla) + var(--space-6)); }
.fk-tecla--icone.fk-tecla--xl { width: calc(var(--tamanho-tecla) + var(--space-10)); }
/* Redonda: 32 px, círculo (todas as pranchas, .round: Fechar, setas de página e de carrossel). */
.fk-tecla--redonda {
  flex: none;
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  padding: 0;
  border-radius: var(--radius-circulo);
}
/* Redonda menor: 30 px na paginação (Conta .round.sm) e 24 px numa lista apertada (GingaHorizontal .alist.n3). */
.fk-tecla--redonda.fk-tecla--sm { width: var(--tamanho-tecla); height: var(--tamanho-tecla); }
.fk-tecla--redonda.fk-tecla--xs { width: var(--tamanho-alvo-minimo); height: var(--tamanho-alvo-minimo); border-radius: var(--radius-circulo); }

/* Ícone dentro da tecla: não encolhe; o consumidor escolhe o tamanho no SVG (13 px no padrão, 11 no xs, 14 na redonda). */
.fk-tecla > svg { flex: none; }

/* ── Suave: tecla com aro claro, para a escolha secundária ao lado de um CTA (Planos .key.soft, "Ver plano") ────────── */
/* Sombras exatas do canvas: topo .10 + aro .06 em repouso; topo .13 + aro .10 e sombra 0 4px 10px -2px .55 no hover.
   O rótulo #ececef do canvas é --texto (#ededef). Pressionada mantém a sombra do hover e só afunda, como no canvas. */
.fk-tecla--suave {
  color: var(--texto);
  box-shadow: var(--shadow-tecla-suave);
}
.fk-tecla--suave:hover,
.fk-tecla--suave:active {
  color: var(--branco);
  box-shadow: var(--shadow-tecla-suave-hover);
}

/* ── Silenciosa: sem relevo, só o contorno; ação de remover ou desfazer que não deve competir ───────────────────────── */
/* Valores de CriarMobile .key.quiet (contorno .10, fundo .04 no hover); Ginga usa .05 no hover. O rótulo do canvas
   (#b5b5ba / #b4b4ba) vira --texto-leitura (#b7b7bd), o token mais próximo. */
.fk-tecla--silenciosa,
.fk-tecla--silenciosa:active {
  color: var(--texto-leitura);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--tecla-silenciosa-aro);
}
.fk-tecla--silenciosa:hover {
  color: var(--branco);
  background: var(--tecla-silenciosa-hover);
}
/* Desligada continua sem relevo (a desligada de 00-base devolveria o fundo da tecla). */
.fk-tecla.fk-tecla--silenciosa:is(:disabled, [aria-disabled="true"]),
.fk-tecla.fk-tecla--silenciosa:is(:disabled, [aria-disabled="true"]):hover,
.fk-tecla.fk-tecla--silenciosa:is(:disabled, [aria-disabled="true"]):active {
  color: var(--texto-leitura);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--tecla-silenciosa-aro);
}

/* ── Perigo: confirmação destrutiva dentro de diálogo (Conta "Cancelar assinatura", Agentes, Redes "Sim, desconectar") */
.fk-tecla--perigo,
.fk-tecla--perigo:active {
  color: var(--perigo-texto);
  background: linear-gradient(180deg, var(--perigo-topo), var(--perigo-base));
  box-shadow: var(--shadow-perigo);
}
.fk-tecla--perigo:hover {
  color: var(--branco);
  background: linear-gradient(180deg, var(--perigo-hover-topo), var(--perigo-hover-base));
}
/* Ocupada: listras --perigo-listra andando a -45° (passo de 16 px na diagonal = ladrilho de 22,63 px), como
   .key.danger.is-busy. Não clareia nem afunda enquanto trabalha (o canvas ainda afundava; aqui o clique não tem efeito). */
.fk-tecla--perigo[aria-busy="true"],
.fk-tecla--perigo[aria-busy="true"]:hover,
.fk-tecla--perigo[aria-busy="true"]:active,
.fk-tecla--perigo.fk-tecla--ocupada,
.fk-tecla--perigo.fk-tecla--ocupada:hover,
.fk-tecla--perigo.fk-tecla--ocupada:active {
  cursor: progress;
  transform: none;
  color: var(--perigo-texto);
  background:
    repeating-linear-gradient(-45deg, var(--perigo-listra) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--perigo-topo), var(--perigo-base));
  background-size: 22.63px 22.63px, 100% 100%;
  box-shadow: var(--shadow-perigo);
  animation: fk-tecla-listras var(--duracao-listras) var(--curva-linear) infinite;
}
@keyframes fk-tecla-listras { to { background-position: 22.63px 0, 0 0; } }

/* Giro: o arco que acompanha o rótulo enquanto a tecla trabalha (Conta .spin, 1 s por volta). */
.fk-tecla__giro { flex: none; animation: fk-tecla-giro var(--duracao-giro) var(--curva-linear) infinite; }
@keyframes fk-tecla-giro { to { transform: rotate(360deg); } }

/* ── Menos movimento: as listras e o giro param; o resto já não transita (00-base). ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-tecla--perigo:is([aria-busy="true"], .fk-tecla--ocupada),
  .fk-tecla--perigo:is([aria-busy="true"], .fk-tecla--ocupada):is(:hover, :active),
  .fk-tecla__giro { animation: none; }
}

/* Source: Toast.css */
/* Fenaky Design System · Toast — a confirmação e o andamento no canto da tela.
   Casca compacta (.fk-casca.fk-casca--compacta, raio 16, grão, filete claro no topo, --shadow-toast) de 380 px, com
   ícone em tecla 32 (a cor do tipo vai no ícone, nunca no fundo), título, texto, ação opcional, fechar e a barra de
   tempo de 2 px que esvazia. Tipos: neutro, sucesso, aviso, erro, progresso (anel lima e %) e mídia (miniatura 9:16).
   O toast de trabalho (.fk-toast--trabalho) passa do andamento ao vídeo pronto na mesma caixa (.fk-toast--pronto).
   Fontes: NotificacoesCatalogo.dc.html (.tst, .t-ic, .t-th, .t-b, .t-h, .t-t, .t-pct, .t-p, .t-a, .t-cl, .t-bar e as
   entradas tInA/tOut), Notificacoes.dc.html (a troca andamento → pronto: .job, .lead, .lay-p, .lay-m, .ppct) e
   NotificacoesMobile.dc.html (largura do celular). Cores só por var(--token); quando o canvas usa outra opacidade da
   mesma cor, ela sai do token com color-mix, com a conta ao lado. Medidas e tempos que não são token viram variáveis
   locais --fk-toast-* derivadas dos tokens de movimento e de desfoque, com a origem ao lado; nenhum tempo do toast
   pega emprestado o token de outro componente. A posição na tela e o empilhamento são da PilhaToasts. */

/* ── Corpo: grade ícone · texto · fechar ────────────────────────────────────────────────────────────────────── */
/* Use junto de .fk-casca.fk-casca--compacta, que dá o material; aqui só a geometria do catálogo (.tst). */
.fk-toast {
  /* Tom do tipo: pinta o ícone e a barra. Neutro = --texto-link (#d6d6da). */
  --fk-toast-tom: var(--texto-link);
  /* Brilho da barra: o tom a 35% no neutro e a 45% nos tipos de cor (.t-bar.neu i / .t-bar.ok i). */
  --fk-toast-brilho: 35%;
  /* Desfoques e brilhos locais, todos derivados de --desfoque-*:
     brilho da barra 8 px (.t-bar i) = --desfoque-saida; brilho do anel 3 px (.pring .val) = --desfoque-dica;
     anel cheio 9 px (.is-full .val) = 3 × --desfoque-dica; texto que sai 1,5 px (.lay-p) = --desfoque-dica / 2;
     texto que entra 2 px (.lay-m) = --desfoque-dica × 2/3. */
  --fk-toast-brilho-barra: var(--desfoque-saida);
  --fk-toast-brilho-anel: var(--desfoque-dica);
  --fk-toast-brilho-cheio: calc(var(--desfoque-dica) * 3);
  --fk-toast-desfoque-sai: calc(var(--desfoque-dica) / 2);
  --fk-toast-desfoque-entra: calc(var(--desfoque-dica) * 2 / 3);
  position: relative;
  display: grid;
  /* 32 do ícone, texto, 24 do fechar. */
  grid-template-columns: var(--tamanho-tecla-redonda) minmax(0, 1fr) var(--tamanho-alvo-minimo);
  column-gap: var(--space-12);
  align-items: start;
  width: var(--tamanho-toast);
  max-width: 100%;
  padding: var(--space-14) var(--space-12) var(--space-14) var(--space-14);
  text-align: left;
  color: var(--texto);
  font-family: var(--font-texto);
  -webkit-font-smoothing: antialiased;
}
.fk-toast--sucesso { --fk-toast-tom: var(--sucesso); --fk-toast-brilho: 45%; }
.fk-toast--aviso { --fk-toast-tom: var(--aviso); --fk-toast-brilho: 45%; }
.fk-toast--erro { --fk-toast-tom: var(--erro); --fk-toast-brilho: 45%; }
/* Vida: 5 s no neutro e no sucesso; 8 s no aviso, no erro e em todo toast com ação (.fk-toast--longo, mais abaixo). */
.fk-toast--aviso,
.fk-toast--erro { --fk-toast-vida: var(--duracao-toast-longo); }

/* Celular: ocupa a largura entre as margens de 12 px da tela, abaixo da barra do topo (NotificacoesMobile .tw/.tic). */
.fk-toast--celular {
  width: 100%;
  padding-left: var(--space-12);
}

/* ── Ícone em tecla 32 (.t-ic) ──────────────────────────────────────────────────────────────────────────────── */
.fk-toast__icone {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  border-radius: var(--radius-10);
  color: var(--fk-toast-tom);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.fk-toast__icone > svg { display: block; flex: none; }

/* Anel de andamento (progresso): 22 px, r 8, traço 2,6, nascendo às 12 h. O valor vem de --fk-toast-andamento
   (0 a 100) no toast ou num ancestral; o círculo do valor leva pathLength="100". */
.fk-toast__anel { display: block; width: var(--space-22); height: var(--space-22); transform: rotate(-90deg); overflow: visible; }
.fk-toast__anel-fundo {
  fill: none;
  /* rgba(255,255,255,.13) = branco a 13%. */
  stroke: color-mix(in srgb, var(--branco) 13%, transparent);
  stroke-width: 2.6;
}
.fk-toast__anel-valor {
  fill: none;
  stroke: var(--lima);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--fk-toast-andamento, 0));
  /* drop-shadow(0 0 3px rgba(215,255,63,.7)) = lima a 70%. */
  filter: drop-shadow(0 0 var(--fk-toast-brilho-anel) color-mix(in srgb, var(--lima) 70%, transparent));
  transition: stroke-dashoffset var(--duracao-rapida) var(--curva-linear), filter var(--duracao-curta) var(--curva-opacidade);
}

/* ── Miniatura 9:16 do vídeo pronto (.t-th): 46 × 82, raio 9 ────────────────────────────────────────────────── */
.fk-toast--midia { grid-template-columns: calc(var(--space-40) + var(--space-6)) minmax(0, 1fr) var(--tamanho-alvo-minimo); }
.fk-toast__miniatura {
  position: relative;
  display: block;
  /* 46 = 40 + 6; 82 = 46 × 16 / 9 arredondado, como no catálogo. */
  width: calc(var(--space-40) + var(--space-6));
  height: calc(var(--space-64) + var(--space-18));
  border-radius: var(--radius-9);
  overflow: hidden;
  background: var(--midia-fundo);
  /* Contorno preto de 1 px e sombra curta; o fio interno da --shadow-miniatura fica sob a foto, e o fio claro vem do ::after. */
  box-shadow: var(--shadow-miniatura);
}
.fk-toast__miniatura > img,
.fk-toast__miniatura > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* O clipe toca sob o ponteiro: entra num fade por cima do quadro. */
.fk-toast__miniatura > video { animation: fk-toast-clipe var(--duracao-media) var(--curva-opacidade) both; }
@keyframes fk-toast-clipe { from { opacity: 0; } }
/* Fio claro de 1 px (branco a 10%) e reflexo no alto (branco a 8% até 35% da altura). */
.fk-toast__miniatura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 10%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--branco) 8%, transparent), transparent 35%);
  pointer-events: none;
}
/* Play de vidro de 16 px no canto de baixo (.t-pl): véu --veu-play, desfoque de 6 px (2 × --desfoque-dica). */
.fk-toast__play {
  position: absolute;
  z-index: 2;
  left: var(--space-5);
  bottom: var(--space-5);
  display: grid;
  place-items: center;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-circulo);
  color: var(--branco);
  background: var(--veu-play);
  -webkit-backdrop-filter: blur(calc(var(--desfoque-dica) * 2));
  backdrop-filter: blur(calc(var(--desfoque-dica) * 2));
  box-shadow: inset 0 0 0 1px var(--filete-midia-hover);
}

/* ── Texto (.t-b, .t-h, .t-t, .t-pct, .t-p) ─────────────────────────────────────────────────────────────────── */
.fk-toast__corpo { min-width: 0; padding-top: var(--space-7); }
.fk-toast--midia .fk-toast__corpo {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
}
.fk-toast__cabeca { display: flex; align-items: baseline; gap: var(--space-10); min-width: 0; }
.fk-toast__titulo {
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--texto-forte);
  font: 600 13px/1.35 var(--font-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Porcentagem do andamento: Space Grotesk tabular, com o % menor em --texto-unidade. */
.fk-toast__pct {
  flex: none;
  margin-left: auto;
  color: var(--texto-forte);
  font: 600 12.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fk-toast__pct-unidade { margin-left: var(--space-1); font-size: 10.5px; color: var(--texto-unidade); }
.fk-toast__texto {
  margin: var(--space-3) 0 0;
  color: var(--texto-apoio);
  font: 500 12.5px/1.5 var(--font-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Ações (.t-a): teclas pequenas (.fk-tecla.fk-tecla--sm) ou o lima pequeno do card de canto ─────────────── */
.fk-toast__acoes { display: flex; gap: var(--space-6); margin-top: var(--space-10); }
.fk-toast--midia .fk-toast__acoes { margin-top: auto; }

/* ── Fechar (.t-cl): 24 px na grade, alvo de 32 px (--tamanho-alvo) por um ::before invisível ───────────────── */
.fk-toast__fechar {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tamanho-alvo-minimo);
  height: var(--tamanho-alvo-minimo);
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--texto-nota);
  cursor: pointer;
  transition: background var(--duracao-hover), color var(--duracao-hover);
}
.fk-toast__fechar::before {
  content: '';
  position: absolute;
  inset: calc((var(--tamanho-alvo) - var(--tamanho-alvo-minimo)) / -2);
}
.fk-toast__fechar:hover { background: var(--fundo-hover-forte); color: var(--branco); }
.fk-toast__fechar > svg { display: block; }
.fk-toast--midia .fk-toast__fechar { margin-top: calc(var(--space-1) * -1); }

/* ── Barra de tempo (.t-bar): 2 px no pé, 16 px das laterais, o tom com brilho ──────────────────────────────── */
.fk-toast__tempo {
  position: absolute;
  z-index: 2;
  left: var(--space-16);
  right: var(--space-16);
  bottom: 0;
  height: var(--tamanho-barra-tempo);
  border-radius: var(--radius-2);
  /* Trilho: branco a 7% (= --casca-filete). */
  background: var(--casca-filete);
  pointer-events: none;
}
.fk-toast--celular .fk-toast__tempo { left: var(--space-14); right: var(--space-14); }
.fk-toast__tempo-valor {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--fk-toast-tom);
  box-shadow: 0 0 var(--fk-toast-brilho-barra) color-mix(in srgb, var(--fk-toast-tom) var(--fk-toast-brilho), transparent);
  transform-origin: 0 50%;
  /* Parada: o quanto resta (1 = cheia). */
  transform: scaleX(var(--fk-toast-resta, 1));
}
/* Contando: a barra é o relógio. Esvazia de 1 até --fk-toast-resta (0 por padrão) em --fk-toast-vida (5 s; 8 s no
   aviso, no erro e com .fk-toast--longo), depois da entrada; o toast sai quando ela termina (animationend). Pausa sob
   o ponteiro e com o foco dentro. */
.fk-toast--contando .fk-toast__tempo-valor {
  animation: fk-toast-tempo var(--fk-toast-vida, var(--duracao-toast)) var(--curva-linear) calc(var(--fk-toast-atraso, 0ms) + var(--duracao-entrada-toast)) both;
}
.fk-toast--longo { --fk-toast-vida: var(--duracao-toast-longo); }
@keyframes fk-toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(var(--fk-toast-resta, 0)); } }
.fk-toast:hover .fk-toast__tempo-valor,
.fk-toast:focus-within .fk-toast__tempo-valor,
.fk-toast--pausado .fk-toast__tempo-valor { animation-play-state: paused; }

/* ── Entrada e saída ───────────────────────────────────────────────────────────────────────────────────────── */
/* Entra da direita saindo de um desfoque, 420 ms na curva da casa; --fk-toast-atraso escalona vários. */
.fk-toast--entra { animation: fk-toast-entra var(--duracao-entrada-toast) var(--curva-casa) var(--fk-toast-atraso, 0ms) both; }
@keyframes fk-toast-entra { from { opacity: 0; transform: translateX(110%); filter: blur(var(--desfoque-toast)); } }
/* Sai para a direita em 260 ms acelerando (começa devagar, para ser vista). */
.fk-toast--sai { animation: fk-toast-sai var(--duracao-saida) var(--curva-saida) both; pointer-events: none; }
@keyframes fk-toast-sai { to { opacity: 0; transform: translateX(110%); filter: blur(var(--desfoque-saida)); } }

/* ── Trabalho: o andamento vira o vídeo pronto na mesma caixa ──────────────────────────────────────────────── */
/* Marcação: .fk-toast__lead (com o ícone do anel e a miniatura empilhados) e dois .fk-toast__corpo, um --andamento e
   um --pronto, na mesma célula. .fk-toast--pronto troca tudo no mesmo quadro: a caixa abre de 32 para 46 px, o anel
   some crescendo, a miniatura revela; a linha de baixo e a % saem primeiro (0 e 30 ms), o título novo sobe de baixo aos
   80 ms, o antigo sobe e sai aos 90 ms, e as linhas novas seguem em cascata (125, 165, 205 ms). Tempos de
   Notificacoes.dc.html (.job, .lead, .lay-p, .lay-m), com a geometria do catálogo. */
.fk-toast--trabalho {
  /* Tempos da troca (Notificacoes.dc.html), somas dos tokens do toast e dos de movimento geral:
     caixa e coluna 750 ms (.lead) = --duracao-media + --duracao-curta;
     anel crescendo 700 ms (.pring) = --fk-toast-troca - 1,25 × --duracao-escalonamento;
     foto chegando de perto 1,2 s (.lthumb transform) = --fk-toast-troca + --duracao-media;
     foto perdendo o desfoque 1,1 s (.lthumb filter) = 2 × --duracao-media + --duracao-rapida;
     play com atraso e escala de 500 ms (.lplay) = --duracao-media + 1,25 × --duracao-escalonamento;
     linhas do pronto subindo 400 e 800 ms, e o pronto escondido 400 ms depois (.lay-m) = 2 e 4 × --duracao-rapida. */
  --fk-toast-troca: calc(var(--duracao-media) + var(--duracao-curta));
  --fk-toast-anel-cresce: calc(var(--fk-toast-troca) - var(--duracao-escalonamento) * 1.25);
  --fk-toast-foto-escala: calc(var(--fk-toast-troca) + var(--duracao-media));
  --fk-toast-foto-foco: calc(var(--duracao-media) * 2 + var(--duracao-rapida));
  --fk-toast-play: calc(var(--duracao-media) + var(--duracao-escalonamento) * 1.25);
  --fk-toast-linha: calc(var(--duracao-rapida) * 2);
  /* Opacidade do texto: a saída (.lay-p, ease-in) usa --curva-saida, a aceleração da casa; a entrada (.lay-m,
     ease-out) é a desaceleração padrão do CSS, que não tem token, e fica nomeada aqui. */
  --fk-toast-curva-revela: ease-out;
  transition: grid-template-columns var(--fk-toast-troca) var(--curva-casa);
}
.fk-toast--trabalho.fk-toast--pronto { grid-template-columns: calc(var(--space-40) + var(--space-6)) minmax(0, 1fr) var(--tamanho-alvo-minimo); }
.fk-toast__lead {
  position: relative;
  grid-area: 1 / 1;
  width: var(--tamanho-tecla-redonda);
  height: var(--tamanho-tecla-redonda);
  border-radius: var(--radius-10);
  transition:
    width var(--fk-toast-troca) var(--curva-casa),
    height var(--fk-toast-troca) var(--curva-casa),
    border-radius var(--fk-toast-troca) var(--curva-casa),
    transform var(--duracao-media) var(--curva-casa);
}
.fk-toast__lead > .fk-toast__icone,
.fk-toast__lead > .fk-toast__miniatura {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
}
.fk-toast__lead > .fk-toast__icone { transition: opacity var(--duracao-curta) var(--curva-opacidade); }
.fk-toast__lead > .fk-toast__icone > .fk-toast__anel { transition: opacity var(--duracao-curta) var(--curva-opacidade), transform var(--fk-toast-anel-cresce) var(--curva-casa); }
.fk-toast__lead > .fk-toast__miniatura { opacity: 0; transition: opacity var(--duracao-media) var(--curva-opacidade) var(--duracao-escalonamento); }
/* A foto revela de perto, clara e desfocada: escala 1,3, desfoque 12 px, brilho 1,5 (.lthumb). */
.fk-toast__lead > .fk-toast__miniatura > img {
  transform: scale(1.3);
  filter: blur(var(--desfoque-toast)) brightness(1.5);
  transition:
    transform var(--fk-toast-foto-escala) var(--curva-casa) var(--duracao-escalonamento),
    filter var(--fk-toast-foto-foco) var(--curva-casa) var(--duracao-escalonamento);
}
.fk-toast__lead .fk-toast__play {
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--duracao-curta) var(--curva-opacidade) var(--fk-toast-play), transform var(--fk-toast-play) var(--curva-casa) var(--fk-toast-play);
}
/* Cheio (100%): a caixa cresce 12% e o anel acende, um instante antes de virar mídia (.job.is-full). */
.fk-toast--cheio .fk-toast__lead { transform: scale(1.12); }
.fk-toast--cheio .fk-toast__anel-valor { filter: drop-shadow(0 0 var(--fk-toast-brilho-cheio) var(--lima)); }
/* Pronto. */
.fk-toast--pronto .fk-toast__lead {
  width: calc(var(--space-40) + var(--space-6));
  height: calc(var(--space-64) + var(--space-18));
  border-radius: var(--radius-9);
  transform: none;
}
.fk-toast--pronto .fk-toast__lead > .fk-toast__icone { opacity: 0; }
.fk-toast--pronto .fk-toast__lead > .fk-toast__icone > .fk-toast__anel { opacity: 0; transform: rotate(-90deg) scale(1.6); }
.fk-toast--pronto .fk-toast__lead > .fk-toast__miniatura { opacity: 1; }
.fk-toast--pronto .fk-toast__lead > .fk-toast__miniatura > img { transform: none; filter: none; }
.fk-toast--pronto .fk-toast__lead .fk-toast__play { opacity: 1; transform: none; }

/* As duas camadas de texto dividem a célula do meio. */
.fk-toast__corpo--andamento,
.fk-toast__corpo--pronto { grid-area: 1 / 2; }
.fk-toast__corpo--pronto {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
  visibility: hidden;
  /* Esconde de verdade só depois que as linhas saíram (400 ms = --fk-toast-linha). */
  transition: visibility 0s var(--curva-linear) var(--fk-toast-linha);
}
.fk-toast__corpo--pronto .fk-toast__acoes { margin-top: auto; }
.fk-toast--pronto .fk-toast__corpo--andamento { pointer-events: none; }
.fk-toast--pronto .fk-toast__corpo--pronto { visibility: visible; transition: visibility 0s; }
.fk-toast--trabalho .fk-toast__fechar { grid-area: 1 / 3; transition: background var(--duracao-hover), color var(--duracao-hover), margin-top var(--duracao-media) var(--curva-casa); }
.fk-toast--pronto .fk-toast__fechar { margin-top: calc(var(--space-1) * -1); }

/* Saída do andamento: sobe 10 px, esmaece acelerando (--curva-saida) e desfoca 1,5 px. Volta (reinício): 220 ms = marca + escalonamento. */
.fk-toast__corpo--andamento > * {
  transition:
    opacity calc(var(--duracao-marca) + var(--duracao-escalonamento)) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter calc(var(--duracao-marca) + var(--duracao-escalonamento)) var(--curva-opacidade);
}
.fk-toast--pronto .fk-toast__corpo--andamento > * {
  opacity: 0;
  transform: translateY(calc(var(--space-10) * -1));
  filter: blur(var(--fk-toast-desfoque-sai));
  transition:
    opacity var(--duracao-marca) var(--curva-saida) var(--fk-toast-sai, 0ms),
    transform var(--duracao-media) var(--curva-casa) var(--fk-toast-sai, 0ms),
    filter var(--duracao-marca) var(--curva-opacidade) var(--fk-toast-sai, 0ms);
}
/* O título antigo sai aos 90 ms (metade de --duracao-marca), depois de o novo começar a subir. */
.fk-toast--pronto .fk-toast__corpo--andamento > .fk-toast__cabeca { --fk-toast-sai: calc(var(--duracao-marca) / 2); }
/* A linha de baixo e a ação saem já, em 120 ms (3 × escalonamento). */
.fk-toast--pronto .fk-toast__corpo--andamento > :not(.fk-toast__cabeca) {
  transition-duration: calc(var(--duracao-escalonamento) * 3), var(--duracao-media), calc(var(--duracao-escalonamento) * 3);
}
/* A % sai aos 30 ms, em 150 ms. */
.fk-toast__corpo--andamento .fk-toast__pct {
  transition:
    opacity var(--duracao-curta) var(--curva-opacidade),
    transform var(--duracao-media) var(--curva-casa),
    filter var(--duracao-curta) var(--curva-opacidade);
}
.fk-toast--pronto .fk-toast__corpo--andamento .fk-toast__pct {
  opacity: 0;
  transform: translateY(calc(var(--space-10) * -1));
  filter: blur(var(--fk-toast-desfoque-sai));
  transition:
    opacity var(--duracao-hover) var(--curva-saida) calc(var(--duracao-escalonamento) * .75),
    transform var(--duracao-media) var(--curva-casa) calc(var(--duracao-escalonamento) * .75),
    filter var(--duracao-hover) var(--curva-opacidade) calc(var(--duracao-escalonamento) * .75);
}
/* Entrada do pronto: cada linha sobe 12 px saindo de um desfoque de 2 px, em cascata. */
.fk-toast__corpo--pronto > * {
  opacity: 0;
  transform: translateY(var(--space-12));
  filter: blur(var(--fk-toast-desfoque-entra));
  transition:
    opacity var(--duracao-rapida) var(--curva-opacidade),
    transform var(--fk-toast-linha) var(--curva-casa),
    filter var(--duracao-rapida) var(--curva-opacidade);
}
.fk-toast--pronto .fk-toast__corpo--pronto > * {
  opacity: 1;
  transform: none;
  filter: none;
  /* 340 ms = curta + escalonamento; 800 ms = 2 × --fk-toast-linha. */
  transition:
    opacity calc(var(--duracao-curta) + var(--duracao-escalonamento)) var(--fk-toast-curva-revela) var(--fk-toast-cascata),
    transform calc(var(--fk-toast-linha) * 2) var(--curva-casa) var(--fk-toast-cascata),
    filter var(--duracao-curta) var(--curva-opacidade) var(--fk-toast-cascata);
}
/* 80, 125, 165 e 205 ms (.lay-m): 2, 3,125, 4,125 e 5,125 × escalonamento. */
.fk-toast__corpo--pronto > :nth-child(1) { --fk-toast-cascata: calc(var(--duracao-escalonamento) * 2); }
.fk-toast__corpo--pronto > :nth-child(2) { --fk-toast-cascata: calc(var(--duracao-escalonamento) * 3.125); }
.fk-toast__corpo--pronto > :nth-child(3) { --fk-toast-cascata: calc(var(--duracao-escalonamento) * 4.125); }
.fk-toast__corpo--pronto > :nth-child(n+4) { --fk-toast-cascata: calc(var(--duracao-escalonamento) * 5.125); }

/* ── Menos movimento: o toast entra e sai num fade de 200 ms; nada desliza, cresce nem cascateia. A barra continua
   a correr, porque é o relógio (anda devagar e em linha reta). ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-toast--entra { animation: fk-toast-aparece var(--duracao-rapida) var(--curva-opacidade) both; }
  .fk-toast--sai { animation: fk-toast-some var(--duracao-rapida) var(--curva-opacidade) both; }
  .fk-toast__miniatura > video { animation: none; }
  .fk-toast--trabalho,
  .fk-toast__lead,
  .fk-toast__lead *,
  .fk-toast__anel-valor,
  .fk-toast__corpo--andamento,
  .fk-toast__corpo--andamento *,
  .fk-toast__corpo--pronto,
  .fk-toast__corpo--pronto > *,
  .fk-toast__fechar { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .fk-toast--cheio .fk-toast__lead { transform: none; }
}
@keyframes fk-toast-aparece { from { opacity: 0; } }
@keyframes fk-toast-some { to { opacity: 0; } }

/* Source: Topo.css */
/* Fenaky Design System · Topo — a barra de 64 px no alto da área principal: o local à esquerda e, à direita, Planos com
   "Entrar com Google" (visitante) ou o saldo, o sino e a conta (área privada). Variante de celular com 62 px, saldo em
   poço e véu escuro quando o conteúdo passa por baixo.
   Fontes: Notificacoes.dc.html e Assets.dc.html (.top, .crumb, .credits, .bell, .bnum, .av), Main.dc.html (.acct,
   .credits.ch-a, balA), Home, Ajuda, PreviewVideo e Sobre (.loc e "Entrar com Google" 34 px), Planos e PlanoResumo
   (.toplink[aria-current]), Resultado (.crumb a), Conta, Redes, Suporte e Influencers (gap 14 + margem 4 do Planos),
   NotificacoesMobile (.topbar, .bal, .bell swA, .pill jA, véu .scrolled), PlanosMobile e CriarMobile (.top 62 px),
   HomeMobile e PlanosMobile (.login, .price),
   SPEC.md ("Topo do app: 64 px"; visitante = Planos + Entrar com Google; logado = 238 créditos + avatar).
   Só var(--token) e as primitivas de 00-base (.fk-tecla, .fk-poco), o .fk-link--topo de Link e o Sino (.fk-sino); nada deles é redefinido. */

/* ── Barra ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* O consumidor posiciona (no canvas: absolute, left 40 ou 140, right 40, top 0). O vão de 18 px vem de Influencers. */
.fk-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-18);
  height: var(--tamanho-topo);
  margin: 0;
  font-family: var(--font-texto);
}

/* ── Local: "Seção / Contexto" ───────────────────────────────────────────────────────────────────────────────────── */
/* A fonte é a do estilo .local de tokens.css (600 13 px/1, Manrope). Os estilos de tipo são classes, não variáveis, então
   ela se repete aqui para o topo funcionar sem a classe extra. Vão de 10 px: .crumb de Notificacoes, Assets, Planos,
   Conta e mais 12 pranchas; as telas de visitante (.loc de Home, Ajuda, Avatares, PreviewVideo) usam 8 px. */
.fk-topo__local {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  margin: 0;
  color: var(--texto-forte);
  font: 600 13px/1 var(--font-texto);
  white-space: nowrap;
}
/* A seção pode levar de volta (Resultado: "Vídeos / Sua criação"). Sem sublinhado; branco sob o ponteiro. */
.fk-topo__local a {
  border-radius: var(--radius-3);
  color: var(--texto);
  text-decoration: none;
  transition: color var(--duracao-hover);
}
.fk-topo__local a:hover { color: var(--branco); }
/* A barra é só decoração (aria-hidden): 3,0:1 basta. #4c4c52 e #5c5c62 aparecem no canvas; o token é o #5c5c62. */
.fk-topo__separador { color: var(--texto-separador); font-style: normal; font-weight: 500; }
.fk-topo__contexto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--texto-controle);
  font-weight: 500;
}

/* ── Ações à direita ───────────────────────────────────────────────────────────────────────────────────────────── */
/* 14 px entre as teclas; o Planos ganha mais 4 px de margem, então fica a 18 px da tecla ao lado (como o visitante). */
.fk-topo__acoes {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-14);
}
.fk-topo__planos { margin-right: var(--space-4); }

/* Entrar com Google: tecla de 34 px (a altura do saldo), padding 14, rótulo da tecla (600 11,5 px). */
.fk-topo__entrar {
  height: var(--tamanho-saldo);
  padding: 0 var(--space-14);
}
.fk-topo__entrar > svg { flex: none; color: var(--texto-forte); }

/* ── Saldo: "238 créditos" com a marca F; leva à conta ────────────────────────────────────────────────────────── */
.fk-topo__saldo {
  display: inline-flex;
  flex: none;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
/* Desktop: tecla de 34 px, padding 0 13 0 6, vão de 8. */
.fk-tecla.fk-topo__saldo {
  height: var(--tamanho-saldo);
  padding: 0 var(--space-13) 0 var(--space-6);
  gap: var(--space-8);
}
.fk-topo__saldo-marca {
  display: block;
  flex: none;
  /* 22 px (.credits img): a mesma medida do vidro pequeno, o token de tamanho mais próximo e exato. */
  width: var(--tamanho-vidro-sm);
  height: var(--tamanho-vidro-sm);
  border-radius: var(--radius-7);
  box-shadow: 0 0 0 1px var(--sulco-sombra);
}
.fk-topo__saldo-valor {
  display: inline-block;
  color: var(--texto-titulo);
  font: 600 13px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
/* Unidade: o canvas usa #a6a6ac; o token mais próximo é --texto-unidade (#a9a9af, 5,6:1 sobre tecla-topo, 8,4:1 no poço). */
.fk-topo__saldo-unidade { color: var(--texto-unidade); }
/* O saldo novo cai no lugar (créditos reservados ao gerar, pagamento confirmado): desce 7 px, saindo do desfoque.
   balA de Main, Ginga, Trocar e CriarMobile (−7 px, .7 s); Notificacoes usa −8 px e .8 s, uma exceção que não seguimos. */
.fk-topo__saldo--muda .fk-topo__saldo-valor { animation: fk-topo-saldo var(--duracao-silencio) var(--curva-casa); }
@keyframes fk-topo-saldo {
  from { opacity: 0; transform: translateY(calc(var(--space-7) * -1)); filter: blur(var(--desfoque-texto)); }
}

/* ── Conta: tecla redonda de 34 px ───────────────────────────────────────────────────────────────────────────── */
/* O sino ao lado dela é o componente Sino (class="fk-tecla fk-sino", Sino.css): o Topo só reserva a vaga na fila de
   ações e não redefine nada dele (tamanho, aceso, balanço e contador vivem lá). */
.fk-topo__conta {
  flex: none;
  width: var(--tamanho-saldo);
  height: var(--tamanho-saldo);
  padding: 0;
  border-radius: var(--radius-circulo);
}
.fk-topo__conta > svg { flex: none; }

/* ── Celular: 62 px, alvos de 32 px, saldo em poço ────────────────────────────────────────────────────────────────── */
.fk-topo--celular {
  gap: var(--space-12);
  height: var(--tamanho-topo-celular);
}
.fk-topo--celular .fk-topo__local { gap: var(--space-7); }
.fk-topo--celular .fk-topo__acoes { gap: var(--space-10); }
/* Planos: 12,5 px num alvo de 44 px de altura, medida exata de .price em PlanosMobile e HomeMobile (sem token: é o
   único link de texto do celular que ganha esse alvo). */
.fk-topo--celular .fk-topo__planos {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-right: 0;
  padding: 0 var(--space-2);
  font-size: 12.5px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--branco) 35%, transparent);
  text-underline-offset: var(--space-6);
}
.fk-topo--celular .fk-topo__planos:hover { text-decoration-color: color-mix(in srgb, var(--branco) 70%, transparent); }
/* Página atual no celular: o sublinhado é claro, de 1,5 px, não violeta (PlanosMobile .price[aria-current]). */
.fk-topo--celular .fk-topo__planos[aria-current]:not([aria-current="false"]) {
  color: var(--texto-aceso);
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--texto-forte) 32%, transparent);
  text-underline-offset: var(--space-7);
}
/* Entrar: 32 px, ícone + "Entrar" (o nome completo fica no aria-label). */
.fk-topo--celular .fk-topo__entrar {
  height: var(--tamanho-alvo);
  padding: 0 var(--space-12) 0 var(--space-10);
  gap: var(--space-7);
  font-size: 12px;
}
/* Conta de 32 px. No celular o sino leva .fk-sino--celular (Sino.css): 32 px, pílula de 17 px e balanço próprio. */
.fk-topo--celular .fk-topo__conta {
  width: var(--tamanho-alvo);
  height: var(--tamanho-alvo);
}
/* Saldo em poço (NotificacoesMobile .well.bal): 32 px, raio 10, moeda em --texto-icone, unidade 500 11 px. No celular
   ele leva a Planos (não à conta) e troca a marca F por uma moeda de 14 px. */
.fk-poco.fk-topo__saldo {
  height: var(--tamanho-alvo);
  padding: 0 var(--space-11) 0 var(--space-9);
  gap: var(--space-6);
  border-radius: var(--radius-10);
  color: var(--texto-unidade);
  font: 500 11px/1 var(--font-texto);
}
.fk-poco.fk-topo__saldo > svg { flex: none; color: var(--texto-icone); }

/* Véu: a barra fica parada enquanto a página rola; quando o conteúdo passa por baixo ela ganha um véu escuro de 84 px
   (topo + 20) que some para baixo. O consumidor fixa a barra (position: fixed ou sticky) e liga --rolado. */
.fk-topo--veu { position: relative; }
.fk-topo--veu > * { position: relative; z-index: 1; }
.fk-topo--veu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--tamanho-topo) + var(--space-20));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent) 0, color-mix(in srgb, var(--bg) 92%, transparent) 62%, color-mix(in srgb, var(--bg) 0%, transparent));
  opacity: 0;
  pointer-events: none;
  /* 350 ms do canvas = --duracao-hover + --duracao-rapida. */
  transition: opacity calc(var(--duracao-hover) + var(--duracao-rapida)) var(--curva-opacidade);
}
.fk-topo--rolado::before { opacity: 1; }

/* ── Menos movimento: o saldo troca no lugar e o véu aparece sem transição (o sino cuida do seu em Sino.css). ─── */
@media (prefers-reduced-motion: reduce) {
  .fk-topo__local a, .fk-topo--veu::before { transition: none; }
  .fk-topo__saldo--muda .fk-topo__saldo-valor { animation: none; }
}