/* base.css: reset e elementos HTML.
   Cubotimize, layout novo (direção "Cubo"). Mobile first; pontos de quebra: 640, 960, 1200 px.
   Regras em kb/02-metodo-novo-layout.md: cores, fontes, espaços e tempos só via var(--…) de tokens.css. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
main section[id], .solucoes__card, .logos__grupo { scroll-margin-top: calc(var(--altura-cabecalho) + var(--e-4)); }

:focus-visible { outline: var(--foco) solid var(--azul); outline-offset: 3px; border-radius: var(--r-p); }
.solucoes__card :focus-visible,
.qlik :focus-visible,
.contato__info :focus-visible,
.rodape :focus-visible,
.sobre__bloco :focus-visible { outline-color: var(--ciano); }

.envoltorio {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pular {
  position: absolute; left: var(--e-4); top: calc(-1 * var(--e-9)); z-index: 100;
  background: var(--tinta); color: var(--branco); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-p); font-weight: 800; text-decoration: none;
}
.pular:focus { top: var(--e-4); }

.icone {
  width: 1.25em; height: 1.25em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}