/* Efectos adicionales para el portafolio */

/* Efecto de aclarado al hacer clic en los proyectos */
.portfolio-item.clicked .portfolio-image {
    filter: brightness(1.3);
    transform: scale(1.05);
}

.portfolio-item.clicked .portfolio-overlay {
    background: rgba(18, 18, 18, 0.6); /* Fondo más transparente */
    opacity: 1;
}

/* Transición suave para el efecto de clic */
.portfolio-item {
    cursor: pointer;
}

.portfolio-image {
    transition: all 0.5s ease, filter 0.3s ease;
}

.portfolio-overlay {
    transition: all 0.3s ease, background 0.3s ease;
    background: rgba(18, 18, 18, 0.8);
}

/* Efecto de brillo en los bordes al hacer clic */
.portfolio-item.clicked {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
}

/* Animación de pulso para el botón de detalles al hacer clic */
.portfolio-item.clicked .btn-primary {
    animation: buttonPulse 1.5s infinite;
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}