@layer components {

  /* ---------- Marca (isotipo SVG + wordmark HTML en Helvetica) ---------- */
  .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); }
  .brand__mark { width: 2.9rem; height: 2.9rem; flex: none; }
  .brand__name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
  }
  .brand__name span { font-weight: 400; color: var(--text-muted); }
  /* El isotipo (swoosh multicolor con azul oscuro) se vuelve blanco en modo oscuro
     para mantener contraste, igual que el logo completo del footer. */
  :root[data-theme="dark"] .brand__mark { filter: brightness(0) invert(1); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand__mark { filter: brightness(0) invert(1); }
  }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .site-header__inner {
    min-height: var(--header-h);
    display: flex; align-items: center; gap: var(--space-4);
  }
  /* Safari encoge los flex items por debajo de su contenido mínimo y los textos
     nowrap se montan unos sobre otros (la marca sobre "Ecosistema"). Nada del
     header debe encoger: si no cabe, se pasa a hamburguesa (breakpoint abajo). */
  .site-header__inner > * { flex-shrink: 0; }
  .nav { margin-left: auto; }
  .nav ul { display: flex; gap: clamp(.4rem, 1.2vw, 1rem); align-items: center; }
  .nav a { color: var(--text); text-decoration: none; font-weight: 500; padding: .4rem .2rem; white-space: nowrap; }
  .nav a:hover { color: var(--primary); }
  /* Cambio entre sitios (KunanSoft <-> OmniLogik): logo de la marca destino, mismo lugar (último ítem).
     El color/peso es solo fallback del texto alt si la imagen no carga. */
  .nav__switch a { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; }
  .nav__switch img { height: 1.25rem; width: auto; max-width: none; opacity: .9; transition: opacity .2s ease; }
  .nav__switch a:hover img { opacity: 1; }
  .header-actions { display: flex; align-items: center; gap: var(--space-3); }

  /* Botón hamburguesa (móvil) */
  .nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; }
  /* El header lleva marca + 6 enlaces + acciones; el nav horizontal solo cabe en pantallas anchas.
     Por debajo de 75rem se usa la hamburguesa para evitar que los items se enciman (visto en Safari). */
  @media (min-width: 75rem) {
    .nav-toggle { display: none; }
    /* Nav de escritorio compacto: el contenido del home (marca + 6 enlaces + acciones)
       debe caber en el container de 1180px tambien con las metricas de fuente de macOS;
       sin esto el header desborda y en Safari los textos se montan. */
    .nav a { font-size: var(--step--1); }
    .header-actions { gap: var(--space-2); }
    .header-actions .btn { padding: .6rem 1rem; font-size: var(--step--1); }
  }
  @media (max-width: 74.99rem) {
    .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--bg);
      border-bottom: 1px solid var(--border); margin: 0; padding: var(--space-4) var(--space-5);
      transform: translateY(-120%); opacity: 0; visibility: hidden;
      transition: transform .25s ease, opacity .2s ease, visibility .25s; box-shadow: var(--shadow-md); }
    .nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .nav a { display: block; padding-block: .65rem; min-height: 44px; }
    /* Evitar overflow horizontal en la cabecera movil: los botones de accion pasan al menu */
    .header-actions .btn { display: none; }
    .brand__name { font-size: 1.25rem; }
  }
  .nav-only-mobile { display: none; }
  @media (max-width: 74.99rem) { .nav-only-mobile { display: list-item; } }

  /* ---------- Selector de idioma (ES/EN) ---------- */
  .lang-switch { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 .6rem;
    color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 600;
    font-size: var(--step--1); border-radius: var(--radius-sm); white-space: nowrap; }
  .lang-switch:hover { color: var(--primary); background: var(--surface); }

  /* ---------- Toggle de tema ---------- */
  .theme-toggle { width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); cursor: pointer; transition: background .2s, color .2s; }
  .theme-toggle:hover { color: var(--primary); }
  .theme-toggle .i-sun { display: none; }
  .theme-toggle .i-moon { display: block; }
  :root[data-theme="dark"] .theme-toggle .i-sun,
  .theme-toggle[data-resolved="dark"] .i-sun { display: block; }
  :root[data-theme="dark"] .theme-toggle .i-moon,
  .theme-toggle[data-resolved="dark"] .i-moon { display: none; }

  /* ---------- Botones ---------- */
  .btn { --_bg: var(--primary-strong); --_fg: var(--on-primary);
    display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
    padding: .72rem 1.25rem; border-radius: var(--radius-pill); border: 1px solid transparent;
    background: var(--_bg); color: var(--_fg); text-decoration: none; cursor: pointer;
    transition: transform .12s ease, background .2s ease, box-shadow .2s ease; box-shadow: var(--shadow-sm); }
  .btn:hover { background: var(--primary-strong-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn:active { transform: translateY(0); }
  .btn--ghost { --_bg: transparent; --_fg: var(--text); border-color: var(--border); box-shadow: none; }
  /* En hover el .btn:hover de arriba pinta el fondo azul fuerte; forzamos texto blanco
     para que sea legible (en oscuro --_fg ya era claro; este override no lo perjudica). */
  .btn--ghost:hover { --_fg: var(--on-primary); border-color: var(--primary-strong-hover); }
  .btn--lg { padding: .9rem 1.6rem; font-size: var(--step-1); }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }

  /* ---------- Hero ---------- */
  .hero { position: relative; padding-block: clamp(3rem, 6vw, 6rem); overflow: clip; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(60rem 40rem at 85% -10%, color-mix(in srgb, var(--brand-blue-bright) 18%, transparent), transparent 60%),
      radial-gradient(40rem 30rem at 0% 110%, color-mix(in srgb, var(--brand-gold) 14%, transparent), transparent 60%); }
  .hero__grid { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 56rem) { .hero__grid { grid-template-columns: 1.1fr .9fr; } }
  .hero h1 { margin-block: .3em .35em; }
  .hero__lead { font-size: var(--step-1); color: var(--text-muted); max-width: 48ch; }
  .hero__cta { margin-top: var(--space-5); }
  .hero__art { display: grid; place-items: center; }
  .hero__art img { width: min(78%, 22rem); filter: drop-shadow(var(--shadow-lg)); }
  /* Aurora del hero: blobs de color que derivan lento (la animación vive en @layer motion;
     sin motion quedan estáticos y siguen aportando un degradado suave). */
  .hero-aurora { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
  .hero-aurora::before, .hero-aurora::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
  .hero-aurora::before { width: 42rem; height: 42rem; top: -17rem; right: -11rem; opacity: .5;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-blue-bright) 55%, transparent), transparent 70%); }
  .hero-aurora::after { width: 34rem; height: 34rem; bottom: -15rem; left: -9rem; opacity: .42;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); }

  /* ---------- Tarjetas ---------- */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
    height: 100%; display: flex; flex-direction: column; }
  .card:hover { transform: translateY(-3px);
    box-shadow: var(--shadow-md), 0 10px 34px color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
  .card__icon { width: 3rem; height: 3rem; color: var(--primary); margin-bottom: var(--space-4); }
  .card h3 { margin-bottom: var(--space-2); }
  .card p { color: var(--text-muted); margin: 0; }
  /* CTA al pie de cada tarjeta de ecosistema (alineado abajo aunque varíe el texto) */
  .card__cta { margin-top: auto; padding-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .card__cta .badge { margin-top: 0; }
  /* Botón "Conoce ..." de un producto aún sin página (KunanBridge): se ve pero no navega */
  .btn.is-soon { opacity: .55; box-shadow: none; pointer-events: none; }
  /* Badge "Próximamente" (legible en claro y oscuro, a diferencia de .chip que es para fondos oscuros) */
  .badge { display: inline-block; margin-top: var(--space-4); font-family: var(--font-display);
    font-weight: 600; font-size: var(--step--1); padding: .25rem .75rem; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }

  /* ---------- Banda KunanBridge ---------- */
  .bridge { background:
      linear-gradient(135deg, var(--brand-blue), #002a4d 70%);
    color: #eaf3fc; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); box-shadow: var(--shadow-md); }
  .bridge .eyebrow { color: var(--brand-gold); }
  .bridge h2 { color: #fff; }
  .bridge p { color: #c4d8ec; }
  .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-5); }
  .chip { font-size: var(--step--1); font-weight: 600; padding: .4rem .85rem; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #eaf3fc; }
  .bridge__tag { display: inline-block; margin-top: var(--space-5); font-family: var(--font-display);
    font-weight: 700; color: var(--brand-gold); }

  /* ---------- Listas de servicios / valores ---------- */
  .pill-list { display: flex; flex-wrap: wrap; gap: .6rem; }
  .pill { padding: .45rem 1rem; border-radius: var(--radius-pill); background: var(--surface-2);
    border: 1px solid var(--border); font-weight: 500; font-size: var(--step--1); }
  .value { display: flex; gap: var(--space-3); align-items: flex-start; }
  .value__dot { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--primary); }
  .value h3 { font-size: var(--step-0); font-family: var(--font-display); margin-bottom: .15rem; }
  .value p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

  /* ---------- Prueba social (clientes) ---------- */
  .clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  @media (min-width: 36rem) { .clients { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 56rem) { .clients { grid-template-columns: repeat(6, 1fr); } }
  .client {
    background: #fff;                       /* fija blanco: los logos institucionales leen mejor en blanco en ambos temas */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    aspect-ratio: 3 / 2;
    display: grid; place-items: center;
    padding: var(--space-3);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .client img {
    max-height: 2.6rem; width: auto; max-width: 100%; object-fit: contain;
    filter: grayscale(1); opacity: .72;
    transition: filter .3s ease, opacity .3s ease;
  }
  .client:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .client:hover img { filter: none; opacity: 1; }

  /* ---------- Muro de clientes colapsable ----------
     Mejora progresiva: sin JS no se añade .is-collapsible y se ven los 76 logos. */
  .clients-wrap { position: relative; }
  .clients-wrap.is-collapsible { overflow: hidden; }
  .clients-wrap.is-collapsed::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 7rem;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
  }
  .clients-more { display: flex; justify-content: center; margin-top: var(--space-5); }

  /* ---------- Banda de confianza (stats) ---------- */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
    border-block: 1px solid var(--border); padding-block: var(--space-6); }
  @media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat { text-align: center; }
  .stat b { display: block; font-family: var(--font-display); font-weight: 700;
    font-size: var(--step-3); line-height: 1; color: var(--primary);
    font-variant-numeric: tabular-nums; }
  .stat span { display: block; margin-top: .35rem; font-size: var(--step--1); color: var(--text-muted); }

  /* ---------- Tarjetas de servicio numeradas (jerarquia distinta a las de ecosistema) ---------- */
  .tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .tier:hover { transform: translateY(-3px);
    box-shadow: var(--shadow-md), 0 10px 34px color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
  .tier__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1;
    color: color-mix(in srgb, var(--primary) 70%, var(--text-muted)); flex: none; }
  .tier h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
  .tier p { color: var(--text-muted); margin: 0; font-size: var(--step--1); }

  /* ---------- CTA final ---------- */
  .cta { text-align: center; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); }
  .cta .cluster { justify-content: center; }
  .cta__contact { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

  /* ---------- Footer ---------- */
  .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: var(--space-7) var(--space-5); margin-top: var(--space-8); }
  .footer-grid { display: grid; gap: var(--space-6); }
  @media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .footer-grid h3 { font-family: var(--font-display); font-size: var(--step-0); margin-bottom: var(--space-3); }
  .footer-grid a { color: var(--text-muted); text-decoration: none; }
  .footer-grid a:hover { color: var(--primary); }
  .footer-grid li + li { margin-top: .4rem; }
  .social { display: flex; gap: .6rem; margin-top: var(--space-3); }
  .social a { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
  .social a:hover { color: var(--on-primary); background: var(--primary); }
  .footer-bottom { margin-top: var(--space-6); padding-top: var(--space-4); padding-bottom: 3.25rem; border-top: 1px solid var(--border);
    color: var(--text-muted); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }

  /* Logos completos en el footer (KunanSoft: blanco en dark vía filtro; OmniLogik: swap de variante) */
  .footer-logo img { width: 210px; max-width: 100%; height: auto; }
  .footer-tagline { margin-top: var(--space-3); color: var(--text-muted); }
  .footer-product { margin-top: var(--space-5); }
  .footer-product__label { display: block; font-size: var(--step--1); color: var(--text-muted); margin-bottom: .5rem; }
  .footer-product img { width: 150px; max-width: 100%; height: auto; }
  .logo-dark { display: none; }
  :root[data-theme="dark"] .footer-logo img { filter: brightness(0) invert(1); }
  :root[data-theme="dark"] .logo-light { display: none; }
  :root[data-theme="dark"] .logo-dark { display: inline-block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-logo img { filter: brightness(0) invert(1); }
    :root:not([data-theme="light"]) .logo-light { display: none; }
    :root:not([data-theme="light"]) .logo-dark { display: inline-block; }
  }

  /* ---------- WhatsApp flotante ---------- */
  .wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; width: 3.4rem; height: 3.4rem;
    border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center;
    box-shadow: var(--shadow-lg); transition: transform .15s ease; }
  .wa-float:hover { transform: scale(1.06); }

  .skip-link { position: absolute; left: .5rem; top: -3rem; background: var(--primary); color: var(--on-primary);
    padding: .6rem 1rem; border-radius: var(--radius-sm); transition: top .15s; z-index: 100; }
  .skip-link:focus { top: .5rem; }
}