/* =====================================================================
 * HiLex Design Tokens
 * Colors, typography, spacing, radii, shadows.
 * Import this file as the single source of truth for brand values.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------------
   * BRAND COLOR — primitive palette
   * ------------------------------------------------------------------- */
  --navy-900: #00004d;          /* primary brand navy — text, footer ground, headings */
  --navy-800: #0a0a5c;
  --navy-700: #1d1d75;
  --navy-600: #38388f;
  --navy-500: #5b5ba8;
  --navy-400: #8888c0;
  --navy-300: #b6b6d6;
  --navy-200: #d6d6e6;
  --navy-100: #ececf4;
  --navy-50:  #f4f5fb;          /* alternating section background */

  --coral-900: #7a2818;
  --coral-800: #a13420;
  --coral-700: #c64129;
  --coral-600: #cc4530;          /* hover */
  --coral-500: #eb5436;          /* primary brand coral */
  --coral-400: #ef7a62;
  --coral-300: #f49d8c;
  --coral-200: #f9c4ba;
  --coral-100: #fde6e0;
  --coral-50:  #fef2ee;

  /* Brand-specific: WhatsApp green (used for the WhatsApp icon glyph) */
  --whatsapp: #25D366;

  --white: #ffffff;
  --black: #000000;

  /* Cool-tinted neutrals (derived from navy hue) */
  --neutral-900: #1a1a2e;
  --neutral-800: #2d2d44;
  --neutral-700: #44445c;
  --neutral-600: #5b5c79;       /* muted body */
  --neutral-500: #7a7b95;
  --neutral-400: #a5a6b8;
  --neutral-300: #c7c8d4;
  --neutral-200: #e5e7ee;       /* dividers, borders */
  --neutral-100: #f0f1f6;
  --neutral-50:  #f8f9fc;

  /* ---------------------------------------------------------------------
   * SEMANTIC COLOR
   * ------------------------------------------------------------------- */
  --bg:               var(--white);
  --bg-alt:           var(--navy-50);
  --bg-inverse:       var(--navy-900);

  --fg:               var(--navy-900);     /* primary text */
  --fg-muted:         var(--neutral-600);  /* secondary text */
  --fg-subtle:        var(--neutral-500);  /* tertiary text */
  --fg-on-inverse:    var(--white);
  --fg-on-coral:      var(--white);

  --accent:           var(--coral-500);
  --accent-hover:     var(--coral-600);
  --accent-press:     var(--coral-700);

  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);

  --link:             var(--coral-500);
  --link-hover:       var(--coral-600);

  /* Status (rarely used in this brand, here for completeness) */
  --success: #1f8a5a;
  --warning: #d18b1a;
  --danger:  var(--coral-500);
  --info:    var(--navy-700);

  /* ---------------------------------------------------------------------
   * TYPOGRAPHY
   * ------------------------------------------------------------------- */
  --font-display: 'League Spartan', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'League Spartan', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:      'Inter', 'League Spartan', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (1.250 — major third, slightly tighter than default)
   * Los tamaños de lectura se subieron un escalón respecto de la escala
   * original (16→17, 14→15, 12→13) para que los textos largos se lean
   * cómodos. Los tamaños de titular se mantienen: ya eran grandes y
   * subirlos descuadraba los heros. */
  --fs-12: 0.875rem;    /* 14px, mínimo del sitio: nada baja de aquí */
  --fs-14: 1rem;        /* 16px, apoyo y etiquetas */
  --fs-16: 1.125rem;    /* 18px, base de lectura */
  --fs-18: 1.25rem;     /* 20px */
  --fs-20: 1.375rem;    /* 22px, entradillas */
  --fs-24: 1.5625rem;   /* 25px */
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.6;    /* algo más de aire entre líneas ayuda a la lectura */
  --lh-loose: 1.75;

  /* Tracking */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-base:  0;
  --ls-loose: 0.04em;
  --ls-eyebrow: 0.08em;

  /* ---------------------------------------------------------------------
   * SPACING (8px grid)
   * ------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------------------------------------------------------------------
   * RADII
   * ------------------------------------------------------------------- */
  --radius-sm:    8px;
  --radius-md:    16px;   /* cards, inputs */
  --radius-lg:    20px;   /* photos */
  --radius-xl:    24px;   /* section containers */
  --radius-pill:  999px;  /* buttons */

  /* ---------------------------------------------------------------------
   * SHADOWS — all tinted with navy hue, never pure black
   * ------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 77, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 77, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 77, 0.14);
  --shadow-xl: 0 24px 64px rgba(0, 0, 77, 0.18);

  /* ---------------------------------------------------------------------
   * MOTION
   * ------------------------------------------------------------------- */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* ---------------------------------------------------------------------
   * LAYOUT
   * ------------------------------------------------------------------- */
  --container: 1200px;
  --gutter:    24px;
}

/* =====================================================================
 * SEMANTIC TYPE STYLES — apply to elements directly
 * ===================================================================== */

.h-display,
.h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-64));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 3.5vw, var(--fs-48));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.body,
p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
}

.caption,
small {
  font-size: var(--fs-14);
  color: var(--fg-subtle);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* =====================================================================
 * COMPONENT PRIMITIVES
 * ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--fg-on-coral);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--fg-on-coral); }
.btn-primary:active { background: var(--accent-press); }

.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--fg);
}
.btn-secondary:hover {
  background: var(--fg);
  color: var(--fg-on-inverse);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
}
.btn-ghost:hover { color: var(--accent); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--coral-100);
}

/* =====================================================================
 * RESET / BASE
 * ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); text-decoration: underline; }