/** * [ARCHIVO: css/style.css] - HOJA DE ESTILOS PRINCIPAL E IDENTIDAD VISUAL
 * Aquí reside todo el diseño estético de ReyX. Controla los colores (Dorado, 
 * Negro Puro), las tipografías modernas, y el efecto de 'Glassmorphism' (cristal 
 * esmerilado). Define cómo reaccionan los botones al pasar el mouse, el brillo 
 * de las tarjetas y la animación de subrayado dorado para el menú activo.
 */

/** [ARCHIVO: css/style.css] - DISEÑO RESPONSIVE Y DORADO */

:root {
    --gold: #D4AF37;
    --dark-pure: #000000;
    --dark-soft: #080808;
    --glass: rgba(0, 0, 0, 0.9); /* Fondo más oscuro para menú móvil */
    --glass-border: rgba(212, 175, 55, 0.2);
}

#neural-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }

/* --- HEADER Y NAVEGACIÓN --- */
header {
    position: fixed; width: 100%; padding: 15px 0;
    background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px);
    z-index: 1000; border-bottom: 1px solid var(--glass-border);
    transition: 0.4s;
}

.nav-wrapper { display: flex; justify-content: space-between; align-items: center; position: relative; }

/* NUEVO LOGO COMPUESTO */
.brand-container { display: flex; flex-direction: column; line-height: 1; }
.by-reyx { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; color: var(--gold); letter-spacing: 2px; margin-bottom: 2px; opacity: 0.8; }


.logo { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 900; 
    letter-spacing: 4px; 
    color: #fff; 
    transition: 0.2s;
    cursor: pointer;
}

.logo:hover {
    animation: glitch 0.3s infinite; /* El logo vibra como una IA activa */
    color: var(--gold);
}

.logo span { color: var(--gold); }

/* ENLACES (PC) */
.nav-links { display: flex; gap: 25px; }
.nav-links a { 
    font-size: 0.7rem; font-weight: 600; letter-spacing: 2px; 
    text-transform: uppercase; transition: 0.3s; opacity: 0.6; color: #fff;
    padding-bottom: 5px; position: relative; text-decoration: none;
}
.nav-links a:hover { opacity: 1; color: var(--gold); }

.nav-links a.active { opacity: 1; color: var(--gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
.nav-links a.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: var(--gold); box-shadow: 0 0 5px var(--gold);
}

/* --- BOTÓN HAMBURGUESA (2 RAYITAS) --- */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 6px; }
.hamburger span {
    display: block; width: 30px; height: 2px; background-color: var(--gold);
    transition: 0.4s; box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

/* --- ESTILOS RESPONSIVE (CELULAR) --- */
@media (max-width: 768px) {
    .hamburger { display: flex; } /* Muestra las rayitas */

    .nav-links {
        position: absolute;
        top: 100%; right: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.98);
        border-bottom: 1px solid var(--glass-border);
        flex-direction: column;
        align-items: center;
        gap: 0;
        max-height: 0; /* Oculto por defecto */
        overflow: hidden;
        transition: 0.5s ease-in-out;
    }

    /* Cuando el menú se activa con JS */
    .nav-links.mobile-active {
        max-height: 400px; /* Se despliega */
        padding: 20px 0;
    }

    .nav-links a {
        padding: 15px 0;
        width: 100%;
        text-align: center;
        font-size: 0.9rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
}

/* --- HERO Y SECCIONES --- */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 60px; }


.hero h1 { 
    font-family: 'Orbitron', sans-serif; 
    font-size: clamp(2.5rem, 10vw, 5rem); 
    font-weight: 900; 
    line-height: 1.1; 
    margin-bottom: 40px;
    animation: ai-glow 4s infinite ease-in-out; /* Brillo de IA */
}


.gold-gradient { background: linear-gradient(to right, #fff, var(--gold), #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }




/* --- SOLUCIÓN DE LÍNEAS DUPLICADAS Y SECCIONES VACÍAS --- */

.section { 
    padding: 150px 0; /* Un poco más de espacio para que se vea más pro */
    border-bottom: 2px solid #FFD700; 
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    position: relative;
    clear: both;
}

/* Si la sección está vacía, que no ocupe espacio ni pinte líneas */
.section:empty {
    display: none;
}

/* Forzar que el HERO (Inicio) también tenga su línea divisoria al final */
.hero {
    border-bottom: 2px solid #FFD700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Evitar doble línea al final del todo */
section:last-of-type {
    border-bottom: none;
}


h2 { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 2rem; 
    text-align: center; 
    margin-bottom: 50px; 
    color: var(--gold); 
    letter-spacing: 4px;
    animation: ai-glow 5s infinite ease-in-out; /* Brillo un poco más lento */
}


/* TARJETAS Y COMPONENTES */
.glass-card { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); padding: 40px; border-radius: 20px; backdrop-filter: blur(10px); text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }

.card { background: var(--dark-soft); padding: 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: 0.4s; }
.card:hover { border-color: var(--gold); transform: translateY(-10px); }
.card i { font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; }
.card h3 { font-family: 'Orbitron', sans-serif; margin-bottom: 10px; color: #fff; }

.btn-main { padding: 18px 45px; background: var(--gold); color: #000; font-weight: 900; letter-spacing: 2px; transition: 0.3s; border: none; display: inline-block; text-decoration: none; }
.btn-main:hover { background: #fff; box-shadow: 0 0 20px var(--gold); }

.reveal { opacity: 0; transform: translateY(30px); transition: 1s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

footer { padding: 80px 0 40px; background: #000; border-top: 1px solid var(--glass-border); text-align: center; }


/* --- ANIMACIÓN: RESPIRACIÓN DE INTELIGENCIA ARTIFICIAL --- */
@keyframes ai-glow {
    0% { text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
    50% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.4); }
    100% { text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
}

@keyframes card-pulse {
    0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.2); }
    50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); border-color: rgba(212, 175, 55, 0.5); }
    100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.2); }
}


/* --- EFECTO GLITCH PARA EL LOGO REYX --- */
@keyframes glitch {
    0% { transform: translate(0); text-shadow: -2px 0 var(--gold), 2px 0 #fff; }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); text-shadow: 2px 0 var(--gold), -2px 0 #fff; }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); text-shadow: -1px 0 var(--gold), 1px 0 #fff; }
    100% { transform: translate(0); }
}