/* ========================================================================= ESTAVILLO — REstimator Design System: capa propia ------------------------------------------------------------------------- ÚNICO archivo de este directorio escrito a mano: tokens.css y doc.css los genera tools/build-ds.mjs y se sobrescriben en cada build. Acá va sólo lo que la integración necesita y el Design System no trae: 1. blindaje contra el CSS global de Kadence y de .es-page dentro de .re-doc; 2. la barra mínima de salida (fallback cuando el header está apagado); 3. el estilo de las previews de pantalla (que dejaron de ser iframes); 4. los arreglos de overflow horizontal en mobile; 5. el offset del rail sticky cuando el header institucional está activo; 6. el ensanchado del contenedor en pantallas grandes; 7. el bloque "System evolution" que cierra el documento. NO se rediseña nada del Design System: no se tocan colores, tipografía, espaciado, jerarquía ni el rail. ========================================================================= */ /* ------------------------------------------------------------------------- 0. Página ------------------------------------------------------------------------- */ /* scroll-behavior vive en el elemento que scrollea de verdad (), no en el wrapper. Es lo que hace que los anchors del rail se deslicen en vez de saltar. Mismo criterio de :has() ya usado en pages-home.css. */ html:has(> body.es-ds-page) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(> body.es-ds-page) { scroll-behavior: auto; } } /* ------------------------------------------------------------------------- GEOMETRÍA DE LA PÁGINA ------------------------------------------------------------------------- Un solo juego de números para las CUATRO franjas de esta página: el header institucional, la navegación mínima, el documento y el footer. Antes cada una traía su propia grilla —el chrome del portfolio centrado a 1140px, el documento pegado a la izquierda con un rail de 264px— y la página se leía como dos sitios pegados: la marca ESTAVILLO arrancaba en un sitio y el rail de REstimator en otro, sin ninguna alineación en común. Los valores NO son nuevos: son los que el Design System ya usa. --es-ds-rail 264px = .doc { grid-template-columns: 264px … } --es-ds-rail-pad 22px = .rail (12px) + .rail-brand (10px), o sea la x donde empieza el texto de la marca del rail --es-ds-gutter 40px = --re-s8, el padding lateral de .pad y de .hero --es-ds-content = el max-width de .pad Con esto, la marca del header cae exactamente sobre la marca del rail, y la navegación y el footer terminan exactamente donde termina el contenido. */ body.es-ds-page { margin: 0; background: var(--re-bg); --es-ds-rail: 264px; --es-ds-rail-pad: 22px; --es-ds-gutter: 40px; --es-ds-content: 1180px; --es-ds-topbar-h: 48px; } /* Aprovechamiento de pantallas grandes. Medido antes de tocar nada: `.pad{max-width:1180px}` es un tope fijo y sin margin:auto, así que a 1600px quedaban 156px muertos a la derecha y a 1920px quedaban 476px, con todo el documento pegado a la izquierda. La legibilidad del texto NO depende de este contenedor: el propio Design System ya acota la prosa por su cuenta (`p.body{max-width:78ch}`, `.lede{max-width:76ch}`), independientemente de lo ancho que sea el padre. Por eso alcanza con ensanchar el contenedor: los párrafos siguen igual de angostos y son las grillas, las tarjetas, las tablas, las demos de componentes y las Screen Examples —todas fluidas, sin tope propio— las que se llevan el ancho extra. La fórmula es fluida y no por saltos, y está construida para no poder empeorar nada: max() — nunca por debajo del ancho de hoy, así ningún viewport queda más angosto que antes; calc() — reserva el rail (264px) y deja ~100px de margen a la derecha; min() — tope duro, para que en un monitor muy ancho las tablas y las grillas no se estiren sin límite. Vive en la variable y no en `.pad`, así el header, el footer y la barra mínima se ensanchan con el documento en vez de quedarse atrás. */ @media (min-width: 1500px) { body.es-ds-page { --es-ds-content: max(1180px, min(1720px, calc(100vw - 364px))); } } .re-doc .pad { max-width: var(--es-ds-content); } /* El hero no tiene el padding de .pad, así que su contenido se acota al mismo ancho MENOS ese padding: los dos terminan alineados al mismo ancho de texto. */ .re-doc .hero .in { max-width: calc(var(--es-ds-content) - 2 * var(--es-ds-gutter)); } /* ------------------------------------------------------------------------- 1. Blindaje contra Kadence y contra .es-page ------------------------------------------------------------------------- Esta página imprime wp_head(), así que el CSS global del tema padre se carga igual aunque no se use ninguno de sus componentes. Kadence estila elementos genéricos por nombre —y en particular pinta