/* =========================================================
   tokens.css — 1702 Juntada Libre (versión Bootstrap 5.0.1)
   Override de variables Bootstrap + tokens propios.
   Cargar DESPUÉS de bootstrap.min.css.
   ========================================================= */

:root {
  /* ----- Paleta propia (referencias) ----- */
  --color-azul-base:      #283B56;
  --color-azul-profundo:  #0B1E3F;
  --color-azul-medio:     #1A2B5C;
  --color-rojo:           #EC1E2A;
  --color-blanco:         #FFFFFF;
  --color-offwhite:       #F7F4EE;
  --color-gris-azulado:   #6B7891;
  --color-verde-impacto:  #1F6B4A;
  --color-borde:          #E4E1DA;
  --color-borde-fuerte:   #C9C4B8;

  /* ----- Override de variables Bootstrap 5.0.1 ----- */
  /* Bootstrap usa --bs-* y nuestras clases btn-primary, etc. heredan de acá */
  --bs-primary: var(--color-rojo);
  --bs-primary-rgb: 236, 30, 42;
  --bs-secondary: var(--color-azul-base);
  --bs-secondary-rgb: 40, 59, 86;
  --bs-success: var(--color-verde-impacto);
  --bs-success-rgb: 31, 107, 74;
  --bs-info: var(--color-azul-medio);
  --bs-warning: #BA7517;
  --bs-warning-rgb: 186, 117, 23;
  --bs-danger: var(--color-rojo);
  --bs-danger-rgb: 236, 30, 42;
  --bs-light: var(--color-offwhite);
  --bs-light-rgb: 247, 244, 238;
  --bs-dark: var(--color-azul-profundo);
  --bs-dark-rgb: 11, 30, 63;

  --bs-body-bg: var(--color-offwhite);
  --bs-body-color: var(--color-azul-profundo);
  --bs-border-color: var(--color-borde);
  --bs-border-color-translucent: rgba(40, 59, 86, 0.15);
  --bs-link-color: var(--color-azul-base);
  --bs-link-hover-color: var(--color-rojo);

  --bs-font-sans-serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;        /* 16px */
  --bs-body-line-height: 1.45;
  --bs-body-font-weight: 400;

  --bs-border-radius: 0.5rem;       /* 8px */
  --bs-border-radius-sm: 0.25rem;   /* 4px */
  --bs-border-radius-lg: 1rem;      /* 16px */
  --bs-border-radius-pill: 999px;

  /* ----- Tokens propios (componentes a medida) ----- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px;

  --fs-xxs: 11px; --fs-xs: 13px; --fs-sm: 14px;
  --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px;
  --fs-xl: 28px;  --fs-xxl: 38px;
  --fs-hero: clamp(32px, 5vw, 56px);

  --fw-medium: 600; --fw-bold: 700; --fw-black: 900;

  /* Sombras con tinte azul (no negro) */
  --sh-1: 0 1px 2px rgba(11, 30, 63, 0.08);
  --sh-2: 0 4px 12px rgba(11, 30, 63, 0.10);
  --sh-3: 0 8px 28px rgba(11, 30, 63, 0.16);

  --header-h: 72px;
  --header-h-mobile: 60px;
  --tr-fast: 120ms ease-out;
  --tr-base: 200ms ease-out;
}

/* ----- Override tipográfico (más peso en titulares) ----- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-azul-profundo);
  font-weight: var(--fw-black);
  letter-spacing: -0.4px;
}

/* ----- Botones — overrides para que .btn-primary use rojo y respete el lenguaje ----- */
.btn {
  font-weight: var(--fw-bold);
  border-radius: var(--r-pill);
  padding: 0.625rem 1.375rem;
  letter-spacing: 0.2px;
  transition: transform var(--tr-fast), background-color var(--tr-fast), border-color var(--tr-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background-color: var(--color-rojo);
  border-color: var(--color-rojo);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #d6121d;
  border-color: #d6121d;
}
.btn-secondary {
  background-color: var(--color-azul-base);
  border-color: var(--color-azul-base);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--color-azul-profundo);
  border-color: var(--color-azul-profundo);
}
.btn-outline-secondary {
  color: var(--color-azul-base);
  border-color: var(--color-azul-base);
  border-width: 2px;
}
.btn-outline-secondary:hover {
  background-color: var(--color-azul-base);
  color: var(--color-blanco);
}

/* ----- Smooth scroll y compensación del header sticky ----- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (max-width: 991.98px) {
  html { scroll-padding-top: calc(var(--header-h-mobile) + 16px); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}