/* ==========================================================================
   Página Portfolio (portfolio.html) - Estilos Específicos
   ========================================================================== */

/* Overrides para body global */
body.portfolio-page { 
    padding: 80px; box-sizing: border-box; 
}

#logo-portfolio { 
    position: fixed; bottom: 30px; right: 30px; z-index: var(--z-nav); 
    height: 40px; width: auto; opacity: 0.7; transition: opacity 0.3s ease; 
    animation: fadeIn 1.5s ease-out; 
}
#logo-portfolio:hover { opacity: 1; }

#back-link { 
    position: fixed; top: 30px; left: 30px; z-index: var(--z-nav); 
    display: inline-block;
    font-family: var(--font-display); font-size: 22px; text-transform: uppercase; 
    letter-spacing: 2px; color: var(--c-text-primary); text-decoration: none; 
    transition: letter-spacing 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); animation: fadeIn 1.5s ease-out; 
}
#back-link:hover { letter-spacing: 2.8px; transform: translateX(6px); }

/* Carrusel Portfolio */
.carousel-viewport { width: 100%; height: 100%; display: flex; align-items: center; }
.carousel-track { display: flex; gap: 10vw; padding: 0 5vw; will-change: transform; }

.portfolio-link { 
    height: 80vh; width: auto; display: block; cursor: pointer; 
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; 
    animation: fadeIn 1s ease-out; 
}
.portfolio-link:hover { transform: translateY(-6px) scale(1.012); filter: brightness(1.02); }
.portfolio-photo { height: 100%; width: auto; object-fit: cover; }

/* Responsive Portfolio */
@media (max-width: 900px) {
    body.portfolio-page { 
        overflow: auto; 
        padding: 100px 20px 20px 20px;
    }
    #back-link {
        top: 20px;
        left: 20px;
    }
    #logo-portfolio { 
        height: 30px; 
        bottom: 20px;
        right: 10px; 
    }
    .carousel-viewport { 
        height: auto; 
        padding: 0; 
    }
    .carousel-track { 
        flex-direction: column; 
        align-items: center; 
        width: 100%; 
        gap: 5vw;
    }
    .portfolio-link { 
        height: auto; 
        width: 90%; 
        max-width: 450px; 
        margin-bottom: 0;
    }
    .portfolio-photo {
        width: 100%;
        height: auto;
    }
}