/* Lumbre Pura — Typography Fraunces (display, opsz variable) y Inter (body) vía Google Fonts. Las fonts se cargan con en cada (no @import) para evitar serialización. Cuando se licencie Recoleta / Canela / Söhne, swap por @font-face acá. */ html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (min-width: 768px) { html { font-size: 18px; } } body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-base); color: var(--color-fg); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--color-fg); font-optical-sizing: auto; } h1 { font-size: var(--fs-display); } h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); } h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); } h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } @media (min-width: 768px) { h1 { font-size: calc(var(--fs-display) * 1.15); } h2 { font-size: var(--fs-3xl); } } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-walnut); display: inline-block; } .lead { font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--color-fg); max-width: 50ch; } p { max-width: 65ch; } p + p { margin-top: var(--space-4); } small, .text-sm { font-size: var(--fs-sm); } .text-muted { color: var(--color-fg-muted); } .text-accent { color: var(--color-walnut); } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } /* Reglas tipográficas que respiran Lumbre Pura: cero adjetivos huecos */ strong, b { font-weight: var(--fw-semibold); } em, i { font-style: italic; } ul, ol { padding-left: 1.25em; } li + li { margin-top: var(--space-2); } a { color: var(--color-walnut); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-bronze); } a:focus-visible { outline: 2px solid var(--color-walnut); outline-offset: 3px; border-radius: var(--radius-sm); }