/* ============================================================
   Sport Training Castellón — Estilos custom
   Paleta: negro (#0B0B0B) + dorado (#D4AF37)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --st-black:       #0B0B0B;
  --st-charcoal:    #141414;
  --st-card-bg:     #1A1A1A;
  --st-border:      #2A2A2A;
  --st-gold:        #D4AF37;
  --st-gold-soft:   #E6C84F;
  --st-gold-dim:    #8B6914;
  --st-white:       #FAFAFA;
  --st-muted:       #6E6E6E;
  --bs-body-bg:     var(--st-black);
  --bs-body-color:  var(--st-white);
  --bs-border-color:var(--st-border);
}

/* ── Base ──────────────────────────────────────────────────── */
html  { scroll-behavior: smooth; }
body  {
  background-color: var(--st-black);
  color: var(--st-white);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Utilities ─────────────────────────────────────────────── */
.text-gold    { color: var(--st-gold) !important; }
.bg-gold      { background-color: var(--st-gold) !important; }
.fw-black     { font-weight: 900 !important; }
.tracking-wide{ letter-spacing: .12em; }
.py-6         { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.mb-6         { margin-bottom: 5rem !important; }

/* ── Navbar ────────────────────────────────────────────────── */
.st-navbar {
  background-color: rgba(11,11,11,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--st-border);
}
.st-navbar .nav-link            { color: #aaa; font-size: .9rem; transition: color .2s; }
.st-navbar .nav-link:hover,
.st-navbar .nav-link.active     { color: var(--st-gold); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-gold {
  background-color: var(--st-gold);
  border-color: var(--st-gold);
  color: #000;
  font-weight: 700;
  transition: background-color .2s, transform .1s;
}
.btn-gold:hover          { background-color: var(--st-gold-soft); border-color: var(--st-gold-soft); color: #000; transform: translateY(-1px); }
.btn-outline-gold        { border-color: var(--st-gold); color: var(--st-gold); font-weight: 600; }
.btn-outline-gold:hover  { background-color: var(--st-gold); color: #000; }

/* ── Cards ─────────────────────────────────────────────────── */
.st-card {
  background-color: var(--st-card-bg);
  border: 1px solid var(--st-border);
  border-radius: 16px;
  color: var(--st-white);
}
.st-card-gold {
  background-color: var(--st-card-bg);
  border: 1px solid var(--st-gold);
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(212,175,55,.12);
}
.st-card-header {
  background-color: rgba(212,175,55,.07);
  border-bottom: 1px solid var(--st-border);
  padding: .75rem 1rem;
}

/* ── Hero ──────────────────────────────────────────────────── */
.st-hero {
  min-height: 88vh;
  background:
    linear-gradient(to bottom, rgba(11,11,11,.55) 0%, rgba(11,11,11,.92) 100%),
    url('../img/hero-bg.jpg') center / cover no-repeat;
}

/* ── Stats bar ─────────────────────────────────────────────── */
.st-stats-bar {
  background-color: var(--st-charcoal);
  border-top: 1px solid var(--st-border);
  border-bottom: 1px solid var(--st-border);
}

/* ── Page header ───────────────────────────────────────────── */
.st-page-header {
  background: linear-gradient(135deg, var(--st-charcoal) 0%, var(--st-black) 100%);
  border-bottom: 1px solid var(--st-border);
}

/* ── CTA section ───────────────────────────────────────────── */
.st-cta {
  background:
    linear-gradient(135deg, rgba(212,175,55,.08) 0%, transparent 60%),
    var(--st-charcoal);
  border-top: 1px solid var(--st-border);
}

/* ── Footer ────────────────────────────────────────────────── */
.st-footer { background-color: var(--st-charcoal); border-top: 1px solid var(--st-border); }
.footer-link { color: var(--st-muted); text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--st-gold); }

/* ── Forms ─────────────────────────────────────────────────── */
.st-input {
  background-color: #111;
  border: 1px solid var(--st-border);
  color: var(--st-white);
  border-radius: 8px;
}
.st-input:focus {
  background-color: #111;
  border-color: var(--st-gold);
  color: var(--st-white);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
  outline: none;
}
.st-input::placeholder { color: var(--st-muted); }

/* ── Schedule items ────────────────────────────────────────── */
.st-schedule-item {
  background: transparent;
  border-color: var(--st-border);
  padding: .7rem 1rem;
  transition: background .15s;
}
.st-schedule-item:hover { background-color: rgba(212,175,55,.05); }

/* ── Horario badge ─────────────────────────────────────────── */
.st-badge-horario {
  background-color: rgba(212,175,55,.1);
  border: 1px solid rgba(212,175,55,.3);
  color: var(--st-gold);
  font-weight: 500;
  font-size: .75rem;
  padding: .3em .65em;
  border-radius: 6px;
}

/* ── Service icon box ──────────────────────────────────────── */
.st-service-icon-box {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(212,175,55,.1) 0%, transparent 70%);
  border-radius: 50%;
}

/* ── Gold alert ────────────────────────────────────────────── */
.st-alert-gold {
  background-color: rgba(212,175,55,.07);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 12px;
  padding: 1rem 1.5rem;
}

/* ── Bootstrap list-group dark override ────────────────────── */
.list-group-item { background: transparent; border-color: var(--st-border); color: var(--st-white); }

/* ── Alert overrides ───────────────────────────────────────── */
.alert-success { background-color: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.3);  color: #86efac; }
.alert-danger  { background-color: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);  color: #fca5a5; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--st-black); }
::-webkit-scrollbar-thumb { background: var(--st-gold-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--st-gold); }