/* ---------------------------------------------------------------------------
   Linkaah Widgets — CSS de projeto sobre o Loomah Design System 3.13.0.

   Tudo em `@layer lm.overrides`: nunca compete com a cascata do DS e nunca
   usa `!important`. Os controles do Elementor geram seus proprios seletores
   `{{WRAPPER}} ...` FORA de camada — entao o que o cliente escolhe no painel
   vence este arquivo por construcao, que e' o comportamento desejado.

   As variaveis `--lka-*` sao os pontos de escrita dos controles:
     --lka-halo   cor do halo do hero
     --lka-col    proporcao da coluna de texto do hero
     --lka-capa   cor da capa da previa
     --lka-t      cor corrente do artefato de tema
   -------------------------------------------------------------------------- */


@layer lm.overrides {

  /* Envelope de secao dos widgets. O Elementor ja da o wrapper; esta classe
     e' o alvo dos controles de fundo, respiro e largura. */
  .lka-secao { position: relative; }
  .lka-secao-transparente { background: transparent; }

}

/* ---------------------------------------------------------------------------
   Linkaah — CSS de projeto sobre o Loomah DS 3.13.0
   Tudo em @layer lm.overrides: nunca compete com a cascata do DS,
   nunca usa !important.
   ------------------------------------------------------------------------- */

@layer lm.overrides {

  /* A rampa de acento da marca (--lm-accent-50..900) mora no TEMA, nao aqui.
     Uma cor de marca com duas fontes da verdade e' uma cor de marca que vai
     divergir. Este plugin apenas CONSOME os tokens de acento. */

  /* ---- Marca ---------------------------------------------------------- */

  .lka-marca { display: inline-flex; align-items: center; gap: var(--lm-space-2); color: var(--lm-text-strong); }
  .lka-marca svg { display: block; block-size: 1.375rem; inline-size: auto; }
  .lka-marca-simbolo { block-size: 1.5rem; }

  /* ---- Navbar da landing ---------------------------------------------- */

  /* .lm-navbar do DS e' deliberadamente so' de celular (mobile.css).
     Cabecalho de site publico e' outro componente: este. */
  .lka-nav {
    position: sticky; inset-block-start: 0; z-index: var(--lm-z-sticky);
    border-block-end: 1px solid var(--lm-border-subtle);
  }
  .lka-nav-inner {
    display: flex; align-items: center; gap: var(--lm-space-6);
    min-block-size: 4rem;
  }
  .lka-nav-links { display: flex; align-items: center; gap: var(--lm-space-5); margin-inline-start: auto; }
  .lka-nav-links a:not(.lm-btn) {
    color: var(--lm-text-muted); text-decoration: none;
    font-size: var(--lm-font-size-sm); font-weight: var(--lm-font-weight-medium);
  }
  .lka-nav-links a:not(.lm-btn):hover { color: var(--lm-text-strong); }

  /* Em celular somem os links de ancora, nunca o CTA. */
  @media (max-width: 47.99em) {
    .lka-nav-links a:not(.lm-btn) { display: none; }
  }

  /* ---- Hero ------------------------------------------------------------ */

  .lka-hero-sem-halo { background: none; }

  .lka-hero {
    position: relative;
    /* Halo frio atras do aparelho: separa o palco do fundo sem pintar caixa. */
    background:
      radial-gradient(60rem 40rem at 78% 28%,
        color-mix(in oklab, var(--lka-halo, var(--lm-accent-400)) 14%, transparent), transparent 62%);
  }
  .lka-hero-grid {
    display: grid; gap: var(--lm-space-8);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 62em) {
    .lka-hero-grid {
      grid-template-columns: var(--lka-col, 52%) 1fr;
      gap: var(--lm-space-12);
    }
  }

  .lka-hero h1 {
    font-size: var(--lm-font-size-display-sm);
    line-height: var(--lm-line-height-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lka-hero-sub { font-size: var(--lm-font-size-lg); color: var(--lm-text-muted); max-inline-size: 34rem; }
  .lka-hero-acoes { display: flex; flex-wrap: wrap; gap: var(--lm-space-3); }

  .lka-provas { display: flex; flex-wrap: wrap; gap: var(--lm-space-2) var(--lm-space-5); }
  .lka-prova {
    display: inline-flex; align-items: center; gap: var(--lm-space-2);
    font-size: var(--lm-font-size-sm); color: var(--lm-text-muted);
  }
  .lka-prova i { color: var(--lm-accent-400); font-size: 1.125em; }

  /* ---- Aparelho com o card de exemplo --------------------------------- */

  .lka-palco { display: grid; place-items: center; position: relative; }

  .lka-fone {
    inline-size: min(18.5rem, 80vw);
    aspect-ratio: 9 / 17.8;
    border-radius: 2.25rem;
    padding: var(--lm-space-2);
    background: var(--lm-ink-900);   /* lm-dark-ok: moldura de aparelho nao inverte */
    /* No tema escuro a moldura preta encostaria no fundo preto da pagina. */
    box-shadow: var(--lm-shadow-lg), 0 0 0 1px var(--lm-border-strong);
    position: relative;
  }
  .lka-fone::before {
    content: ""; position: absolute; inset-block-start: var(--lm-space-3);
    inset-inline-start: 50%; translate: -50% 0;
    inline-size: 4.5rem; block-size: 0.375rem; border-radius: var(--lm-radius-full);
    background: rgba(255,255,255,.22); z-index: 2;
  }
  .lka-tela {
    block-size: 100%; border-radius: 1.75rem; overflow: hidden;
    background: var(--lm-surface-page);
    display: flex; flex-direction: column;
  }

  .lka-card-capa {
    block-size: 4.5rem; flex: none; position: relative;
    background:
      radial-gradient(120% 160% at 82% 0%, var(--lka-capa, var(--lm-accent-800)), transparent 58%),
      var(--lm-ink-900);
  }
  .lka-card-corpo {
    padding: 0 var(--lm-space-4) var(--lm-space-3);
    display: flex; flex-direction: column; gap: var(--lm-space-3);
    flex: 1;
  }
  .lka-card-foto {
    inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--lm-radius-full);
    margin-block-start: -2.25rem;
    border: 3px solid var(--lm-surface-page);
    background: var(--lm-accent-100);
    display: grid; place-items: center;
    color: var(--lm-accent-800);
    font-weight: var(--lm-font-weight-bold);
    font-size: var(--lm-font-size-xl);
    flex: none;
    position: relative; z-index: 1;   /* senao a capa cobre a foto */
  }
  .lka-card-nome { font-size: var(--lm-font-size-lg); font-weight: var(--lm-font-weight-semibold); line-height: 1.15; }
  .lka-card-cargo { font-size: var(--lm-font-size-xs); color: var(--lm-text-muted); }

  .lka-card-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lm-space-2); }

  .lka-card-lista { display: flex; flex-direction: column; gap: var(--lm-space-2); }
  .lka-card-item {
    display: flex; align-items: center; gap: var(--lm-space-3);
    padding: var(--lm-space-2) var(--lm-space-3);
    border: var(--lm-border); border-radius: var(--lm-radius-control);
    font-size: var(--lm-font-size-xs);
  }
  .lka-card-item i { font-size: 1.125rem; color: var(--lm-text-muted); flex: none; }
  .lka-card-item strong { font-weight: var(--lm-font-weight-medium); display: block; }
  .lka-card-item span { color: var(--lm-text-subtle); }

  .lka-card-redes { display: flex; gap: var(--lm-space-2); justify-content: center; }
  .lka-card-redes i {
    inline-size: 2rem; block-size: 2rem; border-radius: var(--lm-radius-full);
    display: grid; place-items: center;
    background: var(--lm-surface-sunken); color: var(--lm-text-default);
    font-size: 1rem;
  }

  /* Dock inferior: a barra fixa que o cartao real tem. */
  .lka-card-dock {
    margin-block-start: auto;
    display: flex; gap: var(--lm-space-2); align-items: center;
    padding: var(--lm-space-2);
    border: var(--lm-border); border-radius: var(--lm-radius-full);
    background: var(--lm-surface-raised);
    box-shadow: var(--lm-shadow-sm);
  }
  .lka-card-dock .lm-btn { flex: 1; }
  .lka-card-dock-qr {
    inline-size: 2.25rem; block-size: 2.25rem; flex: none;
    border-radius: var(--lm-radius-full);
    display: grid; place-items: center;
    background: var(--lm-surface-sunken); color: var(--lm-text-default);
  }

  /* Etiqueta da URL sob o aparelho. Endereco longo quebra dentro do chip em
     vez de empurrar a coluna: `linkaah.com/c/cristo-nossa-esperanca` nao cabe
     na largura do aparelho. */
  .lka-url-chip {
    margin-block-start: var(--lm-space-4);
    font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-xs);
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    text-align: center;
  }

}

@layer lm.overrides {

  /* ---- Formato "links" dentro do aparelho ------------------------------
     Espelha o arranjo do plugin quando `tema.formato = links`:
     identidade compacta no topo, redes como fileira de icones, corpo em
     pilha de botoes de largura inteira, dock de compartilhar. */

  .lka-links-topo {
    flex: none;
    padding: var(--lm-space-6) var(--lm-space-4) var(--lm-space-4);
    display: flex; flex-direction: column; align-items: center;
    gap: var(--lm-space-2); text-align: center;
    background:
      radial-gradient(120% 100% at 50% 0%,
        color-mix(in oklab, var(--lm-accent-400) 16%, transparent), transparent 70%);
  }
  .lka-links-marca {
    inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--lm-radius-full);
    display: grid; place-items: center;
    background: var(--lm-action-bg); color: var(--lm-action-fg);
    font-weight: var(--lm-font-weight-bold); font-size: var(--lm-font-size-md);
    letter-spacing: var(--lm-letter-spacing-tight);
  }
  .lka-links-nome { font-size: var(--lm-font-size-md); font-weight: var(--lm-font-weight-semibold); line-height: 1.2; }
  .lka-links-linha { font-size: var(--lm-font-size-2xs); color: var(--lm-text-muted); }
  .lka-links-redes { display: flex; gap: var(--lm-space-3); margin-block-start: var(--lm-space-1); }
  .lka-links-redes i { font-size: 1.125rem; color: var(--lm-text-muted); }

  .lka-links-pilha {
    flex: 1; min-block-size: 0;   /* senao um exemplo mais alto empurra o dock */
    padding: 0 var(--lm-space-4);
    display: flex; flex-direction: column; gap: var(--lm-space-2);
  }
  .lka-link {
    display: flex; align-items: center; gap: var(--lm-space-3);
    padding: var(--lm-space-2) var(--lm-space-3);
    border: var(--lm-border); border-radius: var(--lm-radius-control);
    background: var(--lm-surface-raised);
    font-size: var(--lm-font-size-xs);
    min-block-size: 2.75rem;
  }
  .lka-link-mini {
    inline-size: 1.75rem; block-size: 1.75rem; flex: none;
    border-radius: var(--lm-radius-sm);
    display: grid; place-items: center;
    background: var(--lm-surface-sunken); color: var(--lm-text-default);
    font-size: 0.9375rem;
  }
  .lka-link-texto { min-inline-size: 0; }
  .lka-link-texto strong { display: block; font-weight: var(--lm-font-weight-medium); }
  .lka-link-texto > span { color: var(--lm-text-subtle); font-size: var(--lm-font-size-2xs); }

  /* Destaque: um por vez. Dois destaques deixam de ser destaque. */
  /* Preenchimento de ACAO, nao a rampa `ink`. A rampa ink nao inverte:
     `ink-900` continua quase preto no tema escuro, e `text-inverse` vira
     ESCURO (porque `surface-inverse` fica clara). O par ink-900 +
     text-inverse desaparecia no escuro — e' a armadilha que o README do DS
     descreve. `action-bg` / `action-fg` sao resolvidos por tema. */
  .lka-link-destaque {
    background: var(--lm-action-bg); color: var(--lm-action-fg);
    border-color: var(--lm-action-bg);
  }
  .lka-link-destaque .lka-link-mini {
    background: color-mix(in oklab, var(--lm-action-fg) 14%, transparent);
    color: var(--lm-action-fg);
  }
  /* base.css do DS aplica `strong, b { color: var(--lm-text-strong) }` — sobre
     preenchimento de acao isso some. Precisa reafirmar. */
  .lka-link-destaque .lka-link-texto strong { color: var(--lm-action-fg); }
  .lka-link-destaque .lka-link-texto > span { color: color-mix(in oklab, var(--lm-action-fg) 62%, transparent); }

  .lka-links-dock {
    flex: none;
    margin-block-start: var(--lm-space-4);
    padding: var(--lm-space-3) var(--lm-space-4) var(--lm-space-4);
    display: grid;
    border-block-start: 1px solid var(--lm-border-subtle);
  }

}

@layer lm.overrides {

  /* Seletor de exemplo acima do aparelho */
  .lka-exemplo-seletor { margin-block-end: var(--lm-space-4); }

  /* Cada exemplo ocupa a tela inteira do aparelho */
  .lka-exemplo { block-size: 100%; display: flex; flex-direction: column; }
  .lka-exemplo[hidden] { display: none; }

  /* A marca do topo aceita inicial ou icone */
  .lka-links-marca i { font-size: 1.375rem; }

}

/* ---------------------------------------------------------------------------
   Rotacao automatica do exemplo no aparelho.
   Keyframes ficam fora de @layer de proposito: regra de arroba nomeada nao
   participa da cascata, e declarar dentro so' confunde quem le.
   ------------------------------------------------------------------------- */

@keyframes lka-entra-tela {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes lka-entra-linha {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes lka-avanca {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@layer lm.overrides {

  /* As telas passam a se empilhar no mesmo espaco para poder cruzar fade. */
  .lka-tela { position: relative; }
  .lka-exemplo {
    position: absolute; inset: 0;
    block-size: auto;
    display: flex; flex-direction: column;
  }
  .lka-exemplo[hidden] { display: none; }
  .lka-exemplo.is-entrando { animation: lka-entra-tela 420ms var(--lm-ease-standard) both; }

  /* Escalonamento das linhas: o olho acompanha a pilha sendo montada.
     So' transform e opacity — nada que force layout. */
  .lka-exemplo.is-entrando .lka-links-topo { animation: lka-entra-linha 380ms var(--lm-ease-standard) both; }
  .lka-exemplo.is-entrando .lka-link { animation: lka-entra-linha 360ms var(--lm-ease-standard) both; }
  .lka-exemplo.is-entrando .lka-link:nth-child(1) { animation-delay: 90ms; }
  .lka-exemplo.is-entrando .lka-link:nth-child(2) { animation-delay: 150ms; }
  .lka-exemplo.is-entrando .lka-link:nth-child(3) { animation-delay: 210ms; }
  .lka-exemplo.is-entrando .lka-link:nth-child(4) { animation-delay: 270ms; }
  .lka-exemplo.is-entrando .lka-link:nth-child(5) { animation-delay: 330ms; }
  .lka-exemplo.is-entrando .lka-links-dock { animation: lka-entra-linha 360ms var(--lm-ease-standard) 390ms both; }

  /* Medidor de tempo dentro do botao ativo: a troca deixa de ser surpresa. */
  .lka-exemplo-seletor > button { position: relative; overflow: hidden; }
  .lka-exemplo-seletor > button::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
    block-size: 2px; background: var(--lm-accent-400);
    transform: scaleX(0); transform-origin: left;
  }
  .lka-exemplo-seletor.is-rodando > [aria-pressed="true"]::after {
    animation: lka-avanca var(--lka-ciclo, 6s) linear both;
  }

  /* A URL troca junto: fade curto para nao piscar. */
  .lka-url-chip { transition: opacity var(--lm-duration-fast) var(--lm-ease-standard); }
  .lka-url-chip.is-trocando { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    .lka-exemplo.is-entrando,
    .lka-exemplo.is-entrando .lka-links-topo,
    .lka-exemplo.is-entrando .lka-link,
    .lka-exemplo.is-entrando .lka-links-dock,
    .lka-exemplo-seletor.is-rodando > [aria-pressed="true"]::after { animation: none; }
  }

}

@layer lm.overrides {

  /* ---- Seções internas: cabeçalho comum ------------------------------- */

  .lka-secao-suave { background: var(--lm-surface-sunken); }

  .lka-secao-topo {
    max-inline-size: 42rem;
    margin-block-end: var(--lm-space-8);
  }
  .lka-secao-topo h2 {
    font-size: var(--lm-font-size-3xl);
    line-height: var(--lm-line-height-tight);
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .lka-secao-lead { color: var(--lm-text-muted); font-size: var(--lm-font-size-md); }

  .lka-secao-rodape {
    margin-block-start: var(--lm-space-6);
    /* start, nao center: em celular o texto quebra em tres linhas e o icone
       centralizado fica boiando no meio do paragrafo. */
    display: flex; align-items: start; gap: var(--lm-space-2);
    font-size: var(--lm-font-size-sm); color: var(--lm-text-muted);
  }
  .lka-secao-rodape i {
    color: var(--lm-accent-400); font-size: 1.125rem; flex: none;
    line-height: var(--lm-line-height-relaxed);
  }

  /* ---- Cartões de caso de uso ----------------------------------------- */

  .lka-usos { gap: var(--lm-space-4); }

  .lka-uso { display: flex; flex-direction: column; gap: var(--lm-space-3); }
  .lka-uso-icone {
    inline-size: 2.75rem; block-size: 2.75rem; flex: none;
    border-radius: var(--lm-radius-md);
    display: grid; place-items: center;
    background: var(--lm-accent-50); color: var(--lm-accent-800);
    font-size: 1.375rem;
  }
  .lka-uso-titulo { font-size: var(--lm-font-size-lg); line-height: var(--lm-line-height-snug); }
  .lka-uso-texto { font-size: var(--lm-font-size-sm); color: var(--lm-text-muted); margin: 0; }

}


/* ---------------------------------------------------------------------------
   SEÇÃO 04 — artefatos animados dos recursos.

   Regra que vale para todos: o ESTADO BASE do CSS é o estado FINAL da
   animação. As keyframes só descrevem o caminho até ele. Assim, quando a
   animação não roda — `prefers-reduced-motion`, cartão fora da tela, JS
   bloqueado — o artefato aparece completo e legível, nunca vazio.
   Só `transform` e `opacity`: nada que force recálculo de layout.
   ------------------------------------------------------------------------- */

@keyframes lka-troca-sobe   { 0%,15% { transform: none; } 45%,85% { transform: translateY(-2.375rem); } 100% { transform: none; } }
@keyframes lka-troca-desce  { 0%,15% { transform: none; } 45%,85% { transform: translateY(1.1875rem); } 100% { transform: none; } }
@keyframes lka-vira-destaque{ 0%,20% { transform: translateY(4.75rem); } 50%,100% { transform: none; } }
@keyframes lka-pinta        { 0%,20% { background: var(--lm-surface-raised); border-color: var(--lm-border-subtle); }
                              50%,100% { background: var(--lm-action-bg); border-color: var(--lm-action-bg); } }
@keyframes lka-surge-mini   { 0%,30% { opacity: 0; transform: scale(.4); } 55%,100% { opacity: 1; transform: none; } }
@keyframes lka-janela       { 0% { opacity: 0; transform: translateY(-6px); } 12%,68% { opacity: 1; transform: none; } 82%,100% { opacity: 0; transform: translateY(-6px); } }
@keyframes lka-preenche-x   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lka-preenche-y   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lka-aparece      { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes lka-sobe-suave   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lka-qr-modulos   { 0% { clip-path: inset(0 100% 0 0); } 70%,100% { clip-path: inset(0 0 0 0); } }
@keyframes lka-pulsa        { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }
@keyframes lka-cai          { 0% { opacity: 0; transform: translateY(-1.25rem) rotate(-6deg); } 45% { opacity: 1; transform: none; } 80%,100% { opacity: 0; transform: translateY(1rem) scale(.9); } }
@keyframes lka-confirma     { 0%,45% { opacity: 0; transform: translateY(8px); } 65%,100% { opacity: 1; transform: none; } }
@keyframes lka-troca-tema   { 0%,22%   { --lka-t: var(--lm-accent-400); }
                              25%,47%  { --lka-t: #E8920C; }
                              50%,72%  { --lka-t: #2CB87C; }
                              75%,97%  { --lka-t: #7B52D4; }
                              100%     { --lka-t: var(--lm-accent-400); } }

@property --lka-t { syntax: '<color>'; inherits: true; initial-value: #2B4BF2; }

@layer lm.overrides {

  /* ---- Carrossel e cartão de recurso ---------------------------------- */

  .lka-recursos .lm-carousel-track { --lm-carousel-item: min(21rem, 84%); }
  @media (min-width: 62em) {
    .lka-recursos .lm-carousel-track { --lm-carousel-item: calc((100% - (var(--lm-space-5) * 2)) / 3); }
  }

  .lka-recurso { display: flex; flex-direction: column; gap: var(--lm-space-3); }
  .lka-recurso-titulo {
    font-size: var(--lm-font-size-lg); line-height: var(--lm-line-height-snug);
    display: flex; align-items: center; gap: var(--lm-space-2);
  }
  .lka-recurso-titulo i { color: var(--lm-accent-400); font-size: 1.25rem; flex: none; }
  .lka-recurso-texto { font-size: var(--lm-font-size-sm); color: var(--lm-text-muted); margin: 0; }

  /* ---- Palco comum dos artefatos -------------------------------------- */

  .lka-arte {
    block-size: 9.5rem; flex: none;
    border-radius: var(--lm-radius-md);
    background: var(--lm-surface-sunken);
    border: 1px solid var(--lm-border-subtle);
    padding: var(--lm-space-3);
    display: flex; flex-direction: column; gap: var(--lm-space-2);
    overflow: hidden; position: relative;
  }
  .lka-arte-centro { align-items: center; justify-content: center; }

  .lka-arte-linha {
    display: flex; align-items: center; gap: var(--lm-space-2);
    padding: var(--lm-space-2);
    border-radius: var(--lm-radius-sm);
    background: var(--lm-surface-raised);
    border: 1px solid var(--lm-border-subtle);
    block-size: 2.125rem; flex: none;
  }
  .lka-arte-linha > span {
    inline-size: 1.125rem; block-size: 1.125rem; flex: none;
    border-radius: var(--lm-radius-xs); background: var(--lm-surface-track);
  }
  .lka-arte-linha > b {
    block-size: 0.5rem; border-radius: var(--lm-radius-full);
    background: var(--lm-surface-track); inline-size: 62%;
  }
  .lka-arte-alca { margin-inline-start: auto; color: var(--lm-text-subtle); font-size: 1rem; }

  /* 1 — ordem */
  .is-vendo[data-arte="ordem"] .lka-l3 { animation: lka-troca-sobe 3.6s var(--lm-ease-emphasized) infinite; }
  .is-vendo[data-arte="ordem"] .lka-l1,
  .is-vendo[data-arte="ordem"] .lka-l2 { animation: lka-troca-desce 3.6s var(--lm-ease-emphasized) infinite; }
  [data-arte="ordem"] .lka-l3 { border-color: var(--lm-border-strong); }

  /* 2 — destaque e miniatura */
  [data-arte="destaque"] .lka-d-alvo { background: var(--lm-action-bg); border-color: var(--lm-action-bg); }
  [data-arte="destaque"] .lka-d-alvo > b { background: color-mix(in oklab, var(--lm-action-fg) 32%, transparent); }
  /* `.lka-arte-linha > span` tem seletor de tipo e ganharia daqui.
     Especificidade um degrau acima, sem !important. */
  .lka-arte-linha > span.lka-arte-mini {
    inline-size: 1.375rem; block-size: 1.375rem; flex: none;
    border-radius: var(--lm-radius-xs);
    display: grid; place-items: center;
    background: var(--lm-accent-400); color: #fff; font-size: 0.75rem;
  }
  .is-vendo[data-arte="destaque"] .lka-d-alvo { animation: lka-vira-destaque 3.8s var(--lm-ease-emphasized) infinite, lka-pinta 3.8s step-end infinite; }
  .is-vendo[data-arte="destaque"] .lka-arte-mini { animation: lka-surge-mini 3.8s var(--lm-ease-emphasized) infinite; }

  /* 3 — agendamento */
  .lka-arte-datas { display: flex; align-items: center; gap: var(--lm-space-2); margin-block-start: auto; }
  .lka-arte-chip {
    font-family: var(--lm-font-family-mono); font-size: var(--lm-font-size-2xs);
    color: var(--lm-text-muted); flex: none;
  }
  .lka-arte-trilho {
    flex: 1; block-size: 3px; border-radius: var(--lm-radius-full);
    background: var(--lm-surface-track); overflow: hidden;
  }
  .lka-arte-trilho > i { display: block; block-size: 100%; background: var(--lm-accent-400); transform-origin: left; }
  .is-vendo[data-arte="agenda"] .lka-arte-trilho > i { animation: lka-preenche-x 4.2s linear infinite; }
  .is-vendo[data-arte="agenda"] .lka-a-alvo { animation: lka-janela 4.2s var(--lm-ease-standard) infinite; }

  /* 4 — QR */
  .lka-qr {
    inline-size: 5.5rem; block-size: 5.5rem;
    /* lm-dark-ok: QR e' preto sobre branco por definicao — inverter quebra
       a leitura em muitos aplicativos de camera. */
    background: #FFFFFF; border-radius: var(--lm-radius-sm);
    padding: var(--lm-space-2);
    box-shadow: var(--lm-shadow-sm), 0 0 0 1px var(--lm-border-subtle);
    color: #1A1714;
  }
  .lka-qr-svg { inline-size: 100%; block-size: 100%; display: block; }
  /* Os modulos entram varrendo da esquerda; os localizadores ja estao la',
     porque e' o que o leitor de QR procura primeiro. */
  .is-vendo[data-arte="qr"] .lka-qr-mod { animation: lka-qr-modulos 3.4s var(--lm-ease-standard) infinite; }
  .is-vendo[data-arte="qr"] .lka-qr { animation: lka-aparece 3.4s var(--lm-ease-emphasized) infinite; }

  /* 5 — endereço permanente */
  .lka-url-fluxo { display: flex; flex-direction: column; align-items: center; gap: var(--lm-space-2); }
  .lka-arte-url {
    font-family: var(--lm-font-family-mono); font-size: var(--lm-font-size-2xs);
    padding: var(--lm-space-1) var(--lm-space-2);
    border-radius: var(--lm-radius-full);
    background: var(--lm-surface-raised); border: 1px solid var(--lm-border-subtle);
    white-space: nowrap;
  }
  .lka-url-velha { color: var(--lm-text-subtle); text-decoration: line-through; }
  .lka-url-nova { color: var(--lm-text-strong); border-color: var(--lm-border-strong); }
  .lka-url-seta { display: flex; align-items: center; gap: var(--lm-space-1); color: var(--lm-accent-400); }
  .lka-url-seta i { font-size: 1rem; }
  .lka-url-seta em {
    font-style: normal; font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-2xs); font-weight: var(--lm-font-weight-bold);
  }
  .is-vendo[data-arte="url"] .lka-url-seta { animation: lka-pulsa 2.2s var(--lm-ease-standard) infinite; }
  .is-vendo[data-arte="url"] .lka-url-nova { animation: lka-sobe-suave 2.2s var(--lm-ease-emphasized) infinite; }

  /* 6 — métricas */
  .lka-arte-numero { display: flex; align-items: baseline; gap: var(--lm-space-2); }
  .lka-arte-numero span {
    font-size: var(--lm-font-size-2xl); font-weight: var(--lm-font-weight-bold);
    line-height: 1; font-variant-numeric: tabular-nums; color: var(--lm-text-strong);
  }
  .lka-arte-numero em { font-style: normal; font-size: var(--lm-font-size-2xs); color: var(--lm-text-muted); }
  .lka-barras { display: flex; align-items: flex-end; gap: var(--lm-space-2); flex: 1; margin-block-start: auto; }
  .lka-barras > i {
    flex: 1; block-size: var(--h); border-radius: var(--lm-radius-xs) var(--lm-radius-xs) 0 0;
    background: var(--lm-accent-400); transform-origin: bottom; opacity: .85;
  }
  .lka-barras > i:nth-child(6) { opacity: 1; }
  .is-vendo[data-arte="metricas"] .lka-barras > i { animation: lka-preenche-y 2.6s var(--lm-ease-emphasized) infinite; }
  .is-vendo[data-arte="metricas"] .lka-barras > i:nth-child(2) { animation-delay: .07s; }
  .is-vendo[data-arte="metricas"] .lka-barras > i:nth-child(3) { animation-delay: .14s; }
  .is-vendo[data-arte="metricas"] .lka-barras > i:nth-child(4) { animation-delay: .21s; }
  .is-vendo[data-arte="metricas"] .lka-barras > i:nth-child(5) { animation-delay: .28s; }
  .is-vendo[data-arte="metricas"] .lka-barras > i:nth-child(6) { animation-delay: .35s; }
  .is-vendo[data-arte="metricas"] .lka-barras > i:nth-child(7) { animation-delay: .42s; }
  .is-vendo[data-arte="metricas"] .lka-arte-numero { animation: lka-aparece 2.6s var(--lm-ease-emphasized) infinite; }

  /* 7 — origem */
  .lka-origem-barra {
    display: flex; block-size: 1.5rem; border-radius: var(--lm-radius-full);
    overflow: hidden; background: var(--lm-surface-track);
  }
  .lka-origem-barra > i { transform-origin: left; }
  .lka-o1 { flex: 46; background: var(--lm-accent-400); }
  .lka-o2 { flex: 34; background: var(--lm-action-bg); }
  .lka-o3 { flex: 20; background: var(--lm-ink-400); }
  .lka-origem-legenda {
    display: flex; flex-direction: column; gap: var(--lm-space-1);
    font-size: var(--lm-font-size-2xs); color: var(--lm-text-muted); margin-block-start: auto;
  }
  .lka-origem-legenda span { display: flex; align-items: center; gap: var(--lm-space-2); }
  .lka-origem-legenda b { inline-size: .5rem; block-size: .5rem; border-radius: var(--lm-radius-full); flex: none; }
  .lka-p1 { background: var(--lm-accent-400); }
  .lka-p2 { background: var(--lm-action-bg); }
  .lka-p3 { background: var(--lm-ink-400); }
  .is-vendo[data-arte="origem"] .lka-origem-barra > i { animation: lka-preenche-x 2.8s var(--lm-ease-emphasized) infinite; }
  .is-vendo[data-arte="origem"] .lka-o2 { animation-delay: .18s; }
  .is-vendo[data-arte="origem"] .lka-o3 { animation-delay: .36s; }

  /* 8 — aparência */
  [data-arte="tema"] { gap: var(--lm-space-3); }
  .lka-tema-card {
    inline-size: 7rem; padding: var(--lm-space-2);
    border-radius: var(--lm-radius-sm);
    background: var(--lm-surface-raised); border: 1px solid var(--lm-border-subtle);
    display: flex; flex-direction: column; gap: var(--lm-space-2);
    box-shadow: var(--lm-shadow-sm);
  }
  .lka-tema-topo { block-size: 1.75rem; border-radius: var(--lm-radius-xs); background: var(--lka-t); }
  .lka-tema-linha { block-size: .4375rem; border-radius: var(--lm-radius-full); background: var(--lm-surface-track); }
  .lka-tema-linha.lka-curta { inline-size: 60%; }
  .lka-tema-paleta { display: flex; gap: var(--lm-space-2); }
  .lka-tema-paleta > i {
    inline-size: 1rem; block-size: 1rem; border-radius: var(--lm-radius-full);
    border: 2px solid transparent;
  }
  .lka-t1 { background: #2B4BF2; }
  .lka-t2 { background: #E8920C; }
  .lka-t3 { background: #2CB87C; }
  .lka-t4 { background: #7B52D4; }
  .is-vendo[data-arte="tema"] { animation: lka-troca-tema 6.4s step-end infinite; }
  .is-vendo[data-arte="tema"] .lka-tema-paleta > i { animation: lka-pulsa 6.4s step-end infinite; }
  .is-vendo[data-arte="tema"] .lka-t2 { animation-delay: 1.6s; }
  .is-vendo[data-arte="tema"] .lka-t3 { animation-delay: 3.2s; }
  .is-vendo[data-arte="tema"] .lka-t4 { animation-delay: 4.8s; }

  /* 9 — salvar contato */
  [data-arte="vcard"] { gap: var(--lm-space-3); }
  .lka-vcard-arquivo {
    inline-size: 3rem; block-size: 3rem; border-radius: var(--lm-radius-md);
    display: grid; place-items: center;
    background: var(--lm-surface-raised); border: 1px solid var(--lm-border-subtle);
    color: var(--lm-text-strong); font-size: 1.5rem;
    box-shadow: var(--lm-shadow-sm);
  }
  .lka-vcard-agenda {
    display: inline-flex; align-items: center; gap: var(--lm-space-2);
    padding: var(--lm-space-1) var(--lm-space-3);
    border-radius: var(--lm-radius-full);
    background: var(--lm-action-bg); color: var(--lm-action-fg);
    font-size: var(--lm-font-size-2xs);
  }
  .lka-vcard-agenda i { font-size: 1rem; }
  .is-vendo[data-arte="vcard"] .lka-vcard-arquivo { animation: lka-cai 3.2s var(--lm-ease-emphasized) infinite; }
  .is-vendo[data-arte="vcard"] .lka-vcard-agenda { animation: lka-confirma 3.2s var(--lm-ease-emphasized) infinite; }

  /* Quem pediu menos movimento recebe o estado final, não o movimento lento. */
  @media (prefers-reduced-motion: reduce) {
    .lka-arte, .lka-arte * { animation: none !important; } /* lm-motion-ok: preferência do sistema */
  }

}

@layer lm.overrides {
  /* O alternador fica antes do CTA e nao herda a cor dos links de ancora. */
  .lka-nav-links .lka-tema-btn { color: var(--lm-text-muted); }
  .lka-nav-links .lka-tema-btn:hover { color: var(--lm-text-strong); }
}

@layer lm.overrides {

  /* ---- Seção 05: passos ----------------------------------------------- */

  .lka-passos {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--lm-space-6);
    grid-template-columns: 1fr;
    counter-reset: none;
  }
  @media (min-width: 48em) {
    .lka-passos { grid-template-columns: repeat(3, 1fr); gap: var(--lm-space-8); }
  }

  .lka-passo {
    position: relative;
    display: flex; flex-direction: column; gap: var(--lm-space-3);
    padding-block-start: var(--lm-space-6);
    border-block-start: 2px solid var(--lm-border-strong);
  }
  /* Marcador na régua: mostra que os três passos são um percurso, não uma
     lista de itens soltos. Some no empilhamento de celular, onde a régua
     horizontal deixa de fazer sentido. */
  .lka-passo::before {
    content: "";
    position: absolute; inset-block-start: -0.3125rem; inset-inline-start: 0;
    inline-size: .5rem; block-size: .5rem; border-radius: var(--lm-radius-full);
    background: var(--lm-action-bg);
  }

  .lka-passo-numero {
    font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-sm);
    color: var(--lm-text-subtle);
    font-variant-numeric: tabular-nums;
  }
  .lka-passo-icone {
    inline-size: 2.75rem; block-size: 2.75rem;
    border-radius: var(--lm-radius-md);
    display: grid; place-items: center;
    background: var(--lm-accent-50); color: var(--lm-accent-800);
    font-size: 1.375rem;
  }
  .lka-passo-titulo { font-size: var(--lm-font-size-lg); line-height: var(--lm-line-height-snug); }
  .lka-passo-texto { font-size: var(--lm-font-size-sm); color: var(--lm-text-muted); margin: 0; }

  .lka-passos-rodape {
    margin-block-start: var(--lm-space-8);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--lm-space-4) var(--lm-space-8);
  }
  .lka-passos-rodape .lka-secao-rodape { margin-block-start: 0; flex: 1 1 20rem; }

}

@layer lm.overrides {

  /* ---- Seção 06: planos ------------------------------------------------ */

  /* stretch: com `.lka-plano-itens { flex: 1 }` os tres botoes alinham na base. */
  .lka-planos { gap: var(--lka-gap, var(--lm-space-4)); align-items: stretch; }

  /* Modo carrossel. O trilho tem `overflow-x: auto`, e por regra do CSS isso
     faz o eixo vertical deixar de ser `visible` — sem respiro no topo, o selo
     "Mais pedido", que sobe metade da própria altura para fora do cartão,
     seria cortado ou geraria barra de rolagem vertical. */
  .lka-planos-carrossel .lm-carousel-track {
    padding-block-start: var(--lm-space-3);
    align-items: stretch;
  }
  /* E o selo desce um pouco: com o respiro acima, ele passa a caber dentro da
     caixa de rolagem em vez de depender da sobra do contêiner. */
  .lka-planos-carrossel .lka-plano-selo { inset-block-start: var(--lm-space-1); }
  .lka-plano {
    display: flex; flex-direction: column; gap: var(--lm-space-3);
    position: relative;
  }
  .lka-plano-destaque {
    border-color: var(--lm-action-bg);
    box-shadow: var(--lm-shadow-md);
  }
  .lka-plano-selo {
    position: absolute; inset-block-start: 0; inset-inline-end: var(--lm-space-4);
    translate: 0 -50%;
  }
  .lka-plano-nome { font-size: var(--lm-font-size-lg); }
  .lka-plano-preco {
    display: flex; align-items: baseline; gap: var(--lm-space-1);
    margin: 0; line-height: 1;
  }
  .lka-plano-preco em {
    font-style: normal; font-size: var(--lm-font-size-md);
    color: var(--lm-text-muted); font-weight: var(--lm-font-weight-medium);
  }
  .lka-plano-preco span {
    font-size: var(--lm-font-size-4xl); font-weight: var(--lm-font-weight-bold);
    letter-spacing: -0.03em; color: var(--lm-text-strong);
  }
  .lka-plano-preco-texto {
    font-size: var(--lm-font-size-2xl); font-weight: var(--lm-font-weight-semibold);
    color: var(--lm-text-strong);
  }
  .lka-plano-periodo { font-size: var(--lm-font-size-xs); color: var(--lm-text-muted); margin: 0; }
  .lka-plano-resumo { font-size: var(--lm-font-size-sm); color: var(--lm-text-muted); margin: 0; }
  .lka-plano-itens {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--lm-space-2);
    font-size: var(--lm-font-size-sm);
    padding-block-start: var(--lm-space-3);
    border-block-start: 1px solid var(--lm-border-subtle);
    flex: 1;
  }
  .lka-plano-itens li { display: flex; align-items: start; gap: var(--lm-space-2); }
  .lka-plano-itens i {
    color: var(--lm-accent-400); font-size: 1rem; flex: none;
    line-height: var(--lm-line-height-relaxed);
  }
  .lka-plano-itens code {
    font-family: var(--lm-font-family-mono); font-size: .95em;
    overflow-wrap: anywhere;
  }

  /* ---- Seção 07: em breve --------------------------------------------- */

  .lka-embreve-inner {
    display: grid; gap: var(--lm-space-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 62em) {
    .lka-embreve-inner { grid-template-columns: 0.9fr 1.1fr; gap: var(--lm-space-12); align-items: center; }
  }
  .lka-embreve-texto h2 { font-size: var(--lm-font-size-2xl); line-height: var(--lm-line-height-tight); }
  .lka-embreve-lista {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--lm-space-4);
  }
  .lka-embreve-lista li { display: flex; align-items: start; gap: var(--lm-space-3); }
  .lka-embreve-lista i {
    inline-size: 2.5rem; block-size: 2.5rem; flex: none;
    border-radius: var(--lm-radius-md);
    display: grid; place-items: center;
    background: var(--lm-on-inverse-tint);
    font-size: 1.25rem;
  }
  .lka-embreve-lista strong { display: block; margin-block-end: var(--lm-space-05); }
  .lka-embreve-lista span { font-size: var(--lm-font-size-sm); }

  /* ---- Seção 08: dúvidas ---------------------------------------------- */

  .lka-duvidas { max-inline-size: 48rem; }
  .lka-duvidas summary { font-size: var(--lm-font-size-md); }
  .lka-duvidas .lm-accordion-body { max-inline-size: 44rem; }

  /* ---- Seção 09: solicitar -------------------------------------------- */

  .lka-solicitar {
    display: grid; gap: var(--lm-space-8);
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 62em) {
    .lka-solicitar { grid-template-columns: 0.85fr 1.15fr; gap: var(--lm-space-12); }
    .lka-solicitar-lado { position: sticky; inset-block-start: 6rem; }
  }
  .lka-solicitar-lado h2 {
    font-size: var(--lm-font-size-3xl); line-height: var(--lm-line-height-tight);
    letter-spacing: -0.015em;
  }
  .lka-solicitar-provas {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--lm-space-3);
    margin-block-start: var(--lm-space-2);
  }
  .lka-solicitar-provas li {
    display: flex; align-items: center; gap: var(--lm-space-2);
    font-size: var(--lm-font-size-sm); color: var(--lm-text-muted);
  }
  .lka-solicitar-provas i { color: var(--lm-accent-400); font-size: 1.125rem; flex: none; }
  .lka-form-nota { margin-block-start: var(--lm-space-3); text-align: center; }

  /* ---- Seção 10: rodapé ----------------------------------------------- */

  .lka-rodape {
    background: var(--lm-surface-sunken);
    border-block-start: 1px solid var(--lm-border-subtle);
    padding-block-start: var(--lm-space-12);
  }
  .lka-rodape-inner {
    display: grid; gap: var(--lm-space-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 48em) {
    .lka-rodape-inner { grid-template-columns: 1fr 1.4fr; }
  }
  .lka-rodape-marca p { font-size: var(--lm-font-size-sm); color: var(--lm-text-muted); margin-block-start: var(--lm-space-3); }
  .lka-rodape-links {
    display: grid; gap: var(--lm-space-6);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .lka-rodape-links h3 {
    font-size: var(--lm-font-size-xs); text-transform: uppercase;
    letter-spacing: var(--lm-letter-spacing-wide, .06em);
    color: var(--lm-text-subtle);
    margin-block-end: var(--lm-space-3);
  }
  .lka-rodape-links a {
    display: flex; align-items: center; gap: var(--lm-space-2);
    font-size: var(--lm-font-size-sm); color: var(--lm-text-muted);
    text-decoration: none;
    padding-block: var(--lm-space-1);
  }
  .lka-rodape-links a:hover { color: var(--lm-text-strong); }
  .lka-rodape-base {
    margin-block-start: var(--lm-space-8);
    padding-block: var(--lm-space-5);
    border-block-start: 1px solid var(--lm-border-subtle);
    display: flex; flex-wrap: wrap; gap: var(--lm-space-2) var(--lm-space-6);
    justify-content: space-between;
    font-size: var(--lm-font-size-xs); color: var(--lm-text-subtle);
  }
  .lka-rodape-base p { margin: 0; }

}

@layer lm.overrides {

  /* A correção de `strong`/`h1..h6` em superfície inversa mora no TEMA:
     vale para o site inteiro, não só para os widgets. */


}

@layer lm.overrides {

  /* ---- Seção 06: quem já usa ------------------------------------------ */

  .lka-casos .lm-carousel-track { --lm-carousel-item: min(17rem, 78%); }
  @media (min-width: 48em)  { .lka-casos .lm-carousel-track { --lm-carousel-item: calc((100% - var(--lm-space-5)) / 2); } }
  @media (min-width: 62em)  { .lka-casos .lm-carousel-track { --lm-carousel-item: calc((100% - (var(--lm-space-5) * 3)) / 4); } }

  .lka-caso { display: flex; flex-direction: column; gap: var(--lm-space-2); }

  /* Miniatura da página real. Não é print: é o mesmo arranjo desenhado em
     CSS, então não desatualiza quando o cliente edita a página dele. */
  .lka-caso-tela {
    block-size: 8rem; flex: none;
    border-radius: var(--lm-radius-md);
    background: var(--lm-surface-page);
    border: 1px solid var(--lm-border-subtle);
    position: relative; overflow: hidden;
    margin-block-end: var(--lm-space-2);
  }
  .lka-caso-capa {
    position: absolute; inset-block-start: 0; inset-inline: 0;
    block-size: 2.5rem;
    /* Fallback obrigatório: `var(--capa)` sem valor invalida o `background`
       inteiro e a capa some, em vez de só ficar sem a cor da marca. */
    background: radial-gradient(120% 160% at 82% 0%, var(--capa, var(--lm-accent-400)), transparent 62%), var(--lm-ink-900);
  }
  .lka-caso-marca {
    position: absolute; inset-block-start: 1.5rem; inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 2rem; block-size: 2rem; border-radius: var(--lm-radius-full);
    display: grid; place-items: center;
    background: var(--lm-action-bg); color: var(--lm-action-fg);
    border: 2px solid var(--lm-surface-page);
    font-size: var(--lm-font-size-2xs); font-weight: var(--lm-font-weight-bold);
  }
  .lka-caso-pilha {
    position: absolute; inset-block-end: var(--lm-space-3);
    inset-inline: var(--lm-space-3);
    display: flex; flex-direction: column; gap: var(--lm-space-1);
  }
  .lka-caso-pilha i {
    block-size: .625rem; border-radius: var(--lm-radius-full);
    background: var(--lm-surface-track);
  }
  .lka-caso-pilha .lka-caso-destaque { background: var(--lm-action-bg); block-size: .875rem; }

  .lka-caso-nome { font-size: var(--lm-font-size-md); font-weight: var(--lm-font-weight-semibold); margin: 0; }
  .lka-caso-segmento { font-size: var(--lm-font-size-2xs); color: var(--lm-text-subtle); margin: 0; }
  .lka-caso-texto { font-size: var(--lm-font-size-sm); color: var(--lm-text-muted); margin: 0; flex: 1; }
  .lka-caso-link {
    align-self: start;
    font-family: var(--lm-font-family-mono);
    font-size: var(--lm-font-size-2xs);
    padding-inline: 0;
  }

  .lka-depoimento { margin: var(--lm-space-8) 0 0; max-inline-size: 44rem; }

}

/* ---------------------------------------------------------------------------
   Faixa de logos em laço contínuo.

   É a única animação infinita da página que não tem um começo e um fim
   claros — por isso ganha as três travas do WCAG 2.2.2: pausa no ponteiro,
   pausa no foco de teclado, e desligamento total em `prefers-reduced-motion`,
   caso em que a faixa vira uma lista que quebra linha normalmente.
   ------------------------------------------------------------------------- */

@keyframes lka-esteira { from { transform: none; } to { transform: translateX(-50%); } }

@layer lm.overrides {

  .lka-logos {
    margin-block: var(--lm-space-2) var(--lm-space-10);
    padding-block: var(--lm-space-2);
    overflow: hidden;
    /* Desbota nas pontas: sem isso as marcas aparecem e somem no talho. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  }
  .lka-logos-esteira {
    list-style: none; margin: 0; padding: 0;
    display: flex; inline-size: max-content;
    --lka-esteira-gap: var(--lm-space-12);
    gap: var(--lka-esteira-gap);
    /* O talho do laço mora aqui. Com N itens há N-1 vãos, então metade da
       largura da faixa é "os itens + (N-0,5) vãos" — meio vão a menos do que
       um ciclo completo, e a cada volta a faixa dá um pulinho para trás.
       O vão sobressalente no fim faz a largura ficar par: metade passa a ser
       exatamente uma cópia mais o seu vão, que é o período certo do -50%. */
    padding-inline-end: var(--lka-esteira-gap);
    animation: lka-esteira 46s linear infinite;
  }
  .lka-logos:hover .lka-logos-esteira,
  .lka-logos:focus-within .lka-logos-esteira { animation-play-state: paused; }

  .lka-logo {
    display: flex; align-items: center; gap: var(--lm-space-2);
    white-space: nowrap;
    font-size: var(--lm-font-size-md);
    font-weight: var(--lm-font-weight-semibold);
    letter-spacing: var(--lm-letter-spacing-tight);
    color: var(--lm-text-subtle);
    /* Marca de cliente entra em tom único: oito logos coloridos brigando
       entre si viram ruído e ainda roubam a atenção do CTA. */
  }
  .lka-logo i { font-size: 1.375rem; }

  /* Logo em imagem, vindo do CPT. `object-fit: contain` porque as marcas
     chegam em proporções diferentes: fixar altura e deixar a largura livre é
     o único jeito de uma marca larga e uma quadrada conviverem sem deformar. */
  .lka-logo a { display: flex; align-items: center; gap: var(--lm-space-2); color: inherit; text-decoration: none; }
  .lka-logo img {
    block-size: var(--lka-logo-altura, 2.25rem);
    inline-size: auto; max-inline-size: 12rem;
    object-fit: contain;
  }
  /* Tom único com devolução da cor no hover e no foco de teclado. A transição
     mora aqui e não em `filter` sozinho para que o teclado tenha o mesmo
     retorno visual do mouse. */
  .lka-logos-mono .lka-logo img {
    filter: grayscale(1);
    opacity: .68;
    transition: filter var(--lm-duration-base) var(--lm-ease-standard),
                opacity var(--lm-duration-base) var(--lm-ease-standard);
  }
  .lka-logos-mono .lka-logo:hover img,
  .lka-logos-mono .lka-logo a:focus-visible img { filter: none; opacity: 1; }

  @media (max-width: 47.99em) {
    .lka-logos {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
              mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    }
    .lka-logos-esteira { --lka-esteira-gap: var(--lm-space-6); animation-duration: 28s; }
    .lka-logo { font-size: var(--lm-font-size-sm); }
    .lka-logo i { font-size: 1.125rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lka-logos { -webkit-mask-image: none; mask-image: none; }
    .lka-logos-esteira {
      animation: none;
      inline-size: auto; flex-wrap: wrap; justify-content: center;
      gap: var(--lm-space-4) var(--lm-space-8);
      /* Sem animação não há laço para fechar, e o vão sobressalente viraria
         um buraco à direita da última marca. */
      padding-inline-end: 0;
    }
    /* Sem movimento a segunda cópia é só repetição visível. */
    .lka-logos-esteira .lka-logo[aria-hidden="true"] { display: none; }
  }

}

@layer lm.overrides {

  /* Controles do widget de barra superior ------------------------------- */

  .lka-nav-solta { position: static; }

  /* Por padrao os itens de ancora somem no celular; o widget pode religar. */
  @media (max-width: 47.99em) {
    .lka-nav-mobile-completo .lka-nav-links a:not(.lm-btn) { display: inline-flex; }
    .lka-nav-mobile-completo .lka-nav-links { flex-wrap: wrap; gap: var(--lm-space-3); }
  }

  .lka-marca img { display: block; block-size: 1.375rem; inline-size: auto; }
  .lka-marca-texto {
    font-weight: var(--lm-font-weight-bold);
    letter-spacing: var(--lm-letter-spacing-tight);
    font-size: var(--lm-font-size-lg);
  }

  /* Marca da previa quando e' imagem */
  .lka-marca-imagem { overflow: hidden; padding: 0; }
  .lka-marca-imagem img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Cartao de caso de uso com link: a area toda vira alvo, mas o link
     acessivel continua sendo o titulo — nao um `<a>` engolindo o cartao,
     que anunciaria o paragrafo inteiro como nome do link. */
  .lka-uso-clicavel { position: relative; }
  .lka-uso-clicavel .lka-uso-titulo a { color: inherit; text-decoration: none; }
  .lka-uso-clicavel .lka-uso-titulo a::after { content: ""; position: absolute; inset: 0; }
  .lka-uso-clicavel:hover { border-color: var(--lm-border-strong); }

  /* Titulo de secao em div mantem a aparencia sem o peso semantico. */
  .lka-secao-titulo {
    font-size: var(--lm-font-size-3xl);
    line-height: var(--lm-line-height-tight);
    letter-spacing: -0.015em;
    font-weight: var(--lm-font-weight-bold);
    text-wrap: balance;
  }

}

@layer lm.overrides {

  /* ---------------------------------------------------------------------
     Página real dentro do aparelho.

     A marcação vem do renderizador do plugin das páginas, desenhada para uma
     tela de celular de verdade (~380px). Em vez de reestilizar `.nfc-*` — o
     que criaria uma segunda aparência para o mesmo cartão e divergiria na
     primeira mudança do outro plugin — a página é montada na largura lógica
     dela e REDUZIDA para caber. O que aparece é a página, em escala.

     `inert` no interno: os links da prévia não recebem foco nem clique. Uma
     página de vendas não pode ter, no meio do hero, um atalho que leva o
     visitante para fora antes do CTA — e duas dezenas de paradas de tabulação
     dentro de uma ilustração atrapalham quem navega por teclado.
     --------------------------------------------------------------------- */

  .lka-real {
    position: absolute; inset: 0;
    overflow: hidden;
    border-radius: inherit;
    /* `contain` impede que qualquer coisa dentro do quadro influencie o
       layout de fora — inclusive um documento que insista em ser mais largo
       do que cabe. */
    contain: paint;
  }
  /* A página real num documento próprio. Sem cascata compartilhada: nenhuma
     regra do tema, do Elementor ou de outro plugin alcança lá dentro. */
  .lka-real-frame {
    display: block;
    border: 0;
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    transform: scale(var(--lka-escala, 1));
    transform-origin: top left;
    color-scheme: normal;

    /* Largura e altura NÃO são definidas aqui — o JS as escreve no atributo
       de estilo.

       Motivo: este arquivo vive em `@layer lm.overrides`, e regra SEM camada
       vence qualquer camada, por mais específica que ela seja. Um simples
       `iframe { max-width: 100% }` — que o Elementor e quase todo tema têm,
       sem camada — prendia o quadro na largura do aparelho. O documento
       passava a ser desenhado em 280px em vez de 380px e ainda era reduzido
       pela escala: o conteúdo aparecia a ~78% da largura.

       Estilo em atributo vence declaração normal sem camada, e é a forma
       correta de escrever uma medida calculada. Estes valores são só o
       ponto de partida enquanto o JS não roda. */
    inline-size: var(--lka-largura-logica, 380px);
    block-size: 100%;
  }

  .lka-real-interno {
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    inline-size: var(--lka-largura-logica, 380px);
    transform: scale(var(--lka-escala, 1));
    transform-origin: top left;
  }

  /* NAO estilizar `.nfc-*` aqui.

     Tudo o que fosse escrito daqui para dentro seria um desvio do que esta no
     ar — foi assim que o avatar redondo do cartao virou quadrado na previa.
     A pagina traz o proprio CSS e os proprios tokens; o quadro so' recorta e
     reduz.

     A unica excecao e' a barra flutuante: ela e' `position: fixed` no cartao e
     escaparia do aparelho, colando no rodape da landing. */
  .lka-real .nfc-dock { position: absolute; }

  /* Nem o tema nem o Elementor podem alcancar a imagem de dentro da previa.
     O tema tem `img { max-inline-size: 100%; block-size: auto }` para o
     conteudo do site; aplicado ao avatar, ele anula `block-size` e a foto
     redonda vira um retangulo. */
  .lka-real img { max-inline-size: revert-layer; }

  /* Nada dentro da prévia rola por conta própria: o recorte é do quadro, e
     uma barra de rolagem interna denunciaria a moldura. */
  .lka-real * { scrollbar-width: none; }
  .lka-real *::-webkit-scrollbar { display: none; }


}