/* Clientes (29/10/2026): faixa de logos, pagina /clientes/ e pagina de cada
   cliente. Logos em cartao claro para manter as cores da marca do cliente;
   cartao escuro so para logo branca. Sem bordas de 1px. */

/* ---------- Logo ---------- */

.zf-cli-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 104px;
	padding: 18px 22px;
	border-radius: 16px;
	background: #f4f4f5;
	transition: transform 0.25s ease;
}
.zf-cli-logo--escuro { background: #1e1b2a; }
.zf-cli-logo__img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
}
.zf-cli-logo__nome { font-size: 18px; font-weight: 800; color: #18181b; }
.zf-cli-logo--escuro .zf-cli-logo__nome { color: #ffffff; }

.zf-cli-logo--grande { height: auto; aspect-ratio: 4 / 3; padding: 15%; border-radius: 24px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 70px rgba(122, 30, 246, 0.2); }
.zf-cli-logo--grande .zf-cli-logo__img { max-height: 100%; width: 100% !important; }

/* ---------- Faixa de logos (paginas de solucao e servico) ---------- */

.zf-cli-faixa {
	padding: clamp(56px, 7vw, 96px) 0;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.zf-cli-conteiner {
	--cli-gutter: clamp(20px, 5.6vw, 80px);
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1280px + 2 * var(--cli-gutter));
	margin: 0 auto;
	padding: 0 var(--cli-gutter);
}
.zf-cli-faixa__topo {
	margin-bottom: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
}
.zf-cli-faixa h2 {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: #ffffff;
}
.zf-cli-mais {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	color: #bd8efa !important;
}
.zf-cli-mais:hover { color: #ffffff !important; }
.zf-cli-mais svg { transition: transform 0.2s ease; }
.zf-cli-mais:hover svg { transform: translateX(3px); }

.zf-cli-grade {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}
.zf-cli-grade li::before { content: none !important; }
.zf-cli-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: #a1a1aa !important;
}
.zf-cli-tile:hover .zf-cli-logo { transform: translateY(-4px); }
.zf-cli-tile__nome { font-size: 13.5px; font-weight: 600; text-align: center; transition: color 0.2s ease; }
.zf-cli-tile:hover .zf-cli-tile__nome { color: #ffffff; }
.zf-cli-tile:focus-visible { outline: 2px solid #bd8efa; outline-offset: 4px; border-radius: 16px; }

/* ---------- Chips das frentes ---------- */

.zf-cli-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.zf-cli-chips li {
	min-height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(122, 30, 246, 0.18);
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: #d9bffc;
}
.zf-cli-chips li::before { content: none !important; }

/* ---------- Pagina /clientes/ ---------- */

.zf-cli-hero__texto { max-width: 820px; }
.zf-cli-hero + .zf-cli-secao { padding-top: 24px; }
.zf-cli-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zf-cli-card {
	height: 100%;
	box-sizing: border-box;
	padding: 16px 16px 24px;
	border-radius: 24px;
	background: #121019;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: #a1a1aa !important;
	text-decoration: none;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.zf-cli-card:hover { transform: translateY(-4px); background: #1a1724; }
.zf-cli-logo--card { height: 150px; border-radius: 16px; }
.zf-cli-logo--card .zf-cli-logo__img { max-height: 76px; }
.zf-cli-card__texto, .zf-cli-card > .zf-cli-chips, .zf-cli-card > .zf-dev-mais { margin-left: 8px; margin-right: 8px; }
.zf-cli-card__texto { display: flex; flex-direction: column; gap: 6px; }
.zf-cli-card__meta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9a54f8; }
.zf-cli-card__texto strong { font-size: 21px; line-height: 1.2; color: #ffffff; }
.zf-cli-card__resumo { font-size: 14.5px; line-height: 1.55; }
.zf-cli-card:hover .zf-dev-mais { color: #ffffff !important; }

/* ---------- Pagina do cliente ---------- */

.zf-cli-hero .zf-cli-chips { margin-top: -4px; }
.zf-cli-hero h1 { overflow-wrap: anywhere; }
.zf-cli-texto p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #a1a1aa; }
.zf-cli-dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zf-cli-dl div { padding: 18px 20px; border-radius: 16px; background: #1e1b2a; }
.zf-cli-dl dt { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8b8b95; }
.zf-cli-dl dd { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: #ffffff; overflow-wrap: anywhere; }
.zf-cli-dl a { color: #bd8efa; text-decoration: none; }
.zf-cli-dl a:hover { color: #ffffff; }
.zf-cli-pagina .zf-cli-faixa { padding-top: 24px; }

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

@media (max-width: 1199px) {
	.zf-cli-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.zf-cli-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-cli-hero__logo { max-width: 520px; }
	.zf-cli-dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
	.zf-cli-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.zf-cli-logo { height: 88px; padding: 14px 16px; }
	.zf-cli-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.zf-cli-logo, .zf-cli-card, .zf-cli-mais svg { transition: none !important; }
}
/* ---------- Rolagem infinita da faixa de logos ---------- */

.zf-cli-marquee {
	--cli-gap: 14px;
	position: relative;
	display: flex;
	gap: var(--cli-gap);
	overflow: hidden;
	padding: 6px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.zf-cli-trilho {
	margin: 0;
	padding: 0;
	list-style: none;
	flex-shrink: 0;
	display: flex;
	gap: var(--cli-gap);
	animation: zf-cli-rolar var(--cli-dur, 48s) linear infinite;
}
.zf-cli-trilho li { width: 196px; flex-shrink: 0; }
.zf-cli-trilho li::before { content: none !important; }
.zf-cli-marquee:hover .zf-cli-trilho,
.zf-cli-marquee:focus-within .zf-cli-trilho { animation-play-state: paused; }

@keyframes zf-cli-rolar {
	to { transform: translate3d(calc(-100% - var(--cli-gap)), 0, 0); }
}

@media (max-width: 639px) {
	.zf-cli-trilho li { width: 150px; }
	.zf-cli-marquee { --cli-gap: 10px; }
}

/* Sem animacao: vira grade parada, sem a copia. */
@media (prefers-reduced-motion: reduce) {
	.zf-cli-marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; }
	.zf-cli-trilho { animation: none; flex-wrap: wrap; flex-shrink: 1; }
	.zf-cli-trilho[aria-hidden="true"] { display: none; }
}
/* ---------- Faixa compacta abaixo do banner (29/10/2026) ---------- */

.zf-cli-faixa--compacta { padding: 28px 0 36px; }
.zf-cli-faixa--compacta .zf-cli-faixa__topo { margin-bottom: 14px; align-items: center; }
.zf-cli-faixa.zf-cli-faixa--compacta h2 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8b8b95;
}
.zf-cli-faixa--compacta .zf-cli-mais { font-size: 13px; }
.zf-cli-faixa--compacta .zf-cli-tile { gap: 0; }
.zf-cli-faixa--compacta .zf-cli-tile__nome {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.zf-cli-faixa--compacta .zf-cli-logo { height: 64px; padding: 10px 16px; border-radius: 12px; }
.zf-cli-faixa--compacta .zf-cli-logo__img { max-height: 40px; }
.zf-cli-faixa--compacta .zf-cli-trilho li { width: 138px; }
.zf-cli-faixa--compacta .zf-cli-marquee { --cli-gap: 10px; padding: 4px 0; }
.zf-cli-faixa--compacta .zf-cli-grade { grid-template-columns: repeat(auto-fill, 138px); gap: 10px; }
.zf-cli-faixa--compacta .zf-cli-tile:hover .zf-cli-logo { transform: translateY(-2px); }

@media (max-width: 639px) {
	.zf-cli-faixa--compacta { padding: 20px 0 28px; }
	.zf-cli-faixa--compacta .zf-cli-trilho li { width: 112px; }
	.zf-cli-faixa--compacta .zf-cli-logo { height: 54px; padding: 8px 12px; }
	.zf-cli-faixa--compacta .zf-cli-logo__img { max-height: 32px; }
	.zf-cli-faixa--compacta .zf-cli-grade { grid-template-columns: repeat(auto-fill, 112px); }
}

/* Dentro das paginas zf-dev o topo ja tem respiro embaixo: aproxima a faixa. */
.zf-dev-hero + .zf-cli-faixa--compacta { margin-top: -40px; }
.zf-plt-hero + .zf-cli-faixa--compacta { margin-top: -48px; }
/* zf-cli-transparencia (29/10/2026): logos da faixa com transparencia;
   100% de opacidade ao passar o mouse ou focar pelo teclado. */
.zf-cli-faixa .zf-cli-logo {
	opacity: 0.5;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.zf-cli-faixa .zf-cli-tile:hover .zf-cli-logo,
.zf-cli-faixa .zf-cli-tile:focus-visible .zf-cli-logo {
	opacity: 1;
}

/* zf-cli-pb (29/10/2026): todas as logos de clientes em preto e branco;
   coloridas ao passar o mouse ou focar pelo teclado. */
.zf-cli-logo__img {
	filter: grayscale(1);
	transition: filter 0.3s ease;
}
.zf-cli-tile:hover .zf-cli-logo__img,
.zf-cli-tile:focus-visible .zf-cli-logo__img,
.zf-cli-card:hover .zf-cli-logo__img,
.zf-cli-card:focus-visible .zf-cli-logo__img,
.zf-cli-hero__logo:hover .zf-cli-logo__img {
	filter: none;
}