(z-index:2) no podría taparlo, y cualquier ancestro con transform, filter o backdrop-filter rompería el position:fixed. ============================================================ */ .lightbox{ position:fixed;inset:0;z-index:800; display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,56px); background:rgba(44,53,39,.97); opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s; overscroll-behavior:contain; } .lightbox.on{opacity:1;visibility:visible} .lightbox-fig{ margin:0;display:flex;flex-direction:column;align-items:center;gap:16px; max-width:100%;max-height:100%; } .lightbox-fig img{ max-width:min(1200px,90vw);max-height:78svh;width:auto;height:auto;object-fit:contain; transform:scale(.96);transition:transform .45s var(--ease-suave); } .lightbox.on .lightbox-fig img{transform:none} .lightbox-fig figcaption{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--crema-tenue);text-align:center;max-width:46ch; } /* ---------- la cruz de cerrar · 44px de área táctil ---------- */ .lightbox-close{ position:absolute;top:clamp(10px,2.5vw,28px);right:clamp(10px,2.5vw,28px); width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;z-index:2; } .lightbox-close::before,.lightbox-close::after{ content:'';position:absolute;left:11px;top:21px;width:22px;height:1px; background:var(--crema);transition:background .3s ease; } .lightbox-close::before{transform:rotate(45deg)} .lightbox-close::after{transform:rotate(-45deg)} .lightbox-close:hover::before,.lightbox-close:hover::after{background:var(--fuego)} .lightbox-close:focus-visible{outline:1px solid var(--fuego);outline-offset:4px} /* ---------- anterior / siguiente ---------- */ .lightbox-nav{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;padding:0;border:0;background:none;cursor:pointer;z-index:2; } .lightbox-prev{left:clamp(2px,1.5vw,24px)} .lightbox-next{right:clamp(2px,1.5vw,24px)} .lightbox-nav::before{ content:'';position:absolute;top:50%;left:50%;width:13px;height:13px; border-left:1px solid var(--crema);border-bottom:1px solid var(--crema); transition:border-color .3s ease; } .lightbox-prev::before{transform:translate(-35%,-50%) rotate(45deg)} .lightbox-next::before{transform:translate(-65%,-50%) rotate(-135deg)} .lightbox-nav:hover::before{border-color:var(--fuego)} .lightbox-nav:focus-visible{outline:1px solid var(--fuego);outline-offset:2px} .lightbox-nav[hidden]{display:none} /* ---------- contador, arriba a la izquierda ---------- */ .lightbox-count{ position:absolute;top:clamp(10px,2.5vw,28px);left:clamp(14px,2.5vw,32px); font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--crema-tenue); line-height:44px; } .lightbox-count[hidden]{display:none} @media (max-width:600px){ /* las flechas bajan al pie para no taparse con la foto */ .lightbox{padding-bottom:82px} .lightbox-fig img{max-width:94vw;max-height:64svh} .lightbox-nav{top:auto;bottom:18px;transform:none} .lightbox-prev{left:calc(50% - 62px)} .lightbox-next{right:calc(50% - 62px)} }