/* =========================================================
   EIHFA - EFECTO LUPA EN GALERÍA FOTOGRÁFICA
   ========================================================= */

/* Contenedor de cada imagen de la galería */
.field--name-field-gallery-image a {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
    cursor: zoom-in !important;
}


/* Imagen */
.field--name-field-gallery-image a img {
    display: block !important;
    transition: 
        transform 0.35s ease,
        filter 0.35s ease !important;
}


/* Oscurecimiento suave al pasar el mouse */
.field--name-field-gallery-image a:hover img {
    filter: brightness(0.75) !important;
    transform: scale(1.02) !important;
}


/* Lupa */
.field--name-field-gallery-image a::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 48px !important;
    height: 48px !important;

    transform: translate(-50%, -50%) scale(0.7) !important;

    opacity: 0 !important;

    /* Icono lupa mediante SVG */
    background-color: rgba(0, 0, 0, 0.55) !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px !important;

    border-radius: 50% !important;

    pointer-events: none !important;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease !important;

    z-index: 10 !important;
}


/* Mostrar lupa */
.field--name-field-gallery-image a:hover::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) {

    .field--name-field-gallery-image a:hover img {
        filter: none !important;
        transform: none !important;
    }

    .field--name-field-gallery-image a::after {
        display: none !important;
    }
}