:root {
    --primary: #00d4ff;
    --primary-glow: rgba(0, 212, 255, 0.4);
    --dark: #0a0b10;
    --card-bg: #161b22;
    --text: #ffffff;
    --text-dim: #b1b1b1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text); font-family: 'Roboto', sans-serif; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Orbitron', sans-serif; text-transform: uppercase; }

/* NAVEGACIÓN */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 8%; background: rgba(10, 11, 16, 0.95);
    backdrop-filter: blur(10px); position: fixed;
    top: 0; width: 100%; z-index: 1000;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}
.nav-logo { color: var(--primary); text-decoration: none; font-weight: bold; font-family: 'Orbitron'; font-size: 1.4rem; }
.nav-links a { color: #fff; text-decoration: none; margin: 0 15px; font-size: 0.8rem; letter-spacing: 1px; transition: 0.3s; }
.nav-links a:hover { color: var(--primary); }

.btn-auth { padding: 8px 18px; border-radius: 4px; cursor: pointer; font-family: 'Orbitron'; font-size: 0.7rem; border: 1px solid var(--primary); transition: 0.3s; }
.btn-login { background: transparent; color: var(--primary); margin-right: 10px; }
.btn-register { background: var(--primary); color: #000; font-weight: bold; }

/* HERO SECTION */
.hero {
    height: 100vh; position: relative;
    display: flex; justify-content: center; align-items: center;
    text-align: center; background: #000; overflow: hidden;
}
.hero-banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) saturate(1.2); }
.overlay-gradient { position: absolute; bottom: 0; width: 100%; height: 60%; background: linear-gradient(to top, var(--dark), transparent); }

.hero-content { position: relative; z-index: 2; padding: 20px; }
.badge-version { background: var(--primary); color: #000; padding: 5px 15px; font-weight: bold; font-size: 0.7rem; border-radius: 3px; letter-spacing: 2px; }
.hero h1 { font-size: clamp(3rem, 10vw, 5.5rem); margin: 20px 0; text-shadow: 0 0 25px var(--primary-glow); letter-spacing: 5px; }
.hero-desc { max-width: 700px; margin: 0 auto 40px; color: var(--text-dim); font-size: 1.1rem; line-height: 1.6; }

/* BOTÓN GAMER */
.btn-main-gamer {
    position: relative; display: inline-flex; align-items: center; gap: 15px;
    padding: 20px 45px; background: var(--primary); color: #000;
    text-decoration: none; font-family: 'Orbitron'; font-weight: 900;
    border-radius: 4px; overflow: hidden; transition: 0.4s;
    box-shadow: 0 0 25px var(--primary-glow); border: none;
}
.btn-main-gamer:hover { transform: translateY(-5px); box-shadow: 0 0 40px var(--primary); }
.btn-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); transition: 0.6s; }
.btn-main-gamer:hover .btn-shine { left: 150%; }

/* SECCIONES COMUNES */
section { padding: 100px 10%; max-width: 1400px; margin: 0 auto; }
.section-title { text-align: center; margin-bottom: 60px; font-size: 2rem; }
.text-primary { color: var(--primary); }

/* JUEGOS CARDS */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.game-card { background: var(--card-bg); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; text-align: center; }
.game-card:hover { border-color: var(--primary); transform: translateY(-10px); }
.game-card img { width: 100%; height: 220px; object-fit: cover; }
.card-body { padding: 25px; }

/* MODALES */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; z-index: 2000; backdrop-filter: blur(10px); }
.modal-content { background: var(--card-bg); padding: 40px; border-radius: 15px; border: 1px solid var(--primary); width: 90%; max-width: 400px; position: relative; }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: var(--primary); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 0.8rem; color: var(--primary); font-family: 'Orbitron'; }
.form-group input { width: 100%; padding: 12px; background: #000; border: 1px solid #333; color: #fff; border-radius: 5px; outline: none; }
.btn-submit { width: 100%; padding: 14px; background: var(--primary); border: none; font-weight: bold; cursor: pointer; font-family: 'Orbitron'; }

/* WHATSAPP */
.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; z-index: 1000; text-decoration: none; }

footer { text-align: center; padding: 40px; border-top: 1px solid #222; font-size: 0.8rem; color: #555; }