.card-servico__box {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--cor-branco);
	border-radius: var(--radius-sm, 5px);
	overflow: hidden;
}

/* Ordem no DOM é sempre imagem primeiro, conteúdo depois (ver
   inc/blocks/card-servico.php) — o lado (esquerda/direita) é só CSS
   (flex-direction), nunca reordena o HTML. No mobile (1 coluna), força
   column: a imagem sempre fica em cima, não importa o lado escolhido. */
.card-servico--imagem-right .card-servico__box {
	flex-direction: row-reverse;
}

.card-servico--imagem-left .card-servico__box {
	flex-direction: row;
}

.card-servico__media {
	flex: 1 1 50%;
	min-height: 400px;
	background: #f0f0f0;
}

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

/* Só usado no preview do editor, antes de escolher uma imagem. */
.card-servico__media-placeholder {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .08);
}

.card-servico__content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: var(--spacing-lg, 48px);
}

.card-servico__title {
	margin: 0;
	font-family: var(--font-2, var(--font-1, inherit));
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1.15;
	color: var(--cor-secundaria, #bb423b);
}

.card-servico__subtitle {
	margin: 0;
	font-family: var(--font-1, inherit);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.2;
	color: var(--cor-secundaria, #bb423b);
}

.card-servico__description {
	font-family: var(--font-1, inherit);
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--cor-texto, #252525);
}

.card-servico__description > *:last-child {
	margin-bottom: 0;
}

.card-servico__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card-servico__list-item {
	display: flex;
	align-items: center;
	gap: 15px;
	font-family: var(--font-1, inherit);
	font-size: 1.25rem;
	color: var(--cor-texto, #252525);
}

.card-servico__list-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--cor-secundaria, #bb423b);
}

.card-servico__botao {
	margin-top: auto;
}

@media (max-width: 991px) {
	/* Mesma especificidade das regras --imagem-right/--imagem-left acima
	   (2 classes) pra vencer sem !important — como esta regra vem depois no
	   arquivo, empate de especificidade já favorece ela. */
	.card-servico--imagem-right .card-servico__box,
	.card-servico--imagem-left .card-servico__box {
		flex-direction: column;
	}

	.card-servico__media {
		flex-basis: auto;
		min-height: 280px;
	}

	.card-servico__content {
		padding: var(--spacing-md, 32px);
	}

	.card-servico__title {
		font-size: 2rem;
	}

	.card-servico__subtitle {
		font-size: 1.5rem;
	}
}