.zoomable{
    cursor:zoom-in;
}
.zoom-lens{
    position:fixed;
    width:200px;
    height:200px;
    border-radius:50%;
    pointer-events:none;
    z-index:900;
    background-repeat:no-repeat;
    background-color:#05060f;
    box-shadow:0 0 0 2px rgba(139, 92, 246, 0.55), 0 0 0 5px rgba(5, 6, 15, 0.9), 0 18px 50px rgba(0, 0, 0, 0.6);
    transform:translate(-50%, -50%);
    opacity:0;
    transition:opacity 0.14s ease;
}

.zoom-lens.is-on{
    opacity:1;
}
.zoom-viewer{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:3vh 3vw;
    background:rgba(3, 4, 12, 0.94);
    opacity:0;
    transition:opacity 0.22s ease;
}

.zoom-viewer.is-on{
    opacity:1;
}

.zoom-viewer__img{
    max-width:96vw;
    max-height:84vh;
    width:auto;
    height:auto;
    border-radius:10px;
    box-shadow:0 30px 80px rgba(0, 0, 0, 0.7);
    touch-action:pinch-zoom;
}
.zoom-viewer__pie{
    max-width:min(90vw, 760px);
    text-align:center;
    font-size:0.85rem;
    line-height:1.45;
    color:#cbd5e1;
}

.zoom-viewer__cerrar{
    position:absolute;
    top:14px;
    right:16px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    line-height:1;
    color:#e5e7eb;
    background:rgba(255, 255, 255, 0.08);
    border:1px solid rgba(255, 255, 255, 0.22);
    border-radius:50%;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease;
}

.zoom-viewer__cerrar:hover{
    background:rgba(255, 255, 255, 0.16);
    border-color:rgba(255, 255, 255, 0.45);
}

.zoom-viewer__cerrar:focus-visible{
    outline:2px solid #20ead7;
    outline-offset:3px;
}
body.zoom-abierto{
    overflow:hidden;
}
@media (prefers-reduced-motion: reduce){
    .zoom-lens,
    .zoom-viewer{
        transition:none;
    }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse){
    .zoom-lens{
        display:none !important;
    }
}

@media (max-width: 640px){
    .zoom-viewer{ padding:2vh 2vw; gap:10px; }
    .zoom-viewer__img{ max-height:78vh; }
    .zoom-viewer__pie{ font-size:0.78rem; }
}