/* ============================================================ LIGHTBOX - la galeria a pantalla completa Va SIEMPRE junto a js/lightbox.js: si una pagina carga el JS, tiene que cargar este CSS. Antes vivia dentro de cortinas.css, y por eso la galeria de las paginas de proyecto salia sin estilos: un bloque suelto despues del footer en vez de un overlay. El HTML del lightbox no esta en ningun archivo .html: lo crea js/lightbox.js y lo cuelga del . Sin esquinas redondeadas y sin dorado de relleno: el dorado aparece solo al pasar el cursor por los botones. ============================================================ */ /* Mientras la galeria esta abierta, la pagina de atras no se mueve */ html.lb-abierto,html.lb-abierto body{overflow:hidden} .lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(15,15,17,.97)} /* El fundido de entrada es una animacion, no una transicion con clase: asi el estado normal ya es visible. Si el navegador nunca llega a ejecutar la animacion, la galeria se ve igual en vez de quedarse invisible. */ .lb:not([hidden]){animation:lb-entra var(--transition-fast) ease} @keyframes lb-entra{from{opacity:0}to{opacity:1}} .lb[hidden]{display:none} .lb__marco{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--space-6) var(--space-7)} .lb__img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain} /* Botones: sin caja, sin relleno de color. Se vuelven dorados solo al pasar el cursor o al recibir el foco del teclado. */ .lb__cerrar,.lb__nav{position:absolute;z-index:2;background:none;border:0;border-radius:var(--radius);color:var(--color-text-on-dark-muted);cursor:pointer;font-family:var(--font-sans);line-height:1;padding:var(--space-2);transition:color var(--transition-fast)} .lb__cerrar:hover,.lb__nav:hover,.lb__cerrar:focus-visible,.lb__nav:focus-visible{color:var(--color-accent-gold)} .lb__cerrar{top:var(--space-3);right:var(--space-3);font-size:1.25rem} .lb__nav{top:50%;transform:translateY(-50%);font-size:1.5rem} .lb__nav--ant{left:var(--space-2)} .lb__nav--sig{right:var(--space-2)} .lb__contador{position:absolute;left:0;right:0;bottom:var(--space-3);margin:0;text-align:center;font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-text-on-dark-muted)} /* La foto grande de cada fila tambien abre la galeria */ .obra__media--abre{cursor:pointer} @media(max-width:880px){ /* Menos margen: en pantalla pequena la foto manda */ .lb__marco{padding:var(--space-6) var(--space-2)} .lb__nav{font-size:1.25rem} .lb__nav--ant{left:0} .lb__nav--sig{right:0} } @media(prefers-reduced-motion:reduce){ .lb:not([hidden]){animation:none} }