:root {
  /* Color de marca */
  --k-brand:        #00243c;   /* azul institucional Kober */
  --k-brand-ink:    #ffffff;   /* 15.9:1 sobre la marca — AAA */
  --k-brand-tint:   #0a3b5c;   /* hover/elevación sobre superficies de marca */
  --k-accent:       #f25c05;   /* naranja: bordes, selección, íconos, texto grande */
  --k-accent-text:  #c2450a;   /* naranja oscurecido: texto pequeño sobre claro (5.1:1) */
  --k-accent-ink:   var(--k-brand); /* tinta sobre naranja: NUNCA blanco (3.3:1) */

  /* Superficies y tinta */
  --k-surface:      #ffffff;
  --k-surface-alt:  #f5f6f7;
  --k-surface-dark: var(--k-brand);
  --k-ink:          #111827;   /* texto principal — 17.7:1 */
  --k-ink-muted:    #4b4b4b;   /* texto secundario — 8.7:1 */
  --k-line:         #e3e5e8;
  --k-focus:        var(--k-accent);

  /* Tipografía: pila del sistema (sin fuentes autoalojadas todavía, ver nota abajo) */
  --k-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-fw-regular: 400;  --k-fw-medium: 500;  --k-fw-bold: 700;
  --k-fs-300: clamp(.8125rem, .78rem + .15vw, .875rem);
  --k-fs-400: clamp(.9375rem, .9rem + .2vw, 1rem);
  --k-fs-600: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
  --k-fs-800: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);

  /* Espacio, radio, sombra, movimiento */
  --k-space-1: .25rem;  --k-space-2: .5rem;   --k-space-3: .75rem;
  --k-space-4: 1rem;    --k-space-6: 1.5rem;  --k-space-8: 2rem;
  --k-radius-sm: 4px;   --k-radius-md: 8px;   --k-radius-lg: 16px;
  --k-shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .08);
  --k-ease: cubic-bezier(.2,.7,.3,1);
  --k-dur-fast: 120ms;  --k-dur-base: 220ms;

  /* Curvas de la coreografía de portada, equivalentes a las que el portal de clientes
     consigue con GSAP. Se declaran aquí para que las dos casas se muevan igual sin cargar
     la librería. Ojo con la numeración de GSAP: cuenta las potencias desde la cuadrática,
     así que power2 es la cúbica, power3 la cuártica y power4 la quíntica. */
  --k-ease-out-cubic:   cubic-bezier(.215, .61, .355, 1);    /* power2.out   — entra el logo */
  --k-ease-out-quart:   cubic-bezier(.165, .84, .44, 1);     /* power3.out   — cascada del contenido */
  --k-ease-in-back:     cubic-bezier(.6, -.247, .735, .045); /* back.in(1.5) — la caída con impulso */
  --k-ease-inout-quint: cubic-bezier(.86, 0, .07, 1);        /* power4.inOut — se abre el telón */

  /* Layout */
  --k-rail-w: 104px;        /* barra de categorías en escritorio */
  --k-panel-w: 380px;       /* panel de opciones en escritorio */
  --k-sheet-h: 46dvh;       /* alto del bottom sheet en móvil */
  --k-stage-ratio: 1200/750;
}
@media (prefers-reduced-motion: reduce) { :root { --k-dur-fast: 0ms; --k-dur-base: 0ms; } }

/* Pendiente: autoalojar Roboto variable (woff2) cuando el archivo esté disponible;
   por ahora --k-font-* cae a la pila del sistema para no pedir un archivo inexistente. */