/**
 * Botão Hero — estilos.
 *
 * Pílula CTA com texto + círculo de ícone. Dois estados:
 *  - Repouso: fundo branco, círculo "encaixado" no canto direito (10px da borda).
 *  - Hover/focus: fundo morpha para verde-pastel e o círculo do ícone "salta"
 *    para a direita (translateX), destacando-se para fora da borda da pílula —
 *    como no design. Cores de texto/círculo/ícone também transicionam.
 *
 * Movimento via transform (não mexe no layout) + cores via custom properties;
 * o {{WRAPPER}} dos controles troca as --pucpr-btn-* para overrides sem perder
 * a transição.
 */

.pucpr-botao-wrap {
	display: flex;
	justify-content: flex-start;
}

.pucpr-botao {
	--pucpr-btn-bg: #ffffff;
	--pucpr-btn-bg-hover: #e4e98d;
	--pucpr-btn-text: #000000;
	--pucpr-btn-circle-bg: #863bff;
	--pucpr-btn-circle-fg: #ffffff;
	--pucpr-btn-pad-y: 10px;
	--pucpr-btn-pad-left: 30px;
	--pucpr-btn-pad-right: 10px;
	--pucpr-btn-gap: 20px;
	--pucpr-btn-circle: 40px;
	--pucpr-btn-min-h: 60px;
	--pucpr-btn-icon-pop-hover: 22px;
	--pucpr-btn-body-recede-hover: 14px;
	--pucpr-btn-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pucpr-btn-dur: 280ms;

	/* Auto-suficiente: não depender do reset global do tema/Elementor pra o
	   min-height (60px) já incluir o padding — senão a pílula "estica" pra 80px
	   em contextos sem border-box. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pucpr-btn-gap);
	padding:
		var(--pucpr-btn-pad-y)
		var(--pucpr-btn-pad-right)
		var(--pucpr-btn-pad-y)
		var(--pucpr-btn-pad-left);
	min-height: var(--pucpr-btn-min-h);
	border-radius: 1000px;
	background-color: var(--pucpr-btn-bg);
	color: var(--pucpr-btn-text);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--pucpr-btn-dur) var(--pucpr-btn-ease);
}

.pucpr-botao:hover,
.pucpr-botao:focus-visible {
	background-color: var(--pucpr-btn-bg-hover);
	text-decoration: none;
}

.pucpr-botao:focus-visible {
	outline: 2px solid #863bff;
	outline-offset: 3px;
}

.pucpr-botao__texto {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--pucpr-btn-text);
	white-space: nowrap;
	transition: color var(--pucpr-btn-dur) var(--pucpr-btn-ease);
}

.pucpr-botao__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pucpr-btn-circle);
	height: var(--pucpr-btn-circle);
	border-radius: 1000px;
	background-color: var(--pucpr-btn-circle-bg);
	color: var(--pucpr-btn-circle-fg);
	font-size: 18px;
	line-height: 1;
	transition:
		transform var(--pucpr-btn-dur) var(--pucpr-btn-ease),
		margin-right var(--pucpr-btn-dur) var(--pucpr-btn-ease),
		background-color var(--pucpr-btn-dur) var(--pucpr-btn-ease),
		color var(--pucpr-btn-dur) var(--pucpr-btn-ease);
}

.pucpr-botao__icone svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.pucpr-botao__icone i {
	color: currentColor;
}

/* Em hover, o movimento tem duas partes (como no design):
   - margin-right negativa encolhe a caixa → a borda direita da pílula "recua";
   - translateX desloca o círculo para a direita.
   A soma das duas abre o vão entre o corpo da pílula e a bolinha. */
.pucpr-botao:hover .pucpr-botao__icone,
.pucpr-botao:focus-visible .pucpr-botao__icone {
	margin-right: calc(var(--pucpr-btn-body-recede-hover) * -1);
	transform: translateX(var(--pucpr-btn-icon-pop-hover));
}

@media (prefers-reduced-motion: reduce) {
	.pucpr-botao,
	.pucpr-botao__icone {
		transition: none;
	}
}