:root {
	--azul-escuro: #003366;
	--azul-claro: #007bff;
	--verde: #28a745;
	--verde-escuro: #006400;
	--cinza-claro: #f4f4f4;
	--recuo-alinhamento: 20px;
}

/* --- BANNER --- */
.banner-servico { background: var(--azul-escuro); color: white; padding: 60px 20px; text-align: center; }
.banner-servico h1 { font-size: 2.2rem; margin-bottom: 10px; }

/* --- ESTRUTURA PADRONIZADA --- */
.servico-detalhe { padding: 60px 20px; max-width: 1200px; margin: 0 auto; }
.grupo-secao { margin-bottom: 80px; }
			
/* Header Alinhado (Título + Botão) */
.header-grupo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	gap: 20px;
}

.titulo-grupo { 
	color: var(--azul-escuro); 
	font-size: 1.8rem; 
	border-left: 5px solid var(--azul-claro); 
	padding-left: 15px; 
	margin: 0;
}

.sub-grupo { 
	color: var(--azul-claro); 
	font-weight: bold; 
	text-transform: uppercase; 
	font-size: 0.9rem; 
	margin-bottom: 25px; 
	margin-left: var(--recuo-alinhamento); 
	display: block;
}

/* Alinhamento de Conteúdo */
.grid-texto, .esteira-container { 
	margin-left: var(--recuo-alinhamento); 
}

.grid-texto { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
	gap: 30px; 
	margin-bottom: 35px;
}

.lista-itens {
	list-style: none; 
	padding: 0; 
	margin: 0; 
}
.lista-itens li {
	margin-bottom: 12px; 
	display: flex; 
	align-items: flex-start; 
	gap: 10px; 
	font-size: 15px; 
	color: #444; 
}
.lista-itens li i {
	color: var(--verde); 
	margin-top: 4px; 
}

/* Botão Verde de Orçamento */
.btn-solicitar-grupo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--verde);
	color: white;
	padding: 8px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.85rem;
	transition: 0.3s;
	white-space: nowrap;
}

.btn-solicitar-grupo:hover {
	background-color: #218838; 
	transform: scale(1.05); 
}

/* --- ESTEIRA DE FOTOS --- */
.esteira-container {
	position: relative; 
	width: 100%; 
	overflow: hidden; 
}

.esteira-fotos { 
	display: flex; 
	gap: 15px; 
	overflow-x: auto; 
	scroll-behavior: smooth; 
	padding: 10px 0 20px 0;
	scrollbar-width: thin;
	scrollbar-color: var(--azul-escuro) #eee;
}

/* Esconder scrollbar no Chrome/Safari */
.esteira-container {
	position: relative; 
	width: calc(100% - var(--recuo-alinhamento)); 
	overflow: hidden; 
}
.esteira-fotos::-webkit-scrollbar { 
	height: 6px; 
}
.esteira-fotos::-webkit-scrollbar-track {
	background: #eee; 
	border-radius: 10px; 
}
.esteira-fotos::-webkit-scrollbar-thumb {
	background: var(--azul-escuro); 
	border-radius: 10px; 
}

.foto-item { 
	flex: 0 0 auto; 
	height: 280px; 
	border-radius: 8px; 
	overflow: hidden; 
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.foto-item img {
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	transition: 0.4s; 
}
.foto-item:hover img {
	transform: scale(1.08); 
}
			
/* Configuração do PC: Grupo 1 (5 fotos fixas), Grupo 2 (Aparece 5 e corre 4) */
	@media (min-width: 769px) {
		.esteira-5-fotos .foto-item { 
			width: calc(20% - 12px); 
		} 
	/* Divide exatamente em 5 */
	}

	/* Mobile: Estilo Carrossel */
	@media (max-width: 768px) {
		.foto-item {
			width: 85% !important; 
		}
		.esteira-fotos { 
			scroll-snap-type: x mandatory; 
		}
		.foto-item { 
			scroll-snap-align: center; 
		}
		.esteira-fotos::-webkit-scrollbar { 
			display: none; 
		}
	}
			
	@media (max-width: 768px) {
		.secao-flex {
			display: flex;
			flex-direction: column;
		}

		.header-grupo { order:1 ;
			flex-direction: column; 
			align-items: flex-start; 
		}
		.sub-grupo { 
			order: 2; 
		}       
		.grid-texto { 
			order: 3; 
		}      
		.esteira-container { 
			order: 4; 
		}
		.btn-solicitar-grupo { 
			order:5;
			width: 100%; 
			justify-content: center; 
		}
		.grid-texto, .esteira-container { 
			margin-left: 0; 
			width: 100%; 
		}
		.foto-item { 
			width: 85% !important; 
		}
		.esteira-fotos { 
			scroll-snap-type: x mandatory; 
		}
		.foto-item { 
			scroll-snap-align: center; 
		}
				
		.header-grupo {
			display: contents; 
		}
			
		.titulo-grupo { 
			order: 1; 
			width: 100%; 
			margin-bottom: 5px; 
		}
	}
	/* --- AVISO DE ARRASTE (SÓ MOBILE) --- */
	.aviso-arraste {
		display: none; 
		text-align: center; 
		color:  var(--azul-claro); 
		font-size: 13px; 
		margin-top: 10px; 
		animation: bounce 2s infinite; 
	}

	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateX(0);
		}
		40% {
			transform: translateX(-5px);
		}
		60% {
			transform: translateX(5px);
		}
	}

	/* Exibir aviso apenas em telas menores que 768px */
	@media (max-width: 768px) {
		.aviso-arraste { 
			display: block; 
		}
	}

	/* Melhora a fluidez da esteira para o modo automático */
	.esteira-fotos {
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}
			
	/* --- INDICADOR SWIPE --- */
	.indicador-swipe { 
		display: none; 
		text-align: center; 
		color:  var(--azul-claro); 
		font-size: 13px; 
		margin-top: 10px; 
		animation: bounce 2s infinite; 
	}

	@keyframes bounceLateral { 
		0%, 100% { 
			transform: translateX(0); 
		} 
		50% { 
			transform: translateX(10px); 
		} 
	}

	@media (max-width: 768px) { 
		.indicador-swipe { 
			display: block; 
		} /* Aparece apenas no Celular */
	}

	/* Garante que o scroll seja suave e esconda a barra no mobile */
	.esteira-fotos {
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}
	.esteira-fotos::-webkit-scrollbar {
		display: none;
	}
			
	/* Miniatura - Clicar e abrir imagens */
	.miniatura {
		cursor: pointer;
		transition: 0.3s;
		width: 200px;
	}
			
	/* Fundo do Lightbox (oculto por padrão) - Clicar e abrir imagens */
	.lightbox {
		display: none;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.85); /* Fundo escuro */
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	/* Imagem ampliada - Clicar e abrir imagens */
	.lightbox-content {
		max-width: 90%;
		max-height: 90%;
		border: 2px solid white;
	}

	/* Botão de fechar - Clicar e abrir imagens */
	.close {
		position: absolute;
		top: 15px;
		right: 35px;
		color: white;
		font-size: 40px;
		font-weight: bold;
		cursor: pointer;
	}