*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* el atributo hidden gana a cualquier display */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  /* Capas cálidas + textura "papel" sutil para dar profundidad */
  background-image:
    radial-gradient(1100px 620px at 50% -8%, rgba(224,164,88,.16), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(199,93,82,.10), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(120,80,50,.018) 1px, transparent 1px);
  background-size: auto, auto, 4px 4px;
  background-attachment: fixed, fixed, scroll;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.18; margin: 0 0 var(--space-3); color: var(--color-ink); }
h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.01em;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -.005em;
}
h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

p  { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
a  { color: var(--color-primary); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-primary-dark); }
img { max-width: 100%; display: block; }
::selection { background: rgba(224,164,88,.35); color: var(--color-ink); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

@media (min-width: 768px) {
  h1 { font-size: var(--font-size-4xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}