/* ============================= */
/* 1. VARIABLES GLOBALES         */
/* ============================= */

:root {
  /* === Colores principales (basados en el logo) === */
  --primary-color: #1A365D;
  /* Azul oscuro principal */
  --secondary-color: #2A9D90;
  /* Verde azulado */
  --tertiary-color: rgba(42, 157, 144, 0.1);
  /* Verde azulado muy suave */
  --accent-color: #4FB0C6;
  /* Verde agua suave */
  --text-color: #2E2E2E;
  /* Gris oscuro para texto */
  --text-muted: #6c757d;
  /* Texto secundario */
  --bg-light: #F8F9FA;
  /* Fondo claro muy suave */
  --bg-white: #FFFFFF;
  /* Blanco puro */

  /* === Sombras y bordes (Glassmorphism inspired) === */
  --shadow-sm: 0 2px 8px rgba(26, 54, 93, 0.08);
  --shadow: 0 4px 16px rgba(26, 54, 93, 0.1);
  --shadow-lg: 0 10px 30px rgba(26, 54, 93, 0.15);
  --shadow-hover: 0 15px 35px rgba(26, 54, 93, 0.2);
  --border-light: rgba(26, 54, 93, 0.08);

  /* === Fuentes === */
  --font-primary: 'Poppins', 'Nunito', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* === Botones === */
  --btn-radius: 50px;
  /* Más redondeado y moderno */
  --btn-hover: #238C80;
  /* Un poco más oscuro que secondary */

  /* === Transiciones === */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* === Breakpoints === */
  --xs: 480px;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
}

/* === Reset básico === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--text-color);
  background-color: var(--bg-light);
  line-height: var(--line-height-base);
}