/* ============================================================
   BRAINPOWER GUATEMALA — Tokens de diseño
   Derivados de la gráfica de redes sociales de la marca:
   gradientes azul -> morado -> cyan, pills moradas, acentos
   con destellos/asteriscos, titulares blancos ultra-bold.
   ============================================================ */

:root {
  /* ---- Color: marca ----
     Paleta actualizada según la propuesta de optimización (No Cap Studio):
     turquesa / azul / morado sobre fondos blancos, más limpia y profesional. */
  --bp-azul:        #2764C7;   /* solo dentro de degradados — pedido del cliente: fuera de botones, plecas y fondos sólidos */
  --bp-azul-deep:   #1D4A96;   /* idem, solo para degradados */
  --bp-cyan:        #19B8C5;   /* turquesa/aqua — CTAs, acentos, íconos, barras de gráficas */
  --bp-cyan-deep:   #117E8A;   /* hover de turquesa */
  --bp-morado:      #6B4BC1;   /* lila — subtítulos, detalles, resaltados */
  --bp-violeta:     #8F72D6;   /* variante clara del morado, para gradientes puntuales */
  --bp-teal:        #14B8A6;   /* checkmarks, éxito */

  /* ---- Color: texto y superficie ---- */
  --bp-tinta:       #14213D;   /* texto principal */
  --bp-gris:        #5A6786;   /* texto secundario */
  --bp-hueso:       #F7F9FC;   /* fondo base */
  --bp-blanco:      #FFFFFF;
  --bp-borde:       #E4E9F2;   /* divisores / bordes de card */
  --bp-morado-tenue:#F1EDFB;   /* fondo de bloque morado claro */
  --bp-azul-tenue:  #E9F0FC;   /* fondo de bloque azul claro */
  --bp-cyan-tenue:  #E6F7F8;   /* fondo de bloque turquesa claro */

  /* ---- Acentos de la etiqueta de equipo (foto + nombre) ---- */
  --bp-verde-menta: #8FCBA6;   /* forma redonda que asoma en la etiqueta */
  --bp-rosa:        #F0AFC7;   /* festón de puntitos al pie de la etiqueta */

  /* ---- Estados ---- */
  --bp-exito:       var(--bp-teal);
  --bp-foco:        var(--bp-cyan-deep);

  /* ---- Gradientes ---- */
  --bp-gradient:        linear-gradient(135deg, #19B8C5 0%, #2764C7 45%, #6B4BC1 100%);
  --bp-gradient-inv:    linear-gradient(135deg, #6B4BC1 0%, #2764C7 55%, #19B8C5 100%);
  --bp-gradient-suave:  linear-gradient(135deg, #EAF7F8 0%, #EEF3FC 50%, #F2EEFB 100%);
  --bp-gradient-linea:  linear-gradient(180deg, #19B8C5 0%, #6B4BC1 100%);

  /* ---- Tipografía ---- */
  --bp-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bp-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bp-text-xs:   0.75rem;
  --bp-text-sm:   0.875rem;
  --bp-text-base: 1rem;
  --bp-text-lg:   1.125rem;
  --bp-text-xl:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --bp-text-2xl:  clamp(1.5rem, 1.28rem + 1vw, 2rem);
  --bp-text-3xl:  clamp(1.85rem, 1.45rem + 1.9vw, 2.75rem);
  --bp-text-4xl:  clamp(2.2rem, 1.6rem + 3vw, 3.65rem);

  --bp-leading-tight:  1.12;
  --bp-leading-snug:   1.3;
  --bp-leading-normal: 1.62;

  /* ---- Espaciado ---- */
  --bp-space-1: .25rem;  --bp-space-2: .5rem;  --bp-space-3: .75rem;
  --bp-space-4: 1rem;    --bp-space-6: 1.5rem; --bp-space-8: 2rem;
  --bp-space-12: 3rem;   --bp-space-16: 4rem;  --bp-space-24: 6rem;

  --bp-section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --bp-container: 1200px;
  --bp-container-narrow: 760px;

  /* ---- Radios ---- */
  --bp-radius-sm:  10px;
  --bp-radius:     16px;
  --bp-radius-lg:  24px;
  --bp-radius-pill: 999px;

  /* ---- Sombras (suaves, de color) ---- */
  --bp-shadow-sm:  0 2px 10px -3px rgba(39, 100, 199, .14);
  --bp-shadow:     0 14px 34px -14px rgba(39, 100, 199, .22);
  --bp-shadow-lg:  0 26px 60px -22px rgba(107, 75, 193, .30);
  --bp-shadow-cyan:0 14px 34px -14px rgba(25, 184, 197, .32);

  /* ---- Movimiento ---- */
  --bp-ease:     cubic-bezier(.4, 0, .2, 1);
  --bp-dur-fast: 180ms;
  --bp-dur:      240ms;
  --bp-dur-slow: 300ms;

  /* ---- Layout ---- */
  --bp-header-h: 72px;
  --bp-z-header: 50;
  --bp-z-wa:     40;
  --bp-z-modal:  100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --bp-dur-fast: 0ms; --bp-dur: 0ms; --bp-dur-slow: 0ms; }
}