/* ═══════════════════════════════════════════
   DESIGN TOKENS — ForgedWoW
   ═══════════════════════════════════════════ */
:root {
  --bg-primary: #080b14;
  --bg-secondary: #0c1020;
  --bg-card: #0f1525;
  --bg-card-hover: #161e32;
  --border-subtle: rgba(255, 175, 50, 0.08);
  --border-glow: rgba(0, 184, 148, 0.3);
  --accent-jade: #00b894;
  --accent-jade-dark: #00a884;
  --accent-gold: #ffb347;
  --accent-gold-dim: rgba(255, 179, 71, 0.7);
  --accent-amber: #ff8c00;
  --accent-forge: #e65100;
  --accent-purple: #6c5ce7;
  --text-primary: #eaedf2;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cinzel', Georgia, serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-jade: 0 0 30px rgba(0, 184, 148, 0.15);
  --shadow-glow-gold: 0 0 30px rgba(255, 179, 71, 0.12);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--accent-jade);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-gold);
}

/* ═══════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Con `space-between` y nada mas, en cuanto la barra se queda justa de sitio
     el logotipo y el primer enlace se tocan y se leen como una sola palabra
     ("FORGEDLANDSDESCARGAR"). El gap garantiza el aire pase lo que pase. */
  gap: 1.5rem;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(10, 14, 26, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-brand img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.navbar-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  background: linear-gradient(135deg, var(--accent-gold), #ffe0a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
}

.navbar-brand span em,
.hero h1 em,
.footer-brand span em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent-jade), #40e0c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-links {
  display: flex;
  align-items: center;
  /* 2rem sobraba con cinco secciones y no cabe con siete. */
  gap: 1.15rem;
  list-style: none;
}

.navbar-links a {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  padding: 4px 0;
}

.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-jade);
  transition: var(--transition);
}

.navbar-links a:hover {
  color: var(--text-primary);
}

.navbar-links a:hover::after {
  width: 100%;
}

/* La barra la pinta js/nav.js y la cargan las siete paginas, asi que sus
   estados tienen que vivir aqui, en la hoja que todas incluyen. Estaban en
   panel.css, que index.html no carga: en la portada el enlace de la seccion
   activa nunca llegaba a marcarse. Y estaban DOS veces en ese fichero, con
   colores distintos, asi que ganaba la de mas abajo por accidente. */
.navbar-links a.activo {
  color: var(--accent-gold);
}

/* Fundadores: destacado sin gritar. Un enlace mas de la barra, solo que
   dorado. */
.navbar-links a.nav-destacado {
  color: var(--accent-gold-dim);
}

.navbar-links a.nav-destacado:hover {
  color: var(--accent-gold);
}

/* La cuenta va al final y en pastilla: es una accion, no una seccion. */
.navbar-links a.nav-cuenta {
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 6px 16px;
  color: var(--text-primary);
}

.navbar-links a.nav-cuenta:hover {
  border-color: var(--accent-jade);
  background: rgba(0, 184, 148, 0.08);
}

.navbar-links a.nav-cuenta::after {
  display: none;
}

/* El buscador de personaje tambien lo pinta js/nav.js, y su estilo vivia solo
   en panel.css: en la portada -la pagina que mas se ve- salia como una caja de
   texto en blanco del navegador. */
.buscador input {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.45rem 0.8rem;
  font-family: var(--font);
  font-size: 0.9rem;
  width: 190px;
  min-width: 0;
}

.buscador input:focus {
  outline: none;
  border-color: var(--accent-jade);
}

/* El buscador de la barra es un atajo, no una seccion: la Armeria tiene el
   suyo a un clic. En cuanto la barra va justa, desaparece el atajo antes que
   se salga de la pantalla un enlace.

   El corte estaba en 1360 px cuando habia siete secciones. Al salir «Monturas»
   de la barra sobran ~110 px y el buscador vuelve a caber en una pantalla de
   1280, que es la mas comun. Medido, no estimado: la barra ocupa 1.265 px de
   1.265 disponibles con el buscador dentro. */
@media (max-width: 1150px) {
  .buscador { display: none; }
}

/* El menu se plegaba a 768 px, que valia con cinco secciones. Con ocho mas el
   buscador y el selector de idioma flotante, entre 768 y 1024 la barra se
   solapa consigo misma (PANEL acaba debajo del ES/EN). Se pliega antes. */
@media (max-width: 1024px) {
  .navbar-links {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .navbar-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(10, 14, 26, 0.98);
    padding: 1.5rem 2rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border-subtle);
  }

}

.lang-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 4px;
}

.lang-toggle button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: var(--transition);
}

.lang-toggle button.active {
  background: var(--accent-jade);
  color: #fff;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 120px 2rem 160px;
  margin-bottom: -100px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 26, 0.15) 0%, rgba(10, 14, 26, 0.25) 30%, rgba(10, 14, 26, 0.65) 70%, var(--bg-primary) 100%),
    url('../img/hero-bg.webp') center center / cover no-repeat;
  z-index: 0;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 50%;
  opacity: 0;
  animation: float-particle 8s infinite;
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  20% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-logo {
  width: 280px;
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.3));
  animation: logo-glow 4s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  from {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.2));
  }

  to {
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.4));
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-gold), #ffe0a0, var(--accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 6px;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 20px rgba(255, 179, 71, 0.4));
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent-amber);
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  opacity: 0.85;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--accent-jade);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
  text-transform: uppercase;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-jade), var(--accent-jade-dark));
  color: #fff;
  border-color: var(--accent-jade);
  box-shadow: 0 4px 20px rgba(0, 184, 148, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 184, 148, 0.5);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--accent-gold);
  border-color: var(--accent-gold-dim);
}

.btn-outline:hover {
  background: rgba(255, 215, 0, 0.1);
  transform: translateY(-2px);
  color: var(--accent-gold);
}

/* ═══════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════ */
section {
  padding: 100px 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

#features {
  position: relative;
  z-index: 10;
  padding-top: 40px;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

/* ═══════════════════════════════════════════
   FEATURE CARDS
   ═══════════════════════════════════════════ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.95), rgba(10, 14, 26, 0.98));
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: var(--radius);
  padding: 2rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(10px);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-jade), var(--accent-gold), var(--accent-jade));
  opacity: 1;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at top center, rgba(0, 184, 148, 0.08), transparent 70%);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 8px 40px rgba(0, 184, 148, 0.2), 0 0 60px rgba(255, 215, 0, 0.05);
  background: linear-gradient(145deg, rgba(26, 34, 54, 0.95), rgba(15, 20, 36, 0.98));
}

.feature-icon {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  object-fit: cover;
  margin: 0 auto 1.2rem;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 184, 148, 0.3));
  transition: var(--transition);
}

.feature-card:hover .feature-icon {
  filter: drop-shadow(0 6px 24px rgba(255, 215, 0, 0.4));
  transform: scale(1.08);
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   CONNECT STEPS
   ═══════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  counter-reset: step;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  counter-increment: step;
  transition: var(--transition);
}

.step-card:hover {
  border-color: var(--accent-jade);
  box-shadow: var(--shadow-glow-jade);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-jade), var(--accent-jade-dark));
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
}

.step-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.code-block {
  background: #000;
  border: 1px solid rgba(0, 184, 148, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 12px;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  color: var(--accent-jade);
  user-select: all;
  cursor: text;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════
   SERVER STATUS
   ═══════════════════════════════════════════ */
.status-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}

.status-item {
  text-align: center;
}

.status-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.status-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
}

.status-online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  background: var(--accent-jade);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.5);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(0, 184, 148, 0);
  }
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  padding: 3rem 2rem;
  text-align: center;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.footer-brand img {
  height: 32px;
  opacity: 0.7;
}

.footer-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-gold-dim);
  font-size: 1rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Redes (Discord, Facebook). Las pinta js/nav.js en el pie y, en la portada,
   bajo los botones del hero. En reposo van con los colores del sitio para no
   competir con «Descargar»; el color de cada marca sale al pasar el ratón, que
   es cuando ayuda a reconocerlas. */
.redes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

.red svg {
  flex-shrink: 0;
}

.red:hover,
.red:focus-visible {
  color: #fff;
}

.red-discord:hover,
.red-discord:focus-visible {
  background: #5865f2;
  border-color: #5865f2;
}

.red-facebook:hover,
.red-facebook:focus-visible {
  background: #0866ff;
  border-color: #0866ff;
}

.footer-redes {
  margin-bottom: 1.5rem;
}

.hero-redes {
  margin-top: 1.75rem;
}

.footer-copy {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════ */
.section-divider {
  height: 1px;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border-subtle), var(--accent-gold-dim), var(--border-subtle), transparent);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .hero-logo {
    width: 180px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .status-bar {
    flex-direction: column;
    gap: 1rem;
  }

  section {
    padding: 60px 1.2rem;
  }
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ═══════════════════════════════════════════
   REGISTER FORM
   ═══════════════════════════════════════════ */
.register-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

.register-form {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.register-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-jade), var(--accent-gold), var(--accent-jade));
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.form-group input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 179, 71, 0.15);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 1rem;
  transition: var(--transition);
  outline: none;
}

.form-group input:focus {
  border-color: var(--accent-jade);
  box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.15);
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.btn-register {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

.register-msg {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  min-height: 1.5em;
}

.register-msg.success { color: var(--accent-jade); }
.register-msg.error { color: #ff6b6b; }

.register-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.95), rgba(10, 14, 26, 0.98));
  border: 1px solid rgba(255, 179, 71, 0.15);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-amber));
}

.info-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 1.2rem;
}

.info-card ul {
  list-style: none;
  padding: 0;
}

.info-card li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.info-card li:last-child { border-bottom: none; }

@media (max-width: 768px) {
  .register-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* ═══════════════════════════════════════════
   DESCARGA DEL LAUNCHER
   La acción principal del sitio: es lo único que un visitante nuevo tiene que
   hacer. Por eso el botón es el elemento más grande de la sección y usa el
   degradado de forja, distinto del jade que llevan los botones secundarios.
   ═══════════════════════════════════════════ */
.download-box {
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1a0e00;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-forge));
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(230, 81, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(230, 81, 0, 0.5);
}

/* ── Descarga cerrada (prerregistro, 16-sep-2026) ───────────────────────────
   Gris, sin brillo y quieto al pasar el ratón: tiene que leerse como «todavía
   no», no como un botón roto. Vale para el botón del hero (.btn-primary) y el
   de la sección de descarga (.btn-download). Lo abre FL.descargaAbierta. */
.btn-etiqueta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.btn-proximamente {
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.9;
}

.btn-cerrado,
.btn-cerrado:hover {
  background: #262b36;
  border-color: #353b48;
  color: #8a919e;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.download-meta {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.download-reqs {
  list-style: none;
  padding: 1.4rem 0 0;
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: left;
  display: inline-block;
}

.download-reqs li { padding: 0.2rem 0; }
.download-reqs li:not(:first-child)::before { content: "✓ "; color: var(--accent-jade); }
.download-reqs strong { color: var(--text-primary); font-weight: 600; }

/* Aviso de SmartScreen. En ámbar y no en rojo a propósito: no es un error, es
   algo que el jugador va a ver y conviene que sepa de antemano. Que no parezca
   una alarma evita que abandone la instalación. */
.download-aviso {
  margin: 1.4rem auto 0;
  padding: 0.75rem 1rem;
  max-width: 480px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--accent-gold-dim);
  background: rgba(255, 179, 71, 0.07);
  border: 1px solid rgba(255, 179, 71, 0.22);
  border-radius: var(--radius-sm);
}

.download-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
  text-align: center;
}

.download-features h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent-jade);
  margin-bottom: 0.4rem;
}

.download-features p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .download-box { padding: 1.8rem 1.2rem; }
  .btn-download { width: 100%; justify-content: center; padding: 1rem 1.2rem; font-size: 1rem; }
}

/* ═══════════════════════════════════════════
   ESTADO DEL REINO — reparto por facción
   Lo rellena pintarEstado() desde /api/status. Sin API, el bloque se queda
   oculto y la barra de estado sigue diciendo la verdad ("sin conexión").
   ═══════════════════════════════════════════ */

.faction-split {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 640px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}

.faction {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.faction-nombre {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.faction-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.faction-alianza .faction-num { color: #3b82f6; }
.faction-horda .faction-num   { color: #dc2626; }

.faction-barra {
  flex: 1;
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-card);
}

.faction-barra-alianza { background: #3b82f6; transition: width 0.6s ease; }
.faction-barra-horda   { background: #dc2626; transition: width 0.6s ease; }

.status-uptime {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.75rem;
}

.status-dot.off {
  background: var(--text-muted);
  box-shadow: none;
  animation: none;
}

@media (max-width: 640px) {
  .faction-split { flex-wrap: wrap; justify-content: center; }
  .faction-barra { order: 3; width: 100%; flex: 0 0 100%; }
}

/* ═══════════════════════════════════════════
   El atributo `hidden` debe ganar SIEMPRE

   El navegador lo aplica con `display: none` desde SU hoja de estilos, y esa
   pierde contra cualquier regla nuestra con clase. Es decir: un elemento con
   `hidden` que además tenga `display: flex` en este archivo se queda VISIBLE
   — que es justo lo que pasaba con el botón de salir del panel, la caja del
   código de vinculación y el reparto por facción de la portada.

   Una línea aquí, y `hidden` vuelve a significar lo que dice.
   ═══════════════════════════════════════════ */
[hidden] {
  display: none !important;
}

/* El selector de idioma sale del nav (que ahora es común) y flota arriba. */
.lang-flotante {
  position: fixed;
  top: 1.1rem;
  right: 5rem;
  z-index: 1001;
}

@media (max-width: 900px) {
  .lang-flotante { right: 4rem; }
}

/* Turnstile: el widget se centra con el resto del formulario. */
.cf-turnstile-wrap { display: flex; justify-content: center; margin: 0.5rem 0; }