/* JMH · Bosque y ciudad · base.css (v3): reset, tipografía y utilidades mínimas. Requiere dist/tokens.css antes. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; transition: background-color var(--t-slow) var(--ease-out), color var(--t-slow) var(--ease-out); }
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; margin: 0 0 var(--sp-4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h1 em, h2 em, h3 em, .display em { font-style: normal; color: var(--leaf-fill); }
[data-mode="noche"] h1 em, [data-mode="noche"] h2 em, [data-mode="noche"] h3 em, [data-mode="noche"] .display em { color: var(--leaf); }
p { margin: 0 0 var(--sp-4); max-width: var(--sp-measure); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--soft); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }
.lbl { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--soft); }
.data, .tnum { font-variant-numeric: tabular-nums; letter-spacing: var(--ls-data); }
a { color: var(--leaf); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }
strong, b { font-weight: 500; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
code, kbd { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2); padding: .1em .4em; border-radius: 4px; }
pre { background: var(--panel); color: var(--panel-ink); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); overflow: auto; font-size: var(--fs-small); line-height: 1.6; }
pre code { background: none; padding: 0; }
blockquote { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); border-left: 2px solid var(--leaf-fill); font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.4; }
blockquote cite { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-style: normal; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--soft); }
ul, ol { padding-left: 1.2em; margin: 0 0 var(--sp-4); }
li + li { margin-top: var(--sp-1); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-data); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 400; color: var(--soft); }
:focus-visible { outline: 2px solid var(--blue-fill); outline-offset: 2px; }
::selection { background: var(--leaf-fill); color: var(--cta-ink); }
.container { width: min(100% - 2 * var(--sp-gutter), var(--sp-container)); margin-inline: auto; }
.grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); z-index: 9999; }
[data-mode="noche"] .grain::after { mix-blend-mode: screen; opacity: .05; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media print { :root { color-scheme: light; } body { background: #fff; color: #17251F; } .grain::after { display: none; } a { color: #1E7A4C; } }