/* ============================================================
   ELEVARA — Colors & Type
   Sampled directly from official brand assets.
   ============================================================ */

/* Webfont — Poppins is the closest free match for the bold
   geometric sans used in the Elevara wordmark and uppercase
   institutional copy. The official brand likely uses a custom
   geometric (Eina / Gilroy / Brutal Type family); flagged in
   README — please supply the official .ttf/.woff2 if available. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND PRIMITIVES ---------- */
  /* Sampled from logos */
  --elevara-navy:        #002C5D;   /* Pantone-style institutional navy — primary brand */
  --elevara-blue:        #018FCD;   /* Light cyan blue — accent / "E" mark */
  --elevara-yellow:      #FFB500;   /* CTA / call-to-action accent */
  --elevara-black:       #0A1628;   /* Near-black for body / button text on yellow */
  --elevara-white:       #FFFFFF;

  /* ---------- EXTENDED PALETTE (derived) ---------- */
  --navy-900: #001838;
  --navy-800: #002148;
  --navy-700: #002C5D;   /* = elevara-navy */
  --navy-600: #0A3D75;
  --navy-500: #1E5390;
  --navy-400: #4F7AAE;
  --navy-300: #8FA8C9;
  --navy-200: #C7D3E2;
  --navy-100: #E6ECF3;
  --navy-50:  #F4F7FB;

  --blue-900: #014974;
  --blue-800: #0166A0;
  --blue-700: #018FCD;   /* = elevara-blue */
  --blue-600: #2DA8DC;
  --blue-500: #5BBCE5;
  --blue-400: #8FCFEC;
  --blue-300: #BCE0F3;
  --blue-200: #DCEEF8;
  --blue-100: #EDF6FB;
  --blue-50:  #F4FAFD;

  --yellow-900: #B37D00;
  --yellow-800: #D69500;
  --yellow-700: #FFB500;   /* = elevara-yellow */
  --yellow-600: #FFC230;
  --yellow-500: #FFCF5C;
  --yellow-400: #FFDC85;
  --yellow-300: #FFE7A8;
  --yellow-200: #FFF1CB;
  --yellow-100: #FFF8E5;

  /* Neutrals — warm-tinted to harmonize with navy */
  --neutral-1000: #0A1628;
  --neutral-900:  #1A2433;
  --neutral-800:  #2B3645;
  --neutral-700:  #46505F;
  --neutral-600:  #626B79;
  --neutral-500:  #828A96;
  --neutral-400:  #A9B0BA;
  --neutral-300:  #CDD2DA;
  --neutral-200:  #E4E7EC;
  --neutral-100:  #F1F3F6;
  --neutral-50:   #F8F9FB;

  /* ---------- SEMANTIC COLORS ---------- */
  --color-success: #1F8A5B;
  --color-warning: #FFB500;
  --color-danger:  #D9342B;
  --color-info:    #018FCD;

  /* ---------- SEMANTIC ROLES ---------- */
  /* Foreground */
  --fg-primary:   var(--neutral-1000);
  --fg-secondary: var(--neutral-700);
  --fg-tertiary:  var(--neutral-500);
  --fg-muted:     var(--neutral-400);
  --fg-on-navy:   var(--elevara-white);
  --fg-on-blue:   var(--elevara-white);
  --fg-on-yellow: var(--neutral-1000);
  --fg-brand:     var(--elevara-navy);
  --fg-accent:    var(--elevara-blue);

  /* Background */
  --bg-canvas:    var(--elevara-white);
  --bg-subtle:    var(--neutral-50);
  --bg-muted:     var(--neutral-100);
  --bg-brand:     var(--elevara-navy);
  --bg-brand-alt: var(--elevara-blue);
  --bg-accent:    var(--elevara-yellow);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-700);
  --border-brand:   var(--elevara-navy);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Poppins', 'Eina', 'Gilroy', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale (1.25 modular) */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;
  --text-7xl: 80px;
  --text-8xl: 104px;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.06em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  /* Brand uses generously rounded buttons (pill-ish) and gently
     rounded cards; corner shapes are large & confident. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 44, 93, 0.06);
  --shadow-sm: 0 2px 4px rgba(0, 44, 93, 0.06), 0 1px 2px rgba(0, 44, 93, 0.04);
  --shadow-md: 0 6px 16px rgba(0, 44, 93, 0.10), 0 2px 4px rgba(0, 44, 93, 0.05);
  --shadow-lg: 0 16px 32px rgba(0, 44, 93, 0.12), 0 4px 8px rgba(0, 44, 93, 0.06);
  --shadow-xl: 0 32px 64px rgba(0, 44, 93, 0.16), 0 8px 16px rgba(0, 44, 93, 0.08);
  --shadow-yellow: 0 8px 20px rgba(255, 181, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(1, 143, 205, 0.35);

  /* ---------- TRANSITIONS ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply directly via class or compose into components.
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-primary); }

.h-display, .h-d {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--elevara-navy);
}

.h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--elevara-navy);
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--elevara-navy);
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--elevara-navy);
}

.h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--elevara-navy);
}

/* Eyebrow / kicker — uppercase, tracked, blue. Used over headlines
   on the marketing site to label the section ("LO QUE OFRECEMOS"). */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--elevara-blue);
}

/* Institutional uppercase block — recreates the “ESTRATEGIA DE
   ACELERACIÓN DE INVERSIÓN DE IMPACTO” lockup tone. */
.headline-block {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  color: var(--elevara-navy);
}

.lede {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.p, p {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

.small {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}

.caption {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
}

.label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-secondary);
}

.code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

@keyframes arrowBounceDown {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  50%       { transform: rotate(180deg) translateY(-5px); }
}
.arrow-bounce-down {
  display: inline-flex;
  animation: arrowBounceDown 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .arrow-bounce-down { animation: none; transform: rotate(180deg); }
}