/* =========================================================
   Loomah Links — componentes do cartão
   =========================================================

   Portado de `assets/css/card.css` do cartão estático (v2.2.1),
   consumindo o Loomah Design System v3.13.0.

   As classes .nfc-* foram MANTIDAS de propósito. Renomear para .llk-*
   daria coerência de prefixo e custaria compatibilidade: um cartão
   exportado daqui deixaria de abrir no projeto estático, e vice-versa.
   O prefixo .llk-* fica só para o que é novo no plugin.

   Diferença em relação ao original: as regras de `body` agora exigem
   `body.llk-pagina`. No estático o cartão era a página inteira; aqui
   ele também pode ser um shortcode dentro de uma página que já tem
   fundo, respiro e tema próprios — e reescrever o body do cliente
   seria invasão, não estilo.

   Regras que este arquivo respeita:

   1. Nenhuma cor, medida, raio, sombra ou duração é escrita em valor
      bruto. Tudo vem de --lm-*. Token que falta é criado como
      --lm-nfc-* na camada lm.tokens, nunca hardcoded no seletor.

   2. A tese do DS vale: a estrutura é preto e branco. A ação primária
      é o preto quente (--lm-action-bg). O acento institucional aparece
      em faixa, selo, tinta de ícone, tag e anel de foco — nunca
      substitui a estrutura de ação.

      Exceção controlada: com `tema.acaoUsaAcento: true`, o botão
      primário passa a usar .lm-btn-accent. É uma saída deliberada
      da tese, não o padrão.
   ========================================================= */

@layer lm.tokens {
  :root {
    /* Nível 3 — componente: cartão NFC */
    --lm-nfc-width: 30rem;
    --lm-nfc-hero-height: 12.5rem;
    --lm-nfc-avatar: 8.5rem;
    --lm-nfc-avatar-radius: var(--lm-radius-full);
    --lm-nfc-avatar-ring: var(--lm-space-1-5);
    --lm-nfc-icon-box: 2.75rem;
    --lm-nfc-accent-band: var(--lm-space-1);
    --lm-nfc-dock-size: 3rem;
    --lm-nfc-hero-overlay: 0.88;
    --lm-nfc-hero-position: center;
    --lm-nfc-hero-angle: 150deg;
    /* `auto` nao impoe proporcao: a capa fica com a altura fixa do token
       acima. Um valor tipo `16/9` inverte a logica — a altura passa a
       acompanhar a largura. */
    --lm-nfc-hero-ratio: auto;
    /* Reserva para o avatar, que sobe metade da propria altura sobre a capa.
       Token porque numa capa baixa ele tem de encolher junto: 4rem fixos
       dentro de uma capa de 6rem empurram a marca do topo para fora. */
    --lm-nfc-hero-pad-end: var(--lm-space-16);

    /* --------------------------------------------------------------
       Tokens de personalização (Loomah Links).

       Cada um recebe como padrão exatamente o valor que estava escrito
       à mão na regra correspondente — então declarar estes tokens NÃO
       muda nada visualmente. Eles existem para que a tela de Aparência
       tenha onde escrever: sem eles, "controlar cores e tamanhos" viria
       como CSS solto por cima, com !important, competindo com a cascata
       do design system.
       -------------------------------------------------------------- */
    --lm-nfc-escala: 100%;
    --lm-nfc-borda: 1px;
    --lm-nfc-sombra: var(--lm-shadow-xl);
    --lm-nfc-body-pad: var(--lm-space-6);
    --lm-nfc-section-gap: var(--lm-space-7);
    --lm-nfc-item-gap: var(--lm-space-2);
    --lm-nfc-item-min: 0px;
    /* Quantas linhas o rotulo de um item pode ocupar antes de reticencias.
       Antes o rotulo era sempre uma linha so (`nowrap`), o que transformava
       titulo longo em texto cortado — ou, quando algum ancestral perdia o
       `min-inline-size: 0`, em barra de rolagem horizontal na pagina toda.
       Agora quebra. Suba para 3 se o cliente usa titulos longos de proposito. */
    --lm-nfc-rotulo-linhas: 2;
    --lm-nfc-legenda-linhas: 2;
    --lm-nfc-icon-radius: var(--lm-radius-md);
    --lm-nfc-nome-size: var(--lm-font-size-2xl);
    --lm-nfc-dock-bg: var(--lm-surface-inverse);
    --lm-nfc-dock-fg: var(--lm-text-inverse);
    --lm-nfc-grao: 0.3;
  }
}

@layer lm.base {
  body.llk-pagina {
    font-size: var(--lm-nfc-escala);
    min-block-size: 100svh;
    background: var(--lm-surface-page);
    padding: var(--lm-space-6) var(--lm-space-4)
             calc(var(--lm-space-10) + env(safe-area-inset-bottom));
    /* Rede de seguranca, nao a correcao: a correcao esta nas regras de quebra
       de texto mais abaixo. Isto existe porque um tema de terceiros, um
       shortcode dentro de pagina alheia ou uma URL colada sem espacos podem
       criar largura que nao e nossa. `clip` em vez de `hidden` para nao
       destruir `position: sticky` do dock. */
    overflow-x: clip;
    max-inline-size: 100%;
  }

  /* Nenhum bloco da composicao pode exigir mais largura do que tem.
     Um unico flex ou grid item sem `min-inline-size: 0` basta para empurrar
     a pagina inteira, e o sintoma aparece longe da causa. */
  .nfc-shell,
  .nfc-card,
  .nfc-body,
  .nfc-section,
  .nfc-list,
  .nfc-links,
  .nfc-row,
  .nfc-link {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  /* Grão: assinatura do DS em superfícies grandes e vazias. */
  body.llk-pagina::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--lm-grain-image);
    background-size: 120px 120px;
    opacity: var(--lm-nfc-grao);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  [data-lm-theme="dark"] body.llk-pagina::before { mix-blend-mode: screen; opacity: 0.1; }
}

@layer lm.components {

  /* ---------- Estrutura ---------- */
  .nfc-shell {
    position: relative;
    z-index: var(--lm-z-base);
    /* Duas declaracoes em vez de `inline-size: min(100%, var(...))`.
       Com a forma antiga, um token invalido derrubava a funcao `min()`
       inteira, `inline-size` voltava para `auto` e o cartao ocupava a tela
       toda — falha total a partir de um valor errado num campo. Separadas,
       o pior caso e o cartao ficar sem teto de largura, mantendo tudo o
       mais no lugar. */
    inline-size: 100%;
    max-inline-size: var(--lm-nfc-width);
    margin-inline: auto;
  }

  .nfc-card {
    overflow: hidden;
    border: var(--lm-nfc-borda) solid var(--lm-card-border);
    border-radius: var(--lm-radius-container);
    background: var(--lm-card-bg);
    box-shadow: var(--lm-nfc-sombra);
    animation: nfc-rise var(--lm-duration-slow) var(--lm-ease-entrance) both;
  }
  @keyframes nfc-rise { from { opacity: 0; translate: 0 var(--lm-space-4); } }

  /* ---------- Capa ---------- */
  .nfc-hero {
    position: relative;
    isolation: isolate;
    /* Era `min-block-size`, e por isso "Altura da capa" so funcionava para
       AUMENTAR. O piso real da capa é a soma do respiro de cima (1,5rem), da
       faixa da marca (~3rem) e do respiro de baixo (4rem): ~8,5rem. Pedir
       6rem não fazia nada — o campo aceitava o valor, gravava, gerava o token
       correto e a tela não mudava. Do lado de fora isso é indistinguível de
       "o controle está quebrado".

       Com `block-size` a altura pedida é a altura entregue. O respiro de
       baixo virou token para acompanhar: ele existe para o avatar não cobrir
       a marca do topo, e numa capa baixa precisa encolher junto. */
    block-size: var(--lm-nfc-hero-height);
    /* Com `auto` (o padrao) nao faz nada, e a altura acima manda. Com uma
       razao, a capa acompanha a largura — e `aspect-ratio` cede para o
       conteudo, entao marca e selo nunca sao cortados por causa dela. */
    aspect-ratio: var(--lm-nfc-hero-ratio);
    padding: var(--lm-space-6) var(--lm-space-6) var(--lm-nfc-hero-pad-end);
    background-color: var(--lm-surface-inverse);
    background-position: var(--lm-nfc-hero-position);
    background-size: cover;
    color: var(--lm-text-inverse);
  }
  .nfc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      var(--lm-nfc-hero-angle),
      var(--lm-surface-inverse),
      color-mix(in srgb, var(--lm-surface-inverse) 80%, var(--lm-accent-900))
    );
    opacity: var(--lm-nfc-hero-overlay);
  }
  .nfc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--lm-grain-image);
    background-size: 120px 120px;
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  /* Faixa de acento: identifica a instituição sem colorir a estrutura.
     Mesmo princípio de .lm-card-accent no DS. */
  .nfc-hero-band {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--lm-nfc-accent-band);
    background: var(--lm-accent-400);
    z-index: 1;
  }

  .nfc-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-4);
    min-inline-size: 0;
    min-block-size: var(--lm-size-control-lg);
  }
  /* Marca com texto longo dividia a capa com o selo NFC ate o selo sumir do
     lado direito. Cada um fica com no maximo metade e quebra dentro de si. */
  .nfc-hero-top > * { min-inline-size: 0; }

  .nfc-brand {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--lm-size-control-lg);
    block-size: var(--lm-size-control-lg);
    padding-inline: var(--lm-space-3);
    border-radius: var(--lm-radius-md);
    background: var(--lm-surface-raised);
    color: var(--lm-text-strong);
    font-family: var(--lm-font-family-display);
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-bold);
    letter-spacing: var(--lm-letter-spacing-tight);
    box-shadow: var(--lm-shadow-md);
    overflow: hidden;
    max-inline-size: min(60%, 14rem);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nfc-brand img { block-size: var(--lm-size-icon-xl); inline-size: auto; object-fit: contain; display: block; }
  .nfc-brand.is-bare { background: none; box-shadow: none; padding: 0; }
  .nfc-brand.is-bare img { block-size: 2.5rem; }

  .nfc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    padding: var(--lm-space-2) var(--lm-space-3);
    border-radius: var(--lm-radius-full);
    border: 1px solid var(--lm-border-inverse);
    background: rgb(255 255 255 / 0.12);
    color: inherit;
    font-size: var(--lm-font-size-2xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-letter-spacing-caps);
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    max-inline-size: 100%;
  }
  .nfc-chip i { font-size: var(--lm-size-icon-sm); color: var(--lm-accent-300); flex: none; }
  .nfc-chip span { min-inline-size: 0; overflow-wrap: break-word; }

  /* ---------- Avatar ---------- */
  .nfc-avatar-wrap {
    position: relative;
    z-index: var(--lm-z-raised);
    display: flex;
    justify-content: center;
    margin-block-start: calc(var(--lm-nfc-avatar) / -2);
  }
  .nfc-avatar {
    inline-size: var(--lm-nfc-avatar);
    block-size: var(--lm-nfc-avatar);
    border-radius: var(--lm-nfc-avatar-radius);
    object-fit: cover;
    border: var(--lm-nfc-avatar-ring) solid var(--lm-card-bg);
    background: var(--lm-surface-sunken);
    box-shadow: var(--lm-shadow-lg);
  }

  /* ---------- Identidade ---------- */
  .nfc-body {
    padding: calc(var(--lm-nfc-body-pad) * 0.85) var(--lm-nfc-body-pad) var(--lm-nfc-body-pad);
  }
  .nfc-body.no-avatar { padding-block-start: var(--lm-space-7); }

  .nfc-identity { text-align: center; margin-block-end: var(--lm-space-6); }
  .nfc-identity h1 {
    margin: 0;
    font-family: var(--lm-font-family-display);
    font-size: var(--lm-nfc-nome-size);
    font-weight: var(--lm-font-weight-bold);
    letter-spacing: var(--lm-letter-spacing-display);
    line-height: var(--lm-line-height-tight);
    color: var(--lm-text-strong);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .nfc-role, .nfc-org, .nfc-bio, .nfc-tag, .nfc-section-title, .nfc-section-note {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .nfc-role {
    margin: var(--lm-space-2) 0 0;
    color: var(--lm-text-accent);
    font-weight: var(--lm-font-weight-semibold);
    font-size: var(--lm-font-size-md);
  }
  .nfc-org {
    margin: var(--lm-space-1) 0 0;
    color: var(--lm-text-muted);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-medium);
  }
  .nfc-bio {
    margin: var(--lm-space-3) auto 0;
    max-inline-size: var(--lm-size-prose);
    color: var(--lm-text-muted);
    line-height: var(--lm-line-height-base);
    font-size: var(--lm-font-size-base);
  }

  .nfc-tags {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--lm-space-2);
    margin-block-start: var(--lm-space-4);
  }
  .nfc-tag {
    padding: var(--lm-space-1) var(--lm-space-3);
    border-radius: var(--lm-radius-full);
    border: 1px solid var(--lm-accent-border);
    background: var(--lm-accent-tint);
    color: var(--lm-accent-tint-fg);
    font-size: var(--lm-font-size-2xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-letter-spacing-wide);
  }

  /* ---------- Ações ---------- */
  .nfc-actions {
    display: grid;
    grid-template-columns: repeat(var(--lm-nfc-actions-cols, 2), minmax(0, 1fr));
    gap: var(--lm-space-3);
  }
  .nfc-actions .lm-btn { block-size: var(--lm-btn-height-lg); font-size: var(--lm-font-size-base); }
  .nfc-actions .lm-btn { min-inline-size: 0; }
  .nfc-actions .lm-btn span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .nfc-actions .is-wide { grid-column: 1 / -1; }

  /* ---------- Seção ---------- */
  .nfc-section { margin-block-start: var(--lm-nfc-section-gap); }
  .nfc-section-title {
    margin: 0 0 var(--lm-space-3);
    font-size: var(--lm-font-size-2xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-letter-spacing-caps);
    text-transform: uppercase;
    color: var(--lm-text-muted);
  }
  .nfc-section-note {
    margin: calc(var(--lm-space-2) * -1) 0 var(--lm-space-3);
    color: var(--lm-text-subtle);
    font-size: var(--lm-font-size-xs);
    line-height: var(--lm-line-height-snug);
  }

  /* ---------- Linhas de link ---------- */
  .nfc-list { display: grid; gap: var(--lm-nfc-item-gap); }

  .nfc-row {
    display: flex;
    align-items: center;
    gap: var(--lm-space-4);
    inline-size: 100%;
    min-block-size: var(--lm-nfc-item-min);
    padding: var(--lm-space-3);
    border: var(--lm-nfc-borda) solid var(--lm-border-subtle);
    border-radius: var(--lm-radius-md);
    background: var(--lm-surface-raised);
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--lm-shadow-xs);
    transition: border-color var(--lm-duration-fast) var(--lm-ease-standard),
                box-shadow var(--lm-duration-fast) var(--lm-ease-standard),
                translate var(--lm-duration-fast) var(--lm-ease-standard);
  }
  .nfc-row:hover {
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow-md);
    translate: 0 -1px;
    text-decoration: none;
  }
  .nfc-row:active { translate: 0 1px; box-shadow: var(--lm-shadow-xs); }
  .nfc-row:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }

  .nfc-icon {
    display: grid;
    place-items: center;
    inline-size: var(--lm-nfc-icon-box);
    block-size: var(--lm-nfc-icon-box);
    border-radius: var(--lm-nfc-icon-radius);
    flex: none;
    border-radius: var(--lm-radius-sm);
    background: var(--_ic-bg, var(--lm-action-tint));
    color: var(--_ic-fg, var(--lm-text-strong));
    overflow: hidden;
  }
  .nfc-icon i { font-size: var(--lm-size-icon-md); }
  .nfc-icon img { inline-size: var(--lm-size-icon-md); block-size: var(--lm-size-icon-md); object-fit: contain; }
  /* Miniatura no lugar do ícone (1.8.3). Ocupa a caixa inteira. */
  .nfc-icon.nfc-icon-thumb { background: var(--lm-surface-sunken, var(--lm-action-tint)); }
  .nfc-icon.nfc-icon-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .nfc-btn-thumb {
    inline-size: 1.5em;
    block-size: 1.5em;
    border-radius: var(--lm-radius-xs, 4px);
    object-fit: cover;
    flex: none;
  }

  .nfc-row-copy { min-inline-size: 0; flex: 1; }
  .nfc-row-copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lm-nfc-rotulo-linhas);
    line-clamp: var(--lm-nfc-rotulo-linhas);
    overflow: hidden;
    font-size: var(--lm-font-size-base);
    font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-text-strong);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .nfc-row-copy span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lm-nfc-legenda-linhas);
    line-clamp: var(--lm-nfc-legenda-linhas);
    margin-block-start: var(--lm-space-05);
    color: var(--lm-text-muted);
    font-size: var(--lm-font-size-xs);
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .nfc-row > i:last-child { font-size: var(--lm-size-icon-sm); color: var(--lm-text-subtle); flex: none; }

  /* ---------- Redes ---------- */
  .nfc-social {
    display: grid;
    grid-template-columns: repeat(var(--lm-nfc-social-cols, 4), minmax(0, 1fr));
    gap: var(--lm-space-2);
  }
  .nfc-social-link {
    display: grid;
    place-items: center;
    gap: var(--lm-space-1);
    aspect-ratio: 1;
    border: 1px solid var(--lm-border-subtle);
    border-radius: var(--lm-radius-md);
    background: var(--_sc-bg, var(--lm-surface-raised));
    color: var(--_sc-fg, var(--lm-text-strong));
    text-decoration: none;
    box-shadow: var(--lm-shadow-xs);
    transition: translate var(--lm-duration-fast) var(--lm-ease-standard),
                box-shadow var(--lm-duration-fast) var(--lm-ease-standard),
                border-color var(--lm-duration-fast) var(--lm-ease-standard);
  }
  .nfc-social-link:hover { translate: 0 -2px; box-shadow: var(--lm-shadow-md); border-color: var(--lm-border-strong); }
  .nfc-social-link:active { translate: 0 1px; }
  .nfc-social-link:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }
  .nfc-social-link i { font-size: var(--lm-size-icon-lg); }
  .nfc-social-link small {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: var(--lm-font-size-2xs);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-letter-spacing-caps);
    text-transform: uppercase;
    color: var(--lm-text-muted);
  }
  .nfc-social.is-labelled .nfc-social-link { aspect-ratio: auto; padding-block: var(--lm-space-4); }

  /* ---------- Galeria ---------- */
  .nfc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lm-space-2); }
  .nfc-gallery.has-titles { gap: var(--lm-space-3) var(--lm-space-2); }

  /* Cartão de imagem: comum à grade e ao carrossel. */
  .nfc-gallery-card,
  .nfc-carousel-card {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    margin: 0;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
  }
  .nfc-media {
    display: block;
    aspect-ratio: var(--nfc-gallery-ratio, 1 / 1);
    overflow: hidden;
    border-radius: var(--lm-radius-sm);
    background: var(--lm-surface-sunken);
  }
  .nfc-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }
  .nfc-media-title {
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-semibold);
    line-height: var(--lm-line-height-tight, 1.3);
    color: var(--lm-text-strong);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nfc-gallery .nfc-media-title { font-size: var(--lm-font-size-xs); }
  a.nfc-gallery-card:focus-visible,
  a.nfc-carousel-card:focus-visible { outline: none; }
  a.nfc-gallery-card:focus-visible .nfc-media,
  a.nfc-carousel-card:focus-visible .nfc-media { box-shadow: var(--lm-focus-ring); }
  @media (hover: hover) {
    a.nfc-gallery-card:hover .nfc-media img,
    a.nfc-carousel-card:hover .nfc-media img { transform: scale(1.03); }
    .nfc-media img { transition: transform var(--lm-duration-base, 200ms) var(--lm-ease-standard, ease); }
  }

  /* ---------- Carrossel (1.8.4) ----------
     Base no .lm-carousel do DS; aqui só o ajuste para a largura estreita
     do cartão. A largura do item vem inline, calculada no servidor. */
  .nfc-carousel { --nfc-carousel-gap: var(--lm-space-3); }
  .nfc-carousel .lm-carousel-track {
    gap: var(--nfc-carousel-gap);
    grid-auto-columns: var(--lm-carousel-item);
    scroll-padding-inline: 0;
    padding-block: var(--lm-space-1);
  }
  .nfc-carousel.no-drag .lm-carousel-track { overflow-x: hidden; touch-action: pan-y; }
  .nfc-carousel.is-dragging .lm-carousel-track { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
  .nfc-carousel.is-dragging a,
  .nfc-carousel.is-soltando a { pointer-events: none; }
  .nfc-carousel[data-llk-arrasto="1"] .lm-carousel-track { cursor: grab; }
  .nfc-carousel .lm-carousel-track:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); border-radius: var(--lm-radius-sm); }
  /* Navegação em três colunas: as bolinhas ficam no centro real, mesmo
     com pausa e seta do mesmo lado (1.8.6). */
  .nfc-carousel-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--lm-space-2);
    margin-block-start: var(--lm-space-3);
  }
  .nfc-carousel-inicio { grid-column: 1; justify-self: start; display: flex; }
  .nfc-carousel-nav .lm-carousel-dots,
  .nfc-carousel-spacer { grid-column: 2; margin-inline: 0; }
  .nfc-carousel-fim { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--lm-space-2); }

  /* Bolinhas (1.8.6). O DS aplica altura mínima de toque (44px) a todo
     <button> em tela de toque, e a bolinha virava uma pílula alta. Aqui o
     botão é só a área de toque, transparente; o desenho fica no ::before. */
  .nfc-carousel .lm-carousel-dots { display: flex; align-items: center; gap: 0; }
  .nfc-carousel .lm-carousel-dot {
    appearance: none;
    display: inline-grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.75rem;
    min-block-size: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: inline-size var(--lm-duration-base, 200ms) var(--lm-ease-emphasized, ease);
  }
  .nfc-carousel .lm-carousel-dot::before {
    content: "";
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--lm-radius-full, 999px);
    background: var(--lm-border-strong);
    transition: inline-size var(--lm-duration-base, 200ms) var(--lm-ease-emphasized, ease), background var(--lm-duration-fast, 120ms) var(--lm-ease-standard, ease);
  }
  .nfc-carousel .lm-carousel-dot[aria-current="true"] {
    inline-size: 2rem;
    border-radius: 0;
    background: transparent;
  }
  .nfc-carousel .lm-carousel-dot[aria-current="true"]::before {
    inline-size: 1.5rem;
    background: var(--lm-action-bg);
  }
  .nfc-carousel .lm-carousel-dot:focus-visible { outline: none; box-shadow: none; }
  .nfc-carousel .lm-carousel-dot:focus-visible::before { box-shadow: var(--lm-focus-ring); }
  @media (pointer: coarse) {
    /* Área de toque maior sem mudar o desenho. */
    .nfc-carousel .lm-carousel-dot { inline-size: 1.5rem; block-size: 2.75rem; min-block-size: 2.75rem; min-height: 2.75rem; }
    .nfc-carousel .lm-carousel-dot[aria-current="true"] { inline-size: 2.25rem; }
  }
  .nfc-carousel-nav [hidden] { display: none !important; }
  .nfc-carousel .lm-carousel-arrow[hidden] { display: inline-flex !important; visibility: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .nfc-carousel .lm-carousel-track { scroll-behavior: auto; }
  }

  /* ---------- Texto livre ---------- */
  .nfc-prose { color: var(--lm-text-muted); line-height: var(--lm-line-height-base); font-size: var(--lm-font-size-base); }
  .nfc-prose p { margin: 0 0 var(--lm-space-3); }
  .nfc-prose p:last-child { margin-block-end: 0; }
  .nfc-prose strong { color: var(--lm-text-strong); font-weight: var(--lm-font-weight-semibold); }
  .nfc-prose a { color: var(--lm-text-link); text-underline-offset: 3px; }
  .nfc-prose a:hover { color: var(--lm-text-link-hover); }

  /* ---------- Horários ---------- */
  .nfc-hours { display: grid; gap: var(--lm-space-1); }
  .nfc-hours-row {
    display: flex; justify-content: space-between; gap: var(--lm-space-3);
    padding: var(--lm-space-2-5) var(--lm-space-3);
    border: 1px solid transparent;
    border-radius: var(--lm-radius-sm);
    background: var(--lm-surface-sunken);
    font-size: var(--lm-font-size-sm);
  }
  .nfc-hours-row strong { font-weight: var(--lm-font-weight-medium); color: var(--lm-text-strong); }
  .nfc-hours-row span { color: var(--lm-text-muted); }
  .nfc-hours-row.is-today {
    background: var(--lm-accent-tint);
    border-color: var(--lm-accent-border);
    color: var(--lm-accent-tint-fg);
  }
  .nfc-hours-row.is-today :is(strong, span) { color: inherit; }

  /* ---------- Rodapé ---------- */
  .nfc-footer {
    margin-block-start: var(--lm-space-8);
    padding-block-start: var(--lm-space-6);
    border-block-start: 1px solid var(--lm-border-subtle);
    text-align: center;
  }
  .nfc-footer-note {
    margin: 0 0 var(--lm-space-5);
    color: var(--lm-text-subtle);
    font-size: var(--lm-font-size-xs);
    line-height: var(--lm-line-height-snug);
  }
  .nfc-footer-fixed {
    margin: 0 0 var(--lm-space-4);
    color: var(--lm-text-subtle);
    font-size: var(--lm-font-size-xs);
    line-height: var(--lm-line-height-snug);
    opacity: .85;
  }
  .nfc-vk { display: inline-flex; flex-direction: column; align-items: center; gap: var(--lm-space-2); }
  .nfc-vk-logo {
    display: inline-flex;
    opacity: 0.4;
    border-radius: var(--lm-radius-xs);
    transition: opacity var(--lm-duration-fast) var(--lm-ease-standard);
  }
  .nfc-vk-logo:hover { opacity: 0.9; }
  .nfc-vk-logo:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); opacity: 0.9; }
  .nfc-vk-logo img { block-size: var(--lm-space-6); inline-size: auto; display: block; }
  .nfc-vk-cta {
    color: var(--lm-text-subtle);
    font-size: var(--lm-font-size-2xs);
    text-decoration: none;
    border-block-end: 1px dashed currentColor;
    padding-block-end: 1px;
    transition: color var(--lm-duration-fast) var(--lm-ease-standard);
  }
  .nfc-vk-cta:hover { color: var(--lm-text-accent); }
  .nfc-vk-cta:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }

  /* ---------- Barra flutuante ---------- */
  .nfc-dock {
    position: fixed;
    z-index: var(--lm-z-sticky);
    inset-inline-start: 50%;
    inset-block-end: max(var(--lm-space-4), env(safe-area-inset-bottom));
    translate: -50% 0;
    display: flex;
    gap: var(--lm-space-1);
    padding: var(--lm-space-1-5);
    border-radius: var(--lm-radius-full);
    background: var(--lm-nfc-dock-bg);
    box-shadow: var(--lm-shadow-xl);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lm-duration-base) var(--lm-ease-entrance);
  }
  .nfc-dock.is-visible { opacity: 1; pointer-events: auto; }
  .nfc-dock :is(button, a) {
    display: inline-grid;
    place-items: center;
    flex: none;                 /* sem isso o flex encolhe o alvo abaixo de 44px */
    inline-size: var(--lm-nfc-dock-size);
    block-size: var(--lm-nfc-dock-size);
    border: 0;
    border-radius: var(--lm-radius-full);
    background: transparent;
    color: var(--lm-nfc-dock-fg);
    cursor: pointer;
    transition: background var(--lm-duration-fast) var(--lm-ease-standard);
  }
  .nfc-dock :is(button, a):hover { background: var(--lm-border-inverse); }
  .nfc-dock :is(button, a):focus-visible { outline: none; box-shadow: var(--lm-focus-ring-inverse); }
  .nfc-dock button i { font-size: var(--lm-size-icon-md); }
  .nfc-dock .is-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    inline-size: auto;
    padding-inline: var(--lm-space-5);
    background: var(--lm-surface-raised);
    color: var(--lm-text-strong);
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-semibold);
  }
  .nfc-dock .is-cta:hover { background: var(--lm-ink-100); }

  /* ---------- Toast: reposicionado acima da dock ---------- */
  .nfc-toast-region {
    position: fixed;
    z-index: var(--lm-z-toast);
    inset-inline-start: 50%;
    translate: -50% 0;
    inset-block-end: calc(var(--lm-nfc-dock-size) + var(--lm-space-8) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-2);
    inline-size: min(24rem, calc(100vw - var(--lm-space-8)));
    pointer-events: none;
  }

  /* ---------- Carregamento e erro ---------- */
  .nfc-boot {
    display: grid;
    place-items: center;
    gap: var(--lm-space-4);
    min-block-size: 70svh;
    padding: var(--lm-space-6);
    text-align: center;
    color: var(--lm-text-muted);
    font-size: var(--lm-font-size-base);
    line-height: var(--lm-line-height-base);
  }
  .nfc-boot p { margin: 0; max-inline-size: 34rem; }
  .nfc-spinner {
    inline-size: var(--lm-size-icon-xl);
    block-size: var(--lm-size-icon-xl);
    border: 3px solid var(--lm-border-default);
    border-block-start-color: var(--lm-accent-400);
    border-radius: var(--lm-radius-full);
    animation: nfc-spin var(--lm-duration-slower) linear infinite;
  }
  @keyframes nfc-spin { to { rotate: 360deg; } }
  .nfc-boot.is-error > i { font-size: var(--lm-font-size-3xl); color: var(--lm-warning-icon); }
  .nfc-boot code {
    display: inline-block;
    padding: var(--lm-space-05) var(--lm-space-2);
    border-radius: var(--lm-radius-xs);
    background: var(--lm-surface-sunken);
    font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-text-default);
  }

  /* ---------- QR ---------- */
  .nfc-qr {
    display: grid;
    place-items: center;
    min-block-size: 15rem;
    margin-block: var(--lm-space-5);
    padding: var(--lm-space-3);
    border: 1px solid var(--lm-border-subtle);
    border-radius: var(--lm-radius-md);
    background: #FFFFFF;
  }
  .nfc-qr :is(img, canvas) { display: block; }
}

@layer lm.overrides {

  /* Mobile: o cartão ocupa a tela inteira, sem moldura. */
  @media (max-width: 30rem) {
    body { padding: 0; background: var(--lm-card-bg); }
    body.llk-pagina::before { opacity: 0.18; }
    .nfc-shell { inline-size: 100%; }
    .nfc-card { border: 0; border-radius: 0; box-shadow: none; }
    .nfc-body { padding-inline: var(--lm-space-5); padding-block-end: var(--lm-space-20); }
    .nfc-hero { padding-inline: var(--lm-space-5); }
  }

  @media print {
    body.llk-pagina { background: #fff; padding: 0; }
    body.llk-pagina::before, .nfc-dock, .nfc-toast-region, .lm-modal-scrim, .llk-consent { display: none !important; }
    .nfc-card { box-shadow: none; border: 1px solid var(--lm-border-default); }
  }
}

/* =========================================================
   Acréscimos do plugin (não existem no projeto estático)
   ========================================================= */

@layer lm.components {

  /* ---------------------------------------------------------
     Banner de consentimento

     Empilha ACIMA da dock lendo `--lm-nfc-dock-size`, em vez de um
     `bottom` chutado: se o cliente mudar a altura da dock na aba
     Aparência, o banner acompanha sozinho.

     Zero cor literal. A caixa usa as superfícies do cartão e o botão
     usa `--lm-action-bg` — não `--lm-accent-600`. A tese do design
     system é que a estrutura é preto e branco e a cor é expressão da
     instituição: o botão primário só vira acento quando o cliente liga
     `acaoUsaAcento`. Pintar o banner de acento direto o deixaria
     colorido em cartões onde nenhum outro botão é.
     --------------------------------------------------------- */
  .llk-consent {
    position: fixed;
    z-index: var(--lm-z-sticky);
    inset-inline: var(--lm-space-3);
    inset-block-end: calc(var(--lm-nfc-dock-size, 3rem) + var(--lm-space-8) + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .llk-consent[hidden] { display: none; }

  .llk-consent-caixa {
    pointer-events: auto;
    inline-size: 100%;
    max-inline-size: 26rem;
    padding: var(--lm-space-4);
    border: 1px solid var(--lm-card-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-card-bg);
    box-shadow: var(--lm-shadow-xl);
    font-family: var(--lm-font-family-sans);
  }

  .llk-consent-caixa p {
    margin: 0 0 var(--lm-space-3);
    font-size: var(--lm-font-size-xs);
    line-height: var(--lm-line-height-snug);
    color: var(--lm-text-default);
  }

  .llk-consent-caixa a { color: var(--lm-text-muted); }

  .llk-consent-botoes {
    display: flex;
    gap: var(--lm-space-2);
  }

  .llk-consent-botoes .lm-btn { flex: 1 1 0; }

  /* Link de revogação no rodapé do cartão. Botão de verdade, não um <a>
     falso: ele não navega, abre a barra. Aparência de link porque é o que
     a pessoa espera de "rever privacidade" no pé da página. */
  .nfc-privacidade {
    margin: var(--lm-space-3) 0 0;
    text-align: center;
  }

  .nfc-privacidade[hidden] { display: none; }

  .nfc-privacidade button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--lm-font-size-2xs);
    color: var(--lm-text-muted);
    text-decoration: underline;
    cursor: pointer;
  }

}

@layer lm.components {

  /* Raiz de uma instância. Em página dedicada é irrelevante; no
     shortcode é o que dá contexto de empilhamento à dock e ao modal,
     e o que carrega a rampa de cor escopada do cartão. */
  .llk-raiz {
    position: relative;
    z-index: 0;
  }

  /* Shortcode: o cartão é um bloco dentro de uma página que já tem
     respiro próprio, então não empurra layout nem cria fundo. */
  .llk-raiz:not(.llk-pagina .llk-raiz) .nfc-shell {
    margin-inline: auto;
  }

  .llk-rascunho {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--lm-z-toast);
    margin: 0;
    padding: var(--lm-space-2) var(--lm-space-4);
    text-align: center;
    font-size: var(--lm-font-size-sm);
    font-weight: var(--lm-font-weight-medium);
    color: var(--lm-text-inverse);
    background: var(--lm-surface-inverse);
  }
}

@layer lm.overrides {

  /* A dock é fixa na viewport. Dentro do iframe de pré-visualização
     isso é o comportamento certo; numa página de conteúdo com duas
     instâncias, duas docks fixas se sobreporiam — por isso o shortcode
     entrega a dock desligada por padrão (`dock="sim"` para ligar). */
  .llk-raiz + .llk-raiz .nfc-dock {
    display: none;
  }
}

/* =========================================================
   Formato "links" (link-in-bio)
   =========================================================

   Não é um tema alternativo: é outra composição do mesmo conteúdo.
   Quem chega da bio do Instagram já sabe de quem é o perfil — não
   precisa de foto grande nem de cargo. Precisa do próximo toque, o
   maior possível, com o dedo em movimento e uma mão só.

   O alvo tem 3,5rem de altura mínima porque a diretriz de toque é
   44px e este é o único componente da página que existe para ser
   tocado. Reduzir isso para caber mais link na primeira dobra troca
   conversão por inventário.
   ========================================================= */

@layer lm.components {

  .nfc-links {
    display: grid;
    gap: var(--lm-nfc-item-gap);
    margin-block-start: var(--lm-space-5);
  }

  .nfc-link {
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    min-block-size: max(3.5rem, var(--lm-nfc-item-min));
    padding: var(--lm-space-2-5) var(--lm-space-4);
    text-align: start;
    text-decoration: none;
    border: var(--lm-nfc-borda) solid var(--lm-border-default);
    border-radius: var(--lm-radius-control);
    background: var(--lm-surface-raised);
    color: var(--lm-text-strong);
    box-shadow: var(--lm-shadow-xs);
    cursor: pointer;
    font: inherit;
    inline-size: 100%;
    transition:
      translate var(--lm-duration-fast) var(--lm-ease-standard),
      box-shadow var(--lm-duration-fast) var(--lm-ease-standard),
      border-color var(--lm-duration-fast) var(--lm-ease-standard);
  }

  .nfc-link:hover {
    translate: 0 -2px;
    box-shadow: var(--lm-shadow-md);
    border-color: var(--lm-border-strong);
  }

  .nfc-link:active { translate: 0 1px; box-shadow: var(--lm-shadow-xs); }
  .nfc-link:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }

  /* Destaque: a única peça da pilha que pode usar o acento cheio.
     Dois destaques deixam de ser destaque, então o editor coloca o
     marcado no topo e o resto segue neutro. */
  .nfc-link.is-featured {
    border-color: var(--lm-accent-600);
    background: var(--lm-accent-50);
  }

  [data-lm-theme="dark"] .nfc-link.is-featured {
    background: var(--lm-accent-tint, rgb(255 255 255 / 0.06));
    border-color: var(--lm-accent-tint-fg, var(--lm-accent-300));
  }

  .nfc-link-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--lm-nfc-icon-box);
    block-size: var(--lm-nfc-icon-box);
    border-radius: var(--lm-nfc-icon-radius);
    background: var(--lm-surface-sunken);
    color: var(--lm-text-muted);
  }

  .nfc-link-icon i { font-size: var(--lm-size-icon-md); }

  .nfc-link-thumb {
    flex: none;
    inline-size: var(--lm-nfc-icon-box);
    block-size: var(--lm-nfc-icon-box);
    border-radius: var(--lm-nfc-icon-radius);
    overflow: hidden;
    background: var(--lm-surface-sunken);
  }

  .nfc-link-thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .nfc-link-copy { flex: 1; min-inline-size: 0; }

  .nfc-link-copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lm-nfc-rotulo-linhas);
    line-clamp: var(--lm-nfc-rotulo-linhas);
    font-size: var(--lm-font-size-base);
    font-weight: var(--lm-font-weight-semibold);
    line-height: var(--lm-line-height-tight);
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* A legenda costuma ser URL ou @usuario: palavra unica e sem espaco, que
     `break-word` sozinho nao quebra. Dai `anywhere`. */
  .nfc-link-copy span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lm-nfc-legenda-linhas);
    line-clamp: var(--lm-nfc-legenda-linhas);
    font-size: var(--lm-font-size-xs);
    color: var(--lm-text-muted);
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .nfc-link > i:last-child {
    flex: none;
    font-size: var(--lm-size-icon-sm);
    color: var(--lm-text-subtle);
  }
}

@layer lm.overrides {

  /* Ajustes de composição do formato links. A capa vira uma faixa mais
     baixa e a foto encolhe: no link-in-bio o herói é a lista, não o
     retrato — a marca já foi vista no perfil da rede social.

     ATENÇÃO — os dois tokens desta composição (`--lm-nfc-hero-height` e
     `--lm-nfc-avatar`) NÃO moram mais aqui. Eles são escritos por
     LLK_Tema::css, no mesmo bloco em que a aba Aparência escreve.

     O motivo é herança, não especificidade nem `@layer`. A tela de
     Aparência escreve os tokens em `:root`, ou seja, no `<html>`.
     Redeclará-los aqui os redefine em `.llk-raiz`, que é ancestral mais
     próximo do `.nfc-hero` — e a herança para no ancestral mais próximo
     que define a propriedade. O valor de `:root` nunca chegava a ser
     consultado. Efeito prático: "Altura da capa" e "Tamanho da foto"
     simplesmente não funcionavam em cartões no formato links, sem erro
     nenhum, e a mesma tela funcionava no formato cartão.

     Regra que vale para o futuro: token que a Aparência controla não pode
     ser redeclarado em seletor descendente de `:root`. Se um formato
     precisa de outro padrão, o padrão vai para o PHP, antes da Aparência
     na mesma cascata. */
  .llk-formato-links .nfc-identity { margin-block-end: var(--lm-space-4); }
  .llk-formato-links .nfc-identity h1 { font-size: var(--lm-font-size-xl); }
  .llk-formato-links .nfc-bio { font-size: var(--lm-font-size-sm); }

  /* Redes no topo: fileira compacta, não grade de cartões. */
  .llk-formato-links .nfc-body > .nfc-section:first-of-type { margin-block-start: 0; }
  .llk-formato-links .nfc-body > .nfc-section:first-of-type .nfc-section-title { display: none; }

  .llk-formato-links .nfc-social {
    grid-template-columns: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lm-space-2);
  }

  .llk-formato-links .nfc-social-link {
    aspect-ratio: 1;
    inline-size: 2.75rem;
    padding: 0;
  }

  .llk-formato-links .nfc-social-link i { font-size: var(--lm-size-icon-md); }

  /* Seções do formato links: título discreto, sem moldura competindo
     com os botões. */
  .llk-formato-links .nfc-section-title {
    font-size: var(--lm-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--lm-letter-spacing-wide);
    color: var(--lm-text-subtle);
  }
}

/* =========================================================
   Blindagem contra o CSS do tema — FORA de @layer, de propósito
   =========================================================

   Todo o resto deste arquivo vive em camadas, e é assim que deve ser.
   Mas camada tem um custo que só aparece em campo: na cascata, uma
   declaração SEM camada vence QUALQUER camada, independente de
   especificidade. Um `h1 { font-size: 2.5rem }` genérico do tema
   derrota `.nfc-identity h1` do plugin, que tem especificidade muito
   maior. Foi o que fez o título e os títulos de seção saírem enormes
   na página pública e corretos na pré-visualização — o iframe do
   preview não carrega tema nenhum, então lá nunca houve disputa.

   Na página dedicada isso é resolvido na raiz, tirando o CSS do tema
   da fila (LLK_Render::isolar_do_tema). Este bloco existe para os
   casos em que isso não é possível nem desejável:

     - o shortcode, onde o tema TEM de continuar mandando na página
       em volta, mas não dentro do cartão;
     - temas que imprimem CSS direto no `wp_head` sem passar pela
       fila, onde não há o que desenfileirar.

   Escopo mínimo de propósito: só os elementos que temas realmente
   estilizam por tag — títulos e parágrafos. Não é um reset. Cada
   regra aqui repete um valor que já existe acima; duplicação
   consciente, e o comentário é o contrato de manter as duas em dia.
   ========================================================= */

/* A raiz do cartão vem primeiro porque é ela que resolve a maior parte
   do estrago de uma vez. A família tipográfica do design system é
   aplicada em `body { font-family: var(--lm-font-family-sans) }`, dentro
   de `@layer lm.base`. Qualquer tema que declare `body { font-family }`
   — e todos declaram — vence essa regra por não estar em camada, e o
   cartão inteiro passa a ser desenhado na fonte do tema: os rótulos dos
   botões, as legendas, os títulos de seção. A fonte escolhida na aba
   Tema simplesmente não aparecia.

   Reafirmar aqui, na raiz do cartão, faz a herança recomeçar de dentro:
   tudo abaixo de `.llk-raiz` volta a usar os tokens do cartão, e a
   página em volta continua com o tema, que é o certo no shortcode. */
.llk-raiz {
  font-family: var(--lm-font-family-sans);
  font-size: var(--lm-font-size-base);
  font-weight: var(--lm-font-weight-regular);
  line-height: var(--lm-line-height-base);
  color: var(--lm-text-default);
}

.llk-raiz .nfc-identity h1 {
  margin: 0;
  font-family: var(--lm-font-family-display);
  font-size: var(--lm-nfc-nome-size);
  font-weight: var(--lm-font-weight-bold);
  line-height: var(--lm-line-height-tight);
}

/* O formato links reduz o título; sem repetir o override aqui, a regra
   acima venceria a de `lm.overrides` e o link-in-bio voltaria ao tamanho
   do formato cartão. */
.llk-raiz.llk-formato-links .nfc-identity h1 {
  font-size: var(--lm-font-size-xl);
}

.llk-raiz .nfc-section-title {
  margin: 0 0 var(--lm-space-3);
  font-family: var(--lm-font-family-sans);
  font-size: var(--lm-font-size-2xs);
  font-weight: var(--lm-font-weight-semibold);
  letter-spacing: var(--lm-letter-spacing-caps);
  text-transform: uppercase;
  line-height: var(--lm-line-height-normal);
}

.llk-raiz .nfc-brand { font-family: var(--lm-font-family-display); }
.llk-raiz .nfc-bio { font-size: var(--lm-font-size-base); line-height: var(--lm-line-height-base); }
.llk-raiz.llk-formato-links .nfc-bio { font-size: var(--lm-font-size-sm); }
.llk-raiz .nfc-section-note { font-size: var(--lm-font-size-xs); }
.llk-raiz .nfc-footer-note { margin: 0 0 var(--lm-space-5); font-size: var(--lm-font-size-xs); line-height: var(--lm-line-height-snug); }
.llk-raiz .nfc-footer-fixed { margin: 0 0 var(--lm-space-4); font-size: var(--lm-font-size-xs); line-height: var(--lm-line-height-snug); }

.llk-raiz .nfc-role { margin: var(--lm-space-2) 0 0; font-size: var(--lm-font-size-md); }
.llk-raiz .nfc-org { margin: var(--lm-space-1) 0 0; font-size: var(--lm-font-size-sm); }
.llk-raiz .nfc-link-copy strong,
.llk-raiz .nfc-row-copy strong { font-size: var(--lm-font-size-base); }
.llk-raiz .nfc-link-copy span,
.llk-raiz .nfc-row-copy span { font-size: var(--lm-font-size-xs); }

/* SVG como ícone (1.8.9): marca embutida ou arquivo enviado.
   O <i> herda tamanho e cor dos seletores da fonte; o SVG só preenche. */
.llk-raiz i.llk-svg,
i.llk-svg {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  line-height: 1;
  vertical-align: -0.125em;
}
i.llk-svg > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}