/* ==========================================================
   THEME: ENDURANCE
   Vibra: Energía, resistencia, deporte, confianza
   Público: Crossfit, running, entrenamiento funcional
   Color primario: Azul (#2563eb)
========================================================== */

:root {
  /* --- COLOR PRIMARIO --- */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: rgba(37, 99, 235, 0.12);
  --primary-gradient: linear-gradient(135deg, #2563eb, #3b82f6);

  /* --- FONDOS Y SUPERFICIES --- */
  --color-background: #f4f7fb;
  --color-background-elevated: #ffffff;
  --color-background-soft: #eef3f8;
  --color-surface: #ffffff;
  --color-surface-hover: #f8faff;

  --color-text: #111827;
  --color-text-secondary: #5f6b7a;
  --color-text-tertiary: #8b95a5;
  --color-text-inverse: #ffffff;

  --color-border: rgba(17, 24, 39, 0.08);
  --color-border-hover: rgba(37, 99, 235, 0.25);

  /* --- SOMBRAS --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.10);
}

/* --- BODY CON RADIAL GRADIENT --- */
body {
  background:
    radial-gradient(circle at 80% 0%, rgba(37, 99, 235, 0.06), transparent 50%),
    radial-gradient(circle at 20% 100%, rgba(59, 130, 246, 0.04), transparent 40%),
    var(--color-background);
}

/* --- HEADER --- */

.header nav a {
  color: var(--color-text-secondary);
}

.header nav a::after {
  background: var(--primary);
}

.header nav a:hover,
.header nav a.active {
  color: var(--color-text);
}

/* --- HERO: configurado mediante tokens --- */

/* --- CARDS --- */
.card {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.card::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--primary-gradient);
  margin-bottom: var(--spacing-lg);
}

.card:hover {
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* ==========================================================
   TOKENS HEADER, CONTACTO Y FOOTER · ENDURANCE
========================================================== */

:root {
  --header-background: rgba(255, 255, 255, 0.82);
  --header-background-scrolled: rgba(255, 255, 255, 0.95);
  --header-shadow-scrolled: 0 8px 30px rgba(0, 0, 0, 0.08);

  --contact-image-radius: 14px;
  --contact-card-radius: 14px;
  --contact-card-shadow: var(--shadow-sm);

  --footer-background: var(--color-background);
}