/* ==========================================================================
   ⚠️  ARCHIVO AUTOGENERADO — NO EDITAR A MANO.
   Fuente: brand/brand.json v2.8.0 · Regenerar: node build.mjs
   NOOXIA — Design Tokens (paleta oficial ÚNICA)
   Importá este archivo en CUALQUIER app/web/pieza y usá SOLO estas variables.
   Modo claro por defecto; el oscuro con :root[data-theme="dark"] o el SO.
   ========================================================================== */

:root {
  /* ---- COLOR (modo claro) ---- */
  --nx-bg: #F5F8FF;
  --nx-surface: #EDF1FF;
  --nx-surface-2: #E2E8F8;
  --nx-text: #0D0D10;
  --nx-muted: #4B5568;
  --nx-muted-2: #626C7D;
  --nx-border: rgba(13,13,16,0.10);
  --nx-accent: #B5FB05;
  --nx-accent-hover: #A1E004;
  --nx-accent-text: #3B7000;
  --nx-on-accent: #0D0D10;
  --nx-error: #DC2626;
  --nx-raised: 6px 6px 14px rgba(31,38,60,0.12), -6px -6px 14px rgba(255,255,255,0.90);
  --nx-inset: inset 4px 4px 8px rgba(31,38,60,0.10), inset -4px -4px 8px rgba(255,255,255,0.80);
  --nx-pressed: inset 2px 2px 5px rgba(31,38,60,0.14), inset -2px -2px 5px rgba(255,255,255,0.70);
  --nx-shadow-soft: 0 14px 34px rgba(20,30,60,.10);
  --nx-glow-accent: 0 0 14px rgba(181,251,5,0.30);
  --nx-bento: 10px 10px 30px rgba(20,30,60,.12), inset 1px 1px 0 rgba(255,255,255,.90);
  --nx-bento-dark: 10px 10px 30px rgba(0,0,0,.15), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-bento-sm: 4px 4px 10px rgba(20,30,60,.10), inset 1px 1px 0 rgba(255,255,255,.80);
  --nx-shadow-bold-rest: 0 2px 8px rgba(0,0,0,.08);
  --nx-shadow-bold-hover: 0 4px 14px rgba(0,0,0,.14);
  --nx-shadow-bold-raised: 0 8px 24px rgba(0,0,0,.10);
  --nx-shadow-bold-modal: 0 16px 40px rgba(0,0,0,.14);
  --nx-sig-page: #F5F8FF;
  --nx-sig-base-hi: #FFFFFF;
  --nx-sig-base-lo: #E2E8F8;
  --nx-sig-base-edge: rgba(0,0,0,.03);
  --nx-sig-base-shadow: 10px 10px 30px rgba(0,0,0,.05), -10px -10px 30px #FFFFFF, inset 1px 1px 0 rgba(255,255,255,1);
  --nx-sig-base-shadow-sm: 6px 6px 18px rgba(0,0,0,.05), -6px -6px 18px #FFFFFF, inset 1px 1px 0 rgba(255,255,255,1);
  --nx-sig-base-text: #0D0D10;
  --nx-sig-base-muted: #4B5568;
  --nx-sig-base-line: #E2E8F8;
  --nx-sig-contrast-hi: #2F2F31;
  --nx-sig-contrast-lo: #1C1C1E;
  --nx-sig-contrast-edge: #0D0D10;
  --nx-sig-contrast-shadow: 10px 10px 30px rgba(0,0,0,.15), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-sig-contrast-shadow-sm: 6px 6px 18px rgba(0,0,0,.15), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-sig-contrast-text: #FFFFFF;
  --nx-sig-contrast-muted: #9CA3AF;
  --nx-sig-contrast-line: rgba(255,255,255,.14);
  --nx-sig-contrast-well: inset 3px 3px 8px rgba(0,0,0,.45);
  --nx-sig-accent-fill: #B5FB05;
  --nx-sig-accent-edge: #94CE04;
  --nx-sig-accent-shadow: 10px 10px 30px rgba(181,251,5,.2), inset 1px 1px 0 rgba(255,255,255,.5);
  --nx-sig-accent-shadow-sm: 6px 6px 18px rgba(181,251,5,.2), inset 1px 1px 0 rgba(255,255,255,.5);
  --nx-sig-accent-text: #0D0D10;
  --nx-sig-accent-muted: rgba(13,13,16,.7);
  --nx-sig-accent-line: rgba(13,13,16,.15);
  --nx-sig-btn-base-rest: 4px 4px 10px rgba(0,0,0,.05), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.05);
  --nx-sig-btn-base-hover: 2px 2px 5px rgba(0,0,0,.05), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.05);
  --nx-sig-btn-base-press: inset 4px 4px 8px rgba(0,0,0,.1), inset -4px -4px 8px #FFFFFF;
  --nx-sig-btn-base-edge: rgba(255,255,255,.5);
  --nx-sig-btn-contrast-rest: 4px 4px 10px rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.1), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-btn-contrast-hover: 2px 2px 5px rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.1), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-btn-contrast-press: inset 4px 4px 8px rgba(0,0,0,.6), inset -4px -4px 8px rgba(255,255,255,.05);
  --nx-sig-btn-contrast-edge: rgba(255,255,255,.05);
  --nx-sig-btn-accent-rest: 4px 4px 10px rgba(181,251,5,.4), inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.2);
  --nx-sig-btn-accent-hover: 2px 2px 5px rgba(181,251,5,.4), inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.2);
  --nx-sig-btn-accent-press: inset 4px 4px 8px rgba(0,0,0,.2), inset -4px -4px 8px rgba(255,255,255,.4);
  --nx-sig-action-base: 4px 4px 8px rgba(0,0,0,.1), -4px -4px 8px #FFFFFF, inset 1px 1px 2px rgba(255,255,255,1), inset -1px -1px 2px rgba(0,0,0,.05);
  --nx-sig-action-base-hover: 2px 2px 4px rgba(0,0,0,.1), -2px -2px 4px #FFFFFF, inset 1px 1px 2px rgba(255,255,255,1), inset -1px -1px 2px rgba(0,0,0,.05);
  --nx-sig-action-contrast: 4px 4px 8px rgba(0,0,0,.5), -4px -4px 8px rgba(255,255,255,.05), inset 1px 1px 1px rgba(255,255,255,.1), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-action-accent: 4px 4px 8px rgba(0,0,0,.3), -4px -4px 8px rgba(255,255,255,.4), inset 1px 1px 1px rgba(255,255,255,.2), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-action-press: inset 4px 4px 8px rgba(0,0,0,.1), inset -4px -4px 8px #E2E8F8;
  --nx-sig-pill-accent-shadow: 4px 4px 10px rgba(181,251,5,.3), inset 1px 1px 1px rgba(255,255,255,.5);
  --nx-sig-pill-contrast-shadow: 4px 4px 10px rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.1);
  --nx-sig-field-bg: #EDF1FF;
  --nx-sig-field-edge: rgba(13,13,16,.06);
  --nx-sig-field-shadow: inset 3px 3px 6px rgba(13,13,16,.06), inset -3px -3px 6px #FFFFFF;
  --nx-sig-field-focus: 0 0 0 3px rgba(181,251,5,.45);
  --nx-sig-overlay: rgba(13,13,16,.35);
  --nx-sig-danger: #DC2626;
  --nx-sig-danger-tint: rgba(220,38,38,.10);

  /* ---- SOBRE FONDO SIEMPRE OSCURO (card negra, footer, tooltip) ----
     FIJOS a propósito: no siguen el tema. --nx-text/--nx-muted se invierten y
     sobre una superficie oscura fija dejan texto negro sobre negro. Sobre #0D0D10: text 15.8:1 · muted 7.6:1. Ambos AA. */
  --nx-on-dark-text: #E5E7EB;
  --nx-on-dark-muted: #9CA3AF;
  --nx-on-dark-border: rgba(255,255,255,0.14);

  /* ---- TIPOGRAFÍA ---- */
  --nx-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --nx-weight-title: 600;
  --nx-weight-body: 400;
  --nx-weight-caption: 200;
  --nx-fs-h1: 2.5rem;  --nx-lh-h1: 1.15;
  --nx-fs-h2: 2rem;  --nx-lh-h2: 1.2;
  --nx-fs-h3: 1.5rem;  --nx-lh-h3: 1.25;
  --nx-fs-body: 1rem;  --nx-lh-body: 1.6;
  --nx-fs-small: 0.875rem;  --nx-lh-small: 1.5;
  --nx-fs-caption: 0.75rem;  --nx-lh-caption: 1.4;

  /* ---- ESPACIADO (base 8) ---- */
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 16px;
  --nx-space-4: 24px;
  --nx-space-5: 32px;
  --nx-space-6: 48px;
  --nx-space-7: 64px;
  --nx-space-8: 96px;
  --nx-space-2b: 12px;

  /* ---- RADIOS ---- */
  --nx-radius-sm: 8px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 16px;
  --nx-radius-card: 24px;
  --nx-radius-pill: 999px;
  --nx-radius-circle: 50%;
  --nx-radius-bento: 32px;
  --nx-radius-bento-sm: 20px;
  --nx-radius: 12px;

  /* ---- ESCALA HEAT (visualización de dato) ---- */
  --nx-heat-1: #EF4444;
  --nx-heat-2: #F59E0B;
  --nx-heat-3: #EAB308;
  --nx-heat-4: #84CC16;
  --nx-heat-5: #B5FB05;

  /* ---- ESCALA SERVICIOS (visualización de dato) ---- */
  --nx-servicios-agua: #38BDF8;
  --nx-servicios-luz: #FFB800;
  --nx-servicios-gas: #FB923C;
  --nx-servicios-municipal: #A78BFA;
  --nx-servicios-rentas: #4ECDC4;

  /* ---- MOTION ---- */
  --nx-dur-fast: 150ms;
  --nx-dur-base: 250ms;
  --nx-dur-slow: 400ms;
  --nx-ease-standard: cubic-bezier(.4,0,.2,1);
  --nx-ease-entrance: cubic-bezier(0,0,.2,1);
  --nx-ease-exit: cubic-bezier(.4,0,1,1);

  /* ---- FIRMA VISUAL: ritmo, tipografía y movimiento (brand.json → signature) ---- */
  --nx-sig-container: 1280px;
  --nx-sig-container-wide: 1440px;
  --nx-sig-page-pad: 24px;
  --nx-sig-gap: 20px;
  --nx-sig-section: 80px;
  --nx-sig-header-gap: 40px;
  --nx-sig-pad: 32px;
  --nx-sig-pad-lg: 40px;
  --nx-sig-pad-sm: 24px;
  --nx-sig-radius: 32px;
  --nx-sig-radius-sm: 20px;
  --nx-sig-radius-xs: 12px;
  --nx-sig-action: 48px;
  --nx-sig-disc: 32px;
  --nx-sig-disc-sm: 24px;
  --nx-sig-disc-lg: 64px;
  --nx-sig-button-pad-y: 10px;
  --nx-sig-button-pad-x: 24px;
  --nx-sig-chip-pad-y: 6px;
  --nx-sig-field-height: 48px;
  --nx-sig-field-pad-x: 20px;
  --nx-sig-heading-weight: 600;
  --nx-sig-heading-tracking: -0.03em;
  --nx-sig-heading-leading: 1.1;
  --nx-sig-h1: clamp(3rem, 5vw, 4.2rem);
  --nx-sig-h2: 2.5rem;
  --nx-sig-h2-lg: 3rem;
  --nx-sig-card-title: 1.8rem;
  --nx-sig-card-title-sm: 1.4rem;
  --nx-sig-lead: 1.15rem;
  --nx-sig-body: 1.05rem;
  --nx-sig-body-leading: 1.6;
  --nx-sig-stat: 2.5rem;
  --nx-sig-step: 4rem;
  --nx-sig-eyebrow: 0.8rem;
  --nx-sig-eyebrow-tracking: 2px;
  --nx-sig-nav: 0.95rem;
  --nx-sig-button: 0.95rem;
  --nx-sig-button-weight: 600;
  --nx-sig-nav-weight: 500;
  --nx-sig-list: 1.1rem;
  --nx-sig-faq: 1.2rem;
  --nx-sig-stat-label: 0.9rem;
  --nx-sig-small: 0.875rem;
  --nx-sig-label: 0.9rem;
  --nx-sig-lift: -2px;
  --nx-sig-press: 2px;
  --nx-sig-press-action: 4px;
  --nx-sig-z-sticky: 40;
  --nx-sig-z-dock: 50;
  --nx-sig-z-overlay: 100;
  --nx-sig-z-modal: 110;
  --nx-sig-z-toast: 200;
}

/* ============ MODO OSCURO (explícito) ============ */
:root[data-theme="dark"] {
  --nx-bg: #060606;
  --nx-surface: #111111;
  --nx-surface-2: #1A1A1A;
  --nx-text: #E5E7EB;
  --nx-muted: #9CA3AF;
  --nx-muted-2: #848D9E;
  --nx-border: rgba(255,255,255,0.06);
  --nx-accent: #B5FB05;
  --nx-accent-hover: #C9FC4D;
  --nx-accent-text: #B5FB05;
  --nx-on-accent: #0D0D10;
  --nx-error: #FF6B6B;
  --nx-raised: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  --nx-inset: inset 0 2px 8px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.03);
  --nx-pressed: inset 0 2px 6px rgba(0,0,0,0.55);
  --nx-shadow-soft: 0 16px 40px rgba(0,0,0,.55);
  --nx-glow-accent: 0 0 16px rgba(181,251,5,0.35);
  --nx-bento: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.06);
  --nx-bento-dark: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-bento-sm: 0 8px 20px rgba(0,0,0,.45), inset 1px 1px 0 rgba(255,255,255,.05);
  --nx-shadow-bold-rest: 0 2px 8px rgba(0,0,0,.40);
  --nx-shadow-bold-hover: 0 4px 14px rgba(0,0,0,.50);
  --nx-shadow-bold-raised: 0 8px 24px rgba(0,0,0,.55);
  --nx-shadow-bold-modal: 0 16px 40px rgba(0,0,0,.65);
  --nx-sig-page: #060606;
  --nx-sig-base-hi: #1C1C1E;
  --nx-sig-base-lo: #111111;
  --nx-sig-base-edge: rgba(255,255,255,.06);
  --nx-sig-base-shadow: 10px 10px 30px rgba(0,0,0,.5), -8px -8px 24px rgba(255,255,255,.02), inset 1px 1px 0 rgba(255,255,255,.07);
  --nx-sig-base-shadow-sm: 6px 6px 18px rgba(0,0,0,.45), inset 1px 1px 0 rgba(255,255,255,.06);
  --nx-sig-base-text: #E5E7EB;
  --nx-sig-base-muted: #9CA3AF;
  --nx-sig-base-line: rgba(255,255,255,.08);
  --nx-sig-contrast-hi: #F5F8FF;
  --nx-sig-contrast-lo: #DCE3F3;
  --nx-sig-contrast-edge: rgba(255,255,255,.6);
  --nx-sig-contrast-shadow: 10px 10px 30px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,1);
  --nx-sig-contrast-shadow-sm: 6px 6px 18px rgba(0,0,0,.5), inset 1px 1px 0 rgba(255,255,255,1);
  --nx-sig-contrast-text: #0D0D10;
  --nx-sig-contrast-muted: #4B5568;
  --nx-sig-contrast-line: rgba(13,13,16,.10);
  --nx-sig-contrast-well: inset 3px 3px 8px rgba(13,13,16,.18);
  --nx-sig-accent-fill: #B5FB05;
  --nx-sig-accent-edge: #94CE04;
  --nx-sig-accent-shadow: 10px 10px 30px rgba(181,251,5,.12), inset 1px 1px 0 rgba(255,255,255,.5);
  --nx-sig-accent-shadow-sm: 6px 6px 18px rgba(181,251,5,.12), inset 1px 1px 0 rgba(255,255,255,.5);
  --nx-sig-accent-text: #0D0D10;
  --nx-sig-accent-muted: rgba(13,13,16,.7);
  --nx-sig-accent-line: rgba(13,13,16,.15);
  --nx-sig-btn-base-rest: 4px 4px 10px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-btn-base-hover: 2px 2px 5px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-btn-base-press: inset 4px 4px 8px rgba(0,0,0,.7), inset -4px -4px 8px rgba(255,255,255,.03);
  --nx-sig-btn-base-edge: rgba(255,255,255,.06);
  --nx-sig-btn-contrast-rest: 4px 4px 10px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.1);
  --nx-sig-btn-contrast-hover: 2px 2px 5px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.1);
  --nx-sig-btn-contrast-press: inset 4px 4px 8px rgba(0,0,0,.2), inset -4px -4px 8px rgba(255,255,255,.7);
  --nx-sig-btn-contrast-edge: rgba(255,255,255,.6);
  --nx-sig-btn-accent-rest: 4px 4px 14px rgba(181,251,5,.22), inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.2);
  --nx-sig-btn-accent-hover: 2px 2px 6px rgba(181,251,5,.22), inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.2);
  --nx-sig-btn-accent-press: inset 4px 4px 8px rgba(0,0,0,.25), inset -4px -4px 8px rgba(255,255,255,.35);
  --nx-sig-action-base: 4px 4px 8px rgba(0,0,0,.5), -4px -4px 8px rgba(255,255,255,.03), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-action-base-hover: 2px 2px 4px rgba(0,0,0,.5), -2px -2px 4px rgba(255,255,255,.03), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-action-contrast: 4px 4px 8px rgba(0,0,0,.45), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.1);
  --nx-sig-action-accent: 4px 4px 8px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,.2), inset -1px -1px 1px rgba(0,0,0,.5);
  --nx-sig-action-press: inset 4px 4px 8px rgba(0,0,0,.7), inset -4px -4px 8px rgba(255,255,255,.03);
  --nx-sig-pill-accent-shadow: 4px 4px 12px rgba(181,251,5,.22), inset 1px 1px 1px rgba(255,255,255,.5);
  --nx-sig-pill-contrast-shadow: 4px 4px 10px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,1);
  --nx-sig-field-bg: #0B0B0C;
  --nx-sig-field-edge: rgba(255,255,255,.06);
  --nx-sig-field-shadow: inset 3px 3px 6px rgba(0,0,0,.6), inset -2px -2px 5px rgba(255,255,255,.03);
  --nx-sig-field-focus: 0 0 0 3px rgba(181,251,5,.35);
  --nx-sig-overlay: rgba(0,0,0,.6);
  --nx-sig-danger: #FF6B6B;
  --nx-sig-danger-tint: rgba(255,107,107,.12);
}

/* ============ MODO OSCURO (preferencia del SO) ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-bg: #060606;
    --nx-surface: #111111;
    --nx-surface-2: #1A1A1A;
    --nx-text: #E5E7EB;
    --nx-muted: #9CA3AF;
    --nx-muted-2: #848D9E;
    --nx-border: rgba(255,255,255,0.06);
    --nx-accent: #B5FB05;
    --nx-accent-hover: #C9FC4D;
    --nx-accent-text: #B5FB05;
    --nx-on-accent: #0D0D10;
    --nx-error: #FF6B6B;
    --nx-raised: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    --nx-inset: inset 0 2px 8px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.03);
    --nx-pressed: inset 0 2px 6px rgba(0,0,0,0.55);
    --nx-shadow-soft: 0 16px 40px rgba(0,0,0,.55);
    --nx-glow-accent: 0 0 16px rgba(181,251,5,0.35);
    --nx-bento: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.06);
    --nx-bento-dark: 0 16px 40px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,.05);
    --nx-bento-sm: 0 8px 20px rgba(0,0,0,.45), inset 1px 1px 0 rgba(255,255,255,.05);
    --nx-shadow-bold-rest: 0 2px 8px rgba(0,0,0,.40);
    --nx-shadow-bold-hover: 0 4px 14px rgba(0,0,0,.50);
    --nx-shadow-bold-raised: 0 8px 24px rgba(0,0,0,.55);
    --nx-shadow-bold-modal: 0 16px 40px rgba(0,0,0,.65);
    --nx-sig-page: #060606;
    --nx-sig-base-hi: #1C1C1E;
    --nx-sig-base-lo: #111111;
    --nx-sig-base-edge: rgba(255,255,255,.06);
    --nx-sig-base-shadow: 10px 10px 30px rgba(0,0,0,.5), -8px -8px 24px rgba(255,255,255,.02), inset 1px 1px 0 rgba(255,255,255,.07);
    --nx-sig-base-shadow-sm: 6px 6px 18px rgba(0,0,0,.45), inset 1px 1px 0 rgba(255,255,255,.06);
    --nx-sig-base-text: #E5E7EB;
    --nx-sig-base-muted: #9CA3AF;
    --nx-sig-base-line: rgba(255,255,255,.08);
    --nx-sig-contrast-hi: #F5F8FF;
    --nx-sig-contrast-lo: #DCE3F3;
    --nx-sig-contrast-edge: rgba(255,255,255,.6);
    --nx-sig-contrast-shadow: 10px 10px 30px rgba(0,0,0,.55), inset 1px 1px 0 rgba(255,255,255,1);
    --nx-sig-contrast-shadow-sm: 6px 6px 18px rgba(0,0,0,.5), inset 1px 1px 0 rgba(255,255,255,1);
    --nx-sig-contrast-text: #0D0D10;
    --nx-sig-contrast-muted: #4B5568;
    --nx-sig-contrast-line: rgba(13,13,16,.10);
    --nx-sig-contrast-well: inset 3px 3px 8px rgba(13,13,16,.18);
    --nx-sig-accent-fill: #B5FB05;
    --nx-sig-accent-edge: #94CE04;
    --nx-sig-accent-shadow: 10px 10px 30px rgba(181,251,5,.12), inset 1px 1px 0 rgba(255,255,255,.5);
    --nx-sig-accent-shadow-sm: 6px 6px 18px rgba(181,251,5,.12), inset 1px 1px 0 rgba(255,255,255,.5);
    --nx-sig-accent-text: #0D0D10;
    --nx-sig-accent-muted: rgba(13,13,16,.7);
    --nx-sig-accent-line: rgba(13,13,16,.15);
    --nx-sig-btn-base-rest: 4px 4px 10px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
    --nx-sig-btn-base-hover: 2px 2px 5px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
    --nx-sig-btn-base-press: inset 4px 4px 8px rgba(0,0,0,.7), inset -4px -4px 8px rgba(255,255,255,.03);
    --nx-sig-btn-base-edge: rgba(255,255,255,.06);
    --nx-sig-btn-contrast-rest: 4px 4px 10px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.1);
    --nx-sig-btn-contrast-hover: 2px 2px 5px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.1);
    --nx-sig-btn-contrast-press: inset 4px 4px 8px rgba(0,0,0,.2), inset -4px -4px 8px rgba(255,255,255,.7);
    --nx-sig-btn-contrast-edge: rgba(255,255,255,.6);
    --nx-sig-btn-accent-rest: 4px 4px 14px rgba(181,251,5,.22), inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.2);
    --nx-sig-btn-accent-hover: 2px 2px 6px rgba(181,251,5,.22), inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.2);
    --nx-sig-btn-accent-press: inset 4px 4px 8px rgba(0,0,0,.25), inset -4px -4px 8px rgba(255,255,255,.35);
    --nx-sig-action-base: 4px 4px 8px rgba(0,0,0,.5), -4px -4px 8px rgba(255,255,255,.03), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
    --nx-sig-action-base-hover: 2px 2px 4px rgba(0,0,0,.5), -2px -2px 4px rgba(255,255,255,.03), inset 1px 1px 1px rgba(255,255,255,.08), inset -1px -1px 1px rgba(0,0,0,.5);
    --nx-sig-action-contrast: 4px 4px 8px rgba(0,0,0,.45), inset 1px 1px 1px rgba(255,255,255,1), inset -1px -1px 1px rgba(0,0,0,.1);
    --nx-sig-action-accent: 4px 4px 8px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,.2), inset -1px -1px 1px rgba(0,0,0,.5);
    --nx-sig-action-press: inset 4px 4px 8px rgba(0,0,0,.7), inset -4px -4px 8px rgba(255,255,255,.03);
    --nx-sig-pill-accent-shadow: 4px 4px 12px rgba(181,251,5,.22), inset 1px 1px 1px rgba(255,255,255,.5);
    --nx-sig-pill-contrast-shadow: 4px 4px 10px rgba(0,0,0,.5), inset 1px 1px 1px rgba(255,255,255,1);
    --nx-sig-field-bg: #0B0B0C;
    --nx-sig-field-edge: rgba(255,255,255,.06);
    --nx-sig-field-shadow: inset 3px 3px 6px rgba(0,0,0,.6), inset -2px -2px 5px rgba(255,255,255,.03);
    --nx-sig-field-focus: 0 0 0 3px rgba(181,251,5,.35);
    --nx-sig-overlay: rgba(0,0,0,.6);
    --nx-sig-danger: #FF6B6B;
    --nx-sig-danger-tint: rgba(255,107,107,.12);
  }
}

/* ---- Helpers base ---- */
body        { background: var(--nx-bg); color: var(--nx-text); font-family: var(--nx-font); }
.nx-title   { font-weight: var(--nx-weight-title); }
.nx-caption { font-weight: var(--nx-weight-caption); color: var(--nx-muted); }
.nx-cta     { background: var(--nx-accent); color: var(--nx-on-accent); font-weight: var(--nx-weight-title);
              border: 0; border-radius: var(--nx-radius-pill); padding: var(--nx-space-2) var(--nx-space-4); }

/* ---- Estilo 1: NEUMÓRFICO — kit ../ui-kit/ ---- */
.nx-neu     { background: var(--nx-surface); box-shadow: var(--nx-raised); border-radius: var(--nx-radius); }

/* ---- Estilo 2: BOLD — kit ../ui-kit-bold/ ---- */
.nx-pill        { border-radius: var(--nx-radius-pill); }
.nx-card        { background: var(--nx-surface); box-shadow: var(--nx-shadow-soft); border-radius: var(--nx-radius-card); }
.nx-card-black  { background: #0D0D10; color: #FFFFFF; border-radius: var(--nx-radius-card); }
.nx-card-lime   { background: var(--nx-accent); color: #0D0D10; border-radius: var(--nx-radius-card); }
.nx-btn-bold    { background: #0D0D10; color: #FFFFFF; font-weight: 700; border: 0;
                  border-radius: var(--nx-radius-pill); padding: 13px 24px; }
.nx-icon-btn    { width: 46px; height: 46px; border-radius: var(--nx-radius-circle); display: inline-flex;
                  align-items: center; justify-content: center; border: 1.5px solid var(--nx-border); }

/* ---- Accesibilidad: motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}