@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* HSL Primitives */
  --brand-50-h: 192; --brand-50-s: 51%; --brand-50-l: 97%;
  --brand-100-h: 192; --brand-100-s: 51%; --brand-100-l: 93%;
  --brand-500-h: 192; --brand-500-s: 51%; --brand-500-l: 50%;
  --brand-700-h: 192; --brand-700-s: 51%; --brand-700-l: 30%;
  
  --secondary-50-h: 40; --secondary-50-s: 80%; --secondary-50-l: 97%;
  --secondary-400-h: 40; --secondary-400-s: 80%; --secondary-400-l: 60%;
  --secondary-500-h: 40; --secondary-500-s: 80%; --secondary-500-l: 48%;

  --slate-50-h: 210; --slate-50-s: 15%; --slate-50-l: 97%;
  --slate-100-h: 210; --slate-100-s: 15%; --slate-100-l: 93%;
  --slate-200-h: 210; --slate-200-s: 15%; --slate-200-l: 85%;
  --slate-300-h: 210; --slate-300-s: 15%; --slate-300-l: 75%;
  --slate-400-h: 210; --slate-400-s: 15%; --slate-400-l: 60%;
  --slate-500-h: 215; --slate-500-s: 20%; --slate-500-l: 50%;
  --slate-600-h: 215; --slate-600-s: 30%; --slate-600-l: 40%;
  --slate-700-h: 215; --slate-700-s: 40%; --slate-700-l: 30%;
  --slate-800-h: 215; --slate-800-s: 50%; --slate-800-l: 20%;
  --slate-900-h: 215; --slate-900-s: 65%; --slate-900-l: 15%;
  --slate-950-h: 215; --slate-950-s: 65%; --slate-950-l: 8%;

  --green-600-h: 145; --green-600-s: 65%; --green-600-l: 40%;
  --amber-500-h: 40; --amber-500-s: 90%; --amber-500-l: 50%;
  --red-600-h: 4; --red-600-s: 80%; --red-600-l: 50%;
  --blue-500-h: 210; --blue-500-s: 70%; --blue-500-l: 50%;

  /* Direct Reconstructed Values */
  --brand-50: hsl(var(--brand-50-h), var(--brand-50-s), var(--brand-50-l));
  --brand-100: hsl(var(--brand-100-h), var(--brand-100-s), var(--brand-100-l));
  --brand-500: hsl(var(--brand-500-h), var(--brand-500-s), var(--brand-500-l));
  --brand-700: hsl(var(--brand-700-h), var(--brand-700-s), var(--brand-700-l));

  --secondary-50: hsl(var(--secondary-50-h), var(--secondary-50-s), var(--secondary-50-l));
  --secondary-400: hsl(var(--secondary-400-h), var(--secondary-400-s), var(--secondary-400-l));
  --secondary-500: hsl(var(--secondary-500-h), var(--secondary-500-s), var(--secondary-500-l));

  --slate-50: hsl(var(--slate-50-h), var(--slate-50-s), var(--slate-50-l));
  --slate-100: hsl(var(--slate-100-h), var(--slate-100-s), var(--slate-100-l));
  --slate-200: hsl(var(--slate-200-h), var(--slate-200-s), var(--slate-200-l));
  --slate-300: hsl(var(--slate-300-h), var(--slate-300-s), var(--slate-300-l));
  --slate-400: hsl(var(--slate-400-h), var(--slate-400-s), var(--slate-400-l));
  --slate-500: hsl(var(--slate-500-h), var(--slate-500-s), var(--slate-500-l));
  --slate-600: hsl(var(--slate-600-h), var(--slate-600-s), var(--slate-600-l));
  --slate-700: hsl(var(--slate-700-h), var(--slate-700-s), var(--slate-700-l));
  --slate-800: hsl(var(--slate-800-h), var(--slate-800-s), var(--slate-800-l));
  --slate-900: hsl(var(--slate-900-h), var(--slate-900-s), var(--slate-900-l));
  --slate-950: hsl(var(--slate-950-h), var(--slate-950-s), var(--slate-950-l));

  --green-600: hsl(var(--green-600-h), var(--green-600-s), var(--green-600-l));
  --amber-500: hsl(var(--amber-500-h), var(--amber-500-s), var(--amber-500-l));
  --red-600: hsl(var(--red-600-h), var(--red-600-s), var(--red-600-l));
  --blue-500: hsl(var(--blue-500-h), var(--blue-500-s), var(--blue-500-l));

  /* Semantic Color Tokens (Light) */
  --color-surface-bg: var(--slate-50);
  --color-surface-raised: var(--slate-100);
  --color-text-primary: var(--slate-900);
  --color-text-secondary: var(--slate-600);

  --color-action-primary: var(--secondary-500);
  --color-action-primary-hover: var(--secondary-400);
  --color-action-primary-fg: var(--slate-900);
  --color-action-primary-subtle: var(--secondary-50);
  
  --color-brand-primary: var(--brand-700);
  --color-border-focus: var(--secondary-500);

  --color-feedback-success: var(--green-600);
  --color-feedback-error: var(--red-600);
  --color-feedback-warning: var(--amber-500);
  --color-feedback-info: var(--blue-500);

  /* Semantic Color Tokens (Dark) */
  --color-surface-bg-dark: var(--slate-950);
  --color-surface-raised-dark: var(--slate-900);
  --color-text-primary-dark: var(--slate-50);
  --color-text-secondary-dark: var(--slate-400);
  --surface-inner-glow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.08);

  /* Organismo 18: Stack Card (Glassmorphism Oscuro) */
  --stack-card-bg: hsla(var(--slate-900-h), var(--slate-900-s), var(--slate-900-l), 0.65);
  --stack-card-border: hsla(0, 0%, 100%, 0.1);

  /* Focus Ring */
  --focus-ring-color: var(--color-border-focus);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* Shadows (Light) */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px hsla(215, 65%, 15%, 0.10);
  --shadow-md: 0 4px 12px hsla(215, 65%, 15%, 0.15);
  --shadow-lg: 0 8px 28px hsla(215, 65%, 15%, 0.18);
  --shadow-xl: 0 16px 48px hsla(215, 65%, 15%, 0.22);
  --shadow-2xl: 0 24px 64px hsla(215, 65%, 15%, 0.28);

  /* Typography Scale */
  --font-family-display: 'Inter', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  
  --font-h1: clamp(36px, 8vw + 1rem, 96px);
  --font-h2: clamp(28px, 5vw + 1rem, 56px);
  --font-h3: clamp(20px, 3vw + 1rem, 36px);
  --font-body-lg: clamp(18px, 1rem + 0.5vw, 20px);
  --font-body: clamp(16px, 1rem + 0.25vw, 18px);
  --font-body-sm: clamp(14px, 0.875rem + 0.1vw, 16px);
  --font-caption: clamp(11px, 0.75rem + 0.1vw, 13px);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.75;
  
  --tracking-tight: -0.035em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.05em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 160px;

  --spacing-section-gap: var(--space-8);
  --spacing-card-padding: var(--space-5);
  --spacing-button-v: var(--space-3);
  --spacing-button-h: var(--space-5);

  --container-max-width: 1280px;
  --container-narrow-width: 720px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --radius-button: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-md);
  --radius-modal: var(--radius-lg);
  
  /* Breakpoints Z-Index Transition */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;

  /* Opacity tokens — Organismo 20 (Logos B2B flotantes) */
  --opacity-logo-primary:   0.20;
  --opacity-logo-secondary: 0.14;
  --opacity-logo-tertiary:  0.08;

  /* Duration tokens — Animaciones flotantes */
  --duration-float: 8s;
}

/* Base Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body {
  overflow-x: hidden;
  width: 100%;
}
body {
  line-height: var(--leading-normal);
  font-family: var(--font-family-body);
  background-color: var(--color-surface-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
a {
  color: inherit;
  text-decoration: none;
}