/* ========================================================================= Casa Lavalle — galeria.css Página /galeria. Se carga después de styles.css y mosaico.css (que aportan los tokens y el mosaico/lightbox compartidos con /proyectos) y solo añade lo propio de la página: la cabecera con filtros, el ritmo vertical del mosaico y el estado sólido del navbar en reposo. Los bloques NO reutilizan `.galeria` (ese es el teaser de la landing en styles.css). Mobile-first: base = 0–767px, md = 768px, xl = 1280px. ========================================================================= */ /* ---------- Navbar sólido desde el load ---------- Misma solución que historia.css: esta página no tiene Hero oscuro, así que la clase estática .nav-solid en replica .nav.is-scrolled sin tocar script.js (el toggle por scroll sigue corriendo; ambos estados se ven igual). */ .nav-solid .nav { background: var(--marfil); box-shadow: 0 1px 0 rgba(44, 44, 44, 0.06), 0 8px 24px rgba(9, 57, 76, 0.06); } .nav-solid .nav__logo-img--light { opacity: 0; } .nav-solid .nav__logo-img--dark { opacity: 1; } .nav-solid .nav__trigger { color: var(--carbon); } /* ---------- Cabecera (título + filtros) ---------- Misma composición que el head del teaser de la landing: título a la izquierda, etiquetas discretas a la derecha sobre la misma línea base. */ .mosaico-head { background: var(--marfil); color: var(--carbon); /* Móvil: menos aire sobre el título — la página tiene que abrir ya con las primeras fotos a la vista, no con media pantalla vacía. */ padding: calc(var(--nav-h) + clamp(26px, 4.4vw, 60px)) var(--gutter) clamp(16px, 2.6vw, 28px); display: flex; flex-direction: column; gap: clamp(10px, 2.2vw, 18px); } .mosaico-head__title { font-size: clamp(2.3rem, 9vw, 4.6rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--carbon); } /* Filtros: etiquetas de texto (tratamiento de .galeria__link), no botones sólidos. Sin JS no pueden filtrar: se ocultan y el grid muestra todo. */ .mosaico-head__filtros { display: flex; flex-wrap: wrap; column-gap: clamp(18px, 3vw, 30px); } html:not(.js) .mosaico-head__filtros { display: none; } .mosaico-head__filtro { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-piedra); transition: color 0.3s var(--ease-out); } .mosaico-head__filtro:hover { color: var(--bronce-anzures); } /* Activo: color + subrayado fino (indicador no dependiente solo del color). */ .mosaico-head__filtro.is-active { color: var(--carbon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } /* ---------- Mosaico ---------- El grid, las filas y el lightbox viven en mosaico.css (compartidos con /proyectos). Aquí solo queda el encuadre de la sección en la página. */ /* El remate inferior es corto a propósito (cliente 2026-07-20: los ~200px de antes leían como aire muerto entre la última fila y el footer). El cierre de la página lo hace el azul del footer, no el vacío que lo precede. */ .mosaico { background: var(--marfil); color: var(--carbon); padding: 0 var(--gutter) clamp(26px, 3.4vw, 42px); } /* ========================================================================= md — @media (min-width: 768px) ========================================================================= */ @media (min-width: 768px) { /* Cabecera en una fila: título izquierda, filtros derecha (línea base). */ .mosaico-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 20px; } }