/* ==========================================================================
   Pagina de servicos de design
   Depende dos tokens de css/design-system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.lv-topo-design.planos-section {
	padding: 190px 0 70px;
	text-align: center;
}

.lv-topo-design h1 {
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	line-height: 1.22;
	margin: 0 auto 14px;
	max-width: 820px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.lv-topo-design h1 strong {
	color: var(--lv-amarelo);
	font-weight: 700;
}

.lv-topo-design p {
	font-size: 17px;
	color: rgba(255, 255, 255, .95);
	max-width: 640px;
	margin: 0 auto 26px;
	line-height: 1.5;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   Galerias (categorias que abrem os exemplos)
   -------------------------------------------------------------------------- */
.lv-galerias {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.lv-galeria {
	flex: 1 1 190px;
	max-width: 230px;
	background: #fff;
	border: 1px solid var(--lv-cinza-borda);
	border-radius: var(--lv-raio);
	padding: 22px 16px 18px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lv-galeria:hover,
.lv-galeria:focus {
	border-color: var(--lv-verde);
	box-shadow: var(--lv-sombra);
	text-decoration: none;
	color: inherit;
	transform: translateY(-2px);
}

.lv-galeria svg {
	width: 62px;
	height: 62px;
	display: block;
	margin: 0 auto 12px;
}

.lv-galeria strong {
	display: block;
	font-size: 15.5px;
	color: var(--lv-verde-escuro);
	margin-bottom: 4px;
}

.lv-galeria span {
	display: block;
	font-size: 12.5px;
	color: var(--lv-texto-suave);
}

@media (prefers-reduced-motion: reduce) {
	.lv-galeria:hover,
	.lv-galeria:focus { transform: none; }
}

/* --------------------------------------------------------------------------
   Servicos e precos
   Antes eram duas marcacoes: uma tabela de 6 colunas no desktop e uma lista
   repetida no mobile. Agora e um cartao por servico, igual nos dois.
   -------------------------------------------------------------------------- */
.lv-servicos {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	max-width: 1000px;
	margin: 0 auto;
}

.lv-servico {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--lv-cinza-borda);
	border-radius: var(--lv-raio);
	padding: 24px 22px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.lv-servico:hover {
	border-color: var(--lv-verde);
	box-shadow: var(--lv-sombra);
}

.lv-servico h3 {
	font-size: 17.5px;
	font-weight: 700;
	color: var(--lv-verde-escuro);
	margin: 0 0 10px;
	line-height: 1.3;
}

.lv-servico .lv-servico-preco {
	font-size: 25px;
	font-weight: 700;
	color: var(--lv-texto);
	line-height: 1.1;
}

.lv-servico .lv-servico-preco small {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--lv-texto-suave);
	margin-top: 3px;
}

.lv-servico .lv-servico-parcela {
	font-size: 13px;
	color: var(--lv-texto-suave);
	margin: 6px 0 14px;
}

.lv-servico p {
	font-size: 14px;
	color: var(--lv-texto-suave);
	line-height: 1.55;
	flex: 1 1 auto;
	margin: 0 0 16px;
}

.lv-servico .lv-servico-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

.lv-servico .lv-servico-acoes .lv-btn {
	flex: 1 1 110px;
	font-size: 14px;
	padding: 10px 14px;
	white-space: nowrap;
}

.lv-btn-suave {
	background: var(--lv-verde-claro);
	border-color: var(--lv-verde-claro);
	color: var(--lv-verde-escuro);
}

.lv-btn-suave:hover,
.lv-btn-suave:focus {
	background: #d5ebdf;
	border-color: #d5ebdf;
	color: var(--lv-verde-escuro);
}

.lv-servicos-obs {
	max-width: 1000px;
	margin: 22px auto 0;
	font-size: 13px;
	color: var(--lv-texto-suave);
	text-align: center;
}

/* sublinhado explicito: o link nao pode se distinguir so pela cor */
.lv-servicos-obs a {
	color: var(--lv-verde-escuro);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.lv-topo-design.planos-section {
		padding: 138px 0 48px;
	}

	.lv-topo-design h1 {
		font-size: 25px;
	}

	.lv-topo-design p {
		font-size: 15px;
	}

	.lv-galeria {
		flex-basis: 140px;
		padding: 16px 10px 14px;
	}

	.lv-galeria svg {
		width: 46px;
		height: 46px;
	}

	.lv-galeria strong {
		font-size: 14px;
	}
}