/* Base: reset, tipografía y accesibilidad */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-xs));
}
html, body { max-width: 100%; overflow-x: clip; }   /* nunca scroll horizontal del body */

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Papel para pastel sobre toda la página: una sola hoja, sin costuras entre secciones.
   Capa fija, sin eventos, bajo la cabecera (50) y la ficha (90+). Muy sutil. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 46; pointer-events: none;
  background: var(--textura-papel) 0 0 / 300px 300px;
}

/* Passe-partout: la página como una lámina. Margen de papel crema de --marco y, en su borde
   interior, una línea de tinta muy tenue. Fijo y sin eventos; la cabecera (50) y la ficha (90+)
   pasan por encima, así el logo rompe el límite y nada queda "encerrado". */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none;
  border: var(--marco) solid var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--color-line-soft);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--space-sm); top: -80px; z-index: 300;
  padding: .6rem 1rem; border: var(--border-ink); border-radius: 999px;
  background: var(--color-yellow); color: var(--color-ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-sm); }

/* Aparición: solo opacidad y 12px */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}