:root {
  --fundo: #f5f8f6;
  --papel: #ffffff;
  --marinho: #0b132b;
  --marinho-2: #070e20;
  --texto: #0b132b;
  --muted: #46536a;
  --borda: #dde5e0;
  --verde: #59ba7d;
  --verde-claro: #e3f4e9;
  --verde-escuro: #237347;
  --ciano: #3fd0c4;
  --raio: 14px;
  --raio-pequeno: 8px;
  --sombra: 0 1px 2px rgba(11, 19, 43, .06), 0 12px 32px -12px rgba(11, 19, 43, .18);
  --fonte-titulo: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --fonte-texto: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --largura: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.08; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
a, button, summary, input, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(89, 186, 125, .2); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; border-radius: 4px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--marinho); color: #fff; padding: 10px 16px; border-radius: var(--raio-pequeno);
}
.pular:focus { top: 12px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  background: var(--verde); color: var(--marinho);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 2px solid var(--verde); border-radius: 999px;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.botao:hover { background: #4aa96d; border-color: #4aa96d; }
.botao:active { transform: translateY(1px); }
.botao--fantasma { background: transparent; border-color: var(--marinho); }
.botao--fantasma:hover { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.botao--pequeno { min-height: 40px; padding: 0 18px; font-size: .9375rem; }

/* Barra superior */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 248, 246, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo__inner {
  max-width: var(--largura); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 32px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em;
}
.marca img { width: 34px; height: auto; }
.topo__nav { display: flex; gap: 24px; margin-left: auto; }
.topo__nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--muted); }
.topo__nav a:hover { color: var(--texto); }

/* Topo da página */
.heroi { padding: 56px 24px 48px; }
.heroi__inner { max-width: var(--largura); margin: 0 auto; }
.heroi__selo {
  display: inline-block; font-weight: 600; font-size: .9375rem; color: var(--verde-escuro);
  background: var(--verde-claro); padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
}
.heroi__titulo {
  font-size: clamp(2.4rem, 5.2vw, 4.75rem);
  font-weight: 800; letter-spacing: -0.035em;
}
.heroi__titulo span { display: block; color: var(--verde-escuro); }
.heroi__texto { margin-top: 24px; max-width: 58ch; font-size: 1.1875rem; color: var(--muted); }
.heroi__acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.heroi__provas {
  margin: 32px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 500; font-size: .9375rem;
}
.heroi__provas li { display: flex; align-items: center; gap: 8px; }
.heroi__provas li::before {
  content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b132b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Faixa escura onde o painel fica */
.mesa {
  position: relative;
  padding: 0 16px 72px;
  background:
    linear-gradient(var(--fundo) 0 120px, transparent 120px),
    radial-gradient(circle at 1px 1px, rgba(89, 186, 125, .22) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--marinho);
}
.mesa__inner { max-width: 1280px; margin: 0 auto; }
.mesa__legenda { margin-top: 20px; text-align: center; color: #c9d4e5; font-size: .9375rem; }

@media (max-width: 860px) {
  .topo__nav { display: none; }
  .topo__inner { justify-content: space-between; padding: 10px 16px; }
  .heroi { padding: 48px 16px 40px; }
  .heroi__texto { font-size: 1.0625rem; }
  .mesa { background:
    linear-gradient(var(--fundo) 0 64px, transparent 64px),
    radial-gradient(circle at 1px 1px, rgba(89, 186, 125, .22) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--marinho); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}