@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
	/*cores de texto*/
	--cor-texto: #000000;
	--cor-link: #000000;
	--cor-box-texto-fundo: #f5f5f5;
	--cor-descricao-small: #505050;

	/*cores de elementos*/
	--faq-borda: #d1d1d1;
	--faq-cor-texto: #000000;
	--fale-conosco-borda-box: #8e8e8e;
	--cor-active-card-fundo: #fbfbfb;
	--cor-borda-input: #d1d1d1;

	/*tamanhos/espaçcamentos*/
	--x0: 0px;
	--x1: 4px;
	--x2: 8px;
	--x3: 12px;
	--x4: 16px;
	--x5: 20px;
	--x6: 24px;
	--x7: 28px;
	--x8: 32px;
	--x9: 36px;
	--x10: 40px;
	--x24: 96px;

	/*fontes*/
	--titulo: 40px;
	--subtitulo: 20px;
	--titulo-box: 17px;
	--titulo-pergunta: 18px;
	--p: 16px;
}

/*textos reset*/
.container-institucional h1, 
.container-institucional h2, 
.container-institucional h3, 
.container-institucional h4, 
.container-institucional h5, 
.container-institucional h6, 
.container-institucional p{
    margin: var(--x0);
}



/** reset pagina da loja **/
#corpo{
	margin: 0px !important;
	padding: 0px !important;
}

/*.conteiner-principal .conteiner*/
#corpo .container, #corpo>.conteiner {
    padding: 0px !important;
}

h1.titulo.cor-secundaria {
    display: none !important;
}

.vantagens {
    display: none !important;
}

.caixa-sombreada,#corpo .secao-principal>div {
    padding: 0px !important;
}

/** oculta o scroll de redes sociais***/
.conteudo.socialProximo{
	display: none !important;
}






/*conteudo*/
.container-institucional{
	font-family: "Lato", sans-serif;
	max-width: calc( 1280px - (2 * var(--x5)) );
	font-size: var(--p);
	margin: auto;
	padding: var(--x24) var(--x5)

}

.container-institucional p, 
.container-institucional span, 
.container-institucional ul, 
.container-institucional ol, 
.container-institucional li, 
.container-institucional a,
.container-institucional strong,
.container-institucional em,
.container-institucional u,
.container-institucional b,
.container-institucional s,
.container-institucional i,
.container-institucional form,
.container-institucional input,
.container-institucional option,
.container-institucional select,
.container-institucional textarea,
.container-institucional small,
.container-institucional button{
	font-family: "Lato", sans-serif !important;

}

.container-institucional *{
	color: var(--cor-texto);
}

.container-institucional a{
	text-decoration: underline;
}

.faixa-links-institucionais {
    font-family: "Lato", sans-serif;
    background-color: var(--cor-box-texto-fundo);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--x6);
    flex-direction: row;
    padding: var(--x10) 0;
	text-align: center;
}

.faixa-links-institucionais a{
    color: var(--cor-link);
	font-size: var(--x4);
	text-decoration: underline;
}

.faixa-links-institucionais p,
.faixa-links-institucionais a,
.faixa-links-institucionais *{
	font-family: "Lato", sans-serif;
}


.container-institucional .titulo{
	/*font-family: "Bebas Neue Pro", sans-serif !important;*/
	font-family: "bebas-neue-pro", sans-serif !important;
	text-transform: uppercase;
	font-size: var(--titulo);
}

.container-institucional .subtitulo{
	font-size: var(--subtitulo);
	margin-bottom: var(--x1);
	line-height: 1;
}

.container-institucional p{
	margin-bottom: var(--x3);
	line-height: 1.3;
}

/*remove as margens do texto quando necessário*/
.container-institucional .sem-margem p{
	margin: 0px;
}

.container-institucional .container-institucional a{
	color: var(--cor-link);
}

.container-institucional ul, .container-institucional ol{
	margin: 0px;
}
.container-institucional li{
	list-style: unset !important;
}

.container-institucional ul li::marker{
	content: "\25CF";
}

.container-institucional ol{
	padding-inline-start: 15px;
	margin-bottom: var(--x2);
}

.container-institucional ul, 
.container-institucional li {
	margin-bottom: var(--x2);
	padding-inline-start: 5px;
}

.container-institucional .topicos-bullets{
	padding-inline-start: 40px;
	margin-bottom: var(--x2);
	margin-top: var(--x1);
}

.container-institucional .topicos-bullets li{
	padding-inline-start: var(--x3);
}

.container-institucional ul.no-bullets,
.container-institucional .no-bullets li::marker {
	list-style-type: none; /* Remove bullets */
	content: "";
	/*padding: 0px !important; /* Remove padding */
	margin: 0px !important; /* Remove margins */
	padding-inline-start: var(--x3);
}


/*caixas de texto com fundo*/
.container-institucional .box-texto{
	padding: var(--x5);
	border-radius: var(--x4);
	background-color: var(--cor-box-texto-fundo);
	margin-bottom: var(--x3);
}

.container-institucional .box-texto li{
	margin: var(--x1) var(--x0);
}

.container-institucional .titulo-box{
	font-size: var(--titulo-box);
}

.container-institucional .colunas{
	display: flex;
	flex-wrap: wrap;
	gap: var(--x6)
}





/*FAQ*/
.container-institucional .material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 100,
	'GRAD' 0,
	'opsz' 40
}

/*container com as perguntas*/
.container-institucional #wrapperFAQ{
	font-family: "Lato", sans-serif !important;
	width: 100%;
	max-width: 1280px;
	margin: auto;
}

.container-institucional #wrapperFAQ p{
	margin: var(--x0);
}

/*card individual de cada pergunta*/
.container-institucional .card{
	width: 100%;
	font-size: var(--p);
	line-height: 1.3;
	margin-bottom: 0px;
	border-bottom: 1px solid var(--faq-borda);
	overflow: hidden;
}

/*.card:hover{
	background: #fafafa;
}*/
.container-institucional .card:has(.active){
	background-color: var(--cor-active-card-fundo);
}


.container-institucional ul {
	  padding: 0px 20px;
	margin: 0px;
}

.container-institucional ul li {
	  margin: 0px 0px 10px 0px;

}

/********* perguntas *********/
.container-institucional .pergunta{
	width: 100%;
	padding: var(--x2) var(--x0);
	box-sizing: border-box;
	color: var(--faq-cor-texto);
	cursor: pointer;
	border: none;
	text-align: left;
	outline: none;
	transition: 0.4s;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.container-institucional .pergunta p{
	width: 100%;
	font-size: var(--titulo-pergunta);
}

/********* controle dos itens ativo *********/
.container-institucional .active{
	font-weight: bold;
}
.active:hover{
	cursor: pointer;
}


.container-institucional .pergunta:after, .container-institucional .active:after {
	font-family: 'Material Symbols Outlined';
	font-size: var(--x8);
	font-weight: 300;
	margin-left: var(--x2);
	width: var(--x8);
	height: var(--x8);
	display: flex;
	align-content: center;
	align-items: center;
	float: right;
}

/*ícones barra título*/
.container-institucional .pergunta:after {
	content: "keyboard_arrow_up";
}
/*ícones barra título*/
.container-institucional .active:after {
	content: "keyboard_arrow_down";
}

.container-institucional .resposta{
	min-width: 100%;
	width: 100%;
	max-width: 100%;
	padding: var(--x0);
	padding-bottom: var(--x4);
	padding-right: var(--x10);
	box-sizing: border-box;
	display: none;
	/*overflow: hidden;*/
	transition: max-height 0.2s ease-out;
}

/*** rastreamento ***/
.container-institucional .box-texto-passo-passo {
    width: calc( (1240px - (3*24px) ) / 4 );
    background: var(--cor-box-texto-fundo);
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
}

.container-institucional .titulo-passo-passo{
	margin-bottom: var(--x2);
}

.container-institucional .titulo-passo-passo h3{
	line-height: 1;
}

.container-institucional .titulo-passo-passo p{
	margin: 0px;
	font-size: var(--p);
	text-transform: uppercase;
}


/*fale conosco*/
.cards-contato h3{
	line-height: 1 !important;
}

.cards-contato small,
.cards-contato small {
    font-family: "Lato", sans-serif !important;
    font-size: 13px;
    line-height: 1;
}

.container-institucional .colunas-box-fale-conosco {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x6);
    flex-direction: row;
    justify-content: flex-start;
	padding-bottom: var(--x10);
}

.container-institucional .box-icone-texto {
    border: 1px solid var(--fale-conosco-borda-box);
    border-radius: var(--x4);
	box-sizing: border-box;
    padding: var(--x5);
    
	display: flex;
    flex-direction: column;
    align-content: space-around;
    align-items: center;
	justify-content: flex-start;
	gap:var(--x2);
	
	text-align: center;
	float: left;
	max-width: 292px;
	min-width: 292px;
	width: 292px;
	
}

.container-institucional .box-icone-texto p{
	margin: var(--x0);
}

.container-institucional .box-icone-texto a{
	text-decoration: none;
}

.container-institucional .box-icone-texto small{
	color: var(--cor-descricao-small);
}

.box-icone-texto p:has(small){
	line-height: 1;
}

.box-informacao-link-formulario{
	width: 100%;
}

.container-cards-imagem {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
}


.container-institucional .imagem-formulario {
    min-width: 600px;
	min-height: 300px;
	border-radius: var(--x4);
    background-image: url(contato-imagem-atendimento.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/***** como comprar ****/
.container-institucional .colunas-como-comprar{
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
}
.container-institucional .box-como-comprar{
	max-width: 390px;
	min-width: 280px;
	width: calc( (1240px - (3*24px) ) / 3 );
	margin-bottom: 24px;
}

.container-institucional .box-como-comprar img{
	margin-bottom: 12px;
	border-radius: var(--x1);
	border-width: 0;
	background-color: #fafafa;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;;
}

.container-institucional .banner-como-comprar{
	background-image: url("como-comprar-textura-esquerda.svg"), url("como-comprar-textura-direita.svg");
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-color: #A45B2F;
	text-align: center;
	margin: 24px 0px;
	padding: 16px;
	border-radius: 16px;
	max-height: 300px;
}

.container-institucional .banner-como-comprar *{
	color: #ffffff !important;

}
.container-institucional .banner-como-comprar h2,
.container-institucional .banner-como-comprar h2 *,
.banner-como-comprar h2 strong,
.banner-como-comprar h2 strong * {
	font-family: "bebas-neue-pro", sans-serif !important;
}

.container-institucional .banner-como-comprar p{
	margin: 0px;
	font-size: var(--x5);
}

/*****************************************************************************/
/************************** max-width 1300px *********************************/
/*****************************************************************************/
/*colunas passo a passo*/
@media only screen and (max-width: 1300px) {
	.container-institucional .box-como-comprar{
		width: calc(100vw - 71vw) !important;
	}
}

/*****************************************************************************/
/************************** max-width 1239px *********************************/
/*****************************************************************************/
/*colunas passo a passo*/
@media only screen and (max-width: 1239px) {
	/* For tablets */
	.container-institucional .linha-colunas-2 {
		flex-direction: column;
		
	}

}





/*****************************************************************************/
/************************** max-width 1299px *********************************/
/*****************************************************************************/
/*formulario*/
@media only screen and (max-width: 1299px) {
	/*** rastreamento ***/
	.container-institucional .box-texto-passo-passo {
		width: calc( (100vw - 80px ) / 2 );
	}

	.container-institucional .imagem-formulario {
		/*min-width: 400px;*/
		min-width: calc(100vw - 700px);
	}
}





/*****************************************************************************/
/************************** max-width 1024px *********************************/
/*****************************************************************************/
@media only screen and (max-width: 1024px) {
	/* For tablets */
	.container-institucional .imagem-formulario {
		/*min-width: 400px;*/
		min-height: 600px;
		background-position-x: 60%;
	}

	.container-institucional .colunas .box-texto {
		box-sizing: border-box;
		width: calc( (100vw - 80px ) / 2 );
	}
  }


/*****************************************************************************/
/************************** max-width 990px *********************************/
/*****************************************************************************/
/*colunas passo a passo*/
@media only screen and (max-width: 990px) {
	.container-institucional .box-como-comprar{
		min-width: 40vw;		
	}

	.container-cards-imagem {
		flex-direction: column;
	}

	.container-institucional .colunas-box-fale-conosco {
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.container-institucional .box-icone-texto {
		flex-direction: column;
		align-content: space-around;
		align-items: center;
		justify-content: flex-start;
		max-width: 900px;
		min-width: 292px;
		width: calc(100vw - 55vw);
	}
}


/*****************************************************************************/
/************************** max-width 800px **********************************/
/*****************************************************************************/
  @media only screen and (max-width: 800px) {
	.container-institucional{
		padding: var(--x8) var(--x4) !important;
	}

	.faixa-links-institucionais {
		flex-direction: column;
		text-align: center;
		gap: var(--x4);
		padding: var(--x6) 0;
	}


	/* For tablets */
	.container-institucional .container-form {
		flex-direction: column;
		row-gap: var(--x6);
	}

	.container-institucional .imagem-formulario {
		min-width: 100%;
		min-height: 440px;
	}

	/**como comprar**/
	.container-institucional .colunas-como-comprar{
		flex-direction: row;
	}

	.container-institucional .banner-como-comprar{
		background: url("como-comprar-textura-mobile.svg") #A45B2F center no-repeat;
		background-size: cover;
	}

  }





/*****************************************************************************/
/************************** max-width 720px **********************************/
/*****************************************************************************/

/*colunas passo a passo*/
@media only screen and (max-width: 720px) {
	.container-institucional .box-icone-texto {
		min-width: 100%;
	}
}


/*****************************************************************************/
/************************** max-width 720px **********************************/
/*****************************************************************************/

/*colunas passo a passo*/
@media only screen and (max-width: 600px) {
	/* For tablets */
	.container-institucional .colunas:has(.box-texto-passo-passo) {
		flex-direction: column;	
	}

	.container-institucional .box-texto-passo-passo{
		width: 100%;
		box-sizing: border-box;
	}

	.container-institucional .box-texto{
		width: 100%;
		box-sizing: border-box;
	}

	.container-institucional .colunas-como-comprar{
		gap:0px;
	}
	.container-institucional .box-como-comprar{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		min-width: 100%;
		gap: 0px;
	}

}