/* Tema Balão — branco, fiel ao kit: balão 20789 em destaque, padrão de zeros ao fundo */
:root {
  --page: #ffffff;
  --bar: var(--marinho);
  --ballot-shadow: var(--azul);
  --ballot-head: var(--azul);
}

.hero {
  background: #ffffff url("img/padrao-zeros.webp") repeat 0 0 / 109px 76px;
  overflow: hidden;
}
.hero > .wrap { padding-block: 32px 56px; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 32px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.eyebrow {
  display: inline-block; font: 700 15px/18px var(--font-cond); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-full); background: var(--marinho); color: #ffffff;
}
.hero h1 {
  margin: 0; font: 400 clamp(46px, 8vw, 84px)/.95 var(--font-display); text-transform: uppercase;
  color: var(--marinho); letter-spacing: .005em;
}
.hero h1 em { font-style: normal; color: var(--azul); }
.hero-intro {
  margin: 0; max-width: 40ch; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--ink);
  background: #ffffffe6; padding: 4px 8px 4px 0; border-radius: 4px;
}
.hero-intro strong { font-weight: 700; color: var(--marinho); }

.hero-art { position: relative; width: 380px; margin-left: 44px; }
.hero-num { width: 100%; height: auto; filter: drop-shadow(0 10px 18px #00314a26); }
.hero-disc {
  position: absolute; left: -44px; bottom: -8px; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  border: 4px solid #ffffff; box-shadow: 0 0 0 3px var(--amarelo), 0 8px 20px #00314a33; background: var(--surface-alt);
}
.hero-disc img { width: 100%; height: 100%; object-fit: cover; }

.aside-slogan { width: 82%; height: auto; margin: 4px auto 0; }

@media (max-width: 900px) {
  .hero-art { width: 300px; }
  .aside-slogan { width: 260px; }
}
@media (max-width: 720px) {
  .hero > .wrap { padding-block: 20px 40px; }
  .hero-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
  .hero-art { width: min(300px, 86%); justify-self: center; order: -1; margin: 4px 0 0 20px; }
  .hero-disc { width: 76px; height: 76px; left: -20px; bottom: -6px; }
  .hero-intro { font-size: 16px; line-height: 23px; }
}