.portfolio-container {
    width: 80%;
    position: relative;
    left: 60%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 20px;
    margin-top: 4%;
    margin-bottom: 5%;
    padding: 3%;
    background-color: var(--fondo-modulo);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.portfolio-item {
    width: 96%;
    height: 45vh; /* 50% de la altura de la pantalla */
    display: flex;
    
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba (255,255,255,0.1);
    border-radius: 30px;
    color: var(--blanco-gradiente);
    padding: 2%;
    overflow: hidden;
    margin-bottom: 2%;
    transition: 0.3s ease;
}

.portfolio-item:hover{
    transform: scale(1.01);
    
}

.info-side {
    width: 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.year {  font-size: 0.9rem; margin-bottom: 10px; }
.project-title { font-size: 3.5rem; font-weight: 800; text-transform: uppercase; margin: 0; }
.project-desc { color: #d3d3d3; max-width: 400px; margin: 20px 0; line-height: 1.6; }

.project-meta { display: flex; gap: 30px; font-size: 0.8rem; color: #c5c5c5; margin-bottom: 30px; }


.btn-proyecto {
    display: inline-flex;
    align-items: center;
    text-align: center;
    max-width: 40%;
    gap: 10px;
    background: #fff;
    color: #000;
    padding: 15px 10%;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.btn-proyecto:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
}

.view-project:hover { color: var(--azul-gradiente); border-color: var(--azul-gradiente); }


.visual-side {
    width: 50%;
    position: relative;
    
}

.glitch-img-container {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.main-img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    filter: grayscale(0.7);
    transition: 0.5s;
}

/* Efecto 3D al Hover */


.portfolio-item:hover .main-img {
    filter: grayscale(0);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
    /* Un pequeño brillo en el borde para el toque tecnológico */
    outline: 1px solid rgba(255, 255, 255, 0.2);
    /* Suavizamos la transición */
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    
}