@layer components {
  /* ===== Landing OmniLogik (identidad propia: azul #02468F + naranja #E16B17) ===== */
  .theme-omnilogik {
    --ol-blue: #02468F;
    --ol-orange: #E16B17;
    --ol-orange-bright: #FF8401;
    --ol-orange-deep: #C2560C;   /* naranja con texto blanco AA en botones */
    --ol-dark: #0A1628;
    /* Azul OmniLogik adaptado al tema: profundo en claro, claro en oscuro (eyebrows AA en ambos) */
    --primary: light-dark(#02468F, #4F9BE8);
    --primary-hover: light-dark(#033a73, #7DB8F0);
    --accent: var(--ol-orange);
  }

  /* Header: marca OmniLogik */
  .ol-brand img { height: 2.2rem; width: auto; }

  /* Header oscuro propio de la landing (coherente con el hero navy) */
  .theme-omnilogik .site-header {
    background: color-mix(in srgb, var(--ol-dark) 86%, transparent);
    border-bottom-color: rgba(255, 255, 255, .08);
  }
  .theme-omnilogik .site-header .ol-brand .logo-light { display: none; }
  .theme-omnilogik .site-header .ol-brand .logo-dark { display: block; }
  .theme-omnilogik .site-header .nav a { color: #E7EFF7; }
  .theme-omnilogik .site-header .nav a:hover { color: var(--ol-orange-bright); }
  /* El switch a KunanSoft usa el logo en blanco para leerse sobre el header navy. */
  .theme-omnilogik .site-header .nav__switch a { color: var(--ol-orange-bright); }
  .theme-omnilogik .site-header .nav__switch img { filter: brightness(0) invert(1); }
  .theme-omnilogik .site-header .theme-toggle,
  .theme-omnilogik .site-header .nav-toggle {
    color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2);
  }
  .theme-omnilogik .site-header .theme-toggle:hover,
  .theme-omnilogik .site-header .nav-toggle:hover { color: var(--ol-orange-bright); }
  .theme-omnilogik .site-header .lang-switch { color: #E7EFF7; }
  .theme-omnilogik .site-header .lang-switch:hover { color: var(--ol-orange-bright); background: rgba(255, 255, 255, .08); }
  .theme-omnilogik .site-header .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
  .theme-omnilogik .site-header .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
  /* En movil el panel desplegable hereda el navy para que el texto claro contraste */
  @media (max-width: 74.99rem) {
    .theme-omnilogik .nav { background: var(--ol-dark); border-bottom-color: rgba(255, 255, 255, .08); }
    .theme-omnilogik .nav a { color: #E7EFF7; }
  }

  /* Hero oscuro */
  .ol-hero {
    background:
      radial-gradient(620px 340px at 100% -8%, rgba(225, 107, 23, .14), transparent 60%),
      radial-gradient(960px 640px at -8% -12%, rgba(2, 70, 143, .42), transparent 62%),
      var(--ol-dark);
    color: #E7EFF7;
    padding-block: clamp(3rem, 8vw, 6rem);
  }
  .ol-hero__grid { display: grid; gap: var(--space-7); align-items: center; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 56rem) { .ol-hero__grid { grid-template-columns: 1.05fr .95fr; } }
  .ol-hero .eyebrow { color: var(--ol-orange-bright); }
  .ol-hero h1 { color: #fff; }
  .ol-hero__lead { color: #CBD8E6; max-width: 46ch; }
  .ol-hero__art { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; place-items: center; }
  .ol-hero__art img { display: block; width: 100%; max-width: 480px; height: auto; }

  /* Botón OmniLogik (CTA naranja, texto blanco con contraste AA) */
  .btn--ol { background: var(--ol-orange-deep); color: #fff; }
  .btn--ol:hover { background: var(--ol-orange); color: #fff; }
  .ol-hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
  .ol-hero .btn--ghost:hover { background: rgba(255, 255, 255, .1); }

  /* Badges de tiendas */
  .store-badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--space-4); }
  .store-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; min-height: 44px; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); color: #fff; font-size: var(--step--1); text-decoration: none; }
  .store-badge:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
  .store-badge svg { width: 1.1rem; height: 1.1rem; }

  /* Funciones */
  .ol-features { display: grid; gap: var(--space-4); }
  @media (min-width: 40rem) { .ol-features { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60rem) { .ol-features { grid-template-columns: repeat(3, 1fr); } }
  .ol-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
  .ol-feature__icon { width: 2.6rem; height: 2.6rem; color: var(--ol-orange); margin-bottom: var(--space-3); }
  .ol-feature h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
  .ol-feature p { color: var(--text-muted); margin: 0; font-size: var(--step--1); }

  /* Diferenciador IA */
  .ol-ai { background: linear-gradient(135deg, var(--ol-blue), #013257); color: #fff;
    border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); }
  .ol-ai .eyebrow { color: var(--ol-orange-bright); }
  .ol-ai h2 { color: #fff; }
  .ol-ai p { color: #CFE0F2; }
  .ol-ai__tag { display: inline-block; margin-top: var(--space-3); font-family: var(--font-display); font-weight: 600; color: #fff; }

  /* Casos de uso (segmentos) */
  .ol-cases { display: grid; gap: var(--space-4); }
  @media (min-width: 40rem) { .ol-cases { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .ol-cases { grid-template-columns: repeat(4, 1fr); } }
  .ol-case { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-5); transition: transform .25s ease, box-shadow .25s ease; }
  .ol-case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .ol-case__icon { width: 2.4rem; height: 2.4rem; color: var(--ol-orange); margin-bottom: var(--space-3); }
  .ol-case h3 { font-size: var(--step-0); margin: 0 0 var(--space-2); }
  .ol-case p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

  /* Apps */
  .ol-apps { display: grid; gap: var(--space-4); }
  @media (min-width: 52rem) { .ol-apps { grid-template-columns: repeat(3, 1fr); } }
  .ol-app { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-5); text-align: center; display: flex; flex-direction: column; }
  .ol-app__shot { background: #fff; border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); }
  .ol-app__shot img { max-height: 210px; max-width: 100%; width: auto; height: auto; margin: 0 auto; }
  .ol-app h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
  .ol-app p { color: var(--text-muted); font-size: var(--step--1); margin: 0 0 var(--space-4); }
  .ol-app .btn { margin-top: auto; }
}