/**
 * Acorde Acordes — Componentes globais
 * Elementor Atomic + compatibilidade com widgets clássicos
 */


/* ==================================================
   BOTÃO — BASE
   ================================================== */

.aa-btn,
.aa-btn > a,
.aa-btn > button,
.aa-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aa-space-2);

	min-height: 48px;
	padding: 14px 24px;

	border: var(--aa-border) solid transparent;
	border-radius: var(--aa-radius-md);

	font-family: var(--aa-font-body);
	font-size: var(--aa-text-base);
	font-weight: var(--aa-font-weight-bold);
	line-height: 1.2;

	text-decoration: none;
	cursor: pointer;

	transition:
		background-color var(--aa-transition-base),
		color var(--aa-transition-base),
		border-color var(--aa-transition-base),
		transform var(--aa-transition-fast),
		filter var(--aa-transition-base);
}


/* ==================================================
   PRIMARY
   ================================================== */

.aa-btn.aa-btn--primary,
.aa-btn.aa-btn--primary > a,
.aa-btn.aa-btn--primary > button,
.aa-btn.aa-btn--primary .elementor-button {
	background: var(--aa-color-action) !important;
	background-color: var(--aa-color-action) !important;
	color: var(--aa-color-text-inverse) !important;
}


/* PRIMARY — HOVER */

.aa-btn.aa-btn--primary:hover,
.aa-btn.aa-btn--primary > a:hover,
.aa-btn.aa-btn--primary > button:hover,
.aa-btn.aa-btn--primary .elementor-button:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}


/* ==================================================
   SECONDARY
   ================================================== */

.aa-btn.aa-btn--secondary,
.aa-btn.aa-btn--secondary > a,
.aa-btn.aa-btn--secondary > button,
.aa-btn.aa-btn--secondary .elementor-button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--aa-color-carvao) !important;
	border-color: var(--aa-color-carvao) !important;
}

.aa-btn.aa-btn--secondary:hover,
.aa-btn.aa-btn--secondary > a:hover,
.aa-btn.aa-btn--secondary > button:hover,
.aa-btn.aa-btn--secondary .elementor-button:hover {
	background: var(--aa-color-carvao) !important;
	background-color: var(--aa-color-carvao) !important;
	color: var(--aa-color-papel) !important;
}


/* ==================================================
   INVERSE
   ================================================== */

.aa-btn.aa-btn--inverse,
.aa-btn.aa-btn--inverse > a,
.aa-btn.aa-btn--inverse > button,
.aa-btn.aa-btn--inverse .elementor-button {
	background: var(--aa-color-papel) !important;
	background-color: var(--aa-color-papel) !important;
	color: var(--aa-color-carvao) !important;
}


/* ==================================================
   ACESSIBILIDADE
   ================================================== */

.aa-btn:focus-visible,
.aa-btn > a:focus-visible,
.aa-btn > button:focus-visible,
.aa-btn .elementor-button:focus-visible {
	outline: 3px solid var(--aa-color-ambar);
	outline-offset: 3px;
}

/* ==================================================
   TIPOGRAFIA
   ================================================== */

/* H1 / Display principal */
.aa-h1 {
	font-family: var(--aa-font-display) !important;
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: var(--aa-font-weight-display) !important;
	line-height: 0.95;
	letter-spacing: var(--aa-display-letter-spacing);
	color: var(--aa-color-text);
	margin: 0;
}

/* H2 */
.aa-h2 {
	font-family: var(--aa-font-display) !important;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: var(--aa-font-weight-display) !important;
	line-height: 0.98;
	letter-spacing: var(--aa-display-letter-spacing);
	color: var(--aa-color-text);
	margin: 0;
}

/* H3 */
.aa-h3 {
	font-family: var(--aa-font-display) !important;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700 !important;
	line-height: 1;
	color: var(--aa-color-text);
	margin: 0;
}

/* Corpo */
.aa-body {
	font-family: var(--aa-font-body) !important;
	font-size: var(--aa-text-base);
	font-weight: var(--aa-font-weight-regular);
	line-height: var(--aa-body-line-height);
	color: var(--aa-color-text-secondary);
}

/* Corpo maior / introduções */
.aa-lead {
	font-family: var(--aa-font-body) !important;
	font-size: var(--aa-text-lg);
	font-weight: var(--aa-font-weight-regular);
	line-height: 1.55;
	color: var(--aa-color-text-secondary);
	max-width: 44rem;
	margin: 0;
}

/* Eyebrow / pequena chamada acima do título */
.aa-eyebrow {
	font-family: var(--aa-font-body) !important;
	font-size: var(--aa-text-sm);
	font-weight: var(--aa-font-weight-bold);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aa-color-action);
}

/* Link textual */
.aa-link {
	color: var(--aa-color-action);
	font-weight: var(--aa-font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aa-link:hover {
	text-decoration-thickness: 2px;
}

/* ==================================================
   HERO
   ================================================== */

.aa-hero__content {
	max-width: 760px;
}

.aa-hero__content {
	gap: var(--aa-space-5);
}

.aa-hero__content .aa-eyebrow {
	margin-bottom: calc(var(--aa-space-2) * -1);
}

@media (max-width: 767px) {

	.aa-hero__content .aa-btn {
		width: 100%;
	}

}

/* ==================================================
   SUPERFÍCIES
   ================================================== */

.aa-surface--paper {
	width: 100%;
	background: var(--aa-color-papel);
	color: var(--aa-color-text);
}

.aa-surface--light {
	width: 100%;
	background: #FFFFFF;
	color: var(--aa-color-text);
}

.aa-surface--dark {
	width: 100%;
	background: var(--aa-color-carvao);
	color: var(--aa-color-text-inverse);
}

/* ==================================================
   CARDS
   ================================================== */

.aa-card {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--aa-space-3) !important;

	padding: var(--aa-space-5) !important;

	background: #FFFFFF !important;
	color: var(--aa-color-text);

	border: var(--aa-border) solid var(--aa-color-border) !important;
	border-radius: var(--aa-radius-lg) !important;

	box-shadow: var(--aa-shadow-card);
}

.aa-card__title {
	font-family: var(--aa-font-display) !important;
	font-size: var(--aa-text-2xl);
	font-weight: var(--aa-font-weight-display) !important;
	line-height: 1;
	margin: 0;
}

.aa-card__text {
	font-family: var(--aa-font-body) !important;
	font-size: var(--aa-text-base);
	line-height: var(--aa-body-line-height);
	color: var(--aa-color-text-secondary);
	margin: 0;
}

/* ==================================================
   FORMULÁRIO
   ================================================== */

.aa-form {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--aa-space-4) !important;

	width: 100% !important;
	max-width: 560px !important;

	align-self: flex-start !important;
}

/* Labels */
.aa-form__label {
	font-family: var(--aa-font-body) !important;
	font-size: var(--aa-text-sm) !important;
	font-weight: var(--aa-font-weight-semibold) !important;
	line-height: 1.3;
	color: var(--aa-color-text) !important;
}

/* Inputs */
.aa-form__input {
	width: 100% !important;
	min-height: 52px;

	padding: 12px 16px !important;

	background: #FFFFFF !important;
	color: var(--aa-color-text) !important;

	border: 1px solid var(--aa-color-border) !important;
	border-radius: var(--aa-radius-md) !important;

	font-family: var(--aa-font-body) !important;
	font-size: var(--aa-text-base) !important;

	transition:
		border-color var(--aa-transition-fast),
		box-shadow var(--aa-transition-fast);
}

/* Input em foco */
.aa-form__input:focus {
	border-color: var(--aa-color-action) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(194, 71, 42, 0.14) !important;
}

/* Placeholder */
.aa-form__input::placeholder {
	color: var(--aa-color-text-secondary);
	opacity: 0.7;
}

/* Botão submit */
.aa-form__submit {
	margin-top: var(--aa-space-2);
}

/* Mobile */
@media (max-width: 767px) {

	.aa-form {
		width: 100% !important;
		max-width: 100% !important;
	}

	.aa-form__submit {
		width: 100% !important;
	}

}