/* ============================================================
   UNIVERSALE.AI — DESIGN TOKENS
   Source of truth: opt-4.html
   Concept: Maverick brutalist — negro absoluto, lima eléctrica,
   monoespaciada en todo, bordes gruesos, sin gradientes suaves.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- COLORES CORE ---------- */
  --u-black: #000000;             /* Base — fondo de TODO */
  --u-white: #FAFAFA;             /* Texto y bordes principales */
  --u-lime: #84CC16;              /* Acento eléctrico — CTAs, números, hover */
  --u-magenta: #FF0055;           /* Reservado: alarmas, errores */

  /* ---------- ESCALA DIM (jerarquía sobre negro) ---------- */
  --u-dim: rgba(250, 250, 250, 0.18);          /* Texto desactivado, divisores */
  --u-dim-mid: rgba(250, 250, 250, 0.45);      /* Bordes secundarios */
  --u-dim-strong: rgba(250, 250, 250, 0.70);   /* Labels, metadatos */
  --u-text-soft: rgba(250, 250, 250, 0.85);    /* Body sobre negro */
  --u-text: #FAFAFA;                            /* Headings */

  /* ---------- LIMA — VARIANTES ---------- */
  --u-lime-soft: rgba(132, 204, 22, 0.04);     /* Hover backgrounds sutiles */
  --u-lime-mid: rgba(132, 204, 22, 0.30);      /* Gradient end */

  /* ---------- BORDES ---------- */
  --u-border: 2px solid var(--u-white);            /* Brutalist principal */
  --u-border-thin: 1px solid rgba(250,250,250,0.25); /* Secundario */
  --u-border-lime: 2px solid var(--u-lime);        /* Acento (lead magnet, hero accent) */
  --u-border-list: 1px solid rgba(250,250,250,0.15); /* Filas de catálogo */

  /* ---------- TIPOGRAFÍA ---------- */
  --u-font: 'Space Mono', 'Courier New', monospace;
  --u-fw-regular: 400;
  --u-fw-bold: 700;

  /* Escala fluida — heredada de opt-4 */
  --u-fs-hero: clamp(2.8rem, 9vw, 6.5rem);     /* Hero headline */
  --u-fs-cta: clamp(3.5rem, 11vw, 8rem);       /* Cierre "Hablemos." */
  --u-fs-section: clamp(2rem, 5vw, 3.5rem);    /* Section title */
  --u-fs-axis: clamp(2.5rem, 6vw, 4.5rem);     /* Axis name (Servicio./Formación./Producto.) */
  --u-fs-counter: clamp(2.5rem, 5vw, 4rem);    /* Big numbers */
  --u-fs-gap: clamp(2.8rem, 5vw, 4rem);        /* Gap stats */
  --u-fs-lead: clamp(1rem, 2vw, 1.15rem);      /* Section lead */
  --u-fs-sub: clamp(0.95rem, 2vw, 1.2rem);     /* Hero sub */
  --u-fs-body: 1rem;                            /* Body */
  --u-fs-small: 0.9rem;                         /* Body small */
  --u-fs-meta: 0.85rem;                         /* Marquee, meta */
  --u-fs-label: 0.75rem;                        /* Eyebrow, nav-link, button */
  --u-fs-micro: 0.7rem;                         /* Section /01 · etiqueta */

  /* Letter-spacing — clave para el brutalist */
  --u-ls-tight: -0.03em;          /* Headlines */
  --u-ls-headline: -0.025em;       /* Section title */
  --u-ls-normal: -0.01em;          /* Product titles */
  --u-ls-wide: 0.05em;             /* Buttons */
  --u-ls-button: 0.08em;           /* CTAs */
  --u-ls-caps: 0.1em;              /* Marquee, nav */
  --u-ls-label: 0.15em;            /* Nav links, axis tag */
  --u-ls-eyebrow: 0.2em;           /* Eyebrow, section label */

  /* Line-height */
  --u-lh-display: 0.9;             /* "Hablemos." */
  --u-lh-headline: 0.92;           /* Hero, section, axis */
  --u-lh-cta: 1;                   /* Counter numbers */
  --u-lh-body: 1.6;                /* Body */
  --u-lh-loose: 1.7;               /* Section lead */

  /* ---------- ESPACIO ---------- */
  --u-space-1: 8px;
  --u-space-2: 12px;
  --u-space-3: 16px;
  --u-space-4: 24px;
  --u-space-5: 32px;
  --u-space-6: 40px;
  --u-space-7: 48px;
  --u-space-8: 64px;
  --u-space-9: 80px;
  --u-space-10: 100px;
  --u-space-11: 120px;

  /* Padding de secciones — mobile/desktop */
  --u-pad-section: 100px 40px;
  --u-pad-section-tablet: 80px 24px;
  --u-pad-section-mobile: 60px 20px;

  /* ---------- LAYOUT ---------- */
  --u-nav-h: 64px;
  --u-max-headline: 1400px;
  --u-max-title: 1200px;
  --u-max-lead: 820px;
  --u-max-prose: 720px;

  /* ---------- TRANSICIONES ---------- */
  --u-tr-fast: 0.1s;               /* Hover botones */
  --u-tr-mid: 0.15s;                /* Hover links, opacity */
  --u-tr-slow: 0.3s;                /* Reservado */

  /* ---------- RADIOS ---------- */
  /* Brutalist: NO HAY RADIOS. Todos los componentes son cuadrados. */
  --u-radius: 0;
}

/* ============================================================
   RESETS BÁSICOS
   ============================================================ */

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

html, body {
  background: var(--u-black);
  color: var(--u-white);
  font-family: var(--u-font);
  font-weight: var(--u-fw-regular);
  font-size: var(--u-fs-body);
  line-height: var(--u-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--u-lime); color: var(--u-black); }

/* ============================================================
   UTILIDADES — text & color
   ============================================================ */

.u-lime { color: var(--u-lime); }
.u-white { color: var(--u-white); }
.u-dim { color: var(--u-dim-strong); }
.u-bg-black { background: var(--u-black); }
.u-bg-lime { background: var(--u-lime); color: var(--u-black); }

.u-caps { text-transform: uppercase; letter-spacing: var(--u-ls-caps); }
.u-eyebrow { text-transform: uppercase; letter-spacing: var(--u-ls-eyebrow); font-size: var(--u-fs-label); font-weight: var(--u-fw-bold); }
.u-label { text-transform: uppercase; letter-spacing: var(--u-ls-label); font-size: var(--u-fs-label); font-weight: var(--u-fw-bold); }