/* ═══════════════════════════════════════════════════════════════
   base.css — Tokens, reset, y utilities globales
   Importado en todas las páginas del sitio
═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Dusk palette */
  --color-bg:          #070514;
  --color-bg-mid:      #0d0b20;
  --color-bg-surface:  rgba(255 255 255 / 0.04);

  /* Aurora hues */
  --hue-violet:        #7c3aed;
  --hue-indigo:        #4338ca;
  --hue-blue:          #1d4ed8;
  --hue-purple:        #9333ea;
  --hue-cyan:          #0ea5e9;
  --hue-magenta:       #a855f7;

  /* Text */
  --text-primary:   #f1eeff;
  --text-secondary: rgba(241 238 255 / 0.60);
  --text-muted:     rgba(241 238 255 / 0.35);

  /* Brand accent gradients */
  --grad-primary: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%);
  --grad-glow:    linear-gradient(135deg, #c084fc 0%, #818cf8 50%, #60a5fa 100%);

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-glow: 0 0 40px rgba(168 85 247 / 0.35),
                 0 0 80px rgba(99 102 241 / 0.20);

  /* Transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --trans-base:  0.25s var(--ease-out);

  /* Layout */
  --nav-h:         4.5rem;
  --container-max: 1160px;
  --section-pad:   clamp(5rem, 10vw, 8rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--color-bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; }

:focus-visible {
  outline: 2px solid var(--hue-magenta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── UTILITIES ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: var(--trans-base), transform 0.18s var(--ease-spring);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 0.45rem 1.1rem; font-size: 0.875rem; }
.btn--lg { padding: 0.8rem  1.8rem; font-size: 1rem; }

.btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(168 85 247 / 0.45);
}
.btn--primary:hover {
  box-shadow: 0 6px 30px rgba(168 85 247 / 0.60);
  background: var(--grad-glow);
}
.btn--primary svg { width: 1.1em; height: 1.1em; }

.btn--ghost {
  background: rgba(255 255 255 / 0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255 255 255 / 0.12);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(255 255 255 / 0.12);
  border-color: rgba(168 85 247 / 0.40);
}