/*
 * ============================================
 * BNEXIA — PALETA DE COLORES OFICIAL
 * ============================================
 * Definiciones CSS custom properties para toda la web.
 * Cada color tiene su semantica de marca.
 * Uso preferente: variables CSS (--bnexia-*)
 * ============================================
 */

/* --- PALETA PRINCIPAL --- */
:root {
  /* Azul 1 — CONFIANZA */
  /* Refuerza la confianza y la solidez de BNEXIA.
     Presencia firme y profesional. */
  --bnexia-azul1: #191E39;
  --bnexia-azul1-rgb: 25, 30, 57;

  /* Azul 2 — CALMA */
  /* Aporta equilibrio y claridad visual.
     Acompaña el discurso profesional sin imponerse. */
  --bnexia-azul2: #1F428D;
  --bnexia-azul2-rgb: 31, 66, 141;

  /* Morado — ESTRATEGIA */
  /* Mirada estratégica y reflexiva.
     Analisis, criterio, toma de decisiones solidas. */
  --bnexia-morado: #7676AA;
  --bnexia-morado-rgb: 118, 118, 170;

  /* Azul 3 — EVOLUCION */
  /* Evolucion y vision de futuro.
     Tono moderno y dinamico. */
  --bnexia-azul3: #1FB5D7;
  --bnexia-azul3-rgb: 31, 181, 215;
}

/* --- GRADIENTES DE MARCA --- */
:root {
  /* Gradiente principal: Azul1 dominante → Azul3 */
  /* Usado en H1 y titulares hero - Más predominancia azul oscuro para toque moderno y elegante */
  --bnexia-gradient-main: linear-gradient(135deg, #191E39 0%, #191E39 25%, #1F428D 55%, #1FB5D7 100%);

  /* Gradiente acento: Azul2 dominante → Morado → Azul3 */
  /* Usado en CTAs, badges, elementos interactivos - Más predominancia azul oscuro */
  --bnexia-gradient-accent: linear-gradient(135deg, #1F428D 0%, #7676AA 50%, #1FB5D7 100%);

  /* Gradiente suave: Azul2 → Azul3 */
  /* Usado en fondos sutiles, hover states */
  --bnexia-gradient-subtle: linear-gradient(135deg, #1F428D 0%, #1FB5D7 100%);

  /* Gradiente hero: Azul1 dominante → Azul2 → Morado */
  /* Gradiente completo para secciones impactantes - Más predominancia azul oscuro */
  --bnexia-gradient-hero: linear-gradient(145deg, #191E39 0%, #191E39 30%, #1F428D 60%, #7676AA 100%);
}

/* --- TEXTOS GRADIENTE (usar en H1, H2 prominentes) --- */
/*
 * .gradient-text-main {
 *   background: var(--bnexia-gradient-main);
 *   -webkit-background-clip: text;
 *   -webkit-text-fill-color: transparent;
 *   background-clip: text;
 * }
 *
 * .gradient-text-accent {
 *   background: var(--bnexia-gradient-accent);
 *   -webkit-background-clip: text;
 *   -webkit-text-fill-color: transparent;
 *   background-clip: text;
 * }
 */

/* --- COLORES DE FONDO --- */
:root {
  /* Fondos principales */
  --bnexia-bg-white: #FFFFFF;
  --bnexia-bg-light: #F4F6FA;
  --bnexia-bg-dark: #0D1117;
  --bnexia-bg-darker: #0A0E14;

  /* Textos */
  --bnexia-text-primary: #191E39;
  --bnexia-text-secondary: #4A5568;
  --bnexia-text-muted: #718096;
  --bnexia-text-inverse: #FFFFFF;
  --bnexia-text-inverse-secondary: rgba(255, 255, 255, 0.7);

  /* Bordes y separadores */
  --bnexia-border-light: #E2E8F0;
  --bnexia-border-medium: #CBD5E0;
  --bnexia-border-dark: #1F428D;
}

/* --- ESTADOS Y FUNCIONALES --- */
:root {
  /* CTA / Accion principal */
  --bnexia-cta-bg: var(--bnexia-morado);
  --bnexia-cta-bg-hover: var(--bnexia-azul2);
  --bnexia-cta-text: #FFFFFF;

  /* CTA secundario (outline) */
  --bnexia-cta-outline-border: var(--bnexia-azul2);
  --bnexia-cta-outline-text: var(--bnexia-azul2);
  --bnexia-cta-outline-bg-hover: rgba(31, 66, 141, 0.08);

  /* Status */
  --bnexia-success: #22C55E;
  --bnexia-warning: #F59E0B;
  --bnexia-error: #EF4444;

  /* Focus ring */
  --bnexia-focus-ring: 0 0 0 3px rgba(118, 118, 170, 0.4);
}