.wb-lightbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.wb-lightbox-thumb { padding: 0; border: none; background: none; cursor: zoom-in; }
.wb-lightbox-thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; }
.wb-lightbox-figura { margin: 0; }
/* El botón tiene que ocupar la celda entera. Sin esto se encogía al
   tamaño de su contenido —un botón no se estira solo— y las fotos
   salían pequeñas y descentradas dentro de su hueco. Solo pasaba con
   pie, porque es lo que mete la <figure> por medio: la rejilla
   estiraba la figura, no el botón. */
.wb-lightbox-figura .wb-lightbox-thumb { display: block; width: 100%; }
.wb-lightbox-figura figcaption { margin-top: 6px; font-size: 0.86rem; line-height: 1.4; opacity: 0.8; }
.wb-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 999; cursor: zoom-out; padding: 4vmin; }
.wb-lightbox-overlay img { max-width: 92vw; max-height: 82vh; object-fit: contain; }
.wb-lightbox-pie { margin: 0; max-width: 60ch; text-align: center; color: #fff; font-size: 0.95rem; line-height: 1.5; }
/* Las flechas: 48 px de lado, que es lo que necesita un dedo. Van
   separadas del borde para que no se confundan con "cerrar". */
.wb-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.wb-lightbox-nav:hover { background: rgba(255,255,255,0.32); }
.wb-lightbox-ant { left: 3vmin; }
.wb-lightbox-sig { right: 3vmin; }