/* ════════════════════════════════════════════════════════════════
   MENTOR GUADIANA — Design System v1.0
   Identidad visual extraída del logo oficial.
   Fluye. Adapta. Guia. Transforma.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── NAVY — fondo, profundidad, confianza ────────────────────── */
  --navy-950: #04090F;   /* deepest black-blue */
  --navy-900: #060F1E;   /* background base */
  --navy-800: #0A1628;   /* main background */
  --navy-750: #0D1E36;   /* workspace bg */
  --navy-700: #0F2440;   /* surface elevated */
  --navy-600: #142E52;   /* card background */
  --navy-500: #1A3A66;   /* border/line */
  --navy-400: #234C84;   /* border hover */
  --navy-300: #3366A8;   /* muted accent */

  /* ── ELECTRIC BLUE — río, flujo, IA, energía ─────────────────── */
  --river-900: #072B50;
  --river-800: #0B4070;
  --river-700: #0D5490;
  --river-600: #1068B0;
  --river-500: #1E8FE1;   /* river main */
  --river-400: #3BAEF0;
  --river-300: #5DC5F8;
  --river-200: #8DDAFB;
  --river-100: #C2EFFE;

  /* ── GOLD — mentoría, guía, premium, visión ─────────────────── */
  --gold-900: #3D2800;
  --gold-800: #6B4510;
  --gold-700: #8B5E14;
  --gold-600: #A87A1E;
  --gold-500: #C9A84C;   /* gold main — CTA, highlights */
  --gold-400: #DEC070;
  --gold-300: #EDD490;
  --gold-200: #F5E4B0;
  --gold-100: #FAF0D0;

  /* ── TEXT ───────────────────────────────────────────────────── */
  --text-primary:   #E8EDF5;
  --text-secondary: #8899B5;
  --text-muted:     #4A5A78;
  --text-disabled:  #2D3C56;

  /* ── SEMANTIC ───────────────────────────────────────────────── */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    var(--river-400);

  /* ── BRAND ALIASES (para compatibilidad con código existente) ── */
  --amber:   var(--gold-500);
  --amber-d: var(--gold-600);
  --amber-l: rgba(201,168,76,.12);
  --green:   var(--color-success);
  --red:     var(--color-danger);
  --ink:     var(--text-primary);
  --muted:   var(--text-secondary);
  --border:  var(--navy-500);
  --paper:   var(--navy-800);
  --white:   var(--text-primary);
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── WORKSPACE ALIASES ──────────────────────────────────────── */
  --bg3:  var(--navy-950);
  --bg2:  var(--navy-800);
  --line: var(--navy-500);

  /* ── GRADIENTS ──────────────────────────────────────────────── */
  --grad-brand:    linear-gradient(135deg, var(--navy-800) 0%, #0A1E3A 50%, #0E2850 100%);
  --grad-gold:     linear-gradient(135deg, var(--gold-600) 0%, var(--gold-400) 50%, var(--gold-300) 100%);
  --grad-river:    linear-gradient(135deg, var(--river-700) 0%, var(--river-500) 50%, var(--river-300) 100%);
  --grad-hero:     linear-gradient(135deg, #060F1E 0%, #0A1A32 40%, #0E2440 70%, #091A30 100%);
  --grad-card:     linear-gradient(160deg, rgba(14,36,64,.8) 0%, rgba(9,22,44,.6) 100%);
  --grad-glass:    linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  --grad-glow-gold:linear-gradient(135deg, rgba(201,168,76,.2) 0%, rgba(201,168,76,0) 70%);
  --grad-glow-blue:linear-gradient(135deg, rgba(30,143,225,.2) 0%, rgba(30,143,225,0) 70%);
  --grad-cta:      linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);

  /* ── SHADOWS ────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-xl:  0 16px 64px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --shadow-gold:0 0 24px rgba(201,168,76,.25), 0 4px 16px rgba(0,0,0,.3);
  --shadow-blue:0 0 24px rgba(30,143,225,.3), 0 4px 16px rgba(0,0,0,.3);
  --shadow-glow:0 0 40px rgba(201,168,76,.15), 0 0 80px rgba(30,143,225,.08);

  /* ── GLASSMORPHISM ───────────────────────────────────────────── */
  --glass-bg:      rgba(14,28,52,.7);
  --glass-bg-light:rgba(20,40,70,.5);
  --glass-border:  rgba(255,255,255,.06);
  --glass-border-gold: rgba(201,168,76,.2);
  --glass-border-blue: rgba(30,143,225,.15);
  --glass-blur:    blur(16px) saturate(180%);
  --glass-blur-sm: blur(8px) saturate(150%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  --font-display:  'Inter', var(--sans);
  --font-body:     var(--sans);
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* ── SPACING ────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* ── BORDER RADIUS ───────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r:     8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-full:9999px;

  /* ── TRANSITIONS ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  100ms var(--ease-out);
  --t-base:  200ms var(--ease-out);
  --t-slow:  350ms var(--ease-out);
  --t-river: 600ms var(--ease-inout);

  /* ── MOTION — river flow ─────────────────────────────────────── */
  --motion-float: float 6s ease-in-out infinite;
  --motion-river: riverFlow 8s ease-in-out infinite;
  --motion-glow:  pulseGlow 4s ease-in-out infinite;
}

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes riverFlow  { 0%,100%{opacity:.7;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.02)} }
@keyframes pulseGlow  { 0%,100%{opacity:.4} 50%{opacity:.8} }
@keyframes shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft{ from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.mg-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.mg-glass-gold {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-gold);
  box-shadow: var(--shadow-gold);
}
.mg-glass-blue {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-blue);
  box-shadow: var(--shadow-blue);
}
.mg-gradient-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mg-gradient-text-blue {
  background: var(--grad-river);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mg-btn-primary {
  background: var(--grad-cta);
  color: var(--navy-900);
  font-weight: 700;
  border: none;
  cursor: pointer;
  padding: .7rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: var(--text-base);
  transition: var(--t-base);
  box-shadow: var(--shadow-gold);
  letter-spacing: 0.01em;
}
.mg-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(201,168,76,.4), 0 6px 20px rgba(0,0,0,.4);
}
.mg-btn-secondary {
  background: var(--glass-bg);
  color: var(--text-primary);
  border: 1px solid var(--glass-border-gold);
  cursor: pointer;
  padding: .7rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  transition: var(--t-base);
  backdrop-filter: var(--glass-blur-sm);
}
.mg-btn-secondary:hover {
  border-color: var(--gold-400);
  background: rgba(201,168,76,.08);
}
.mg-card {
  background: var(--grad-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  backdrop-filter: var(--glass-blur-sm);
}
.mg-card:hover {
  border-color: var(--glass-border-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
  transition: var(--t-slow);
}
.mg-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600), var(--river-600), transparent);
  border: none;
  opacity: 0.6;
}
.mg-river-line {
  width: 2px;
  background: var(--grad-river);
  border-radius: 2px;
  animation: var(--motion-river);
}
.mg-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .75rem;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(201,168,76,.12);
  color: var(--gold-400);
  border: 1px solid rgba(201,168,76,.2);
}
.mg-tag-blue {
  background: rgba(30,143,225,.1);
  color: var(--river-300);
  border-color: rgba(30,143,225,.2);
}