/* Estilos propios de galeria.html (extraidos del <style> inline). Base global: styles.css */

/* Títulos de las Secciones */
        .titulo-galeria {
            font-size: 2.2rem;
            font-weight: 900;
            color: #198754;
            text-align: center;
            margin: 40px 0 30px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .titulo-galeria span { border-bottom: 5px solid #198754; padding-bottom: 5px; }

        /* Contenedor de la Imagen (Ahora con cursor de "clic") */
        .foto-container {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 24px;
            position: relative;
            background: #000;
            cursor: pointer; /* Le dice al usuario que se puede hacer clic */
        }

        .foto-container img {
            width: 100%;
            height: 250px; 
            object-fit: cover; 
            transition: transform 0.5s ease, opacity 0.5s ease;
        }

        /* Efecto al pasar el mouse/tocar */
        .foto-container:hover img { transform: scale(1.1); opacity: 0.7; }

        /* Texto sobre la imagen */
        .overlay-texto {
            position: absolute;
            bottom: -60px; /* Escondido por defecto */
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            color: white;
            font-weight: 700;
            font-size: 1.1rem;
            transition: bottom 0.3s ease;
            text-align: center;
            pointer-events: none; /* Para que el clic pase a la imagen */
        }
        .foto-container:hover .overlay-texto { bottom: 0; } /* Sube cuando pasás el mouse */

        /* Estilos del Modal (Ventana flotante) */
        .modal-content-custom { background: transparent; border: none; }
        .btn-cerrar-modal { filter: invert(1) grayscale(100%) brightness(200%); opacity: 1; } /* Hace que la X sea blanca y brillante */

        @media (min-width: 992px) {
            .titulo-galeria { font-size: 3rem; margin: 60px 0 40px 0; }
            .foto-container img { height: 300px; } 
        }