/* ════════════════════════════════════════════════════════════════
   CLIENDER · TOKENS
   Paleta híbrida — Cliender continuity (dark + purple) + gradiente
   firma cyan→violet→rose reservado para acentos.
═══════════════════════════════════════════════════════════════ */
:root{
  /* — Base neutra (DARK por defecto) — */
  --ink:           #0B0E13;
  --ink-2:         #0F141C;
  --ink-3:         #141A24;
  --panel:         #161D29;
  --panel-2:       #1A2230;
  --line:          rgba(235,234,228,0.08);
  --line-strong:   rgba(235,234,228,0.16);
  --paper:         #FAFAF7;
  --cream:         #EBEAE4;
  --cream-dim:     rgba(235,234,228,0.62);
  --cream-mute:    rgba(235,234,228,0.42);
  --cream-faint:   rgba(235,234,228,0.22);

  /* — Marca Cliender — */
  --purple:        #8F7EE9;
  --purple-light:  #B3A8F0;
  --purple-deep:   #6B5ED4;

  /* — Gradiente firma (solo en <em>, hover edges, focus glow) — */
  --grad-1:        #6FE3FF;   /* cyan */
  --grad-2:        #A78BFA;   /* violet */
  --grad-3:        #F472B6;   /* rose */
  --grad-cliender: linear-gradient(94deg, var(--grad-1) 0%, var(--grad-2) 52%, var(--grad-3) 100%);
  --grad-cliender-soft: linear-gradient(94deg, rgba(111,227,255,0.18) 0%, rgba(167,139,250,0.18) 52%, rgba(244,114,182,0.18) 100%);

  /* — Acentos por vertical — muted premium palette — */
  --sales:         oklch(60% 0.085 150);
  --tech:          oklch(62% 0.13 278);
  --tech-soft:     oklch(62% 0.13 278 / 0.10);
  --tech-border:   oklch(62% 0.13 278 / 0.22);
  --media:         oklch(60% 0.075 192);
  --media-soft:    oklch(60% 0.075 192 / 0.10);
  --media-border:  oklch(60% 0.075 192 / 0.22);
  --formacion:     oklch(68% 0.09 72);
  --formacion-soft:    oklch(68% 0.09 72 / 0.10);
  --formacion-border:  oklch(68% 0.09 72 / 0.22);
  --sales-soft:    oklch(60% 0.085 150 / 0.10);
  --sales-border:  oklch(60% 0.085 150 / 0.22);

  /* — Aliases semánticos — */
  --bg:            var(--ink);
  --bg-elev:       var(--ink-2);
  --fg:            var(--cream);
  --fg-dim:        var(--cream-dim);
  --fg-mute:       var(--cream-mute);
  --accent:        var(--purple);
  --accent-soft:   rgba(143,126,233,0.14);
  --em-color:      var(--purple-light);  /* emphasis/bold accent — light violet on dark bg */
  --border:        var(--line);
  --border-strong: var(--line-strong);

  /* — Tipografía — */
  --font-display:  'Manrope', 'Inter', -apple-system, sans-serif;
  --font-sans:     'Inter', -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Inconsolata', ui-monospace, monospace;

  --text-hero:     clamp(3.25rem, 1rem + 7.5vw, 9rem);
  --text-h1:       clamp(2.4rem, 1rem + 4.8vw, 5.5rem);
  --text-h2:       clamp(2rem, 0.8rem + 4vw, 4.5rem);
  --text-h3:       clamp(1.5rem, 0.9rem + 2vw, 2.5rem);
  --text-h4:       clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem);
  --text-body:     clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --text-sm:       0.9375rem;
  --text-xs:       0.8125rem;
  --text-mono:     0.75rem;
  --lead:          clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem);

  /* — Spacing — */
  --space-section: clamp(3rem, 2rem + 3vw, 6rem);
  --space-block:   clamp(1.75rem, 1rem + 1.5vw, 3rem);
  --gutter:        clamp(1.5rem, 1rem + 2vw, 4rem);
  --container:     min(1400px, 100% - var(--gutter) * 2);

  /* — Radii — */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* — Motion — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      180ms;
  --t-base:      320ms;
  --t-slow:      640ms;

  /* — Z — */
  --z-bg:     0;
  --z-canvas: 1;
  --z-base:   10;
  --z-nav:    80;
  --z-modal:  100;
  --z-cursor: 200;

  /* Fixed topbar height (used by hero so video starts below the menu) */
  --topbar-h: 64px;
}

/* — LIGHT THEME OVERRIDES — */
[data-theme="light"]{
  --ink:           #FAFAF7;
  --ink-2:         #F2F1EC;
  --ink-3:         #ECEBE6;
  --panel:         #FFFFFF;
  --panel-2:       #F6F5F0;
  --line:          rgba(11,14,19,0.08);
  --line-strong:   rgba(11,14,19,0.18);
  --cream:         #0B0E13;
  --cream-dim:     rgba(11,14,19,0.68);
  --cream-mute:    rgba(11,14,19,0.48);
  --cream-faint:   rgba(11,14,19,0.20);
  --bg:            var(--ink);
  --fg:            var(--cream);
  --accent-soft:   rgba(107,94,212,0.10);
  --em-color:      var(--purple-deep);   /* darker violet → WCAG AA on cream bg (4.81:1) */
}

/* ── Smooth theme transition ──────────────────────────────────── */
/* Apply to html so all child elements inherit it; exclude expensive
   properties (filter, backdrop-filter) to avoid jank on complex nodes */
html {
  transition:
    background-color 350ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
    color 350ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
/* Key structural elements — fast crossfade */
body,
.topbar,
.footer,
.drawer,
.mega,
.mega--4grid,
.vcard,
.btn,
.btn--ghost,
.preloader {
  transition:
    background-color 350ms cubic-bezier(0.16,1,0.3,1),
    border-color     280ms cubic-bezier(0.16,1,0.3,1),
    color            280ms cubic-bezier(0.16,1,0.3,1),
    box-shadow       350ms cubic-bezier(0.16,1,0.3,1);
}
/* Don't override existing transition on .btn — merge via cascade */
.btn {
  transition:
    transform            var(--t-base) var(--ease-out),
    background-color     350ms        cubic-bezier(0.16,1,0.3,1),
    color                280ms        cubic-bezier(0.16,1,0.3,1),
    border-color         280ms        cubic-bezier(0.16,1,0.3,1),
    box-shadow           var(--t-base) var(--ease-out),
    backdrop-filter      var(--t-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html, body, .topbar, .footer, .drawer,
  .mega, .mega--4grid, .vcard, .btn, .btn--ghost, .preloader {
    transition: none !important;
  }
}