/*!
 * Mousas — Seções reutilizáveis da Home e páginas internas
 *
 * @author   Dante Testa <https://dantetesta.com.br>
 * @version  1.1.0
 * @since    2026-04-17 15:46:00 UTC-03
 */

.mousas-main { display: block; }
.mousas-main--home { background: var(--mousas-white); }

/* Revelação ao scroll (elementos com data-mousas-reveal) */
[data-mousas-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--mousas-ease), transform 600ms var(--mousas-ease);
	transition-delay: var(--mousas-delay, 0ms);
	will-change: opacity, transform;
}
[data-mousas-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-mousas-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =============================================================================
 * 1. HERO da Home — variante DARK com imagem de fundo (Painel + casal + arcos)
 *    A imagem (assets/img/hero-mousas.{webp,jpg}) já contém o mockup do
 *    Painel Imobiliário; portanto não há mockup sintético neste hero.
 * ========================================================================== */

.mousas-hero--home {
	--mousas-hero-bg: url("../img/hero-mousas.jpg");
	--mousas-hero-bg-webp: url("../img/hero-mousas.webp");

	padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 9vw, 7rem);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--mousas-primary);
	color: var(--mousas-white);

	/* Fallback JPG (browsers sem image-set) */
	background-image: var(--mousas-hero-bg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}

/* Progressive enhancement: WebP via image-set onde suportado */
@supports (background-image: image-set(url("../img/hero-mousas.webp") 1x)) {
	.mousas-hero--home {
		background-image: image-set(
			var(--mousas-hero-bg-webp) type("image/webp"),
			var(--mousas-hero-bg) type("image/jpeg")
		);
	}
}

/* Overlay #1 — gradiente esquerda→direita p/ legibilidade do texto */
.mousas-hero--home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(10, 30, 63, 0.92) 0%,
		rgba(10, 30, 63, 0.78) 28%,
		rgba(10, 30, 63, 0.30) 55%,
		rgba(10, 30, 63, 0.00) 72%
	);
	pointer-events: none;
	z-index: 0;
}

/* Overlay #2 — vinheta superior+inferior para profundidade editorial */
.mousas-hero--home::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 30, 63, 0.20) 0%, transparent 18%, transparent 82%, rgba(10, 30, 63, 0.35) 100%);
	pointer-events: none;
	z-index: 0;
}

.mousas-hero__wrap {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 960px) {
	.mousas-hero__wrap {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
	}
}

.mousas-hero__content {
	max-width: 56ch;
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-md);
}

/* Override tipográfico p/ variante dark — texto inverso, accent dourado mantém */
.mousas-hero--dark .mousas-eyebrow {
	color: var(--mousas-accent);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.mousas-hero--dark .mousas-display-1 {
	color: var(--mousas-white);
	font-size: clamp(2.25rem, 5.2vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	max-width: 20ch;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.mousas-hero--dark .mousas-lead {
	color: rgba(255, 255, 255, 0.86);
	max-width: 50ch;
}

.mousas-hero--dark .mousas-cta-row { margin-top: var(--mousas-space-sm); }

.mousas-hero__trust {
	list-style: none;
	padding: 0;
	margin-top: var(--mousas-space-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--mousas-space-sm) var(--mousas-space-xl);
	font-size: var(--mousas-fs-sm);
	color: rgba(255, 255, 255, 0.78);
}
.mousas-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 500;
}
.mousas-hero--dark .mousas-hero__trust .mousas-ico { color: var(--mousas-accent); }

/* ─── Mobile: imagem mantém a posição mas overlay fica mais opaco ─────── */
@media (max-width: 768px) {
	.mousas-hero--home {
		/* Mostra mais da metade direita (com o painel) na vertical */
		background-position: 70% center;
		background-size: auto 100%;
		min-height: 88svh;
	}
	.mousas-hero--home::before {
		background: linear-gradient(
			180deg,
			rgba(10, 30, 63, 0.92) 0%,
			rgba(10, 30, 63, 0.78) 45%,
			rgba(10, 30, 63, 0.55) 100%
		);
	}
	.mousas-hero--dark .mousas-display-1 { max-width: 100%; }
}

/* =============================================================================
 * 2. Seção comum — cabeçalho
 * ========================================================================== */

.mousas-section__head {
	max-width: 100%;
	margin-bottom: clamp(2rem, 4vw, var(--mousas-space-2xl));
}
.mousas-section__body { margin-top: var(--mousas-space-lg); }
.mousas-section__foot { margin-top: clamp(1.5rem, 4vw, var(--mousas-space-xl)); }

/* Calibração editorial dos H2 dentro de .mousas-section__head — escala
 * menor que o display-2 default pra caber em 1-2 linhas balanceadas em
 * containers de 1280px (eyebrow + título + lead opcional). O
 * .mousas-display-2 fora do head mantém seu tamanho original. */
.mousas-section__head .mousas-display-2 {
	font-size: clamp(1.625rem, 3.4vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	max-width: 28ch;
	text-wrap: balance;
}
.mousas-section__head .mousas-lead {
	max-width: 60ch;
}

/* =============================================================================
 * 3. Pilares
 * ========================================================================== */

/* O .mousas-section__head global usa max-width:64ch — em fontes display
 * grandes isso força o título a quebrar em 3-4 linhas. Aqui liberamos
 * a largura e calibramos o tamanho para caber em 1 linha em desktops e
 * 2 linhas equilibradas em telas estreitas. */
.mousas-section-pilares .mousas-section__head {
	max-width: 100%;
}
.mousas-section-pilares .mousas-section__head .mousas-display-2 {
	font-size: clamp(1.625rem, 3.2vw, 2.625rem);
	letter-spacing: -0.022em;
	max-width: 100%;
	text-wrap: balance;
}

.mousas-pilar {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-pilar:hover {
	transform: translateY(-4px);
	border-color: var(--mousas-accent);
	box-shadow: var(--mousas-shadow-md);
}

.mousas-pilar__title { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-xl); color: var(--mousas-text-strong); }
.mousas-pilar__desc { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-base); }

.mousas-pilar__link {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 0.4rem;
	color: var(--mousas-primary);
	font-weight: 600;
	font-size: var(--mousas-fs-sm);
	text-decoration: none;
}
.mousas-pilar__link:hover { color: var(--mousas-accent-700); gap: 0.6rem; }

/* =============================================================================
 * 4. Painel (preview)
 * ========================================================================== */

.mousas-section-painel__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 960px) {
	.mousas-section-painel__grid { grid-template-columns: 0.9fr 1.1fr; }
}

/* Título do Painel: 2 linhas balanceadas em desktop, escala fluida em mobile. */
.mousas-section-painel__copy .mousas-display-2 {
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	max-width: 18ch;
	text-wrap: balance;
}

/* Visual da direita */
.mousas-section-painel__visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mousas-section-painel__figure {
	margin: 0;
	position: relative;
	width: 100%;
	max-width: 720px;
}

.mousas-section-painel__figure img {
	width: 100%;
	height: auto;
	border-radius: var(--mousas-radius-lg);
	box-shadow:
		0 30px 60px rgba(10, 30, 63, 0.18),
		0 8px 20px rgba(10, 30, 63, 0.08);
}

/* Placeholder elegante quando não há imagem nem funcionalidades */
.mousas-section-painel__placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mousas-space-md);
	padding: var(--mousas-space-2xl);
	min-height: 280px;
	width: 100%;
	background:
		radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--mousas-accent) 8%, transparent), transparent 70%),
		var(--mousas-neutral-50);
	border: 2px dashed color-mix(in oklab, var(--mousas-accent) 35%, transparent);
	border-radius: var(--mousas-radius-lg);
	color: var(--mousas-secondary-400);
	text-align: center;
	font-size: var(--mousas-fs-sm);
}

.mousas-section-painel__placeholder .mousas-ico { color: var(--mousas-accent); opacity: 0.7; }

.mousas-section-painel__hint {
	margin-top: var(--mousas-space-md);
	font-size: var(--mousas-fs-sm);
	color: var(--mousas-text-muted);
	font-style: italic;
}

.mousas-section-painel__grid-funcs {
	list-style: none;
	padding: 0; margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mousas-space-sm);
}

@media (min-width: 520px) {
	.mousas-section-painel__grid-funcs { grid-template-columns: repeat(2, 1fr); }
}

.mousas-func-mini {
	display: flex;
	align-items: center;
	gap: var(--mousas-space-sm);
	padding: var(--mousas-space-sm) var(--mousas-space-md);
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-md);
	font-size: var(--mousas-fs-sm);
	color: var(--mousas-secondary);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition);
}

.mousas-func-mini:hover { transform: translateY(-2px); border-color: var(--mousas-accent); }

.mousas-func-mini__icon {
	display: inline-grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: var(--mousas-radius-sm);
	background: var(--mousas-primary-100);
	color: var(--mousas-primary);
	flex-shrink: 0;
}

/* =============================================================================
 * 5. Benefícios
 * ========================================================================== */

.mousas-beneficio {
	list-style: none;
	padding: var(--mousas-space-xl);
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-beneficio:hover {
	transform: translateY(-3px);
	border-color: var(--mousas-primary-100);
	box-shadow: var(--mousas-shadow-md);
}

.mousas-beneficio__icon {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--mousas-radius-md);
	background: var(--mousas-primary);
	color: var(--mousas-white);
}

.mousas-beneficio__title { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-lg); }
.mousas-beneficio__desc { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-sm); line-height: var(--mousas-lh-relaxed); }

/* =============================================================================
 * 6. Para Quem É
 * ========================================================================== */

.mousas-publico {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-publico:hover {
	transform: translateY(-4px);
	border-color: var(--mousas-accent);
	box-shadow: var(--mousas-shadow-lg);
}

.mousas-publico__icon {
	display: inline-grid; place-items: center;
	width: 48px; height: 48px;
	border-radius: var(--mousas-radius-md);
	background: var(--mousas-primary);
	color: var(--mousas-accent);
}

.mousas-publico__title { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-xl); }
.mousas-publico__desc { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-sm); line-height: var(--mousas-lh-relaxed); }

.mousas-publico__link {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 0.4rem;
	color: var(--mousas-primary);
	font-weight: 600;
	font-size: var(--mousas-fs-sm);
	text-decoration: none;
}
.mousas-publico__link:hover { color: var(--mousas-accent-700); gap: 0.6rem; }

/* =============================================================================
 * 7. Planos — Card
 * ========================================================================== */

.mousas-planos-grid { align-items: stretch; }

.mousas-card-plano {
	position: relative;
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-md);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-card-plano:hover {
	transform: translateY(-4px);
	box-shadow: var(--mousas-shadow-md);
}

.mousas-card-plano--destaque {
	border: 1.5px solid var(--mousas-accent);
	box-shadow: var(--mousas-shadow-lg);
	background: linear-gradient(180deg, color-mix(in oklab, var(--mousas-accent) 6%, white) 0%, var(--mousas-white) 60%);
}

.mousas-card-plano--consultor {
	background: var(--mousas-primary);
	color: var(--mousas-white);
	border-color: var(--mousas-primary-500);
}

.mousas-card-plano--consultor .mousas-card-plano__name,
.mousas-card-plano--consultor .mousas-card-plano__price-value,
.mousas-card-plano--consultor .mousas-card-plano__price-currency,
.mousas-card-plano--consultor .mousas-card-plano__features li span,
.mousas-card-plano--consultor .mousas-card-plano__specs li span {
	color: var(--mousas-white);
}

.mousas-card-plano--consultor .mousas-card-plano__publico,
.mousas-card-plano--consultor .mousas-card-plano__price-note {
	color: rgba(255, 255, 255, 0.72);
}

.mousas-card-plano__tag {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.4rem 1rem;
	background: var(--mousas-accent);
	color: var(--mousas-primary);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--mousas-radius-pill);
	box-shadow: var(--mousas-shadow-base);
	white-space: nowrap;
	line-height: 1;
}

.mousas-card-plano__header { display: flex; flex-direction: column; gap: 0.35rem; }
.mousas-card-plano__name { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-2xl); color: var(--mousas-text-strong); }
.mousas-card-plano__publico { font-size: var(--mousas-fs-sm); color: var(--mousas-text-muted); }

.mousas-card-plano__price {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	flex-wrap: wrap;
}
.mousas-card-plano__price-currency { font-size: var(--mousas-fs-base); font-weight: 600; color: var(--mousas-text-muted); }
.mousas-card-plano__price-value {
	font-family: var(--mousas-font-display);
	font-size: clamp(2rem, 3.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--mousas-text-strong);
	letter-spacing: -0.02em;
}
.mousas-card-plano__price-note { font-size: var(--mousas-fs-sm); color: var(--mousas-text-muted); }

.mousas-card-plano__specs,
.mousas-card-plano__features {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-xs);
	font-size: var(--mousas-fs-sm);
}

.mousas-card-plano__specs { padding: var(--mousas-space-sm) 0; border-top: 1px solid var(--mousas-neutral-200); border-bottom: 1px solid var(--mousas-neutral-200); }
.mousas-card-plano--consultor .mousas-card-plano__specs { border-color: rgba(255, 255, 255, 0.12); }

.mousas-card-plano__specs li,
.mousas-card-plano__features li {
	display: flex; align-items: center; gap: 0.5rem;
	color: var(--mousas-secondary-600);
}

.mousas-card-plano__more { color: var(--mousas-text-muted); font-style: italic; font-size: var(--mousas-fs-xs); padding-left: 1.3rem; }

.mousas-card-plano__footer { margin-top: auto; }

/* =============================================================================
 * 8. EAD
 * ========================================================================== */

.mousas-section-ead__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: flex-start;
}

@media (min-width: 960px) {
	.mousas-section-ead__grid { grid-template-columns: 1fr 1fr; }
}

.mousas-section-ead__list {
	list-style: none; padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
}

.mousas-modulo-ead {
	display: flex;
	align-items: center;
	gap: var(--mousas-space-md);
	padding: var(--mousas-space-md) var(--mousas-space-lg);
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-md);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition);
}

.mousas-modulo-ead:hover { transform: translateX(4px); border-color: var(--mousas-accent); }

.mousas-modulo-ead__num {
	font-family: var(--mousas-font-display);
	font-size: var(--mousas-fs-xl);
	color: var(--mousas-accent-700);
	font-weight: 700;
	min-width: 2ch;
}

.mousas-modulo-ead__body { display: flex; flex-direction: column; gap: 0.3rem; }
.mousas-modulo-ead__title { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-base); color: var(--mousas-text-strong); }

/* =============================================================================
 * 9. Autoridade
 * ========================================================================== */

.mousas-numeros {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--mousas-space-2xl);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mousas-space-md);
}

@media (min-width: 720px) {
	.mousas-numeros { grid-template-columns: repeat(4, 1fr); }
}

.mousas-numero {
	padding: var(--mousas-space-lg);
	background: var(--mousas-neutral-100);
	border-radius: var(--mousas-radius-lg);
	text-align: center;
}

.mousas-numero__value {
	display: block;
	font-family: var(--mousas-font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	color: var(--mousas-primary);
	line-height: 1;
	letter-spacing: -0.02em;
}
.mousas-numero__label {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--mousas-fs-sm);
	color: var(--mousas-text-muted);
}

.mousas-integracoes { margin-bottom: var(--mousas-space-2xl); }
.mousas-integracoes__title {
	font-size: var(--mousas-fs-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mousas-text-muted);
	margin-bottom: var(--mousas-space-md);
}
.mousas-integracoes__list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mousas-space-sm);
}

.mousas-chip--integracao {
	background: var(--mousas-white);
	border-color: var(--mousas-neutral-200);
}

.mousas-depo {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-md);
	margin: 0;
	position: relative;
}

.mousas-depo::before {
	content: "\201C";
	position: absolute; top: 8px; left: 18px;
	font-family: var(--mousas-font-display);
	font-size: 4rem;
	line-height: 1;
	color: color-mix(in oklab, var(--mousas-accent) 50%, transparent);
}

.mousas-depo__text { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-lg); line-height: 1.5; color: var(--mousas-text); padding-top: 1.5rem; }
.mousas-depo__foot { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--mousas-fs-sm); }
.mousas-depo__foot small { color: var(--mousas-text-muted); }

/* =============================================================================
 * 10. CTA Final
 * ========================================================================== */

.mousas-section-cta-final {
	background:
		radial-gradient(ellipse at top right, color-mix(in oklab, var(--mousas-accent) 14%, transparent) 0%, transparent 60%),
		linear-gradient(135deg, var(--mousas-primary) 0%, var(--mousas-primary-600) 100%);
}

.mousas-section-cta-final__inner {
	display: grid;
	gap: var(--mousas-space-xl);
	align-items: center;
}

@media (min-width: 860px) {
	.mousas-section-cta-final__inner { grid-template-columns: 1fr auto; }
}

.mousas-section-cta-final__copy h2 { max-width: 28ch; color: var(--mousas-white); }
.mousas-section-cta-final__copy .mousas-eyebrow { color: var(--mousas-accent); }

.mousas-section-cta-final__actions .mousas-btn--ghost {
	--btn-color: var(--mousas-white);
	--btn-border: rgba(255, 255, 255, 0.35);
}
.mousas-section-cta-final__actions .mousas-btn--ghost:hover {
	--btn-bg: rgba(255, 255, 255, 0.12);
	--btn-border: var(--mousas-white);
	color: var(--mousas-white);
}

/* =============================================================================
 * 11. Funcionalidades (Painel)
 * ========================================================================== */

.mousas-funcionalidades-grid { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 520px)  { .mousas-funcionalidades-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px)  { .mousas-funcionalidades-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .mousas-funcionalidades-grid { grid-template-columns: repeat(4, 1fr); } }

.mousas-funcionalidade {
	list-style: none;
	padding: var(--mousas-space-lg);
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-xs);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition);
}

.mousas-funcionalidade:hover { transform: translateY(-3px); border-color: var(--mousas-accent); }

.mousas-funcionalidade__icon {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--mousas-radius-md);
	background: var(--mousas-primary-100);
	color: var(--mousas-primary);
	margin-bottom: var(--mousas-space-xs);
}

.mousas-funcionalidade__title { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-lg); color: var(--mousas-text-strong); }
.mousas-funcionalidade__desc { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-sm); }

/* =============================================================================
 * 12. Integrações — cards
 * ========================================================================== */

.mousas-integracao-card {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-integracao-card:hover { transform: translateY(-3px); border-color: var(--mousas-accent); box-shadow: var(--mousas-shadow-md); }

.mousas-integracao-card__header {
	display: flex; align-items: center; justify-content: space-between; gap: var(--mousas-space-sm);
	flex-wrap: wrap;
}
.mousas-integracao-card__name { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-lg); color: var(--mousas-text-strong); }
.mousas-integracao-card__desc { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-sm); line-height: var(--mousas-lh-relaxed); }

/* =============================================================================
 * 13. Mockup (desktop + phone)
 * ========================================================================== */

.mousas-section-mockup {
	padding-block: clamp(3rem, 8vw, var(--mousas-space-4xl));
}

.mousas-section-mockup .mousas-section__head { margin-inline: auto; max-width: 64ch; }

.mousas-mockup-stage {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mousas-space-xl);
	align-items: center;
	justify-items: center;
	margin-top: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 960px) {
	.mousas-mockup-stage { grid-template-columns: 1.2fr 0.5fr; }
}

.mousas-mockup-desktop {
	width: 100%; max-width: 720px;
	background: var(--mousas-white);
	border-radius: var(--mousas-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.mousas-mockup-desktop__bar {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	background: #F2F4F8;
	border-bottom: 1px solid var(--mousas-neutral-200);
}
.mousas-mockup-desktop__bar span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #FF6B6B; }
.mousas-mockup-desktop__bar span:nth-child(2) { background: #FFCC4D; }
.mousas-mockup-desktop__bar span:nth-child(3) { background: #6BCB77; }
.mousas-mockup-desktop__bar em {
	font-style: normal; margin-left: auto; margin-right: auto;
	font-size: var(--mousas-fs-xs); color: var(--mousas-text-muted); background: var(--mousas-white); padding: 3px 10px; border-radius: 99px;
}

.mousas-mockup-desktop__body {
	display: grid;
	grid-template-columns: 160px 1fr;
	min-height: 320px;
	color: #1F2937;
}

.mousas-mockup-desktop__side {
	background: var(--mousas-primary);
	color: var(--mousas-white);
	padding: var(--mousas-space-md);
}
.mousas-mockup-desktop__brand { font-family: var(--mousas-font-display); font-weight: 700; color: var(--mousas-accent); margin-bottom: var(--mousas-space-md); }
.mousas-mockup-desktop__side ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--mousas-fs-sm); }
.mousas-mockup-desktop__side li { padding: 0.45rem 0.6rem; border-radius: var(--mousas-radius-sm); color: rgba(255,255,255,0.7); cursor: default; }
.mousas-mockup-desktop__side li.is-active { background: rgba(255,255,255,0.12); color: var(--mousas-white); }

.mousas-mockup-desktop__main { padding: var(--mousas-space-lg); display: flex; flex-direction: column; gap: var(--mousas-space-md); }
.mousas-mockup-desktop__main h4 { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-base); color: #0A1E3F; }

.mousas-mockup-desktop__cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mousas-space-sm);
}
.mousas-mockup-desktop__cards div {
	padding: var(--mousas-space-sm);
	background: var(--mousas-neutral-100);
	border-radius: var(--mousas-radius-md);
	display: flex; flex-direction: column;
}
.mousas-mockup-desktop__cards strong { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-xl); color: var(--mousas-primary); }
.mousas-mockup-desktop__cards small { font-size: var(--mousas-fs-xs); color: var(--mousas-text-muted); }

.mousas-mockup-desktop__rows { display: flex; flex-direction: column; gap: 6px; }
.mousas-mockup-row { display: flex; align-items: center; gap: 10px; }
.mousas-mockup-row span { width: 42px; height: 6px; border-radius: 99px; background: var(--mousas-neutral-200); }
.mousas-mockup-row em { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--mousas-primary) 0%, var(--mousas-accent) 100%); }

.mousas-mockup-phone {
	position: relative;
	width: 240px; height: 480px;
	background: #0F1523;
	border-radius: 36px;
	padding: 14px;
	box-shadow: 0 30px 80px rgba(0,0,0,.4);
	border: 4px solid #1E2536;
}

.mousas-mockup-phone__notch {
	position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
	width: 80px; height: 18px; border-radius: 99px; background: #0F1523;
	z-index: 2;
}

.mousas-mockup-phone__screen {
	position: relative;
	width: 100%; height: 100%;
	background: linear-gradient(180deg, #0A1E3F 0%, #102A5C 100%);
	border-radius: 24px;
	padding: 36px 16px 16px;
	color: var(--mousas-white);
	display: flex; flex-direction: column; gap: 10px;
	overflow: hidden;
}
.mousas-mockup-phone__time { position: absolute; top: 10px; left: 22px; font-size: 11px; color: var(--mousas-white); }
.mousas-mockup-phone__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.mousas-mockup-phone__head span { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.12em; }
.mousas-mockup-phone__head strong { font-family: var(--mousas-font-display); font-size: 18px; }

.mousas-mockup-phone__item {
	padding: 10px 12px;
	background: rgba(255,255,255,0.08);
	border-radius: 12px;
	display: flex; flex-direction: column; gap: 2px;
	backdrop-filter: blur(4px);
}
.mousas-mockup-phone__item strong { font-size: 12px; color: var(--mousas-white); }
.mousas-mockup-phone__item small { font-size: 10px; color: rgba(255,255,255,0.65); }

/* =============================================================================
 * 14. Tabela comparativa de planos
 * ========================================================================== */

.mousas-tabela-planos-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	box-shadow: var(--mousas-shadow-sm);
}

.mousas-tabela-planos {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.mousas-tabela-planos th,
.mousas-tabela-planos td {
	padding: var(--mousas-space-md) var(--mousas-space-lg);
	text-align: left;
	font-size: var(--mousas-fs-sm);
	border-bottom: 1px solid var(--mousas-neutral-200);
	vertical-align: middle;
}

.mousas-tabela-planos thead th {
	background: var(--mousas-neutral-100);
	vertical-align: top;
	font-family: var(--mousas-font-display);
	color: var(--mousas-text-strong);
}

.mousas-tabela-planos tbody th {
	font-weight: 500;
	color: var(--mousas-secondary-600);
	background: transparent;
}

.mousas-tabela-planos td { text-align: center; }
.mousas-tabela-planos tbody th { text-align: left; }

.mousas-tabela-planos th.is-destaque,
.mousas-tabela-planos td.is-destaque {
	background: color-mix(in oklab, var(--mousas-accent) 8%, white);
}

.mousas-tabela-planos__col {
	display: flex; flex-direction: column; gap: 0.3rem; align-items: center;
}
.mousas-tabela-planos__col strong { font-size: var(--mousas-fs-lg); }

.mousas-tabela-planos__preco {
	font-family: var(--mousas-font-display);
	font-size: var(--mousas-fs-xl);
	color: var(--mousas-primary);
	font-weight: 600;
}
.mousas-tabela-planos__preco em { font-style: normal; font-size: var(--mousas-fs-sm); font-weight: 500; color: var(--mousas-text-muted); margin-right: 0.15rem; }
.mousas-tabela-planos__preco small { font-size: var(--mousas-fs-xs); color: var(--mousas-text-muted); font-weight: 500; margin-left: 0.15rem; }

.mousas-tabela-planos__check {
	display: inline-grid; place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--mousas-success) 14%, white);
	color: var(--mousas-success);
}
.mousas-tabela-planos__miss { color: var(--mousas-neutral-300); font-size: var(--mousas-fs-lg); }
.mousas-tabela-planos__txt { font-weight: 600; color: var(--mousas-text-strong); }

.mousas-tabela-planos tfoot td {
	padding: var(--mousas-space-md);
	border-bottom: 0;
	background: var(--mousas-neutral-50);
}

/* =============================================================================
 * 15. FAQ
 * ========================================================================== */

.mousas-faq__list { display: flex; flex-direction: column; gap: var(--mousas-space-sm); max-width: 900px; margin-inline: auto; }

.mousas-faq__item {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-md) var(--mousas-space-lg);
	transition: border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-faq__item[open] { border-color: var(--mousas-accent); box-shadow: var(--mousas-shadow-base); }

.mousas-faq__q {
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--mousas-space-md);
	font-family: var(--mousas-font-display);
	font-size: var(--mousas-fs-lg);
	color: var(--mousas-text-strong);
	list-style: none;
	font-weight: 600;
}

.mousas-faq__q::-webkit-details-marker { display: none; }

.mousas-faq__icon {
	display: inline-grid; place-items: center;
	width: 32px; height: 32px;
	background: var(--mousas-neutral-100);
	border-radius: 50%;
	color: var(--mousas-primary);
	transition: transform var(--mousas-transition);
	flex-shrink: 0;
}

.mousas-faq__item[open] .mousas-faq__icon { transform: rotate(90deg); background: var(--mousas-accent); color: var(--mousas-white); }

.mousas-faq__a {
	padding-top: var(--mousas-space-sm);
	color: var(--mousas-secondary-600);
	line-height: var(--mousas-lh-relaxed);
}

/* =============================================================================
 * 16. Dores (Consultor)
 * ========================================================================== */

.mousas-dor {
	list-style: none;
	padding: var(--mousas-space-xl);
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-left: 3px solid var(--mousas-accent);
	border-radius: var(--mousas-radius-lg);
	display: flex;
	gap: var(--mousas-space-md);
	align-items: flex-start;
	transition: transform var(--mousas-transition), border-color var(--mousas-transition);
}

.mousas-dor:hover { transform: translateX(4px); }

.mousas-dor__num {
	font-family: var(--mousas-font-display);
	font-size: var(--mousas-fs-2xl);
	font-weight: 700;
	color: var(--mousas-accent-700);
	line-height: 1;
	min-width: 3ch;
}

.mousas-dor__text { color: var(--mousas-secondary-600); line-height: var(--mousas-lh-relaxed); }

/* =============================================================================
 * 17. Formulário (Consultor / Contato)
 * ========================================================================== */

.mousas-form-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 960px) {
	.mousas-form-grid { grid-template-columns: 0.9fr 1.1fr; }
}

.mousas-form-grid__trust {
	list-style: none;
	padding: 0;
	margin-top: var(--mousas-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-xs);
	color: var(--mousas-secondary-600);
	font-size: var(--mousas-fs-sm);
}

.mousas-form-grid__trust li { display: inline-flex; align-items: center; gap: 0.4rem; }

.mousas-form--lead {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-xl);
	padding: clamp(var(--mousas-space-lg), 3vw, var(--mousas-space-2xl));
	box-shadow: var(--mousas-shadow-lg);
}

[data-mousas-form-status][data-state="success"] { color: var(--mousas-success); font-weight: 600; }
[data-mousas-form-status][data-state="error"]   { color: var(--mousas-danger);  font-weight: 600; }

/* =============================================================================
 * 18. Públicos — blocos detalhados (Para Quem É)
 * ========================================================================== */

.mousas-publico-bloco {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-xl);
	padding: clamp(var(--mousas-space-lg), 3vw, var(--mousas-space-2xl));
	display: grid;
	gap: var(--mousas-space-xl);
	grid-template-columns: 1fr;
	align-items: start;
	transition: border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-publico-bloco:hover { border-color: var(--mousas-accent); box-shadow: var(--mousas-shadow-md); }

@media (min-width: 860px) {
	.mousas-publico-bloco { grid-template-columns: 180px 1fr; }
	.mousas-publico-bloco.is-reverse { grid-template-columns: 1fr 180px; }
	.mousas-publico-bloco.is-reverse .mousas-publico-bloco__visual { order: 2; }
}

.mousas-publico-bloco__visual {
	position: relative;
	background: var(--mousas-primary);
	color: var(--mousas-accent);
	border-radius: var(--mousas-radius-lg);
	min-height: 160px;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.mousas-publico-bloco__icon { display: inline-grid; place-items: center; }

.mousas-publico-bloco__num {
	position: absolute;
	top: 10px; right: 16px;
	font-family: var(--mousas-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color: rgba(255,255,255,0.12);
	line-height: 1;
}

.mousas-publico-bloco__body { display: flex; flex-direction: column; gap: var(--mousas-space-md); }

.mousas-publico-bloco__row {
	display: grid;
	gap: var(--mousas-space-md);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) { .mousas-publico-bloco__row { grid-template-columns: repeat(2, 1fr); } }

.mousas-publico-bloco__row p:not(.mousas-eyebrow) { color: var(--mousas-secondary-600); line-height: var(--mousas-lh-relaxed); }

.mousas-publico-bloco__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mousas-space-md);
	margin-top: var(--mousas-space-sm);
	padding-top: var(--mousas-space-md);
	border-top: 1px solid var(--mousas-neutral-200);
}

/* =============================================================================
 * 19. Sobre — origem da marca
 * ========================================================================== */

.mousas-section-sobre-marca__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 860px) {
	.mousas-section-sobre-marca__grid { grid-template-columns: 1.2fr 1fr; }
}

.mousas-section-sobre-marca__atributos {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mousas-space-md);
}

.mousas-section-sobre-marca__atributos li {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-xs);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition);
}
.mousas-section-sobre-marca__atributos li:hover { transform: translateY(-3px); border-color: var(--mousas-accent); }
.mousas-section-sobre-marca__atributos strong { font-family: var(--mousas-font-display); color: var(--mousas-text-strong); font-size: var(--mousas-fs-lg); }

.mousas-section-sobre-marca__icon {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--mousas-radius-md);
	background: var(--mousas-primary-100);
	color: var(--mousas-primary);
}

/* =============================================================================
 * 20. Sobre — missão/visão/valores
 * ========================================================================== */

.mousas-valor {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
	transition: transform var(--mousas-transition), border-color var(--mousas-transition);
}
.mousas-valor:hover { transform: translateY(-3px); border-color: var(--mousas-accent); }
.mousas-valor p:not(.mousas-eyebrow) { color: var(--mousas-secondary-600); line-height: var(--mousas-lh-relaxed); }

/* =============================================================================
 * 21. Canais de contato
 * ========================================================================== */

.mousas-canal {
	background: var(--mousas-white);
	border: 1px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-lg);
	padding: var(--mousas-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--mousas-space-sm);
	text-decoration: none;
	color: inherit;
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), box-shadow var(--mousas-transition);
}

.mousas-canal:hover { transform: translateY(-4px); border-color: var(--mousas-accent); box-shadow: var(--mousas-shadow-md); color: inherit; }

.mousas-canal__icon {
	display: inline-grid; place-items: center;
	width: 48px; height: 48px;
	border-radius: var(--mousas-radius-md);
	background: var(--mousas-primary-100);
	color: var(--mousas-primary);
}

.mousas-canal__icon--whats { background: color-mix(in oklab, #25D366 18%, white); color: #25D366; }

.mousas-canal__title { font-family: var(--mousas-font-display); font-size: var(--mousas-fs-xl); color: var(--mousas-text-strong); }
.mousas-canal__text  { color: var(--mousas-secondary-600); font-size: var(--mousas-fs-sm); line-height: var(--mousas-lh-relaxed); }

.mousas-canal__cta {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 0.4rem;
	color: var(--mousas-primary);
	font-weight: 600;
	font-size: var(--mousas-fs-sm);
	transition: gap var(--mousas-transition);
}

.mousas-canal:hover .mousas-canal__cta { gap: 0.6rem; color: var(--mousas-accent-700); }
.mousas-canal--info { cursor: default; }
.mousas-canal--info:hover { transform: none; border-color: var(--mousas-neutral-200); box-shadow: none; }

/* =============================================================================
 * 22. Blog — breadcrumb
 * ========================================================================== */

.mousas-breadcrumb { font-size: var(--mousas-fs-sm); }
.mousas-breadcrumb__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	color: var(--mousas-text-muted);
}
.mousas-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.mousas-breadcrumb__item a { color: var(--mousas-text-muted); text-decoration: none; transition: color var(--mousas-transition); }
.mousas-breadcrumb__item a:hover { color: var(--mousas-primary); }
.mousas-breadcrumb__item [aria-current="page"] { color: var(--mousas-text-strong); font-weight: 600; }
.mousas-breadcrumb__sep { color: var(--mousas-neutral-300); }

/* =============================================================================
 * 23. Blog — chips de categorias
 * ========================================================================== */

.mousas-blog-cats {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap;
	gap: var(--mousas-space-xs);
}

.mousas-blog-cats .mousas-chip {
	text-decoration: none;
	transition: transform var(--mousas-transition), border-color var(--mousas-transition), background-color var(--mousas-transition);
}

.mousas-blog-cats .mousas-chip:hover {
	transform: translateY(-1px);
	border-color: var(--mousas-accent);
	background: color-mix(in oklab, var(--mousas-accent) 10%, white);
	color: var(--mousas-primary);
}

.mousas-blog-cats .mousas-chip small {
	color: var(--mousas-text-muted);
	font-weight: 400;
	margin-left: 0.3rem;
}

/* =============================================================================
 * 24. Blog — post single (hero + cover + prose)
 * ========================================================================== */

.mousas-main--single { background: var(--mousas-white); }

.mousas-post__hero {
	padding-block: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 3rem);
	background: linear-gradient(180deg, var(--mousas-neutral-100) 0%, var(--mousas-white) 100%);
	border-bottom: 1px solid var(--mousas-neutral-200);
}

.mousas-post__hero .mousas-stack > * { max-width: 70ch; }
.mousas-post__hero .mousas-stack > .mousas-breadcrumb,
.mousas-post__hero .mousas-stack > .mousas-post__meta { max-width: none; }
.mousas-post__hero h1 { max-width: 24ch; }

.mousas-post__meta {
	margin-top: var(--mousas-space-sm);
	font-size: var(--mousas-fs-sm);
	color: var(--mousas-text-muted);
}

.mousas-post__meta-author {
	display: inline-flex;
	align-items: center;
	gap: var(--mousas-space-sm);
}

.mousas-post__meta-avatar {
	border-radius: 50%;
	display: inline-block;
}

.mousas-post__meta-author strong {
	display: block;
	color: var(--mousas-text-strong);
	font-weight: 600;
	font-size: var(--mousas-fs-sm);
}

.mousas-post__cover {
	max-width: 1000px;
	margin: clamp(1.5rem, 4vw, 2.5rem) auto;
	padding-inline: var(--mousas-gutter);
}

.mousas-post__cover img {
	width: 100%;
	border-radius: var(--mousas-radius-xl);
	box-shadow: var(--mousas-shadow-lg);
}

.mousas-post__body {
	max-width: 760px;
	padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}

/* Prose content — estilo editorial premium */
.mousas-prose { font-size: var(--mousas-fs-lg); line-height: var(--mousas-lh-relaxed); color: var(--mousas-text); }
.mousas-prose > * + * { margin-top: var(--mousas-space-md); }
.mousas-prose h2 { font-family: var(--mousas-font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-top: var(--mousas-space-xl); }
.mousas-prose h3 { font-family: var(--mousas-font-display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.25; margin-top: var(--mousas-space-lg); }
.mousas-prose h4 { font-family: var(--mousas-font-display); font-size: 1.15rem; line-height: 1.3; margin-top: var(--mousas-space-md); }
.mousas-prose p  { max-width: 68ch; }
.mousas-prose a  { color: var(--mousas-primary); font-weight: 500; text-decoration-color: color-mix(in oklab, var(--mousas-primary) 30%, transparent); text-underline-offset: 3px; }
.mousas-prose a:hover { color: var(--mousas-accent-700); }
.mousas-prose ul,
.mousas-prose ol { padding-left: 1.4rem; }
.mousas-prose ul li,
.mousas-prose ol li { margin-top: 0.35rem; max-width: 64ch; }
.mousas-prose blockquote {
	border-left: 4px solid var(--mousas-accent);
	padding: var(--mousas-space-md) var(--mousas-space-lg);
	font-family: var(--mousas-font-display);
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	line-height: 1.4;
	color: var(--mousas-text-strong);
	background: var(--mousas-neutral-100);
	border-radius: 0 var(--mousas-radius-lg) var(--mousas-radius-lg) 0;
}
.mousas-prose img { border-radius: var(--mousas-radius-lg); box-shadow: var(--mousas-shadow-base); margin: var(--mousas-space-md) 0; }
.mousas-prose figcaption { font-size: var(--mousas-fs-xs); color: var(--mousas-text-muted); text-align: center; margin-top: 0.4rem; }
.mousas-prose code {
	font-family: var(--mousas-font-mono);
	font-size: 0.9em;
	background: var(--mousas-neutral-100);
	padding: 0.15rem 0.4rem;
	border-radius: var(--mousas-radius-xs);
}
.mousas-prose pre {
	background: var(--mousas-neutral-900);
	color: var(--mousas-white);
	padding: var(--mousas-space-md) var(--mousas-space-lg);
	border-radius: var(--mousas-radius-lg);
	overflow-x: auto;
	font-size: var(--mousas-fs-sm);
}
.mousas-prose pre code { background: transparent; padding: 0; color: inherit; }
.mousas-prose hr { border: 0; border-top: 1px solid var(--mousas-neutral-200); margin-block: var(--mousas-space-xl); }

.mousas-post__tags {
	margin-top: var(--mousas-space-xl);
	padding-top: var(--mousas-space-lg);
	border-top: 1px solid var(--mousas-neutral-200);
	display: flex; flex-direction: column; gap: var(--mousas-space-sm);
}
.mousas-post__tags ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mousas-post__tags .mousas-chip { text-decoration: none; }

/* =============================================================================
 * 25. Blog — compartilhamento
 * ========================================================================== */

.mousas-share {
	margin-top: var(--mousas-space-xl);
	padding-top: var(--mousas-space-lg);
	border-top: 1px solid var(--mousas-neutral-200);
	display: flex; flex-direction: column; gap: var(--mousas-space-sm);
}

.mousas-share__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 0.5rem;
}

.mousas-share__btn {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.55rem 1rem;
	font-size: var(--mousas-fs-sm);
	font-weight: 600;
	color: var(--mousas-share-color, var(--mousas-primary));
	background: transparent;
	border: 1.5px solid color-mix(in oklab, var(--mousas-share-color, var(--mousas-primary)) 30%, transparent);
	border-radius: var(--mousas-radius-pill);
	text-decoration: none;
	transition: background-color var(--mousas-transition), color var(--mousas-transition), transform var(--mousas-transition);
}

.mousas-share__btn:hover {
	background: var(--mousas-share-color, var(--mousas-primary));
	color: var(--mousas-white);
	transform: translateY(-1px);
}

/* =============================================================================
 * 26. Paginação
 * ========================================================================== */

.mousas-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: flex;
	justify-content: center;
}

.mousas-pagination .page-numbers,
.mousas-pagination .nav-links a,
.mousas-pagination .nav-links .current {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px;
	padding: 0 0.9rem;
	border: 1.5px solid var(--mousas-neutral-200);
	border-radius: var(--mousas-radius-pill);
	color: var(--mousas-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--mousas-fs-sm);
	transition: background-color var(--mousas-transition), color var(--mousas-transition), border-color var(--mousas-transition);
	background: var(--mousas-white);
}

.mousas-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.mousas-pagination .page-numbers:hover { border-color: var(--mousas-accent); background: color-mix(in oklab, var(--mousas-accent) 10%, white); }
.mousas-pagination .page-numbers.current { background: var(--mousas-primary); color: var(--mousas-white); border-color: var(--mousas-primary); }
.mousas-pagination .page-numbers.dots { border: 0; background: transparent; }

/* =============================================================================
 * 27. Blog — relacionados
 * ========================================================================== */

.mousas-section-related .mousas-section__head { margin-inline: auto; max-width: 60ch; text-align: center; }
.mousas-section-related .mousas-section__head .mousas-eyebrow,
.mousas-section-related .mousas-section__head h2 { margin-inline: auto; }