/*
 * Página /segmentos/ (landing de segmentos). Complementa interna.css e servicos-hub.css.
 * Referência: layout "Página Segmentos (landing) Zafarie" aprovado em 24/09/2026.
 */

/* ---------- Topo: painel com os segmentos ---------- */

.zf-seg-painel {
	padding: 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	background: radial-gradient(420px 300px at 50% 60%, rgba(122, 30, 246, 0.26), rgba(16, 15, 22, 0) 70%), var(--i-cartao);
	border: 1px solid var(--i-borda-roxa);
	border-radius: 24px;
	box-shadow: 0 0 80px rgba(122, 30, 246, 0.2);
}
.zf-seg-painel__grupo { display: flex; flex-direction: column; gap: 0.625rem; }
.zf-seg-painel__rotulo { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #71717a; }
.zf-seg-painel ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.zf-seg-painel li { display: flex; }
.zf-seg-painel__div { display: flex; align-items: center; gap: 0.75rem; }
.zf-seg-painel__div::before,
.zf-seg-painel__div::after { content: ""; flex: 1; height: 1px; background: #2a2833; }

.zf-seg-tile {
	width: 100%;
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #0d0c13;
	border: 1px solid var(--i-borda);
	border-radius: 16px;
	color: var(--i-branco);
	text-decoration: none;
	transition: border-color 0.2s, transform 0.2s;
}
.zf-seg-tile:hover { border-color: var(--i-borda-roxa); transform: translateY(-2px); color: var(--i-branco); }
.zf-seg-tile .zf-int-icone { width: 44px; height: 44px; flex-shrink: 0; }
.zf-seg-tile strong { font-size: 1rem; line-height: 1.25; }

/* ---------- Grupos e cards ---------- */

.zf-seg-grupo--modelo { background: radial-gradient(560px 360px at 0% 20%, rgba(97, 9, 215, 0.2), rgba(10, 10, 11, 0) 70%); }
.zf-seg-grupo--setor { background: #0b0a10; border-block: 1px solid rgba(255, 255, 255, 0.05); }
.zf-seg-grupo .zf-int-cabeca { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

.zf-seg-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.zf-seg-cards > li { display: flex; }

.zf-seg-card {
	width: 100%;
	padding: 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 22px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.zf-seg-card--grande { padding: 2rem; }
.zf-seg-card:hover { border-color: var(--i-borda-roxa); box-shadow: 0 0 40px rgba(122, 30, 246, 0.14); }
.zf-seg-card__topo { display: flex; align-items: center; gap: 0.875rem; }
.zf-seg-card__topo .zf-int-icone { width: 52px; height: 52px; flex-shrink: 0; }
.zf-seg-card--grande .zf-seg-card__topo .zf-int-icone { width: 56px; height: 56px; }
.zf-seg-card__topo > div { display: flex; flex-direction: column; gap: 0.25rem; }
.zf-seg-card__tipo { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--i-roxo); }
.zf-seg-card h3 { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--i-branco); }
.zf-seg-card--grande h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.zf-seg-card__resumo { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--i-texto); }

.zf-seg-card__caixa { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.625rem; background: #0d0c13; border: 1px solid var(--i-borda); border-radius: 14px; }
.zf-seg-card__rotulo { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8b8b96; }
.zf-seg-card__desafios { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.zf-seg-card__desafios li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.45; color: #e4e4e7; }
.zf-seg-card__desafios svg { flex-shrink: 0; margin-top: 1px; }

.zf-seg-card__servicos { display: flex; flex-direction: column; gap: 0.625rem; }
.zf-seg-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.zf-seg-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 0.75rem;
	border: 1px solid #3a3848;
	border-radius: 999px;
	background: #14121c;
	font-size: 0.8125rem;
	color: #e4e4e7;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s, color 0.2s;
}
.zf-seg-chips a:hover { border-color: var(--i-roxo); color: var(--i-branco); }
.zf-seg-card__link { margin-top: auto; padding-top: 0.375rem; white-space: normal; }

/* ---------- Outro segmento ---------- */

.zf-seg-outro { padding: 0 var(--i-gutter) var(--i-faixa); background: radial-gradient(700px 360px at 50% 0%, rgba(97, 9, 215, 0.12), rgba(10, 10, 11, 0) 70%); }
.zf-seg-outro__caixa {
	padding: 2.25rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	background: linear-gradient(100deg, #1a0638, #0d0c13 70%);
	border: 1px solid var(--i-borda-roxa);
	border-radius: 22px;
}
.zf-seg-outro__texto { display: flex; align-items: center; gap: 1.125rem; }
.zf-seg-outro__texto .zf-int-icone { width: 56px; height: 56px; flex-shrink: 0; }
.zf-seg-outro__texto > div { display: flex; flex-direction: column; gap: 0.375rem; }
.zf-seg-outro h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); line-height: 1.25; color: var(--i-branco); }
.zf-seg-outro p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--i-texto); }
.zf-seg-outro .zf-int-botao { flex-shrink: 0; min-height: 48px; }

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

@media (max-width: 1100px) {
	.zf-seg-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.zf-seg-painel { padding: 0.875rem; gap: 1rem; }
	.zf-seg-tile { flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 0.75rem; }
	.zf-seg-tile .zf-int-icone { width: 38px; height: 38px; }
	.zf-seg-tile strong { font-size: 0.875rem; }
	.zf-seg-card,
	.zf-seg-card--grande { padding: 1.25rem; }
	.zf-seg-outro__caixa { flex-direction: column; align-items: stretch; padding: 1.5rem 1.25rem; }
	.zf-seg-outro__texto { align-items: flex-start; }
	.zf-seg-outro .zf-int-botao { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
	.zf-seg .zf-hub-contato__pontos { align-self: center; align-items: flex-start; }
	.zf-seg .zf-hub-contato__pontos li { justify-content: flex-start; text-align: left; }
}

/* =====================================================================
 * Página de cada segmento (/segmentos/<slug>/)
 * Referência: layout "Página de segmento (Marketing B2B)" aprovado em 24/09/2026.
 * ================================================================== */

.zf-segp-cabeca { align-items: flex-start; text-align: left; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.zf-segp-cabeca .zf-int-lead { max-width: 40rem; }
.zf-segp-faixa--alt { background: #0b0a10; border-block: 1px solid rgba(255, 255, 255, 0.05); }
.zf-segp-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.zf-segp-topo .zf-int-cabeca { margin-bottom: 0; }
.zf-segp-topo .zf-int-mais { margin-top: 0; white-space: nowrap; }

/* Topo */
.zf-segp-hero__tipo { margin: 0; display: flex; align-items: center; gap: 0.625rem; }
.zf-segp-hero__tipo .zf-int-icone { width: 40px; height: 40px; flex-shrink: 0; }
.zf-segp-hero .zf-int-h1 { font-size: clamp(2.125rem, 1.3rem + 3.2vw, 3.375rem); line-height: 1.06; }
.zf-segp-checks { margin: 0.25rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.zf-segp-checks li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: #e4e4e7; text-align: left; }
.zf-segp-checks svg { flex-shrink: 0; }

.zf-segp-jornada {
	padding: 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	background: radial-gradient(420px 320px at 70% 30%, rgba(122, 30, 246, 0.28), rgba(16, 15, 22, 0) 70%), var(--i-cartao);
	border: 1px solid var(--i-borda-roxa);
	border-radius: 24px;
	box-shadow: 0 0 80px rgba(122, 30, 246, 0.2);
}
.zf-segp-jornada__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.zf-segp-jornada__topo p { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.zf-segp-jornada__topo p span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #8b8b96; }
.zf-segp-jornada__topo strong { font-size: 1.1875rem; color: var(--i-branco); }
.zf-segp-jornada__topo > span { display: flex; flex-shrink: 0; }
.zf-segp-jornada__lista { margin: 0; padding: 0; list-style: none; }
.zf-segp-jornada__etapa {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	column-gap: 0.875rem;
	row-gap: 0.5rem;
	padding-bottom: 1.375rem;
}
.zf-segp-jornada__etapa:last-child { padding-bottom: 0; }
.zf-segp-jornada__etapa:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 25px;
	top: 52px;
	bottom: 0;
	width: 2px;
	background: linear-gradient(var(--i-roxo-acao), rgba(122, 30, 246, 0.2));
}
.zf-segp-jornada__etapa > .zf-int-icone { grid-row: span 2; width: 52px; height: 52px; }
.zf-segp-jornada__titulo { margin: 0; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; }
.zf-segp-jornada__titulo strong { font-size: 1.125rem; color: var(--i-branco); }
.zf-segp-jornada__titulo span { font-size: 0.875rem; color: var(--i-texto); }
.zf-segp-jornada .zf-seg-chips { gap: 0.375rem; }
.zf-segp-jornada .zf-seg-chips a { min-height: 28px; padding: 0 0.625rem; font-size: 0.75rem; }

/* Desafios */
.zf-segp-desafios { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.zf-segp-desafio {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 18px;
}
.zf-segp-desafio__topo { display: flex; align-items: center; justify-content: space-between; }
.zf-segp-desafio__topo .zf-int-icone { width: 48px; height: 48px; }
.zf-segp-desafio__n { font-size: 0.8125rem; font-weight: 700; color: #52506a; }
.zf-segp-desafio strong { font-size: 1.125rem; line-height: 1.3; color: var(--i-branco); }
.zf-segp-desafio > span:last-child { font-size: 0.875rem; line-height: 1.55; color: var(--i-texto); }

/* Como ajudamos */
.zf-segp-ajuda { background: radial-gradient(560px 360px at 0% 30%, rgba(97, 9, 215, 0.2), rgba(10, 10, 11, 0) 70%); }
.zf-segp-ajuda__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: start; }
.zf-segp-ajuda__intro { position: sticky; top: calc(var(--zf-altura-cabecalho, 80px) + 32px); display: flex; flex-direction: column; gap: 1.125rem; }
.zf-segp-ajuda__intro .zf-int-cabeca { margin-bottom: 0; }
.zf-segp-ajuda__intro .zf-int-mais { margin-top: 0; }
.zf-segp-frentes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.zf-segp-frente {
	padding: 1.375rem 1.625rem;
	display: grid;
	grid-template-columns: 64px 52px minmax(0, 1fr);
	column-gap: 1.125rem;
	align-items: center;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 18px;
}
.zf-segp-frente__n { font-size: 2.125rem; font-weight: 800; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px var(--i-roxo-acao); }
.zf-segp-frente .zf-int-icone { width: 52px; height: 52px; }
.zf-segp-frente__texto { display: flex; flex-direction: column; gap: 0.25rem; }
.zf-segp-frente__texto strong { font-size: 1.125rem; color: var(--i-branco); }
.zf-segp-frente__texto span { font-size: 0.875rem; line-height: 1.55; color: var(--i-texto); }

/* Serviços */
.zf-segp-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Por que a Zafarie */
.zf-segp-porque { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--i-gutter); }
.zf-segp-porque__caixa {
	padding: 1.75rem 2rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	background: linear-gradient(100deg, #1a0638, #0d0c13 70%);
	border: 1px solid var(--i-borda-roxa);
	border-radius: 22px;
}
.zf-segp-porque__titulo { margin: 0; flex-shrink: 0; max-width: 13rem; display: flex; flex-direction: column; gap: 0.5rem; }
.zf-segp-porque__titulo strong { font-size: 1.375rem; line-height: 1.25; color: var(--i-branco); }
.zf-segp-porque ul { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.zf-segp-porque li { display: flex; align-items: center; gap: 0.875rem; }
.zf-segp-porque li .zf-int-icone { width: 48px; height: 48px; flex-shrink: 0; }
.zf-segp-porque li > span:last-child { display: flex; flex-direction: column; gap: 0.25rem; }
.zf-segp-porque li strong { font-size: 1rem; color: var(--i-branco); }
.zf-segp-porque li > span:last-child > span { font-size: 0.8125rem; line-height: 1.5; color: var(--i-texto); }

/* Outros segmentos */
.zf-segp-outros { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.zf-segp-outros li { display: flex; }
.zf-segp-outro {
	width: 100%;
	padding: 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--i-cartao);
	border: 1px solid var(--i-borda);
	border-radius: 16px;
	color: var(--i-branco);
	text-decoration: none;
	transition: border-color 0.2s, transform 0.2s;
}
.zf-segp-outro:hover { border-color: var(--i-borda-roxa); transform: translateY(-2px); color: var(--i-branco); }
.zf-segp-outro .zf-int-icone { width: 44px; height: 44px; flex-shrink: 0; }
.zf-segp-outro__nome { display: flex; flex-direction: column; gap: 0.25rem; }
.zf-segp-outro__nome span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8b8b96; }
.zf-segp-outro__nome strong { font-size: 1rem; line-height: 1.25; }
.zf-segp-outro__seta { margin-top: auto; display: flex; transition: transform 0.2s; }
.zf-segp-outro:hover .zf-segp-outro__seta { transform: translateX(4px); }

@media (max-width: 1100px) {
	.zf-segp-desafios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-segp-ajuda__grade { grid-template-columns: minmax(0, 1fr); }
	.zf-segp-ajuda__intro { position: static; }
	.zf-segp-servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-segp-porque__caixa { flex-direction: column; align-items: flex-start; }
	.zf-segp-porque__titulo { max-width: none; }
	.zf-segp-outros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.zf-segp-hero__tipo .zf-int-icone { display: none; }
	.zf-segp-checks { align-self: flex-start; }
	.zf-segp-jornada { padding: 1.125rem; }
	.zf-segp-jornada__topo strong { font-size: 1.0625rem; }
	.zf-segp-jornada__etapa { grid-template-columns: 44px minmax(0, 1fr); padding-bottom: 1.125rem; }
	.zf-segp-jornada__etapa > .zf-int-icone { width: 44px; height: 44px; }
	.zf-segp-jornada__etapa:not(:last-child)::before { left: 21px; top: 44px; }
	.zf-segp-jornada__titulo strong { font-size: 1rem; }

	.zf-segp-topo { flex-direction: column; align-items: flex-start; }

	.zf-segp-desafios { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
	.zf-segp-desafio { padding: 1rem; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0.875rem; row-gap: 0.25rem; }
	.zf-segp-desafio__topo { grid-row: span 2; }
	.zf-segp-desafio__topo .zf-int-icone { width: 44px; height: 44px; }
	.zf-segp-desafio__n { display: none; }
	.zf-segp-desafio strong { font-size: 1rem; }

	.zf-segp-frente { padding: 1.125rem; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0.875rem; align-items: start; }
	.zf-segp-frente__n { display: none; }
	.zf-segp-frente .zf-int-icone { width: 44px; height: 44px; }

	.zf-segp-servicos { grid-template-columns: minmax(0, 1fr); }
	.zf-segp-porque__caixa { padding: 1.375rem 1.25rem; }
	.zf-segp-porque ul { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

	.zf-segp-outros { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
	.zf-segp-outro { flex-direction: row; align-items: center; padding: 0.875rem; }
	.zf-segp-outro .zf-int-icone { width: 40px; height: 40px; }
	.zf-segp-outro__seta { margin: 0 0 0 auto; }
}

/* =====================================================================
 * Segmentos: animação do topo (landing e página de cada segmento)
 * Só vale com html.zf-mo (sem "reduzir movimento"). Só transform/opacity
 * nos elementos que se movem; nada com imagem.
 * ================================================================== */

.zf-segh { position: relative; isolation: isolate; overflow: hidden; }
.zf-segh > .zf-int-conteiner { position: relative; z-index: 1; }

/* Aurora de fundo + grade sutil */
.zf-segh-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zf-segh-aurora::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(154, 84, 248, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 84, 248, 0.07) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 35%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 65% 35%, #000 20%, transparent 75%);
}
.zf-segh-aurora span {
	position: absolute;
	width: 46vw;
	max-width: 680px;
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: 0.5;
}
.zf-segh-aurora span:first-child { top: -30%; right: -8%; background: radial-gradient(circle, rgba(122, 30, 246, 0.9), rgba(122, 30, 246, 0.25) 35%, transparent 68%); }
.zf-segh-aurora span:last-child { bottom: -45%; left: -12%; background: radial-gradient(circle, rgba(180, 17, 188, 0.8), rgba(180, 17, 188, 0.2) 35%, transparent 68%); opacity: 0.3; }
/* A luz de fundo desliza uma vez na entrada e depois fica parada (leve). */
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-in .zf-segh-aurora span:first-child { animation: zf-segh-deriva-a 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-in .zf-segh-aurora span:last-child { animation: zf-segh-deriva-b 3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
@keyframes zf-segh-deriva-a { from { transform: translate3d(12%, -14%, 0) scale(0.8); opacity: 0; } }
@keyframes zf-segh-deriva-b { from { transform: translate3d(-16%, 10%, 0) scale(0.8); opacity: 0; } }

/* Máscara das palavras do título */
.zf-segh-palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.zf-segh-palavra > span { display: inline-block; }

/* ---------- Estados iniciais (antes de .zf-segh-in) ---------- */

html.zf-mo:not(.zf-mo-falhou):not(.zf-segh-js) .zf-segh h1 { opacity: 0.01; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-segh-palavra > span { transform: translate3d(0, 135%, 0) rotate(4deg); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) :is(.zafarie-breadcrumbs, .zf-int-rotulo, .zf-segp-hero__tipo, .zf-int-hero__resumo, .zf-cta) { opacity: 0; transform: translate3d(0, 18px, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-segp-checks li { opacity: 0; transform: translate3d(-14px, 0, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) :is(.zf-seg-painel, .zf-segp-jornada) { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.96); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-seg-tile { opacity: 0; transform: scale(0.7) translate3d(0, 12px, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-seg-painel__rotulo { opacity: 0; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-seg-painel__div::before,
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-seg-painel__div::after { transform: scaleX(0); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-seg-painel__div svg { opacity: 0; transform: rotate(-120deg) scale(0.3); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-segp-jornada__topo { opacity: 0; transform: translate3d(0, 10px, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-segp-jornada__etapa > .zf-int-icone { opacity: 0; transform: scale(0.4); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-segp-jornada__etapa > :not(.zf-int-icone) { opacity: 0; transform: translate3d(16px, 0, 0); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh:not(.zf-segh-in) .zf-segp-jornada__etapa::before { transform: scaleY(0); }

/* ---------- Entrada ---------- */

html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-segh-palavra > span { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--w, 0) * 55ms + 150ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh :is(.zafarie-breadcrumbs, .zf-int-rotulo, .zf-segp-hero__tipo) { transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-int-hero__resumo { transition: opacity 0.8s ease calc(var(--palavras, 8) * 55ms + 250ms), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--palavras, 8) * 55ms + 250ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-cta { transition: opacity 0.8s ease calc(var(--palavras, 8) * 55ms + 380ms), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--palavras, 8) * 55ms + 380ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-segp-checks li { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--palavras, 8) * 55ms + 520ms + var(--c, 0) * 90ms); }

html.zf-mo:not(.zf-mo-falhou) .zf-segh :is(.zf-seg-painel, .zf-segp-jornada) { transition: opacity 1s ease 0.3s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-painel__rotulo { transition: opacity 0.6s ease 0.6s; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-tile { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s; transition-delay: calc(var(--t, 0) * 90ms + 650ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-in .zf-seg-tile:hover { transition-delay: 0s; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-painel__div::before,
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-painel__div::after { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.8s; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-painel__div::before { transform-origin: right center; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-painel__div::after { transform-origin: left center; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-seg-painel__div svg { transition: opacity 0.5s ease 0.7s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s; }

html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-segp-jornada__topo { transition: opacity 0.6s ease 0.55s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-segp-jornada__etapa > .zf-int-icone { transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--e, 0) * 320ms + 700ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-segp-jornada__etapa > :not(.zf-int-icone) { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--e, 0) * 320ms + 820ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh .zf-segp-jornada__etapa::before { transform-origin: center top; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--e, 0) * 320ms + 900ms); }

/* Ícones acendem uma vez quando chegam. */
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-in :is(.zf-seg-tile, .zf-segp-jornada__etapa) > .zf-int-icone { animation: zf-segh-acende 1.2s ease-out both; animation-delay: calc(var(--t, var(--e, 0)) * 90ms + 900ms); }
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-in .zf-segp-jornada__etapa > .zf-int-icone { animation-delay: calc(var(--e, 0) * 320ms + 900ms); }
@keyframes zf-segh-acende {
	0% { box-shadow: inset 0 0 18px rgba(122, 30, 246, 0.25), 0 0 0 0 rgba(154, 84, 248, 0); }
	35% { box-shadow: inset 0 0 18px rgba(122, 30, 246, 0.25), 0 0 24px 4px rgba(154, 84, 248, 0.65); }
	100% { box-shadow: inset 0 0 18px rgba(122, 30, 246, 0.25), 0 0 0 0 rgba(154, 84, 248, 0); }
}

/* ---------- Brilho do painel e ponto da jornada ---------- */

/* Landing: borda luminosa dá uma volta no painel. */
.zf-segh .zf-seg-painel { position: relative; isolation: isolate; overflow: hidden; }
.zf-segh .zf-seg-painel::before {
	content: "";
	position: absolute;
	z-index: -2;
	left: 50%;
	top: 50%;
	width: 160%;
	aspect-ratio: 1;
	background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(154, 84, 248, 0.9) 300deg, rgba(217, 191, 252, 0.9) 320deg, transparent 340deg);
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}
.zf-segh .zf-seg-painel::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 1px;
	border-radius: 23px;
	background: radial-gradient(420px 300px at 50% 60%, rgba(122, 30, 246, 0.22), rgba(16, 15, 22, 0) 70%), #0f0e15;
}
/* Uma volta só, depois some: nada girando o tempo todo. */
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-in .zf-seg-painel::before { animation: zf-segh-gira 2.8s cubic-bezier(0.45, 0, 0.25, 1) 1.2s both; }
@keyframes zf-segh-gira {
	0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
	15% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; }
}

/* Segmento: um ponto de luz percorre a jornada. */
.zf-segh .zf-segp-jornada__lista { position: relative; }
.zf-segh .zf-segp-jornada__lista::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 21px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f3e8ff;
	box-shadow: 0 0 12px 4px rgba(154, 84, 248, 0.9);
	opacity: 0;
	will-change: transform, opacity;
	pointer-events: none;
}
html.zf-mo:not(.zf-mo-falhou) .zf-segh.zf-segh-vivo .zf-segp-jornada__lista::after { animation: zf-segh-ponto 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes zf-segh-ponto {
	0% { transform: translate3d(0, 0, 0); opacity: 0; }
	8% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translate3d(0, var(--trilha, 240px), 0); opacity: 0; }
}
@media (max-width: 767px) {
	.zf-segh .zf-segp-jornada__lista::after { left: 17px; top: 17px; }
}

/* Topo fora da tela: o ponto da jornada pausa. */
.zf-segh.zf-segh-pausa .zf-segp-jornada__lista::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.zf-segh-aurora span, .zf-segh .zf-seg-painel::before, .zf-segh .zf-segp-jornada__lista::after { animation: none !important; }
}