/* ========================================
   PERSO PROJECT-DETAIL.CSS - Páginas de detalle de proyectos personales
   ======================================== */

/* Project Detail Section */
.perso_project-detail-section {
    padding: 120px 0 80px;
    min-height: 100vh;
    background: var(--background-primary);
}

/* Project Header */
.perso_project-header {
    margin-bottom: 3rem;
    text-align: center;
}

.perso_project-detail-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: none;
}

/* Títulos de secciones con gradiente */
.perso_project-detailed-description-title,
.perso_challenges-title,
.perso_logros-title {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    border-bottom: 2px solid;
    border-image: linear-gradient(135deg, #8b5cf6, #ff0000) 1;
    padding-bottom: 0.5rem;
}

/* Project Info Card */
.perso_project-info-card {
    background: var(--background-card);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 2px solid #8b5cf6;
}

.perso_project-detail-section .achievements-list i {
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.perso_project-info-card h3 {
    font-size: 1.25rem;
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Tech Tags con gradiente */
.perso_tech-tag {
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Botón con gradiente */
.perso_btn.btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    border: none;
    color: var(--text-light);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.perso_btn.btn-primary:hover {
    background: linear-gradient(135deg, #a855f7, #ff3333);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

/* Navegación personalizada */
.perso_nav-logo a {
    background: linear-gradient(135deg, #8b5cf6, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
}

.perso_language-selector {
    display: flex;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 768px) {
    .perso_project-detail-title {
        font-size: 2rem;
    }
}