:root {
  /* =====================
     Colores principales
  ===================== */
  --color-background: #ffffff;        /* Fondo general */
  --color-primary: #0073e6;           /* Links y elementos destacados */
  --color-primary-hover: #005bb5;     /* Hover links */
  --color-text: #3f403f;              /* Texto principal */
  --color-text-secondary: #5f5f5f;    /* Texto secundario, descripciones */
  --color-accent: #4fc3f7;            /* Color acento (preheader, botones, etc.) */
  --color-border: #e0e0e0;            /* Bordes y separadores */
  --color-footer-text: #fff;          /* Textos del footer principal */
  --color-breadcrumbs-text: #999;     /* Textos del breadcrumb principal */
  --color-breadcrumbs-hover: #777;    /* Textos del breadcrumb principal (hover) */

  /* =====================
     Estados de UI
  ===================== */
  --color-error: #d32f2f;
  --color-success: #388e3c;
  --color-warning: #f57c00;
  --color-info: #0288d1;

  /* =====================
     Backgrounds secundarios
  ===================== */
  --color-header-bg: var(--color-background);
  --color-footer-bg: #121212;
  --color-preheader-bg: var(--color-accent);

  /* ==========================================================
     COLORES CORPORATIVOS VUELA
     Compartidos por los menús de navegación
     ========================================================== */
  --color-rhazt: var(--color-preheader-bg);
  --color-empleate: #f5842a;
  --color-formate: #be65a8;
  --color-independizate: #05456c;
  --color-interesate: #eb3e24;
  --color-creativo: #f1c203;
}