/* --- Fuentes --- */
.font-tech { font-family: 'Orbitron', sans-serif; }
.font-body { font-family: 'Roboto', sans-serif; }

/* --- Patrones y Fondos Personalizados --- */

/* Pattern: Grid Tech */
.bg-grid-pattern {
    background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Pattern: Hexagons */
.bg-hex-pattern {
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2306b6d4' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hex-shape { 
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 
}

/* Gradient Spheres (3D) */
.sphere-gradient { 
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, rgba(56,189,248,0.6) 20%, rgba(37,99,235,0.8) 50%, rgba(15,23,42,1) 100%); 
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.5); 
}
.sphere-purple { 
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, rgba(192,132,252,0.6) 20%, rgba(147,51,234,0.8) 50%, rgba(15,23,42,1) 100%); 
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5); 
}

/* --- Animaciones --- */

/* Pulse Glow */
@keyframes pulse-glow { 
    0%, 100% { opacity: 0.4; transform: scale(1); } 
    50% { opacity: 0.8; transform: scale(1.1); } 
}
.node-glow { animation: pulse-glow 3s infinite; }

/* Floating Element */
@keyframes float { 
    0%, 100% { transform: translateY(0px); } 
    50% { transform: translateY(-20px); } 
}
.float-anim { animation: float 6s ease-in-out infinite; }

/* --- Utilidades Visuales --- */
.safe-zone-overlay { 
    background: rgba(255, 0, 0, 0.1); 
    border: 2px dashed red; 
}

/* Difuminado inferior para la foto del usuario */
.fade-bottom { 
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); 
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%); 
}