/* Ruta: /assets/css/proyectos.css */

/* --- BLOQUES DE PROYECTO GIGANTES --- */
.portfolio-block {
    height: 65vh; /* Cada proyecto ocupa el 65% del alto de la pantalla */
    min-height: 450px;
    width: 100%;
    cursor: pointer;
}

.portfolio-img-full {
    height: 100%;
    /* Empieza a TODO COLOR, ligeramente oscurecida para que el texto blanco se lea perfecto */
    filter: grayscale(0%) brightness(0.6); 
    /* Transición súper suave para el color y el zoom al mismo tiempo */
    transition: filter 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1); 
    transform: scale(1);
}

/* --- EFECTO HOVER: BLANCO Y NEGRO + ZOOM --- */
.portfolio-block:hover .portfolio-img-full {
    /* Al pasar el ratón: pierde el color (escala de grises), se oscurece un poco más y hace un zoom sutil */
    filter: grayscale(100%) brightness(0.4); 
    transform: scale(1.05); 
}

.portfolio-content-overlay {
    z-index: 2;
    pointer-events: none; /* Permite que el clic atraviese el texto y vaya directo al enlace */
}

.portfolio-title {
    font-size: 3.5rem; /* Título gigante estilo revista */
    letter-spacing: 3px;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.5); /* Sombra sutil para asegurar lectura */
}

/* Ajustes para celulares */
@media (max-width: 768px) {
    .portfolio-title { 
        font-size: 2rem; 
    }
    .portfolio-block { 
        height: 50vh; 
    }
}

.portfolio-cta {
    border-top: 1px solid #222; /* Línea separadora sutil */
}