/* ─────────────────────────────────────────────────────────────
   METRIQ · base
   Reset mínimo, tipografia de corpo, foco e motion global.
   Só elementos nus e utilitários .mq-*: nada aqui pode vazar
   para as telas legadas que ainda usam site.css.
   ───────────────────────────────────────────────────────────── */

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--mq-bg);
  color: var(--mq-tx);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--mq-step-2);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Todo número do produto alinha por padrão. Dinheiro, ROI,
     contagem e percentual vivem em colunas: sem tabular-nums as
     casas dançam de linha para linha. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

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

/* ── foco ──────────────────────────────────────────────────────
   :focus-visible apenas — nunca :focus, nunca removido.
   Violeta aqui não fere o princípio P1: foco É seleção.        */
:focus-visible {
  outline: 2px solid var(--mq-violet);
  outline-offset: 3px;
  border-radius: var(--mq-r-xs);
}

/* ── utilitários ─────────────────────────────────────────────── */
.mq-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mq-spacer { flex: 1; }
.mq-muted { color: var(--mq-tx-2); }
.mq-faint { color: var(--mq-tx-3); }

/* Acessível a leitor de tela, invisível na tela. Usado para dar
   nome a região cujo rótulo visual é gráfico. */
.mq-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── transição de tema ─────────────────────────────────────────
   Classe aplicada pelo JS apenas durante a troca manual, e
   removida logo depois. Não fica ligada em regime permanente:
   transição global custa caro em página com tabela densa.      */
html.mq-theme-anim, html.mq-theme-anim * {
  transition:
    background-color var(--mq-t-4) var(--mq-ease),
    color            var(--mq-t-4) var(--mq-ease),
    border-color     var(--mq-t-4) var(--mq-ease),
    fill             var(--mq-t-4) var(--mq-ease),
    stroke           var(--mq-t-4) var(--mq-ease),
    box-shadow       var(--mq-t-4) var(--mq-ease) !important;
}

/* ── reveal na carga ─────────────────────────────────────────── */
.mq-reveal { opacity: 0; transform: translateY(10px); }
html.mq-ready .mq-reveal {
  opacity: 1;
  transform: none;
  transition: opacity var(--mq-t-5) var(--mq-ease),
              transform var(--mq-t-5) var(--mq-ease);
}

/* ── prefers-reduced-motion ────────────────────────────────────
   Contrato E: zera animação e transição e entrega o reveal já
   visível. Sem o segundo bloco, quem pede menos movimento veria
   a página em branco — o reveal nunca dispararia.              */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mq-reveal { opacity: 1 !important; transform: none !important; }
}