/* Tokens del sistema de diseño GoBrand — copia literal de "GoBrand Design System/tokens/".
   No editar aquí: si cambia el sistema, regenerar desde esa carpeta.
   (Se omite el @import de fuentes: la Inter Tight se carga con <link> en cada HTML.) */

/* ---------- fonts.css ---------- */
/* Familia única del sistema.
   Original de marca: Helvetica Now Display / Neue Haas Grotesk Display (licencia comercial).
   SUSTITUCIÓN ACTIVA: Inter Tight (Google Fonts) — grotesca neutra de proporciones muy
   cercanas, con tracking negativo estable en tamaños display. Si consigues licencia de
   Helvetica Now Display, basta con colocar los .woff2 en assets/fonts/ y declarar los
   @font-face aquí: --font-sans ya la lista primero. */

:root {
  --font-sans: "Helvetica Now Display", "Inter Tight", Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Única excepción: la itálica serif de un guiño editorial, una sola vez en todo el sitio */
  --font-serif-accent: Georgia, serif;
}

/* ---------- colors.css ---------- */
:root {
  /* ---------- Base oscura (nunca negro puro) ---------- */
  --ink-950: #030108;   /* fondo absoluto, solo para viñeteo */
  --ink-900: #07030F;   /* fondo de página */
  --ink-800: #0D0619;   /* secciones alternas */
  --ink-700: #150B28;   /* superficies elevadas opacas */
  --ink-600: #1F1138;   /* bordes gruesos, separadores sólidos */

  /* ---------- Púrpura (color primario) ---------- */
  --violet-700: #4C1D95;
  --violet-600: #6D28D9;
  --violet-500: #7C3AED;
  --violet-400: #9F6BFF;
  --violet-300: #C4A6FF;
  --violet-200: #E2D4FF;

  /* ---------- Azul (color secundario) ---------- */
  --blue-600: #1D4ED8;
  --blue-500: #2F6BFF;
  --blue-400: #5B93FF;
  --blue-300: #A9C6FF;

  /* ---------- Neutros ---------- */
  --white:    #FFFFFF;
  --paper:    #F5F3FB;
  --gray-300: #C9C4D6;
  --gray-500: #8A83A0;
  --gray-700: #4A4360;

  /* ---------- Semánticos ---------- */
  --bg:           var(--ink-900);
  --bg-alt:       var(--ink-800);
  --surface:      var(--ink-700);
  --fg:           var(--white);
  --fg-muted:     var(--gray-300);
  --fg-subtle:    var(--gray-500);
  --accent:       var(--violet-500);
  --accent-hover: var(--violet-400);
  --accent-2:     var(--blue-500);
  --focus-ring:   var(--violet-300);

  /* Scrim obligatorio detrás de texto sobre vidrio o foto */
  --scrim:        rgba(7, 3, 15, .55);
  --scrim-strong: rgba(7, 3, 15, .82);
}

/* ---------- typography.css ---------- */
:root {
  /* Escala fluida (clamp: móvil → desktop) */
  --t-display: clamp(3.25rem, 9vw, 7.5rem); /* @kind font */
  --t-h1:      clamp(2.5rem, 6vw, 4.5rem); /* @kind font */
  --t-h2:      clamp(1.875rem, 4vw, 3rem); /* @kind font */
  --t-h3:      clamp(1.375rem, 2.4vw, 1.75rem); /* @kind font */
  --t-body-lg: 1.125rem; /* @kind font */
  --t-body:    1rem; /* @kind font */
  --t-sm:      0.875rem; /* @kind font */
  --t-xs:      0.75rem; /* @kind font */

  /* Tracking */
  --track-display: -0.04em; /* @kind other */
  --track-h:       -0.02em; /* @kind other */
  --track-body:    0em; /* @kind other */
  --track-label:   0.18em; /* @kind other */

  /* Interlineado */
  --leading-tight: 0.92; /* @kind other */
  --leading-snug:  1.15; /* @kind other */
  --leading-body:  1.6; /* @kind other */

  /* Pesos */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */

  --measure: 68ch; /* @kind other */
}

/* ---------- spacing.css ---------- */
:root {
  /* Radios — el sistema es "rounded first" */
  --r-xs:   12px;
  --r-sm:   16px;
  --r-md:   24px;
  --r-lg:   32px;
  --r-xl:   40px;
  --r-2xl:  56px;
  --r-pill: 999px;

  /* Espaciado — base 4, ritmo de 8 */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --section-y: clamp(80px, 12vw, 160px); /* @kind spacing */
  --container: 1200px; /* @kind spacing */
  --gutter: clamp(20px, 5vw, 48px); /* @kind spacing */

  --grid-cols: 12; /* @kind other */
  --grid-gap: var(--s-5); /* @kind spacing */
  --touch-min: 44px; /* @kind spacing */
}

/* ---------- effects.css ---------- */
:root {
  /* ---------- Degradados y luz ---------- */
  --grad-page:
    radial-gradient(120% 80% at 50% -10%, #2A1160 0%, transparent 60%),
    radial-gradient(90% 60% at 85% 15%, #14306B 0%, transparent 55%),
    var(--ink-900);

  --grad-aurora: linear-gradient(135deg, #7C3AED 0%, #4B3BE8 45%, #2F6BFF 100%); /* @kind color */
  --grad-text: linear-gradient(180deg, #FFFFFF 0%, #DDE9FF 45%, #A9C6FF 100%);
  --grad-stroke: linear-gradient(140deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(124,58,237,.35) 70%,
    rgba(47,107,255,.45) 100%);
  --glow-focal: radial-gradient(closest-side, rgba(124,58,237,.55), transparent 70%); /* @kind color */

  /* ---------- Sombras ---------- */
  --sh-sm:   0 2px 8px rgba(0,0,0,.40);
  --sh-md:   0 12px 32px -12px rgba(0,0,0,.60);
  --sh-lg:   0 32px 80px -24px rgba(0,0,0,.75);
  --sh-glow: 0 0 60px -12px rgba(124,58,237,.55);

  /* ---------- Bordes (ninguno supera 1px) ---------- */
  --border-hair: 1px solid rgba(255,255,255,.10); /* @kind other */
  --border-soft: 1px solid rgba(255,255,255,.16); /* @kind other */

  /* ---------- Vidrio ---------- */
  --glass-fill: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%); /* @kind color */
  --glass-blur: blur(28px) saturate(180%); /* @kind other */
  --glass-fallback: rgba(21,11,40,.88);
  --glass-shadow:
    0 1px 0 0 rgba(255,255,255,.22) inset,
    0 -1px 0 0 rgba(0,0,0,.30) inset,
    0 24px 60px -20px rgba(0,0,0,.65),
    0 0 80px -40px rgba(124,58,237,.60);

  --liquid-blur: blur(40px) saturate(200%) brightness(1.08); /* @kind other */
  --liquid-shadow:
    0 8px 32px rgba(0,0,0,.55),
    0 0 0 .5px rgba(255,255,255,.10),
    inset 0 1px 1px rgba(255,255,255,.30),
    inset 0 -8px 24px rgba(124,58,237,.18);
}

.glass {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--glass-fallback); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--glass-fallback); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.display-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- motion.css ---------- */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* @kind other */
  --d-fast: 180ms; /* @kind other */
  --d-base: 320ms; /* @kind other */
  --d-slow: 620ms; /* @kind other */
  --stagger: 60ms; /* @kind other */
  --lift-card: -6px; /* @kind other */
  --lift-btn: -2px; /* @kind other */
  --scale-max: 1.02; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 120ms; /* @kind other */
    --d-base: 120ms; /* @kind other */
    --d-slow: 120ms; /* @kind other */
    --lift-card: 0px; /* @kind other */
    --lift-btn: 0px; /* @kind other */
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- base.css ---------- */
body {
  margin: 0;
  background: var(--grad-page);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

p { color: var(--fg-muted); max-width: var(--measure); text-wrap: pretty; }

a { color: var(--blue-400); text-decoration: none; transition: color var(--d-fast) var(--ease); }
a:hover { color: var(--violet-300); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

::selection { background: rgba(124,58,237,.45); color: var(--white); }

.tabular { font-variant-numeric: tabular-nums; }