/* ── Espress web · legal ───────────────────────────────────────────────────── Portado de `Espress Legal.dc.html` (352 líneas) del handoff de Claude Design. Mismas reglas que `site.css`: los valores son los del export verbatim, lo que cambia es que salen de clases en vez de atributos `style` en línea. Esta página carga `site.css` ANTES que este archivo, y de ahí saca `.page`, `.gutter`, `.optic`, el header y el footer, que el export repite idénticos en las tres superficies. Acá solo está lo propio de legal, con prefijo `.lg-`. El export de esta página no tiene lógica: su `renderVals()` devuelve `{}`. No hay acordeón, no hay carril, no hay estado — por eso `legal/` no carga ningún JS y el índice lateral es `position: sticky` puro, sin scrollspy. ⚠️ `.page` usa `overflow-x: clip` y no `hidden` justamente por este archivo: un `hidden` en cualquier ancestro anula el sticky del índice, en silencio. ──────────────────────────────────────────────────────────────────────────── */ /* ── Hero ─────────────────────────────────────────────────────────────────── */ .lg-hero{background:var(--red-500);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,4.5vw,58px)} .lg-back{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--black);text-decoration:none} .lg-back:hover{color:var(--white)} .lg-back span{display:block;font-size:13px;line-height:1;color:inherit} .lg-hero-row{margin-top:26px;display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:space-between;gap:26px 60px} .lg-title{margin:0} /* El titular es `8.5vw` en el export y va en una fila partida con el párrafo. Se midió: a 1280 tope en 88px y "& PRIVACY" cabe con el párrafo al lado. Por debajo de ~980 la fila envuelve sola y cada mitad usa el ancho completo. */ .lg-title span{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(32px,8.5vw,88px);line-height:.94;text-transform:uppercase;color:var(--black);white-space:nowrap} .lg-title span.on-red{color:var(--white)} .lg-hero-note{margin:0 0 10px;max-width:400px;font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.4;color:var(--white);text-wrap:pretty} /* ── Cuerpo: índice + documentos ──────────────────────────────────────────── */ .lg-body{padding-top:clamp(40px,5vw,56px);padding-bottom:clamp(60px,7vw,92px);background:var(--off-white)} .lg-cols{display:flex;flex-wrap:wrap;gap:34px clamp(28px,4vw,56px);align-items:flex-start} .lg-toc{flex:1 1 246px;max-width:340px;position:sticky;top:24px;display:flex;flex-direction:column;gap:12px} .lg-toc-head{margin-bottom:6px;font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--red-500)} /* El export mete los cinco enlaces, la nota y el mailto en el mismo contenedor. Los cinco van en su propio