/* ==========================================================
   THEME: FUTURISTIC
   Vibra: Tecnología, innovación, futuro, digital
   Público: E-sports, tech fitness, wearables, data-driven
   Color primario: Cian (#00f5d4)
========================================================== */

:root {
  /* --- COLOR PRIMARIO --- */
  --primary: #00f5d4;
  --primary-hover: #00d4b8;
  --primary-light: rgba(0, 245, 212, 0.12);
  --primary-gradient: linear-gradient(135deg, #00f5d4, #00d4ff);

  /* --- FONDOS Y SUPERFICIES --- */
  --color-background: #0a0e17;
  --color-background-elevated: #111827;
  --color-background-soft: #1a2332;
  --color-surface: #111827;
  --color-surface-hover: #1c2a3d;

  --color-text: #e2e8f0;
  --color-text-secondary: #7a8ba5;
  --color-text-tertiary: #4a5a74;
  --color-text-inverse: #0a0e17;

  --color-border: rgba(0, 245, 212, 0.06);
  --color-border-hover: rgba(0, 245, 212, 0.20);

  /* --- SOMBRAS --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 60px rgba(0, 245, 212, 0.08);

  /* --- DESIGN TOKENS DEL TEMA --- */
--header-background: rgba(10, 14, 23, 0.85);
  --header-background-scrolled: rgba(10, 14, 23, 0.96);
  --header-backdrop-blur: 12px;

  --hero-overlay-background:
    linear-gradient(135deg, rgba(10, 14, 23, 0.8), rgba(10, 14, 23, 0.2) 60%, transparent);
  --hero-title-weight: 500;
  --hero-split-image-radius: 4px;

  --about-image-radius: 4px;

  --service-card-radius: 4px;
  --service-card-hover-shadow: var(--shadow-glow);
  --service-card-hover-border-color: rgba(0, 245, 212, 0.20);
  --service-card-hover-translate-y: -4px;
  --service-title-weight: var(--font-weight-semibold);
  --service-list-radius: 4px;
  --service-split-radius: 4px;

  --credential-card-radius: 4px;
  --credential-card-hover-shadow: var(--shadow-glow);
  --credential-card-hover-border-color: rgba(0, 245, 212, 0.20);
  --credential-card-hover-translate-y: -4px;

  --stats-card-radius: 4px;
  --stats-number-color: var(--primary);
  --stats-number-weight: 300;

  --gallery-slide-radius: 4px;
  --gallery-slide-hover-shadow: var(--shadow-glow);
  --gallery-slide-hover-border-color: rgba(0, 245, 212, 0.20);

  --contact-image-radius: 4px;
  --contact-card-radius: 4px;
  --contact-card-shadow: var(--shadow-glow);
  --contact-secondary-radius: 4px;

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

body {
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 245, 212, 0.03), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0, 212, 255, 0.02), transparent 45%),
    var(--color-background);
}

.credential-card::before {
  content: "◇";
  display: block;
  margin-bottom: var(--spacing-md);
  color: var(--primary);
  font-size: 1.8rem;
}

.hero-full::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 2px;
  background: var(--primary-gradient);
  opacity: 0.3;
}

:root {
  --hero-full-bottom-gap: var(--spacing-md);
  --stats-mobile-margin-top: var(--spacing-lg);
}
.hero-full::after {
  bottom: 0;
}