/* line 6, ../sass/lightbox.sass */ /* ========================================================= PARCHE (agosto 2026): rediseño "pantalla completa" tipo Dezeen — sin marco blanco, sin barra de datos separada abajo (se convierte en una franja semitransparente flotando sobre la foto), flechas prev/next fijas a los bordes de la pantalla, y botón de cerrar (X) fijo arriba a la derecha. Todo lo demás del archivo original queda igual salvo lo indicado. ========================================================= */ /* v5: overlay y modal pasan de "absolute" (relativos al documento, se movían con el scroll y por eso el JS tenía que recalcular su tamaño/posición) a "fixed" (relativos a la ventana: quedan clavados en pantalla solos, sin cálculos). Junto con .lb-noscroll más abajo, esto bloquea el scroll de la página de fondo mientras la modal está abierta. */ #lightboxOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; display: none; } /* line 15, ../sass/lightbox.sass */ #lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; text-align: center; line-height: 0; font-weight: normal; } /* Se agrega a y mientras la modal está abierta (ver js/lightbox.js, start()/end()) para que el usuario no pueda hacer scroll de la página de fondo. */ html.lb-noscroll, body.lb-noscroll { overflow: hidden !important; height: 100% !important; } /* line 24, ../sass/lightbox.sass */ #lightbox img { width: auto; height: auto; } /* line 27, ../sass/lightbox.sass */ #lightbox a img { border: none; } /* line 30, ../sass/lightbox.sass */ .lb-outerContainer { position: relative; background-color: transparent; /* antes: white — ya no hay "tarjeta" blanca */ *zoom: 1; width: 250px; height: 250px; margin: 0 auto; border-radius: 0; /* antes: 4px — foto a sangre, sin esquinas redondeadas */ } /* line 38, .../_clearfix.scss */ .lb-outerContainer:after { content: ""; display: table; clear: both; } /* line 39, ../sass/lightbox.sass */ .lb-container { padding: 0; /* antes: 10px — sin marco alrededor de la foto */ } /* line 42, ../sass/lightbox.sass */ .lb-loader { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } /* line 51, ../sass/lightbox.sass */ .lb-nav { /* antes: position absolute (quedaba encerrado dentro del ancho de la foto). Con "fixed" cubre toda la pantalla sin importar el tamaño de la imagen, así las flechas quedan ancladas a los bordes de la ventana como en el sitio de referencia. */ position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } /* line 59, ../sass/lightbox.sass */ .lb-container > .nav { left: 0; } /* line 62, ../sass/lightbox.sass */ .lb-nav a { outline: none; cursor: pointer; } /* line 65, ../sass/lightbox.sass */ .lb-prev, .lb-next { width: 49%; height: 100%; display: block; } /* line 72, ../sass/lightbox.sass */ .lb-prev { left: 0; float: left; } /* line 76, ../sass/lightbox.sass */ .lb-next { right: 0; float: right; } /* Flechas: antes eran imágenes que solo se veían en :hover. Ahora son un "‹ / ›" siempre visible, pegado al borde de la pantalla, semitransparente, que se resalta al pasar el mouse. */ .lb-prev::after, .lb-next::after { content: ''; position: fixed; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); transition: color 0.15s ease; pointer-events: none; } .lb-prev::after { content: '\2039'; /* ‹ */ left: 12px; } .lb-next::after { content: '\203A'; /* › */ right: 12px; } .lb-prev:hover::after, .lb-next:hover::after { color: #fff; } /* line 88, ../sass/lightbox.sass */ .lb-dataContainer { /* antes: barra sólida debajo de la foto que le quitaba alto disponible. Ahora es una franja flotando sobre el borde inferior de la imagen, con degradado, sin ocupar espacio propio. */ position: fixed; left: 0; bottom: 0; width: 100%; margin: 0; padding-top: 5px; *zoom: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); border-radius: 0; z-index: 10001; } .lb-dataContainer:after { content: ""; display: table; clear: both; } /* line 95, ../sass/lightbox.sass */ .lb-data { padding: 14px 20px; color: #eaeaea; max-width: 900px; margin: 0 auto; } /* line 98, ../sass/lightbox.sass */ .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.2em; } /* line 103, ../sass/lightbox.sass */ .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1.2em; color: #fff; } /* line 107, ../sass/lightbox.sass */ .lb-data .lb-number { display: block; clear: left; padding-bottom: 0; font-size: 11px; color: rgba(255, 255, 255, 0.65); } /* Botón cerrar (X): antes vivía dentro de la barra de datos de abajo. Ahora queda fijo arriba a la derecha de la pantalla, siempre visible, igual que en el sitio de referencia. */ .lb-data .lb-close { position: fixed; top: 16px; right: 20px; width: 40px; height: 40px; float: none; padding: 0; margin: 0; outline: none; z-index: 10002; display: flex; align-items: center; justify-content: center; } .lb-data .lb-close img { display: none; /* se reemplaza el ícono original por una "×" dibujada en CSS abajo */ } .lb-data .lb-close::before { content: '\00d7'; /* × */ font-family: Georgia, 'Times New Roman', serif; font-size: 32px; line-height: 1; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); transition: color 0.15s ease; } .lb-data .lb-close:hover { cursor: pointer; } .lb-data .lb-close:hover::before { color: #fff; } /* En pantallas chicas, flechas y botón de cerrar un poco más chicos para no comerse tanto la foto. */ @media (max-width: 600px) { .lb-prev::after, .lb-next::after { font-size: 24px; width: 32px; height: 32px; } .lb-prev::after { left: 4px; } .lb-next::after { right: 4px; } .lb-data .lb-close { top: 8px; right: 8px; width: 32px; height: 32px; } .lb-data .lb-close::before { font-size: 26px; } .lb-data { padding: 10px 14px; } }