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

html {
  color-scheme: light dark;
  /* font-size: 100% = 16px real de navegador (o el tamaño que el
     usuario tenga configurado). Es el ancla de todo rem del sitio.
     Antes no existía font-size explícito en html/body: el sistema
     no tenía un "cuerpo base" real, y todo el texto de lectura
     partía ya por encima de 16px sin que hubiera un suelo definido
     contra el que medir el resto de la escala. Fijarlo aquí, en
     rem, también es lo que permite al usuario hacer zoom de texto
     del navegador sin que el layout se rompa (WCAG 2.1, resize
     hasta 200%) — con todo en px fijo antes no se cumplía bien. */
  font-size: 100%;
  /* background-color SÓLIDO, no gradiente: WebKit rellena las
     zonas seguras (notch, home indicator) específicamente con el
     background-color del body/html. Un gradiente causaba franja
     NEGRA en ambos extremos (probado y descartado) — vuelve al
     color plano del hero, que sí funciona correctamente para el
     notch. El footer sigue teniendo su propio problema sin
     resolver — ver notas en footer.css, pendiente de otro enfoque. */
  background-color: var(--color-fondo-hero);
}

body {
  font-family: var(--font-marca);
  font-weight: 400;
  font-size: var(--texto-base);
  color: var(--color-texto-principal);
  background-color: var(--color-fondo-hero);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

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

a {
  color: var(--color-wordmark);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-naranja);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
}

:focus-visible {
  outline: 2px solid var(--color-naranja);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !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;
}