/* =====================================================================
   servicos.css , as DUAS superfícies de serviço: o bloco da Home
   (partials/bloco-servicos.php) e a página /o-que-fazemos
   (page-o-que-fazemos.php).

   POR QUE ESTE ARQUIVO EXISTE (e por que as classes têm nome novo)

   O bloco de serviços da Home era estilizado por um <style> dentro de
   front-page.php (`.ng-servicos`, `.ng-servico`, `.ng-servico__ico`…), e a
   página /o-que-fazemos usava `.ng-secao--faixa`, `.ng-secao__cabecalho`,
   `.ng-olho` e `.ng-link-mais` , que também só existem lá dentro. Duas
   consequências medidas:
     1. fora da Home, o partial e a página nasciam SEM metade do estilo: a
        alternância de faixa da /o-que-fazemos (o ritmo visual que o autor
        escreveu) simplesmente não acontecia. É boa parte do "sem vida alguma".
     2. CSS de uma tela morando no template de OUTRA tela é o caminho curto
        para as duas divergirem.

   Aqui as classes são `ng-serv*` , nome NOVO de propósito. Se eu reusasse
   `.ng-servico`, o <style> inline do front-page.php (que vem depois desta
   folha no documento, e que eu não devo editar) venceria por ordem de
   cascata e desfaria o redesenho em silêncio: exatamente o tipo de bug em
   que o build fica limpo e a tela fica errada.

   Depende de: style.css (tokens :root, .ng-container, .ng-secao) e
   componentes.css (.ng-titulo-secao, .ng-kicker, .ng-botao*, .ng-grade).
   Cor nenhuma é literal , tudo sai dos tokens (CONTRATO §7).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BLOCO DA HOME , 4 cartões de serviço
   --------------------------------------------------------------------- */

.ng-serv-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 28px;
	margin-bottom: clamp(24px, 4vw, 44px);
}
.ng-serv-topo .ng-titulo-secao { margin-bottom: 0; }

.ng-serv-topo__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ng-destaque);
	font-family: var(--ng-titulo);
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	white-space: nowrap;
}
.ng-serv-topo__link svg { width: 16px; height: 16px; transition: transform var(--ng-transicao); }
.ng-serv-topo__link:hover svg { transform: translateX(4px); }
.ng-serv-topo__link:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 4px; border-radius: 4px; }

.ng-serv-grade {
	display: grid;
	gap: clamp(16px, 2.4vw, 26px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.ng-serv-card {
	position: relative;               /* âncora do link esticado (__acao::after) */
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(22px, 2.6vw, 30px);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-lg);
	overflow: hidden;
	transition: transform var(--ng-transicao), border-color var(--ng-transicao), background-color var(--ng-transicao);
}
/* fio de luz no topo: aparece no hover e dá a "vida" que faltava sem custar layout */
.ng-serv-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ng-destaque), transparent 70%);
	opacity: 0;
	transition: opacity var(--ng-transicao);
}
.ng-serv-card:hover,
.ng-serv-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--ng-borda-forte);
	background: var(--ng-fundo-3);
}
.ng-serv-card:hover::before,
.ng-serv-card:focus-within::before { opacity: 1; }

.ng-serv-card__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.ng-serv-card__ico {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: rgba(158, 219, 254, .12);   /* véu da cor da marca; token não cobre alfa */
	color: var(--ng-destaque);
	transition: background-color var(--ng-transicao);
}
.ng-serv-card__ico svg { width: 27px; height: 27px; }
.ng-serv-card:hover .ng-serv-card__ico { background: rgba(158, 219, 254, .2); }

.ng-serv-card__num {
	font-family: var(--ng-titulo);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ng-borda-forte);          /* número é ritmo, não informação */
	letter-spacing: .04em;
}

.ng-serv-card__nome {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: 1.28rem;
	line-height: 1.2;
	color: var(--ng-branco);
	margin: 0;
}
.ng-serv-card__desc {
	margin: 0;
	color: var(--ng-tinta-fraca);
	line-height: 1.65;
	font-size: .95rem;
}

.ng-serv-card__acao {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ng-destaque);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
}
.ng-serv-card__acao svg { width: 15px; height: 15px; transition: transform var(--ng-transicao); }
.ng-serv-card:hover .ng-serv-card__acao svg { transform: translateX(4px); }
/* o cartão inteiro vira área de clique, sem aninhar <a> dentro de <a> */
.ng-serv-card__acao::after { content: ''; position: absolute; inset: 0; }
.ng-serv-card__acao:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 4px; border-radius: 4px; }

/* ---------------------------------------------------------------------
   2. PÁGINA /o-que-fazemos
   --------------------------------------------------------------------- */

.ng-serv-hero {
	padding-block: clamp(56px, 9vw, 104px) clamp(20px, 3vw, 32px);
	text-align: center;
}
.ng-serv-hero__interno { max-width: 780px; margin-inline: auto; }
.ng-serv-hero .ng-kicker { justify-content: center; }
.ng-serv-hero .ng-kicker::before { display: none; }
.ng-serv-hero__titulo {
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	font-size: clamp(2.1rem, 1rem + 4vw, 3.4rem);
	line-height: 1.08;
	margin: 14px 0 0;
}
.ng-serv-hero__lead {
	margin-top: 18px;
	color: var(--ng-tinta-fraca);
	font-size: clamp(1rem, .94rem + .35vw, 1.15rem);
	line-height: 1.7;
}

/* índice de âncoras: orienta antes de rolar 4 blocos de texto */
.ng-serv-indice {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(24px, 3.5vw, 36px);
}
.ng-serv-indice__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 17px;
	border-radius: var(--ng-raio-pill);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	color: var(--ng-tinta);
	font-size: .88rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--ng-transicao), color var(--ng-transicao), background-color var(--ng-transicao);
}
.ng-serv-indice__link svg { width: 16px; height: 16px; color: var(--ng-destaque); }
.ng-serv-indice__link:hover {
	color: var(--ng-branco);
	border-color: var(--ng-destaque);
	background: var(--ng-fundo-3);
}
.ng-serv-indice__link:focus-visible { outline: 3px solid var(--ng-destaque); outline-offset: 3px; }

/* o pilar. A faixa alternada é DAQUI , antes dependia de .ng-secao--faixa,
   que só existe dentro do front-page.php e por isso nunca pintou nesta página. */
.ng-serv-pilar {
	padding-block: clamp(44px, 7vw, 92px);
	scroll-margin-top: calc(var(--ng-nav-altura) + 16px);
}
.ng-serv-pilar--faixa { background: var(--ng-fundo-2); }

.ng-serv-pilar__grade {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: clamp(20px, 3.5vw, 48px);
	align-items: start;
}

.ng-serv-pilar__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	position: sticky;
	top: calc(var(--ng-nav-altura) + 24px);
}
.ng-serv-pilar__ico {
	width: 92px;
	height: 92px;
	display: grid;
	place-items: center;
	border-radius: 26px;
	background: rgba(158, 219, 254, .1);
	border: 1px solid var(--ng-borda-forte);
	color: var(--ng-destaque);
}
.ng-serv-pilar__ico svg { width: 44px; height: 44px; }
.ng-serv-pilar__num {
	font-family: var(--ng-titulo);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ng-tinta-fraca);
}

.ng-serv-pilar__nome {
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	font-size: clamp(1.7rem, 1.1rem + 2vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 14px;
}
.ng-serv-pilar__lead {
	margin: 0 0 20px;
	color: var(--ng-tinta);
	font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
	line-height: 1.6;
	max-width: 62ch;
}
.ng-serv-pilar__texto { color: var(--ng-tinta-fraca); line-height: 1.78; max-width: 64ch; }
.ng-serv-pilar__texto p { margin: 0 0 1.1em; }
.ng-serv-pilar__texto p:last-child { margin-bottom: 0; }

.ng-serv-pilar__lista {
	list-style: none;
	padding: 0;
	margin: 26px 0 0;
	display: grid;
	gap: 10px;
	max-width: 64ch;
}
.ng-serv-pilar__lista li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 14px;
	border-radius: var(--ng-raio-sm);
	background: var(--ng-fundo-3);
	border: 1px solid var(--ng-borda);
	color: var(--ng-tinta);
	font-size: .95rem;
	line-height: 1.45;
}
/* dentro da faixa o cartão da lista precisa de outro fundo, ou some no fundo */
.ng-serv-pilar--faixa .ng-serv-pilar__lista li { background: var(--ng-fundo); }
.ng-serv-pilar__lista svg { flex: none; width: 18px; height: 18px; color: var(--ng-ok); margin-top: 2px; }

.ng-serv-pilar__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: clamp(24px, 3vw, 34px);
}
.ng-serv-pilar__nota {
	margin: 0;
	color: var(--ng-tinta-fraca);
	font-size: .86rem;
	line-height: 1.5;
}

@media (max-width: 780px) {
	.ng-serv-pilar__grade { grid-template-columns: 1fr; }
	.ng-serv-pilar__aside {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
	.ng-serv-pilar__ico { width: 62px; height: 62px; border-radius: 18px; }
	.ng-serv-pilar__ico svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.ng-serv-card,
	.ng-serv-card::before,
	.ng-serv-card__ico,
	.ng-serv-card__acao svg,
	.ng-serv-topo__link svg,
	.ng-serv-indice__link { transition: none; }
	.ng-serv-card:hover,
	.ng-serv-card:focus-within { transform: none; }
	.ng-serv-card:hover .ng-serv-card__acao svg,
	.ng-serv-topo__link:hover svg { transform: none; }
	.ng-serv-pilar__aside { position: static; }
}