body {
    background-color: #03050B;
}

/* =========================================
   CURSOR PERSONALIZADO (Solo para PC)
   ========================================= */
@media (pointer: fine) {
    body {
        cursor: none;
    }

    #custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
        mix-blend-mode: difference;
    }

    #custom-cursor.hover {
        width: 60px;
        height: 60px;
        background-color: rgba(0, 229, 255, 0.1);
        border-color: #00E5FF;
        backdrop-filter: blur(2px);
    }
}

@media (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }
}

/* Efecto Vidrio para las tarjetas */
.card-glass {
    background: rgba(10, 15, 30, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Botón de Neón */
.btn-neon {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    color: white;
    background: rgba(3, 5, 11, 0.8);
    position: relative;
    border-radius: 30px;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-neon::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(90deg, #00E5FF, #A855F7);
    z-index: -1;
    border-radius: 32px;
    transition: all 0.3s ease;
}

.btn-neon::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #03050B;
    z-index: -1;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-neon:hover::before {
    filter: blur(10px);
}
.btn-neon:hover {
    transform: scale(1.03);
}

/* =========================================
   TESSERACT HYPERCUBE STRUCTURE (3D CSS)
   ========================================= */
.cube-container {
    width: 300px;
    height: 300px;
    perspective: 1500px;
}

.cube-tesseract {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: spinTesseract 25s infinite linear;
}

.cube-tesseract .face {
    position: absolute;
    border: 1.5px solid;
    background-size: 30px 30px;
}

.outer-cube {
    width: 300px;
    height: 300px;
    position: absolute;
    transform-style: preserve-3d;
}

.outer-cube .face {
    width: 300px;
    height: 300px;
    border-color: rgba(0, 229, 255, 0.4);
    background: rgba(0, 229, 255, 0.02);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.1) inset;
    background-image: 
        linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.1) 1px, transparent 1px);
}

.inner-cube {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 75px; left: 75px;
    transform-style: preserve-3d;
    animation: spinInner 10s infinite linear reverse;
}

.inner-cube .face {
    width: 150px;
    height: 150px;
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.02);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.1) inset;
    background-image: 
        linear-gradient(rgba(168, 85, 247, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.1) 1px, transparent 1px);
}

.outer-cube .front  { transform: rotateY(  0deg) translateZ(150px); }
.outer-cube .back   { transform: rotateY(180deg) translateZ(150px); }
.outer-cube .right  { transform: rotateY( 90deg) translateZ(150px); }
.outer-cube .left   { transform: rotateY(-90deg) translateZ(150px); }
.outer-cube .top    { transform: rotateX( 90deg) translateZ(150px); }
.outer-cube .bottom { transform: rotateX(-90deg) translateZ(150px); }

.inner-cube .front  { transform: rotateY(  0deg) translateZ(75px); }
.inner-cube .back   { transform: rotateY(180deg) translateZ(75px); }
.inner-cube .right  { transform: rotateY( 90deg) translateZ(75px); }
.inner-cube .left   { transform: rotateY(-90deg) translateZ(75px); }
.inner-cube .top    { transform: rotateX( 90deg) translateZ(75px); }
.inner-cube .bottom { transform: rotateX(-90deg) translateZ(75px); }

@keyframes spinTesseract {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes spinInner {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}