/* Menu flutuante: acompanha a rolagem, com degradê oliva/preto → transparente. */
body { overflow-x: clip; } /* "hidden" no body impedia o menu de acompanhar a página */
html { scroll-padding-top: calc(var(--topo-h, 72px) + 12px); }

.bosque-topo {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: linear-gradient(180deg,
		rgba(8, 11, 4, .85) 0%,
		rgba(28, 36, 13, .6) 55%,
		rgba(40, 50, 18, .2) 82%,
		rgba(40, 50, 18, 0) 100%);
	border-bottom: 0;
	backdrop-filter: none; -webkit-backdrop-filter: none;
	transition: background .4s ease;
}
.bosque-topo__inner { padding-bottom: 26px; }

/* depois de rolar, o degradê fica um pouco mais denso para o texto seguir legível */
.bosque-topo.is-rolado {
	background: linear-gradient(180deg,
		rgba(6, 9, 3, .96) 0%,
		rgba(22, 30, 10, .9) 62%,
		rgba(34, 44, 15, .45) 84%,
		rgba(34, 44, 15, 0) 100%);
}

.admin-bar .bosque-topo { top: 32px; }
@media (max-width: 782px) { .admin-bar .bosque-topo { top: 46px; } }

/* o hero ocupa a tela toda, por baixo do menu; nas outras páginas o conteúdo desce */
@media (min-width: 901px) { .home .px-hero { height: 100vh; height: 100svh; } }
body:not(.home) .bosque-conteudo { padding-top: var(--topo-h, 72px); }

/* nome no menu: Leonor | 1 ano */
.bosque-marca__nome { display: inline-flex; align-items: baseline; gap: .45em; white-space: nowrap; }
.bosque-marca__sep { opacity: .55; font-size: .9em; }
.bosque-marca__idade { font-size: .82em; }

@media (max-width: 720px) {
	.bosque-topo__inner { padding-bottom: 18px; }
	.bosque-marca__nome { overflow: visible; }
}

@media (max-width: 720px) {
	/* no celular o menu tem duas linhas: o degradê fica denso até os botões e só esmaece no fim */
	.bosque-topo.is-rolado {
		background: linear-gradient(180deg,
			rgba(6, 9, 3, .97) 0%,
			rgba(20, 28, 10, .93) 80%,
			rgba(34, 44, 15, 0) 100%);
	}
}