:root {
    --midnight: #060b16;
    /* Azul ultra oscuro */
    --electric-cyan: #00f2ff;
    /* Cyan neón */
    --steel-gray: #1e293b;
    /* Gris acero */
    --dark-steel: #0f172a;
}

/* Base y fondo animado */
body {
    background: linear-gradient(-45deg, var(--midnight), var(--dark-steel), #020617, var(--midnight));
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

/* Animación del fondo */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Navbar con cristal oscuro */
.glass-nav {
    background: rgba(6, 11, 22, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 242, 255, 0.1);
}

/* Texto Neón Pulsante */
.glow-text {
    color: var(--electric-cyan);
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5), 0 0 20px rgba(0, 242, 255, 0.3);
    animation: neon-pulse 3s infinite alternate;
}

@keyframes neon-pulse {
    0% {
        text-shadow: 0 0 10px rgba(0, 242, 255, 0.5), 0 0 20px rgba(0, 242, 255, 0.3);
    }

    100% {
        text-shadow: 0 0 20px rgba(0, 242, 255, 0.8), 0 0 40px rgba(0, 242, 255, 0.6), 0 0 60px rgba(0, 242, 255, 0.4);
    }
}

/* Elementos Flotantes (Para el fondo) */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Botón Tecnológico Animado */
.btn-tech {
    background: transparent;
    color: var(--electric-cyan);
    padding: 0.8rem 2.5rem;
    border-radius: 4px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 2px solid var(--electric-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2) inset, 0 0 10px rgba(0, 242, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-tech:hover {
    background: var(--electric-cyan);
    color: var(--midnight);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.6);
    transform: scale(1.05);
}