/* ========================================================================= Casa Lavalle — proyectos.css Página /proyectos. Se carga después de styles.css y mosaico.css (que ya aportan los tokens y el mosaico/lightbox compartidos con /galeria) y solo añade lo propio de la página: la cabecera, el índice de proyectos desplegables y el estado sólido del navbar en reposo. Mobile-first: base = 0–767px, md = 768px, xl = 1280px. ========================================================================= */ /* ---------- Navbar sólido desde el load ---------- Esta página no tiene Hero oscuro: sin esto, el navbar transparente (logo y texto claros) sería invisible sobre marfil hasta hacer scroll. La clase estática .nav-solid en replica el estado .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 ---------- Solo el título (cliente 2026-07-20). El aire de arriba es el mínimo que despeja el navbar fijo: la página tiene que abrir ya con la lista de proyectos a la vista. */ .proyectos-head { background: var(--marfil); color: var(--carbon); padding: calc(var(--nav-h) + clamp(26px, 4.4vw, 60px)) var(--gutter) clamp(14px, 2.4vw, 26px); } .proyectos-head__inner { max-width: var(--page-max); margin-inline: auto; } /* h1 real del documento. Newsreader 300 heredado del base; azul nunca en headlines (brief): vive en carbon. */ .proyectos-head__title { font-size: clamp(2.3rem, 9vw, 4.6rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--carbon); } /* ---------- Índice de proyectos ---------- Lista de desplegables: en reposo la página es una tabla de casos y nada más. El aire vive en el interior de cada panel, no entre las filas. */ .proyectos { background: var(--marfil); color: var(--carbon); padding: 0 var(--gutter) clamp(28px, 3.6vw, 46px); } .proyectos__inner { max-width: var(--page-max); margin-inline: auto; border-top: 1px solid var(--hairline); } .proyecto { border-bottom: 1px solid var(--hairline); } .proyecto__heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Fila siempre visible. Es el target táctil completo (muy por encima de 44px de alto) y el disclosure del panel. Texto a la izquierda y signo a la derecha en todos los anchos: centrar la fila dejaba el signo colgando debajo y el bloque descuadrado (cliente 2026-07-21). */ .proyecto__toggle { display: grid; width: 100%; padding: clamp(13px, 2.1vw, 19px) 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id id signo" "tipo anio signo"; align-items: center; column-gap: clamp(14px, 3vw, 28px); row-gap: 10px; } .proyecto__id { grid-area: id; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: clamp(10px, 2vw, 16px); } /* Marca: etiqueta UI, no titular (regla de tipografía del brief). */ .proyecto__marca { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-piedra); } /* Nombre del caso: el único titular de la fila. */ .proyecto__nombre { font-family: var(--font-editorial); font-weight: 300; font-optical-sizing: auto; font-size: clamp(1.5rem, 5.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--carbon); transition: color 0.3s var(--ease-out); } .proyecto__tipo, .proyecto__anio { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-piedra); } .proyecto__tipo { grid-area: tipo; } .proyecto__anio { grid-area: anio; } /* Signo +/−: dos hairlines; al abrir, la vertical gira hasta desaparecer sobre la horizontal. */ .proyecto__signo { grid-area: signo; position: relative; width: 15px; height: 15px; color: var(--carbon); transition: color 0.3s var(--ease-out); } .proyecto__signo::before, .proyecto__signo::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; } .proyecto__signo::after { transform: rotate(90deg); transition: transform 0.45s var(--ease-out); } .proyecto__toggle[aria-expanded="true"] .proyecto__signo::after { transform: rotate(0deg); } @media (hover: hover) { .proyecto__toggle:hover .proyecto__nombre, .proyecto__toggle:hover .proyecto__signo { color: var(--bronce-anzures); } } /* ---------- Panel ---------- Colapso con grid-template-rows 0fr → 1fr: anima hasta la altura real del contenido sin medirla por JS (el mosaico se remaqueta y las fotos cargan en diferido, así que cualquier max-height fijo quedaría corto o largo). Abierto por defecto: sin JS la página se lee entera. */ .proyecto__panel { display: grid; grid-template-rows: 1fr; } /* La transición se enciende una vez que proyectos.js fijó el estado inicial: si no, los paneles que nacen cerrados se verían colapsar en el load. */ .proyectos.is-ready .proyecto__panel { transition: grid-template-rows 0.55s var(--ease-out); } .proyecto__panel.is-closed { grid-template-rows: 0fr; } .proyecto__panel-inner { min-height: 0; overflow: hidden; } /* El aire de la página está aquí dentro y en ningún otro lado. */ .proyecto__texto { padding-top: clamp(4px, 1vw, 10px); } /* Margen explícito: sin esto el

se queda con el `margin: 1em 0` del navegador y, como la regla de hermano adyacente sólo toca al segundo párrafo, el primero caía 16px más abajo que el segundo en las dos columnas de md. El aire entre párrafos lo pone la regla de abajo, no el UA. */ /* Cuerpo en Inter Tight 300 (cliente 2026-07-21: la serif se queda en los titulares, los párrafos pasan a la sans). Baja de 1.02rem a 0.96rem para compensar la altura de x mayor de Inter Tight. */ .proyecto__body { margin: 0; max-width: 56ch; font-family: var(--font-sans); font-weight: 300; font-size: 0.96rem; line-height: 1.66; color: var(--carbon); } .proyecto__body + .proyecto__body { margin-top: 1.1em; } /* SIN USO desde el 2026-07-22, y a propósito: el único de la página (“…la devuelve intacta”) se quitó porque una itálica serif suelta dentro de un párrafo en sans se leía como un error de fuente y no como un acento (cliente: "hay en los párrafos una parte que está en serif y no debería de ir"). La regla se queda como red de seguridad, no como decoración: si alguien vuelve a escribir un aquí, sin esto Inter Tight —de la que solo se autohospeda la recta— saldría inclinada por software, que es una falsa itálica y se ve peor. Antes de usarla, confirmar con el cliente. Ver nota en historia.css. */ .proyecto__body em { font-family: var(--font-editorial); font-style: italic; font-weight: inherit; font-size: 1.06em; } .proyecto__panel .mosaico__grid { margin-top: clamp(16px, 2.6vw, 26px); padding-bottom: clamp(22px, 3.2vw, 36px); } /* ========================================================================= md — @media (min-width: 768px) ========================================================================= */ @media (min-width: 768px) { /* La fila del proyecto cabe entera en una línea: nombre, tipo, año, signo. */ .proyecto__toggle { grid-template-columns: minmax(0, 1fr) minmax(0, auto) 5.5em 15px; grid-template-areas: "id tipo anio signo"; column-gap: clamp(20px, 3vw, 48px); align-items: center; } .proyecto__anio { text-align: right; } /* Dos columnas de texto: la narración deja de ser una cinta vertical y el panel abre con la misma densidad que el mosaico que va debajo. */ .proyecto__texto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); max-width: var(--page-max); } .proyecto__body { max-width: none; } .proyecto__body + .proyecto__body { margin-top: 0; } } /* ========================================================================= Reduced motion: el panel abre y cierra sin transición. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .proyectos.is-ready .proyecto__panel, .proyecto__signo::after, .proyecto__nombre, .proyecto__signo { transition: none; } }