/* Configuraciones base de Tailwind personalizadas */
@layer utilities {

    /* El efecto de cristal (Glassmorphism) para las tarjetas y el Navbar */
    .glass-panel {
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

    /* Esferas de luz difuminadas para el fondo azul oscuro */
    .glow-bg {
        position: absolute;
        width: 60vw;
        height: 60vw;
        border-radius: 50%;
        filter: blur(150px);
        z-index: 0;
        pointer-events: none;
    }
}

/* Animación de flotación suave para las imágenes de la derecha */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Animación para que aparezcan las tarjetas al hacer scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Efecto hover profesional */
.hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}