@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;700;800&display=swap");

:root {
  --club-red-light: #ff555d;
  --club-line: rgba(255, 255, 255, 0.14);
  --club-text: #f3f4f6;
  --club-muted: #c5cad2;
}

body {
  background:
    radial-gradient(
      circle at 15% 12%,
      rgba(239, 26, 35, 0.18),
      transparent 32%
    ),
    linear-gradient(160deg, #06070a, #0b0d12 60%, #06070a);
  color: var(--club-text);
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.header-fixed {
  background: rgba(8, 10, 14, 0.9);
}

.schedule-section h1,
.legal-title {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.045em;
  line-height: 0.98;
}

.about-history,
.about-installations,
.schedule-section {
  background-color: transparent;
}

.schedule-section {
  position: relative;
  isolation: isolate;
}

.schedule-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(5, 7, 11, 0.9),
    rgba(10, 13, 18, 0.8)
  );
}

.planning-container h2 {
  color: var(--club-text);
}

.schedule-section p.subtitle {
  color: var(--club-muted);
}

.timetable {
  border: 1px solid var(--club-line);
  border-radius: 12px;
  background: rgba(12, 14, 19, 0.92);
}

.timetable th {
  background: linear-gradient(120deg, #c9111a, #ef1a23);
}

.timetable td {
  background: rgba(255, 255, 255, 0.025);
}

.timetable tbody tr:hover td {
  background: rgba(239, 26, 35, 0.14);
}

footer {
  border-top: 1px solid var(--club-line);
  background: #090b0f;
  color: #b8c0cc;
  font-family: "Manrope", "Segoe UI", sans-serif;
}

footer a {
  color: #ff838a;
  font-weight: 700;
}

footer a:hover {
  color: #fff;
}

footer a:focus-visible {
  outline: 2px solid var(--club-red-light);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .about-history,
  .about-installations,
  .schedule-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}