.servicos__container {
	position: relative;
}

.servicos__card {
	width: 306px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	overflow: hidden;
	border: 1px solid #E2E2E2;
}

.servicos__image {
	display: block;
	width: 100%;
	aspect-ratio: 306 / 353;
	object-fit: cover;
}

.servicos__title {
	padding: 0 16px 16px;
	text-align: center;
	color: var(--cor-principal);
	font-family: var(--font-1, sans-serif);
	font-weight: 700;
	font-size: var(--fs-5);
}

/* Setas de navegação — sobrescreve o estilo padrão do swiper-helper.js só
   dentro deste bloco (classes .swiper-button geradas por ele, ver
   assets/js/swiper-helper.js). */
.servicos .swiper-button {
	width: 32px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cor-btn, var(--cor-principal));
	border-radius: 5px;
	color: var(--cor-branco);
}

/* Bolinhas de paginação — classes nativas do Swiper
   (.swiper-pagination-bullet[-active]), escopadas ao bloco. */
.servicos .swiper-pagination {
	bottom: -40px !important;
}

.servicos__items {
	position: unset !important;
}

/* Editor: sem Swiper de verdade (nunca carrega no admin — ver
   blocks/README.md § Swiper) — tira estreita com scroll horizontal simples
   no lugar do carrossel. */
.servicos-editor-wrap .servicos__items {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.servicos-editor-wrap .servicos__card {
	flex: 0 0 auto;
}

@media (max-width: 767px) {

	.servicos__container .container {
		padding-right: 0;
	}

	.servicos__container {
		padding: 0;
	}
}