/* Brochura / Manual — estilo editorial + marca rosa→ciano */
.manual-brochure-wrap {
	--mb-rosa: #ff2bd6;
	--mb-ciano: #00f2ff;
	--mb-degrade: linear-gradient(135deg, #ff2bd6 0%, #00f2ff 100%);
	--mb-degrade-inv: linear-gradient(135deg, #00f2ff 0%, #ff2bd6 100%);
	--mb-vidro: linear-gradient(165deg, rgba(72, 12, 58, 0.92) 0%, rgba(28, 18, 48, 0.94) 40%, rgba(8, 42, 52, 0.95) 100%);
	--mb-texto: #1f2937;
	--mb-muted: #6b7280;
	position: relative;
	max-width: 980px;
	margin: 0 auto 24px;
	min-height: calc(100vh - 180px);
}
.manual-brochure {
	position: relative;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
	overflow: hidden;
	min-height: 620px;
}
.manual-page {
	display: none;
	padding: 0;
	min-height: 620px;
	animation: mbFade .28s ease;
}
.manual-page.is-active { display: block; }
@keyframes mbFade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Capa */
.mb-cover {
	display: flex;
	flex-direction: column;
	min-height: 620px;
}
.mb-cover-hero {
	flex: 1;
	min-height: 340px;
	background: var(--mb-vidro);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	display: flex;
	align-items: flex-end;
	padding: 36px 40px;
	position: relative;
	overflow: hidden;
}
.mb-cover-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--mb-degrade);
	opacity: .22;
	pointer-events: none;
}
.mb-cover-hero-inner { position: relative; z-index: 1; color: #fff; }
.mb-cover-kicker {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .85;
	margin-bottom: 10px;
}
.mb-cover-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 10px;
	letter-spacing: -.02em;
}
.mb-cover-sub {
	font-size: 15px;
	opacity: .9;
	max-width: 420px;
	margin: 0;
	line-height: 1.5;
}
.mb-cover-foot {
	padding: 28px 40px 32px;
	border-top: 4px solid transparent;
	border-image: var(--mb-degrade) 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.mb-cover-foot strong {
	font-size: 18px;
	background: var(--mb-degrade);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mb-cover-hint { font-size: 13px; color: var(--mb-muted); }

/* Páginas internas */
.mb-inner {
	padding: 36px 44px 48px;
}
.mb-bar {
	height: 4px;
	width: 72px;
	background: var(--mb-degrade);
	margin-bottom: 18px;
	border-radius: 2px;
}
.mb-h1 {
	font-size: 28px;
	font-weight: 800;
	color: var(--mb-texto);
	margin: 0 0 8px;
	letter-spacing: -.02em;
}
.mb-h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 22px 0 8px;
	color: var(--mb-texto);
}
.mb-lead {
	font-size: 14px;
	color: var(--mb-muted);
	line-height: 1.55;
	margin: 0 0 18px;
	max-width: 640px;
}
.mb-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 28px;
}
.mb-card {
	border: 1px solid rgba(15, 23, 42, 0.08);
	padding: 14px 16px;
	border-radius: 2px;
	background: #fafafa;
}
.mb-card h3 {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 6px;
	background: var(--mb-degrade);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mb-card p, .mb-card li {
	font-size: 13px;
	color: var(--mb-texto);
	line-height: 1.5;
	margin: 0;
}
.mb-card ul { margin: 0; padding-left: 16px; }
.mb-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mb-list li {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	align-items: flex-start;
}
.mb-list li:last-child { border-bottom: 0; }
.mb-num {
	flex: 0 0 36px;
	height: 36px;
	border-radius: 2px;
	background: var(--mb-degrade);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mb-list strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--mb-texto); }
.mb-list span { font-size: 13px; color: var(--mb-muted); line-height: 1.45; }
.mb-toc a {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	color: var(--mb-texto);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.mb-toc a:hover { color: var(--mb-rosa); }
.mb-toc a small { color: var(--mb-muted); font-weight: 500; }
.mb-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--mb-degrade);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	margin-right: 6px;
	margin-bottom: 4px;
}
.mb-note {
	margin-top: 18px;
	padding: 14px 16px;
	background: var(--mb-vidro);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 2px;
}

/* Setas */
.manual-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: var(--mb-degrade);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(255, 43, 214, 0.35);
	transition: transform .15s ease, background .2s ease;
}
.manual-nav-btn:hover {
	background: var(--mb-degrade-inv);
	transform: translateY(-50%) scale(1.06);
}
.manual-nav-btn:disabled {
	opacity: .35;
	cursor: default;
	transform: translateY(-50%);
	box-shadow: none;
}
.manual-nav-prev { left: -18px; }
.manual-nav-next { right: -18px; }
.manual-nav-btn i { font-size: 18px; }

.manual-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--mb-muted);
}
.manual-pager-dots {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
}
.manual-pager-dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #d1d5db;
	cursor: pointer;
}
.manual-pager-dots button.is-active {
	background: var(--mb-degrade);
	width: 18px;
	border-radius: 999px;
}

@media (max-width: 900px) {
	.mb-grid-2 { grid-template-columns: 1fr; }
	.mb-inner { padding: 24px 20px 36px; }
	.mb-cover-hero, .mb-cover-foot { padding-left: 20px; padding-right: 20px; }
	.manual-nav-prev { left: 6px; }
	.manual-nav-next { right: 6px; }
	.manual-nav-btn { width: 40px; height: 40px; }
}