.avia-manual-macaneta {
	--avia-azul: #08689f;
	--avia-azul-escuro: #003c61;
	--avia-amarelo: #ffc400;
	--avia-cinza: #e3e8ec;
	--avia-texto: #17212b;

	width: min(100%, 520px);
	margin: 30px auto;
	color: var(--avia-texto);
	font-family: Arial, Helvetica, sans-serif;
}

.avia-manual-macaneta * {
	box-sizing: border-box;
}

.avia-manual-cabecalho {
	margin-bottom: 18px;
	text-align: center;
}

.avia-manual-etiqueta {
	display: inline-block;
	margin-bottom: 8px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--avia-amarelo);
	color: #111;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.avia-manual-cabecalho h2 {
	margin: 0;
	color: var(--avia-azul-escuro);
	font-size: clamp(25px, 6vw, 34px);
	font-weight: 800;
}

.avia-manual-cabecalho p {
	max-width: 430px;
	margin: 8px auto 0;
	color: #607080;
	font-size: 15px;
	line-height: 1.5;
}

.avia-manual-visualizador {
	overflow: hidden;
	padding: 14px;
	border: 1px solid #e3e9ed;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 12px 35px rgba(0, 36, 61, 0.13);
}

.avia-manual-telas {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: #f4f6f8;
	touch-action: pan-y;
}

.avia-manual-slide {
	display: none;
	opacity: 0;
	transform: translateX(18px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.avia-manual-slide.esta-ativo {
	display: block;
	opacity: 1;
	transform: translateX(0);
}

.avia-manual-slide.saindo-esquerda {
	opacity: 0;
	transform: translateX(-25px);
}

.avia-manual-slide.saindo-direita {
	opacity: 0;
	transform: translateX(25px);
}

.avia-manual-imagem-container {
	display: grid;
	place-items: center;
	min-height: 480px;
	padding: 10px;
	background:
		linear-gradient(180deg, #f8fafb 0%, #eef2f4 100%);
}

.avia-manual-imagem {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 67vh;
	margin: auto;
	object-fit: contain;
	border-radius: 16px;
	user-select: none;
	-webkit-user-drag: none;
}

.avia-manual-conteudo {
	padding: 18px 18px 20px;
	background: #fff;
	text-align: center;
}

.avia-manual-passo {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--avia-azul);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

.avia-manual-conteudo h3 {
	margin: 0 0 7px;
	color: var(--avia-azul-escuro);
	font-size: 21px;
	font-weight: 800;
}

.avia-manual-conteudo p {
	margin: 0;
	color: #536473;
	font-size: 15px;
	line-height: 1.55;
}

.avia-manual-navegacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 16px;
}

.avia-manual-seta {
	width: 39px;
	height: 39px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid #d9e1e6;
	border-radius: 50%;
	background: #fff;
	color: var(--avia-azul);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 45, 73, 0.1);
	transition:
		transform 0.15s ease,
		background 0.15s ease;
}

.avia-manual-seta:hover:not(:disabled) {
	background: #eef8ff;
	transform: scale(1.05);
}

.avia-manual-seta:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.avia-manual-indicadores {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.avia-manual-bolinha {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d2dbe2;
	cursor: pointer;
	transition:
		width 0.2s ease,
		background 0.2s ease;
}

.avia-manual-bolinha.esta-ativa {
	width: 20px;
	border-radius: 999px;
	background: var(--avia-azul);
}

.avia-manual-progresso {
	height: 4px;
	overflow: hidden;
	margin-top: 16px;
	border-radius: 999px;
	background: #e8edf0;
}

.avia-manual-progresso-barra {
	height: 100%;
	border-radius: inherit;
	background:
		linear-gradient(
			90deg,
			var(--avia-azul),
			#20a4ee
		);
	transition: width 0.3s ease;
}

.avia-manual-contador {
	margin: 9px 0 0;
	color: #74828d;
	text-align: center;
	font-size: 12px;
}

@media (max-width: 600px) {
	.avia-manual-macaneta {
		width: 100%;
		margin: 15px auto;
	}

	.avia-manual-visualizador {
		padding: 9px;
		border-radius: 18px;
	}

	.avia-manual-imagem-container {
		min-height: 390px;
		padding: 6px;
	}

	.avia-manual-imagem {
		max-height: 62vh;
	}

	.avia-manual-conteudo {
		padding: 15px 12px 17px;
	}

	.avia-manual-conteudo h3 {
		font-size: 19px;
	}
}