/* Rodape sempre no fim, mesmo com pouco conteudo */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .pagina { flex: 1 0 auto; width: 100%; }

/* Topbar fixa com efeito vidro: logo + navegacao. Site publico, sem sidebar. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-vidro);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.topbar-inner {
  max-width: var(--largura);
  margin: 0 auto;
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.marca { flex-shrink: 0; display: inline-flex; align-items: center; }
.marca img { height: 44px; width: auto; transition: opacity .2s; }
.marca:hover img { opacity: .9; }

.nav { display: flex; align-items: center; gap: var(--sp-2); }

.nav-item {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid transparent;
  transition: var(--transicao);
}
.nav-item:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.nav-item.ativo {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
  border-color: rgba(255, 152, 0, 0.28);
}

.btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  transition: var(--transicao);
}
.btn-menu:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Conteudo: a pagina e dona do espaco entre blocos */
.pagina {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 48px var(--sp-5) 80px;
  min-width: 0;
}
.pagina > * { min-width: 0; }
.pagina-home { gap: 80px; padding-top: 56px; }

.rodape { border-top: 1px solid var(--border); background: var(--bg-elev); margin-top: auto; }

.rodape-inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 40px var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.rodape-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  transition: var(--transicao);
}
.rodape-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 4px 16px var(--accent-sombra);
  transform: translateY(-1px);
}
.rodape-marca { display: flex; flex-direction: column; gap: 4px; }
.rodape-marca strong { color: var(--text); font-family: var(--font-titulo); font-size: var(--fs-lg); letter-spacing: -.01em; }
.rodape-marca span { font-size: var(--fs-sm); color: var(--text-dim); }
.rodape-marca small { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-dim); opacity: .75; }

.pular-conteudo {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--texto-sobre-accent);
  font-weight: 600;
  border-radius: var(--raio-sm);
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.pular-conteudo:focus { transform: translateY(0); }
.pular-conteudo:hover { color: var(--texto-sobre-accent); }

@media (max-width: 880px) {
  .btn-menu { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  }
  .nav.aberto { display: flex; }
  .nav-item { min-height: 44px; font-size: var(--fs-base); border-radius: var(--raio-sm); padding: 10px 16px; }
  .pagina { padding: 36px var(--sp-4) 56px; gap: 44px; }
  .pagina-home { gap: 56px; }
}

@media (max-width: 720px) {
  .topbar-inner { padding: 0 var(--sp-4); }
  .rodape-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

@media (max-width: 520px) {
  :root { --topbar-h: 68px; }
  .marca img { height: 36px; }
  .pagina { padding-right: var(--sp-4); padding-left: var(--sp-4); }
}