@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;600&display=swap');

:root {
    --primary: #a855f7; /* Morado Blackhole */
    --accent: #00f2ff;  /* Cian Neón */
    --bg: #050505;
    --glass: rgba(15, 15, 15, 0.9);
    --border: rgba(168, 85, 247, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
                url('https://images7.alphacoders.com/903/903719.jpg') no-repeat center center fixed;
    background-size: cover;
    line-height: 1.6;
}

/* Navegación */
nav {
    position: fixed; top: 0; width: 100%;
    background: rgba(0, 0, 0, 0.95);
    padding: 20px 5%;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--primary);
    z-index: 1000;
}

.logo { font-family: 'Orbitron'; color: var(--primary); font-size: 1.5rem; text-shadow: 0 0 10px var(--primary); }

.nav-links a { 
    color: white; text-decoration: none; margin-left: 25px; 
    font-family: 'Orbitron'; font-size: 0.8rem; transition: 0.3s;
}
.nav-links a:hover { color: var(--accent); }

/* Contenedores */
.container { max-width: 1100px; margin: 120px auto 50px; padding: 0 20px; }

/* Botones Unificados */
.btn-group { display: flex; gap: 20px; justify-content: center; margin-top: 40px; }

.btn {
    padding: 15px 30px; font-family: 'Orbitron'; text-decoration: none;
    text-transform: uppercase; font-weight: bold; transition: 0.4s;
    border: 2px solid var(--primary); color: white; background: transparent;
    cursor: pointer;
}

.btn:hover {
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary);
    color: white;
}

.btn-accent {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-accent:hover {
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent);
    color: black;
}

/* Normativa (20 Reglas) */
.rule-card {
    background: var(--glass);
    border: 1px solid var(--border);
    margin-bottom: 15px; border-radius: 5px; overflow: hidden;
}

.rule-header {
    padding: 20px; cursor: pointer; display: flex; justify-content: space-between;
    font-family: 'Orbitron'; color: var(--accent); background: rgba(168, 85, 247, 0.05);
}

.rule-content {
    max-height: 0; padding: 0 20px; transition: 0.5s ease-out;
    background: rgba(0,0,0,0.3); opacity: 0;
}

.rule-card.active .rule-content { max-height: 800px; padding: 25px 20px; opacity: 1; border-top: 1px solid var(--border); }

.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.bad { color: #ff4d4d; background: rgba(255,0,0,0.1); padding: 15px; border-radius: 4px; border-left: 4px solid #ff4d4d; }
.good { color: #00ff9d; background: rgba(0,255,0,0.1); padding: 15px; border-radius: 4px; border-left: 4px solid #00ff9d; }

/* Info Cards */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.glass-card {
    background: var(--glass); border: 1px solid var(--border);
    padding: 30px; border-radius: 10px; backdrop-filter: blur(10px);
}