/**
 * CSS to force visibility of Portfolio Titles on Tablet and Mobile
 * Breakpoint: 1024px (covers typical Tablets and Mobiles)
 */
@media (max-width: 1024px) {
    /* 
     * ELIMINADO: Ya no forzamos la visibilidad del overlay completo
     * De esta forma, el overlay oscuro solo aparecerá al hacer hover (comportamiento por defecto)
     */
    
    /* 
     * FORZAMOS SOLO EL TÍTULO:
     * Hacemos que el título sea visible siempre, independientemente del overlay
     * Position relative/absolute puede ser necesario dependiendo del layout de Elementor,
     * pero normalmente con opacity/visibility es suficiente si el padre no lo oculta.
     */
    .elementor-portfolio-item__title {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        
        /* Aseguramos que se lea sobre la imagen si no hay overlay */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centrado absoluto vertical y horizontal */
        width: 90%; /* Evita que el texto toque los bordes */
        text-align: center; /* Alineación del texto */
        z-index: 10;
        
        /* Quitamos el gradiente inferior ya que ahora está centrado */
        background: transparent; 
        
        /* Sombra para asegurar legibilidad sobre cualquier fondo */
        text-shadow: 0 2px 4px rgba(0,0,0,0.6);
        
        color: #fff !important;
        margin: 0 !important; /* Reseteamos márgenes */
    }
    
    /* 
     * TRUCO: A veces Elementor oculta todo el .elementor-portfolio-item__overlay con opacity: 0
     * Si hacemos opacity: 1 al overlay, se ve el fondo oscuro.
     * Solución: Hacer visible el overlay container pero totalmente transparente,
     * y mantener el hover effect original para el fondo oscuro.
     */
    .elementor-portfolio-item .elementor-portfolio-item__overlay {
        opacity: 1 !important; /* El contenedor debe estar presente */
        background-color: transparent !important; /* Pero SIN color de fondo por defecto */
    }
    
    /* Restaurar el fondo oscuro SOLO al hacer HOVER (simulando comportamiento desktop en tap) */
    .elementor-portfolio-item:hover .elementor-portfolio-item__overlay {
        background-color: rgba(0,0,0,0.5) !important; /* O el color que tengas configurado */
        transition: background-color 0.3s;
    }
}