*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: calibri;
}

html, body{
	height: 100%;
}

body{
	background: white !important;
}

main{
	width: 100%;
	display: flex;
	flex-direction: column;
	/*gap: 128px;*/
}
	@media (max-width: 768px){
		main{
			gap: 0px;
		}
	}

main section{
	width: 100%;
	padding: 64px 224px;
	/*border: 1px solid red;*/
}
	@media (max-width: 1300px){
		main section{
			padding: 64px 128px;
		}
	}
	@media (max-width: 980px){
		main section{
			padding: 32px 64px;
		}
	}
	@media (max-width: 768px){
		main section{
			padding: 32px 16px;
		}
	}

.home_main{
	margin-top: 64px;
}

.home_hero {
	display: none;
	border: none;
	margin-top: 64px;
	position: relative;
	overflow: hidden;
	height: 75vh;
}

	.home_hero article {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		z-index: 1;
		transition: opacity 1.5s ease; /* Transição apenas da opacidade */
	}

	/* Fundo com zoom contínuo */
	.home_hero article .background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: 50% 20%;
		z-index: -1;
		animation: zoomIn 10s infinite linear; /* Zoom contínuo */
	}

	/* Conteúdo do texto */
	.home_hero article aside{
		position: relative;
		z-index: 1;
		height: 100%;
		width: 100%;
		padding: 32px 224px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		/*-moz-box-shadow: inset 0 -10px 10px -10px #222;
		-webkit-box-shadow: inset 0 -10px 10px -10px #222;
		box-shadow: inset 0 -20px 10px -10px #222;*/
	}
		@media (max-width: 768px){
			.home_hero article aside{
				padding: 32px 16px;
			}
		}
	.home_hero article aside div{
		background: white;
		border-radius: 12px;
		width: 216px;
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* Article ativo */
	.home_hero article.active {
		opacity: 1;
		z-index: 2;
	}

	/* Animação de zoom */
	@keyframes zoomIn {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.2); /* Fator de zoom */
		}
	}

.home_maxxi{
	background: #222;
	width: 100%;
	padding-top: 64px;
	padding-bottom: 64px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}
		@media (max-width: 768px){
			.home_maxxi{
				padding-top: 32px;
				padding-bottom: 32px;
			}
		}
	.home_maxxi div{
		display: flex;
		justify-content: space-between;
		gap: 16px;	}
		.home_maxxi div:nth-of-type(2){			
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos móveis */
		}
			@media (max-width: 768px){
				.home_maxxi div:nth-of-type(1){
					flex-direction: column;
					gap: 32px;
				}
			}
		.home_maxxi article{
			width: 50%;
			color: white;
		}
			@media (max-width: 768px){
				.home_maxxi article{
					width: 100%;
				}
			}
		.home_maxxi article p{
			font-size: 18px;
		}
		.home_maxxi article i{
			color: #ccc;
		}
		.home_maxxi .card{
			color: white;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 16px;
		}
					@media (max-width: 768px){
						.home_maxxi .card{							
							width: 60%;
							flex: 0 0 auto;
						}
					}
				.home_maxxi div::-webkit-scrollbar {
					height: 8px; /* Altura do scrollbar (opcional, para personalização) */
				}

				.home_maxxi div::-webkit-scrollbar-thumb {
					background-color: rgba(0, 0, 0, 0.5); /* Cor do "polegar" do scrollbar */
					border-radius: 4px;
				}
			.home_maxxi .card:nth-of-type(1) a{
				background: #33995f;
			}
			.home_maxxi .card:nth-of-type(2) a{
				background: #ff3333;
			}
			.home_maxxi .card:nth-of-type(3) a{
				background: #6699ff;
			}
			.home_maxxi .card:nth-of-type(4) a{
				background: #ff9900;
			}
	.home_maxxi h1{
		font-size: 32px;
		line-height: 36px;
		font-family: Tahoma, sans-serif;
	}
		.home_maxxi h1 span{
			font-size: 52px;
		}
	.home_maxxi a{
		color: white;
		background: #222;
		padding: 8px 12px;
		border-radius: 8px;
		text-decoration: none;
	}
	.home_maxxi .image{
		position: relative;
		border-radius: 16px;
		width: 40%;
	}
			@media (max-width: 768px){
				.home_maxxi .image{
					width: 100%;
				}
			}
		.home_maxxi .image img{
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
		.home_maxxi .image div{
			position: absolute;
			border: 1px solid white;
			border-radius: 16px;
			height: 100%;
			width: 100%;
			transform: rotate(5deg);
		}
	
.home_padrao{
	display: flex;
	gap: 16px;
}
		@media (max-width: 768px){
			.home_padrao{
				flex-direction: column;
				gap: 32px;
			}
		}
.home_padrao>*{
	/*border: 1px solid blue;*/
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}
		@media (max-width: 768px){
			.home_padrao>*{
				width: 100% !important;
			}
		}
	.home_padrao .div_title{
		width: 210px;
	}
		.home_padrao .position_sticky{
			top: calc(16px + 64px);
			position: sticky;
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.home_padrao article{
			color: white;
			background: gray;
			border-radius: 12px;
			width: 100%;
			padding: 16px;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
			div ul {
				margin-left: 16px; /* Remove a margem padrão */
			}
			.home_padrao article a{
				color: white;
				background: #222;
				padding: 8px 12px;
				border-radius: 8px;
				text-decoration: none;
			}
				@media (max-width: 768px){
					.home_padrao article h3{
						font-size: 24px;
					}
					.home_padrao article a{
						display: none;
					}
				}
		.home_padrao aside{
			color: white;
			background: #222;
			border-radius: 12px;
			padding: 12px 16px;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
				@media (max-width: 768px){
					.home_padrao aside{
						flex-direction: row;
						justify-content: space-between;
						gap: 0;
					}
				}
			.home_padrao aside div{
				display: flex;
				align-items: center;
				gap: 8px;
			}
				.home_padrao aside div img{
					filter: invert(100%);
					height: 100%;
					width: 24px;
					object-fit: contain;
				}
	.home_padrao .div_card {
		width: calc(100% - 210px - 32px); /* Mantém o cálculo de largura original */
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* Define 3 colunas de largura igual */
		gap: 16px; /* Espaçamento entre os cards */
		align-items: stretch; /* Faz com que todos os itens se estiquem verticalmente */
	}
			.home_padrao .column_2 {
				grid-column: span 2; /* Faz o card ocupar as 3 colunas */
			}
			.home_padrao .column_3 {
				grid-column: span 3; /* Faz o card ocupar as 3 colunas */
			}
		.home_padrao .card_title{
			border-bottom: 2px solid #ccc;
			height: 48px;
			padding-bottom: 8px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
				@media (max-width: 768px){
					.home_padrao .card_title{
						display: none;
						border: 1px solid red;
					}
				}
			.home_padrao .card_title img{
				height: 100%;
			}
			.home_padrao .card_title a{
				color: #111;
				text-decoration: none;
			}
		.home_padrao .card{
			color: #444;
			background: rgba(100, 100, 100, 0.05);
			border: 1px solid rgba(100, 100, 100, 0.2);
			border-radius: 16px;
			height: auto;
			padding: 16px 12px;
			display: flex;
			flex-direction: column;
			gap: 8px; /* Espaçamento entre os itens dentro do card */
		}
	.home_padrao .hidden{
		width: 100%;
		display: none;
	}
			@media (max-width: 768px){
				.home_padrao .hidden{
					display: flex;
				}
			}
		.home_padrao .hidden a{
			color: #111;
			text-decoration: none;
			border-radius: 12px;
			width: 100%;
			padding: 8px 16px;		
		}
		
/* Responsividade para telas menores */
@media (max-width: 768px) {
    .home_padrao .div_card {
        width: 100%; /* Usa toda a largura da tela no mobile */
        display: flex; /* Alterna para flexbox em vez de grid */
        flex-wrap: nowrap; /* Impede a quebra de linha, forçando o scroll horizontal */
        gap: 16px; /* Espaçamento entre os cards */
        overflow-x: auto; /* Ativa o scroll horizontal */
        padding-bottom: 16px; /* Espaçamento extra para o scroll ser visível */
    }

    .home_padrao .div_card::-webkit-scrollbar {
        height: 8px; /* Personaliza a altura da barra de rolagem */
    }

    .home_padrao .div_card::-webkit-scrollbar-thumb {
        background-color: #888; /* Cor da barra de rolagem */
        border-radius: 4px; /* Arredondamento */
    }

    .home_padrao .div_card::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Cor da barra de rolagem ao passar o mouse */
    }

    .home_padrao .card {
        flex: 0 0 auto; /* Garante que os cards não encolham ou cresçam */
        width: 60%; /* Ajusta o tamanho dos cards para caberem no espaço disponível */
    }
}
			.home_padrao .card img{
				height: 96px;
				width: 100%;
				object-fit: contain;
			}
.home_montagem article{
	background:  #33995f;
}
	.home_montagem .card img{
		height: 64px;
		width: 100%;
		object-fit: contain;
	}
		@media (max-width: 768px){
			.home_montagem article{
				color: #111;
				background: none;
				padding: 0;
			}
				.home_montagem article h3{
					color: #33995f;
				}
		}
	.home_montagem .hidden a{
		color: white;
		background: #33995f;
	}

.home_sistema{
	background: #222;
}
	.home_sistema article{
		background: #ff3333;
	}
		@media (max-width: 768px){
			.home_sistema{
				flex-direction: column-reverse;
			}
			.home_sistema article{
				background: none;
				padding: 0;
			}
				.home_sistema article h3{
					color: #ff3333;
				}
		}
	.home_sistema .card{
		color: white;
	}
	.home_sistema .hidden a{
		color: white;
		background: #ff3333;
	}

.home_equipamento article{
	background: #6699ff;
}
		@media (max-width: 768px){
			.home_equipamento article{
				color: #111;
				background: none;
				padding: 0;
			}
				.home_equipamento article h3{
					color: #6699ff;
				}
		}
	.home_equipamento .div_card img[alt="Logo UPX"], .home_equipamento .div_card img[alt="Logo Elgin"]{
		height: 75%;
	}
	.home_equipamento .hidden a{
		color: white;
		background: #6699ff;
	}

.home_assistencia{
	background: #222;
}
	.home_assistencia article{
		background: #ff9900;
	}
		@media (max-width: 768px){
			.home_assistencia{
				flex-direction: column-reverse;
			}
			.home_assistencia article{
				background: none;
				padding: 0;
			}
				.home_assistencia article h3{
					color: #ff9900;
				}
		}
	.home_assistencia .card{
		color: white;
	}
	.home_assistencia .hidden a{
		color: white;
		background: #ff9900;
	}

.home_servicos article{
	background: ;
}