/* =====================================================================
   LDNA S/A 2026 — pele de produção (rota /homologacao-2026)
   ---------------------------------------------------------------------
   Fonte da paleta e do background: guia "Londrina S/A — Cores, Background
   e Animação". Direção aprovada no CP1: Editorial (arq-editorial).
   Dials: variância 4 · movimento 3 · densidade 3.

   Este arquivo NÃO é um skin descartável como o homolog-cores.css. Ele é
   escrito para virar o CSS de produção: as seções refeitas consomem
   TOKENS SEMÂNTICOS (§2 e §3), e só o §9 (compatibilidade) reveste as
   seções que ainda não foram refeitas. O §9 encolhe a cada seção
   aprovada e morre quando a home inteira estiver pronta.

   ORÇAMENTO DA PÁGINA (guardrails do CP1, conferidos a cada seção):
     gradiente institucional  máx. 3 aparições  →  hero · cases · CTA final
     superfícies fortes       máx. 2            →  hero · CTA final
     trocas de tema           máx. 1            →  #cases
   ===================================================================== */

/* =====================================================================
   0 · FONTES AUTO-HOSPEDADAS
   ---------------------------------------------------------------------
   Antes: `@import url(fonts.googleapis.com)` DENTRO do input.css. Isso cria
   uma cadeia de 3 saltos (HTML → app.css → googleapis → gstatic): o
   navegador só descobre a fonte depois de baixar e parsear o CSS inteiro.
   Agora os dois arquivos variáveis (subset latin, que cobre o português)
   vivem em /assets/fonts e são pré-carregados no _Layout.

   O fallback métrico existe para o CLS: sem ele a troca da fonte de sistema
   pela real desloca o texto, e o CLS de desktop estava em 0,047 contra um
   teto de 0,05. Os valores de `size-adjust`, `ascent` e `descent` aproximam
   Arial das métricas de cada família.
   ===================================================================== */
@font-face {
  font-family: "Exo";
  font-style: normal;
  font-weight: 100 900;              /* variável: cobre 500..800 do projeto */
  font-display: swap;
  src: url("../assets/fonts/exo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;              /* variável: cobre 400..700 do projeto */
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallbacks métricos: mesma caixa que a fonte real, para o swap não mover nada. */
@font-face {
  font-family: "Exo fallback";
  src: local("Arial");
  size-adjust: 96%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter fallback";
  src: local("Arial");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

/* =====================================================================
   1 · TOKENS
   ===================================================================== */
:root {
  /* primitivas do guia (canal HSL cru, sem hsl()) */
  --brand-ink:          228 38% 13%;
  --brand-ink-deep:     228 42%  9%;
  --brand-blue:         213 48% 50%;
  --brand-purple:       294 41% 39%;
  --brand-red:            0 70% 59%;
  --brand-blue-light:   213 60% 68%;   /* 7,04:1 sobre ink  AA */
  --brand-purple-light: 294 50% 68%;   /* 6,52:1 sobre ink  AA */
  --brand-red-light:      0 72% 68%;   /* 5,85:1 sobre ink  AA */

  /* superfícies */
  --surface-0: hsl(var(--brand-ink));
  --surface-1: hsl(228 36% 16%);
  --surface-2: rgb(255 255 255 / 0.05);
  --surface-3: rgb(255 255 255 / 0.08);
  --surface-deep: hsl(var(--brand-ink-deep));
  --surface-inverse: #F3F5F9;
  --surface-inverse-1: #EAEDF4;

  /* texto (razões medidas sobre ink) */
  --text-1: rgb(255 255 255 / 0.90);   /* 14,2:1 */
  --text-2: rgb(255 255 255 / 0.75);   /* 10,2:1 */
  --text-3: rgb(255 255 255 / 0.65);   /*  7,9:1 */
  --text-4: rgb(255 255 255 / 0.55);   /*  6,0:1 PISO de texto */
  --text-decorativo: rgb(255 255 255 / 0.40); /* 3,8:1 nunca carrega texto */
  --text-inverse-1: hsl(var(--brand-ink));
  --text-inverse-2: hsl(var(--brand-ink) / 0.78);
  --text-inverse-3: hsl(var(--brand-ink) / 0.65);

  /* ação */
  --action: hsl(var(--brand-red));
  --action-info: hsl(var(--brand-blue));
  --action-ponte: hsl(var(--brand-purple));

  /* borda e elevação */
  --border: rgb(255 255 255 / 0.09);
  --border-forte: rgb(255 255 255 / 0.16);
  --border-inverse: hsl(var(--brand-ink) / 0.10);
  --elev-2: 0 12px 28px -14px hsl(var(--brand-ink-deep) / 0.70);
  --elev-3: 0 30px 60px -20px hsl(var(--brand-ink-deep) / 0.75);
  --elev-acao: 0 18px 45px -14px hsl(var(--brand-red) / 0.55);

  /* ritmo: os três, nunca 3 iguais em sequência (reg-ritmo-densidade) */
  --section-dense:     clamp(3rem, 5vw, 4.5rem);
  --section-standard:  clamp(4.5rem, 8vw, 7.5rem);
  --section-breathing: clamp(6rem, 11vw, 11rem);

  /* movimento (dial 3) */
  --dur-1: 160ms;
  --dur-2: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ambiente: 24s;

  --radius-1: 10px;
  --radius-2: 16px;
  --radius-3: 24px;
}

/* =====================================================================
   2 · BACKGROUND DE MARCA — a malha do guia (4 radiais + 1 linear)
   ===================================================================== */
.brand-background {
  background-color: hsl(var(--brand-ink));
  background-image:
    radial-gradient(115% 115% at 90%   4%, rgb(253 252 254) 0%, rgb(253 252 254 / 0) 46%),
    radial-gradient(120% 120% at 10%  96%, hsl(var(--brand-red)) 0%, hsl(var(--brand-red) / 0) 58%),
    radial-gradient(110% 110% at  6%   6%, rgb( 53 124 191) 0%, rgb( 53 124 191 / 0) 56%),
    radial-gradient(120% 115% at 98% 100%, hsl(var(--brand-ink-deep)) 0%, hsl(var(--brand-ink-deep) / 0) 62%),
    linear-gradient(200deg,
      hsl(var(--brand-purple)) 0%,
      hsl(var(--brand-purple)) 46%,
      hsl(var(--brand-red)) 100%);
}

/* Movimento lento. Só `transform`: roda no compositor, custo zero de
   layout e de paint (motion.md §2.1). */
@keyframes brandBackgroundDrift {
  0%   { transform: translate3d(-1.2%, -0.9%, 0) scale(1.04); }
  50%  { transform: translate3d( 1.2%,  1.1%, 0) scale(1.08); }
  100% { transform: translate3d(-1.2%, -0.9%, 0) scale(1.04); }
}
.brand-background-animated {
  animation: brandBackgroundDrift var(--dur-ambiente) ease-in-out infinite;
  will-change: transform;
}

/* Camada da malha: 8% maior que o contêiner para a borda não aparecer
   durante o drift (guia, §Estrutura de aplicação). */
.brand-layer { position: absolute; inset: -8%; pointer-events: none; z-index: 0; }

/* Véu de legibilidade. Medido: sem véu, o branco dá 1,02:1 sobre o brilho
   do canto superior direito, 3,93:1 sobre o vermelho e 4,47:1 sobre o
   azul. Véu uniforme só resolveria a 60%, e 60% apaga a malha. Por isso é
   direcional, e o quadrante do brilho fica sem texto (guardrail 3). */
.brand-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(to right,
    hsl(var(--brand-ink) / 0.74) 0%,
    hsl(var(--brand-ink) / 0.58) 36%,
    hsl(var(--brand-ink) / 0.22) 64%,
    hsl(var(--brand-ink) / 0.00) 90%);
}
/* Vertical: deixa a malha respirar no topo e fecha embaixo, onde a seção
   seguinte encosta. Medido: com 0.40 sobre o azul o branco dá 8,4:1, e o
   corpo do texto cai na faixa de 0.60, sobre o vermelho, em 9,9:1. */
.brand-scrim--vertical {
  background-image: linear-gradient(to bottom,
    hsl(var(--brand-ink) / 0.40) 0%,
    hsl(var(--brand-ink) / 0.60) 52%,
    hsl(var(--brand-ink) / 0.88) 100%);
}

.brand-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.30; mix-blend-mode: overlay; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   3 · GRADIENTE INSTITUCIONAL — máx. 3 aparições por página
   ===================================================================== */
.brand-gradient {
  background-image: linear-gradient(135deg,
    hsl(var(--brand-blue)) 0%, hsl(var(--brand-purple)) 50%, hsl(var(--brand-red)) 100%);
}
/* Véu ink 15% leva o branco do rótulo a AA em TODOS os stops (5,02 a 8,15:1). */
.brand-gradient-cta {
  background-image:
    linear-gradient(hsl(var(--brand-ink) / 0.15), hsl(var(--brand-ink) / 0.15)),
    linear-gradient(135deg, hsl(var(--brand-blue)) 0%, hsl(var(--brand-purple)) 50%, hsl(var(--brand-red)) 100%);
  box-shadow: var(--elev-acao);
}
/* Só para background-clip:text: miolo clareado para manter AA large. */
.brand-gradient-text {
  background-image: linear-gradient(135deg,
    hsl(var(--brand-blue)) 0%, hsl(var(--brand-purple-light)) 50%, hsl(var(--brand-red)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Degradê de um matiz só: NÃO gasta uma das 3 aparições. */
.brand-grad-azul { background-image: linear-gradient(150deg, hsl(213 48% 38%), hsl(222 44% 20%)); }
.brand-grad-roxo { background-image: linear-gradient(150deg, hsl(294 41% 32%), hsl(280 38% 16%)); }

/* =====================================================================
   4 · PRIMITIVAS EDITORIAIS (arq-editorial)
   ===================================================================== */
.ldna-sec { position: relative; overflow: hidden; }
.ldna-sec--dense     { padding-block: var(--section-dense); }
.ldna-sec--standard  { padding-block: var(--section-standard); }
.ldna-sec--breathing { padding-block: var(--section-breathing); }

.ldna-wrap { position: relative; z-index: 2; max-width: 80rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }

/* O eixo do Editorial era uma coluna de índice (01, 02…) com fio vertical.
   A numeração saiu a pedido do dono em 2026-09-16, em todas as páginas; a
   classe fica só como contêiner de uma coluna, para as views não mudarem. */
.ldna-eixo { display: grid; grid-template-columns: 1fr; }

.ldna-kicker {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; display: block;
}
.ldna-h1 {
  font-family: "Exo", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.25rem, 5.4vw, 3.75rem); line-height: 1.04;
  letter-spacing: -0.03em; color: #fff; text-wrap: balance; margin: 0;
}
.ldna-h2 {
  font-family: "Exo", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.1;
  letter-spacing: -0.02em; color: #fff; text-wrap: balance; margin: 0;
}
.ldna-lead { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.62; color: var(--text-2); text-wrap: pretty; }
.ldna-fio { border: 0; border-block-start: 1px solid var(--border); margin: 0; }

/* Botões */
.ldna-cta {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-weight: 600; font-size: 0.9375rem; color: #fff; text-decoration: none;
  padding: 1rem 1.625rem; border-radius: var(--radius-1);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ldna-cta:hover  { transform: scale(1.03); }
.ldna-cta:active { transform: scale(0.97); }
/* SVG sem width/height dentro de flex estica até o espaço disponível e
   empurra o rótulo para três linhas. Constranger aqui, no componente. */
.ldna-cta svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
.ldna-cta--lg svg { inline-size: 1.375rem; block-size: 1.375rem; }
.ldna-cta { white-space: nowrap; }
.ldna-cta--lg { font-size: 1.0625rem; padding: 1.1875rem 2.125rem; border-radius: var(--radius-2); font-weight: 700; }
/* CTA invertido sobre faixa de gradiente: branco sobre ink dá 16,0:1. */
.ldna-cta--inversa { background: #fff; color: hsl(var(--brand-ink)); box-shadow: 0 20px 50px -18px hsl(var(--brand-ink-deep) / 0.8); }
.ldna-link {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600;
  color: #fff; text-decoration: none; transition: gap var(--dur-1) var(--ease-out);
}
.ldna-link:hover { gap: 0.75rem; }
/* Sem isto o SVG sem width/height estica até o espaço disponível e o rótulo
   quebra em três linhas. Aconteceu no "Abrir no Google Maps" do /contato. */
.ldna-link svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
.ldna-link > span, .ldna-link { white-space: nowrap; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px;
}

/* =====================================================================
   5 · HERO (s01) — receitas 071 · 011 · 021 · 079
   Superfície forte 1 de 2 · gradiente institucional 1 de 3 (a faixa de 3px)
   ===================================================================== */
.ldna-hero { position: relative; overflow: hidden; background: var(--surface-0);
  padding-block: clamp(8rem, 12vw, 11rem) clamp(3.5rem, 6vw, 5rem); }
.ldna-hero__fio-topo { position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; z-index: 3; }
.ldna-hero__grade { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 4vw, 3rem);
  align-items: end; border-block-start: 1px solid var(--border); padding-block-start: 1.75rem; margin-block-start: 2.25rem; }
@media (max-width: 900px) { .ldna-hero__grade { grid-template-columns: 1fr; gap: 2rem; } }

.ldna-prova { display: flex; text-align: right; }
.ldna-prova__item { flex: 1; padding-inline: 1rem; }
.ldna-prova__item + .ldna-prova__item { border-inline-start: 1px solid var(--border); }
.ldna-prova__n { display: block; font-family: "Exo", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1; color: #fff; }
.ldna-prova__r { display: block; font-size: 0.71875rem; line-height: 1.35; color: var(--text-4); margin-block-start: 0.375rem; letter-spacing: 0.04em; }
.ldna-prova a { display: block; color: inherit; text-decoration: none; }
.ldna-prova a:hover .ldna-prova__n { color: hsl(var(--brand-blue-light)); }
@media (max-width: 900px) { .ldna-prova { text-align: left; } .ldna-prova__item:first-child { padding-inline-start: 0; } }

/* =====================================================================
   5b · SOLUÇÕES (s03) — em julgamento no CP2 rodada 02
   Orçamento disponível: ZERO gradiente institucional, ZERO superfície forte,
   ZERO troca de tema (a espinha gastou tudo). Sobra: degradê de um matiz,
   vidro, fio e ritmo.
   ===================================================================== */
/* opção A: bento com a frente 03 dominante (010 · 077 · 025) */
.ldna-frentes { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 1rem; align-items: stretch; }
@media (max-width: 1000px) { .ldna-frentes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .ldna-frentes { grid-template-columns: 1fr; } }

/* `background-color`, nunca o shorthand `background`: o shorthand zera o
   `background-image` de .brand-grad-roxo no card em destaque. */
.ldna-frente {
  position: relative; overflow: hidden;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-block-start: 2px solid var(--border-forte);
  border-radius: var(--radius-2); padding: 1.5rem;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-frente:hover { background-color: var(--surface-3); transform: translateY(-2px); }
.ldna-frente--destaque:hover { background-color: transparent; }
.ldna-frente--azul     { border-block-start-color: hsl(var(--brand-blue)); }
.ldna-frente--roxo     { border-block-start-color: hsl(var(--brand-purple)); }
.ldna-frente--vermelho { border-block-start-color: hsl(var(--brand-red)); }
.ldna-frente--azul:hover     { border-color: hsl(var(--brand-blue) / 0.42); }
.ldna-frente--roxo:hover     { border-color: hsl(var(--brand-purple) / 0.48); }
.ldna-frente--destaque {
  grid-column: span 1; background-color: transparent;
  border: 1px solid hsl(var(--brand-red) / 0.35);
  border-block-start: 2px solid hsl(var(--brand-red));
  padding: 1.625rem; box-shadow: var(--elev-2);
}
@media (max-width: 1000px) { .ldna-frente--destaque { grid-column: span 2; } }
@media (max-width: 680px)  { .ldna-frente--destaque { grid-column: span 1; } }

.ldna-frente__ico {
  inline-size: 3rem; block-size: 3rem; display: grid; place-items: center;
  border-radius: var(--radius-1); margin-block-end: 1.125rem;
  background: hsl(var(--brand-red) / 0.13); color: hsl(var(--brand-red-light));
}
.ldna-frente--azul .ldna-frente__ico { background: hsl(var(--brand-blue) / 0.13); color: hsl(var(--brand-blue-light)); }
.ldna-frente--roxo .ldna-frente__ico { background: hsl(var(--brand-purple) / 0.16); color: hsl(var(--brand-purple-light)); }
.ldna-frente__ico--claro { background: rgb(255 255 255 / 0.14); color: #fff; }
.ldna-frente__k { color: var(--text-4); margin-block-end: 0.5rem; }
.ldna-frente__t { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; margin: 0 0 0.625rem; }
.ldna-frente__p { margin: 0; font-size: 0.875rem; line-height: 1.62; color: var(--text-3); }

/* opção B: zig-zag numerado, sem degradê nenhum (078 · 021 · 042) */
.ldna-linha {
  display: grid; grid-template-columns: 9.375rem 1fr; gap: clamp(1.25rem, 2.4vw, 2rem);
  padding-block: 1.625rem; border-block-start: 1px solid var(--border);
}
.ldna-linha:last-child { border-block-end: 1px solid var(--border); }
.ldna-linha__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 4.4vw, 3.5rem); line-height: 1; opacity: 0.9; }
.ldna-linha--azul     .ldna-linha__n { color: hsl(var(--brand-blue)); }
.ldna-linha--roxo     .ldna-linha__n { color: hsl(var(--brand-purple-light)); }
.ldna-linha--vermelho .ldna-linha__n { color: hsl(var(--brand-red)); }
.ldna-linha__c { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(1rem, 2vw, 1.75rem); align-items: baseline; }
.ldna-linha__cab { display: flex; align-items: center; gap: 0.75rem; }
.ldna-linha__ico { color: var(--text-4); display: inline-grid; place-items: center; }
.ldna-linha__ico svg { inline-size: 1.375rem; block-size: 1.375rem; }
.ldna-linha__t { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: #fff; margin: 0; }
.ldna-linha__p { margin: 0; font-size: 0.90625rem; line-height: 1.65; color: var(--text-3); }
@media (max-width: 900px) {
  .ldna-linha { grid-template-columns: 1fr; gap: 0.75rem; }
  .ldna-linha__c { grid-template-columns: 1fr; gap: 0.625rem; }
}

/* =====================================================================
   5c · SERVIÇOS (s04) — em julgamento no CP2 rodada 03
   Mesmo orçamento zerado de s03: um matiz só, vidro, fio e ritmo.
   ===================================================================== */
.ldna-serv__cab {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end; margin-block-end: 2.25rem;
}
@media (max-width: 900px) { .ldna-serv__cab { grid-template-columns: 1fr; } }

/* opção A: bento 2+3, o CRM em coluna de altura dupla à direita */
.ldna-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .ldna-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ldna-bento { grid-template-columns: 1fr; } }

.ldna-svc {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.375rem; text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-svc:hover { background-color: var(--surface-3); transform: translateY(-2px); }
.ldna-svc--azul:hover { border-color: hsl(var(--brand-blue) / 0.5); }
.ldna-svc--roxo:hover { border-color: hsl(var(--brand-purple) / 0.55); }
/* a coluna alta: 2 linhas do grid, encostada à direita */
.ldna-svc--alta {
  grid-column: 3; grid-row: 1 / span 2; background-color: transparent;
  border-color: hsl(var(--brand-red) / 0.38); padding: 1.625rem; box-shadow: var(--elev-2);
  justify-content: flex-start;
}
.ldna-svc--alta:hover { background-color: transparent; border-color: hsl(var(--brand-red) / 0.7); }
@media (max-width: 1000px) { .ldna-svc--alta { grid-column: span 2; grid-row: auto; } }
@media (max-width: 640px)  { .ldna-svc--alta { grid-column: span 1; } }

.ldna-svc__ico {
  inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
  border-radius: var(--radius-1); margin-block-end: 1rem;
  background: rgb(255 255 255 / 0.06); color: var(--text-2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ldna-svc__ico svg { inline-size: 1.375rem; block-size: 1.375rem; }
.ldna-svc--azul:hover .ldna-svc__ico { background: hsl(var(--brand-blue) / 0.16); color: hsl(var(--brand-blue-light)); }
.ldna-svc--roxo:hover .ldna-svc__ico { background: hsl(var(--brand-purple) / 0.18); color: hsl(var(--brand-purple-light)); }
.ldna-svc__ico--claro { background: rgb(255 255 255 / 0.16); color: #fff; }
.ldna-svc__f { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.ldna-svc__t { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: #fff; margin: 0.5rem 0 0.625rem; }
.ldna-svc__p { margin: 0 0 1.125rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-3); flex: 1 1 auto; }
.ldna-svc__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: auto;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-1);
  transition: gap var(--dur-1) var(--ease-out);
}
.ldna-svc__cta svg { inline-size: 1rem; block-size: 1rem; }
.ldna-svc:hover .ldna-svc__cta { gap: 0.75rem; }

/* opção B: lista densa, uma linha por serviço */
.ldna-svcl {
  display: grid; grid-template-columns: 2.75rem 15rem 1fr 1.5rem;
  gap: clamp(0.875rem, 2vw, 1.5rem); align-items: center;
  padding-block: 1.125rem; border-block-start: 1px solid var(--border);
  text-decoration: none; transition: background var(--dur-1) var(--ease-out);
}
.ldna-svcl:last-child { border-block-end: 1px solid var(--border); }
.ldna-svcl:hover { background: rgb(255 255 255 / 0.03); }
.ldna-svcl__ico { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-1); background: rgb(255 255 255 / 0.06); color: var(--text-2); }
.ldna-svcl__ico svg { inline-size: 1.25rem; block-size: 1.25rem; }
.ldna-svcl--azul:hover     .ldna-svcl__ico { background: hsl(var(--brand-blue) / 0.16); color: hsl(var(--brand-blue-light)); }
.ldna-svcl--roxo:hover     .ldna-svcl__ico { background: hsl(var(--brand-purple) / 0.18); color: hsl(var(--brand-purple-light)); }
.ldna-svcl--vermelho       .ldna-svcl__ico { background: hsl(var(--brand-red) / 0.16); color: hsl(var(--brand-red-light)); }
.ldna-svcl__f { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin-block-end: 0.25rem; }
.ldna-svcl__t h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #fff; margin: 0; }
.ldna-svcl__p { margin: 0; font-size: 0.8125rem; line-height: 1.58; color: var(--text-3); }
.ldna-svcl__cta { color: var(--text-4); display: grid; place-items: center; transition: color var(--dur-1), transform var(--dur-1); }
.ldna-svcl__cta svg { inline-size: 1.125rem; block-size: 1.125rem; }
.ldna-svcl:hover .ldna-svcl__cta { color: #fff; transform: translateX(3px); }
@media (max-width: 1000px) {
  .ldna-svcl { grid-template-columns: 2.75rem 1fr 1.5rem; }
  .ldna-svcl__p { grid-column: 2 / span 2; }
}

/* =====================================================================
   5d · SEGMENTOS (s05) — em julgamento no CP2 rodada 04
   ===================================================================== */
/* opção A: heading ao LADO da lista, faixa densa de chips */
.ldna-seg { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .ldna-seg { grid-template-columns: 1fr; } }
.ldna-chips { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
@media (max-width: 1100px) { .ldna-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ldna-chips { grid-template-columns: 1fr; } }
.ldna-chip {
  display: flex; align-items: center; gap: 0.625rem;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-1); padding: 0.6875rem 0.875rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--text-1);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ldna-chip:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.4); }
.ldna-chip__ico { display: grid; place-items: center; color: var(--text-4); flex-shrink: 0; }
.ldna-chip__ico svg { inline-size: 1.0625rem; block-size: 1.0625rem; }
.ldna-chip:hover .ldna-chip__ico { color: hsl(var(--brand-blue-light)); }

/* opção B: régua tipográfica, sem card nenhum */
.ldna-regua {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  border-block: 1px solid var(--border);
}
.ldna-regua li {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem); color: var(--text-2);
  padding: 1rem clamp(0.875rem, 1.8vw, 1.375rem);
  border-inline-end: 1px solid var(--border);
  transition: color var(--dur-1) var(--ease-out);
}
.ldna-regua li:last-child { border-inline-end: 0; }
.ldna-regua li:hover { color: #fff; }

/* =====================================================================
   5e · SOBRE (s08) — em julgamento no CP2 rodada 05
   ===================================================================== */
.ldna-sobre__h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2; color: #fff; margin: 0.625rem 0 1rem; text-wrap: balance; }
.ldna-sobre__p p { margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.68; color: var(--text-2); }
.ldna-sobre__p p:last-child { margin-block-end: 0; }

/* opção A: foto sangrando na borda direita da tela */
.ldna-sobre-a { padding-inline: 0; }
.ldna-sobre-a__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* a coluna de texto respeita a mesma sarjeta do .ldna-wrap; a da foto não */
.ldna-sobre-a__txt { padding-inline-start: max(1.25rem, calc((100% - 80rem) / 2 + 2rem)); }
.ldna-sobre-a__foto { position: relative; block-size: 100%; min-block-size: 22rem; }
.ldna-sobre-a__img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  border-start-start-radius: var(--radius-3); border-end-start-radius: var(--radius-3);
}
@media (max-width: 900px) {
  .ldna-sobre-a__grade { grid-template-columns: 1fr; }
  .ldna-sobre-a__foto { min-block-size: 16rem; }
  .ldna-sobre-a__img { border-radius: 0; }
}

/* opção B: foto contida com moldura, texto à direita */
.ldna-sobre-b__grade { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 900px) { .ldna-sobre-b__grade { grid-template-columns: 1fr; } }
.ldna-sobre-b__foto { position: relative; overflow: hidden; border-radius: var(--radius-3);
  border: 1px solid var(--border); box-shadow: var(--elev-3); aspect-ratio: 4 / 3; }
.ldna-sobre-b__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* =====================================================================
   5f · PÁGINAS INTERNAS — /sobre e seguintes
   ===================================================================== */
/* hero de página interna: mesma anatomia da home, em escala menor */
.ldna-hero--interno { padding-block: clamp(7rem, 10vw, 9rem) clamp(3rem, 5vw, 4rem); }
.ldna-hero--interno .ldna-h1 { font-size: clamp(2rem, 4.4vw, 3.125rem); }

.ldna-migalha { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-4); }
.ldna-migalha a { color: var(--text-3); text-decoration: none; }
.ldna-migalha a:hover { color: #fff; text-decoration: underline; }
.ldna-migalha [aria-current] { color: var(--text-1); }

/* régua de métricas */
.ldna-metricas { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--border); }
@media (max-width: 780px) { .ldna-metricas { grid-template-columns: repeat(2, 1fr); } }
.ldna-metrica { padding: 1.375rem clamp(0.875rem, 2vw, 1.5rem); }
.ldna-metrica + .ldna-metrica { border-inline-start: 1px solid var(--border); }
@media (max-width: 780px) {
  .ldna-metrica:nth-child(3) { border-inline-start: 0; border-block-start: 1px solid var(--border); }
  .ldna-metrica:nth-child(4) { border-block-start: 1px solid var(--border); }
}
.ldna-metrica__n { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1; }
.ldna-metrica--azul     .ldna-metrica__n { color: hsl(var(--brand-blue)); }
.ldna-metrica--roxo     .ldna-metrica__n { color: hsl(var(--brand-purple-light)); }
.ldna-metrica--vermelho .ldna-metrica__n { color: hsl(var(--brand-red)); }
.ldna-metrica__r { display: block; margin-block-start: 0.5rem; font-size: 0.78125rem;
  letter-spacing: 0.06em; color: var(--text-4); }

/* cards de sócio */
.ldna-socios { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) { .ldna-socios { grid-template-columns: 1fr; } }
.ldna-socio { background-color: var(--surface-2); border: 1px solid var(--border);
  border-block-start: 2px solid var(--border-forte); border-radius: var(--radius-2); padding: 1.5rem;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.ldna-socio:hover { background-color: var(--surface-3); }
.ldna-socio--azul { border-block-start-color: hsl(var(--brand-blue)); }
.ldna-socio--roxo { border-block-start-color: hsl(var(--brand-purple)); }
.ldna-socio--azul:hover { border-color: hsl(var(--brand-blue) / 0.42); }
.ldna-socio--roxo:hover { border-color: hsl(var(--brand-purple) / 0.48); }
.ldna-socio__cab { display: flex; align-items: center; gap: 0.875rem; margin-block-end: 1.125rem; }
.ldna-socio__ini { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem;
  border-radius: 999px; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
  color: #fff; flex-shrink: 0; }
.ldna-socio--azul .ldna-socio__ini { background: hsl(var(--brand-blue) / 0.30); box-shadow: inset 0 0 0 1px hsl(var(--brand-blue) / 0.5); }
.ldna-socio--roxo .ldna-socio__ini { background: hsl(var(--brand-purple) / 0.34); box-shadow: inset 0 0 0 1px hsl(var(--brand-purple) / 0.55); }
.ldna-socio__nome { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: #fff; margin: 0; }
.ldna-socio__cargo { font-size: 0.78125rem; color: var(--text-4); }
.ldna-socio__bio { margin: 0 0 1.125rem; font-size: 0.875rem; line-height: 1.64; color: var(--text-3); }
.ldna-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.ldna-tags li { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-3);
  background: rgb(255 255 255 / 0.05); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3125rem 0.6875rem; }

/* nota editorial em coluna estreita, fecha a seção */
.ldna-nota { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border);
  columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 820px) { .ldna-nota { columns: 1; } }
.ldna-nota p { margin: 0 0 0.875rem; font-size: 0.90625rem; line-height: 1.66; color: var(--text-3);
  break-inside: avoid; }

/* --- /sobre s01 opção B: split com a fachada sangrando na borda ---
   A malha fica CONTIDA na metade esquerda, atrás do texto. Assim o brilho
   branco do canto superior direito (1,02:1) sai de cena, e o véu horizontal
   é o suficiente. */
.ldna-hero-split { position: relative; overflow: hidden; background: var(--surface-0); }
.ldna-hero-split__grade { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
@media (max-width: 900px) { .ldna-hero-split__grade { grid-template-columns: 1fr; } }
.ldna-hero-split__txt { position: relative; overflow: hidden;
  padding-block: clamp(7rem, 10vw, 9rem) clamp(3rem, 5vw, 4rem); }
.ldna-hero-split__conteudo { position: relative; z-index: 2;
  padding-inline: max(1.25rem, calc((100vw - 80rem) / 2 + 2rem)) clamp(1.25rem, 3vw, 2.5rem); }
.ldna-hero-split__foto { position: relative; min-block-size: 20rem; }
.ldna-hero-split__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .ldna-hero-split__conteudo { padding-inline: clamp(1.25rem, 4vw, 2rem); }
  .ldna-hero-split__foto { min-block-size: 15rem; }
}

/* --- /sobre s02 opção B: faixa clara, a única troca de tema da página --- */
.ldna-numeros-claro { position: relative; background: var(--surface-inverse);
  padding-block: var(--section-standard); }
.ldna-numeros-claro__costura { position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; }
.ldna-numeros-claro__grade { display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 900px) { .ldna-numeros-claro__grade { grid-template-columns: 1fr; } }
.ldna-numeros-claro__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.14;
  color: var(--text-inverse-1); margin: 0.875rem 0 0; text-wrap: balance; }
/* Na faixa clara o fio e o rótulo invertem. E o ACENTO TAMBÉM: os tints
   `-light` foram calibrados para fundo escuro e desabam sobre claro. O
   roxo-light #CE85D6 mede 2,42:1 sobre #F3F5F9 e reprova até como texto
   grande. Sobre superfície clara valem as cores CHEIAS:
     roxo cheio #843B8C  6,44:1  AA
     azul cheio #4279BD  4,09:1  AA large
     vermelho    #E04D4D 3,60:1  AA large  (o número é grande e bold) */
.ldna-metricas--claro { border-color: var(--border-inverse); }
.ldna-metricas--claro .ldna-metrica + .ldna-metrica { border-inline-start-color: var(--border-inverse); }
.ldna-metricas--claro .ldna-metrica__r { color: var(--text-inverse-3); }
.ldna-metricas--claro .ldna-metrica--roxo .ldna-metrica__n { color: hsl(var(--brand-purple)); }
.ldna-metricas--claro .ldna-metrica--azul .ldna-metrica__n { color: hsl(var(--brand-blue)); }
.ldna-metricas--claro .ldna-metrica--vermelho .ldna-metrica__n { color: hsl(var(--brand-red)); }

/* --- /sobre s03 opção B: retrato real, sem card --- */
.ldna-retratos { display: grid; gap: 0; }
.ldna-retrato { display: grid; grid-template-columns: 13rem 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
  padding-block: 1.75rem; border-block-start: 1px solid var(--border); }
.ldna-retrato:last-child { border-block-end: 1px solid var(--border); }
@media (max-width: 820px) { .ldna-retrato { grid-template-columns: 8rem 1fr; } }
@media (max-width: 560px) { .ldna-retrato { grid-template-columns: 1fr; } }
.ldna-retrato__foto { position: relative; overflow: hidden; border-radius: var(--radius-2);
  aspect-ratio: 3 / 4; box-shadow: var(--elev-2); }
.ldna-retrato__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* fio de acento no pé da foto: diz de qual frente o sócio é */
.ldna-retrato__foto::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; }
.ldna-retrato--azul .ldna-retrato__foto::after { background: hsl(var(--brand-blue)); }
.ldna-retrato--roxo .ldna-retrato__foto::after { background: hsl(var(--brand-purple)); }
.ldna-retrato__nome { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); color: #fff; margin: 0; }
.ldna-retrato__cargo { display: block; font-size: 0.8125rem; color: var(--text-4); margin-block-start: 0.25rem; }
.ldna-retrato__bio { margin: 1rem 0 1.125rem; font-size: 0.9375rem; line-height: 1.66;
  color: var(--text-3); max-inline-size: 62ch; }

/* --- /sobre s04 opção B: convite contido em um matiz --- */
.ldna-convite { position: relative; overflow: hidden; border-radius: var(--radius-3);
  padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--elev-2); }
.ldna-convite__grade { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (max-width: 900px) { .ldna-convite__grade { grid-template-columns: 1fr; } }
.ldna-convite__acao { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
@media (min-width: 901px) { .ldna-convite__acao { align-items: flex-end; text-align: right; } }
.ldna-convite__nota { font-size: 0.8125rem; color: rgb(255 255 255 / 0.72); max-inline-size: 30ch; }

/* --- /contato: canais e fachada do mapa --- */
.ldna-canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 940px) { .ldna-canais { grid-template-columns: 1fr; } }
.ldna-canal {
  display: flex; flex-direction: column; text-decoration: none;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-block-start: 2px solid var(--border-forte);
  border-radius: var(--radius-2); padding: 1.5rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-canal:hover { background-color: var(--surface-3); transform: translateY(-2px); }
.ldna-canal--vermelho { border-block-start-color: hsl(var(--brand-red)); }
.ldna-canal--azul     { border-block-start-color: hsl(var(--brand-blue)); }
.ldna-canal--roxo     { border-block-start-color: hsl(var(--brand-purple)); }
.ldna-canal--vermelho:hover { border-color: hsl(var(--brand-red) / 0.45); }
.ldna-canal--azul:hover     { border-color: hsl(var(--brand-blue) / 0.45); }
.ldna-canal--roxo:hover     { border-color: hsl(var(--brand-purple) / 0.5); }
.ldna-canal__ico { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-1); margin-block-end: 1.125rem; }
.ldna-canal__ico svg { inline-size: 1.375rem; block-size: 1.375rem; }
/* o ícone do WhatsApp fica no verde do canal, como o botão flutuante */
.ldna-canal--vermelho .ldna-canal__ico { background: rgb(37 211 102 / 0.14); color: #4AE383; }
.ldna-canal--azul     .ldna-canal__ico { background: hsl(var(--brand-blue) / 0.14);   color: hsl(var(--brand-blue-light)); }
.ldna-canal--roxo     .ldna-canal__ico { background: hsl(var(--brand-purple) / 0.18); color: hsl(var(--brand-purple-light)); }
.ldna-canal__rotulo { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-4); }
.ldna-canal__t { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem;
  color: #fff; margin: 0.5rem 0 0.625rem; }
.ldna-canal__p { margin: 0 0 1.125rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); flex: 1 1 auto; }
.ldna-canal__valor { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
  padding-block-start: 0.875rem; border-block-start: 1px solid var(--border); }

/* --- /contato s01 opção B: a ação entra na dobra --- */
.ldna-hero__acao { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ldna-hero__tel { display: flex; flex-direction: column; gap: 0.125rem; }
.ldna-hero__tel-n { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: #fff; }
.ldna-hero__tel-r { font-size: 0.78125rem; color: var(--text-4); }

/* --- /contato s02 opção B: hierarquia real entre os canais --- */
.ldna-canais-b { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1rem; align-items: stretch; }
@media (max-width: 940px) { .ldna-canais-b { grid-template-columns: 1fr; } }
/* canal primário: bloco largo no verde do WhatsApp, que é signo do canal */
.ldna-canal-p {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  border-radius: var(--radius-2); padding: 1.75rem;
  background-image: linear-gradient(150deg, #12633A 0%, #0C3F26 100%);
  border: 1px solid rgb(37 211 102 / 0.30); box-shadow: var(--elev-2);
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-canal-p:hover { border-color: rgb(37 211 102 / 0.55); transform: translateY(-2px); }
.ldna-canal-p__conteudo { position: relative; }
.ldna-canal-p__ico { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem;
  border-radius: var(--radius-1); background: rgb(37 211 102 / 0.20); color: #6FEBA0; margin-block-end: 1.125rem; }
.ldna-canal-p__ico svg { inline-size: 1.5rem; block-size: 1.5rem; }
.ldna-canal-p__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: #fff; margin: 0.5rem 0 0.625rem; }
.ldna-canal-p__p { margin: 0 0 1.125rem; font-size: 0.9375rem; line-height: 1.6; color: rgb(255 255 255 / 0.82); max-inline-size: 42ch; }
.ldna-canal-p__n { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2rem); color: #fff; letter-spacing: -0.01em; }
.ldna-canal-p__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 1.125rem;
  font-weight: 600; font-size: 0.9375rem; color: #6FEBA0; transition: gap var(--dur-1) var(--ease-out); }
.ldna-canal-p__cta svg { inline-size: 1rem; block-size: 1rem; }
.ldna-canal-p:hover .ldna-canal-p__cta { gap: 0.75rem; }
/* canais secundários: linhas compactas, não cards */
.ldna-canais-b__lado { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.ldna-canal-s {
  display: grid; grid-template-columns: 2.75rem 1fr 1.25rem; gap: 1rem; align-items: center;
  text-decoration: none; background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.25rem 1.375rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ldna-canal-s:hover { background-color: var(--surface-3); }
.ldna-canal-s--azul:hover { border-color: hsl(var(--brand-blue) / 0.45); }
.ldna-canal-s--roxo:hover { border-color: hsl(var(--brand-purple) / 0.5); }
.ldna-canal-s__ico { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-1); }
.ldna-canal-s__ico svg { inline-size: 1.25rem; block-size: 1.25rem; }
.ldna-canal-s--azul .ldna-canal-s__ico { background: hsl(var(--brand-blue) / 0.14); color: hsl(var(--brand-blue-light)); }
.ldna-canal-s--roxo .ldna-canal-s__ico { background: hsl(var(--brand-purple) / 0.18); color: hsl(var(--brand-purple-light)); }
.ldna-canal-s__t { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; margin: 0.25rem 0 0.25rem; }
.ldna-canal-s__valor { font-size: 0.84375rem; color: var(--text-3); }
.ldna-canal-s__seta { color: var(--text-4); display: grid; place-items: center;
  transition: color var(--dur-1), transform var(--dur-1); }
.ldna-canal-s__seta svg { inline-size: 1.125rem; block-size: 1.125rem; }
.ldna-canal-s:hover .ldna-canal-s__seta { color: #fff; transform: translateX(3px); }

/* --- /contato s03 opção B: a foto real do escritório no lugar do mapa --- */
.ldna-endereco { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (max-width: 900px) { .ldna-endereco { grid-template-columns: 1fr; } }
.ldna-endereco__foto { position: relative; overflow: hidden; border-radius: var(--radius-2);
  aspect-ratio: 16 / 10; box-shadow: var(--elev-3); border: 1px solid var(--border); }
.ldna-endereco__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ldna-endereco__linha { font-style: normal; font-size: 0.9375rem; line-height: 1.7; color: var(--text-2);
  padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.ldna-endereco__acoes { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-block-start: 1.25rem; }
.ldna-endereco__btn { font: inherit; font-size: 0.84375rem; color: var(--text-4); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ldna-endereco__btn:hover { color: #fff; }
.ldna-endereco__embed { margin-block-start: 1.5rem; border-radius: var(--radius-2); overflow: hidden;
  border: 1px solid var(--border); }

.ldna-mapa { border: 1px solid var(--border); border-radius: var(--radius-2);
  overflow: hidden; background: var(--surface-2); min-block-size: 22rem; display: grid; }
.ldna-mapa__fachada { display: grid; place-items: center; align-content: center; gap: 1rem;
  padding: 2.5rem 1.5rem; text-align: center; }
.ldna-mapa__pin { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem;
  border-radius: 999px; background: hsl(var(--brand-purple) / 0.18); color: hsl(var(--brand-purple-light)); }
.ldna-mapa__pin svg { inline-size: 1.5rem; block-size: 1.5rem; }
.ldna-mapa__txt { margin: 0; max-inline-size: 46ch; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); }
.ldna-mapa__acoes { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.ldna-mapa__acoes .ldna-cta { border: 0; cursor: pointer; font-family: var(--font-body); }

/* =====================================================================
   5g · BLOG — listagem e artigo
   ===================================================================== */
/* categorias */
.ldna-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ldna-cat {
  font-size: 0.875rem; font-weight: 600; color: var(--text-3); text-decoration: none;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.5rem 0.9375rem;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ldna-cat:hover { color: #fff; background-color: var(--surface-3); }
.ldna-cat--on { color: #fff; background-color: hsl(var(--brand-blue) / 0.20); border-color: hsl(var(--brand-blue) / 0.5); }

/* metadados comuns de post */
.ldna-post__cat { display: inline-block; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--brand-blue-light)); }
.ldna-post__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.78125rem; color: var(--text-4); font-variant-numeric: tabular-nums; }

/* destaque: split com capa */
.ldna-destaque { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center; text-decoration: none; }
@media (max-width: 900px) { .ldna-destaque { grid-template-columns: 1fr; } }
.ldna-destaque__foto { overflow: hidden; border-radius: var(--radius-2); aspect-ratio: 16 / 10;
  border: 1px solid var(--border); box-shadow: var(--elev-3); }
.ldna-destaque__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-2) var(--ease-out); }
.ldna-destaque:hover .ldna-destaque__img { transform: scale(1.03); }
.ldna-destaque__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.14; color: #fff;
  margin: 0.625rem 0 0.875rem; text-wrap: balance; }
.ldna-destaque__r { margin: 0 0 1.125rem; font-size: 1rem; line-height: 1.62; color: var(--text-2); max-inline-size: 52ch; }

/* grade opção A: cards */
.ldna-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .ldna-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ldna-posts { grid-template-columns: 1fr; } }
.ldna-post {
  display: flex; flex-direction: column; text-decoration: none;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.375rem; overflow: hidden;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-post:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.4); transform: translateY(-2px); }
.ldna-post__foto { display: block; margin: -1.375rem -1.375rem 1.125rem; aspect-ratio: 16 / 9; overflow: hidden; }
.ldna-post__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ldna-post__t { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  line-height: 1.28; color: #fff; margin: 0.5rem 0 0.625rem; text-wrap: balance; }
.ldna-post__r { margin: 0 0 1.125rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); flex: 1 1 auto; }

/* grade opção B: lista editorial com data na lateral */
.ldna-postl { display: grid; grid-template-columns: 5rem 1fr 4.5rem; gap: clamp(1rem, 2.4vw, 1.75rem);
  align-items: start; text-decoration: none; padding-block: 1.5rem;
  border-block-start: 1px solid var(--border); transition: background var(--dur-1) var(--ease-out); }
.ldna-postl:last-child { border-block-end: 1px solid var(--border); }
.ldna-postl:hover { background: rgb(255 255 255 / 0.03); }
@media (max-width: 780px) { .ldna-postl { grid-template-columns: 4.5rem 1fr; } .ldna-postl__min { display: none; } }
.ldna-postl__data { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600;
  color: #fff; display: flex; flex-direction: column; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ldna-postl__ano { font-size: 0.71875rem; color: var(--text-4); font-weight: 400; }
.ldna-postl__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.0625rem, 2vw, 1.3125rem); line-height: 1.26; color: #fff;
  margin: 0.4375rem 0 0.5rem; text-wrap: balance; }
.ldna-postl__r { margin: 0; font-size: 0.90625rem; line-height: 1.6; color: var(--text-3); max-inline-size: 68ch; }
.ldna-postl__min { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--text-4);
  text-align: right; padding-block-start: 0.25rem; }

/* --- artigo --- */
.ldna-artigo-hero { position: relative; overflow: hidden; background: var(--surface-0);
  padding-block: clamp(7rem, 10vw, 9rem) clamp(2.5rem, 4vw, 3.5rem); }
.ldna-artigo-hero__t { font-size: clamp(1.875rem, 4.2vw, 3rem); max-inline-size: 20ch; }
.ldna-artigo-hero__r { max-inline-size: 60ch; margin: 1.25rem 0 1.75rem; font-size: 1.0625rem; }

.ldna-assinatura { display: flex; align-items: center; gap: 0.75rem;
  padding-block-start: 1.25rem; border-block-start: 1px solid var(--border); max-inline-size: 44ch; }
.ldna-assinatura__ini { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: 999px; background: hsl(var(--brand-blue) / 0.28);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-blue) / 0.5);
  font-family: var(--font-display); font-weight: 800; color: #fff; flex-shrink: 0; }
.ldna-assinatura__txt { display: flex; flex-direction: column; gap: 0.125rem; }
.ldna-assinatura__nome { font-weight: 600; font-size: 0.9375rem; color: #fff; }
.ldna-assinatura__meta { display: flex; align-items: center; gap: 0.4375rem; flex-wrap: wrap;
  font-size: 0.78125rem; color: var(--text-4); font-variant-numeric: tabular-nums; }

/* corpo com sumário lateral (opção A) e coluna única (opção B) */
.ldna-artigo { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start; }
@media (max-width: 940px) { .ldna-artigo { grid-template-columns: 1fr; } }
.ldna-artigo--unico { grid-template-columns: minmax(0, 1fr); max-inline-size: 46rem; margin-inline: auto; }

.ldna-sumario { position: sticky; top: 6rem; }
@media (max-width: 940px) { .ldna-sumario { position: static; padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--border); } }
.ldna-sumario__lista { list-style: none; margin: 0.875rem 0 0; padding: 0;
  border-inline-start: 1px solid var(--border); }
.ldna-sumario__i a { display: block; padding: 0.4375rem 0 0.4375rem 0.875rem; margin-inline-start: -1px;
  border-inline-start: 1px solid transparent; font-size: 0.875rem; line-height: 1.45;
  color: var(--text-3); text-decoration: none; transition: color var(--dur-1), border-color var(--dur-1); }
.ldna-sumario__i a:hover { color: #fff; border-inline-start-color: hsl(var(--brand-blue)); }
.ldna-sumario__i--sub a { padding-inline-start: 1.75rem; font-size: 0.8125rem; color: var(--text-4); }

/* tipografia do corpo do artigo: a medida manda */
.ldna-corpo { max-inline-size: 68ch; font-size: 1.0625rem; line-height: 1.72; color: var(--text-2); }
/* O ritmo vertical do corpo é UMA regra, e por isso a especificidade tem
   que bater. `.ldna-corpo p { margin: 0 }` pesa 0-1-1 e vencia o
   `> * + *` de 0-1-0: o parágrafo colava no título que vinha antes.
   Zerar e reaplicar no mesmo peso resolve, e os títulos, que pesam
   0-1-1, continuam mandando no próprio respiro. */
.ldna-corpo > *       { margin-block: 0; }
.ldna-corpo > * + *   { margin-block-start: 1.25rem; }
/* título gruda no texto que ele abre, e não no que ele fecha */
.ldna-corpo h2 + *, .ldna-corpo h3 + * { margin-block-start: 0.75rem; }
.ldna-corpo p { text-wrap: pretty; }
.ldna-corpo h2 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.2; color: #fff;
  margin-block-start: 2.5rem; scroll-margin-top: 6rem; text-wrap: balance; }
.ldna-corpo h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem;
  line-height: 1.25; color: #fff; margin-block-start: 2rem; scroll-margin-top: 6rem; }
.ldna-corpo a { color: hsl(var(--brand-blue-light)); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ldna-corpo a:hover { color: #fff; }
.ldna-corpo ul, .ldna-corpo ol { padding-inline-start: 1.25rem; }
.ldna-corpo li + li { margin-block-start: 0.5rem; }
.ldna-corpo blockquote { margin: 2rem 0; padding-inline-start: 1.25rem;
  border-inline-start: 3px solid hsl(var(--brand-purple)); color: var(--text-1);
  font-size: 1.125rem; line-height: 1.6; }
.ldna-corpo blockquote p { margin: 0; }
.ldna-corpo code { font-family: var(--font-mono); font-size: 0.875em;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.125rem 0.375rem; }

/* box do autor */
.ldna-autor { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.125rem; align-items: start; }
.ldna-autor__ini { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem;
  border-radius: 999px; background: hsl(var(--brand-blue) / 0.28);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-blue) / 0.5);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; }
.ldna-autor__nome { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: #fff; margin: 0.4375rem 0 0.125rem; }
.ldna-autor__cargo { display: block; font-size: 0.8125rem; color: var(--text-4); }
.ldna-autor__bio { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.65;
  color: var(--text-3); max-inline-size: 64ch; }

/* FAQ: <details> nativo, sem JS */
.ldna-faq { max-inline-size: 68ch; }
.ldna-faq__i { border-block-start: 1px solid var(--border); }
.ldna-faq__i:last-child { border-block-end: 1px solid var(--border); }
.ldna-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.125rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #fff; }
.ldna-faq__q::-webkit-details-marker { display: none; }
.ldna-faq__seta { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; color: var(--text-4);
  transition: transform var(--dur-2) var(--ease-out); }
.ldna-faq__i[open] .ldna-faq__seta { transform: rotate(180deg); }
.ldna-faq__a { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.68; color: var(--text-2);
  max-inline-size: 62ch; }

/* =====================================================================
   6 · CASES (s06) — a única troca de tema da página
   ===================================================================== */
/* variante A: seção clara, costurada ao ink por faixa de 6px de gradiente */
.ldna-cases { position: relative; background: var(--surface-inverse); padding-block: var(--section-breathing); }
.ldna-cases__costura { position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; }
.ldna-cases__cab { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: end; margin-block-end: 2.25rem; }
@media (max-width: 900px) { .ldna-cases__cab { grid-template-columns: 1fr; } }
.ldna-cases h2 { font-family: "Exo", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.12; color: var(--text-inverse-1); text-wrap: balance; margin: 0; }
.ldna-caso { display: grid; grid-template-columns: 11.875rem 1fr 12.5rem; gap: clamp(1rem, 2.4vw, 1.875rem);
  align-items: center; padding-block: 1.375rem; border-block-start: 1px solid var(--border-inverse); }
.ldna-caso:last-child { border-block-end: 1px solid var(--border-inverse); }
.ldna-caso__n { font-family: "Exo", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; }
/* rotação azul · roxo · vermelho: narra o gradiente sem pintar nada */
.ldna-caso:nth-child(3n+1) .ldna-caso__n { color: hsl(var(--brand-red)); }
.ldna-caso:nth-child(3n+2) .ldna-caso__n { color: hsl(var(--brand-purple)); }
.ldna-caso:nth-child(3n+3) .ldna-caso__n { color: hsl(var(--brand-blue)); }
.ldna-caso__r { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-inverse-3); margin-block-end: 0.4375rem; display: block; }
.ldna-caso__d { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-inverse-2); }
.ldna-caso__c { font-size: 0.8125rem; font-weight: 600; color: var(--text-inverse-1); text-align: right; }
@media (max-width: 900px) {
  .ldna-caso { grid-template-columns: 1fr; gap: 0.75rem; }
  .ldna-caso__c { text-align: left; }
}

/* variante B: seção escura, número em gradiente, cards de vidro */
.ldna-cases-b { position: relative; overflow: hidden; background: var(--surface-1); padding-block: var(--section-breathing); }
.ldna-cases-b h2 { color: #fff; }
.ldna-cases-b__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; }
@media (max-width: 1000px) { .ldna-cases-b__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .ldna-cases-b__grade { grid-template-columns: 1fr; } }
.ldna-cardv { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-2); padding: 1.5rem;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.ldna-cardv:hover { border-color: var(--border-forte); transform: translateY(-2px); }
.ldna-cardv--destaque { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 1000px) { .ldna-cardv--destaque { grid-row: auto; } }

/* =====================================================================
   7 · CTA FINAL (s09) — receita 084
   Superfície forte 2 de 2 · gradiente institucional 3 de 3
   ===================================================================== */
.ldna-cta-final { position: relative; overflow: hidden; background: var(--surface-0);
  padding-block: var(--section-breathing); text-align: center; }
.ldna-cta-final__grad { position: absolute; inset: 0; z-index: 0; opacity: 0.94; }
.ldna-cta-final__veu  { position: absolute; inset: 0; z-index: 1; background: hsl(var(--brand-ink) / 0.30); }
.ldna-cta-final h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.ldna-cta-final p  { color: rgb(255 255 255 / 0.90); max-width: 60ch; margin-inline: auto; }

/* =====================================================================
   8 · MOVIMENTO — reduced-motion no mesmo passe
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .brand-background-animated { animation: none; }
  :root { --dur-1: 0ms; --dur-2: 0ms; }
  .ldna-cta:hover, .ldna-cta:active, .ldna-cardv:hover { transform: none; }
}

/* =====================================================================
   9 · COMPATIBILIDADE — seções ainda NÃO refeitas
   ---------------------------------------------------------------------
   Reveste com a paleta nova o que ainda está em utilitário Tailwind com o
   laranja antigo, para que a página seja julgada inteira e coerente. Cada
   seção aprovada apaga um pedaço daqui. Quando a home terminar, o §9 some.
   Ainda revestidos: s02 logos · s03 soluções · s04 serviços · s05
   segmentos · s07 reconhecimentos · s08 sobre · s10 rodapé · chrome.
   ===================================================================== */
.bg-brand-dark            { background-color: hsl(var(--brand-ink)); }
.hover\:bg-brand-dark:hover { background-color: hsl(var(--brand-ink)); }
.bg-brand-dark\/60        { background-color: hsl(var(--brand-ink) / 0.60); }
.bg-brand-dark\/85        { background-color: hsl(var(--brand-ink) / 0.85); }
.bg-slate-900\/80         { background-color: hsl(var(--brand-ink-deep) / 0.80); }
.bg-brand-dark-soft       { background-color: var(--surface-2); }
.hover\:bg-slate-800:hover { background-color: var(--surface-3); }
.bg-white\/5              { background-color: var(--surface-2); }
.radial-glow, .radial-glow-hero {
  background-color: hsl(var(--brand-ink));
  background-image: radial-gradient(70% 60% at 78% 10%, hsl(var(--brand-purple) / 0.22) 0%, transparent 62%);
}
.radial-glow-soft {
  background-color: var(--surface-1);
  background-image: radial-gradient(60% 60% at 12% 100%, hsl(var(--brand-purple) / 0.16) 0%, transparent 55%);
}
.from-brand-dark      { --tw-gradient-from: hsl(var(--brand-ink)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--brand-ink) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-brand-dark-soft { --tw-gradient-from: var(--surface-1) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--brand-ink) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-brand-dark\/40  { --tw-gradient-from: hsl(var(--brand-ink) / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--brand-ink) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-slate-900 { --tw-gradient-to: hsl(var(--brand-ink-deep)) var(--tw-gradient-to-position); }
.border-white\/5 { border-color: var(--border); }

/* neutros: o antigo slate-600 (40%) mede 3,79:1 e NÃO pode carregar texto.
   Sobe para o piso de 55%. É a correção da falha color-contrast do axe. */
.text-slate-200 { color: var(--text-1); }
.text-slate-300 { color: var(--text-2); }
.text-slate-400 { color: var(--text-3); }
.text-slate-500 { color: var(--text-4); }
.text-slate-600 { color: var(--text-4); }
.text-orange-300 { color: var(--text-3); }
.text-brand-dark { color: hsl(var(--brand-ink)); }

/* acento padrão = vermelho */
.text-brand-orange              { color: hsl(var(--brand-red-light)); }
.hover\:text-brand-orange:hover { color: hsl(var(--brand-red-light)); }
.group:hover .group-hover\:text-brand-orange { color: hsl(var(--brand-red-light)); }
.focus\:bg-brand-orange:focus   { background-color: hsl(var(--brand-red)); }
.bg-brand-orange { background-color: hsl(var(--brand-red)); }
/* CTA em gradiente com véu: branco a AA em todos os stops (era 3,56:1) */
a.bg-brand-orange {
  background-color: transparent;
  background-image:
    linear-gradient(hsl(var(--brand-ink) / 0.15), hsl(var(--brand-ink) / 0.15)),
    linear-gradient(135deg, hsl(var(--brand-blue)) 0%, hsl(var(--brand-purple)) 50%, hsl(var(--brand-red)) 100%);
  box-shadow: var(--elev-acao);
}
a.bg-brand-orange:hover { background-image:
  linear-gradient(hsl(var(--brand-ink) / 0.15), hsl(var(--brand-ink) / 0.15)),
  linear-gradient(135deg, hsl(var(--brand-blue)) 0%, hsl(var(--brand-purple)) 50%, hsl(var(--brand-red)) 100%); }
a.hover\:bg-brand-orange-hover:hover { background-color: transparent; }
.hover\:bg-brand-orange-hover:hover  { background-color: hsl(var(--brand-red)); }
span.bg-brand-orange { background-color: hsl(var(--brand-purple)); background-image: none; }

.bg-brand-orange\/10 { background-color: hsl(var(--brand-red) / 0.10); }
.bg-brand-orange\/15 { background-color: hsl(var(--brand-red) / 0.13); }
.bg-brand-orange\/20 { background-color: hsl(var(--brand-red) / 0.18); }
.hover\:bg-brand-orange\/15:hover { background-color: hsl(var(--brand-red) / 0.13); }
.group:hover .group-hover\:bg-brand-orange\/15 { background-color: hsl(var(--brand-red) / 0.13); }
.group:hover .group-hover\:bg-brand-orange\/20 { background-color: hsl(var(--brand-red) / 0.18); }
.group:hover .group-hover\:bg-brand-orange\/25 { background-color: hsl(var(--brand-red) / 0.22); }
.group:hover .group-hover\:bg-brand-orange\/30 { background-color: hsl(var(--brand-red) / 0.26); }
.border-brand-orange\/30 { border-color: hsl(var(--brand-red) / 0.30); }
.border-brand-orange\/40 { border-color: hsl(var(--brand-red) / 0.40); }
.hover\:border-brand-orange\/40:hover { border-color: hsl(var(--brand-red) / 0.40); }
.hover\:border-brand-orange\/50:hover { border-color: hsl(var(--brand-red) / 0.50); }
.hover\:border-brand-orange\/60:hover { border-color: hsl(var(--brand-red) / 0.60); }
.hover\:border-brand-orange\/70:hover { border-color: hsl(var(--brand-red) / 0.70); }
.ring-brand-orange\/30 { --tw-ring-color: hsl(var(--brand-red) / 0.30); }
.ring-brand-orange\/40 { --tw-ring-color: hsl(var(--brand-red) / 0.40); }
.via-brand-orange\/40 { --tw-gradient-stops: transparent,
  hsl(var(--brand-blue)) 18%, hsl(var(--brand-purple)) 50%, hsl(var(--brand-red)) 82%, transparent; }
.shadow-orange-600\/30 { --tw-shadow-color: hsl(var(--brand-red) / 0.35); --tw-shadow: var(--tw-shadow-colored); }
.shadow-orange-600\/40 { --tw-shadow-color: hsl(var(--brand-red) / 0.45); --tw-shadow: var(--tw-shadow-colored); }
.shadow-orange-600\/50 { --tw-shadow-color: hsl(var(--brand-red) / 0.55); --tw-shadow: var(--tw-shadow-colored); }
.shadow-orange-500\/20 { --tw-shadow-color: hsl(var(--brand-red) / 0.20); --tw-shadow: var(--tw-shadow-colored); }
.shadow-orange-500\/30 { --tw-shadow-color: hsl(var(--brand-red) / 0.30); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-orange-500\/20:hover { --tw-shadow-color: hsl(var(--brand-red) / 0.20); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-orange-500\/30:hover { --tw-shadow-color: hsl(var(--brand-red) / 0.30); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-orange-500\/60:hover { --tw-shadow-color: hsl(var(--brand-red) / 0.50); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-orange-500\/70:hover { --tw-shadow-color: hsl(var(--brand-red) / 0.60); --tw-shadow: var(--tw-shadow-colored); }

.grid-pattern, .grid-pattern-dark {
  background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px); }
.grid-pattern-light {
  background-image: linear-gradient(hsl(var(--brand-ink) / 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, hsl(var(--brand-ink) / 0.05) 1px, transparent 1px); }
.photo-frame-dark { box-shadow: var(--elev-3), 0 18px 36px -18px hsl(var(--brand-red) / 0.22); }
.bg-slate-50      { background-color: var(--surface-inverse); }
.border-slate-200 { border-color: var(--border-inverse); }
.text-slate-700   { color: var(--text-inverse-2); }
section#cases     { background-color: var(--surface-inverse); }
#cases .text-slate-500 { color: var(--text-inverse-3); }
#cases .bg-slate-50    { background-color: var(--surface-inverse-1); }

/* header rolado: o site.js aplica backdrop-blur-md, que o content scan do
   Tailwind não vê (não varre .js), então a classe não existe compilada */
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* acento por seção: azul = estrutura · roxo = marketing · vermelho = resultado */
#solucoes .kicker.text-brand-orange,
#sobre .kicker.text-brand-orange { color: hsl(var(--brand-blue-light)); }
#solucoes [data-stagger] > div:nth-child(1) .bg-brand-orange\/15 { background-color: hsl(var(--brand-blue) / 0.13); }
#solucoes [data-stagger] > div:nth-child(1) .text-brand-orange   { color: hsl(var(--brand-blue-light)); }
#solucoes [data-stagger] > div:nth-child(2) .bg-brand-orange\/15 { background-color: hsl(var(--brand-purple) / 0.15); }
#solucoes [data-stagger] > div:nth-child(2) .text-brand-orange   { color: hsl(var(--brand-purple-light)); }
#sobre h2 .text-brand-orange { color: hsl(var(--brand-blue-light)); }

/* FAB do WhatsApp: o verde #25D366 FICA, por decisão do dono em 2026-09-08.
   O verde é signo do canal, não decoração de marca, e trocá-lo custa
   reconhecimento. Exceção declarada, com o que ela custa medido:

     ícone branco sobre #25D366 .......... 1,98:1   abaixo dos 3:1 da WCAG 1.4.11
     ícone branco sobre #1FAD52 (hover) .. 2,93:1   idem
     botão #25D366 sobre a página ink .... 8,69:1   o controle é achável
     botão #25D366 sobre a seção clara ... 1,82:1   some no fundo claro

   O que dá para corrigir sem tocar no lockup oficial do WhatsApp é o último
   caso: um anel garante que o botão se separe da seção clara de cases.
   O `aria-label` já dá o nome acessível, então nada se perde para leitor de tela. */
a[aria-label*="WhatsApp"][style*="background-color"] {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), 0 18px 40px -12px hsl(var(--brand-ink-deep) / 0.75);
}

/* =====================================================================
   5h · BLOG — as opções B de cada seção (rodada de aprovação)
   ===================================================================== */

/* --- hero B: eixo central, sem malha animada, fundo sólido -----------
   Muda o RITMO, não só a cor: A abre no eixo esquerdo com o número da
   seção; B centraliza e tira o movimento de fundo, deixando só o fio de
   gradiente. Numa listagem que já é uma grade, o hero centrado separa
   melhor a abertura do conteúdo. */
.ldna-hero--centro,
.ldna-artigo-hero--centro { background: var(--surface-0); }
.ldna-hero--centro .ldna-hero__centro,
.ldna-artigo-hero--centro .ldna-hero__centro {
  max-inline-size: 46rem; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.ldna-hero__centro .ldna-lead { margin-inline: auto; }
.ldna-hero__centro .ldna-migalha { justify-content: center; }
.ldna-hero__centro .ldna-assinatura { max-inline-size: none; justify-content: center;
  border-block-start: none; border-block-end: 1px solid var(--border);
  padding-block: 0 1.25rem; }
/* o fio de gradiente vira um traço curto e centrado, em vez da régua cheia */
.ldna-hero__risco { inline-size: 4rem; block-size: 3px; border-radius: 2px;
  margin-block-end: 1.5rem; }

/* --- categorias B: índice tipográfico com a descrição de cada uma ----
   A pílula esconde o que a categoria é; a linha mostra. Para quem chega
   de busca sem conhecer a editoria, isso é informação, não enfeite. */
.ldna-catl { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: clamp(1rem, 2.5vw, 2rem); align-items: baseline; text-decoration: none;
  padding-block: 1.0625rem; border-block-start: 1px solid var(--border);
  transition: background var(--dur-1) var(--ease-out); }
.ldna-catl:last-child { border-block-end: 1px solid var(--border); }
.ldna-catl:hover { background: rgb(255 255 255 / 0.03); }
@media (max-width: 720px) { .ldna-catl { grid-template-columns: 1fr auto; }
  .ldna-catl__d { grid-column: 1 / -1; } }
.ldna-catl__n { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  color: #fff; }
.ldna-catl--on .ldna-catl__n { color: hsl(var(--brand-blue-light)); }
.ldna-catl__d { margin: 0; font-size: 0.90625rem; line-height: 1.55; color: var(--text-3); }
.ldna-catl__q { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-4);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- destaque B: faixa clara (a única troca de tema do /blog) --------
   Sobre superfície clara valem as cores CHEIAS: os tints `-light` foram
   calibrados para fundo escuro. Ver a nota em §5 sobre o roxo-light. */
.ldna-destaque-claro { position: relative; background: var(--surface-inverse);
  padding-block: var(--section-standard); }
.ldna-destaque-claro__costura { position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; }
.ldna-destaque-claro .ldna-kicker { color: var(--text-inverse-3); }
.ldna-destaque-claro .ldna-post__cat { color: hsl(var(--brand-purple)); }
.ldna-destaque-claro .ldna-destaque__t { color: var(--text-inverse-1); }
.ldna-destaque-claro .ldna-destaque__r { color: var(--text-inverse-2); }
.ldna-destaque-claro .ldna-post__meta { color: var(--text-inverse-3); }
.ldna-destaque-claro .ldna-destaque__foto { border-color: var(--border-inverse); }

/* --- autor B: faixa clara, o autor como assinatura de fim de texto ---
   O fim do artigo é onde a autoria pesa para E-E-A-T. Em A ele é mais um
   bloco escuro; em B a troca de superfície marca que o texto acabou. */
.ldna-autor-claro { position: relative; background: var(--surface-inverse);
  padding-block: var(--section-dense); }
.ldna-autor-claro__costura { position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; }
.ldna-autor-claro .ldna-autor { max-inline-size: 52rem; margin-inline: auto; }
.ldna-autor-claro .ldna-kicker { color: var(--text-inverse-3); }
.ldna-autor-claro .ldna-autor__nome { color: var(--text-inverse-1); }
.ldna-autor-claro .ldna-autor__cargo { color: var(--text-inverse-3); }
.ldna-autor-claro .ldna-autor__bio { color: var(--text-inverse-2); }
.ldna-autor-claro .ldna-autor__ini { background: hsl(var(--brand-purple) / 0.12);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-purple) / 0.35);
  color: hsl(var(--brand-purple)); }

/* --- FAQ B: respostas abertas, duas colunas -------------------------
   O acordeão economiza altura; a resposta aberta é lida sem clique, que
   é o que interessa quando a página é recortada por buscador de IA. */
.ldna-faq--aberta { max-inline-size: none; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 780px) { .ldna-faq--aberta { grid-template-columns: 1fr; } }
.ldna-faqa { border-block-start: 1px solid var(--border); padding-block-start: 1.125rem; }
.ldna-faqa__q { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.3; color: #fff; margin: 0 0 0.625rem; text-wrap: balance; }
.ldna-faqa__a { margin: 0; font-size: 0.9375rem; line-height: 1.68; color: var(--text-2); }

/* --- relacionados B: lista numerada, compacta ----------------------- */
.ldna-rel { display: grid; gap: 0; max-inline-size: 60rem; }
.ldna-rel__i { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: clamp(0.875rem, 2vw, 1.5rem);
  align-items: baseline; text-decoration: none; padding-block: 1.125rem;
  border-block-start: 1px solid var(--border); transition: background var(--dur-1) var(--ease-out); }
.ldna-rel__i:last-child { border-block-end: 1px solid var(--border); }
.ldna-rel__i:hover { background: rgb(255 255 255 / 0.03); }
@media (max-width: 640px) { .ldna-rel__i { grid-template-columns: 2rem 1fr; } .ldna-rel__m { display: none; } }
.ldna-rel__n { font-family: var(--font-mono); font-size: 0.8125rem; color: hsl(var(--brand-blue-light));
  font-variant-numeric: tabular-nums; }
.ldna-rel__t { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.3; color: #fff; margin: 0; text-wrap: balance; }
.ldna-rel__c { display: block; font-size: 0.78125rem; color: var(--text-4); margin-block-start: 0.3125rem; }
.ldna-rel__m { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--text-4);
  white-space: nowrap; }

/* --- paginação da listagem do blog --- */
.ldna-pag { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
.ldna-pag__b { display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.5625rem 1.0625rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.ldna-pag__b:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.5); }
.ldna-pag__b svg { flex-shrink: 0; }
.ldna-pag__n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-4);
  font-variant-numeric: tabular-nums; }

/* =====================================================================
   5i · PÁGINAS DE SERVIÇO — componentes do redesign 2026
   Estreiam em /criacao-de-sites-em-londrina e servem as quatro páginas.
   ===================================================================== */

/* --- dois tokens que eram citados e nunca declarados --------------------
   `var(--font-mono)` aparecia em sete regras e `var(--elev-1)` em nenhuma
   declaração: variável indefinida invalida a propriedade, que então herda.
   Na prática as datas e os números do blog saíam na fonte do corpo.
   Nenhuma página já aprovada usa estas duas, então declarar aqui não mexe
   em nada que esteja em produção.

   FALTA AINDA `--font-display`, citado em 31 regras, dez delas em classes
   que a home, o /sobre e o /contato já usam em produção. Declarar troca a
   fonte dos títulos de componente de Inter para Exo nessas três páginas,
   que é mudança visual em página aprovada: fica para o dono decidir. */
:root {
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --elev-1: 0 4px 12px -6px hsl(var(--brand-ink-deep) / 0.55);
}

/* --- hero: a prova alinhada à esquerda, e a nota do hero centrado ---
   .ldna-prova nasceu no hero da home, alinhada à direita. Na página interna
   ela fica sob o texto, no mesmo eixo, e por isso alinha à esquerda. */
.ldna-prova--hero { text-align: left; max-inline-size: 34rem; }
.ldna-prova--hero .ldna-prova__item:first-child { padding-inline-start: 0; }
.ldna-hero__nota { margin: 1.75rem 0 0; font-size: 0.875rem; line-height: 1.6;
  color: var(--text-4); max-inline-size: 52ch; }

/* --- quatro diferenciais em colunas (opção A) --- */
.ldna-frentes--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ldna-frentes--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ldna-frentes--4 { grid-template-columns: 1fr; } }

/* --- os mesmos quatro em régua numerada, sem ícone (opção B) ---
   Quatro ícones genéricos lado a lado é tell. O número diz a mesma coisa
   sem fingir significado. */
.ldna-difs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 900px) { .ldna-difs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ldna-difs { grid-template-columns: 1fr; } }
.ldna-dif { padding: 0 1.25rem; border-inline-start: 1px solid var(--border); }
.ldna-dif:first-child { padding-inline-start: 0; border-inline-start: 0; }
@media (max-width: 900px) {
  .ldna-dif { padding-block: 1.125rem; border-inline-start: 0; border-block-start: 1px solid var(--border); }
  .ldna-dif:first-child { padding-block-start: 0; border-block-start: 0; }
}
.ldna-dif__n { display: block; font-family: var(--font-mono); font-size: 0.78125rem;
  color: hsl(var(--brand-blue-light)); font-variant-numeric: tabular-nums; }
.ldna-dif__t { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.25; color: #fff; margin: 0.625rem 0 0.375rem; text-wrap: balance; }
.ldna-dif__p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-3); }

/* --- tipos de site: cards (opção A) --- */
.ldna-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) { .ldna-tipos { grid-template-columns: 1fr; } }
.ldna-tipo {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-block-start: 2px solid var(--border-forte);
  border-radius: var(--radius-2); padding: clamp(1.375rem, 2.4vw, 1.875rem);
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-tipo:hover { transform: translateY(-2px); }
.ldna-tipo--azul     { border-block-start-color: hsl(var(--brand-blue)); }
.ldna-tipo--roxo     { border-block-start-color: hsl(var(--brand-purple)); }
.ldna-tipo--vermelho { border-block-start-color: hsl(var(--brand-red)); }
/* o destaque não muda de cor, muda de peso: fundo e anel */
.ldna-tipo--destaque { background-color: var(--surface-3);
  box-shadow: inset 0 0 0 1px hsl(var(--brand-blue) / 0.28); }
.ldna-tipo__ico { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-1); background: rgb(255 255 255 / 0.06); color: #fff; }
.ldna-tipo--azul     .ldna-tipo__ico { color: hsl(var(--brand-blue-light)); }
.ldna-tipo--roxo     .ldna-tipo__ico { color: hsl(var(--brand-purple-light)); }
.ldna-tipo--vermelho .ldna-tipo__ico { color: hsl(var(--brand-red-light)); }
.ldna-tipo__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.2; color: #fff;
  margin: 1rem 0 0.75rem; }
.ldna-tipo__p { margin: 0 0 1.125rem; font-size: 0.9375rem; line-height: 1.65; color: var(--text-3); }
.ldna-tipo__p strong { color: #fff; font-weight: 600; }
.ldna-tipo__lista { list-style: none; margin: 0 0 1.375rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem; }
.ldna-tipo__lista li { font-size: 0.84375rem; line-height: 1.5; color: var(--text-4);
  padding-inline-start: 0.875rem; position: relative; }
.ldna-tipo__lista li::before { content: ""; position: absolute; inset-inline-start: 0;
  inset-block-start: 0.5rem; inline-size: 5px; block-size: 5px; border-radius: 999px;
  background: currentColor; opacity: 0.55; }
.ldna-tipo__lista strong { color: #fff; font-weight: 600; }
.ldna-tipo__cta {
  margin-block-start: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; font-size: 0.84375rem; font-weight: 600; color: #fff; text-decoration: none;
  background-color: rgb(255 255 255 / 0.05); border: 1px solid var(--border);
  border-radius: var(--radius-1); padding: 0.6875rem 0.9375rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ldna-tipo__cta > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ldna-tipo__cta svg { flex-shrink: 0; }
.ldna-tipo__cta:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.45); }

/* --- os mesmos quatro tipos em linhas largas (opção B) ---
   Na grade 2x2 os quatro textos têm de caber na mesma altura. Em linha,
   cada um ocupa o que precisa e a leitura vira comparação. */
.ldna-tipol { display: grid; grid-template-columns: 3rem 1fr auto;
  gap: clamp(1rem, 2.5vw, 2rem); align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.125rem); border-block-start: 1px solid var(--border); }
.ldna-tipol:last-child { border-block-end: 1px solid var(--border); }
@media (max-width: 860px) { .ldna-tipol { grid-template-columns: 2.5rem 1fr; }
  .ldna-tipol__cta { grid-column: 2; justify-self: start; } }
.ldna-tipol__n { font-family: var(--font-mono); font-size: 0.8125rem;
  font-variant-numeric: tabular-nums; padding-block-start: 0.3125rem; }
.ldna-tipol--azul     .ldna-tipol__n { color: hsl(var(--brand-blue-light)); }
.ldna-tipol--roxo     .ldna-tipol__n { color: hsl(var(--brand-purple-light)); }
.ldna-tipol--vermelho .ldna-tipol__n { color: hsl(var(--brand-red-light)); }
.ldna-tipol__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.2; color: #fff; margin: 0; }
.ldna-tipol__p { margin: 0.75rem 0 1rem; font-size: 0.9375rem; line-height: 1.66;
  color: var(--text-3); max-inline-size: 68ch; }
.ldna-tipol__p strong { color: #fff; font-weight: 600; }
.ldna-tipol__lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4375rem 1.25rem; }
.ldna-tipol__lista li { font-size: 0.8125rem; color: var(--text-4); }
.ldna-tipol__lista strong { color: #fff; font-weight: 600; }
.ldna-tipol__cta { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  font-size: 0.84375rem; font-weight: 600; color: #fff; text-decoration: none;
  background-color: rgb(255 255 255 / 0.05); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.625rem 1.0625rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.ldna-tipol__cta svg { flex-shrink: 0; }
.ldna-tipol__cta:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.45); }

/* --- projetos --- */
.ldna-projs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .ldna-projs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ldna-projs { grid-template-columns: 1fr; } }
/* o premiado ocupa duas colunas e duas linhas: a grade passa a dizer o que
   seis cards iguais escondiam */
.ldna-projs--bento .ldna-proj--grande { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1000px) { .ldna-projs--bento .ldna-proj--grande { grid-column: span 2; grid-row: auto; } }
@media (max-width: 640px)  { .ldna-projs--bento .ldna-proj--grande { grid-column: auto; } }

.ldna-proj {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.25rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-proj:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.4); transform: translateY(-2px); }
.ldna-proj--destaque { box-shadow: inset 0 0 0 1px hsl(var(--brand-purple) / 0.3); }
.ldna-proj__foto { position: relative; display: block; margin: -1.25rem -1.25rem 1.125rem;
  aspect-ratio: 16 / 9; overflow: hidden; }
.ldna-proj__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-2) var(--ease-out); }
.ldna-proj:hover .ldna-proj__foto img { transform: scale(1.04); }
.ldna-proj__selo { position: absolute; inset-block-start: 0.625rem; inset-inline-end: 0.625rem;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: hsl(var(--brand-purple)); border-radius: 4px; padding: 0.25rem 0.5rem; }
.ldna-proj__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-4); }
.ldna-proj--destaque .ldna-proj__k { color: hsl(var(--brand-purple-light)); }
.ldna-proj__t { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  line-height: 1.25; color: #fff; margin: 0.5rem 0 0.5rem; text-wrap: balance; }
.ldna-proj--grande .ldna-proj__foto { aspect-ratio: 16 / 10; }
.ldna-proj--grande .ldna-proj__t { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.ldna-proj__r { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); flex: 1 1 auto; }
.ldna-proj--grande .ldna-proj__r { font-size: 0.9375rem; max-inline-size: 56ch; }
.ldna-proj__r strong { color: #fff; font-weight: 600; }
.ldna-proj .ldna-tags { margin-block-end: 0.875rem; }
.ldna-proj__ver { display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.84375rem; font-weight: 600; color: hsl(var(--brand-blue-light)); margin-block-start: auto; }
.ldna-proj__ver svg { flex-shrink: 0; transition: transform var(--dur-1) var(--ease-out); }
.ldna-proj:hover .ldna-proj__ver svg { transform: translateX(3px); }

/* --- faixa clara genérica ---
   Mesma anatomia da faixa de métricas do /sobre, sem o nome preso àquela
   seção. Sobre superfície clara valem as cores CHEIAS: os tints -light
   foram calibrados para fundo escuro e o roxo-light mede 2,42:1 aqui. */
.ldna-claro { position: relative; background: var(--surface-inverse);
  padding-block: var(--section-standard); }
.ldna-claro__costura { position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; }
.ldna-claro .ldna-kicker { color: var(--text-inverse-3); }
.ldna-claro__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.14;
  color: var(--text-inverse-1); margin: 0.875rem 0 0; text-wrap: balance; }

.ldna-chips--claro .ldna-chip { background-color: #fff; border-color: var(--border-inverse);
  color: var(--text-inverse-1); box-shadow: var(--elev-1); }
.ldna-chips--claro .ldna-chip__ico { color: hsl(var(--brand-purple)); }

/* --- as mesmas doze funcionalidades em três colunas de lista (opção B) ---
   Doze cards iguais é parede de card. Em lista com fio, os doze cabem em um
   terço da altura e continuam varredura de olho. */
.ldna-funcs { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 900px) { .ldna-funcs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ldna-funcs { grid-template-columns: 1fr; } }
.ldna-func { display: flex; align-items: center; gap: 0.625rem;
  padding-block: 0.8125rem; border-block-start: 1px solid var(--border-inverse);
  font-size: 0.9375rem; font-weight: 600; color: var(--text-inverse-1); }
.ldna-func svg { flex-shrink: 0; color: hsl(var(--brand-purple)); }

/* --- cidades atendidas: reusa a régua horizontal já existente --- */
.ldna-regua--cidades { margin-block-start: 1.5rem; }
.ldna-regua__mais { color: hsl(var(--brand-blue-light)) !important; }

/* --- outros serviços --- */
.ldna-outros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
@media (max-width: 620px) { .ldna-outros { grid-template-columns: 1fr; } }
.ldna-outros--largo { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ldna-outros--largo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .ldna-outros--largo { grid-template-columns: 1fr; } }
.ldna-outro { display: block; text-decoration: none;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.125rem;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.ldna-outro:hover { background-color: var(--surface-3); border-color: hsl(var(--brand-blue) / 0.4); }
.ldna-outro__k { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: hsl(var(--brand-blue-light)); }
.ldna-outro__t { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  line-height: 1.28; color: #fff; margin: 0.5rem 0 0.375rem; text-wrap: balance; }
.ldna-outro__p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-4); }

/* --- parágrafo de apoio da seção de região --- */
.ldna-regiao__p { margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.65; color: var(--text-3); }
.ldna-regiao__p strong { color: #fff; font-weight: 600; }

/* =====================================================================
   5j · TRÁFEGO PAGO — plataformas, incluído e cases com métrica
   ===================================================================== */

/* --- barra de logos no hero (opção B de s01) ---
   A prova desta página não é tempo de casa: é em quais plataformas a
   operação roda. As logos oficiais dizem isso sem uma palavra. */
.ldna-logos { padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); max-inline-size: 44rem; }
.ldna-logos__r { display: block; font-size: 0.8125rem; color: var(--text-4); margin-block-end: 1.125rem; }
.ldna-logos__lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; }
.ldna-logo { display: inline-flex; align-items: center; gap: 0.625rem; }
.ldna-logo svg { display: block; flex-shrink: 0; }
/* o nome fica junto da logo: logo sozinha não é acessível a quem não a
   reconhece, e o alt de um SVG decorativo não seria lido */
.ldna-logo { flex-direction: column; align-items: flex-start; gap: 0.1875rem; }
.ldna-logo__n { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700;
  color: #fff; white-space: nowrap; }
.ldna-logo__f { font-size: 0.75rem; color: var(--text-4); white-space: nowrap; }

/* --- plataformas em cards (opção A de s02) --- */
.ldna-plats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .ldna-plats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ldna-plats { grid-template-columns: 1fr; } }
.ldna-plat {
  display: flex; flex-direction: column;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.375rem;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ldna-plat:hover { border-color: hsl(var(--brand-blue) / 0.4); transform: translateY(-2px); }
.ldna-plat__n { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.25; color: #fff; margin: 0; }

/* Lista de formatos: o ponto médio sai do TEXTO e vira separador desenhado,
   que é o substituto declarado por reg-ponto-medio-racionado. Mesmas
   palavras, mesma ordem, e o separador não vai para leitor de tela. */
.ldna-fmt { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0;
  display: flex; flex-wrap: wrap; font-size: 0.8125rem; color: hsl(var(--brand-blue-light)); }
.ldna-fmt li + li::before { content: "·"; margin-inline: 0.4375rem; opacity: 0.55; }
.ldna-fmt--linha { margin: 0.3125rem 0 0; }
.ldna-plat__p { margin: 0; font-size: 0.84375rem; line-height: 1.6; color: var(--text-3); }

/* --- as mesmas quatro em linhas largas (opção B de s02) ---
   No card, a logo compete com o texto num espaço estreito. Em linha, a
   logo fica na margem e a descrição respira. */
.ldna-platl { padding-block: clamp(1.25rem, 2.6vw, 1.75rem);
  border-block-start: 1px solid var(--border); }
.ldna-platl:last-child { border-block-end: 1px solid var(--border); }
.ldna-platl__n { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.2; color: #fff; margin: 0; }
.ldna-platl__p { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.62;
  color: var(--text-3); max-inline-size: 68ch; }

/* --- o que está incluído, em cards brancos (opção A de s04) --- */
.ldna-incs { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
@media (max-width: 720px) { .ldna-incs { grid-template-columns: 1fr; } }
.ldna-inc { display: grid; grid-template-columns: 2rem 1fr; gap: 0.875rem; align-items: start;
  background: #fff; border: 1px solid var(--border-inverse); border-radius: var(--radius-2);
  padding: 1.125rem; box-shadow: var(--elev-1); }
.ldna-inc__n { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem;
  border-radius: var(--radius-1); font-family: var(--font-mono); font-weight: 700; font-size: 0.875rem;
  background: hsl(var(--brand-purple) / 0.12); color: hsl(var(--brand-purple)); }
.ldna-inc__t { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: var(--text-inverse-1); margin: 0.25rem 0 0.3125rem; }
.ldna-inc__p { margin: 0; font-size: 0.84375rem; line-height: 1.55; color: var(--text-inverse-2); }

/* --- os mesmos seis em lista numerada com fio (opção B de s04) ---
   Seis cards brancos sobre faixa clara é card dentro de card. Em lista,
   os seis passos leem como sequência, que é o que eles são. */
.ldna-incls { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 720px) { .ldna-incls { grid-template-columns: 1fr; } }
.ldna-incl { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.875rem;
  padding-block: 1.0625rem; border-block-start: 1px solid var(--border-inverse); }
.ldna-incl__n { grid-row: span 2; font-family: var(--font-mono); font-size: 0.8125rem;
  color: hsl(var(--brand-purple)); font-variant-numeric: tabular-nums; padding-block-start: 0.1875rem; }
.ldna-incl__t { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: var(--text-inverse-1); margin: 0 0 0.25rem; }
.ldna-incl__p { margin: 0; font-size: 0.84375rem; line-height: 1.55; color: var(--text-inverse-2); }

/* --- cases com métrica, bloco largo (opção A de s05) --- */
.ldna-casem { display: grid; grid-template-columns: 15rem 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(1.75rem, 3.4vw, 2.5rem); border-block-start: 1px solid var(--border); }
.ldna-casem:last-child { border-block-end: 1px solid var(--border); }
@media (max-width: 940px) { .ldna-casem { grid-template-columns: 1fr; gap: 1.125rem; } }
.ldna-casem__n { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 0.95; letter-spacing: -0.02em; }
.ldna-casem--azul .ldna-casem__n { color: hsl(var(--brand-blue-light)); }
.ldna-casem--roxo .ldna-casem__n { color: hsl(var(--brand-purple-light)); }
.ldna-casem__r { display: block; font-size: 0.78125rem; line-height: 1.4; color: var(--text-4);
  margin-block-start: 0.625rem; }
/* a citação é fala de operação, não depoimento assinado: sem aspas
   decorativas e sem itálico, que fingiriam uma atribuição que não existe */
.ldna-casem__cit { margin: 0 0 0.875rem; font-size: 1rem; line-height: 1.62; color: var(--text-2);
  max-inline-size: 62ch; }
.ldna-casem__cli { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: #fff; white-space: nowrap; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.625rem 1.125rem; }
@media (max-width: 940px) { .ldna-casem__cli { justify-self: start; } }

/* --- os mesmos dois em cards lado a lado (opção B de s05) --- */
.ldna-casesg { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) { .ldna-casesg { grid-template-columns: 1fr; } }
.ldna-casec { display: flex; flex-direction: column;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-block-start: 2px solid var(--border-forte);
  border-radius: var(--radius-2); padding: clamp(1.375rem, 2.4vw, 1.875rem); }
.ldna-casec--azul { border-block-start-color: hsl(var(--brand-blue)); }
.ldna-casec--roxo { border-block-start-color: hsl(var(--brand-purple)); }
.ldna-casec__n { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem); line-height: 0.95; letter-spacing: -0.02em; }
.ldna-casec--azul .ldna-casec__n { color: hsl(var(--brand-blue-light)); }
.ldna-casec--roxo .ldna-casec__n { color: hsl(var(--brand-purple-light)); }
.ldna-casec__r { display: block; font-size: 0.78125rem; line-height: 1.4; color: var(--text-4);
  margin: 0.625rem 0 1.125rem; max-inline-size: 34ch; }
.ldna-casec__cit { margin: 0 0 1.125rem; font-size: 0.9375rem; line-height: 1.62;
  color: var(--text-2); flex: 1 1 auto; }
.ldna-casec__cli { margin-block-start: 1.125rem; font-family: var(--font-display); font-weight: 700;
  font-size: 0.9375rem; color: #fff; }

/* --- link dentro de texto corrido (resposta de FAQ, corpo de artigo) ---
   Sublinhado com deslocamento, e nunca só cor: cor sozinha não é affordance
   suficiente para quem não distingue matiz. */
.ldna-link-texto { color: hsl(var(--brand-blue-light)); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease-out); }
.ldna-link-texto:hover { color: #fff; }

/* =====================================================================
   5k · REDES SOCIAIS — canais, tipos de conteúdo e grade de itens
   ===================================================================== */

/* --- canais: chip com a marca da rede em quadrado próprio ---
   As quatro marcas aqui estão completas e corretas, ao contrário do
   wordmark do Google, e por isso ficam. O nome vem sempre junto: marca
   sozinha não é acessível a quem não a reconhece. */
.ldna-canais { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
@media (max-width: 520px) { .ldna-canais { grid-template-columns: 1fr; } }
/* na régua os quatro correm em linha, e a grade some */
.ldna-canais--regua { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ldna-canal-r { display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: #fff;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-1); padding: 0.625rem 0.9375rem;
  transition: border-color var(--dur-1) var(--ease-out); }
.ldna-canal-r:hover { border-color: hsl(var(--brand-blue) / 0.45); }
.ldna-canal-r__ico { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem;
  border-radius: 7px; flex-shrink: 0; }

/* --- tipos de conteúdo no split (opção A de s02) --- */
.ldna-conteudo { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.875rem;
  align-items: start; background-color: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-2); padding: 1.125rem;
  transition: border-color var(--dur-1) var(--ease-out); }
.ldna-conteudo + .ldna-conteudo { margin-block-start: 0.75rem; }
.ldna-conteudo:hover { border-color: hsl(var(--brand-blue) / 0.4); }
.ldna-conteudo__ico { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--radius-1); background: rgb(255 255 255 / 0.06); }
.ldna-conteudo--azul .ldna-conteudo__ico { color: hsl(var(--brand-blue-light)); }
.ldna-conteudo--roxo .ldna-conteudo__ico { color: hsl(var(--brand-purple-light)); }
.ldna-conteudo__t { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: #fff; margin: 0.25rem 0 0.375rem; }
.ldna-conteudo__p { margin: 0; font-size: 0.84375rem; line-height: 1.55; color: var(--text-3); }

/* --- grade genérica de itens com ícone (três colunas) ---
   Serve qualquer bloco de N itens de peso igual com título curto e uma
   frase de apoio. Nasce aqui e vale para as demais páginas. */
.ldna-itens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .ldna-itens { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ldna-itens { grid-template-columns: 1fr; } }
.ldna-item { display: flex; flex-direction: column;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-2); padding: 1.375rem;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.ldna-item:hover { border-color: hsl(var(--brand-blue) / 0.4); transform: translateY(-2px); }
.ldna-item__ico { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--radius-1); background: rgb(255 255 255 / 0.06);
  color: hsl(var(--brand-blue-light)); margin-block-end: 1rem; }
.ldna-item__t { font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  line-height: 1.25; color: #fff; margin: 0 0 0.5rem; text-wrap: balance; }
.ldna-item__p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); }

/* --- a régua numerada na faixa clara ---
   Mesma anatomia da versão escura, só as cores viram as do lado claro.
   Sobre claro o acento tem de ser CHEIO: o roxo-light mede 2,42:1 aqui. */
.ldna-difs--claro .ldna-dif { border-inline-start-color: var(--border-inverse); }
@media (max-width: 900px) { .ldna-difs--claro .ldna-dif { border-block-start-color: var(--border-inverse); } }
.ldna-difs--claro .ldna-dif__n { color: hsl(var(--brand-purple)); }
.ldna-difs--claro .ldna-dif__t { color: var(--text-inverse-1); }
.ldna-difs--claro .ldna-dif__p { color: var(--text-inverse-2); }

/* --- cases: três por linha, e o rótulo de segmento no card --- */
.ldna-casesg--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .ldna-casesg--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ldna-casesg--3 { grid-template-columns: 1fr; } }
.ldna-casec__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-4); margin-block-end: 0.875rem; }
.ldna-casec--vermelho { border-block-start-color: hsl(var(--brand-red)); }
.ldna-casec--vermelho .ldna-casec__n { color: hsl(var(--brand-red-light)); }
.ldna-casem--vermelho .ldna-casem__n { color: hsl(var(--brand-red-light)); }

/* --- nota de rodapé de seção (ressalva, fonte, contexto) --- */
.ldna-nota-rodape { margin: 1.75rem 0 0; font-size: 0.78125rem; line-height: 1.55;
  color: var(--text-4); max-inline-size: 74ch; }

/* =====================================================================
   5l · IDENTIDADE VISUAL — mural de marcas, trilha de etapas e cases
        com a marca no lugar da foto
   ===================================================================== */

/* --- mural de marcas (s02) ---
   A página no ar mostrava dez letras em círculo no lugar de dez marcas,
   num carrossel de arrastar. Letra em círculo numa página que vende marca
   lê como asset que não carregou. Aqui a célula é o NOME e o segmento,
   igual para as dez, enquanto os arquivos das três que faltam não chegam.
   Opção A: régua contínua, separada por fio. */
.ldna-marcas { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .ldna-marcas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .ldna-marcas { grid-template-columns: repeat(2, 1fr); } }
.ldna-marca { display: flex; flex-direction: column; gap: 0.3125rem;
  padding: 1.125rem 1.25rem 1.125rem 0;
  border-block-start: 1px solid var(--border); }
/* as duas últimas linhas fecham o mural por baixo sem depender da contagem */
.ldna-marcas .ldna-marca:nth-last-child(-n+5) { border-block-end: 1px solid var(--border); }
@media (max-width: 1000px) { .ldna-marcas .ldna-marca:nth-last-child(-n+5) { border-block-end: 0; }
                             .ldna-marcas .ldna-marca:nth-last-child(-n+3) { border-block-end: 1px solid var(--border); } }
@media (max-width: 620px)  { .ldna-marcas .ldna-marca:nth-last-child(-n+3) { border-block-end: 0; }
                             .ldna-marcas .ldna-marca:nth-last-child(-n+2) { border-block-end: 1px solid var(--border); } }
.ldna-marca__n { font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  line-height: 1.2; color: #fff; text-wrap: balance; }
.ldna-marca__s { font-size: 0.75rem; color: var(--text-4); }

/* Opção B: as mesmas dez em células com borda, e não em régua. */
.ldna-marcas--grade { gap: 0.625rem; }
.ldna-marcas--grade .ldna-marca { padding: 1.125rem;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-1);
  transition: border-color var(--dur-1) var(--ease-out); }
.ldna-marcas--grade .ldna-marca:hover { border-color: hsl(var(--brand-purple) / 0.45); }
.ldna-marcas--grade .ldna-marca:nth-last-child(-n+5),
.ldna-marcas--grade .ldna-marca:nth-last-child(-n+3),
.ldna-marcas--grade .ldna-marca:nth-last-child(-n+2) { border-block-end: 1px solid var(--border); }

/* --- trilha de etapas (opção B de s03) ---
   As seis etapas SÃO uma sequência, e por isso o número é informação, não
   enfeite: reg-numeracao-so-em-sequencia é atendida nas duas opções. O que
   muda é a direção de leitura, vertical na régua e horizontal na trilha. */
.ldna-trilha { list-style: none; margin: 0; padding: 0; counter-reset: etapa;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 1.5rem; }
@media (max-width: 900px) { .ldna-trilha { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ldna-trilha { grid-template-columns: 1fr; gap: 1.5rem; } }
.ldna-etapa { position: relative; padding-block-start: 2.5rem; }
/* o fio horizontal que liga as etapas da mesma fileira */
.ldna-etapa::before { content: ""; position: absolute; inset-block-start: 1.0625rem;
  inset-inline-start: 2.5rem; inset-inline-end: -1.5rem; block-size: 1px;
  background: var(--border); }
.ldna-etapa:nth-child(3n)::before { display: none; }
@media (max-width: 900px) { .ldna-etapa:nth-child(3n)::before { display: block; }
                            .ldna-etapa:nth-child(2n)::before { display: none; } }
@media (max-width: 560px) { .ldna-etapa::before { display: none; } }
.ldna-etapa__n { position: absolute; inset-block-start: 0; inset-inline-start: 0;
  display: grid; place-items: center; inline-size: 2.125rem; block-size: 2.125rem;
  border-radius: 50%; border: 1px solid hsl(var(--brand-purple) / 0.5);
  background-color: var(--surface-0);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
  color: hsl(var(--brand-purple-light)); }
.ldna-etapa__t { font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  line-height: 1.25; color: #fff; margin: 0 0 0.5rem; text-wrap: balance; }
.ldna-etapa__p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); }

/* --- a marca do cliente no lugar da foto do case (s06) ---
   Não existe screenshot de branding: o que prova uma identidade é a marca.
   Os arquivos são os mesmos que o carrossel da home já publica. */
.ldna-proj__marca { position: relative; display: grid; place-items: center;
  margin: -1.25rem -1.25rem 1.125rem; padding: 1.75rem 1.25rem;
  min-block-size: 7.5rem; background-color: var(--surface-3);
  border-block-end: 1px solid var(--border); }
/* A altura é a do arquivo, não a da caixa: selo quadrado e wordmark largo
   têm pesos ópticos diferentes, e --logo-h traz a calibração que o README
   de assets/logos já registrou para o carrossel da home. Em valor absoluto,
   porque max-block-size em % dentro de caixa de altura automática é
   circular e o navegador ignora: foi o que deixou a LCA vazar a moldura. */
.ldna-proj__marca img { max-inline-size: 70%; max-block-size: calc(var(--logo-h, 2.75rem) * 1.15);
  inline-size: auto; block-size: auto; object-fit: contain; display: block;
  transition: transform var(--dur-2) var(--ease-out); }
.ldna-proj:hover .ldna-proj__marca img { transform: scale(1.04); }

/* O premiado ocupa a faixa inteira em cima, e os outros três a fileira de
   baixo. A versão que ocupava 2 colunas × 2 linhas abria um buraco vertical
   dentro do card e deixava o quarto sozinho numa fileira de três. */
.ldna-projs--marcas .ldna-proj--grande { grid-column: 1 / -1; }
@media (max-width: 640px) { .ldna-projs--marcas .ldna-proj--grande { grid-column: auto; } }
.ldna-projs--marcas .ldna-proj--grande .ldna-proj__marca { min-block-size: 9.5rem; }
.ldna-projs--marcas .ldna-proj--grande .ldna-proj__marca img { max-block-size: calc(var(--logo-h, 2.75rem) * 1.9); }
.ldna-projs--marcas .ldna-proj--grande .ldna-proj__r { flex: 0 0 auto; }

/* --- os mesmos quatro cases em linhas (opção B de s06) ---
   Em linha a marca fica na margem, num quadro fixo, e a descrição pega a
   medida de leitura inteira em vez da largura de um terço de grade. */
.ldna-casel { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.75rem;
  align-items: start; text-decoration: none;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-block-start: 1px solid var(--border); }
.ldna-casel:last-child { border-block-end: 1px solid var(--border); }
@media (max-width: 720px) { .ldna-casel { grid-template-columns: 1fr; gap: 1.125rem; } }
.ldna-casel__marca { display: grid; place-items: center;
  inline-size: 9.5rem; block-size: 4.75rem; padding: 0.75rem;
  background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-1); }
.ldna-casel__marca img { max-inline-size: 100%; max-block-size: var(--logo-h, 2.75rem);
  inline-size: auto; block-size: auto; object-fit: contain; display: block; }
.ldna-casel__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-4); }
.ldna-casel--destaque .ldna-casel__k { color: hsl(var(--brand-purple-light)); }
.ldna-casel__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.2; color: #fff;
  margin: 0.4375rem 0 0.625rem; }
.ldna-casel__r { margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.62;
  color: var(--text-3); max-inline-size: 68ch; }
.ldna-casel__r strong { color: #fff; font-weight: 600; }
/* o selo do premiado é o único acento da lista: dizer que um case é
   finalista nacional é informação, e não decoração da linha */
.ldna-casel__selo { display: inline-block; font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: hsl(var(--brand-purple)); border-radius: 4px;
  padding: 0.25rem 0.5rem; margin-block-end: 0.625rem; }

/* =====================================================================
   5m · CRM S/A — o antes e o depois, a pilha que uma assinatura absorve
        e a jornada de ponta a ponta
   ===================================================================== */

/* --- livro-razão de duas colunas ---
   Serve tanto ao "antes × com o CRM S/A" quanto ao "categoria × o que ela
   substitui". Duas colunas com cabeçalho próprio, linhas alinhadas na
   mesma base: a comparação só é honesta se os dois lados forem lidos na
   mesma altura, item a item. */
.ldna-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 720px) { .ldna-ledger { grid-template-columns: 1fr; gap: 2rem; } }
.ldna-ledger__cab { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding-block-end: 0.875rem;
  border-block-end: 1px solid var(--border-forte); }
.ldna-ledger__cab--antes { color: var(--text-4); }
.ldna-ledger__cab--depois { color: hsl(var(--brand-blue-light)); }
.ldna-ledger__col { list-style: none; margin: 0; padding: 0; }
.ldna-ledger__i { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.75rem;
  align-items: start; padding-block: 0.9375rem;
  border-block-end: 1px solid var(--border); font-size: 0.9375rem; line-height: 1.5; }
.ldna-ledger__i--antes { color: var(--text-4); }
.ldna-ledger__i--depois { color: var(--text-2); }
/* o marcador é desenhado, não é caractere: × e ✓ em texto vão para o
   leitor de tela como "multiplicação" e "marca de seleção" */
.ldna-ledger__m { display: grid; place-items: center; inline-size: 1.125rem;
  block-size: 1.125rem; margin-block-start: 0.1875rem; flex-shrink: 0; }
.ldna-ledger__i--antes  .ldna-ledger__m { color: var(--text-decorativo); }
.ldna-ledger__i--depois .ldna-ledger__m { color: hsl(var(--brand-blue-light)); }
.ldna-ledger__i b { color: #fff; font-weight: 600; }

/* --- as mesmas trocas em linha, uma por linha (opção B de s02) ---
   No livro-razão o leitor compara colunas; aqui compara pares. Quando o
   par é o que importa, a linha diz melhor: sai o de um lado, entra o do
   outro, com a seta no meio. */
.ldna-trocas { list-style: none; margin: 0; padding: 0; }
.ldna-troca { display: grid; grid-template-columns: 1fr 2rem 1fr; gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: center; padding-block: clamp(1rem, 2.2vw, 1.375rem);
  border-block-start: 1px solid var(--border); }
.ldna-troca:last-child { border-block-end: 1px solid var(--border); }
@media (max-width: 700px) { .ldna-troca { grid-template-columns: 1fr; gap: 0.5rem; } }
.ldna-troca__de { font-size: 0.9375rem; line-height: 1.5; color: var(--text-4); }
.ldna-troca__seta { display: grid; place-items: center; color: hsl(var(--brand-blue) / 0.7); }
@media (max-width: 700px) { .ldna-troca__seta { justify-items: start; } }
.ldna-troca__para { font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  line-height: 1.4; color: #fff; }

/* --- a pilha que uma assinatura absorve (opção B de s06) ---
   Uma linha por categoria: o nome à esquerda, as ferramentas que ela
   cobre em régua à direita. Sem preço nenhum, por decisão do dono: o
   argumento aqui é quantas contratações somem, não quanto custam. */
.ldna-pilha { list-style: none; margin: 0; padding: 0; }
.ldna-pilha__i { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1rem, 2.4vw, 2rem);
  align-items: baseline; padding-block: 1.0625rem;
  border-block-start: 1px solid var(--border); }
.ldna-pilha__i:last-child { border-block-end: 1px solid var(--border); }
@media (max-width: 760px) { .ldna-pilha__i { grid-template-columns: 1fr; gap: 0.5rem; } }
.ldna-pilha__n { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: #fff; }
.ldna-pilha__f { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; font-size: 0.84375rem; color: var(--text-4); }
.ldna-pilha__f li + li::before { content: "·"; margin-inline: 0.4375rem; opacity: 0.6; }

/* --- a jornada em linha vertical, com o que age em cada etapa (s07 B) ---
   O fio corre pela margem e liga os pontos: aqui a sequência não é só
   ordem, é passagem de bastão entre canal, CRM e IA. */
.ldna-fluxo { list-style: none; margin: 0; padding: 0; position: relative; }
.ldna-fluxo::before { content: ""; position: absolute; inset-block: 1.25rem 1.25rem;
  inset-inline-start: 0.6875rem; inline-size: 1px; background: var(--border); }
@media (max-width: 620px) { .ldna-fluxo::before { display: none; } }
.ldna-passo { position: relative; display: grid;
  grid-template-columns: 1.375rem 8.5rem 1fr; gap: clamp(0.875rem, 2vw, 1.5rem);
  align-items: baseline; padding-block: 1.0625rem; }
@media (max-width: 620px) { .ldna-passo { grid-template-columns: 1fr; gap: 0.375rem;
  padding-inline-start: 0; border-block-start: 1px solid var(--border); } }
.ldna-passo__p { inline-size: 1.375rem; block-size: 1.375rem; border-radius: 50%;
  background-color: var(--surface-0); border: 1px solid hsl(var(--brand-blue) / 0.55);
  align-self: start; margin-block-start: 0.1875rem; }
@media (max-width: 620px) { .ldna-passo__p { display: none; } }
/* quem age: o rótulo é informação, e não etiqueta decorativa */
.ldna-passo__q { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: hsl(var(--brand-blue-light)); }
.ldna-passo__t { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }
.ldna-passo__t strong { color: #fff; font-weight: 600; }

/* --- régua de integrações (s05, na faixa clara) ---
   Nomes tipográficos, não marcas: os arquivos de Claude, ChatGPT, Gemini
   e n8n não estão no projeto, e três marcas com um buraco no lugar da
   quarta lê como defeito. Mesmo veredito do wordmark do Google. */
.ldna-integra { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ldna-integra li { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--text-inverse-1); background-color: #fff;
  border: 1px solid var(--border-inverse); border-radius: var(--radius-1);
  padding: 0.5625rem 0.9375rem; box-shadow: var(--elev-1); }

/* na faixa clara o acento tem de ser CHEIO: os tints -light foram
   calibrados para fundo escuro e reprovam sobre #F3F5F9 */
.ldna-claro .ldna-linha__t { color: var(--text-inverse-1); }
.ldna-claro .ldna-linha__p { color: var(--text-inverse-2); }
.ldna-claro .ldna-linha { border-block-start-color: var(--border-inverse); }
.ldna-claro .ldna-linha:last-child { border-block-end-color: var(--border-inverse); }
.ldna-claro .ldna-linha__ico { color: hsl(var(--brand-purple)); }
.ldna-claro .ldna-lead { color: var(--text-inverse-2); }

/* --- linha com rótulo no lugar do número ---
   .ldna-linha nasceu para "número grande | conteúdo", e a coluna de
   9.375rem é a medida do número. Com um título de três palavras ali, o
   título quebra em quatro linhas e a descrição atravessa a tela inteira
   sem medida de leitura. A coluna passa a ser a do rótulo. */
.ldna-linha--rotulo { grid-template-columns: 17rem 1fr; align-items: baseline; }
@media (max-width: 800px) { .ldna-linha--rotulo { grid-template-columns: 1fr; gap: 0.5rem; } }
.ldna-linha--rotulo .ldna-linha__cab { align-items: baseline; gap: 0.625rem; }
.ldna-linha--rotulo .ldna-linha__ico { align-self: start; margin-block-start: 0.125rem; }
.ldna-linha--rotulo .ldna-linha__ico svg { inline-size: 1.125rem; block-size: 1.125rem; }
.ldna-linha--rotulo .ldna-linha__t { font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; }
.ldna-linha--rotulo .ldna-linha__p { max-inline-size: 62ch; }

/* =====================================================================
   11 · PASSADA MOBILE
   ---------------------------------------------------------------------
   Tudo aqui vale só abaixo de 640px: o desktop, que passou seção a seção
   no CP2, não é tocado por uma linha sequer.

   Duas coisas que a auditoria em 390px mostrou:

   1. RÓTULO PEQUENO DEMAIS. Kicker, selo e rótulo de card foram calibrados
      em 1440px, onde 10px em caixa alta com entreletra ainda lê. No celular,
      com a tela a um palmo do olho e sob luz de rua, não lê. O piso aqui é
      12px, que é o mínimo que a orientação de mobile do Google trata como
      texto legível.

   2. ALVO DE TOQUE BAIXO. O dedo não tem a precisão do ponteiro: o mínimo
      recomendado é 44px de altura. Vários links e botões estavam entre 16px
      e 42px. A correção é padding, não fonte maior: o texto fica do mesmo
      tamanho e a área de acerto cresce.
   ===================================================================== */
@media (max-width: 900px) {

  /* --- 1. piso de legibilidade dos rótulos --- */
  .ldna-kicker,
  .ldna-svc__f,
  .ldna-proj__k,
  .ldna-proj__selo,
  .ldna-outro__k,
  .ldna-caso__r,
  .ldna-casec__k,
  .ldna-casel__k,
  .ldna-casel__selo,
  .ldna-ledger__cab,
  .ldna-passo__q,
  .ldna-postl__data,
  .ldna-postl__min,
  .ldna-pilha__f,
  .ldna-nota-rodape,
  .ldna-canal__rotulo,
  .ldna-post__cat,
  .ldna-postl__ano,
  .ldna-tags li,
  .kicker { font-size: 0.75rem; }

  /* o selo continua menor que o rótulo ao lado, mas acima do piso */
  .ldna-proj__selo,
  .ldna-casel__selo { letter-spacing: 0.06em; }

}

/* Alvo de toque: quem manda é o ponteiro, não a largura. Tablet tem
   1024px e mesmo assim é dedo. */
@media (pointer: coarse) {

  /* --- 2. alvo de toque de 44px --- */
  .ldna-link,
  .ldna-outro,
  .ldna-proj__ver,
  .ldna-tipo__cta,
  .ldna-tipol__cta,
  .ldna-svc__cta,
  .ldna-svcl__cta,
  .ldna-canal-p__cta,
  .ldna-migalha a,
  .ldna-regua--cidades a,
  .ldna-endereco__btn,
  .ldna-cat,
  .ldna-catl,
  .ldna-pag__b {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* o acordeão da FAQ é o alvo mais usado da página: linha inteira, 48px */
  .ldna-faq__q { min-block-size: 48px; }

  /* rodapé: "Voltar ao topo" tinha 16px de altura */
  .rodape a,
  footer a[href^="#"] { min-block-size: 44px; display: inline-flex; align-items: center; }

  /* botões de ícone do chrome (menu e fechar) iam a 40px */
  .h-10.w-10, .w-10.h-10 { min-block-size: 44px; min-inline-size: 44px; }
}

/* --- rabo da passada mobile: o que ficou fora das classes ldna- ---
   O logo do topo e o do rodapé são links cuja altura é a da própria imagem,
   24px e 28px. O padding vertical dá o alvo sem mexer no desenho. */
@media (pointer: coarse) {
  header a[aria-label], footer a[aria-label] { padding-block: 0.625rem; }
}

/* --- Projeto ou case sem arquivo de imagem (2026-09-16) --------------------
   Mockup ainda não entregue pelo cliente: a moldura mostra a marca publicada
   ou, sem marca, o nome em tipografia. Mesmo veredito das marcas de identidade:
   nunca inicial em círculo, nunca screenshot de outro site no lugar. */
.ldna-proj__foto--marca { display: grid; place-items: center; background: hsl(var(--brand-ink-deep)); aspect-ratio: 16 / 9; }
.ldna-proj__foto--marca .ldna-proj__logo { inline-size: auto; block-size: auto; max-inline-size: 55%; max-block-size: 3.25rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.85; }
.ldna-proj:hover .ldna-proj__foto--marca .ldna-proj__logo { transform: none; }
.ldna-proj__nome, .ldna-casel__nome {
  font-family: var(--font-display, inherit); font-weight: 800; letter-spacing: -0.02em;
  color: rgb(255 255 255 / 0.85); font-size: clamp(1.375rem, 2.2vw, 1.75rem); text-align: center; padding: 1rem;
}
.ldna-casel__nome { font-size: 1.125rem; padding: 0; }

/* --- Capa do artigo e foto do autor (blog no banco, 2026-09-16) ---------- */
.ldna-artigo-capa { margin: 0; background: var(--surface-0); padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.ldna-artigo-capa img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-2); border: 1px solid var(--border); }
.ldna-autor__foto { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }

/* --- Identidade · marcas em cards com foto da aplicação (2026-09-16) ---- */
.ldna-marcas-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .ldna-marcas-cards { grid-template-columns: 1fr; } }
.ldna-marca-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-2); background: var(--surface-2); border: 1px solid var(--border); }
.ldna-marca-card img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 848 / 314; object-fit: cover; }
.ldna-marca-card__txt { padding: 1rem 1.125rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ldna-marca-card__t { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text-1); }
.ldna-marca-card__p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-3); }
/* case com imagem de aplicação no lugar do logo */
.ldna-casel__marca--img { inline-size: 11rem; block-size: 11rem; padding: 0; overflow: hidden; }
.ldna-casel__marca--img img { inline-size: 100%; block-size: 100%; max-block-size: none; object-fit: cover; }
@media (max-width: 720px) { .ldna-casel__marca--img { inline-size: 100%; block-size: auto; aspect-ratio: 1; } }
/* "O que entregamos": 4 itens, 4 por linha; 2 por linha no meio; 1 no celular */
.ldna-itens--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .ldna-itens--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ldna-itens--4 { grid-template-columns: 1fr; } }

/* --- Prova por segmento: marca com arquivo, na grade de marcas (2026-09-17) --- */
.ldna-marca--logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.ldna-marca--logo img { inline-size: auto; block-size: 2.25rem; max-inline-size: 9rem; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.85; }