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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 1024px) {
  html { font-size: 106.25%; } /* 17px */
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--grafite);
  font-family: var(--fonte-ui);
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(var(--t-25), 4vw + 1rem, var(--t-39)); }
h2 { font-size: clamp(var(--t-20), 2vw + 1rem, var(--t-31)); }
h3 { font-size: var(--t-20); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--tinta); text-underline-offset: 3px; }

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

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

button { cursor: pointer; }

code, pre, kbd, samp { font-family: var(--fonte-codigo); font-size: 0.92em; }

::selection {
  background: var(--marca-texto);
  color: var(--sobre-marca-texto);
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* Leitura longa: enunciados, textos-base, explicações */
.texto-leitura {
  font-family: var(--fonte-texto);
  font-size: var(--t-16);
  line-height: 1.65;
  max-width: var(--largura-leitura);
}
@media (min-width: 1024px) {
  .texto-leitura { font-size: 1.0625rem; }
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-conteudo {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 100;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-pilula);
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.pular-conteudo:focus-visible { transform: none; }

.carregando-app {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  color: var(--grafite-suave);
}

@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;
  }
}