/*
  base.css
  Reset mínimo + estilos por defecto de elementos HTML desnudos.
  Nada específico de un componente o sección vive aquí.
*/

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Foco de teclado visible en toda la página: nunca se elimina el outline,
   solo se restiliza para que combine con la paleta. */
:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}

::selection {
  background: var(--brand-green);
  color: var(--text-on-green);
}

/* Visible para lectores de pantalla, invisible en pantalla. Para
   etiquetas de formulario que ya son evidentes por contexto visual
   (como el ícono de lupa del buscador) pero que igual necesitan
   texto real para quien usa lector de pantalla. */
.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;
}

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