/* ===========================================================
   LEX INTELLECTA — Design System v2.0
   Unified tokens · components · utilities
   Creado: 2026-05-02
   =========================================================== */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600;1,700&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ===========================================================
   1. DESIGN TOKENS
   =========================================================== */

:root {
  /* ── Palette: Core ── */
  --lx-navy:          #0B1628;
  --lx-navy-surface:  #0F1E35;
  --lx-navy-card:     #12223D;
  --lx-navy-deep:     #091222;

  /* ── Palette: Accents ── */
  --lx-teal:          #3D8E99;
  --lx-coral:         #E95C73;
  --lx-gold:          #C9A84C;
  --lx-purple:        #7F77DD;
  --lx-success:       #5DCAA5;
  --lx-warning:       #F59E0B;

  /* ── Palette: Text ── */
  --lx-text-primary:    #F4F1EC;
  --lx-text-secondary:  #C7D0DB;
  --lx-text-muted:      #94A3B8;
  --lx-text-placeholder:#64748B;

  /* ── Palette: Borders ── */
  --lx-border-subtle:   rgba(255,255,255, 0.06);
  --lx-border-default:  rgba(255,255,255, 0.10);
  --lx-border-emphasis: rgba(255,255,255, 0.16);
  --lx-border-focus:    rgba(61,142,153, 0.45);

  /* ── Palette: Surfaces ── */
  --lx-surface-hover:   rgba(255,255,255, 0.04);
  --lx-surface-active:  rgba(255,255,255, 0.06);

  /* ── Typography: Families ── */
  --lx-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lx-font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lx-font-mono:    'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* ── Typography: Scale (1.25 major third) ── */
  --lx-text-3xs:    0.625rem;   /* 10px — legal micro */
  --lx-text-2xs:    0.6875rem;  /* 11px — badges, overlines */
  --lx-text-xs:     0.75rem;    /* 12px — captions, meta */
  --lx-text-sm:     0.8125rem;  /* 13px — body small */
  --lx-text-base:   0.9375rem;  /* 15px — body (UP from 11px) */
  --lx-text-md:     1.0625rem;  /* 17px — lead, intro */
  --lx-text-lg:     1.25rem;    /* 20px — subtitle */
  --lx-text-xl:     1.5rem;     /* 24px — h3 */
  --lx-text-2xl:    1.875rem;   /* 30px — h2 */
  --lx-text-3xl:    2.375rem;   /* 38px — h1 */
  --lx-text-4xl:    3rem;       /* 48px — hero */

  /* ── Typography: Weights ── */
  --lx-weight-light:    300;
  --lx-weight-regular:  400;
  --lx-weight-medium:   500;
  --lx-weight-semibold: 600;
  --lx-weight-bold:     700;
  --lx-weight-black:    900;

  /* ── Typography: Leading ── */
  --lx-leading-tight:   1.15;
  --lx-leading-snug:    1.3;
  --lx-leading-normal:  1.5;
  --lx-leading-relaxed: 1.65;

  /* ── Typography: Tracking ── */
  --lx-tracking-tight:  -0.015em;
  --lx-tracking-normal:  0;
  --lx-tracking-wide:    0.04em;
  --lx-tracking-wider:   0.12em;

  /* ── Spacing: 4px grid ── */
  --lx-space-1:   0.25rem;   /*  4px */
  --lx-space-2:   0.5rem;    /*  8px */
  --lx-space-3:   0.75rem;   /* 12px */
  --lx-space-4:   1rem;      /* 16px */
  --lx-space-5:   1.25rem;   /* 20px */
  --lx-space-6:   1.5rem;    /* 24px */
  --lx-space-8:   2rem;      /* 32px */
  --lx-space-10:  2.5rem;    /* 40px */
  --lx-space-12:  3rem;      /* 48px */
  --lx-space-16:  4rem;      /* 64px */
  --lx-space-20:  5rem;      /* 80px */
  --lx-space-24:  6rem;      /* 96px */

  /* ── Border Radius ── */
  --lx-radius-none:  0;
  --lx-radius-xs:    3px;
  --lx-radius-sm:    6px;
  --lx-radius-md:    10px;
  --lx-radius-lg:    14px;
  --lx-radius-xl:    20px;
  --lx-radius-full:  9999px;

  /* ── Shadows ── */
  --lx-shadow-xs:      0 1px 2px rgba(0,0,0, 0.2);
  --lx-shadow-sm:      0 2px 8px rgba(0,0,0, 0.3);
  --lx-shadow-md:      0 6px 20px rgba(0,0,0, 0.4);
  --lx-shadow-lg:      0 16px 48px rgba(0,0,0, 0.5);
  --lx-shadow-glow-teal:  0 0 24px rgba(61,142,153, 0.12);
  --lx-shadow-glow-coral: 0 4px 20px rgba(233,92,115, 0.25);
  --lx-shadow-glow-gold:  0 0 18px rgba(201,168,76, 0.10);

  /* ── Transitions ── */
  --lx-ease-fast:   0.15s ease;
  --lx-ease-default: 0.2s ease;
  --lx-ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --lx-nav-height:    64px;
  --lx-max-width:     1200px;
  --lx-content-narrow: 640px;
  --lx-content-wide:   880px;

  /* ── Z-Index ── */
  --lx-z-base:      0;
  --lx-z-dropdown:  100;
  --lx-z-sticky:    200;
  --lx-z-overlay:   300;
  --lx-z-modal:     400;
  --lx-z-toast:     500;
}

/* ===========================================================
   2. RESET & BASE
   =========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* 1rem = 16px base — browsers default */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--lx-font-body);
  font-size: var(--lx-text-base);
  font-weight: var(--lx-weight-regular);
  line-height: var(--lx-leading-relaxed);
  color: var(--lx-text-primary);
  background: var(--lx-navy);
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--lx-teal);
  text-decoration: none;
  transition: color var(--lx-ease-fast);
}
a:hover { color: var(--lx-text-primary); }

button {
  font-family: var(--lx-font-body);
  cursor: pointer;
  border: none;
}

input, select, textarea {
  font-family: var(--lx-font-body);
  font-size: var(--lx-text-base);
}

/* ===========================================================
   3. TYPOGRAPHY UTILITIES
   =========================================================== */

.lx-h1 {
  font-family: var(--lx-font-display);
  font-size: var(--lx-text-3xl);
  font-weight: var(--lx-weight-black);
  line-height: var(--lx-leading-tight);
  letter-spacing: var(--lx-tracking-tight);
  color: var(--lx-text-primary);
}

.lx-h2 {
  font-family: var(--lx-font-display);
  font-size: var(--lx-text-2xl);
  font-weight: var(--lx-weight-bold);
  line-height: var(--lx-leading-snug);
  color: var(--lx-text-primary);
}

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

.lx-h4 {
  font-family: var(--lx-font-body);
  font-size: var(--lx-text-md);
  font-weight: var(--lx-weight-semibold);
  line-height: var(--lx-leading-snug);
  color: var(--lx-text-primary);
}

.lx-lead {
  font-size: var(--lx-text-md);
  line-height: var(--lx-leading-relaxed);
  color: var(--lx-text-secondary);
}

.lx-body {
  font-size: var(--lx-text-base);
  line-height: var(--lx-leading-relaxed);
  color: var(--lx-text-secondary);
}

.lx-body-sm {
  font-size: var(--lx-text-sm);
  line-height: var(--lx-leading-relaxed);
  color: var(--lx-text-muted);
}

.lx-caption {
  font-size: var(--lx-text-xs);
  line-height: var(--lx-leading-normal);
  color: var(--lx-text-muted);
}

.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-space-2);
  font-family: var(--lx-font-body);
  font-size: var(--lx-text-2xs);
  font-weight: var(--lx-weight-bold);
  letter-spacing: var(--lx-tracking-wider);
  text-transform: uppercase;
  color: var(--lx-teal);
  margin-bottom: var(--lx-space-4);
}

.lx-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lx-teal);
  flex-shrink: 0;
}

.lx-em {
  font-style: italic;
  color: var(--lx-coral);
}

/* ===========================================================
   4. BUTTONS
   =========================================================== */

.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lx-space-2);
  font-family: var(--lx-font-body);
  font-size: var(--lx-text-sm);
  font-weight: var(--lx-weight-bold);
  letter-spacing: var(--lx-tracking-wide);
  text-transform: uppercase;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--lx-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--lx-ease-fast), box-shadow var(--lx-ease-fast), opacity var(--lx-ease-fast);
  line-height: 1;
}

.lx-btn:hover {
  transform: translateY(-1px);
}

.lx-btn:active {
  transform: translateY(0);
}

/* Teal — Primary CTA (calm, trust, clarity) */
.lx-btn-primary {
  background: var(--lx-teal);
  color: var(--lx-text-primary);
  box-shadow: var(--lx-shadow-glow-teal);
}
.lx-btn-primary:hover {
  box-shadow: 0 0 32px rgba(61,142,153, 0.2);
}

/* Coral — Emphasis / urgency (use sparingly) */
.lx-btn-accent {
  background: var(--lx-coral);
  color: #ffffff;
  box-shadow: var(--lx-shadow-glow-coral);
}
.lx-btn-accent:hover {
  box-shadow: 0 6px 28px rgba(233,92,115, 0.4);
}

/* Ghost — secondary, low attention */
.lx-btn-ghost {
  background: transparent;
  color: var(--lx-text-primary);
  border: 1px solid var(--lx-border-emphasis);
  box-shadow: none;
}
.lx-btn-ghost:hover {
  background: var(--lx-surface-hover);
  border-color: rgba(61,142,153, 0.5);
}

/* Outline */
.lx-btn-outline {
  background: transparent;
  color: var(--lx-teal);
  border: 1px solid rgba(61,142,153, 0.35);
  box-shadow: none;
}
.lx-btn-outline:hover {
  background: rgba(61,142,153, 0.08);
  border-color: var(--lx-teal);
}

/* Sizes */
.lx-btn-sm {
  font-size: var(--lx-text-2xs);
  padding: 0.5rem 1rem;
}

.lx-btn-lg {
  font-size: var(--lx-text-base);
  padding: 1rem 2rem;
}

.lx-btn-full {
  width: 100%;
}

.lx-btn:disabled,
.lx-btn[disabled] {
  background: var(--lx-text-placeholder);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* ===========================================================
   5. CARDS
   =========================================================== */

.lx-card {
  background: var(--lx-navy-card);
  border: 1px solid var(--lx-border-default);
  border-radius: var(--lx-radius-lg);
  padding: var(--lx-space-6);
  transition: border-color var(--lx-ease-default), box-shadow var(--lx-ease-default);
}

.lx-card-hover:hover {
  border-color: var(--lx-border-emphasis);
  box-shadow: var(--lx-shadow-sm);
}

.lx-card-glow {
  box-shadow: var(--lx-shadow-glow-teal);
}

.lx-card-accent-top {
  position: relative;
  overflow: hidden;
}
.lx-card-accent-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.lx-card-accent-teal::before  { background: var(--lx-teal); }
.lx-card-accent-coral::before { background: var(--lx-coral); }
.lx-card-accent-gold::before  { background: var(--lx-gold); }
.lx-card-accent-purple::before { background: var(--lx-purple); }

/* ===========================================================
   6. FORMS
   =========================================================== */

.lx-label {
  display: block;
  font-size: var(--lx-text-2xs);
  font-weight: var(--lx-weight-bold);
  letter-spacing: var(--lx-tracking-wider);
  text-transform: uppercase;
  color: var(--lx-text-muted);
  margin-bottom: var(--lx-space-2);
}

.lx-input {
  width: 100%;
  padding: 0.8125rem 1rem;
  background: var(--lx-navy);
  border: 1.5px solid var(--lx-border-emphasis);
  border-radius: var(--lx-radius-md);
  color: var(--lx-text-primary);
  font-size: var(--lx-text-base);
  font-family: var(--lx-font-body);
  transition: border-color var(--lx-ease-fast), box-shadow var(--lx-ease-fast);
}

.lx-input::placeholder {
  color: var(--lx-text-placeholder);
}

.lx-input:focus {
  outline: none;
  border-color: var(--lx-teal);
  box-shadow: 0 0 0 3px rgba(61,142,153, 0.15);
}

.lx-input-error {
  border-color: var(--lx-coral);
}
.lx-input-error:focus {
  box-shadow: 0 0 0 3px rgba(233,92,115, 0.15);
}

.lx-error-msg {
  font-size: var(--lx-text-xs);
  color: var(--lx-coral);
  margin-top: var(--lx-space-1);
  min-height: 1.2em;
}

/* ===========================================================
   7. NAVIGATION
   =========================================================== */

.lx-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--lx-nav-height);
  display: flex;
  align-items: center;
  background: rgba(11,22,40, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lx-border-subtle);
  z-index: var(--lx-z-sticky);
  padding: 0 var(--lx-space-6);
}

.lx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--lx-max-width);
  margin: 0 auto;
}

.lx-nav-brand {
  font-family: var(--lx-font-display);
  font-size: 1.0625rem;
  font-weight: var(--lx-weight-bold);
  color: var(--lx-text-primary);
  text-decoration: none;
}

.lx-nav-brand span {
  color: var(--lx-coral);
}

.lx-nav-links {
  display: flex;
  align-items: center;
  gap: var(--lx-space-1);
}

.lx-nav-link {
  font-size: var(--lx-text-sm);
  color: var(--lx-text-muted);
  padding: var(--lx-space-2) var(--lx-space-3);
  border-radius: var(--lx-radius-sm);
  text-decoration: none;
  transition: color var(--lx-ease-fast), background var(--lx-ease-fast);
}

.lx-nav-link:hover {
  color: var(--lx-text-primary);
  background: var(--lx-surface-hover);
}

.lx-nav-cta {
  color: #ffffff;
  background: var(--lx-teal);
  padding: var(--lx-space-2) var(--lx-space-5);
  border-radius: var(--lx-radius-sm);
  font-weight: var(--lx-weight-semibold);
}

.lx-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--lx-space-2);
  cursor: pointer;
}

.lx-nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--lx-text-primary);
  transition: transform var(--lx-ease-smooth), opacity var(--lx-ease-smooth);
}

@media (max-width: 768px) {
  .lx-nav-links { display: none; }
  .lx-nav-hamburger { display: flex; }
}

/* ===========================================================
   8. LAYOUT UTILITIES
   =========================================================== */

.lx-container {
  width: 100%;
  max-width: var(--lx-max-width);
  margin: 0 auto;
  padding: 0 var(--lx-space-6);
}

.lx-container-narrow {
  max-width: var(--lx-content-narrow);
}

.lx-container-wide {
  max-width: var(--lx-content-wide);
}

.lx-section {
  position: relative;
  padding: var(--lx-space-20) 0;
}

.lx-section-sm {
  padding: var(--lx-space-12) 0;
}

.lx-section-alt {
  background: var(--lx-navy-surface);
  border-top: 1px solid var(--lx-border-subtle);
  border-bottom: 1px solid var(--lx-border-subtle);
}

.lx-section-header {
  text-align: center;
  margin-bottom: var(--lx-space-12);
}

.lx-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--lx-border-emphasis),
    transparent
  );
  margin: var(--lx-space-8) 0;
}

/* ── Grids ── */
.lx-grid {
  display: grid;
  gap: var(--lx-space-6);
}

.lx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lx-grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 768px) {
  .lx-grid-2,
  .lx-grid-3,
  .lx-grid-4,
  .lx-grid-5 { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lx-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .lx-grid-4,
  .lx-grid-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Flex utilities ── */
.lx-flex       { display: flex; }
.lx-flex-col   { flex-direction: column; }
.lx-items-center { align-items: center; }
.lx-justify-center { justify-content: center; }
.lx-justify-between { justify-content: space-between; }
.lx-gap-2 { gap: var(--lx-space-2); }
.lx-gap-4 { gap: var(--lx-space-4); }
.lx-gap-6 { gap: var(--lx-space-6); }
.lx-gap-8 { gap: var(--lx-space-8); }

/* ===========================================================
   9. BADGES + TAGS
   =========================================================== */

.lx-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: var(--lx-text-2xs);
  font-weight: var(--lx-weight-bold);
  letter-spacing: var(--lx-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--lx-radius-full);
  line-height: 1.4;
}

.lx-badge-teal   { background: rgba(61,142,153, 0.15); color: var(--lx-teal); border: 1px solid rgba(61,142,153, 0.25); }
.lx-badge-coral  { background: rgba(233,92,115, 0.12); color: var(--lx-coral); border: 1px solid rgba(233,92,115, 0.22); }
.lx-badge-gold   { background: rgba(201,168,76, 0.12); color: var(--lx-gold); border: 1px solid rgba(201,168,76, 0.22); }
.lx-badge-purple { background: rgba(127,119,221, 0.12); color: var(--lx-purple); border: 1px solid rgba(127,119,221, 0.22); }
.lx-badge-success { background: rgba(93,202,165, 0.12); color: var(--lx-success); border: 1px solid rgba(93,202,165, 0.22); }

/* ===========================================================
   10. PRICE DISPLAY
   =========================================================== */

.lx-price {
  font-family: var(--lx-font-display);
  font-weight: var(--lx-weight-black);
  line-height: 1;
}

.lx-price-lg { font-size: var(--lx-text-3xl); }
.lx-price-md { font-size: var(--lx-text-2xl); }
.lx-price-sm { font-size: var(--lx-text-xl); }

.lx-price-teal  { color: var(--lx-teal); }
.lx-price-coral { color: var(--lx-coral); }
.lx-price-gold  { color: var(--lx-gold); }

.lx-price-label {
  font-size: var(--lx-text-xs);
  color: var(--lx-text-muted);
  font-weight: var(--lx-weight-medium);
}

/* ===========================================================
   11. FEATURE LIST
   =========================================================== */

.lx-feature-list {
  list-style: none;
  padding: 0;
}

.lx-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--lx-space-3);
  padding: var(--lx-space-2) 0;
  font-size: var(--lx-text-sm);
  color: var(--lx-text-secondary);
  line-height: var(--lx-leading-normal);
}

.lx-feature-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lx-teal);
  flex-shrink: 0;
  margin-top: 0.4em;
}

/* ===========================================================
   12. RESPONSIVE
   =========================================================== */

@media (max-width: 768px) {
  :root {
    --lx-text-4xl: 2.25rem;
    --lx-text-3xl: 1.875rem;
    --lx-text-2xl: 1.5rem;
    --lx-text-xl:  1.25rem;
    --lx-text-lg:  1.125rem;
    --lx-text-md:  1rem;
    --lx-text-base: 0.875rem;
  }

  .lx-section {
    padding: var(--lx-space-12) 0;
  }

  .lx-container {
    padding: 0 var(--lx-space-4);
  }
}