/* Reset, tipografia, utilitários e estados da campanha */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.7;
  font-feature-settings: "lnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brand); text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--gold); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--text-strong); line-height: 1.05; font-weight: 700; letter-spacing: -.015em; }
.h2 { font-size: var(--fs-2xl); font-weight: 700; }
.h3 { font-size: var(--fs-xl); font-weight: 700; }
.h4 { font-size: 1.7rem; font-family: var(--font-serif); }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 62ch; margin-top: var(--space-4); }
.caption { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: var(--space-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gold);
  margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(780px, 100% - 2 * var(--gutter)); }
.section { padding-block: var(--space-9); position: relative; }
.section__head { max-width: 760px; margin-bottom: var(--space-7); }
.section__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.section__head--row > div { max-width: 760px; }

.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.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; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: .7rem 1rem; border-radius: var(--r-sm); transition: top var(--t-fast); }
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }

/* Estados da campanha: pre → lancado → fechado → vencedores */
body[data-state="pre"] [data-show]:not([data-show~="pre"]),
body[data-state="lancado"] [data-show]:not([data-show~="lancado"]),
body[data-state="fechado"] [data-show]:not([data-show~="fechado"]),
body[data-state="vencedores"] [data-show]:not([data-show~="vencedores"]) { display: none !important; }

[hidden] { display: none !important; }

/* Barra de progresso de leitura */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--gold-bright)); }

/* Grão subtil sobre o fundo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Títulos de cartões e blocos: sem-serifa, mais legíveis em corpos pequenos. A serifa fica nos títulos grandes. */
h3, h4, .h3, .h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }
.h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); }
.h4 { font-size: 1.25rem; }