@charset "UTF-8";

/* ==========================================================
   PALETA Y TOKENS — NesuxTech Solutions
   ==========================================================
   Este archivo es el sistema de diseño: la escala de color, los roles y las
   medidas. No contiene ni un solo estilo de componente.

   Va separado a propósito. Antes vivía dentro de styles.css, y presentacion.html
   —que tiene diseño propio y no carga styles.css— se quedaba sin variables.
   Cárgalo SIEMPRE antes de cualquier otra hoja.
   ========================================================== */

:root {
    /* ==========================
       ESCALA DE MARCA — matiz 227°, saturación 81%
       ==========================
       Once pasos (50 → 950) generados desde un solo matiz. Cubren fondos,
       bordes, texto, botones y estados: es la escala de la que sale todo el
       azul del sitio. No añadas azules fuera de ella.

       La saturación se curva en los extremos a propósito: al 97% de luz el
       color se lava y al 10% se vuelve tinta irreal, así que 50 y 950 bajan. */
    --azul-50:  #f5f7fc;
    --azul-100: #e7ebfb;
    --azul-200: #c6d1f9;
    --azul-300: #9caff5;
    --azul-400: #6784ef;
    --azul-500: #3b61ea;
    --azul-600: #1844e4;
    --azul-700: #173aba;
    --azul-800: #183086;
    --azul-900: #121f4e;
    --azul-950: #0b122a;

    /* ==========================
       ESCALA NEUTRA — mismo matiz, saturación 14%
       ==========================
       Grises fríos, no grises muertos: comparten el matiz de la marca, así que
       conviven con el azul en vez de pelearse con él. */
    --neutro-50:  #f8f8f9;
    --neutro-100: #eff0f3;
    --neutro-200: #dbdde3;
    --neutro-300: #c1c4d0;
    --neutro-400: #9fa4b6;
    --neutro-500: #848aa2;
    --neutro-600: #6d7490;
    --neutro-700: #5b6176;
    --neutro-800: #464a58;
    --neutro-900: #2b2e36;
    --neutro-950: #18191d;

    /* Triples RGB de los pasos que se usan con transparencia.
       Permiten rgba(var(--azul-600-rgb), 0.14) sin repetir el color. */
    --azul-300-rgb:   156, 175, 245;
    --azul-400-rgb:   103, 132, 239;
    --azul-500-rgb:    59,  97, 234;
    --azul-600-rgb:    24,  68, 228;
    --azul-700-rgb:    23,  58, 186;
    --azul-800-rgb:    24,  48, 134;
    --azul-900-rgb:    18,  31,  78;
    --azul-950-rgb:    11,  18,  42;
    --neutro-300-rgb: 193, 196, 208;
    --neutro-400-rgb: 159, 164, 182;

    /* ==========================
       ROLES — qué paso hace qué
       ==========================
       Los nombres de rol son los que usa el resto de la hoja. Si mañana cambia
       el matiz de la marca, se cambia la escala de arriba y esto sigue valiendo.

       Ojo: la interfaz es oscura, así que los roles son el espejo de los de una
       interfaz clara. Donde un sitio claro pone el fondo en 50 y el texto en
       800, aquí el fondo va en 950 y el texto en 50. */
    --primary-color: var(--azul-600);   /* acción: botón primario, enlaces */
    --primary-dark:  var(--azul-700);   /* acción presionada */
    --primary-light: var(--azul-500);   /* acción al pasar el ratón */
    --accent-color:  var(--azul-400);   /* realce como forma: bordes, iconos */
    --accent-text:   var(--azul-300);   /* realce como texto — 7.4:1 sobre tarjeta */
    --accent-secondary: var(--azul-500);

    --dark-bg:   var(--azul-900);       /* fondo de sección */
    --darker-bg: var(--azul-950);       /* fondo de página */
    /* Elevación: cada superficie que se levanta sube un paso de la escala.
       Con la tarjeta al mismo valor que su sección sólo la delataba el borde. */
    --card-bg:   rgba(var(--azul-800-rgb), 0.55);

    --white:      var(--neutro-50);    /* texto principal — 17.4:1 sobre el fondo */
    --gray-light: var(--neutro-300);   /* texto secundario — 10.6:1 */
    --gray:       var(--neutro-400);   /* texto de apoyo — 7.5:1
                                          Antes era var(--gray) y daba 3.5:1: por
                                          debajo del 4.5:1 que pide WCAG AA. */

    --border-subtle: rgba(var(--azul-500-rgb), 0.18);
    --border-hover:  rgba(var(--azul-400-rgb), 0.50);

    /* ==========================
       SEMÁNTICOS — el 10% que no sale de la escala
       ==========================
       Éxito, aviso y error tienen que leerse como éxito, aviso y error: si
       salieran del azul de marca dejarían de significar nada. */
    --exito:  #2fb67c;
    --aviso:  #e0a33a;
    --error:  #e05a4f;
    --whatsapp:        #25d366;   /* color de marca de WhatsApp, no nuestro */
    --whatsapp-oscuro: #128c7e;

    /* Triples RGB de los semánticos, para sus variantes con transparencia */
    --exito-rgb:     47, 182, 124;
    --aviso-rgb:    224, 163,  58;
    --error-rgb:    224,  90,  79;
    --whatsapp-rgb:  37, 211, 102;

    /* Sintaxis de la ventana de código: fuera de la escala a propósito, porque
       ahí el color no decora, indica qué es cada token. */
    --sintaxis-keyword:  #b48ce8;
    --sintaxis-variable: #e0776f;
    --sintaxis-property: var(--azul-300);
    --sintaxis-string:   #86c08a;

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Tipografia */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Orbitron', sans-serif;

    /* Sombras corporativas */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.4);
    --shadow-blue: 0 8px 32px rgba(var(--azul-600-rgb), 0.32);
    --shadow-card: 0 4px 24px rgba(var(--azul-600-rgb), 0.14), 0 0 1px rgba(var(--azul-500-rgb), 0.22);
    --glow-cyan:   0 0 20px rgba(var(--azul-500-rgb), 0.30), 0 0 40px rgba(var(--azul-500-rgb), 0.10);
    --glow-purple: 0 0 20px rgba(var(--azul-400-rgb), 0.26), 0 0 40px rgba(var(--azul-400-rgb), 0.10);
    --glow-green:  0 0 20px rgba(var(--exito-rgb), 0.25);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
}