:root {
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --spacing-huge: 96px;

  /* Border Radius: escala primitiva sobre cuadrícula de 8pt (subdivisiones de 4pt). */
  --radius-none: 0px;
  --radius-small: 4px;
  --radius-medium: 8px;

  /* Sombras y elevación */
  --shadow-floating: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);

  /* Opacity: primitivos */
  --opacity-60: 0.6;

  /* Colores de marca: primary = azul marino, secondary = dorado, tertiary = azul brillante. */
  --color-primary-1: #465474;
  --color-primary-2: #182951;
  --color-primary-3: #132141;

  --color-secondary-1: #FBF7F0;
  --color-secondary-2: #D9BD84;
  --color-secondary-3: #CFAC65;
  --color-secondary-4: #A68A51;

  --color-tertiary-1: #E8EFFC;
  --color-tertiary-2: #4278E7;
  --color-tertiary-3: #1356E1;
  --color-tertiary-4: #0F45B4;

  /* Colores neutros */
  --color-neutral-1: #FAFAFA;
  --color-neutral-2: #F4F4F4;
  --color-neutral-3: #E9E9E9;
  --color-neutral-4: #DDDDDD;
  --color-neutral-5: #D2D2D2;
  --color-neutral-6: #C7C7C7;
  --color-neutral-7: #9F9F9F;
  --color-neutral-8: #777777;
  --color-neutral-9: #505050;
  --color-neutral-10: #282828;

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Colores de estado */
  --color-success-1: #E8F0EB;
  --color-success-2: #45865D;
  --color-success-3: #176835;
  --color-success-4: #12532A;

  --color-warning-1: #FEF6EC;
  --color-warning-2: #F5B167;
  --color-warning-3: #F29D41;
  --color-warning-4: #C27E34;

  --color-error-1: #F9E6E6;
  --color-error-2: #CD3535;
  --color-error-3: #C00202;
  --color-error-4: #9A0202;

  /* Alias semánticos: uso previsto de los primitivos anteriores. */

  /* Fondos. "Superficies alternas" y "Fondo de componentes" quedan pendientes de definición por UX/UI. */
  --color-bg-global: var(--color-neutral-1);
  --color-bg-inactive: var(--color-neutral-3);

  /* Tipografía */
  --color-text-body: var(--color-neutral-10);
  --color-text-heading: var(--color-primary-2);
  --color-text-body-secondary: var(--color-neutral-9);
  --color-text-inverse: var(--color-neutral-1);
  --color-text-inactive: var(--color-neutral-9);
  --color-link-default: var(--color-tertiary-3);
  --color-link-hover: var(--color-tertiary-4);
  --color-link-inverse: var(--color-secondary-3);
  --color-link-hover-inverse: var(--color-secondary-2);

  /* Bordes */
  --color-border-divider: var(--color-neutral-6);
  --color-border-divider-inverse: var(--color-neutral-8);
  --color-border-input: var(--color-neutral-8);
  --color-border-inactive: var(--color-neutral-6);

  /* Overlay y elevación */
  --color-overlay-scrim: rgba(0, 0, 0, 0.75);

  /* Interacción: Active reutiliza los mismos colores que Hover. */
  --color-interaction-hover-dark-primary: var(--color-tertiary-4);
  --color-interaction-hover-dark-tertiary: var(--color-secondary-4);
  --color-interaction-hover-dark-secondary: var(--color-primary-3);
  --color-interaction-hover-light-primary: var(--color-tertiary-2);
  --color-interaction-hover-light-tertiary: var(--color-secondary-2);
  --color-interaction-hover-light-secondary: var(--color-primary-1);

  /* Accesibilidad */
  --color-focus-ring: var(--color-tertiary-3);

  /* Feedback semántico: éxito */
  --color-surface-success-subtle: var(--color-success-1);
  --color-surface-success-strong: var(--color-success-3);
  --color-text-success-default: var(--color-success-3);
  --color-border-success-strong: var(--color-success-3);
  --color-icon-success-default: var(--color-success-3);

  /* Feedback semántico: alerta */
  --color-surface-warning-subtle: var(--color-warning-1);
  --color-surface-warning-strong: var(--color-warning-3);
  --color-text-warning-default: var(--color-neutral-10);
  --color-border-warning-strong: var(--color-warning-3);
  --color-icon-warning-default: var(--color-warning-3);

  /* Feedback semántico: error. */
  --color-surface-error-subtle: var(--color-error-1);
  --color-surface-error-strong: var(--color-error-3);
  --color-text-error-default: var(--color-error-3);
  --color-border-error-strong: var(--color-error-3);
  --color-icon-error-default: var(--color-error-3);

  /* Texto blanco compartido por los tres estados de feedback cuando vive sobre un fondo -strong. */
  --color-text-feedback-inverse: var(--color-white);
}

/* Container global del sitio: 1440px en desktop (override de Bootstrap, que trae 1140px). */
@media (min-width: 1200px) {
  .container {
    max-width: 1440px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Arial, sans-serif;
    color: #0d72b5;
    font-weight: 600;
}

/* Escala modular (Desktop): Major Third 1.25, redondeada a grid de 8px. */
h1 {
    font-size: 60px;
    line-height: 1.1;
}

h2 {
    font-size: 48px;
    line-height: 1.1;
}

h3 {
    font-size: 40px;
    line-height: 1.1;
}

h4 {
    font-size: 32px;
    line-height: 1.2;
}

h5 {
    font-size: 24px;
    line-height: 1.2;
}

h6 {
    font-size: 20px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    /* Escala modular (Mobile) */
    h1 {
        font-size: 40px;
        line-height: 1.1;
    }

    h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    h3 {
        font-size: 28px;
        line-height: 1.2;
    }

    h4 {
        font-size: 24px;
        line-height: 1.2;
    }

    h5 {
        font-size: 20px;
        line-height: 1.2;
    }

    h6 {
        font-size: 18px;
        line-height: 1.2;
    }
}

.text-body-large,
.text-body-base,
.text-body-small,
.text-caption {
    font-family: Arial, sans-serif;
    font-weight: 400;
}

.text-body-large {
    font-size: 18px;
    line-height: 24px;
}

.text-body-base {
    font-size: 16px;
    line-height: 1.5;
}

.text-body-small {
    font-size: 14px;
    line-height: 20px;
}

.text-caption {
    font-size: 12px;
    line-height: 1.5;
}