@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.05rem; 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 66rem se usa la hamburguesa para evitar que los items se enciman (visto en Safari).
     66rem (1056px) es el punto donde el header mas ancho (OmniLogik, ~977px de contenido + gutter de 40px)
     esta a punto de sobremontarse (~1017px); por encima cabe en una sola fila con margen de seguridad. */
  @media (min-width: 66rem) {
    .nav-toggle { display: none; }
    /* Nav de escritorio compacto: el contenido (marca + enlaces + menú Productos + 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); padding: .4rem .15rem; }
    .nav ul { gap: clamp(.25rem, .7vw, .6rem); }
    .nav-mega > summary { padding: .4rem .15rem; }
    .header-actions { gap: var(--space-2); }
    .header-actions .btn { padding: .6rem 1rem; font-size: var(--step--1); }
  }
  @media (max-width: 65.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, .header-actions .header-link { display: none; }
    .brand__name { font-size: 1.25rem; }
  }
  .nav-only-mobile { display: none; }
  @media (max-width: 65.99rem) { .nav-only-mobile { display: list-item; } }
  /* Pantallas muy estrechas (<=360px): compactar la cabecera para evitar desborde.
     Se mantienen toggle y hamburguesa en 44px (tap target); solo encogen marca y gaps. */
  @media (max-width: 22.5rem) {
    .site-header__inner { gap: var(--space-2); }
    .header-actions { gap: var(--space-2); }
    .brand { gap: .4rem; }
    .brand__mark { width: 2.4rem; height: 2.4rem; }
    .brand__name { font-size: 1rem; letter-spacing: -.02em; }
    .lang-switch { padding: 0 .4rem; }
  }

  /* ---------- 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); }

  /* ---------- Enlace de texto del header (Ingresar): subordinado al CTA primario ---------- */
  .header-link { color: var(--text-muted); text-decoration: none; font-weight: 500;
    font-size: var(--step--1); white-space: nowrap; padding: .4rem .2rem; }
  .header-link:hover { color: var(--primary); }

  /* ---------- Barra de anuncio (Beta OmniLogik) ----------
     Franja superior, en flujo normal (se va con el scroll); el header sigue siendo sticky. */
  .announce { position: relative; display: flex; align-items: center; justify-content: center;
    gap: var(--space-3); background: var(--brand-blue); color: #fff;
    padding: .55rem 3rem; text-align: center; font-size: var(--step--1);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16), 0 2px 8px rgba(0, 0, 0, .18); }
  .announce__link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem;
    justify-content: center; color: inherit; text-decoration: none; }
  .announce__tag { font-family: var(--font-display); font-weight: 700; font-size: .72em;
    text-transform: uppercase; letter-spacing: .06em; padding: .14rem .55rem;
    border-radius: var(--radius-pill); background: var(--accent); color: #1a1a1a; }
  .announce__text { font-weight: 500; }
  .announce__cta { font-family: var(--font-display); font-weight: 700; text-decoration: underline;
    text-underline-offset: 3px; white-space: nowrap; }
  .announce__link:hover .announce__cta { color: var(--accent); }
  .announce__close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem; display: inline-grid; place-items: center; border: 0; cursor: pointer;
    background: transparent; color: #fff; opacity: .8; border-radius: var(--radius-sm);
    font-size: 1.25rem; line-height: 1; }
  .announce__close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
  @media (max-width: 36rem) {
    .announce { padding: .5rem .9rem .5rem 1rem; gap: .35rem .6rem; font-size: .8125rem; line-height: 1.3; }
    .announce__close { right: .35rem; }
  }

  /* ---------- Menú desplegable de Productos (mega) ----------
     <details> nativo: accesible por teclado y funciona SIN JS (en móvil se expande inline,
     en escritorio es un panel flotante). El JS solo añade cierre por Escape / clic fuera. */
  .nav-mega { }
  .nav-mega > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
    color: var(--text); font-weight: 500; white-space: nowrap; padding: .4rem .2rem;
  }
  .nav-mega > summary::-webkit-details-marker { display: none; }
  .nav-mega > summary::after {
    content: ""; width: .45rem; height: .45rem; border: 2px solid currentColor;
    border-top: 0; border-left: 0; transform: rotate(45deg) translateY(-1px); transition: transform .2s ease;
  }
  .nav-mega[open] > summary::after { transform: rotate(-135deg) translateY(1px); }
  .nav-mega > summary:hover { color: var(--primary); }
  .nav-mega__panel { display: grid; gap: var(--space-4); padding: var(--space-3) 0 var(--space-2); }
  .nav-mega__title { display: block; font-family: var(--font-display); font-weight: 700;
    font-size: var(--step-0); color: var(--text); text-decoration: none; white-space: nowrap; }
  .nav-mega__title:hover { color: var(--primary); }
  .nav-mega__tag { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: .1rem; }
  .nav ul.nav-mega__list { flex-direction: column; align-items: stretch; gap: .1rem; margin-top: .5rem; }
  .nav-mega__item { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted);
    text-decoration: none; font-weight: 500; padding: .4rem 0; min-height: 0; }
  .nav-mega__item:hover { color: var(--primary); }
  .nav-mega__hint { font-size: var(--step--1); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 .5rem; line-height: 1.5; }
  @media (min-width: 66rem) {
    /* El panel se ancla al contenedor del header y cae alineado a la derecha (sin desbordar) */
    .site-header__inner { position: relative; }
    .nav-mega__panel {
      position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
      width: min(46rem, 94vw); grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
      background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow-lg); padding: var(--space-5);
    }
    .nav-mega__item { font-size: var(--step--1); }
  }

  /* ---------- 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; }
  /* Fondo estático del hero retirado: lo aporta la aurora animada (evita radiales redundantes
     que neutralizaban el movimiento y diluían el blob dorado). */
  .hero__grid { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 56rem) { .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hero__art { align-self: start; margin-top: 100px; } }
  .hero h1 { margin-block: .3em .35em; font-weight: 700; letter-spacing: -.025em; }
  /* Subrayado dorado de firma bajo el titular (acento decorativo como forma, no texto fino sobre claro) */
  .hero h1::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: .6rem;
    border-radius: 1px; background: var(--accent); }
  .hero__lead { font-size: var(--step-1); color: var(--text-muted); max-width: 48ch; }
  .hero__cta { margin-top: var(--space-5); }
  /* Línea-puente del hero hacia la sección de sector público */
  .hero__publico { margin-top: var(--space-4); font-size: var(--step--1); color: var(--text-muted); max-width: 48ch; }
  .hero__publico a { font-weight: 600; }
  .hero__art { display: grid; place-items: center; }
  .hero__art img { width: min(78%, 22rem); filter: drop-shadow(var(--shadow-lg)); }
  /* Figura "Convergencia": tres pilares (IoT/telemetría, ciudades, IA) que confluyen en el
     isotipo oficial de KunanSoft. Estado base = encendido (lo que se ve sin JS o con
     prefers-reduced-motion); la animación vive en @layer motion. */
  .hero__art .hero-conv { width: min(100%, 34rem); height: auto; }
  .hero-conv .conv-lane { fill: none; stroke: light-dark(#C0CDDC, #34506E); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .hero-conv .conv-hex { fill: none; stroke: light-dark(#C0CDDC, #34506E); stroke-width: 1.5; stroke-opacity: .9; }
  .hero-conv .conv-lbl { fill: var(--text-muted); font-family: var(--font-body); font-size: 12px; letter-spacing: .03em; }
  .hero-conv .conv-hub-label { fill: var(--primary); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
  .hero-conv .conv-flow { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 14 150; opacity: 0; }
  .hero-conv .conv-flow--a { stroke: #0079FF; }
  .hero-conv .conv-flow--b { stroke: #0064E5; }
  .hero-conv .conv-flow--c { stroke: #378ADD; }
  .hero-conv .conv-glowc { opacity: .4; }
  .hero-conv .conv-hub { opacity: 1; }
  /* 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); }
  .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: .52;
    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; position: relative; overflow: hidden; }
  .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)); }
  /* Acento superior por tarjeta de ecosistema: rompe la monotonía de cajas iguales y resalta
     OmniLogik (el producto en producción) en dorado; las otras dos en azul de marca. */
  .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: color-mix(in srgb, var(--primary) 55%, transparent); }
  .grid-3 .card:nth-child(1)::before { background: var(--accent); }
  .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; }
  /* 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); }
  /* Variante inline pequeña para usar dentro de enlaces/botones (acceso Beta) */
  .badge--xs { margin-top: 0; padding: .1rem .45rem; font-size: .72em; line-height: 1.4;
    text-transform: uppercase; letter-spacing: .04em; }

  /* ---------- 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-1); 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); }
  /* Métricas integradas al pie del texto del hero (arriba del pliegue en móvil); reemplazan la banda suelta. */
  .hero__stats { margin-top: var(--space-6); border-block: 0; padding-block: 0; gap: var(--space-4) var(--space-5); }
  .hero__stats .stat { text-align: left; }
  .hero__stats .stat b { font-size: var(--step-2); }

  /* ---------- 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-1); 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; }
  /* Microseñales de confianza junto al CTA final (punto de decisión); el punto dorado es decorativo. */
  .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5);
    color: var(--text-muted); font-size: var(--step--1); }
  .trust-row li { display: inline-flex; align-items: center; gap: .5rem; }
  .trust-row li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; }
  .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; }
  .footer-channel + .footer-channel { margin-top: var(--space-4); }
  .footer-channel__role { font-weight: 600; color: var(--text); margin-bottom: .35rem; }
  .servicio-soporte { margin-top: var(--space-4); color: var(--text-muted); }
  .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; }
  .footer-legal a { color: var(--text-muted); text-decoration: none; }
  .footer-legal a:hover { color: var(--primary); }

  /* ---------- Contenido de texto largo (páginas legales) ---------- */
  .prose { max-width: 70ch; }
  .prose h2 { margin-top: var(--space-6); }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { margin-top: var(--space-5); }
  .prose p, .prose li { color: var(--text-muted); }
  .prose p { margin-top: var(--space-3); }
  .prose ul { margin-top: var(--space-3); padding-left: 1.2rem; list-style: disc; display: grid; gap: .3rem; }
  .prose a { color: var(--link); }
  .prose .lead { font-size: var(--step-1); color: var(--text); }
  .legal-meta { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-2); }

  /* 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; }
}