@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Syncopate:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');

:root {
  --color-navy: #0A2540;
  --color-marine: #0F2D59;
  --color-electric: #0076A8;
  --color-white: #FFFFFF;

  --gradient-hero: radial-gradient(circle at center, #0076A8 0%, #0A2540 100%);
  --gradient-hero-percent: radial-gradient(circle at center, #0076A8 0%, #0A2540 70%);

  --font-heading: 'Montserrat', sans-serif;
  --font-label: 'Syncopate', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  --font-weight-heading: 700;
  --font-weight-subheading: 600;
  --font-weight-body: 400;
  --font-weight-regular: 400;

  /* Contraste de texto */
  --text-primary: #0A2540;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-on-dark: #F8FAFC;
  --text-on-dark-muted: #CBD5E1;

  --shadow-card: 0 4px 20px rgba(10, 37, 64, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(10, 37, 64, 0.15);
  --shadow-nav: 0 2px 20px rgba(10, 37, 64, 0.1);

  --radius-card: 12px;
  --radius-button: 50px;
  --radius-small: 6px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --max-width: 1200px;
  --nav-height: 80px;

  --z-loader: 9999;
  --z-nav: 1000;
  --z-dropdown: 999;
}