/* ===========================================================
   Galería interactiva — fotos que siguen el cursor/dedo
   Vive dentro de una caja de altura fija: no toca el fondo,
   el scroll ni el layout del resto de la página.
   =========================================================== */
.galeria-interactiva {
    position: relative;
    height: 58vh;
    min-height: 320px;
    max-height: 480px;
    margin: 2.2rem 0 1rem;
    border-radius: var(--radio);
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #2a0e0e 0%, var(--negro) 78%);
    box-shadow: var(--sombra-suave);
}

.gi-imagen {
    width: min(260px, 34vw);
    max-width: 46%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    display: none;
    pointer-events: none;
    user-select: none;
}

.gi-imagen[data-status="active"] { display: block; }

.galeria-interactiva__aviso {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 18px;
    border-radius: 20px;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    z-index: 999;
}

@media (max-width: 640px) {
    .galeria-interactiva { height: 44vh; min-height: 260px; }
    .galeria-interactiva__aviso {
        font-size: 0.78rem;
        white-space: normal;
        max-width: 82%;
        padding: 7px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gi-imagen { transition: none; }
}