/* ═══════════════════════════════════════════════════════════
   APEX 360 — PALETA DE COLORES
   Versión inspirada en estética McKinsey:
   alto contraste, blanco editorial, azul profundo,
   grises sobrios y acento azul usado con moderación.
   ═══════════════════════════════════════════════════════════ */

:root {

    /* ──────────────────────────────────────────
       COLORES BASE / BRAND
    ────────────────────────────────────────── */

    /* Azul profundo / casi negro — color principal */
    --primary:       #051C2C;   /* Azul profundo institucional */
    --primary-light: #123047;   /* Azul medio para bloques, overlays, cards */
    --primary-dark:  #01111D;   /* Azul casi negro para hero y footer */

    /* Acento azul — reemplaza el dorado como acento principal */
    --accent:        #2251FF;   /* Azul vibrante para llamadas a la acción */
    --accent-dark:   #1238C2;   /* Hover, estados activos */
    --accent-light:  #DDE7FF;   /* Fondos suaves, badges, highlights */

    /* Secundario sobrio */
    --secondary:     #374151;   /* Gris grafito para íconos, bloques secundarios */


    /* ──────────────────────────────────────────
       TEXTO
    ────────────────────────────────────────── */

    --text-dark:    #111827;                /* Títulos fuertes sobre fondo claro */
    --text-on-dark: rgba(255,255,255,0.96); /* Texto sobre fondos oscuros */
    --text-body:    #374151;                /* Párrafos y cuerpo */
    --text-light:   #6B7280;                /* Metadata, fechas, labels secundarios */


    /* ──────────────────────────────────────────
       FONDOS
    ────────────────────────────────────────── */

    --bg-white: #FFFFFF;
    --bg-light: #F5F6F8;   /* Gris muy claro, limpio, editorial */


    /* ──────────────────────────────────────────
       BORDES
    ────────────────────────────────────────── */

    --border: #D9DEE7;   /* Bordes sutiles, más ejecutivos que decorativos */


    /* ══════════════════════════════════════════
       TOKENS DE BOTONES
    ══════════════════════════════════════════ */

    /* Botón principal — azul intenso */
    --btn-gold-bg:           #2251FF;
    --btn-gold-text:         #FFFFFF;
    --btn-gold-hover-bg:     #1238C2;
    --btn-gold-border:       #2251FF;
    --btn-gold-hover-border: #1238C2;
    --btn-gold-shadow:       rgba(34, 81, 255, 0.22);

    /* Botón oscuro — azul profundo */
    --btn-dark-bg:           #051C2C;
    --btn-dark-text:         #FFFFFF;
    --btn-dark-hover-bg:     #01111D;
    --btn-dark-border:       #051C2C;
    --btn-dark-hover-border: #01111D;
    --btn-dark-shadow:       rgba(5, 28, 44, 0.28);

    /* Botón outline — sobre fondo claro */
    --btn-outline-bg:           transparent;
    --btn-outline-text:         #051C2C;
    --btn-outline-border:       #051C2C;
    --btn-outline-hover-bg:     #051C2C;
    --btn-outline-hover-text:   #FFFFFF;
    --btn-outline-hover-shadow: rgba(5, 28, 44, 0.14);

    /* Botón outline — sobre fondo oscuro / hero */
    --btn-outline-dark-text:         rgba(255, 255, 255, 0.94);
    --btn-outline-dark-border:       rgba(255, 255, 255, 0.55);
    --btn-outline-dark-hover-bg:     rgba(255, 255, 255, 0.12);
    --btn-outline-dark-hover-border: rgba(255, 255, 255, 0.88);

    /* Filtros de blog / pills de categoría */
    --btn-filter-bg:           #FFFFFF;
    --btn-filter-text:         #374151;
    --btn-filter-border:       #D9DEE7;
    --btn-filter-active-bg:    #051C2C;
    --btn-filter-active-text:  #FFFFFF;
    --btn-filter-hover-border: #2251FF;
    --btn-filter-hover-text:   #051C2C;

}