/* ========= Variables base ========= */
:root{
  --bg:#000; --card:#0b0b0b; --fg:#fff; --gold:#ffd700; --muted:#bfbfbf; --border:#333;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif}
a{color:var(--gold);text-decoration:none}
a:hover{opacity:.9}

/* ==== Header / Nav — UNIFICADO (igual en todas las páginas) ==== */
.site-header{position:sticky;top:0;z-index:1000;background:#000;border-bottom:1px solid #222}
.site-header .bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px}
.site-header .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.site-header .brand img{height:28px;width:auto;display:block}

/* Menú desktop */
.site-header .nav{display:block}
.site-header .nav-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:18px;align-items:center}
.site-header .nav-links a{color:#fff;text-decoration:none;font-weight:600;opacity:.9}
.site-header .nav-links a:hover,
.site-header .nav-links a.active{color:#FFD700}

/* Botón hamburguesa */
.menu-toggle{background:transparent;border:0;cursor:pointer;display:none;width:36px;height:36px;align-items:center;justify-content:center}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;margin:3px 0}

/* Móvil */
@media (max-width:820px){
  .menu-toggle{display:inline-flex}
  .site-header .nav{
    position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(3px);
    transform:translateY(-100%);transition:transform .25s ease
  }
  .site-header .nav.open{transform:translateY(0)}
  .site-header .nav-links{flex-direction:column;gap:16px;padding:80px 20px}
}

/* ====== (tu estilo existente puede seguir debajo) ====== */

/* Hero (si lo usas) */
.hero{position:relative;text-align:center;padding:64px 16px 36px;background-image:url('assets/hero_main.png');background-size:cover;background-position:center 22%;background-repeat:no-repeat}
.hero-overlay{display:inline-block;background:rgba(0,0,0,.55);border-radius:12px;padding:28px 18px}
.hero h1{margin:0 0 8px;font-size:34px;color:var(--gold);text-shadow:2px 2px 8px #000}
.hero .accent{color:var(--gold)}
.hero-sub{margin:0 0 14px;opacity:.95}

/* Botones */
.buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.btn{background:#222;color:#fff;border:1px solid var(--border);padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px}
.btn.primary{background:var(--gold);color:#000;border-color:transparent}
.soon-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.soon-buttons span{border:1px solid var(--gold);color:#ddd;padding:6px 12px;border-radius:8px;background:#111;font-size:13px}

/* “Breaking text” */
.breaking-text{margin-top:12px;font-size:15px;color:var(--gold);white-space:pre-wrap}
.breaking-text span{display:inline-block;opacity:1;transform:translateY(0) rotate(0deg);transition:transform 1s ease,opacity 1s ease}
.breaking-text.break span{opacity:0;transform:translateY(50px) rotate(12deg)}

/* Secciones */
.section{padding:36px 16px}
.container{max-width:980px;margin:0 auto}
.center{text-align:center}
.lead{line-height:1.7;color:#ddd}
.muted{color:var(--muted)}
.strong{font-weight:700}

/* Slayer Loop “card” */
#slayer-loop .container{background:rgba(12,12,12,.55);border:1px solid var(--border);border-radius:12px;padding:22px}

/* Countdown */
.countdown{font-family:'Courier New',monospace;font-weight:800;font-size:2.2rem;color:var(--gold);
  text-shadow:0 0 10px var(--gold),0 0 20px #ffcc33,0 0 40px #ffcc33;
  animation:glowPulse 2s infinite,pulseScale 2.2s ease-in-out infinite;will-change:transform,text-shadow}
@keyframes glowPulse{0%,100%{text-shadow:0 0 10px var(--gold),0 0 20px #ffcc33,0 0 40px #ffcc33}
50%{text-shadow:0 0 6px var(--gold),0 0 14px #ffcc33,0 0 28px #ffcc33}}
@keyframes pulseScale{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Chart wrapper opcional */
.chart-wrap{position:relative;width:100%;max-width:980px;height:340px;margin:16px auto 0;border:1px solid var(--border);border-radius:12px;background:#0a0a0a;padding:10px}
@media (max-width:820px){.chart-wrap{height:260px}}

/* Footer */
.site-footer{text-align:center;padding:28px 16px;border-top:1px solid var(--border);background:#000}
.footer-logo{height:26px;margin-bottom:8px}
.site-footer p{color:#aaa;font-size:.92rem;line-height:1.5}