/* =========================================================================
   PORTAL DO TEA - Base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--fio-forte) var(--papel-2);
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--leitura);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* As superficies que o navegador desenha tambem carregam o design. */
::selection {
  background: var(--selecao);
  color: var(--tinta);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--papel-2); }
::-webkit-scrollbar-thumb {
  background: var(--fio-forte);
  border: 3px solid var(--papel-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

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

input,
textarea { caret-color: var(--rota-tinta); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--placa);
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--rota-tinta); }

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

img { height: auto; background: var(--papel-2); }

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

figure { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

hr {
  border: 0;
  border-top: 1px solid var(--fio);
  margin: var(--e-6) 0;
}

time,
.tabular { font-variant-numeric: tabular-nums; }

/* Utilitarios ------------------------------------------------------------ */

.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 99;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e-3) var(--e-4);
  font-family: var(--placa);
  font-size: var(--t-mini);
  font-weight: 700;
  transition: top var(--rapido) var(--saida);
}

.pular-para-conteudo:focus { top: var(--e-2); color: var(--papel); }