:root {
  /* ==========================================================================
     SISTEMA DE DISEÑO Brifi - PALETA DE COLOR OFICIAL (ESCALAS 50-950)
     ========================================================================== */

  /* --- ESCALA 1: ROJO / TERRACOTA (Color Principal • 500 = #E7594E) --- */
  --color-terracotta-50:  #FDF4F3;
  --color-terracotta-100: #FDE5E3;
  --color-terracotta-200: #FBD0CD;
  --color-terracotta-300: #F8AFA9;
  --color-terracotta-400: #F18178;
  --color-terracotta-500: #E7594E; /* COLOR PRINCIPAL */
  --color-terracotta-600: #D33B2F;
  --color-terracotta-700: #B12E24;
  --color-terracotta-800: #932921;
  --color-terracotta-900: #7A2822;
  --color-terracotta-950: #42110D;

  /* --- ESCALA 2: AZUL PIZARRA / SLATE (Color Secundario • 600 = #485F78) --- */
  --color-slate-50:  #F6F7F9; /* COLOR DE FONDO SUAVE ALTERNATIVO */
  --color-slate-100: #EBEEF3;
  --color-slate-200: #D3DBE4; /* BORDES Y LÍNEAS SUTILES */
  --color-slate-300: #ACBCCD;
  --color-slate-400: #8099B0;
  --color-slate-500: #607C97;
  --color-slate-600: #485F78; /* COLOR SECUNDARIO */
  --color-slate-700: #3E5166;
  --color-slate-800: #364556;
  --color-slate-900: #313C49;
  --color-slate-950: #202731; /* NEGRO CORPORATIVO */

  /* --- ESCALA NEUTRA: BLANCO Y NEGRO --- */
  --color-white: #FFFFFF;
  --color-black: #1F2430;

  /* --- TOKENS SEMÁNTICOS DE APLICACIÓN --- */
  --color-primary: var(--color-terracotta-500);         /* #E7594E */
  --color-primary-hover: var(--color-terracotta-600);   /* #D33B2F */
  --color-primary-dark: var(--color-terracotta-700);    /* #B12E24 */
  --color-primary-subtle: var(--color-terracotta-50);   /* #FDF4F3 */
  --color-primary-border: var(--color-terracotta-200);  /* #FBD0CD */
  --color-terracotta-soft: var(--color-terracotta-200); /* #FBD0CD (Para badges e insignias) */

  --color-secondary: var(--color-slate-600);            /* #485F78 */
  --color-secondary-hover: var(--color-slate-700);      /* #3E5166 */
  --color-secondary-dark: var(--color-slate-800);       /* #364556 */
  --color-secondary-subtle: var(--color-slate-50);      /* #F6F7F9 */

  /* --- TIPOGRAFÍA Y TEXTOS --- */
  --color-text-main: #1F2430;
  --color-text-muted: var(--color-slate-600);           /* #485F78 */
  --color-text-light: var(--color-slate-400);           /* #8099B0 */

  /* --- LOS 3 ÚNICOS FONDOS OFICIALES DE LA WEB --- */
  --color-bg-white: #FFFFFF;                                /* 1. Fondo Principal Blanco */
  --color-bg-slate: var(--color-slate-100);                 /* 2. Fondo Azul Pizarra (Protocolo sencillo: #EBEEF3) */
  --color-bg-terracotta: var(--color-terracotta-50);        /* 3. Fondo Rojo / Terracota (Formas de participar: #FDF4F3) */

  --color-bg-page: var(--color-bg-white);
  --color-bg-alt: var(--color-bg-slate);
  --color-bg-sand: var(--color-bg-slate);
  --color-bg-soft-terracotta: var(--color-bg-terracotta);
  --color-bg-footer-bar: var(--color-bg-slate);

  /* --- BORDES --- */
  --color-border: var(--color-slate-200);               /* #D3DBE4 */
  --color-border-subtle: rgba(72, 95, 120, 0.12);

  /* --- FUENTES --- */
  --font-family-base: 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- MEDIDAS Y CONTENEDORES --- */
  --container-max-width: 1240px;
  --container-padding: 2rem;

  /* --- RADIOS DE ESQUINA --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-card: 32px;
  --radius-full: 9999px;

  /* --- SOMBRAS TÁCTILES ESTILO CPB --- */
  --shadow-btn: 3px 3px 0px #1F2430;
  --shadow-btn-hover: 4px 4px 0px #1F2430;
  --shadow-card: 0 8px 24px rgba(31, 36, 48, 0.04);
  --shadow-lg: 0 14px 40px rgba(31, 36, 48, 0.08);
}