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


/*MENU SUPERIOR*/

.menu-superior {
	z-index: 1;
	display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 96%;
    max-width: 900px;
    height: 110px;
    align-items: flex-start;
    justify-content: center;
	margin-top: -120px;
}

.menu-superior ul {
	display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 60%;
}

.bt-home img {
	display: block;
    width: 100%;
}

.bt-loja img {
	display: block;
    width: 100%;
	filter: grayscale(100%);
  	transition: filter 0.3s ease;
}

.bt-loja img:hover {
	filter: grayscale(0%);
}

.bt-home, .bt-loja {
	display: block;
	width: 50px;
    max-width: 90px;
}

.divisoria {
	margin: 0px 25px;
    border-right: solid #9d074f 3px;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 50px;
}

/*HERO*/
hero{
	display: flex;
    flex-direction: column;
	align-items: center;
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
	text-align: center;
	margin-bottom: 130px;
}

hero h1 {
	font-size: 26px;
    font-family: FlodeB;
    color: #80134a;
    margin: 60px 0px;
    letter-spacing: 1px;
    font-weight: 100;
}

hero h2 {
	font-size: 24px;
    margin-bottom: 60px;
    color: #555;
    font-family: Flode;
    font-weight: bold;
	max-width: 800px;
}

hero p {
    line-height: 1.6;
    width: 94%;
    max-width: 640px;
    margin: 0 auto;
    margin-bottom: 16px;
}

h2 {
	font-family: 'FlodeB';
    font-size: 20px;
	text-align: center;
    letter-spacing: 1px;
	color: #80134a;
}

h3 {
	text-align: center;
    font-family: 'FlodeB';
    font-weight: 100;
    font-size: 18px;
}

/*BOX KADU*/
.box-kadu {
	display: flex;
    flex-direction: column;
	align-items: center;
    background-color: #80134a;
	height: auto;
	z-index: 0;
	margin-bottom: 130px;
	margin-top: 190px;
}

.box-kadu span {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	z-index: 1;
	width: 94%;
}

.texto {
	color: #fff;
	text-align: center;
	margin-top: 50px;
}

.texto h2 {
	margin-bottom: 25px;
	color: #fff;
}

.texto p {
	text-align: left;
    margin-bottom: 18px;
    line-height: 1.4;
}

.texto ul {
	text-align: left;
    text-indent: -15px;
    padding-left: 30px;
}

.texto ul li {
	margin-bottom: 10px;
}

.kadu-cebola {
	width: 200px;
	margin-top: -250px;
}

/*NADA DE TEMPLATES*/
.box-sem-templates {
	display: flex;
    flex-direction: column;
    margin-bottom: 130px;
    align-items: center;
}

.box-sem-templates span {
	display: flex;
    flex-direction: column;
    text-align: center;
    width: 94%;
    max-width: 650px;
}

.box-sem-templates h3 {
	margin-bottom: 25px;
}

.box-sem-templates p {
	line-height: 1.4;
}

/*BOX DANY*/
.dany-chico {
	width: 200px;
	margin-top: -250px;
}

.box-dany {
	display: flex;
    flex-direction: column;
    background-color: #ddd;
    height: auto;
    z-index: 0;
    align-items: center;
    margin-top: 190px;
}

.box-dany span {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 94%;
    z-index: 1;
}

.processo-criacao {
	margin-top: 50px;
    width: 94%;
    max-width: 650px;
    display: flex;
    flex-direction: column;
	align-items: center;
}

.processo-criacao h2 {
	margin-bottom: 25px;
}

.bt-processos {
	max-width: 300px;
    display: inline-flex;
    flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 5px;
	justify-content: center;
	margin-bottom: 25px;
}

.bt-processos a {
	display: block;
    overflow-x: hidden;
    text-indent: -1000px;
    width: 90px;
    height: 90px;
}

.passo1 {
	background: url("../img/passo1.svg") no-repeat center;
	background-size: contain;
}

.passo2 {
	background: url("../img/passo2.svg") no-repeat center;
	background-size: contain;
}

.passo3 {
	background: url("../img/passo3.svg") no-repeat center;
	background-size: contain;
}

.passo4 {
	background: url("../img/passo4.svg") no-repeat center;
	background-size: contain;
}

.passo5 {
	background: url("../img/passo5.svg") no-repeat center;
	background-size: contain;
}

/*BOX VIDEO*/
.box-video {
	display: flex;
    flex-direction: column;
    align-items: center;
    margin: 130px 0px;
	text-align: center;
}

.box-video span {
	display: flex;
    flex-direction: column;
    width: 94%;
    max-width: 300px;
	align-items: center;
}

.box-video span h3 {
	margin-bottom: 25px;
}

.box-video video {
	width: 100%;
    max-width: 640px;
    margin-bottom: 25px;
}

.box-video p {
	margin-bottom: 16px;
    line-height: 1.5;
}

.box-video a {
	display: block;
    margin: 25px auto;
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: #80134a;
    font-family: 'FlodeB';
    color: #fff;
    text-align: center;
    line-height: 55px;
    font-size: 20px;
    letter-spacing: 1px;
	transition: 0.3s ease;
}

.box-video a:hover {
	background-color: #581248;
}

/*BOX PLANOS*/
.box-planos {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.box-planos h2 {
	margin-bottom: 65px;
    width: 100%;
    max-width: 280px;
}

.box-planos span {
	display: flex;
    flex-direction: column;
    width: 94%;
    max-width: 300px;
}

.basico h3, .luxo h3 {
	color: #80134a;
	font-size: 26px;
}

/*
.basico, .essencial, .luxo {
	display: flex;
	flex-direction: column;
}*/

.basico, .luxo {
	background-color: #ddd;
    padding: 20px 10px;
    margin: 0px 20px;
}

.basico {
	border-radius: 20px 20px 0px 0px;
}

.luxo {
	border-radius: 0px 0px 20px 20px;
}

.subtitulo {
	font-family: 'FlodeB';
    color: #80134a;
    font-size: 18px;
    margin: 15px 0px 5px 0px;
}

.texto-subtitulo {
	text-indent: -16px;
	padding-left: 32px
}

.texto-subtitulo li {
	margin-bottom: 5px;
}

.essencial h3 {
	font-size: 26px;
}

.essencial {
	background-color: #80134a;
    border-radius: 25px;
    padding: 20px 10px;
	color: #fff;
}

.subtitulo2 {
	font-family: 'FlodeB';
    font-size: 18px;
    margin: 15px 0px 5px 0px;
}

.texto-subtitulo2 {
	text-indent: -16px;
	padding-left: 32px
}

.texto-subtitulo2 li {
	margin-bottom: 5px;
}

.prazo {
	margin-top: 25px;
    text-align: center;
	font-family: 'FlodeB';
    color: #80134a;
    font-size: 14px;
	width: 60%;
    max-width: 650px;
}

.bt-plano1, .bt-plano2, .bt-plano3 {
	display: block;
    margin: 20px auto 0px auto;
    width: 200px;
    height: 50px;
    text-align: center;
    color: #fff;
    font-family: 'FlodeB';
    background-color: #80134a;
    border-radius: 16px;
    line-height: 50px;
    transition: 0.3s ease;
}

.bt-plano2 {
	color: #80134a;
	background-color: #fff;
}

.bt-plano1:hover, .bt-plano3:hover {
	background-color: #581248;
}

.bt-plano2:hover {
	background-color: #C878AA;
}


/*FAQ*/
.box-duvidas {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #ddd;
    height: auto;
    margin: 130px 0px 50px 0px;
}

.box-duvidas span {
	display: flex;
    flex-direction: column-reverse;
    width: 96%;
    max-width: 300px;
    align-items: center;
	justify-content: center;
}

.texto-faq {
	margin: 50px 0;
    text-align: center;
}

.texto-faq h2, .texto-faq p {
	margin-bottom: 25px;
    line-height: 1.3;
}

.texto-faq a {
	display: inline-block;
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: #80134a;
    font-family: 'FlodeB';
    color: #fff;
    line-height: 55px;
    font-size: 20px;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.texto-faq a:hover {
	background-color: #581248;
}

.chico-normal {
	width: 200px;
	margin-top: -80px;
}

.chico-corte {
	display: none;
}

/*----------------------------------------------------------------*/

/*TELA -420PX*/
@media (max-width:420px){
	.menu-superior {
		padding-left: 2%;
	}
	
	hero h1 {
		max-width: 350px;
	}
	
	hero h2 {
		max-width: 330px;
	}
}

/*TELA -*768PX*/
@media (min-width:421px) and (max-width:768px) {
	.menu-superior {
		margin-top: -160px;
		padding-left: 3%;
	}
	
	.bt-home, .bt-loja {
		display: block;
		width: 70px;
		max-width: 90px;
	}
	
	h2 {
		font-size: 34px;
	}
	
	h3 {
		font-size: 25px;
	}
	
	hero h1 {
		font-size: 34px;
	}
	
	hero h2 {
		max-width: 600px;
	}
	
	/*BOX KADU*/
	.box-kadu span {
		max-width: 680px;
	}
	
	.texto h2 {
		font-size: 34px;
	}
	
	/*BOX DANY*/
	.bt-processos {
		max-width: 450px;
		gap: 6px 30px;
	}
	
	.bt-processos a {
		width: 120px;
		height: 120px;
	}
	
	.box-video span {
		max-width: 650px;
	}
	
	/*PLANOS*/
	.box-planos h2 {
		max-width: 650px;
	}
	
	.box-planos span {
		max-width: 650px;
	}
	
	.subtitulo, .texto-subtitulo, .subtitulo2, .texto-subtitulo2 {
	width: 45%;
    margin: 15px auto 5px auto;
}
	
	/*FAQ*/
	.box-duvidas span {
		max-width: 650px;
	}
}

/*TELA + 768*/
@media (min-width:769px) {
	.menu-superior {
		margin-top: -210px;
	}
	
	.bt-home, .bt-loja {
		display: block;
		width: 90px;
		max-width: 90px;
	}
	
	h2 {
		font-size: 34px;
	}
	
	h3 {
		font-size: 25px;
	}
	
	hero h1 {
		font-size: 42px;
		letter-spacing: 2px;
	}
	
	hero h2 {
		font-size: 34px;
	}
	
	/*BOX KADU*/
	.box-kadu {
		height: 460px;
		margin-top: 0px;
	}

	.box-kadu span {
		flex-direction: row;
		max-width: 850px;
		height: 460px;
	}
	
	.texto {
		margin-top: 0px;
	}
	
	.texto h2 {
		font-size: 34px;
	}
	
	.kadu-cebola {
		width: 270px;
		margin-top: -40px;
	}
	
	/*BOX DANY*/
	.box-dany {
		height: 460px;
		margin-top: 40px;
	}
	
	.box-dany span {
		flex-direction: row;
		max-width: 900px;
	}
	
	.dany-chico {
		width: 300px;
    	margin-top: -70px;
	}
	
	.processo-criacao {
		margin-top: 0px;
	}
	
	.bt-processos {
    	max-width: 530px;
	}
	
	.bt-processos a {
		width: 130px;
    	height: 130px;
	}
	
	.bt-processos a:hover {
		background-size: 133px;
		transition: 0.2s ease;
	}
	
	/*BOX VIDEO*/
	.box-video span {
		max-width: 850px;
	}
	
	/*PLANOS*/
	.box-planos h2 {
		max-width: 900px;
	}
	
	.box-planos span {
		flex-direction: row;
		max-width: 900px;
	}
	
	.basico, .luxo {
		margin: 0px;
		height: 600px;
	}
	
	.basico {
		border-radius: 20px 0px 0px 20px;
	}
	
	.luxo {
		border-radius: 0px 20px 20px 0px;
	}
	
	.essencial {
		height: 650px;
		margin-top: -25px;
	}
	
	.essencial h3 {
		margin-top: 25px;
	}
	
	.bt-plano1 {
		margin-top:  210px;
	}
	
	.bt-plano2 {
		margin-top: 160px;
	}
	
	.bt-plano3 {
		margin-top: 110px;
	}
	
	.prazo {
		font-size: 18px;
	}
	
	
	/*FAQ*/
	.box-duvidas {
		height: 300px;
	}
	
	.box-duvidas span {
		max-width: 900px;
		flex-direction: row;
        height: auto;
	}
	
	.texto-faq {
		margin: 50px 85px 50px 0px;
	}
	
	.chico-normal {
		display: none;
	}
	
	.chico-corte {
		display: flex;
		width: 320px;
		margin-top: -62px;
	}
	
}






/*


/*PLANOS
.box-planos {
	display: flex;
	width: 100%;
	margin-top: 170px;
}

.box-planos span {
	width: 870px;
	margin: 0 auto;
}

.box-planos h2 {
	margin-bottom: 90px;
}

.box-planos h3 {
	font-size: 32px;
    margin-top: 35px;
	color: #80134a;
}

.basico, .luxo {
	display: block;
	width: 290px;
	height: 600px;
	float: left;
	background-color: #ddd;
}

.basico {
	border-radius: 30px 0px 0px 30px;
}

.luxo {
	border-radius: 0px 30px 30px 0px;
}

.essencial {
	display: block;
	width: 290px;
	height: 650px;
	float: left;
	margin-top: -25px;
	border-radius: 30px;
	background-color: #80134a;
}

.essencial h3 {
	color: #fff;
	margin-top: 60px;
}

.subtitulo {
	text-indent: 16px;
	color: #80134a;
    font-family: 'FlodeB';
    font-size: 20px;
    letter-spacing: 1px;
	margin: 35px 0px 10px 0px;
}	

.texto-subtitulo {
	padding-left: 32px;
    text-indent: -16px;
	color: #80134a;
	line-height: 1.6;
}

.subtitulo2 {
	text-indent: 16px;
	color: #fff;
    font-family: 'FlodeB';
    font-size: 20px;
    letter-spacing: 1px;
	margin: 35px 0px 10px 0px;
}	

.texto-subtitulo2 {
	padding-left: 32px;
    text-indent: -16px;
	color: #fff;
	line-height: 1.6;
}

.bt-plano1, .bt-plano3 {
	display: block;
    margin: 0 auto;
    width: 200px;
    height: 50px;
    background-color: #80134a;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    font-family: 'FlodeB';
    letter-spacing: 1px;
    font-size: 18px;
    line-height: 50px;
	transition: 0.3s ease;
}

.bt-plano2 {
	display: block;
    margin: 0 auto;
    width: 200px;
    height: 50px;
    background-color: #fff;
    border-radius: 16px;
    text-align: center;
    color: #80134a;
    font-family: 'FlodeB';
    letter-spacing: 1px;
    font-size: 18px;
    line-height: 50px;
	transition: 0.3s ease;
}

.bt-plano1 {
	margin-top: 140px;
}

.bt-plano2 {
	margin-top: 90px;
}

.bt-plano3 {
	margin-top: 40px;
}

.bt-plano1:hover, .bt-plano3:hover {
	background-color: #581248;
}

.bt-plano2:hover {
	background-color: #C878AA;
}

.prazo {
	display: inline-block;
    margin-top: 40px;
    text-align: center;
    width: 100%;
	font-family: 'FlodeB';
    color: #80134a;
    font-size: 18px;
}
*/