/* CASES_CSS v3 :: overlay centralizado + cliente branco */
	
	#topo{
		position:inherit;
		margin:0 0 0 0;
	}
		

@media (max-width: 1000px)
{
	#topo{
		position:inherit;
		margin:0 0 0 0;
	}
		
}

	/* ===== Filtro por cliente (Agro) — na tarja do breadcrumb ===== */
	.cases-crumbbar{ position:relative; }
		.cases-crumbbar .cases-filtro{
			position:absolute; right:10%; top:50%; transform:translateY(-50%);
			display:flex; align-items:center; gap:9px;
			font-family:'GothamBook', Arial, Helvetica, sans-serif;
		}
			.cases-crumbbar .cases-filtro label{ font-size:12px; color:#7a7979; }
			.cases-crumbbar .cases-filtro select{
				font-family:inherit; font-size:13px; color:#3a3a3a;
				padding:7px 14px; border:1px solid #d8d6d4; border-radius:999px;
				background:#fff; cursor:pointer;
			}
				.cases-crumbbar .cases-filtro select:focus{ outline:none; border-color:var(--cor-marca); }

	/* filtro: selecionado = borda verde 1px; demais = card escurecido */
	#cases .case{ transition:outline-color .2s ease, filter .2s ease; }
		#cases .case.case-match{ outline:1px solid var(--cor-marca); outline-offset:-1px; }
		#cases .case.case-dim{ filter:brightness(.45); }

	@media (max-width: 1000px){
		.cases-crumbbar .cases-filtro{
			position:static; transform:none; right:auto;
			justify-content:flex-end; margin:0 10% 12px 10%;
		}
	}


	/* ===== Grade de cases: 4 / 2 / 1 colunas — FLEX (robusto a arredondamento de subpixel) ===== */
	#cases{
		display:flex !important;
		flex-wrap:wrap !important;
		align-content:flex-start;
	}
		/* o <a> que embrulha cada case "some" do layout (display:contents): o proprio .case
		   vira o item flex, e os <a> vazios da galeria nao viram celulas vazias */
		#cases > a{ display:contents !important; }
	#cases .case{
		flex:0 0 25%;
		max-width:25%;
		width:25% !important;
		height:250px !important;
		margin:0 !important;
		position:relative;          /* contém o overlay dentro do proprio card */
		box-sizing:border-box;
	}
	@media (max-width:1024px){ #cases .case{ flex-basis:50%;  max-width:50%;  width:50% !important;  height:300px !important; } }
	@media (max-width:600px){  #cases .case{ flex-basis:100%; max-width:100%; width:100% !important; height:240px !important; } }

	/* imagem preenche o card por igual (grade uniforme) + leve zoom no hover (igual a home) */
	#cases .case img{
		width:100% !important; height:100% !important;
		object-fit:cover; display:block; margin:0 !important;
		transition:transform .7s cubic-bezier(.22,.61,.36,1);
	}
		#cases .case:hover img{ transform:scale(1.07); }

	/* overlay = MESMO efeito da home: overlay escuro revelado no hover com o texto centralizado.
	   Só ajusto o tamanho para preencher o card de 4 colunas; o resto (opacidade, fundo, texto)
	   vem do estilo.css original — exatamente como na home. */
	#cases .case .cima_case{ left:0 !important; top:0 !important; width:100% !important; height:100% !important; }

	/* =========================================================================
	   Cliente + título no card (Opção B — faixa em gradiente no rodapé),
	   REVELADOS NO HOVER (escondidos por padrão; aparecem ao passar o mouse).
	   Reaproveita .cima_case > .ver_case > .texto (cliente / tit_case / servico),
	   valendo para cards iniciais e os do scroll infinito.
	   ========================================================================= */
	#cases .case .cima_case{
		top:0 !important; bottom:0 !important; left:0 !important; right:0 !important;
		width:100% !important; height:100% !important;
		display:flex !important; flex-direction:column;
		align-items:center !important; justify-content:center !important;  /* centraliza vertical e horizontal */
		opacity:0 !important;                                   /* escondido por padrão */
		transform:translateY(8px);
		background:rgba(0,0,0,.62) !important;
		padding:24px 16px !important;
		transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1) !important;
		pointer-events:none;
		z-index:2 !important;                                   /* fica ACIMA da imagem */
	}
		#cases .case:hover .cima_case{ opacity:1 !important; transform:translateY(0) !important; }  /* aparece no hover */

		#cases .case .cima_case .ver_case{
			display:block !important; width:100% !important; text-align:center !important;
			font-size:inherit !important;
		}
			#cases .case .cima_case .ver_case .texto{
				display:block !important; width:100% !important; padding:0 !important;
				font-size:inherit !important;
			}
				/* CLIENTE — cor da marca, caixa-alta, pequeno */
				#cases .case .cima_case .ver_case .texto .cliente{
					display:block !important; width:auto !important;
					padding:0 0 3px 0 !important; margin:0 !important;
					font-family:'Lex', Arial, Helvetica, sans-serif !important;
					font-size:11px !important; font-weight:bold !important;
					letter-spacing:.06em !important; text-transform:uppercase !important;
					color:#fff !important;
				}
				/* TÍTULO — branco, até 2 linhas */
				#cases .case .cima_case .ver_case .texto .tit_case{
					display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
					overflow:hidden;
					font-family:'Lex', Arial, Helvetica, sans-serif !important;
					font-size:16px !important; line-height:1.25 !important; color:#fff !important;
				}
				/* SERVIÇO — itálico (aparece junto com a faixa no hover) */
				#cases .case .cima_case .ver_case .texto .servico{
					display:block !important; width:auto !important; margin:6px 0 0 0 !important; padding:0 !important;
					font-family:Arial, Helvetica, sans-serif !important;
					font-size:12px !important; font-style:italic !important; color:#cfcfcf !important;
				}
		/* esconde o botão/linha que apareciam no overlay antigo */
		#cases .case .cima_case .ver_case .bt,
		#cases .case .cima_case .ver_case .linha_ver{ display:none !important; }


/* CASES_IMG_ZINDEX: imagem fica abaixo do overlay */
	#cases .case img{ position:relative !important; z-index:1 !important; }