/* Reinicio y base tipográfica */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--f-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--blanco); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--lava-h); text-underline-offset: .18em; }
a:hover { color: var(--lava-b); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
code, kbd, .mono { font-family: var(--f-mono); }
code { font-size: .9em; color: var(--lava-b); }
kbd { display: inline-block; padding: .12em .5em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-s); background: var(--s1); color: var(--blanco); font-size: .82rem; line-height: 1.5; white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: var(--lava); color: #0d0e11; }

:focus-visible { outline: 2px solid var(--lava-b); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lava); color: #0d0e11; padding: .6rem 1rem; border-radius: var(--r-s); font-weight: 700; text-decoration: none; transition: top .15s; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.tenue { color: var(--tx2); }
.peq { font-size: .85rem; }

/* Marcadores de texto pendiente: solo visibles en modo desarrollo (?dev) */
.completar { display: none; }
html.dev .completar { display: inline-block; margin: .1em 0; padding: .1em .5em; border: 1px dashed var(--lava); border-radius: var(--r-s); background: var(--lava-fondo); color: var(--lava-b); font-family: var(--f-mono); font-size: .8rem; line-height: 1.5; }
html.dev body::after { content: "MODO DESARROLLO (?dev)"; position: fixed; right: 8px; bottom: 8px; z-index: 200; padding: .2em .6em; background: var(--lava); color: #0d0e11; font: 700 .7rem var(--f-mono); border-radius: var(--r-s); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Fondo vivo (js/fondo.js): textura estática + flujos; detrás de todo el contenido */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fondo canvas { position: absolute; left: 0; top: 0; max-width: none; transform: translate3d(0, var(--py, 0px), 0); }
@media print { .fondo { display: none; } }