/* =================================== */
/* Design tokens                       */
/* =================================== */
:root {
  --color-primary: #08306b;
  --color-primary-dark: #003366;
  --color-primary-alt: #0a427c;
  --color-accent: #ffd700;
  --color-surface: #ffffff;
  --color-surface-soft: #f0f4f8;
  --color-border-soft: #e0e8f0;
  --color-text: #555;
  --color-text-strong: #000;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.12);
  --radius-card: 18px;
  --transition-base: 0.3s ease;
  --primary-dark: var(--color-primary-dark);
  --primary: #004080;
  --primary-light: #0066cc;
  --bg-light: var(--color-surface-soft);
  --bg-lighter: #e6eef5;
  --text-primary: var(--color-primary-dark);
  --text-secondary: #444;
  --text-tertiary: #555;
  --white: #fff;
  --transition-fast: 0.3s ease;
  --transition-normal: 0.35s ease;
  --transition-slow: 0.4s ease;
  --spacing-xs: 12px;
  --spacing-sm: 18px;
  --spacing-md: 25px;
  --spacing-lg: 30px;
  --spacing-xl: 45px;
  --spacing-2xl: 50px;
  --spacing-3xl: 80px;
  --border-radius: var(--radius-card);
  --border-radius-sm: 12px;
  --border-radius-lg: 18px;
  --shadow-mapa: 0 20px 40px rgba(0, 0, 0, 0.1);
  --shadow-mapa-hover: 0 30px 60px rgba(8, 48, 107, 0.15);
}

/* =================================== */
/* 🔄 RESET BÁSICO DEL NAVEGADOR       */
/* =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =================================== */
/* 🔄 FONDO GENERAL DE LA PÁGINA       */
/* =================================== */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(180deg, #f0f4ff, #ffffff);
  color: #222;
  line-height: 1.6;
}

/* =================================== */
/* 🎯 CLASE PARA ACCESIBILIDAD         */
/* =================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}