/*
 * Cor de destaque: lida direto do tema ativo (Bueno Design Studio).
 * O tema já expõe --azul-brand (editável em Aparência > Personalizar > Bueno Studio),
 * e --brand-accent é o alias genérico que ele mesmo usa. Se este plugin rodar em
 * outro tema/site, cai no fallback #5464fd (a cor de marca padrão).
 * Para forçar uma cor própria só deste plugin, sem mexer no tema:
 * :root { --mcd-accent: #suacor; }
 */
:root {
	--mcd-accent: var( --azul-brand, var( --brand-accent, #5464fd ) );
	--mcd-accent-2: var( --ciano, #00ffe3 );
	--mcd-surface: var( --card, #101016 );
	--mcd-radius: var( --radius-card, 16px );
}

/* ---------- Variantes de superfície (compartilhadas por Box e Item da Grade) ---------- */
/* "Vidro" reaproveita os mesmos tokens de glassmorphism que o resto do site usa. */
.mcd-variant-glass {
	background: var( --glass-card, rgba( 16, 16, 22, 0.48 ) );
	border: 1px solid var( --glass-border, rgba( 255, 255, 255, 0.09 ) );
	backdrop-filter: blur( var( --glass-blur, 18px ) );
	-webkit-backdrop-filter: blur( var( --glass-blur, 18px ) );
}

.mcd-variant-solid {
	background: var( --mcd-box-bg, var( --mcd-surface ) );
	border: 1px solid var( --mcd-box-border, rgba( 255, 255, 255, 0.09 ) );
}

.mcd-variant-outline {
	background: transparent;
	border: 1px solid var( --mcd-box-border, var( --mcd-accent ) );
}

.mcd-variant-transparente {
	background: transparent;
	border: none;
}

/* ---------- Grade de Boxes ---------- */
.mp-grid {
	display: grid;
	grid-template-columns: repeat( var( --mcd-cols, 3 ), 1fr );
}

@media ( max-width: 989px ) {
	.mp-grid {
		grid-template-columns: repeat( var( --mcd-cols-tablet, 2 ), 1fr );
	}
}

@media ( max-width: 600px ) {
	.mp-grid {
		grid-template-columns: repeat( var( --mcd-cols-mobile, 1 ), 1fr );
	}
}

.mp-grid-item {
	position: relative;
	border-radius: var( --mcd-radius );
	padding: 28px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mp-grid-item:hover {
	transform: translateY( -4px );
	box-shadow: 0 14px 32px rgba( 0, 0, 0, 0.28 );
}

.mp-grid-item-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	color: var( --mcd-icon-color, var( --mcd-accent ) );
}

.mp-grid-item-icon svg {
	width: 100%;
	height: 100%;
}

.mp-grid-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mp-grid-item-title {
	font-family: var( --font-display, inherit );
	font-size: 1.15rem;
	margin: 0 0 8px;
}

.mp-grid-item-text {
	font-family: var( --font-sans, inherit );
	margin: 0;
	opacity: 0.75;
}

/* ---------- Bordas animadas no hover (Box e Item da Grade) ---------- */
.mp-hover-border {
	position: relative;
}

.mp-hover-border::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var( --mcd-border-width, 2px );
	background: linear-gradient(
		120deg,
		var( --mcd-border-color-1, var( --mcd-accent ) ),
		transparent 40%,
		var( --mcd-border-color-2, var( --mcd-accent-2 ) )
	);
	background-size: 300% 300%;
	background-position: 0% 50%;
	-webkit-mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.mp-hover-border:hover::before,
.mp-hover-border:focus-within::before {
	opacity: 1;
	animation: mp-border-sweep var( --mcd-border-speed, 2.5s ) linear infinite;
}

@keyframes mp-border-sweep {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 200% 50%;
	}
}

.mp-hover-glow {
	transition: box-shadow 0.3s ease;
}

.mp-hover-glow:hover,
.mp-hover-glow:focus-within {
	box-shadow: 0 0 0 2px var( --mcd-glow-color, var( --mcd-accent ) ),
		0 0 26px color-mix( in srgb, var( --mcd-glow-color, var( --mcd-accent ) ) 35%, transparent );
}

/* ---------- Texto Animado (revela conforme o visitante rola) ---------- */
.mp-text-animado .mp-word {
	display: inline-block;
	opacity: 0;
	transform: translateY( var( --mcd-text-distance, 0.4em ) );
	transition: opacity var( --mcd-text-duration, 0.5s ) ease,
		transform var( --mcd-text-duration, 0.5s ) ease;
}

.mp-text-animado.is-visible .mp-word {
	opacity: 1;
	transform: none;
}

.mp-word--accent {
	color: var( --mcd-accent );
}

/* ---------- Imagem com Efeito ---------- */
.mp-img-effect {
	position: relative;
	overflow: hidden;
	border-radius: var( --mcd-img-radius, 14px );
}

.mp-img-effect img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mp-img-zoom-lento img {
	animation: mp-zoom-lento var( --mcd-zoom-duration, 18s ) ease-in-out infinite alternate;
	transform-origin: center;
}

@keyframes mp-zoom-lento {
	from {
		transform: scale( 1 );
	}
	to {
		transform: scale( var( --mcd-zoom-scale, 1.12 ) );
	}
}

.mp-img-seguir-mouse img {
	transition: transform 0.15s ease-out;
	transform: scale( var( --mcd-zoom-scale, 1.08 ) );
}

/* ---------- Botão Dinâmico ---------- */
.mcd-btn-wrap {
	display: block;
}

.mcd-btn-wrap--esquerda {
	text-align: left;
}

.mcd-btn-wrap--centro {
	text-align: center;
}

.mcd-btn-wrap--direita {
	text-align: right;
}

.mcd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var( --font-sans, inherit );
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	border-radius: var( --bds-btn-radius, 999px );
	padding: var( --bds-btn-py, 0.85em ) var( --bds-btn-px, 1.6em );
	transition: var( --bds-btn-transition, transform 0.25s ease, box-shadow 0.25s ease,
		background-color 0.25s ease, gap 0.25s ease );
	cursor: pointer;
	border: 2px solid transparent;
}

.mcd-btn:hover,
.mcd-btn:focus-visible {
	transform: translateY( -2px );
}

.mcd-btn--bloco {
	display: flex;
	width: 100%;
}

.mcd-btn--pequeno {
	font-size: 0.85rem;
}

.mcd-btn--medio {
	font-size: 1rem;
}

.mcd-btn--grande {
	font-size: 1.15rem;
}

.mcd-btn--preenchido {
	background: var( --mcd-btn-color, var( --mcd-accent ) );
	color: #fff;
	border-color: var( --mcd-btn-color, var( --mcd-accent ) );
}

.mcd-btn--preenchido:hover {
	box-shadow: 0 10px 30px color-mix( in srgb, var( --mcd-btn-color, var( --mcd-accent ) ) 45%, transparent );
}

.mcd-btn--contorno {
	background: transparent;
	color: var( --mcd-btn-color, var( --mcd-accent ) );
	border-color: var( --mcd-btn-color, var( --mcd-accent ) );
}

.mcd-btn--contorno:hover {
	background: color-mix( in srgb, var( --mcd-btn-color, var( --mcd-accent ) ) 12%, transparent );
}

.mcd-btn--fantasma {
	background: transparent;
	color: var( --mcd-btn-color, var( --mcd-accent ) );
	border-color: transparent;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

.mcd-btn__icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	transition: transform 0.25s ease;
}

.mcd-btn:hover .mcd-btn__icon {
	transform: translateX( 3px );
}

/* ---------- Acessibilidade: respeita "reduzir movimento" do sistema ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.mp-anim,
	.mp-word,
	.mp-hover-border::before,
	.mp-img-zoom-lento img,
	.mcd-btn,
	.mcd-btn__icon {
		animation: none !important;
		transition: none !important;
	}

	.mp-anim,
	.mp-text-animado .mp-word {
		opacity: 1 !important;
		transform: none !important;
	}

	.mcd-btn:hover {
		transform: none;
	}
}