/* site.css — el sistema visual de Lemus Digital, en un solo sitio.
 *
 * Estos tokens estaban copiados, idénticos, dentro de index.html y de
 * automatizacion/index.html. Dos copias de lo mismo divergen: basta con que alguien
 * ajuste un azul en una página. Aquí viven una vez, y de aquí los toma también /demo —
 * que hasta hoy tenía su PROPIO tema (otras fuentes, otra paleta) y parecía de otra
 * empresa justo cuando más confianza hay que dar.
 *
 * Solo van los TOKENS y las primitivas compartidas. Lo que es de una página concreta se
 * queda inline en ella.
 */
:root {
  --navy-950: #060F1A;
  --navy-900: #0B1A2A;
  --navy-800: #11253A;
  --navy-700: #1A3450;
  --navy-600: #2A4A6A;

  --cyan-500: #3DA9DC;
  --cyan-400: #5BBDE8;
  --cyan-300: #8DD3F0;
  --cyan-glow: rgba(61, 169, 220, 0.25);

  --slate-50: #F4F7FA;
  --slate-100: #E8EEF3;
  --slate-200: #C8D3DE;
  --slate-300: #9AAABB;
  --slate-400: #6B7E92;
  --slate-500: #4A5D72;

  --bg: var(--navy-950);
  --bg-soft: var(--navy-900);
  --surface: var(--navy-800);
  --surface-2: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);
  --text: #F4F7FA;
  --text-muted: #9AAABB;
  --accent: var(--cyan-500);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --container: 1240px;
  --gap: clamp(16px, 2vw, 28px);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--cyan-500); color: var(--navy-950); }

/* ========== i18n TOGGLE ========== */
/* The html[lang] attribute is set by the bootstrap script in <head> before body renders. */
html[lang="es"] [data-lang="en"],
html[lang="en"] [data-lang="es"] {
  display: none !important;
}