@charset "utf-8";
/* CSS Document */

/*reset dos elementos através do CSS*/
* { margin: 0; padding: 0; }

/*Fontes*/


@font-face{
	font-family: Roboto;
	src:url("font/Roboto-Regular.ttf")
}

@font-face{
	font-family: Alienware;
	src:url("font/alienware-regular.ttf")
}

@font-face{
	font-family: AlienwareBold;
	src:url("font/alienware-bold.ttf")
}

@font-face{
	font-family: AlienwareItalic;
	src:url("font/alienware-italic.ttf")
}



/*Estilos textos*/

.content h2{
	font-family: Alienware;	
	font-size: 3vw
}

.content h3{
	font-family: Alienware;	
	font-size: 2vw
}

.content h4{
	font-family: Alienware;	
	font-size: 1.5vw
}

.content p{
	font-family: Alienware;
	font-size: 1vw
}

.content em{
	font-family: Alienware;	
	font-size: 0.8vw
}

a{
    color: #2f9bd9;
	font-size: 0.7vw
}

a:visited {
    color: #2f9bd9;
	font-size: 0.7vw
}

/*estilo do box onde fica a página*/

.content{
	width: 100%;
	display: flex;
	flex-direction: column;
	}

/* início estilo dos banners*/

.content .banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto
}

.content .banner img{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto
}
/*fim estilo dos banners*/

/*inicio estilo das configurações*/
.content .configuracoes {
	font-family: AlienwareBold;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 95%;
	padding-top: 2%;
	padding-left: 5%;
	height: auto;
	background-color: #000000;
	color: #ffffff
}

.configuracoes .A{
	flex-grow: 1;
	
}

.configuracoes .B{
	flex-grow: 2;
	
}

.configuracoes img{
	width: 100px;
}

.configuracoes p{
	width: 100%;
}

/*fim estilo das configurações*/

/* início estilo caixa texto*/

.content .texto{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin: auto;
	text-align: center;
	padding-top: 5%;
	padding-bottom: 5%;
}

/* fim estilo caixa texto*/






/* inicio estilo 2textosB*/
.content .doistextosB {
  display: flex;
  flex-direction: row;
  align-items: stretch; /* Estica ambas as colunas igualmente */
  width: 100%;
}

.content .doistextosB .caixaF {
  width: 50%;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
}

.content .doistextosB .caixaF img {
  width: 100%;
  height: auto;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: 0.3s ease;
	
	}

.content .doistextosB .caixaF p{
	color: #ffffff;
	font-size: 1.6vw;
	padding: 18px
	
	
	}

#colunaAccordion {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#imgLateral {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* fim estilo accordion*/


/* estilo vídeo */

.banner video {
  width: 100%;
  height: auto;
  display: block;
}

/* fim estilo video */

/* início estilo carrossel  imagens*/

.carrossel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* 3 slides */
}

.slide {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}


.slide img {
  width: 100%;
  height: auto;
  object-fit: contain; /* ou "cover" se quiser preencher */
  display: block;
}

.texto-slide {
  position: absolute;
  top: 25%;
  left: 10%;
  font-size: 2.5rem;
  color: #000000;
  width: 90%;
  max-width: 700px;
}

.seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: white;
  background: rgba(0,0,0,0.4);
  border: none;
  cursor: pointer;
  z-index: 1;
  padding: 0 10px;
}

.esquerda {
  left: 10px;
}

.direita {
  right: 10px;
}

.pontos {
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.ponto {
  width: 12px;
  height: 12px;
  background: black;
  opacity: 0.5;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s;
}

.ponto.ativo {
  opacity: 1;
}

/* fim estilo carrossel imagens*/


/* início estilo caixa video*/

.content .video{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin: auto;
	
}

/* fim estilo caixa video*/


/* estilo accordion 2*/

.accordion2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
	color: white
}

.accordion2 .icon {
  font-size: 20px;
  margin-left: 10px;
  transition: transform 0.2s ease;
}

.accordion2.active .icon {
  transform: rotate(180deg);
  content: "−";
}

.panel2 {
  display: none;
  overflow: hidden;
  padding: 10px;
  transition: max-height 0.2s ease-out;

}


/* fim estilo accordion 2*/


				/* inicio estilo carrossel 2*/

.carrossel2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.slides2 {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* 4 slides */
}

.slide2 {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.slide2.ativo2 {
  display: block;
}

.slide2 img {
  width: 100%;
  height: auto;
  object-fit: contain; /* ou "cover" se quiser preencher */
  display: block;
}

.seta.esquerda2, .seta.direita2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  z-index: 1;
  padding: 0 10px;
}

.seta.esquerda2 { left: 10px; }
.seta.direita2 { right: 10px; }

.pontos2 {
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.ponto2 {
  width: 12px;
  height: 12px;
  background: black;
  opacity: 0.5;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s;
}

.ponto2.ativo2 {
  opacity: 1;
}



				/* fim estilo carrossel 2 */





/* início estilo box*/

.content .boxes {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: auto;
	padding-top: 2%;
	padding-bottom: 2%
}

.boxes .caixaA{
	background-color: #c0c2c4;
	flex-grow: 1;
	margin: 0.3%;
	text-align: center;
	padding: 2%;
  	border-radius: 10px;
}

.boxes .caixaA p{
	font-family: Roboto;
	font-size: 1.3vw;
	line-height: 1.5em
}

/* fim estilo box*/

/* início estilo box2*/

.content .boxes2 {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: auto;
	
}

.content .boxes2 .boxA{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70%;
	height: auto;
	padding: 3%;
	
}

.boxA .caixaB{
	background-color: rgb(48, 12, 140);
	margin: 1%;
	text-align: center;
	width: 100%;
	height: auto;
	padding-right: 0.5%;
	padding-left: 0.5%;
  	border-radius: 10px;
}

.boxA .caixaB h3{
	color: white;
	font-size: 1.5vw
}

.content .boxes2 .boximagem{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto;
	padding-right: 2%;	
	border-radius: 10px;
	
}

.content .boxes2 .boximagem img{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-left: 10%
	
	
}

.content .boxes2 .boximagem2 img{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
	height: auto;
	border-radius: 10px;
	margin-left: 25%
	
	
}

.content .boxes2 .boxA2{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto;
	padding-left: 10%;
	padding-bottom: 3%
	
}

.boxA2 .caixaB{
	background-color: rgb(48, 12, 140);
	margin: 1%;
	text-align: center;
	width: 100%;
	height: auto;
	padding-right: 0.5%;
	padding-left: 0.5%;
  	border-radius: 10px;
}

.boxA2 .caixaB h3{
	color: white;
	font-size: 1.5vw
}

/* fim estilo box2*/




/* inicio estilo 2textos*/
.content .doistextos{
	background-color: #212731;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	margin: auto;
	text-align: center;
	
}

.content .doistextos .caixaC{
	display: flex;
	flex-direction: column;
	width: 50%;
	height: auto;
	margin: auto;
	text-align: center;
	
}

/* fim estilo 2textos*/

/* início estilo box3*/

.content .boxes3 {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	width: 100%;
	min-height: 50px;
	
	
	
	
}

.boxes3 .caixaD{
	margin: 0.3%;
	padding: 2%;
	width: 30%;
  	text-align: center
}

.boxes3 .caixaD p{
	font-family: Roboto;
	font-size: 1vw;
	line-height: 1.3em;
	
}

.boxes3 .caixaD h4{
	font-family: Roboto;
	font-size: 1.2vw;
	line-height: 1.3em;
	
}

.boxes3 .caixaD img{
	width: 100%;
	height: auto
}

/* fim estilo box3*/

/* início estilo boxes4*/

.content .boxes4 {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: auto;
	padding-top: 2%;
	padding-bottom: 2%
}

.content .boxes4 .caixaE{
	display: flex;
	flex-direction: column;
	margin: auto;
	text-align: left;
	width: 33%;
	height: auto;
	border-radius: 10px;
}

.content .boxes4 .caixaE .textoE{
	width: 100%;
	height: 250px;
	border-radius: 10px 10px 0px 0px;
	
}

.content .boxes4 .caixaE img{
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
	
}

.content .boxes4 .caixaE h3{
	font-size: 1vw
	
}

.content .boxes4 .caixaE p{
	font-size: 0.8vw
	
}

.boxes4 .caixaE p{
	font-family: Roboto;
	font-size: 1vw;
	line-height: 1.5em;
	padding: 2%
	
}

.boxes4 .caixaE h4{
	font-family: Roboto;
	font-size: 1.3vw;
	line-height: 1.5em;
	margin-top: 2%;
	padding: 2%
	
}



.boxes3 .caixaG{
	background-color: #343434;
	flex-grow: 1;
	margin: 0.3%;
	text-align: center;
	padding: 2%;
  	border-radius: 10px;
	height: 55%
}

.boxes3 .caixaG p{
	font-family: Roboto;
	font-size: 1vw;
	line-height: 1.5em;
	color: white
}

.boxes3 .caixaG h4{
	font-family: Roboto;
	font-size: 1.3vw;
	line-height: 1.5em;
	color: white
}

.boxes td{
	font-family: Roboto;
	font-size: 1vw;
	
}

.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:70%;margin-left: 5%; display:table;}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}

.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}

.w3-table {
    table-layout: fixed; /* Garante que as colunas terão a mesma largura */
    width: 100%; /* Garante que a tabela ocupe toda a largura disponível */
}

.w3-table td {
    word-wrap: break-word; /* Permite quebrar o texto longo, caso necessário */
}

.content .bannerB {
	background-image: url("images/bg1.png");
	background-repeat: no-repeat;
  	background-size: 100% auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	
}

.content .bannerC {
	background-image: url("images/bg2.png");
	background-repeat: no-repeat;
  	background-size: 100% auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	
}

.content .bannerB .textoB{
	display: flex;
	flex-direction: column;
	width: 30%;
	height: auto;
	color: white;
	margin: auto;
	margin-left: 10%;
	padding: 10%
	
}

.content .bannerC .textoC{
	display: flex;
	flex-direction: column;
	width: 30%;
	height: auto;
	color: white;
	margin: auto;
	margin-left: 40%;
	padding: 10%
	
}

/*inicio estilo icones garantias*/

.content .caixaicones{
width: 100%;
display: flex;
flex-direction: row;
margin: auto;

}

.content .caixaicones .imagem{
width: 50%;
display: flex;
flex-direction: row;
}

.content .caixaicones .texto2{
width: 50%;
padding-right: 10%;
display: flex;
flex-direction: column;
margin: auto

}

.caixaicones img{
height: 200px;
width: auto;
align-items: center;
display: block;
margin: auto
}



/*fim estilo icones garantias*/

.content .notas{
	background-color: #f0f0f0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin: auto;
	text-align: left;
	padding-top: 3%
}

.content .notas p{
	padding-right: 3%;
	padding-left: 3%
}

.content .boxestabela{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 30%;
	height: auto;
	margin: auto;
	
	
}

td{
	font-family: Roboto;
	font-size: 1vw;
	
	
}

/*inicio estilo texto-imagem-texto*/

.content .caixa3{
	display: flex;
	flex-direction: row;
	width: 100%;
	
}

.content .caixa3 .textoA1{
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 90%;
	margin: auto
	
}

.content .caixa3 .caixaB{
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: auto;
	width: 40%;
	
	
}

.content .caixa3 .textoA3{
	display: flex;
	flex-direction: column;
	width: 50%;
	padding-left: 2%;
	padding-right: 2%;
	margin: auto
}

.content .caixa3 .imagemA2{
	display: flex;
	flex-direction: column;
	width: 30%;
	margin: auto
}

.content .caixa3 .imagemA2 img{
	width: 100%;
	height: auto;
	margin: auto
}


/*fim estilo texto-imagem-texto*/



.boxes3 .caixaD2{
	background-color: #002a58;
	flex-grow: 1;
	margin: 0.5%;
	text-align: left;
	padding: 2%;
  	height: auto
}

.boxes3 .caixaD2 img{
	width: 90px;
	height: auto
}


/* Estilo estático para os 4 cards - 2 por linha */
.cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 5% 10%;
  background-color: black;
}

.card {
  width: 45%;
  min-width: 300px;
  background-color: #1a1a1a;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: auto;
}

.layout-estatico {
  display: flex;
  align-items: stretch;
  justify-content: center;
  
  background-color: white;

  
}

.coluna-imagem {
  flex: 50%;
  min-width: 300px;
}

.coluna-imagem img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.coluna-textos {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bloco-texto {
  color: white;
  padding: 18px;
  
 
  text-align: left;
}

.bloco-texto h4 {
  margin-bottom: 10px;
  font-size: 18px;
}


.layout-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100%;
  background-color: white;
}

.imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.textos {
  display: flex;
  flex-direction: column;
}

.bloco-texto {
  flex: 1;
  padding: 18px;
  color: white;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
 
}

.bloco-texto:last-child {
  border-bottom: none;
}

.bloco-texto h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

/* inicio estilo bloco coluna imagem e texto*/

.containerbl2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch; /* <- faz ambas as colunas terem a mesma altura */
	
}

.coluna-imagem {
    flex: 1 1 45%;
    text-align: center;
    display: flex; /* para imagem centralizar verticalmente se quiser */
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.coluna-imagem img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.coluna-caixas {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    
}

.caixa {
    padding: 20px;
    text-align: center;
    display: flex;                /* Torna flex container */
    flex-direction: column;       /* Alinha em coluna */
    justify-content: center;      /* Centraliza verticalmente */
    height: 100%;                 /* Garante altura total disponível */
	 border-radius: 15px;         /* Borda arredondada */
    margin: 1%;                  /* 2% de gap total entre os elementos (1% de cada lado) */
    box-sizing: border-box;      /* Garante que padding + border não ultrapassem o tamanho */
}

.caixa h3 {
    color: #2f9bd9;
    margin-bottom: 10px;
}

.caixa h2 {
    color: #707070;
    margin-bottom: 10px;
}

.caixa p {
    font-size: 1rem;
    color: #ffffff;
}

/* fim estilo */

/* inicio estilo 2textosB*/
.content .doistextosB2{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	margin: auto;
	text-align: center;
	
	
}

.content .doistextosB2 .caixaF2{
	display: flex;
	flex-direction: column;
	width: 50%;
	height: auto;
	margin: auto;
	text-align: left;
	padding-top: 2%;
	
	
}

.content .doistextosB2 .caixaF2 img{
	display: flex;
	flex-direction: column;
	width: 95%;
	height: auto;
	margin: auto;
	
	}



/* fim estilo 2textos*/