/* ================================================================= INTERPLAY — Ampliar imágenes (lightbox) ----------------------------------------------------------------- Fondo oscurecido + imagen centrada + botón (x) para cerrar. El JS añade .is-zoomable a las imágenes ampliables y monta el overlay al final del . ================================================================= */ /* Imágenes que se pueden ampliar */ .is-zoomable { cursor: zoom-in; } .is-zoomable:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; } /* Bloquea el scroll del fondo mientras está abierto */ .has-lightbox-open { overflow: hidden; } /* --- Overlay --- */ .lightbox { /* "inset: 0" se calcula contra el layout viewport, que en el móvil incluye la franja que ocupa la barra del navegador cuando reaparece (al girar el teléfono, por ejemplo): parte del overlay quedaba debajo y se rompía el efecto de pantalla completa. Con "dvh" la altura se ajusta sola a lo que realmente se ve. */ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* respaldo para navegadores antiguos */ height: 100dvh; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); background: rgba(30, 30, 30, 0.92); opacity: 0; transition: opacity 0.25s ease; overscroll-behavior: contain; } .lightbox.is-open { opacity: 1; } .lightbox[hidden] { display: none; } /* --- Imagen --- */ .lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; max-height: 100%; } .lightbox__img { display: block; max-width: min(1600px, 100%); max-height: 85vh; max-height: 85dvh; width: auto; height: auto; object-fit: contain; cursor: default; } .lightbox__caption { margin: 0; font: var(--font-collapse); letter-spacing: var(--ls-default); color: var(--color-white); text-align: center; } .lightbox__caption[hidden] { display: none; } /* --- Botón de cierre --- */ .lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-white); font-size: 28px; cursor: pointer; transition: opacity 0.2s ease; } .lightbox__close:hover { opacity: 0.6; } .lightbox__close:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } /* --- Navegación entre imágenes de un carrusel --- */ .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-white); font-size: 32px; cursor: pointer; transition: opacity 0.2s ease; z-index: 1; } .lightbox__nav--prev { left: var(--space-2); } .lightbox__nav--next { right: var(--space-2); } .lightbox__nav:hover { opacity: 0.6; } .lightbox__nav:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .lightbox__nav[hidden] { display: none; } .lightbox__counter { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); font: var(--font-collapse); letter-spacing: var(--ls-default); font-variant-numeric: tabular-nums; color: var(--color-white); opacity: 0.7; } .lightbox__counter[hidden] { display: none; } /* Con flechas visibles, la imagen deja hueco a los lados */ .lightbox.has-nav .lightbox__figure { max-width: calc(100% - 2 * (56px + var(--space-3))); } @media (max-width: 600px) { .lightbox { padding: var(--space-7) var(--space-2) var(--space-6); } .lightbox__img { max-height: 70vh; max-height: 70dvh; } .lightbox__close { width: 40px; height: 40px; font-size: 24px; top: var(--space-2); right: var(--space-2); } /* En móvil las flechas van abajo, junto al contador, para no taparse con la imagen (y además se puede deslizar con el dedo). */ .lightbox__nav { top: auto; bottom: var(--space-2); transform: none; width: 44px; height: 44px; font-size: 26px; } .lightbox__nav--prev { left: var(--space-4); } .lightbox__nav--next { right: var(--space-4); } .lightbox__counter { bottom: calc(var(--space-2) + 10px); } .lightbox.has-nav .lightbox__figure { max-width: 100%; } }