/* layout.css Primitivas de layout reutilizables: contenedor, ritmo entre secciones, utilidades de grilla. Sin color ni tipografía específica de componente. */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { /* Fondo opaco propio, no solo el de : en el inicio hay un fondo fijo de página (ver .site-fixed-bg en sections/hero.css) que solo debe verse detrás del hero. Cada sección siguiente necesita taparlo explícitamente al pasar por encima con el scroll. En el resto de las páginas es un no-op (mismo color que ya mostraba ). */ background: var(--ink-900); padding-block: var(--space-9); border-top: var(--border-hairline); } .section:first-of-type { border-top: none; } .section__head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 38rem; margin-bottom: var(--space-7); } .section__title { font-size: var(--size-display-md); } .section__lead { color: var(--text-secondary); font-size: var(--size-body-lg); max-width: 34rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } @media (max-width: 68rem) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); } } @media (max-width: 48rem) { :root { --container-pad: var(--space-4); } .section { padding-block: var(--space-7); } .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-4 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); } }