/* Botó flotant per tornar a dalt: apareix en baixar una mica la pàgina */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90; /* per sota de la navbar, el lightbox i el bàner de galetes */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--color-green-900);
	color: var(--color-tan-light);
	box-shadow: 0 8px 24px rgba(32, 37, 31, 0.25);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

/* El JS treu [hidden] en carregar; sense JS el botó no surt */
.back-to-top[hidden] {
	display: none !important;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.back-to-top:hover {
	background-color: var(--color-green-800);
}

.back-to-top:focus-visible {
	outline: 2px solid var(--color-tan-light);
	outline-offset: 3px;
}

.back-to-top svg {
	width: 22px;
	height: 22px;
}

/* On hi ha el badge de reCAPTCHA (Contacte), el botó puja per sobre: el badge fa 60px i
   Google el posa a 14px de baix, més 12px d'aire. També en mòbil (aquesta regla pesa més) */
body:has(.grecaptcha-badge) .back-to-top {
	bottom: 86px;
}

@media (max-width: 700px) {
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
	}
}