/* ===== Tokens ===== */
:root {
  --acento: #2563eb;
  --acento-forte: #1d4ed8;
  --sobre-acento: #fff;
  --halo: rgba(37, 99, 235, 0.1);
  --fundo: #f7f8fb;
  --superficie: #fff;
  --topo-bg: rgba(247, 248, 251, 0.85);
  --texto: #0f172a;
  --suave: #475569;
  --borda: #e2e8f0;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #60a5fa;
    --acento-forte: #93c5fd;
    --sobre-acento: #0b1120;
    --halo: rgba(96, 165, 250, 0.14);
    --fundo: #0b1120;
    --superficie: #111a2e;
    --topo-bg: rgba(11, 17, 32, 0.85);
    --texto: #e5e7eb;
    --suave: #94a3b8;
    --borda: #1e293b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--acento); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pular {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  padding: 10px 14px; border-radius: 8px;
  background: var(--acento); color: var(--sobre-acento); text-decoration: none; font-weight: 600;
}
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* ===== Topo ===== */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--topo-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topo__in { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.marca { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--texto); text-decoration: none; }
.topo__links { display: flex; gap: 20px; }
.topo__links a { font-size: 14px; font-weight: 600; color: var(--suave); text-decoration: none; transition: color 0.2s ease; }
.topo__links a:hover { color: var(--acento); }

/* ===== Hero ===== */
.hero {
  padding: clamp(40px, 8vw, 88px) 0 clamp(28px, 5vw, 48px);
  background: radial-gradient(60% 120% at 50% 0%, var(--halo), transparent 70%);
  text-align: center;
}
.eyebrow {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acento);
}
.hero h1 {
  margin: 0 auto 16px; max-width: 760px;
  font-size: clamp(28px, 4.8vw, 46px); line-height: 1.12; letter-spacing: -0.02em;
}
.hero h1 span { color: var(--acento); }
.lead { margin: 0 auto; max-width: 560px; font-size: clamp(16px, 1.7vw, 19px); color: var(--suave); }

/* ===== Controles ===== */
.conteudo { padding-bottom: 64px; }
.controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--suave); background: var(--superficie); border: 1px solid var(--borda);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filtros button:hover { border-color: var(--acento); color: var(--acento); }
.filtros button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.busca input {
  width: 100%; min-width: 220px; padding: 10px 14px;
  font: inherit; font-size: 14px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px;
}
.busca input::placeholder { color: var(--suave); }
.contador { margin: 8px 0 20px; font-size: 14px; color: var(--suave); }

/* ===== Cards ===== */
.grade {
  display: grid; gap: 20px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.card__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag {
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--acento-forte); background: var(--halo);
}
.ano { font-size: 13px; font-weight: 600; color: var(--suave); }
.card__titulo { margin: 4px 0 0; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.card__evento { margin: 0; font-size: 13px; font-weight: 600; color: var(--acento); }
.card__desc { flex: 1; margin: 0; font-size: 14px; color: var(--suave); }
.card__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.meta { font-size: 12px; font-weight: 600; color: var(--suave); }
.acoes { display: flex; gap: 8px; }

.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--sobre-acento); background: var(--acento); border: 2px solid var(--acento);
}
.btn--sec { color: var(--acento); background: transparent; }

.vazio {
  grid-column: 1 / -1; padding: 40px 20px; text-align: center;
  color: var(--suave); border: 1px dashed var(--borda); border-radius: var(--raio);
}

/* ===== Rodapé ===== */
.rodape { border-top: 1px solid var(--borda); padding: 24px 0; font-size: 14px; color: var(--suave); }
.rodape__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.rodape p { margin: 0; }

/* ===== Movimento (respeita "reduzir movimento") ===== */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: subir 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 45ms);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .card:hover { transform: translateY(-3px); border-color: var(--acento); }
  .btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
  @keyframes subir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 560px) {
  .topo__links { gap: 14px; }
  .busca, .busca input { width: 100%; }
  .acoes { width: 100%; }
  .acoes .btn { flex: 1; text-align: center; }
}