/* Reduto360 Apuração 2026 · Design system · 2/4 · BASE
   Reset, tipografia, camadas do fundo, foco, revelação ao rolar e movimento reduzido. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + var(--e-4));
  scrollbar-color: #2b3d5f var(--c-bg-0);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-bg-0);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-bg-0);
  color: var(--c-tx-1);
  font: var(--p-regular) var(--t-corpo) / 1.6 var(--f-ui);
  letter-spacing: .003em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;   /* nunca rola de lado; "clip" não cria contexto de rolagem (hidden é o reserva) */
  accent-color: var(--c-acento-500);
}
body.travado { overflow: hidden; }   /* folha ou menu abertos */
@media (max-width: 899px) { body { padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); } html { scroll-padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); } }   /* a barra fixa nunca cobre o fim da página */

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sentinela { position: absolute; top: 12px; left: 0; width: 1px; height: 1px; pointer-events: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: rgba(86, 222, 146, .32); color: #fff; }
b, strong { font-weight: var(--p-semi); }

/* ---- tipografia */
.h1, .h2, .h3 { font-family: var(--f-ui); text-wrap: balance; }
.h1 { font-size: var(--t-h1); font-weight: var(--p-forte); line-height: 1.02; letter-spacing: -.038em; }
.h2 { font-size: var(--t-h2); font-weight: var(--p-forte); line-height: 1.06; letter-spacing: -.034em; }
.h3 { font-size: var(--t-h3); font-weight: var(--p-semi); line-height: 1.2; letter-spacing: -.018em; }
.lide { font-size: var(--t-lide); line-height: 1.55; color: var(--c-tx-2); text-wrap: pretty; max-width: 40rem; }
.legenda { font-size: var(--t-legenda); color: var(--c-tx-3); line-height: 1.45; }
.dado, .num { font-family: var(--f-dado); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; }
.num { font-family: var(--f-ui); font-feature-settings: "tnum" 1; }

/* ---- layout */
.cx { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.pagina { position: relative; z-index: var(--z-pagina); }
.secao { padding-block: var(--secao-y); position: relative; }
.secao__cab { display: grid; gap: var(--e-4); margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); max-width: 46rem; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }

.pular {
  position: fixed; left: var(--e-3); top: -4rem; z-index: 200;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-1);
  background: var(--c-acento-400); color: var(--c-sobre-acento); font-weight: var(--p-forte);
  transition: top var(--d-2) var(--ease-saida);
}
.pular:focus { top: var(--e-3); }

/* ---- foco visível em tudo que se opera */
:focus-visible { outline: 2px solid var(--c-acento-400); outline-offset: 3px; border-radius: var(--r-1); }
:focus:not(:focus-visible) { outline: none; }

/* ---- fundo em camadas: grade, dois brilhos que derivam devagar e um fio de dados ligado ao scroll */
.fundo { position: fixed; inset: 0; z-index: var(--z-fundo); pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, #0c1a33 0%, transparent 60%),
    linear-gradient(180deg, var(--c-bg-1), var(--c-bg-0) 70%); }
.fundo__grade { position: absolute; inset: -1px; opacity: .55;
  background-image:
    linear-gradient(var(--c-linha-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-linha-1) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 55% at 50% 12%, #000 10%, transparent 100%);
  mask-image: radial-gradient(75% 55% at 50% 12%, #000 10%, transparent 100%); }
.fundo__brilho { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; }
.fundo__brilho--a { left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(47, 200, 117, .26), transparent); animation: deriva-a 38s var(--ease-vai-volta) infinite alternate; }
.fundo__brilho--b { right: -22vmax; top: 8vmax; background: radial-gradient(closest-side, rgba(74, 139, 242, .24), transparent); animation: deriva-b 46s var(--ease-vai-volta) infinite alternate; }
@keyframes deriva-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
@keyframes deriva-b { to { transform: translate3d(-12vmax, 14vmax, 0) scale(.94); } }

.trilha { position: fixed; top: 0; bottom: 0; left: max(.5rem, calc((100vw - var(--largura)) / 2 - 1.75rem)); width: 2px; z-index: var(--z-fundo); pointer-events: none; display: none; }
.trilha__fio { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--c-linha-2) 12%, var(--c-linha-2) 88%, transparent); }
.trilha__cabeca { position: absolute; left: -1px; top: 0; width: 4px; height: 7rem; border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--c-acento-400));
  box-shadow: 0 0 18px 2px rgba(86, 222, 146, .35); }
@supports (animation-timeline: scroll()) {
  @media (min-width: 1024px) { .trilha { display: block; } }
  .trilha__cabeca { animation: segue-scroll linear both; animation-timeline: scroll(root); }
  @keyframes segue-scroll { from { transform: translateY(-2rem); } to { transform: translateY(calc(100dvh - 5rem)); } }
}

/* ---- revelação ao rolar: só existe com JavaScript e parte de um estado visível quando o JS não chega */
.js [data-rv]:not(.visto) { opacity: 0; transform: translateY(.75rem); }
.js [data-rv] { transition: opacity var(--d-4) var(--ease-saida) var(--rv-atraso, 0ms), transform var(--d-4) var(--ease-saida) var(--rv-atraso, 0ms), filter var(--d-4) var(--ease-saida) var(--rv-atraso, 0ms); }
@media (min-width: 1024px) { .js [data-rv]:not(.visto) { filter: blur(4px); } }   /* desfoque -> nítido só no desktop: no celular custa GPU e bateria */

/* ---- esqueleto de carregamento */
.esqueleto { position: relative; overflow: hidden; background: var(--c-surf-2); border-radius: var(--r-1); }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: brilho-esqueleto 1.3s var(--ease-vai-volta) infinite; }
@keyframes brilho-esqueleto { to { transform: translateX(100%); } }

@keyframes entra { from { opacity: 0; transform: translateY(.75rem); } }

/* ---- movimento reduzido: menos, não nenhum. Somem o laço, o deslocamento e o desfoque; ficam os fades curtos que explicam a mudança. */
@keyframes entra-suave { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fundo__brilho, .esqueleto::after { animation: none; }
  .trilha__cabeca { display: none; }
  .js [data-rv]:not(.visto) { transform: none; filter: none; }
  .js [data-rv] { transition: opacity var(--d-3) ease var(--rv-atraso, 0ms); }
}

@media print {
  .fundo, .trilha, .topo, .barra-cta, .folha, .menu-movel { display: none !important; }
  .js [data-rv]:not(.visto) { opacity: 1; transform: none; filter: none; }
  body { background: #fff; color: #000; }
}