@layer components {
  /* ===== Landing KunanBridge (marca de IA, identidad corporativa: azul #004D8B + dorado) =====
     Reusa el lenguaje visual del home (hero con aurora + subrayado dorado, tarjetas con acento
     lineal, banda bridge, chips). Aqui solo va el tema y el showcase de OmniDocs. */
  .theme-kunanbridge { --accent: var(--brand-gold); }

  /* El wordmark del switch a KunanSoft se vuelve blanco en oscuro (header adaptable al tema). */
  :root[data-theme="dark"] .theme-kunanbridge .nav__switch img { filter: brightness(0) invert(1); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-kunanbridge .nav__switch img { filter: brightness(0) invert(1); }
  }

  /* Showcase OmniDocs: pipeline lineal de 4 pasos */
  .kb-pipeline { display: grid; gap: var(--space-4); }
  @media (min-width: 52rem) { .kb-pipeline { grid-template-columns: repeat(4, 1fr); } }
  .kb-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
  .kb-step__icon { width: 2.4rem; height: 2.4rem; color: var(--primary); margin-bottom: var(--space-3); }
  .kb-step h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
  .kb-step p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

  /* Lista de diferenciadores de OmniDocs */
  .kb-points { display: grid; gap: var(--space-4); margin: 0; }
  .kb-point { display: flex; gap: .7rem; align-items: flex-start; }
  .kb-point svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--primary); margin-top: .15rem; }
  .kb-point b { font-weight: 600; display: block; }
  .kb-point span { color: var(--text-muted); }

  /* Cifra/clave destacada del antes-despues */
  .kb-key { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.1; color: var(--primary); }
}