/* ==========================================================================
	Componente: Botão (.btn)
	========================================================================== */

.btn {
	appearance: none;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-family: var(--fonte-principal);
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
	text-align: center;
	text-decoration: none;

	margin: 0;
	padding: 16px 24px;
	min-height: 60px;
	min-width: 0;
	width: auto;

	border-radius: var(--btn-radius);
	border: 2px solid transparent;
	outline: none;

	transition: var(--btn-transition);
	will-change: transform;

	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

/* Estado: Desabilitado */
.btn:disabled,
.btn.disabled {
	pointer-events: none;
	opacity: 0.6;
	filter: grayscale(100%);
}

.btn:active {
	box-shadow: none !important;
	transform: translateY(0) !important;
	text-decoration: none;
}

/* --- UTILITÁRIO: Largura Total --- */
/* Use esta classe se precisar que o botão ocupe 100% (ex: mobile) */
.btn-full {
	width: 100%;
	display: flex;
}