/* ───────────────────────────────────────────────────── Section Nav — índice lateral de secciones Reutilizable en todas las páginas de detalle de proyecto. La lista se genera dinámicamente vía js/section-nav.js a partir de los

de cada página; este archivo solo define su presentación. No introduce colores ni tipografías nuevas: todo el texto usa la fuente del sitio (--_type-weight---font-family, Poppins), el acento activo usa --page-accent (ya definido por cada página) y el estado inactivo usa --subtitle (ya global). .project-layout es una grid de 3 columnas: [1fr] [940px] [1fr]. La columna central es .project-content, con el mismo ancho fijo (940px) que .content.w-container siempre tuvo en todo el sitio. Dos columnas 1fr IGUALES a los lados reproducen matemáticamente el mismo centrado de "max-width:940px; margin:auto" que ya existía — .project-content no cambia de ancho, centrado ni padding; simplemente ahora vive en una celda de grid en vez de autocentrarse, con el mismo resultado visual. .content.w-container (definido en otro CSS) no se toca ni se sobreescribe aquí. section-nav vive en la columna izquierda (el margen/gutter que ya existía en blanco) — no dentro de .project-content ni compitiendo por su ancho. Se alinea al borde extremo izquierdo de esa columna (justify-self:start), no pegado al contenido. Es sticky verticalmente dentro de esa celda. ───────────────────────────────────────────────────── / :root { --section-nav-offset: calc(80px + var(--_type-size---menu-sup) + var(--_space---gap4) + 8px); --section-nav-width: 150px; } .project-layout { / body.body-2 es flex (column) con align-items:flex-start: sin un ancho explícito, .project-layout no se estira al ancho real del body y queda con tamaño intrínseco — y con un contenedor de grid no-definido, las columnas 1fr dejan de repartir el espacio real del viewport (se resuelven contra el contenido, no contra el ancho disponible). width:100% le da un ancho definido y restaura el reparto correcto de 1fr a cada lado. / width: 100%; display: grid; grid-template-columns: 1fr 940px 1fr; align-items: start; } .project-content { grid-column: 2; } .section-nav { grid-column: 1; justify-self: start; width: var(--section-nav-width); position: sticky; top: var(--section-nav-offset); max-height: calc(100vh - var(--section-nav-offset) - var(--_space---gap2)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--_space---gap3); } .section-nav__item { display: flex; align-items: baseline; gap: var(--_space---gap5); padding: var(--_space---gap5) var(--_space---gap4) var(--_space---gap5) 16px; border-left: 2px solid transparent; border-radius: var(--_sizes---rounded-3); color: var(--subtitle); text-decoration: none; font-family: var(--_type-weight---font-family); transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .section-navitem:hover, .section-navitem.is-active { / No hay un gris más claro que --gray-100 en el sistema de color del sitio: se deriva un tinte muy suave a partir de --gray (#1c2f40) en baja opacidad en vez de inventar un hex nuevo. / background-color: rgba(28, 47, 64, 0.03); } .section-navitem:hover { color: var(--gray); } .section-navitem.is-active { color: var(--page-accent, var(--blue)); border-left-color: var(--page-accent, var(--blue)); } .section-nav__num { flex: none; font-size: 12px; font-weight: var(--_type-weight---title-bold); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .section-nav__label { font-size: 12px; font-weight: var(--_type-weight---pharaghrap); letter-spacing: .01em; } / Algunas páginas usan carruseles (.div-slider) que por diseño original son width:100vw con un .slide fijo de 1100px — pensados para "sangrar" más ancho que los 940px, siempre que vivan pegados a (x=0). Aquí .project-content es una celda de grid de ancho fijo (940px), así que 100vw seguiría midiéndose contra el viewport completo y se desbordaría. Con width:100% en cambio ocupa exactamente esos 940px, y el flex + justify-content:center ya existente centra el slide de 1100px sobre esa celda — sangrando 80px parejos a cada lado, dentro del margen que el breakpoint de abajo ya reserva. / .project-layout .project-content .div-slider { width: 100%; } / Umbral: hace falta que el margen lateral (1fr) alcance para el nav pegado al borde (150px) + un respiro antes de que empiece a sangrar el carrusel (10px) + el sangrado del carrusel (80px) = 240px de cada lado → 940 + 2402 = 1420px. Por debajo no cabe sin encimarse, así que se oculta por completo — igual que en mobile, sin reemplazo (sin hamburguesa, sin dropdown). Al volver la grid a "block", .project-content deja de tener ancho/celda propia y .content.w-container recupera su max-width/margin de siempre sin que aquí se le toque nada. / @media (max-width: 1419px) { .project-layout { display: block; } .project-layout .project-content .div-slider { width: 100vw; } .section-nav { display: none; } }