/* ============================================================================
   Synthetic User by jsadsAI | José Santamaría
   base.css — design tokens, reset, tipografía fluida y utilidades
   ========================================================================== */

:root {
  /* --- Paleta de marca (PRD) --- */
  --su-black: #02070D;
  --su-deep-black: #000308;
  --su-navy: #00111F;
  --su-electric-blue: #00A7FF;
  --su-cyan: #00D9FF;
  --su-white: #FFFFFF;
  --su-soft-white: #EAF7FF;
  --su-gray: #8A96A3;
  --su-dark-gray: #101820;
  --su-border: rgba(0, 217, 255, 0.18);
  --su-glow: rgba(0, 167, 255, 0.45);

  /* --- Derivados --- */
  --su-blue-cyan: linear-gradient(120deg, var(--su-electric-blue), var(--su-cyan));
  --su-surface: rgba(255, 255, 255, 0.03);
  --su-surface-2: rgba(255, 255, 255, 0.05);
  --su-text: #C7D3DE;
  --su-text-dim: #8A96A3;
  --su-text-strong: #EAF7FF;

  /* --- Tipografía --- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* --- Escala fluida (clamp) --- */
  --step--1: clamp(0.83rem, 0.78rem + 0.22vw, 0.95rem);
  --step-0: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.5rem, 1.28rem + 1.05vw, 2.25rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.95vw, 3.15rem);
  --step-4: clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
  --step-5: clamp(3rem, 2rem + 4.8vw, 6rem);

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --header-h: 76px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 600ms;

  /* --- Sombra / glow --- */
  --shadow-card: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--su-border), 0 24px 60px -28px var(--su-glow);

  color-scheme: dark;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--su-text);
  background-color: var(--su-black);
  background-image:
    radial-gradient(1200px 700px at 80% -10%, rgba(0, 167, 255, 0.12), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(0, 217, 255, 0.08), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--su-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--su-electric-blue); color: var(--su-black); }

/* --- Tipografía base --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--su-text-strong);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { max-width: 68ch; }

.gradient-text {
  background: var(--su-blue-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Utilidades --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); position: relative; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--su-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--su-cyan); opacity: 0.6; }
.lead { font-size: var(--step-1); color: var(--su-text); line-height: 1.55; }
.text-dim { color: var(--su-text-dim); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--su-border), transparent); border: 0; }