/* base.css — reset y elementos base. Nada de componentes aquí. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los anclajes (#formulario) quedan bajo el encabezado pegajoso si no se reserva su alto */
  scroll-padding-top: var(--encabezado-alto-compacto);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--kv-lino);
  color: var(--kv-tinta);
  font-family: var(--fuente-sans);
  font-size: var(--txt-base);
  line-height: var(--interlineado-cuerpo);
  /* clip y no hidden: hidden rompería position: sticky del encabezado */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fuente-serif);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--interlineado-titular);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--kv-lavanda-profunda); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--kv-tinta); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
dialog { margin: auto; padding: 0; border: 0; background: none; color: inherit; }

/* Foco: nunca outline: none sin reemplazo. El reemplazo es el anillo de tokens. */
:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
  border-radius: var(--radio-sm);
}

/* Oculta visualmente pero deja el elemento para lectores de pantalla */
.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Enlace de salto al contenido: aparece sólo con foco de teclado */
.salto {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--kv-nube);
  border-radius: var(--radio-sm);
  transform: translateY(-200%);
}
.salto:focus-visible { transform: none; }