/* ============================================================
   belead — Colors & Type foundations
   Brand: B2B prospecting service (IA + BDRs). Tone: cercano,
   proactivo, claro. Idioma: español (LATAM / Colombia).
   3 tonos de marca: AZUL (principal) · BLANCO (texto) · VERDE (resaltar)
   Typeface: Aptos (Microsoft). Free fallback: Hanken Grotesk.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --be-azul:        #156082;  /* primario — fondos, titulares, marca */
  --be-verde:       #00B050;  /* acento — resaltar, CTAs, métricas positivas */
  --be-blanco:      #FFFFFF;  /* texto sobre azul, superficies */

  /* ---------- AZUL SCALE ---------- */
  --be-azul-950:    #082c3d;
  --be-azul-900:    #0c3a4f;
  --be-azul-800:    #104f6b;
  --be-azul-700:    #156082;  /* = brand azul */
  --be-azul-600:    #1c7299;
  --be-azul-500:    #2a87b0;
  --be-azul-300:    #7db8cf;
  --be-azul-200:    #b3d4e2;
  --be-azul-100:    #dcebf1;
  --be-azul-50:     #eef5f8;

  /* ---------- VERDE SCALE ---------- */
  --be-verde-700:   #00813b;
  --be-verde-600:   #009647;
  --be-verde-500:   #00B050;  /* = brand verde */
  --be-verde-300:   #5fcd8c;
  --be-verde-200:   #a3e3bf;
  --be-verde-100:   #d6f3e2;
  --be-verde-50:    #ecfaf1;

  /* ---------- NEUTRALS (ink & surface) ---------- */
  --be-ink:         #0f1f28;  /* texto principal sobre claro */
  --be-ink-2:       #3c4d57;  /* texto secundario */
  --be-ink-3:       #6b7a83;  /* texto terciario / captions */
  --be-line:        #dce4e8;  /* bordes y divisores */
  --be-line-2:      #eef2f4;  /* divisores sutiles */
  --be-surface:     #ffffff;  /* tarjetas */
  --be-surface-2:   #f6f9fa;  /* fondo de página claro */
  --be-surface-3:   #eef3f5;  /* fondo alterno */

  /* ---------- SEMANTIC ---------- */
  --be-success:     #00B050;
  --be-success-bg:  #ecfaf1;
  --be-warning:     #E8A100;
  --be-warning-bg:  #fdf4e0;
  --be-danger:      #D6453D;
  --be-danger-bg:   #fbeceb;
  --be-info:        #156082;
  --be-info-bg:     #eef5f8;

  /* ---------- TYPOGRAPHY ---------- */
  /* Aptos renders natively on Office/Windows; Hanken Grotesk is the free fallback. */
  --be-font-sans: "Aptos", "Aptos Display", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --be-font-display: "Aptos Display", "Aptos", "Hanken Grotesk", system-ui, sans-serif;

  --be-weight-light: 300;
  --be-weight-regular: 400;
  --be-weight-medium: 500;
  --be-weight-semibold: 600;
  --be-weight-bold: 700;

  /* Type scale (px / line-height) — clean, generous, B2B */
  --be-display:     56px;  --be-display-lh: 1.04;
  --be-h1:          40px;  --be-h1-lh: 1.1;
  --be-h2:          30px;  --be-h2-lh: 1.15;
  --be-h3:          23px;  --be-h3-lh: 1.25;
  --be-h4:          19px;  --be-h4-lh: 1.3;
  --be-body-lg:     18px;  --be-body-lg-lh: 1.55;
  --be-body:        16px;  --be-body-lh: 1.6;
  --be-small:       14px;  --be-small-lh: 1.5;
  --be-caption:     12.5px; --be-caption-lh: 1.45;
  --be-overline:    12px;  --be-overline-lh: 1.2;

  /* ---------- RADII ---------- */
  --be-r-xs: 6px;
  --be-r-sm: 10px;
  --be-r-md: 14px;
  --be-r-lg: 20px;
  --be-r-xl: 28px;
  --be-r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --be-s-1: 4px;
  --be-s-2: 8px;
  --be-s-3: 12px;
  --be-s-4: 16px;
  --be-s-5: 24px;
  --be-s-6: 32px;
  --be-s-7: 48px;
  --be-s-8: 64px;
  --be-s-9: 96px;

  /* ---------- ELEVATION ---------- */
  --be-shadow-sm: 0 1px 2px rgba(15,31,40,.06), 0 1px 3px rgba(15,31,40,.05);
  --be-shadow-md: 0 4px 12px rgba(15,31,40,.08), 0 2px 4px rgba(15,31,40,.05);
  --be-shadow-lg: 0 16px 40px rgba(15,31,40,.12), 0 4px 10px rgba(15,31,40,.06);
  --be-shadow-azul: 0 14px 34px rgba(21,96,130,.28);
  --be-shadow-verde: 0 12px 28px rgba(0,176,80,.30);

  /* ---------- MOTION ---------- */
  --be-ease: cubic-bezier(.22,.61,.36,1);
  --be-ease-out: cubic-bezier(.16,1,.3,1);
  --be-dur-fast: 130ms;
  --be-dur: 220ms;
  --be-dur-slow: 380ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.be-display, .be-h1, .be-h2, .be-h3, .be-h4 {
  font-family: var(--be-font-display);
  color: var(--be-ink);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.be-display { font-size: var(--be-display); line-height: var(--be-display-lh); font-weight: 600; letter-spacing: -0.03em; }
.be-h1 { font-size: var(--be-h1); line-height: var(--be-h1-lh); font-weight: 600; letter-spacing: -0.025em; }
.be-h2 { font-size: var(--be-h2); line-height: var(--be-h2-lh); font-weight: 600; letter-spacing: -0.02em; }
.be-h3 { font-size: var(--be-h3); line-height: var(--be-h3-lh); font-weight: 600; }
.be-h4 { font-size: var(--be-h4); line-height: var(--be-h4-lh); font-weight: 600; }

.be-body-lg { font-family: var(--be-font-sans); font-size: var(--be-body-lg); line-height: var(--be-body-lg-lh); color: var(--be-ink-2); margin: 0; }
.be-body { font-family: var(--be-font-sans); font-size: var(--be-body); line-height: var(--be-body-lh); color: var(--be-ink-2); margin: 0; }
.be-small { font-family: var(--be-font-sans); font-size: var(--be-small); line-height: var(--be-small-lh); color: var(--be-ink-3); margin: 0; }
.be-caption { font-family: var(--be-font-sans); font-size: var(--be-caption); line-height: var(--be-caption-lh); color: var(--be-ink-3); margin: 0; }

.be-overline {
  font-family: var(--be-font-sans);
  font-size: var(--be-overline);
  line-height: var(--be-overline-lh);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--be-azul);
  margin: 0;
}

/* Highlight: el verde para resaltar */
.be-mark { color: var(--be-verde); font-weight: 600; }
.be-mark-bg { background: var(--be-verde-100); color: var(--be-verde-700); padding: 0 .18em; border-radius: 4px; }