/*
 * Submenu em abas (desktop) do painel de Servicos (inc/mega-menu-abas.php).
 * Aprovado em 11/11/2026. Areas a esquerda (25%), servicos a direita (75%).
 * Sem bordas de 1px: destaque pelo fundo mais claro. So transform e opacity
 * nas animacoes; prefers-reduced-motion deixa tudo parado.
 */

.zf-abas { display: none; }

@media (min-width: 1024px) {

	/* Painel: sem o respiro e o cartao lateral do layout em colunas. */
	.zf-painel.zf-painel--abas {
		padding: 0;
		background: #121019;
		border: 0;
		border-radius: 22px;
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 60px rgba(122, 30, 246, 0.18);
	}

	.zf-painel--abas .zf-painel__corpo { display: block; }
	.zf-painel--abas .zf-painel__conteudo,
	.zf-painel--abas .zf-destaque { display: none; }

	.zf-abas {
		display: grid;
		grid-template-columns: 25% 75%;
	}

	.zf-abas p { margin: 0; }

	/* ---------- Abas (25%) ---------- */

	.zf-abas__lateral {
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-width: 0;
		padding: 24px 16px;
		background: #0e0c14;
	}

	.zf-abas__sobre {
		padding: 0 14px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.34em;
		text-transform: uppercase;
		color: #9a54f8;
	}

	.zf-abas__lista {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	/* Fundo da aba ativa: desliza ate a aba clicada. */
	.zf-abas__indicador {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		border-radius: 14px;
		background: #1d1928;
		pointer-events: none;
		transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.zf-abas__indicador.sem-transicao { transition: none; }

	/* Sem JavaScript: a aba ativa marca o proprio fundo. */
	.zf-abas:not(.zf-abas--pronto) .zf-abas__indicador { display: none; }
	.zf-abas:not(.zf-abas--pronto) .zf-abas__aba[aria-selected="true"] { background: #1d1928; }

	.zf-abas__aba {
		position: relative;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		min-height: 64px;
		box-sizing: border-box;
		padding: 10px 14px;
		border: 0;
		border-radius: 14px;
		background: transparent;
		font: inherit;
		text-align: left;
		color: #a1a1aa;
		cursor: pointer;
		transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.zf-abas__aba:hover,
	.zf-abas__aba[aria-selected="true"] { color: #ffffff; }

	.zf-abas__aba:focus-visible {
		outline: 2px solid #bd8efa;
		outline-offset: -2px;
	}

	.zf-abas__num {
		flex-shrink: 0;
		width: 20px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: #6b6478;
		transition: color 220ms;
	}

	.zf-abas__aba[aria-selected="true"] .zf-abas__num { color: #bd8efa; }

	.zf-abas__texto {
		display: flex;
		flex-direction: column;
		gap: 3px;
		flex-grow: 1;
		min-width: 0;
	}

	.zf-abas__nome {
		font-size: 15.5px;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.3;
	}

	.zf-abas__descr {
		font-size: 12.5px;
		line-height: 1.4;
		color: #8b8b95;
		transition: color 220ms;
	}

	.zf-abas__aba:hover .zf-abas__descr,
	.zf-abas__aba[aria-selected="true"] .zf-abas__descr { color: #a1a1aa; }

	.zf-abas__seta {
		flex-shrink: 0;
		color: #bd8efa;
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity 260ms, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.zf-abas__aba[aria-selected="true"] .zf-abas__seta {
		opacity: 1;
		transform: none;
	}

	/* Convite ao diagnostico */
	.zf-abas__cta {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: auto;
		padding: 18px;
		border-radius: 16px;
		background: #15121e;
	}

	.zf-abas__cta-titulo { font-size: 14px; font-weight: 700; color: #ffffff; }
	.zf-abas__cta-texto { font-size: 12.5px; line-height: 1.5; color: #a1a1aa; }

	.zf-abas__botao {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 14px;
		border-radius: 12px;
		background: #7a1ef6;
		color: #ffffff;
		font-size: 13.5px;
		font-weight: 700;
		text-decoration: none;
		transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms;
	}

	.zf-abas__botao:hover { background: #6109d7; color: #ffffff; }
	.zf-abas__botao:active { transform: scale(0.98); }

	/* ---------- Servicos (75%) ---------- */

	.zf-abas__principal {
		display: flex;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
		padding: 28px 32px 24px;
	}

	.zf-abas__painel {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.zf-abas__painel[hidden] { display: none; }

	.zf-abas__topo {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 32px;
		padding: 0 12px;
	}

	.zf-abas__titulo {
		font-size: 26px;
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.2;
		color: #ffffff;
	}

	.zf-abas__titulo span { color: #9a54f8; }

	.zf-abas p.zf-abas__lead {
		margin-top: 6px;
		max-width: 560px;
		font-size: 14.5px;
		line-height: 1.6;
		color: #a1a1aa;
	}

	.zf-abas__ver {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
		min-height: 44px;
		font-size: 14px;
		font-weight: 600;
		color: #bd8efa;
		text-decoration: none;
	}

	.zf-abas__ver:hover { color: #d9bffc; }

	.zf-abas__ver svg,
	.zf-abas__crm-link svg { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }

	.zf-abas__ver:hover svg,
	.zf-abas__crm:hover .zf-abas__crm-link svg { transform: translateX(3px); }

	.zf-abas__servicos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.zf-abas__servico {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 12px;
		border-radius: 16px;
		color: #e4e4e7;
		text-decoration: none;
		transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Luz roxa que segue o cursor (posicao vinda do JS). */
	.zf-abas__servico::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		opacity: 0;
		background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(122, 30, 246, 0.16), transparent 70%);
		transition: opacity 260ms;
	}

	.zf-abas__servico:hover { background: #1a1724; color: #ffffff; }
	.zf-abas__servico:hover::before { opacity: 1; }
	.zf-abas__servico:active { transform: scale(0.98); }

	.zf-abas__servico:focus-visible {
		outline: 2px solid #bd8efa;
		outline-offset: -2px;
	}

	.zf-abas__icone {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		flex-shrink: 0;
		border-radius: 12px;
		background: #120227;
		color: #bd8efa;
		transition: background-color 220ms, color 220ms;
	}

	.zf-abas__servico:hover .zf-abas__icone { background: #2b045f; color: #d9bffc; }

	.zf-abas__servico-texto {
		display: flex;
		flex-direction: column;
		gap: 3px;
		flex-grow: 1;
		min-width: 0;
	}

	.zf-abas__servico-nome {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.35;
	}

	.zf-abas__servico[aria-current="page"] .zf-abas__servico-nome { color: #bd8efa; }

	.zf-abas__servico-descr {
		font-size: 13px;
		line-height: 1.45;
		color: #8b8b95;
	}

	.zf-abas__servico-seta {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		border-radius: 999px;
		background: #2b045f;
		color: #d9bffc;
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity 220ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.zf-abas__servico:hover .zf-abas__servico-seta,
	.zf-abas__servico:focus-visible .zf-abas__servico-seta {
		opacity: 1;
		transform: none;
	}

	/* Faixa da ZAIA (CRM com IA): o laranja so aparece no CRM. */
	.zf-abas__crm {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-top: auto;
		padding: 16px 20px;
		border-radius: 16px;
		background: radial-gradient(460px 170px at 0% 0%, rgba(234, 88, 12, 0.30), transparent 70%), #1c0f08;
		color: #e4e4e7;
		text-decoration: none;
	}

	.zf-abas__crm:hover {
		background: radial-gradient(460px 170px at 0% 0%, rgba(234, 88, 12, 0.42), transparent 70%), #26140a;
		color: #e4e4e7;
	}

	.zf-abas__crm:focus-visible { outline: 2px solid #fdba74; outline-offset: -2px; }

	.zf-abas__crm-texto { flex-grow: 1; font-size: 14px; line-height: 1.5; }
	.zf-abas__crm-texto strong { font-weight: 700; color: #ffffff; }

	.zf-abas__crm-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
		font-size: 14px;
		font-weight: 700;
		color: #fdba74;
	}

	.zf-abas__crm:hover .zf-abas__crm-link { color: #fed7aa; }

	/* Marca ZAIA */
	.zf-zaia {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}

	.zf-zaia__simbolo {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 40px;
		flex-shrink: 0;
		filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.45));
		transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.zf-zaia__simbolo img { display: block; width: 44px; height: auto; }

	.zf-abas__crm:hover .zf-zaia__simbolo { transform: scale(1.06); }

	.zf-zaia__nome {
		font-size: 22px;
		font-weight: 800;
		letter-spacing: 0.06em;
		line-height: 1.2;
		color: #ffffff;
		white-space: nowrap;
	}

	.zf-zaia__sub {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0;
		color: #fdba74;
	}

	/* Link do CRM com IA nas listas do menu (Servicos e Solucoes): icone laranja. */
	.zf-abas__servico[href*="crm-com-ia-automatizado"] .zf-abas__icone,
	.zf-painel__link[href*="crm-com-ia-automatizado"] .zf-painel__icone {
		background: #2a1206;
		color: #fb923c;
	}

	.zf-abas__servico[href*="crm-com-ia-automatizado"]:hover .zf-abas__icone,
	.zf-painel__link[href*="crm-com-ia-automatizado"]:hover .zf-painel__icone {
		background: #431407;
		color: #fdba74;
	}

	.zf-abas__servico[href*="crm-com-ia-automatizado"] .zf-abas__servico-nome,
	.zf-painel__link[href*="crm-com-ia-automatizado"] .zf-painel__link-titulo { color: #fdba74; }

	.zf-abas__servico[href*="crm-com-ia-automatizado"]::before {
		background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(234, 88, 12, 0.18), transparent 70%);
	}

	.zf-abas__servico[href*="crm-com-ia-automatizado"] .zf-abas__servico-seta { background: #431407; color: #fdba74; }

	/* Largura: 80% da tela, no maximo 1800px, centralizado no cabecalho. */
	.zf-painel.zf-painel--abas {
		left: min(0px, calc(50% - min(40vw, 900px)));
		right: min(0px, calc(50% - min(40vw, 900px)));
	}

	/* ---------- Entrada: topo e servicos em cascata ---------- */

	.zf-abas__topo,
	.zf-abas__servicos > li {
		animation: zf-abas-entra 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.zf-abas__servicos > li:nth-child(1) { animation-delay: 60ms; }
	.zf-abas__servicos > li:nth-child(2) { animation-delay: 100ms; }
	.zf-abas__servicos > li:nth-child(3) { animation-delay: 140ms; }
	.zf-abas__servicos > li:nth-child(4) { animation-delay: 180ms; }
	.zf-abas__servicos > li:nth-child(5) { animation-delay: 220ms; }
	.zf-abas__servicos > li:nth-child(6) { animation-delay: 260ms; }
	.zf-abas__servicos > li:nth-child(n+7) { animation-delay: 300ms; }
}

/* Telas largas: tres colunas de servicos. */
@media (min-width: 1600px) {
	.zf-abas__servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@keyframes zf-abas-entra {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
}

/* Mobile e tablet: segue o menu mobile, com as colunas do painel. */
@media (max-width: 1023px) {
	.zf-abas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.zf-abas__topo,
	.zf-abas__servicos > li { animation: none; }
	.zf-abas__indicador,
	.zf-abas__seta,
	.zf-abas__servico,
	.zf-abas__servico-seta { transition: none; }
	.zf-abas__servico:active,
	.zf-abas__botao:active { transform: none; }
}