/* ---------------------------------------------------------------------------
   Botão flutuante de WhatsApp

   O número aparecia na tarja do topo, no rodapé e na página da peça, e sumia
   todo para quem rolou a página no celular — que é onde este público está. Este
   botão é o único caminho que acompanha a rolagem.

   Verde do WhatsApp, e não carvão: o botão é reconhecido antes de ser lido, e a
   cor faz parte desse reconhecimento tanto quanto o símbolo. É a única cor do
   site que vem de fora da paleta, e vem porque não é decoração — é sinalização.

   O anel fino de carvão a 12% existe porque o verde sobre areia dá 1,9:1, abaixo
   dos 3:1 que a WCAG pede para a borda de um componente. Sem ele o botão flutua
   sem contorno sobre o fundo claro. O símbolo branco sobre o verde fica pela
   exceção de logotipo da própria norma: é a marca do WhatsApp, e alterá-la para
   ganhar contraste tiraria justamente o que faz o botão ser reconhecido.
   --------------------------------------------------------------------------- */

.magsil-fab {
	position: fixed;
	z-index: 90;
	inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
	inset-inline-end: 1.25rem;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #25D366;
	color: #FFFFFF;
	box-shadow: 0 0 0 1px rgb(34 29 25 / 12%), var(--wp--preset--shadow--elevado);
	transition: background-color 180ms ease, transform 180ms ease;
}

.magsil-fab__icone {
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

.magsil-fab:hover,
.magsil-fab:focus-visible {
	background-color: #1DA851;
}

@media (prefers-reduced-motion: no-preference) {
	.magsil-fab:hover {
		transform: translateY(-2px);
	}
}