/* ══════════════════════════════════════════════════════════ VISOR DE IMÁGENES (lightbox propio del tema) Acompaña a js/bcba-lightbox.js. Usa los tokens del tema: navy del encabezado para el fondo, dorado para el contador, y el mismo radio y la misma familia tipográfica que el resto del sitio. ══════════════════════════════════════════════════════════ */ /* La lupa se pone desde el JS, solo sobre las imágenes que abren el visor. La regla vieja (.bcba-prose img { cursor: zoom-in }) la ponía también en las que van dentro de un enlace, donde el cursor correcto es la mano. */ .bcba-lb-zoom { cursor: zoom-in; } .bcba-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 32px 88px; background: rgba(0, 22, 40, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .bcba-lb.is-abierto { opacity: 1; visibility: visible; } /* Con el visor abierto la página de atrás no se desplaza. El scroll de este sitio lo lleva (en overflow:clip), así que solo con overflow:hidden en el body la posición se perdía y la página saltaba al principio: el body se fija a la altura que el JS guarda en `top`, y al cerrar se restituye. */ body.bcba-lb-abierto { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* ── La figura ───────────────────────────────────────────── */ .bcba-lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; } .bcba-lb__marco { border-radius: var(--bi-radius, 14px); overflow: hidden; background: rgba(255, 255, 255, .04); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); transform: scale(.97); transition: transform .22s ease; line-height: 0; } .bcba-lb.is-abierto .bcba-lb__marco { transform: scale(1); } .bcba-lb__img { display: block; max-width: 100%; /* 100vh menos el relleno vertical, el pie y su separación. */ max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; opacity: 1; transition: opacity .18s ease; } .bcba-lb.is-cargando .bcba-lb__img { opacity: 0; } /* ── El pie: epígrafe y contador ─────────────────────────── */ .bcba-lb__pie { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 820px; text-align: center; } .bcba-lb__pie[hidden] { display: none; } .bcba-lb__cap { font-family: var(--bh-sans, 'Inter', sans-serif); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .92); } .bcba-lb__cap:empty { display: none; } .bcba-lb__cont { font-family: var(--bh-sans, 'Inter', sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--bh-gold, #ee8d00); } .bcba-lb__cont:empty { display: none; } /* ── Botones ─────────────────────────────────────────────── */ .bcba-lb__cerrar, .bcba-lb__nav { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .18s ease, border-color .18s ease, translate .18s ease; } .bcba-lb__cerrar:hover, .bcba-lb__nav:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .42); } .bcba-lb__cerrar:focus-visible, .bcba-lb__nav:focus-visible { outline: 2px solid var(--bh-gold, #ee8d00); outline-offset: 3px; } .bcba-lb__nav[hidden] { display: none; } .bcba-lb__cerrar { top: 24px; right: 24px; width: 44px; height: 44px; } /* El centrado va por margin-top, no por transform: el desplazamiento del hover usa `translate`, que es una propiedad aparte y no puede pisar un transform de centrado. Así fue como la flecha se caía 26px al apoyarle el puntero: un `.bcba-lb__nav { transform: translateY(-50%) }` que había quedado en bcba-interna.css lo reemplazaba el :hover de acá, el botón se iba para abajo y el clic caía en el fondo, que cierra el visor. */ .bcba-lb__nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; } .bcba-lb__nav--prev { left: 20px; } .bcba-lb__nav--next { right: 20px; } .bcba-lb__nav--prev:hover { translate: -2px 0; } .bcba-lb__nav--next:hover { translate: 2px 0; } .bcba-lb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Celular ─────────────────────────────────────────────── */ @media (max-width: 767px) { .bcba-lb { padding: 64px 16px 24px; } .bcba-lb__img { max-height: calc(100vh - 200px); } .bcba-lb__cerrar { top: 14px; right: 14px; width: 40px; height: 40px; } /* En pantalla angosta las flechas taparían la foto: se pasan abajo, y de todos modos se puede deslizar con el dedo. */ .bcba-lb__nav { top: auto; bottom: 18px; margin-top: 0; width: 44px; height: 44px; } .bcba-lb__nav--prev { left: 22%; } .bcba-lb__nav--next { right: 22%; } .bcba-lb__pie { padding-bottom: 56px; } .bcba-lb__cap { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .bcba-lb, .bcba-lb__marco, .bcba-lb__img, .bcba-lb__nav { transition: none; } .bcba-lb__marco { transform: none; } }