/*
 * Pagina de Servico (single-servico).
 * Carregada so em is_singular('servico') e no editor.
 * Tokens de theme.json; mobile-first.
 */

/* ---------- Hero ---------- */

.zf-servico__hero {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.zf-servico__hero .zafarie-breadcrumbs { margin-bottom: var(--wp--preset--spacing--40); }

.zf-servico__h1 {
	margin: 0;
	font-size: clamp(var(--wp--preset--font-size--xg), 5vw + 0.5rem, var(--wp--preset--font-size--2-xg));
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--branco);
	text-wrap: balance;
}

.zf-servico__resumo {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.6;
	color: var(--wp--preset--color--cinza-claro);
}

.zf-servico__resumo p { margin: 0; }

/* ---------- CTAs ---------- */

.zf-cta--hero { margin-top: var(--wp--preset--spacing--40); }

.zf-cta__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.zf-cta__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--wp--custom--raio--medio);
	transition: background-color var(--wp--custom--transicao--padrao), border-color var(--wp--custom--transicao--padrao);
}

.zf-cta__botao--principal { color: var(--wp--preset--color--branco); background: var(--wp--preset--color--roxo-acao); }
.zf-cta__botao--principal:hover { background: var(--wp--custom--roxo--400); }

.zf-cta__botao--secundario {
	color: var(--wp--preset--color--cinza-claro);
	border: 1px solid var(--wp--preset--color--cinza-borda);
}
.zf-cta__botao--secundario:hover { color: var(--wp--preset--color--branco); border-color: var(--wp--preset--color--roxo-claro); }

@media (max-width: 429px) {
	.zf-cta__botao { flex-grow: 1; }
}

/* ---------- Secoes do conteudo ---------- */

.zf-secao {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--grafite-claro);
}

.zf-secao h2,
.zf-faq__titulo,
.zf-cta__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.25;
	color: var(--wp--preset--color--branco);
}

.zf-secao :where(p, li) { line-height: 1.65; color: var(--wp--preset--color--cinza-claro); }
.zf-secao :where(ul, ol) { padding-left: 1.25em; }
.zf-secao li + li { margin-top: 0.5em; }

.zf-servico__tecnologias {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--cinza);
}
.zf-servico__tecnologias a { color: var(--wp--preset--color--roxo-claro); }

/* ---------- FAQ ---------- */

.zf-faq {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--grafite-claro);
}

.zf-faq__lista { border-top: 1px solid var(--wp--preset--color--grafite-claro); }

.zf-faq__item { border-bottom: 1px solid var(--wp--preset--color--grafite-claro); }

.zf-faq__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 44px;
	padding: var(--wp--preset--spacing--30) 0;
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--branco);
	cursor: pointer;
	list-style: none;
}

.zf-faq__pergunta::-webkit-details-marker { display: none; }

/* Sinal +/−: puramente visual; o estado aberto vem do proprio <details>. */
.zf-faq__pergunta::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--roxo-claro);
}

.zf-faq__item[open] > .zf-faq__pergunta::after { content: "−"; }
.zf-faq__pergunta:hover { color: var(--wp--preset--color--roxo-claro); }

.zf-faq__resposta { padding-bottom: var(--wp--preset--spacing--30); }
.zf-faq__resposta :where(p, li) { margin-top: 0; line-height: 1.65; color: var(--wp--preset--color--cinza-claro); }
.zf-faq__resposta a { color: var(--wp--preset--color--roxo-claro); }

/* ---------- CTA final ---------- */

.zf-cta--final {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--grafite);
	border: 1px solid var(--wp--preset--color--grafite-claro);
	border-radius: var(--wp--custom--raio--grande);
}

/* ---------- Pilar: lista de servicos da area ---------- */

.zf-servicos {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--grafite-claro);
}

.zf-servicos__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--grande);
	color: var(--wp--preset--color--branco);
}

.zf-servicos__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.zf-servicos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.zf-servicos__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	background: var(--wp--preset--color--grafite);
	border: 1px solid var(--wp--preset--color--grafite-claro);
	border-radius: var(--wp--custom--raio--grande);
	transition: border-color var(--wp--custom--transicao--padrao);
}

.zf-servicos__link:hover { border-color: var(--wp--preset--color--roxo-claro); }

.zf-servicos__nome {
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 600;
	color: var(--wp--preset--color--branco);
}

.zf-servicos__resumo {
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.55;
	color: var(--wp--preset--color--cinza);
}

/* ---------- Formulario de contato ---------- */

.zf-form-wrap {
	padding: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--grafite);
	border: 1px solid var(--wp--preset--color--grafite-claro);
	border-radius: var(--wp--custom--raio--grande);
}

.zf-form { display: grid; gap: var(--wp--preset--spacing--30); }

@media (min-width: 768px) {
	.zf-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); }
	.zf-form > :not(.zf-form__campo--nome, .zf-form__campo--email, .zf-form__campo--telefone, .zf-form__campo--empresa) { grid-column: 1 / -1; }
}

.zf-form__campo { display: flex; flex-direction: column; gap: 6px; }

.zf-form__campo label {
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	color: var(--wp--preset--color--cinza-claro);
}

.zf-form__obrig { color: var(--wp--preset--color--roxo-claro); }
.zf-form__opcional { font-weight: 400; color: var(--wp--preset--color--cinza); }

.zf-form :where(input, select, textarea) {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	font: inherit;
	/* Nunca abaixo de 16px: o iOS da zoom no foco de campos menores. */
	font-size: max(16px, var(--wp--preset--font-size--base));
	color: var(--wp--preset--color--branco);
	background: var(--wp--preset--color--preto);
	border: 1px solid var(--wp--preset--color--cinza-borda);
	border-radius: var(--wp--custom--raio--medio);
}

.zf-form textarea { min-height: 120px; resize: vertical; }
.zf-form :where(input, select, textarea):hover { border-color: var(--wp--preset--color--cinza); }
.zf-form [aria-invalid="true"] { border-color: #f87171; }

.zf-form__ajuda,
.zf-form__legenda,
.zf-form__aviso {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.5;
	color: var(--wp--preset--color--cinza);
}

.zf-form__aviso a { color: var(--wp--preset--color--roxo-claro); }

/* Vermelho claro sobre grafite: 6,4:1. */
.zf-form__erro { margin: 0; font-size: var(--wp--preset--font-size--pequeno); color: #fca5a5; }

.zf-form__contexto {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--roxo-claro);
}

/* Honeypot fora da tela e da ordem de foco. */
.zf-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zf-form__enviar {
	justify-self: start;
	min-height: 48px;
	padding: 0 24px;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--branco);
	background: var(--wp--preset--color--roxo-acao);
	border: 0;
	border-radius: var(--wp--custom--raio--medio);
	cursor: pointer;
}

.zf-form__enviar:hover { background: var(--wp--custom--roxo--400); }
.zf-form__enviar:disabled { opacity: 0.7; cursor: progress; }

@media (max-width: 429px) {
	.zf-form__enviar { justify-self: stretch; }
}

.zf-form__status:focus { outline: none; }
.zf-form__status:empty { display: none; }

.zf-form__msg {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 14px 16px;
	border-radius: var(--wp--custom--raio--medio);
	line-height: 1.5;
}

.zf-form__msg--sucesso { color: var(--wp--preset--color--branco); background: #0e7a3d; }
.zf-form__msg--erro { color: #fecaca; background: #3b1212; border: 1px solid #7f1d1d; }

.zf-contato__canais { padding-bottom: var(--wp--preset--spacing--60); }
.zf-contato__canais h2 { font-size: var(--wp--preset--font-size--grande); color: var(--wp--preset--color--branco); }

/* ---------- Arquivos (Cases, Segmentos): cards vindos do Query Loop ---------- */

.zf-arquivo .zf-servicos__lista { margin: 0; padding: 0; }
.zf-arquivo .zf-servicos__nome { margin: 0; line-height: 1.3; }
.zf-arquivo .zf-servicos__nome a { color: inherit; text-decoration: none; }
/* O card inteiro responde ao hover; o link real e o titulo. */
.zf-arquivo .zf-servicos__link { position: relative; }
.zf-arquivo .zf-servicos__nome a::after { content: ""; position: absolute; inset: 0; }
.zf-arquivo .zf-servicos__link:focus-within { border-color: var(--wp--preset--color--roxo-claro); }
.zf-arquivo .zf-servicos__resumo p { margin: 0; }
.zf-arquivo .wp-block-query-no-results { color: var(--wp--preset--color--cinza); }

/* ---------- Case: ficha, metricas e depoimento ---------- */

.zf-case-ficha {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--40) 0 0;
}
.zf-case-ficha dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--cinza); }
.zf-case-ficha dd { margin: 4px 0 0; color: var(--wp--preset--color--branco); font-weight: 600; }

.zf-metricas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.zf-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zf-metrica {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--grafite);
	border: 1px solid var(--wp--preset--color--grafite-claro);
	border-radius: var(--wp--custom--raio--grande);
}
.zf-secao .zf-metrica p { margin: 0; }
.zf-secao .zf-metrica__valor { font-size: var(--wp--preset--font-size--xg); font-weight: 700; line-height: 1.1; color: var(--wp--preset--color--branco); }
.zf-metrica__unidade { font-size: var(--wp--preset--font-size--base); font-weight: 600; color: var(--wp--preset--color--roxo-claro); }
.zf-secao .zf-metrica__rotulo { margin-top: 6px; font-weight: 600; color: var(--wp--preset--color--cinza-claro); }
.zf-secao .zf-metrica__contexto { margin-top: 2px; font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--cinza); }
.zf-metrica__como { margin-top: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--cinza); }
.zf-metrica__como summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--wp--preset--color--roxo-claro); }
.zf-metrica__como dl { margin: 0; }
.zf-metrica__como dt { font-weight: 600; color: var(--wp--preset--color--cinza-claro); }
.zf-metrica__como dd { margin: 0 0 8px; }

.zf-depoimento {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--roxo-claro);
	background: var(--wp--preset--color--grafite);
	border-radius: 0 var(--wp--custom--raio--grande) var(--wp--custom--raio--grande) 0;
}
.zf-depoimento blockquote { margin: 0; }
.zf-depoimento blockquote p { margin: 0; font-size: var(--wp--preset--font-size--medio); line-height: 1.6; color: var(--wp--preset--color--branco); }
.zf-depoimento figcaption { margin-top: var(--wp--preset--spacing--30); color: var(--wp--preset--color--cinza-claro); }
.zf-depoimento figcaption span { display: block; font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--cinza); }


/* ---------- Home (front-page) ---------- */

.zf-home__hero {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.zf-home__hero .zf-servico__h1 {
	font-size: clamp(var(--wp--preset--font-size--xg), 6vw + 0.5rem, var(--wp--preset--font-size--3-xg));
}

/* Etapas da metodologia em grade a partir do tablet. */
.zf-home .zf-secao--etapas ol {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
	padding-left: 0;
	list-style: none;
	counter-reset: etapa;
}

.zf-home .zf-secao--etapas li {
	counter-increment: etapa;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--grafite);
	border: 1px solid var(--wp--preset--color--grafite-claro);
	border-radius: var(--wp--custom--raio--grande);
}

.zf-home .zf-secao--etapas li::before {
	content: counter(etapa, decimal-leading-zero);
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	color: var(--wp--preset--color--roxo-claro);
}

@media (min-width: 600px) {
	.zf-home .zf-secao--etapas ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.zf-home__ver-todos { margin: var(--wp--preset--spacing--30) 0 0; }
.zf-home__ver-todos a { color: var(--wp--preset--color--roxo-claro); font-weight: 600; }

.zf-home .zf-secao--etapas li strong { display: block; margin-bottom: 4px; }