/* ==========================================================================
   BOTAO FLUTUANTE DE WHATSAPP
   Fixo no canto inferior direito, acompanhando a rolagem.
   Aparece depois que o visitante rola um pouco, para nao competir com o
   hero na primeira tela (o JS adiciona .esta-visivel).
   ========================================================================== */

.whatsapp-flutuante {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2rem);
	bottom: clamp(1rem, 2.5vw, 2rem);
	z-index: 800;

	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;

	background-color: var(--cor-verde);
	color: var(--cor-branco);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);

	/* Estado inicial: escondido e levemente abaixo */
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem) scale(0.9);
	transition:
		opacity var(--transicao-media),
		transform var(--transicao-media),
		visibility var(--transicao-media),
		background-color var(--transicao-rapida),
		box-shadow var(--transicao-rapida);
}

.whatsapp-flutuante.esta-visivel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* "fica mais claro quando passa cursor" */
.whatsapp-flutuante:hover,
.whatsapp-flutuante:focus-visible {
	background-color: var(--cor-lima);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.whatsapp-flutuante__icone {
	width: 1.625rem;
	height: 1.625rem;
}

/* Em telas pequenas o botao encolhe um pouco para nao cobrir conteudo */
@media (max-width: 600px) {
	.whatsapp-flutuante {
		width: 3rem;
		height: 3rem;
	}

	.whatsapp-flutuante__icone {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp-flutuante {
		transform: none;
	}

	.whatsapp-flutuante:hover,
	.whatsapp-flutuante:focus-visible {
		transform: none;
	}
}