/* Estilos Cyberpunk Avanzados & Paleta de Colores Sakix */
body {
    background-color: #030407;
    color: #e2e8f0;
    font-family: 'Rajdhani', sans-serif;
    overflow-x: hidden;
}

/* Efecto Scanline / Monitoreo CRT */
.scanline-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%), 
                linear-gradient(90deg, rgba(255, 0, 85, 0.03), rgba(0, 240, 255, 0.015), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 4px 100%;
    pointer-events: none;
    z-index: 99;
}

/* Grilla Cyberpunk Animada */
.cyber-grid-floor {
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(600px) rotateX(65deg);
    transform-origin: top;
    position: absolute;
    inset: -60%;
    animation: gridMove 15s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 50px; }
}

/* Tarjetas Estilo Cyberpunk con Esquinas Técnicas */
.cyber-card {
    background: #080b14;
    border: 1px solid rgba(0, 240, 255, 0.3);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyber-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 10px; height: 10px;
    border-top: 2px solid #00f0ff;
    border-left: 2px solid #00f0ff;
}

.cyber-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0; width: 10px; height: 10px;
    border-bottom: 2px solid #ff0055;
    border-right: 2px solid #ff0055;
}

.cyber-card:hover {
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.45), inset 0 0 20px rgba(0, 240, 255, 0.15);
    border-color: rgba(0, 240, 255, 0.9);
    transform: translateY(-5px);
}

/* Lightbox de Alta Inmersión (Paleta Sakix & Ampliado) */
#lightbox {
    background: rgba(3, 4, 7, 0.97);
    backdrop-filter: blur(14px);
    border: 2px solid rgba(0, 240, 255, 0.4);
}

#lightbox-content img {
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 2px solid #00f0ff;
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.6), inset 0 0 20px rgba(0, 240, 255, 0.2);
    border-radius: 6px;
    background: #080b14;
}

#lightbox-content embed {
    width: 94vw;
    height: 90vh;
    max-width: 1400px;
    max-height: 92vh;
    border: 2px solid #ff0055;
    box-shadow: 0 0 60px rgba(255, 0, 85, 0.5), 0 0 30px rgba(0, 240, 255, 0.3);
    border-radius: 6px;
    background-color: #030407;
}

/* Efecto Glitch Avanzado */
.glitch-title {
    position: relative;
    display: inline-block;
}

.glitch-title::before, .glitch-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    clip: rect(0, 0, 0, 0);
}

.glitch-title::before {
    left: 2px;
    text-shadow: -2px 0 #ff0055;
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

.glitch-title::after {
    left: -2px;
    text-shadow: -2px 0 #00f0ff;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip: rect(15px, 9999px, 45px, 0); }
    20% { clip: rect(80px, 9999px, 20px, 0); }
    40% { clip: rect(10px, 9999px, 60px, 0); }
    60% { clip: rect(50px, 9999px, 85px, 0); }
    80% { clip: rect(30px, 9999px, 15px, 0); }
    100% { clip: rect(65px, 9999px, 40px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(40px, 9999px, 70px, 0); }
    25% { clip: rect(10px, 9999px, 30px, 0); }
    50% { clip: rect(90px, 9999px, 50px, 0); }
    75% { clip: rect(25px, 9999px, 80px, 0); }
    100% { clip: rect(55px, 9999px, 10px, 0); }
}