/* Vectrum Design System - Base Styles (v3) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-primary);
  /* Refinamiento micro-tipográfico de Inter (features OpenType; no-op en otras fuentes) */
  font-feature-settings: "cv01", "cv09", "cv11", "ss03";
  background-color: var(--color-container-body);
  color: var(--color-font-85);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Base Headings (Fallback) */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-font-100);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* --- TYPOGRAPHY HIERARCHIES --- */

/* 1. UI Hierarchy (DM Sans / Quicksand) */
.ui-title { font-size: var(--font-size-ui-title); font-weight: var(--font-weight-medium); }
.ui-sub { font-size: var(--font-size-ui-sub); font-weight: var(--font-weight-medium); }
.ui-body { font-size: var(--font-size-ui-body); font-weight: var(--font-weight-regular); }

/* 2. Publications Hierarchy (DM Sans) */
.pub-head-pri { font-size: var(--font-size-pub-head-pri); font-weight: var(--font-weight-medium); letter-spacing: -0.03em; }
.pub-head-sec { font-size: var(--font-size-pub-head-sec); font-weight: var(--font-weight-regular); letter-spacing: -0.02em; }
.pub-sub-pri { font-size: var(--font-size-pub-sub-pri); font-weight: var(--font-weight-regular); }
.pub-sub-sec { font-size: var(--font-size-pub-sub-sec); font-weight: var(--font-weight-regular); }
.pub-body-pri { font-size: var(--font-size-pub-body-pri); font-weight: var(--font-weight-regular); }
.pub-body-sec { font-size: var(--font-size-pub-body-sec); font-weight: var(--font-weight-regular); }
.pub-num-1 { font-size: var(--font-size-pub-num-1); font-weight: var(--font-weight-medium); line-height: 0.9; }
.pub-num-2 { font-size: var(--font-size-pub-num-2); font-weight: var(--font-weight-medium); line-height: 0.9; }
.pub-num-3 { font-size: var(--font-size-pub-num-3); font-weight: var(--font-weight-medium); line-height: 0.9; }

/* 3. Presentations Hierarchy (Quicksand) */
.pres-text { font-family: var(--font-family-secondary); }
.pres-title { font-size: var(--font-size-pres-title); font-weight: var(--font-weight-medium); }
.pres-sub-1 { font-size: var(--font-size-pres-sub-1); font-weight: var(--font-weight-medium); }
.pres-sub-2 { font-size: var(--font-size-pres-sub-2); font-weight: var(--font-weight-medium); }
.pres-body-1 { font-size: var(--font-size-pres-body-1); font-weight: var(--font-weight-regular); }
.pres-body-2 { font-size: var(--font-size-pres-body-2); font-weight: var(--font-weight-regular); }
.pres-body-3 { font-size: var(--font-size-pres-body-3); font-weight: var(--font-weight-regular); }
.pres-num-lg { font-size: var(--font-size-pres-num-lg); font-weight: var(--font-weight-medium); line-height: 1; }
.pres-num-sm { font-size: var(--font-size-pres-num-sm); font-weight: var(--font-weight-medium); line-height: 1; }

p { margin-bottom: var(--space-4); }

.hero-text {
  font-size: var(--font-size-pub-head-sec);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Layout Utilities */
.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-12) 0; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.text-center { text-align: center; }
.text-brand { color: var(--color-brand-primary); }
.text-muted { color: var(--color-font-50); }

/* Ambient Glow Effect */
.ambient-glow {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--color-paleta-emerald-25) 0%, rgba(0,0,0,0) 60%);
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

/* Keyboard focus — visible on every interactive element, branded to the accent */
:focus-visible {
  outline: 2px solid var(--color-paleta-emerald);
  outline-offset: 2px;
  border-radius: 2px;
}