/* =========================================================================
 * Botão "voltar ao topo" — só no blog e só no celular.
 *
 * Fica alinhado com o botão flutuante do WhatsApp do site (que é fixo em
 * bottom:40px / right:40px, 60x60, por style inline no HTML do cabeçalho):
 * este entra logo acima dele, com a mesma linha de centro, para os dois
 * parecerem uma pilha só em vez de dois botões soltos.
 *
 * A visibilidade é controlada pelo atributo "hidden" (mexido pelo JS em
 * includes/kis-voltar-ao-topo.php), nunca por uma classe com display —
 * por isso todo "display" aqui está protegido por :not([hidden]).
 * ========================================================================= */

.kis-topo {
	display: none; /* padrão: escondido em tudo que não for celular. */
}

@media (max-width: 767px) {
	.kis-topo:not([hidden]) {
		display: flex;
	}

	.kis-topo {
		position: fixed;
		right: 46px; /* 40 + (60 - 48) / 2 — mesmo centro do botão do WhatsApp. */
		bottom: 112px; /* 40 (WhatsApp) + 60 (altura dele) + 12 de respiro. */
		z-index: 1000;

		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 50%;

		background: #153158;
		color: #F2A900;
		box-shadow: 0 4px 14px rgba(21, 49, 88, 0.35);
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.kis-topo svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	.kis-topo:active {
		transform: translateY(1px);
	}

	.kis-topo:focus-visible {
		outline: 3px solid #F2A900;
		outline-offset: 2px;
	}
}