a.abrirGaleria { display:inline-block; background:#0066ff; color:white; padding:10px 20px; border-radius:8px; text-decoration:none; font-size:16px; transition:0.2s; }
a.abrirGaleria:hover { background:#0050cc; }
.overlay { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.85); z-index: 100000000; transition: opacity 0.3s; }
.overlay.active { display: flex; opacity: 1; }
.viewer { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.viewer img { max-width: 100%; max-height: 80vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.6); transition: transform 0.3s ease, opacity 0.3s ease; cursor: zoom-in; }
.nava { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border-radius: 50%; padding: 12px; cursor: pointer; transition: background 0.2s; }
.nava.lefta { left: 20px; }
.nava.righta { right: 20px; }
.nava:hover { background: rgba(255,255,255,0.35); }
.nava svg { width: 36px; height: 36px; stroke: white; }
.close { position: absolute; top: 20px; right: 20px; font-size: 28px; background: none; border: none; color: white; cursor: pointer; transition: 0.2s; }
.close:hover { color: #ff4c4c; }
.caption { color: #fff; margin-top: 10px; font-size: 16px; }
.zoomed { cursor: zoom-out; transform: scale(2); }