*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; scroll-behavior: smooth; }

body {
  min-width: 20rem;
  margin: 0;
  background: var(--color-lienzo);
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  line-height: 1.6;
}

body.menu-abierto { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; }

:focus-visible { outline: var(--borde-foco); outline-offset: 3px; }

.texto-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.enlace-saltar {
  position: fixed;
  z-index: 1000;
  top: var(--espacio-3);
  left: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-oro-champagne);
  color: var(--color-carbon-profundo);
  font-weight: 700;
  transform: translateY(-150%);
}

.enlace-saltar:focus { transform: translateY(0); }

.lienzo-particulas { position: fixed; z-index: 10; inset: 0; width: 100%; height: 100dvh; pointer-events: none; }

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