/* ========================================================================= Casa Lavalle — historia.css Página /historia. Se carga después de styles.css y solo añade los bloques propios de la página (.relato, .tapices, .cierre) + 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); } /* ---------- Relato (hero de página) ---------- Apertura tipográfica pura (sin foto): la página completa vive en una sola columna centrada — relato, semblanza, tapices comparten el mismo eje. Contenido visible por defecto: el reveal (historia.js) solo corre con GSAP + ScrollTrigger y sin reduced-motion. */ .relato { background: var(--marfil); color: var(--carbon); /* El aire de apertura es el mínimo que despeja el navbar fijo más un respiro. Antes eran hasta 168px sobre el eyebrow: media pantalla vacía antes de que empezara a leerse nada. */ padding: calc(var(--nav-h) + clamp(34px, 5.5vw, 68px)) var(--gutter) 0; } /* Móvil a la izquierda, como el resto del cuerpo (cliente 2026-07-21): el eje único del sitio en móvil es el izquierdo. Se recentra a partir de md, donde la columna es estrecha respecto a la pantalla y el centrado sí funciona. */ .relato__inner { max-width: 820px; margin: 0 auto; } /* Mismo tratamiento que .casa__eyebrow: Newsreader (serif) en versalitas, para que el eyebrow lea uniforme con los títulos editoriales del sitio. */ .relato__eyebrow { margin: 0 0 clamp(13px, 2.8vw, 18px); font-family: var(--font-editorial); font-optical-sizing: auto; font-size: 0.82rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--carbon); } /* h1 real del documento. Newsreader 300 heredado del base; azul nunca en headlines (brief): vive en carbon. */ .relato__title { font-size: clamp(2.3rem, 9vw, 4.6rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--carbon); text-wrap: balance; } /* Cuerpo en Inter Tight 300 (cliente 2026-07-21: la serif se queda en los titulares, los párrafos pasan a la sans). El cuerpo baja de 1.08rem a 1rem para compensar la altura de x mayor de Inter Tight; la interlínea se queda generosa (1.68) porque este es el texto más largo del sitio. */ .relato__body { margin: clamp(16px, 3.2vw, 24px) 0 0; max-width: 52ch; font-family: var(--font-sans); font-weight: 300; font-size: 1rem; line-height: 1.68; color: var(--carbon); } /* ---------- Semblanza (la mujer detrás del nombre) ---------- Bloque tributo, compacto y centrado. El retrato es deliberadamente pequeño (diseño que no grita): una pieza de memoria, no un hero. Cierra la página: lleva el padding inferior grande antes del footer. */ .semblanza { background: var(--marfil); color: var(--carbon); /* El remate inferior era de hasta 190px: el cierre de la página lo hace el azul del footer, no el vacío que lo precede (mismo criterio que /galeria). */ padding: clamp(34px, 4.4vw, 54px) var(--gutter) clamp(40px, 5.2vw, 64px); } .semblanza__inner { max-width: 720px; margin: 0 auto; } /* padding-top (arriba de la imagen) ≈ caption + este margen (debajo), para que el retrato quede centrado entre el párrafo del relato y el título. */ .semblanza__media { margin: 0 0 clamp(22px, 3.4vw, 34px); } /* Retrato pequeño a propósito; la leyenda centra sobre la columna completa. */ .semblanza__img { width: clamp(120px, 30vw, 168px); border-radius: 4px; } .semblanza__cap { margin-top: 12px; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-piedra); } .semblanza__title { font-size: clamp(1.7rem, 5.4vw, 2.7rem); letter-spacing: -0.01em; color: var(--carbon); text-wrap: balance; } .semblanza__body { margin: clamp(14px, 2.6vw, 20px) 0 0; max-width: 52ch; font-family: var(--font-sans); font-weight: 300; font-size: 1rem; line-height: 1.68; color: var(--carbon); } /* Acento en itálica puntual (eco del "lo que la hacía suya" del hero). Se queda en Newsreader itálica a propósito: de Inter Tight solo se autohospeda la normal, así que en la sans el navegador inclinaría la recta por software y eso se ve como una falsa itálica. La serif itálica dentro de un párrafo en sans lee como acento deliberado, que es lo que es. */ .semblanza__body em { font-family: var(--font-editorial); font-style: italic; font-weight: inherit; font-size: 1.06em; } /* ========================================================================= md — @media (min-width: 768px) ========================================================================= */ @media (min-width: 768px) { /* La columna se recentra: a partir de aquí es estrecha respecto a la pantalla y el centrado lee como apertura editorial. En móvil ocupa casi todo el ancho y ahí el mismo centrado se veía descuadrado, así que va a la izquierda como el resto del cuerpo. */ .relato__inner, .semblanza__inner { text-align: center; } .relato__body, .semblanza__body, .semblanza__img { margin-inline: auto; } }