@import "/design-system/tokens.css";

/* Reset básico */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Compensa la altura del header sticky (4.5rem = 72px, el mismo valor
   que .site-header__inner) para que las secciones no queden tapadas
   al llegar por un ancla */

#bot,
#como-funciona,
#faq {
  scroll-margin-top: 72px;
}

body {
  font-family: var(--ds-font-sans);
  background-color: var(--ds-background);
  color: var(--ds-foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

/* Respeta preferencia de movimiento reducido del sistema, tal y como pide la guía de diseño */

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

/* Respeta la preferencia de movimiento reducido: scroll instantáneo
   en vez de animado */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}