/*
 * Páginas internas: serviços, soluções e segmentos.
 * Referência: layout "Página interna Zafarie" aprovado em 23/09/2026.
 * Carregado só em single-servico e single-segmento.
 */

.zf-interna {
	--i-roxo: var(--wp--custom--roxo--400, #9a54f8);
	--i-roxo-acao: var(--wp--preset--color--roxo-acao, #7a1ef6);
	--i-roxo-link: #bd8efa;
	--i-borda: #25232f;
	--i-borda-roxa: #3b1d6e;
	--i-cartao: rgba(16, 15, 22, 0.92);
	--i-texto: #a1a1aa;
	--i-texto-claro: #c4c4cc;
	--i-branco: var(--wp--preset--color--branco, #fff);
	--i-brilho: 0 0 34px rgba(122, 30, 246, 0.45);
	--i-largura: 75rem;
	--i-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--i-faixa: clamp(3.5rem, 2rem + 5vw, 6.5rem);
	overflow-x: clip;
	color: #e4e4e7;
}

.zf-interna > * { margin-block: 0; }
.zf-interna *, .zf-interna *::before, .zf-interna *::after { box-sizing: border-box; }

/* ---------- Estrutura ---------- */

.zf-int-faixa { padding: var(--i-faixa) var(--i-gutter); }

.zf-int-conteiner { width: 100%; max-width: var(--i-largura); margin: 0 auto; }

.zf-int-faixa--par,
.zf-int-faixa--case { background: #0b0a10; border-block: 1px solid rgba(255, 255, 255, 0.05); }

.zf-int-faixa--segmentos { background: radial-gradient(520px 320px at 0% 50%, rgba(97, 9, 215, 0.22), rgba(10, 10, 11, 0) 70%); }
.zf-int-faixa--porque { background: radial-gradient(600px 320px at 50% 100%, rgba(97, 9, 215, 0.22), rgba(10, 10, 11, 0) 70%); }
.zf-int-faixa--relacionados { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* ---------- Tipografia ---------- */

.zf-interna h2 {
	margin: 0;
	font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.375rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--i-branco);
	text-wrap: balance;
}

.zf-interna h3 { color: var(--i-branco); }

.zf-int-destaque { color: var(--i-roxo); }

.zf-int-rotulo {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--i-roxo);
}

.zf-int-lead { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--i-texto); }

.zf-int-cabeca { display: flex; flex-direction: column; gap: 0.875rem; }

.zf-int-link-todos { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; color: var(--i-roxo-link); text-decoration: none; }
.zf-int-link-todos:hover { color: #d9bffc; text-decoration: underline; }

.zf-int-topo-lista { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.zf-int-topo-lista .zf-int-cabeca { max-width: 40rem; }

/* ---------- Ícones e cards ---------- */

.zf-int-icone {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #6109d7;
	background: #120227;
	color: var(--i-roxo);
	box-shadow: inset 0 0 18px rgba(122, 30, 246, 0.25);
}

.zf-int-card {
	height: 100%;
	padding: 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 18px;
	color: #e4e4e7;
	text-decoration: none;
}

a.zf-int-card { transition: border-color 0.2s, transform 0.2s; }
a.zf-int-card:hover { border-color: var(--i-borda-roxa); transform: translateY(-2px); color: #e4e4e7; }

.zf-int-item__titulo { display: block; font-size: 1.1875rem; line-height: 1.3; color: var(--i-branco); }
.zf-int-item__texto { display: block; font-size: 0.9375rem; line-height: 1.55; color: var(--i-texto); }

.zf-int-mais { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--i-roxo-link); text-decoration: none; }
a.zf-int-mais:hover { color: #d9bffc; }

.zf-int-grade { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.zf-int-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zf-int-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.zf-int-card--linha { flex-direction: row; align-items: center; gap: 1rem; border-radius: 16px; }
.zf-int-card--linha .zf-int-icone { width: 48px; height: 48px; }
.zf-int-card--linha .zf-int-item__titulo { font-size: 1.0625rem; margin-bottom: 0.25rem; }
.zf-int-card--linha .zf-int-item__texto { font-size: 0.875rem; }

.zf-int-card--link { padding: 1.5rem; }
.zf-int-card--link .zf-int-icone { width: 48px; height: 48px; }
.zf-int-card--link .zf-int-item__titulo { font-size: 1.125rem; }
.zf-int-card--link .zf-int-item__texto { font-size: 0.875rem; }

.zf-int-card--rel { flex-direction: row; align-items: center; padding: 1.375rem; border-radius: 16px; }
.zf-int-card--rel .zf-int-icone { width: 44px; height: 44px; }
.zf-int-card__corpo { flex-grow: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.zf-int-card--rel .zf-int-item__titulo { font-size: 1rem; }
.zf-int-card--rel .zf-int-item__texto { font-size: 0.8125rem; line-height: 1.45; }
.zf-int-card__seta { color: var(--i-roxo); display: inline-flex; }

/* ---------- Botões (CTA do plugin, restilizado) ---------- */

.zf-interna .zf-cta { margin: 0; }
.zf-interna .zf-cta__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.zf-interna .zf-cta__botao,
.zf-int-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 52px;
	padding: 0 1.625rem;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s, box-shadow 0.2s;
}

.zf-interna .zf-cta__botao--principal,
.zf-int-botao {
	background: var(--i-roxo-acao);
	color: var(--i-branco);
	box-shadow: var(--i-brilho);
}

.zf-interna .zf-cta__botao--principal::after,
.zf-int-botao::after {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.zf-interna .zf-cta__botao--principal:hover,
.zf-int-botao:hover { background: var(--wp--custom--roxo--600, #6109d7); color: var(--i-branco); }

.zf-interna .zf-cta__botao--secundario {
	background: transparent;
	border: 1px solid var(--i-roxo-acao);
	color: var(--i-branco);
}
.zf-interna .zf-cta__botao--secundario:hover { background: rgba(122, 30, 246, 0.14); color: var(--i-branco); }

.zf-int-botao--pilula { border-radius: 999px; padding: 0 1.75rem; }

/* ---------- Topo ---------- */

.zf-int-hero {
	padding: clamp(2rem, 1rem + 3vw, 3.5rem) var(--i-gutter) clamp(3.5rem, 2rem + 4vw, 6rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	background: radial-gradient(900px 420px at 50% -60px, rgba(97, 9, 215, 0.36), rgba(10, 10, 11, 0) 70%);
}

.zf-int-hero__texto {
	width: 100%;
	max-width: 57.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.375rem;
	text-align: center;
}

.zf-int-hero .zafarie-breadcrumbs { font-size: 0.8125rem; color: var(--i-texto); }
.zf-int-hero .zafarie-breadcrumbs ol { justify-content: center; }
.zf-int-hero .zafarie-breadcrumbs a { color: var(--i-texto); }
.zf-int-hero .zafarie-breadcrumbs a:hover { color: var(--i-branco); }

.zf-int-h1 {
	margin: 0;
	font-size: clamp(2.125rem, 1.2rem + 3.9vw, 3.625rem);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--i-branco);
	text-wrap: balance;
}

.zf-int-hero__resumo { margin: 0; max-width: 47.5rem; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem); line-height: 1.6; color: var(--i-texto-claro); }

.zf-int-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.zf-int-chips li { padding: 5px 12px; border: 1px solid var(--i-borda); border-radius: 999px; font-size: 0.75rem; color: var(--i-texto); }

.zf-int-hero .zf-cta { margin-top: 0.375rem; }

.zf-int-hero__moldura {
	width: 100%;
	max-width: 60rem;
	padding: 14px;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 22px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(97, 9, 215, 0.25);
}
.zf-int-hero__img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* ---------- Seções do editor ---------- */

.zf-interna .zf-secao { margin: 0; padding: 0; border: 0; max-width: none; }
.zf-interna .zf-secao > * { max-width: none; margin-left: 0; margin-right: 0; }
.zf-interna .zf-secao h2 { margin: 0; }
.zf-interna .zf-secao .zf-int-rotulo { margin-bottom: 0.875rem; }
.zf-interna .zf-secao :where(p) { margin: 1rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--i-texto); }
.zf-interna .zf-secao a { color: var(--i-roxo-link); }

/* Entregáveis: cards */
.zf-int-faixa--cards .zf-secao { display: flex; flex-direction: column; align-items: center; text-align: center; }
.zf-int-faixa--cards .zf-secao > p { max-width: 45rem; }
.zf-int-faixa--cards .zf-secao ul {
	width: 100%;
	margin: 2.75rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	text-align: left;
}
.zf-int-faixa--cards .zf-secao li {
	margin: 0;
	padding: 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 18px;
}
.zf-int-faixa--cards .zf-int-item__texto--unico { font-size: 1.0625rem; line-height: 1.5; color: #e4e4e7; }

/* Problema e benefícios lado a lado */
.zf-int-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 2rem; }
.zf-int-par .zf-secao {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 20px;
}
.zf-int-par .zf-secao h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.zf-int-par .zf-secao:nth-child(2) {
	background: radial-gradient(360px 260px at 100% 0%, rgba(122, 30, 246, 0.28), rgba(16, 15, 22, 0) 70%), var(--i-cartao);
	border-color: var(--i-borda-roxa);
}
.zf-int-par .zf-secao :where(ul, ol) { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.zf-int-par .zf-secao li {
	position: relative;
	margin: 0;
	padding: 0.875rem 0 0.875rem 2.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #e4e4e7;
	border-bottom: 1px solid var(--i-borda);
}
.zf-int-par .zf-secao li:last-child { border-bottom: 0; }
.zf-int-par .zf-secao li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8rem;
	width: 20px;
	height: 20px;
	background: #f59e0b;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Benefícios / abordagem: check roxo em círculo */
.zf-int-par :where(.zf-secao--beneficios, .zf-secao--abordagem) li { border-bottom: 0; padding-block: 0.4375rem; }
.zf-int-par :where(.zf-secao--beneficios, .zf-secao--abordagem) li::before {
	top: 0.375rem;
	width: 26px;
	height: 26px;
	border-radius: 99px;
	border: 1px solid #6109d7;
	-webkit-mask: none;
	mask: none;
	background: #120227 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a54f8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Processo: etapas numeradas ligadas por linha */
.zf-int-faixa--processo .zf-secao { display: flex; flex-direction: column; align-items: center; text-align: center; }
.zf-int-faixa--processo .zf-secao ol {
	--zf-colunas: 6;
	position: relative;
	width: 100%;
	margin: 3.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--zf-colunas), minmax(0, 1fr));
	gap: 2rem 1.25rem;
}
.zf-int-faixa--processo .zf-secao ol::before {
	content: "";
	position: absolute;
	left: calc(50% / var(--zf-colunas));
	right: calc(50% / var(--zf-colunas));
	top: 27px;
	height: 2px;
	background: var(--i-roxo);
	box-shadow: 0 0 10px 1px rgba(122, 30, 246, 0.7);
}
.zf-int-faixa--processo .zf-secao li { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.zf-int-passo__num {
	width: 56px;
	height: 56px;
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #120227;
	border: 1px solid var(--i-roxo-acao);
	box-shadow: 0 0 24px rgba(122, 30, 246, 0.5);
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--i-branco);
}
.zf-int-faixa--processo .zf-int-item__titulo { font-size: 1.0625rem; }
.zf-int-faixa--processo .zf-int-item__texto { font-size: 0.875rem; }

/* Demais seções (integrações etc.) */
.zf-int-faixa--texto .zf-int-conteiner { max-width: 50rem; display: flex; flex-direction: column; gap: 3.5rem; text-align: center; }
.zf-int-faixa--texto .zf-secao :where(ul, ol) { display: inline-block; margin: 1rem 0 0; text-align: left; color: var(--i-texto); }
.zf-int-faixa--texto .zf-secao li { line-height: 1.65; }

/* ---------- Segmentos ---------- */

.zf-int-card--link .zf-int-mais { color: var(--i-roxo-link); }

/* ---------- Por que ---------- */

.zf-int-faixa--porque .zf-int-cabeca { align-items: center; text-align: center; margin-bottom: 2.25rem; }

/* ---------- Frentes (carrossel comum) ---------- */

.zf-int-frentes {
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.75rem;
	background: radial-gradient(900px 380px at 50% 0%, rgba(97, 9, 215, 0.2), rgba(10, 10, 11, 0) 70%), #0c0b11;
}

.zf-int-frentes__cabeca { max-width: 56rem; padding-inline: var(--i-gutter); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.zf-int-frentes__cabeca h2 { font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.625rem); letter-spacing: -0.03em; }
.zf-int-frentes__cabeca .zf-int-lead { max-width: 38.75rem; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); }

.zf-int-frentes__palco { position: relative; width: 100%; }

.zf-int-frentes__trilho {
	--i-pad: max(var(--i-gutter), calc((100% - var(--i-largura)) / 2));
	margin: 0;
	padding: 0.25rem var(--i-pad) 0.5rem;
	list-style: none;
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--i-pad);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.zf-int-frentes__trilho::-webkit-scrollbar { display: none; }
.zf-int-frentes__trilho:focus-visible { outline: 2px solid var(--wp--preset--color--roxo-claro, #bd8efa); outline-offset: 4px; }

.zf-int-frente {
	width: min(23.75rem, 82vw);
	flex-shrink: 0;
	min-height: 31.25rem;
	padding: 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	scroll-snap-align: start;
	background: rgba(18, 17, 26, 0.92);
	border: 1px solid var(--i-borda);
	border-radius: 20px;
}

.zf-int-frente__topo { display: flex; gap: 0.875rem; align-items: flex-start; }
.zf-int-frente__icone { color: var(--i-roxo); flex-shrink: 0; }
.zf-int-frente h3 { margin: 0 0 0.5rem; font-size: 1.3125rem; line-height: 1.2; font-weight: 800; }
.zf-int-frente p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--i-texto); }

.zf-int-frente__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.zf-int-frente__lista li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: #e4e4e7; }
.zf-int-frente__check { color: var(--i-roxo); display: inline-flex; }

.zf-int-frente .zf-int-mais { margin-top: 0; }

/* Mini-ilustrações (decorativas) */
.zf-int-ilu { margin-top: auto; background: #0d0c13; border: 1px solid var(--i-borda); border-radius: 12px; }
.zf-int-ilu i, .zf-int-ilu b, .zf-int-ilu em { font-style: normal; }

.zf-int-ilu--loja { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.zf-int-ilu__pontos { display: flex; gap: 5px; }
.zf-int-ilu__pontos i { width: 6px; height: 6px; border-radius: 9px; background: #3a3848; }
.zf-int-ilu__banner { padding: 12px; display: flex; flex-direction: column; gap: 6px; background: radial-gradient(160px 80px at 80% 50%, rgba(122, 30, 246, 0.35), rgba(0, 0, 0, 0) 70%), #14121c; border-radius: 8px; }
.zf-int-ilu__banner b { font-size: 12px; font-weight: 800; color: var(--i-branco); }
.zf-int-ilu__banner i { height: 5px; width: 90px; border-radius: 3px; background: #3a3848; }
.zf-int-ilu__banner em { align-self: flex-start; padding: 4px 10px; border-radius: 6px; background: var(--i-roxo-acao); font-size: 9px; font-weight: 700; color: var(--i-branco); }
.zf-int-ilu__produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.zf-int-ilu__produtos > span { padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #17151f; border-radius: 8px; }
.zf-int-ilu__produtos i:nth-child(1) { height: 40px; border-radius: 6px; background: linear-gradient(135deg, #2b045f, #120227); }
.zf-int-ilu__produtos i:nth-child(2) { height: 5px; width: 70%; border-radius: 3px; background: #3a3848; }
.zf-int-ilu__produtos i:nth-child(3) { height: 5px; width: 40%; border-radius: 3px; background: #6109d7; }

.zf-int-ilu--etapas { padding: 0; display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--i-roxo); }
.zf-int-ilu--etapas > span { flex: 1; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: #14121c; border: 1px solid var(--i-borda); border-radius: 10px; font-size: 12px; color: #e4e4e7; }
.zf-int-ilu--etapas > span svg { color: var(--i-roxo); }
.zf-int-ilu--etapas > svg { flex-shrink: 0; }

.zf-int-ilu--grafico { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.zf-int-ilu--grafico small { font-size: 11px; color: var(--i-texto); }
.zf-int-ilu--grafico svg { width: 100%; height: 70px; }
.zf-int-ilu--grafico > span { display: flex; justify-content: space-between; font-size: 10px; color: #71717a; }

.zf-int-ilu--alvo { height: 130px; display: flex; align-items: center; justify-content: center; background: radial-gradient(120px 80px at 50% 50%, rgba(122, 30, 246, 0.45), rgba(0, 0, 0, 0) 70%), #0d0c13; color: var(--i-roxo-link); }

/* Controles */
.zf-int-frentes__seta {
	width: 44px;
	height: 44px;
	border-radius: 99px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 17, 26, 0.9);
	border: 1px solid #3a3848;
	color: var(--i-branco);
	cursor: pointer;
	transition: border-color 0.2s, opacity 0.2s;
}
.zf-int-frentes__seta:hover:not(:disabled) { border-color: var(--i-roxo); }
.zf-int-frentes__seta:disabled { opacity: 0.35; cursor: default; }
.zf-int-frentes__seta[hidden], .zf-int-frentes__pontos[hidden] { display: none; }

.zf-int-frentes__pontos { display: flex; justify-content: center; gap: 0.25rem; }

.zf-int-frentes__trilho { position: relative; }

.zf-int-frentes__pausa {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 99px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 17, 26, 0.9);
	border: 1px solid #3a3848;
	color: var(--i-texto-claro);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.zf-int-frentes__pausa:hover { border-color: var(--i-roxo); color: var(--i-branco); }
.zf-int-frentes__pausa[hidden] { display: none; }
.zf-int-frentes__icone-play,
.zf-int-frentes__pausa.esta-pausado .zf-int-frentes__icone-pausa { display: none; }
.zf-int-frentes__pausa.esta-pausado .zf-int-frentes__icone-play { display: block; }
.zf-int-frentes__pontos button {
	width: 24px;
	height: 24px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
}
.zf-int-frentes__pontos button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #3f3f46; transition: background 0.2s; }
.zf-int-frentes__pontos button[aria-current="true"]::before { background: var(--i-roxo); }

/* Mobile/tablet: setas ao lado dos pontos, abaixo do trilho */
.zf-int-frentes__palco { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 1rem; row-gap: 1.75rem; }
.zf-int-frentes__trilho { flex-basis: 100%; width: 100%; }

/* Desktop: setas nas laterais do trilho */
@media (min-width: 1024px) {
	.zf-int-frentes__seta { position: absolute; top: calc((100% - 24px - 1.75rem) / 2 - 22px); z-index: 1; }
	.zf-int-frentes__seta--ant { left: max(0.75rem, calc((100% - var(--i-largura)) / 2 - 3.75rem)); }
	.zf-int-frentes__seta--prox { right: max(0.75rem, calc((100% - var(--i-largura)) / 2 - 3.75rem)); }
}

.zf-int-frentes__cta { margin: 0; }

/* Ilustrações dos cards extras */
.zf-int-ilu--migracao { padding: 18px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zf-int-ilu--migracao > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: #e4e4e7; text-align: center; }
.zf-int-ilu--migracao b { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #14121c; border: 1px solid var(--i-borda); color: var(--i-texto); }
.zf-int-ilu--migracao > span:last-child b { background: #120227; border-color: #6109d7; color: var(--i-roxo); box-shadow: 0 0 20px rgba(122, 30, 246, 0.35); }
.zf-int-ilu--migracao > i { color: var(--i-roxo); display: inline-flex; }

.zf-int-ilu--implantacao { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.zf-int-ilu__barra { height: 8px; border-radius: 99px; background: #22212c; overflow: hidden; }
.zf-int-ilu__barra i { display: block; width: 78%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6109d7, #bd8efa); box-shadow: 0 0 12px rgba(122, 30, 246, 0.6); }
.zf-int-ilu__marcos { display: flex; justify-content: space-between; }
.zf-int-ilu__marcos em { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #e4e4e7; }
.zf-int-ilu__marcos em::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--i-roxo); }
.zf-int-ilu__marcos em:last-child::before { background: #3a3848; }

.zf-int-ilu--busca { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.zf-int-ilu__campo { height: 26px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-radius: 99px; background: #17151f; color: var(--i-texto); }
.zf-int-ilu__campo i { height: 5px; width: 50%; border-radius: 3px; background: #3a3848; }
.zf-int-ilu__resultado { padding: 7px 10px; display: flex; flex-direction: column; gap: 5px; border-radius: 8px; background: #14121c; }
.zf-int-ilu__resultado i { height: 5px; width: 80%; border-radius: 3px; background: #3a3848; }
.zf-int-ilu__resultado i + i { width: 55%; }
.zf-int-ilu__resultado--1 { background: radial-gradient(140px 60px at 90% 50%, rgba(122, 30, 246, 0.3), rgba(0, 0, 0, 0) 70%), #14121c; border: 1px solid #3b1d6e; }
.zf-int-ilu__resultado b { font-size: 11px; color: #d9bffc; }

.zf-int-ilu--escudo { height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(120px 80px at 50% 40%, rgba(122, 30, 246, 0.4), rgba(0, 0, 0, 0) 70%), #0d0c13; color: var(--i-roxo-link); }
.zf-int-ilu--escudo > span { display: flex; gap: 6px; }
.zf-int-ilu--escudo em { padding: 3px 9px; border-radius: 99px; border: 1px solid #3b1d6e; background: #120227; font-size: 10px; font-weight: 700; color: #d9bffc; }

.zf-int-ilu--velocidade { padding: 16px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zf-int-ilu--velocidade svg { width: 130px; height: 72px; }
.zf-int-ilu--velocidade small { font-size: 11px; color: var(--i-texto); }

.zf-int-ilu--telas { height: 130px; padding: 0 14px 16px; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.zf-int-ilu--telas > span { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: #14121c; border: 1px solid #3a3848; }
.zf-int-ilu--telas i { height: 5px; border-radius: 3px; background: #3a3848; }
.zf-int-ilu--telas i:first-child { height: 22px; background: linear-gradient(135deg, #2b045f, #120227); }
.zf-int-ilu__desktop { width: 120px; height: 78px; border-radius: 8px; }
.zf-int-ilu__tablet { width: 58px; height: 74px; border-radius: 8px; }
.zf-int-ilu__celular { width: 36px; height: 62px; border-radius: 8px; border-color: #6109d7 !important; box-shadow: 0 0 16px rgba(122, 30, 246, 0.4); }

.zf-int-ilu--uptime { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.zf-int-ilu__status { align-self: flex-start; padding: 4px 10px; display: flex; align-items: center; gap: 6px; border-radius: 99px; background: #120227; border: 1px solid #3b1d6e; font-size: 11px; font-weight: 700; color: #d9bffc; }
.zf-int-ilu__status i { width: 7px; height: 7px; border-radius: 99px; background: var(--i-roxo); box-shadow: 0 0 8px var(--i-roxo); }
.zf-int-ilu__barras { display: flex; gap: 3px; height: 28px; align-items: stretch; }
.zf-int-ilu__barras i { flex: 1; border-radius: 2px; background: #6109d7; opacity: 0.85; }
.zf-int-ilu__barras i:nth-child(3n) { opacity: 0.6; }
.zf-int-ilu--uptime small { font-size: 11px; color: var(--i-texto); }

/* ---------- Case ---------- */

.zf-int-faixa--case .zf-int-cabeca { margin-bottom: 2rem; }

.zf-int-case {
	display: grid;
	grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr);
	background: #121019;
	border: 1px solid var(--i-borda);
	border-radius: 20px;
	overflow: hidden;
	color: #e4e4e7;
	text-decoration: none;
}
.zf-int-case:hover { border-color: var(--i-borda-roxa); color: #e4e4e7; }
.zf-int-case__midia { min-height: 16.25rem; background: radial-gradient(260px 160px at 50% 100%, rgba(122, 30, 246, 0.35), rgba(18, 2, 39, 0) 70%), #120227; }
.zf-int-case__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zf-int-case__texto { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.zf-int-case__setor { font-size: 0.8125rem; font-weight: 600; color: var(--i-roxo); }
.zf-int-case__titulo { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.25; font-weight: 800; color: var(--i-branco); }
.zf-int-case .zf-int-mais { margin-top: 0.25rem; }

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

.zf-int-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.zf-int-faq .zf-int-cabeca { position: sticky; top: 7rem; gap: 1rem; }

.zf-interna .zf-faq { margin: 0; padding: 0; border: 0; }
.zf-interna .zf-faq__lista { margin: 0; border: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.zf-interna .zf-faq__item { background: var(--i-cartao); border: 1px solid var(--i-borda); border-radius: 16px; transition: border-color 0.2s; }
.zf-interna .zf-faq__item[open] { border-color: #6109d7; }

.zf-interna .zf-faq__pergunta {
	min-height: 70px;
	padding: 0.875rem 1.25rem 0.875rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--i-branco);
	cursor: pointer;
	list-style: none;
}
.zf-interna .zf-faq__pergunta::-webkit-details-marker { display: none; }
.zf-interna .zf-faq__pergunta:hover { color: var(--i-branco); }
.zf-interna .zf-faq__pergunta::after {
	content: "";
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid #6109d7;
	background: #120227 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a54f8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.zf-interna .zf-faq__item[open] > .zf-faq__pergunta::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a54f8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.zf-interna .zf-faq__resposta { padding: 0 4.5rem 1.25rem 1.5rem; }
.zf-interna .zf-faq__resposta :where(p, li) { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.65; color: var(--i-texto); }
.zf-interna .zf-faq__resposta :where(p, li):last-child { margin-bottom: 0; }
.zf-interna .zf-faq__resposta a { color: var(--i-roxo-link); }

/* ---------- Chamada final ---------- */

.zf-int-faixa--cta {
	padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
	background: radial-gradient(760px 340px at 50% 50%, rgba(97, 9, 215, 0.34), rgba(10, 10, 11, 0) 70%);
}
.zf-int-faixa--cta .zf-int-conteiner { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; text-align: center; }
.zf-int-faixa--cta h2 { max-width: 48.75rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.1; letter-spacing: -0.035em; }
.zf-int-faixa--cta .zf-int-lead { max-width: 35rem; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); color: var(--i-texto-claro); }
.zf-int-faixa--cta .zf-cta { margin-top: 0.375rem; }
.zf-int-cta__contatos { margin: 0; font-size: 0.875rem; color: var(--i-texto); }
.zf-int-cta__contatos a { color: var(--i-texto); text-decoration: none; }
.zf-int-cta__contatos a:hover { color: var(--i-branco); text-decoration: underline; }

/* ---------- Responsivo ---------- */

@media (max-width: 1023px) {
	.zf-int-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-int-grade--3 { grid-template-columns: 1fr; }
	.zf-int-faixa--cards .zf-secao ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-int-faixa--processo .zf-secao ol { grid-template-columns: repeat(min(var(--zf-colunas), 3), minmax(0, 1fr)); }
	.zf-int-faixa--processo .zf-secao ol::before { display: none; }
	.zf-int-faq { grid-template-columns: 1fr; }
	.zf-int-faq .zf-int-cabeca { position: static; }
}

@media (max-width: 767px) {
	.zf-int-grade--4,
	.zf-int-faixa--cards .zf-secao ul { grid-template-columns: 1fr; }
	.zf-int-faixa--cards .zf-secao li { padding: 1.375rem; }

	/* Etapas em lista vertical com a linha à esquerda */
	.zf-int-faixa--processo .zf-secao { align-items: stretch; text-align: left; }
	.zf-int-faixa--processo .zf-secao > :is(h2, p, .zf-int-rotulo) { text-align: center; }
	.zf-int-faixa--processo .zf-secao ol { grid-template-columns: 1fr; gap: 1.5rem; }
	.zf-int-faixa--processo .zf-secao ol::before { display: block; left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
	.zf-int-faixa--processo .zf-secao li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.25rem; align-items: start; }
	.zf-int-passo__num { grid-row: span 2; }
	.zf-int-faixa--processo .zf-int-item__titulo { align-self: end; padding-top: 0.5rem; }

	.zf-int-case { grid-template-columns: 1fr; }
	.zf-int-case__midia { min-height: 11rem; }

	.zf-interna .zf-faq__pergunta { min-height: 60px; font-size: 1rem; padding-left: 1.125rem; }
	.zf-interna .zf-faq__resposta { padding: 0 1.125rem 1.125rem; }

	.zf-interna .zf-cta__botoes { flex-direction: column; align-items: stretch; width: 100%; }
	.zf-int-hero .zf-cta,
	.zf-int-faixa--cta .zf-cta { width: 100%; }

	.zf-int-topo-lista { margin-bottom: 1.75rem; }
}
