/* =============================================================================
   GranaFlow · gf-seal.css — Design System v1.1
   -----------------------------------------------------------------------------
   FONTE ÚNICA do selo de confiança (.gfm-seal · .gfm-seal-strip).

   Por que folha PRÓPRIA e não dentro do gf-marketing.css
   -----------------------------------------------------
   O selo é a única peça do bloco de segurança que o APP consome (#267): ele
   aparece no cadastro e em Configurações → Criptografia, não só na landing.
   O gf-marketing.css tem 45 KB (11 KB gz) de hero, planos, rodapé e depoimento
   — vendorizar a folha inteira na biblioteca React para usar 1,5 KB dela
   colocaria todo o CSS de marketing no boot do app, sem nenhum consumidor.

   É o mesmo caso do gf-empty.css: peça compartilhada por dois mundos que não
   compartilham build (Vite × HTML puro) ganha folha própria em design/css/,
   e as cópias são GERADAS por `npm run design:sync`:
     - landing estática ..... app/landing/assets/gf-seal.css   (<link>)
     - biblioteca React ..... app/src/ui/vendor/gf-seal.css    (import)
   Os pares estão em scripts/sync-design.mjs e travados byte a byte por
   app/src/designSync.test.js. NUNCA edite uma cópia — edite este arquivo.

   O bloco .gfm-trust (que só a landing usa) continua no gf-marketing.css.

   Regras que este componente carrega
   ----------------------------------
   1. Confiança NÃO é verde. O reflexo "cadeado verde = seguro" quebra a
      invariante do produto: verde é receita, ponto. O selo comunica em
      navy + azul + ouro.
   2. Cada selo afirma ARQUITETURA ("criptografia ponta a ponta", "dados no
      aparelho"), nunca CERTIFICAÇÃO ("certificado LGPD", "ISO 27001") — o
      segundo cria exposição jurídica.
   3. Todo selo com afirmação exige um href de sustentação. Sem documento que
      sustente, o selo não entra. Selo sem link vira <span> e não muda o layout.
   4. Zero cor literal: tudo via var(--gf-*) / var(--r-*) / var(--sp-*).

   Catálogo navegável: design/markup/trust.html
   ========================================================================== */

.gfm-seal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  background: var(--gf-on-brand-line);
  color: var(--gf-on-brand);
}
.gfm-seal svg { width: 14px; height: 14px; flex: none; }
.gfm-seal--pill { /* forma padrão; existe como nome explícito p/ o wrapper React */ }
.gfm-seal--on-surface { background: var(--gf-gold-soft); color: var(--gf-navy); }
/* --gf-brand-ink, não --gf-blue: o ink É o par documentado de blue-soft (4,8:1
   claro · 5,5:1 escuro, design/tokens/colors.md). Com --gf-blue o selo media
   4,0:1 no tema ESCURO — abaixo do AA para 12px, mesmo em peso 700. Não
   aparecia na landing porque lá a variante --brand só é usada em página clara;
   apareceu quando o app passou a usar o selo (#267). No tema claro os dois
   valores são o mesmo #1E63D6, então nada muda no site. */
.gfm-seal--brand      { background: var(--gf-blue-soft); color: var(--gf-brand-ink); }
a.gfm-seal:focus-visible { outline: none; box-shadow: var(--gf-focus-ring-on-brand); }
a.gfm-seal--on-surface:focus-visible,
a.gfm-seal--brand:focus-visible { box-shadow: var(--gf-focus-ring); }
@media (hover: hover) { a.gfm-seal:hover { filter: brightness(1.08); } }

.gfm-seal--stacked {
  flex-direction: column;
  gap: var(--sp-4);
  text-align: center;
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6);
  font-size: var(--fs-base);
}
.gfm-seal--stacked svg { width: 26px; height: 26px; }

.gfm-seal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
@media (min-width: 768px) { .gfm-seal-strip--center { justify-content: center; } }