/* JuegoTerapia Ghost 6.x Theme Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #00F0FF;
  --background-dark: #05050A;
  --surface-solid: #12121A;
  --surface-glass: rgba(18, 18, 26, 0.6);
  --text-main: #F3F4F6;
  --muted: #8B8B99;
  --accent: #FF0055;
}

body {
  background-color: var(--background-dark);
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Space Grotesk', sans-serif;
}

.glass-panel {
  background-color: rgba(18, 18, 26, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-gradient {
  background: linear-gradient(180deg, rgba(5, 5, 10, 0.6) 0%, rgba(5, 5, 10, 0.95) 100%);
}

.magazine-gradient {
  background: linear-gradient(180deg, rgba(5, 5, 10, 0) 0%, rgba(5, 5, 10, 0.75) 55%, rgba(5, 5, 10, 1) 100%);
}

.shadow-neon {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}

.card-hover-group:hover .card-img {
  transform: scale(1.05);
}

/* Ghost Koenig Editor Card Styles & Validation Requirements */
.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin-left: calc(50% - 42.5vw);
  margin-right: calc(50% - 42.5vw);
}

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.kg-card {
  margin-top: 2em;
  margin-bottom: 2em;
}

.kg-card figcaption {
  font-size: 0.8em;
  text-align: center;
  color: var(--muted);
  margin-top: 0.5em;
}

/* Highlighted & Live Navigation Items Rule */
nav li a[href*="#live"],
nav li a[href*="#highlight"],
nav li.nav-live a,
nav li.nav-highlight a,
nav li.nav-data-center a {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

nav li a[href*="#live"] .nav-ping-dot,
nav li a[href*="#highlight"] .nav-ping-dot,
nav li.nav-live a .nav-ping-dot,
nav li.nav-highlight a .nav-ping-dot,
nav li.nav-data-center a .nav-ping-dot {
  display: inline-block !important;
}