#galeria{overflow:hidden}
#galeria .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}
#galeria .gallery-item{position:relative;display:block;min-width:0;overflow:hidden;border-radius:16px;aspect-ratio:4/3;cursor:pointer;box-shadow:0 8px 32px rgba(84,58,122,.10);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
#galeria .gallery-item:hover,#galeria .gallery-item:focus-visible{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 48px rgba(84,58,122,.16)}
#galeria .gallery-item img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s cubic-bezier(.4,0,.2,1)}
#galeria .gallery-item:hover img,#galeria .gallery-item:focus-visible img{filter:grayscale(0) brightness(1.1) saturate(1.15)}
#galeria .gallery-item .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 60%);opacity:0;transition:opacity .3s}
#galeria .gallery-item:hover .overlay,#galeria .gallery-item:focus-visible .overlay{opacity:1}
#galeria .overlay-text{display:flex;align-items:center;gap:6px;color:#fff;font-size:.88rem;font-weight:600}
#galeria .overlay-text svg{width:16px;height:16px;opacity:.9}
#galeria .gallery-item:focus-visible{outline:3px solid #7658bd;outline-offset:3px}
#galeria .gallery-item.slide{opacity:0}
#galeria .gallery-item.slide.slide-visible{animation:minimal-slide-in-elliptic-right-bck .5s cubic-bezier(.25,.46,.45,.94) var(--slide-delay,0ms) both}
/* Animation derived from animacion.css in the attached example.
 * Generated by Animista; licensed under FreeBSD License.
 * https://animista.net/license */
@keyframes minimal-slide-in-elliptic-right-bck{0%{transform:translateX(800px) rotateY(30deg) scale(6.5);transform-origin:-100% 50%;filter:blur(12px);opacity:0}100%{transform:translateX(0) rotateY(0) scale(1);transform-origin:600px 50%;filter:blur(0);opacity:1}}
/* Cuando termina la entrada, el hover vuelve a usar la transición normal. */
#galeria .gallery-item.slide.animation-complete{animation:none;opacity:1}
@media(hover:none){#galeria .gallery-item img{filter:none}#galeria .gallery-item .overlay{opacity:1}}
@media(prefers-reduced-motion:reduce){#galeria .gallery-item.slide{opacity:1;transform:none;filter:none}#galeria .gallery-item.slide.slide-visible{animation:none}#galeria .gallery-item,#galeria .gallery-item img,#galeria .gallery-item .overlay{transition:none}}

#galeria .gallery-item:nth-child(2) img,#galeria .gallery-item:nth-child(4) img{object-position:center top}

@media(hover:none){#galeria .gallery-item img,#galeria .gallery-item:hover img,#galeria .gallery-item:focus-visible img{filter:none;transition:none}}