/* ==========================================================
   THEME: PERFORMANCE
   Vibra: Fuerza, intensidad, poder, determinación
   Público: Powerlifting, strongman, atletas de élite
   Color primario: Naranja (#ff6b00)
========================================================== */

:root {
  /* --- COLOR PRIMARIO --- */
  --primary: #ff6b00;
  --primary-hover: #d95700;
  --primary-light: rgba(255, 107, 0, 0.15);
  --primary-gradient: linear-gradient(135deg, #ff6b00, #ff8c38);

  /* --- FONDOS Y SUPERFICIES --- */
  --color-background: #0f1115;
  --color-background-elevated: #171a20;
  --color-background-soft: #20242c;
  --color-surface: #1a1d24;
  --color-surface-hover: #252a34;

  --color-text: #ffffff;
  --color-text-secondary: #a7adb8;
  --color-text-tertiary: #6b7280;
  --color-text-inverse: #0f1115;

  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 107, 0, 0.3);

  /* --- SOMBRAS --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 60px rgba(255, 107, 0, 0.15);
}

body {
  background:
    radial-gradient(circle at 30% 50%, rgba(255, 107, 0, 0.04), transparent 60%),
    var(--color-background);
}

/* --- HEADER --- */

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

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

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

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 107, 0, 0.35);
  box-shadow: var(--shadow-lg);
}

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

:root {
  --header-background: rgba(15, 17, 21, 0.85);
  --header-background-scrolled: rgba(15, 17, 21, 0.96);
  --header-link-weight: var(--font-weight-semibold);
  --header-link-underline-height: 3px;

  --contact-grid-gap: var(--spacing-2xl);
  --contact-image-radius: 6px;
  --contact-card-radius: 6px;
  --contact-card-shadow: var(--shadow-lg);
  --contact-detail-padding: var(--spacing-md);
  --contact-detail-radius: 6px;
  --contact-detail-background: var(--color-surface);
  --contact-detail-border: 1px solid var(--color-border);

  --contact-secondary-radius: 6px;

  --footer-padding-block: 18px;
}