/* ===========================================================================
   Drive Forge — Design tokens
   ADN visual heredado del sitio actual: negro #111 + amarillo ácido #FFE500
   + Space Grotesk (display) / Inter (texto). Estética industrial premium.
   =========================================================================== */

/* --- Fuentes auto-hospedadas (subset latin). Sin CDN de Google Fonts:
       mejor LCP y sin transferencia de IP a Google (cumplimiento RGPD). --- */
/* Son fuentes variables: los antiguos inter-500/600 y spacegrotesk-500/600/700 eran
   copias byte a byte del mismo archivo. Una @font-face por familia con el eje de peso
   en rango; el navegador descarga un solo archivo por familia. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/spacegrotesk-400.woff2) format("woff2"); }

:root {
  /* --- Superficies (negro técnico, profundidad por capas) --- */
  --bg:            #111111;  /* fondo base (igual que la demo) */
  --bg-elev:       #181818;  /* secciones elevadas / alternas */
  --surface:       #1b1c1e;  /* tarjetas */
  --surface-2:     #202224;  /* tarjetas hover / inputs */
  --line:          #2a2c2f;  /* hairlines */
  --line-strong:   #6b7078;  /* contorno de CONTROLES (inputs, select, dropzone, filtros, qty): 3,8:1 vs --bg, 3,2:1 vs --surface-2 (WCAG 1.4.11, mín. 3:1) */
  --line-deco:     #3a3d42;  /* trazo DECORATIVO (marcos, esquinas, separadores, hover de tarjetas): sutil a propósito, no identifica ningún control */

  /* --- Tinta --- */
  --ink:           #f5f6f7;  /* texto principal */
  --ink-2:         #b6bbc2;  /* texto secundario */
  --ink-3:         #8b919a;  /* muted / metadatos (AA con margen sobre tarjetas) */

  /* --- Acento de marca (amarillo forja/hazard) --- */
  --accent:        #FFE500;
  --accent-600:    #E6CF00;  /* hover */
  --accent-700:    #c7b400;
  --on-accent:     #111111;  /* texto sobre amarillo */
  --accent-glow:   rgba(255, 229, 0, 0.18);
  --accent-line:   rgba(255, 229, 0, 0.55); /* líneas de escaneo */

  /* --- Tipografía --- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* "mono" es un papel (etiquetas, cifras), no una fuente monoespaciada: el respaldo
     es una sans para que, mientras carga Space Grotesk, Windows no enseñe Consolas. */
  --font-mono:    "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Escala tipográfica (fase 1). Un paso = un papel; nada fuera de aquí. --- */
  --fs-2xs:     0.75rem;                                      /* 12   · eyebrow, chip, tag, mono micro */
  --fs-xs:      0.845rem;                                     /* 13.5 · nota, pie, botón pequeño */
  --fs-sm:      0.9375rem;                                    /* 15   · secundario, footer, formulario */
  --fs-base:    1.0625rem;                                    /* 17   · cuerpo y botones */
  --fs-md:      1.155rem;                                     /* 18.5 · h3 pequeño, wordmark */
  --fs-lead:    clamp(1.15rem, 1rem + 0.62vw, 1.3125rem);     /* 18.4 → 21 */
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.85vw, 1.625rem);   /* 21.6 → 26 */
  --fs-h2:      clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);    /* 28.1 → 38 */
  --fs-h1:      clamp(2.45rem, 1.7rem + 3.3vw, 3.375rem);     /* 39.6 → 54 */
  --fs-h1-hero: clamp(2.7rem, 1.6rem + 4.6vw, 3.75rem);       /* 43.2 → 60 · solo el hero de la home */
  --fs-num:     clamp(2.2rem, 1.4rem + 3vw, 3.4rem);          /* numeral decorativo (.proc-card__num) */

  /* --- Interlineado: tres papeles, ni uno más --- */
  --lh-tight: 1.05;   /* titulares y cifras */
  --lh-body:  1.65;   /* p, li, leads (altura de hoy: no se mueve el sitio) */
  --lh-ui:    1.35;   /* botones, chips, nav, labels */

  /* --- Escala de espaciado (fase 2). Base 4, ocho pasos. Todo padding/margin/gap
         de componente sale de aquí; lo de sección cuelga de --section-y / --gutter. --- */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-7: 2rem;      /* 32px */
  --sp-8: 2.5rem;    /* 40px */

  /* Padding interior de tarjeta: un solo valor para todas las variantes.
     Antes cada archivo tenía el suyo (22.4→32 / 25.6→35.2 / 24→38.4px).
     Ahora recorre dos pasos exactos de la escala: --sp-6 (24) → --sp-7 (32). */
  --card-pad: clamp(1.5rem, 1.1rem + 1vw, 2rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);

  /* --- Radios --- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Sombras / glow --- */
  --shadow-sm: 0 2px 10px -6px rgba(0, 0, 0, 0.6);
  --shadow:    0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.85);
  --ring: 0 0 0 1px var(--line);
  /* Profundidad "premium" en capas: reborde de luz cenital + sombra proyectada suave.
     Se usan en tarjetas y superficies elevadas para dar sensación de material. */
  --shadow-card:       inset 0 1px 0 0 rgba(255,255,255,0.04), 0 14px 30px -20px rgba(0,0,0,0.8);
  --shadow-card-hover: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 26px 50px -24px rgba(0,0,0,0.9);
  /* Luz cenital sutil para el tope de superficies (gradiente discreto, no llamativo) */
  --surface-hi: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  /* movimiento "mecánico / de precisión" (no plantilla) */
  --ease-machine: cubic-bezier(0.18, 0.84, 0.28, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --ease-scan: cubic-bezier(0.65, 0, 0.25, 1);
  --t-press: 90ms;
  --t-machine: 260ms;

  /* --- Rejilla técnica de fondo --- */
  --grid: rgba(255, 255, 255, 0.035);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}