/* Fonts */
@font-face {
	font-family: 'work-sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(../fonts/WorkSans-Thin.woff2) format('woff2');
}
@font-face {
	font-family: 'work-sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/WorkSans-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'work-sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/WorkSans-Medium.ttf) format('woff2');
}
@font-face {
	font-family: 'work-sans';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/WorkSans-Bold.woff2) format('woff2');
}
/* Helpers */
.wrap { width: 100%; max-width: 1240px; padding: 0 20px; margin: 0 auto; position: relative; z-index: 3; }
.row { display: flex; flex-wrap: wrap; --gap: 0px; gap: var(--gap) 0; width: calc(100% + var(--gap)); }
	.row.m-gap { --gap: 20px; }
.col { width: calc(100% - var(--gap)); margin-right: var(--gap); }
@media ( min-width: 600px ){
	.w-1of2-tb { width: calc(50% - var(--gap)); }
	.w-1of3-tb { width: calc(33.33% - var(--gap)); }
	.w-2of3-tb { width: calc(66.66% - var(--gap)); }
	.w-1of4-tb { width: calc(25% - var(--gap)); }
	.w-3of4-tb { width: calc(75% - var(--gap)); }
}
@media ( min-width: 900px ) {
	.w-1of2-dt { width: calc(50% - var(--gap)); }
	.w-1of3-dt { width: calc(33.33% - var(--gap)); }
	.w-2of3-dt { width: calc(66.66% - var(--gap)); }
	.w-1of4-dt { width: calc(25% - var(--gap)); }
	.w-3of4-dt { width: calc(75% - var(--gap)); }
}
/* Reset */
*, *::before, *::after { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; scroll-behavior: smooth;}
body { background-color: #fff; font-family: var(--text-font); }
body, input, label, select, textarea { color: #000; font-size: 16px; }
a, button, label, summary, input[type="submit"] { cursor: pointer; text-decoration: none; transition: all .3s ease-out; }
img { display: block; max-width: 100%; height: auto; }

:root {
	--green: #C0F58B;
	--black: #141615;
	--blue: #0F3BFE;
	--text-font: "work-sans", sans-serif;
}

/* Navbar */
#nav {
	padding: 40px 40px 0;
}

#navbar {
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 99;
}

#access {
	list-style: none;
}

#access li {
	margin-top: 12px;
}

#access li a {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 60px;
	height: 60px;
	transition: all .3s ease-out;
	box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.25);
	border-radius: 16px;
}
#access li a.conecta {
	background:url(../img/conecta-icone.svg) no-repeat center;
	box-shadow: none;
}
#access li a.whatsapp {
	background: var(--green) url(../img/wpp.svg) no-repeat center;
}

#access li a.e-mail {
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H6L4 18V4H20V16Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
}

#access li a>span {
	position: absolute;
	top: 0;
	right: calc(100% + 10px);
	height: 60px;
	display: flex;
	align-items: center;
	font-size: .75rem;
	text-transform: capitalize;
	transform: translateX(60px);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease-out;
	z-index: 2;
	color: var(--black);
	background: var(--green);
	width: 160px;
	text-align: center;
	justify-content: center;
	box-shadow: 0px 5.125px 5.125px 0px rgba(0, 0, 0, 0.25);
	border-radius: 16px;
}

#access li a:hover>span {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}

#nav li {
	padding-bottom: 38px;
}


/*Banner*/
#banner {
	background: url(../img/bg-banner.webp) no-repeat center / cover;
	position: relative;
	padding: 40px 0;
	isolation: isolate;
}
#banner::before {
	content: '';
	position: absolute;
	width: 100vw;
	height: 100%;
	/* background: rgba(0, 0, 0, 0.5); */
	top: 0;
	left: 0;
	z-index: 1;
}
#banner::after {
	content: '';
	position: absolute;
	width: 400px;
	height: 114px;
	background: url(../img/vector-icon.svg) no-repeat center / cover;
	top: 0;
	left: 0;
	z-index: 2;
}
#banner .wrap {
	justify-content: center;
	display: flex;
	flex-direction: column;
	height: 90vh;
	row-gap: 30px;
	z-index: 3;
}
#banner h1{
	text-indent: -9999px;
	background: url(../img/conecta.svg) no-repeat center / contain;
	max-width: 366px;
	width: 100%;
	height: 80px;
}
#banner h2 {
	color: white;
	font-size: 23px;
	font-weight: 400;
	letter-spacing: 1.38px;
	max-width: 400px;
	padding-left: 30px;
	border-left: 3px solid var(--green);
	text-shadow: 0 0 10px rgba( 0 0 0 / 50% );
	/* filter: invert(100%); */
}
#banner .box{
	color: white;
	background: var(--black);
	max-width: 400px;
	border-radius: 12px;
}
#banner .box p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.96px;
	padding: 20px 40px;
}
#banner a {
	background: var(--green);
	color: var(--black);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1px;
	padding: 16px 40px;
	max-width: 350px;
	text-align: center;
	border-radius: 25px;
}
#banner a:hover {
	scale: 1.05;
	box-shadow: 0px 4px 15px 0px rgba(192, 245, 139, 0.5);
}
@media (max-width: 799px) {
	#banner .wrap{
		justify-content: end;
	}
	/* #banner h2 {
		color: #000;
	} */
	#banner::before {
		background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
	}
}


/*Transformamos*/
#transformamos {
    background-color: var(--black);
    padding: 100px 0;
    position: relative;
}


#transformamos::after {
    content: '';
    position: absolute;
	background: url(../img/form-big.svg) no-repeat right / contain;
    top:0;
    left: auto;
    right: 0;
    width: 384px;
    height: 100%;
}
#transformamos .conteudo {
	position: relative;
	z-index: 2;
	    max-width: 710px;
    padding-left: 250px;
}
#transformamos .conteudo::before{
	content: '';
	position: absolute;
	width: 184px;
	height: 184px;
	border-radius: 50%;
	border: 2px solid var(--green);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='75' viewBox='0 0 86 75' fill='none'%3E%3Cpath d='M30.1596 58.8106V64.0499C30.1596 64.7834 29.5765 65.3597 28.8345 65.3597C28.0924 65.3597 27.5093 64.7834 27.5093 64.0499V58.8106C27.5093 58.0771 28.0924 57.5008 28.8345 57.5008C29.5765 57.5008 30.1596 58.0771 30.1596 58.8106ZM44.7358 47.0223C43.9938 47.0223 43.4107 47.5986 43.4107 48.3321V64.0499C43.4107 64.7834 43.9938 65.3597 44.7358 65.3597C45.4779 65.3597 46.061 64.7834 46.061 64.0499V48.3321C46.061 47.5986 45.4779 47.0223 44.7358 47.0223ZM60.6372 36.5438C59.8952 36.5438 59.3121 37.1201 59.3121 37.8536V64.0499C59.3121 64.7834 59.8952 65.3597 60.6372 65.3597C61.3793 65.3597 61.9623 64.7834 61.9623 64.0499V37.8536C61.9623 37.1201 61.3793 36.5438 60.6372 36.5438ZM65.9377 10.3475H55.3368C54.5947 10.3475 54.0116 10.9238 54.0116 11.6573C54.0116 12.3908 54.5947 12.9671 55.3368 12.9671H62.7309L44.7358 30.7544L35.0625 21.1928C34.5324 20.6688 33.7109 20.6688 33.1808 21.1928L22.5799 31.6713C22.0499 32.1952 22.0499 33.0073 22.5799 33.5312C23.11 34.0551 23.9315 34.0551 24.4616 33.5312L34.1349 23.9696L43.8083 33.5312C44.0733 33.7932 44.4178 33.9242 44.7358 33.9242C45.0539 33.9242 45.4249 33.7932 45.6634 33.5312L64.6126 14.8009V22.1096C64.6126 22.8431 65.1956 23.4194 65.9377 23.4194C66.6797 23.4194 67.2628 22.8431 67.2628 22.1096V11.6311C67.2628 10.8976 66.6797 10.3213 65.9377 10.3213V10.3475Z' fill='%23C0F58B'/%3E%3C/svg%3E") no-repeat center / contain;
	left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}
#transformamos h2 {
	color: var(--green);
    font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 1.44px;
    margin: 0 0 20px 0;
    max-width: 650px;
}

#transformamos p {
	color: white;
    font-size: 16px;
	font-weight: 400;
	line-height: 142%;
	letter-spacing: 0.96px;
	max-width: 650px;
}
@media (max-width: 1120px) {
	#transformamos::after{
		opacity: 0.1;
	}
}
@media (max-width: 799px) {
	#transformamos {
    	padding: 50px 0 50px;
	}
	#transformamos .conteudo{
		text-align: center;
		margin: auto;
		padding-top: 200px;
		padding-left: 0;
	}
	#transformamos h2{
		margin: auto;
		padding-bottom: 20px;
		padding-top: 30px;
	}
	#transformamos p{
		margin: auto;
	}
	#transformamos .conteudo::before {
		left: 50%;
		top: 0;
		transform: translate(-50%, 0%);
	}
	#transformamos::after{
		width: 100vw;
		height: 140px;
		background: url(../img/form-big.svg) repeat-x;
		bottom: 0px;
		top: auto;
	}
}

/* Conecta Possível */
#conecta-possivel{
	background: #F7F7F7;
}

#conecta-possivel .row{
	align-items: center;
	flex-wrap: nowrap;
}
#conecta-possivel .card-azul h2{
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.12px;
}
#conecta-possivel .card-azul {
    background-color: var(--blue);
    color: #ffffff;
    border-radius: 40px;
    padding: 40px;
    height: 100%;
    width: 110%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
	min-height: 440px;
}
#conecta-possivel .coluna-esquerda {
	position: relative;
	min-height: 400px;
	padding: 40px 0;
}
#conecta-possivel .coluna-esquerda::after {
    content: '';
    position: absolute;
    right: 0%;
    bottom: 0;
    height: 100%;
    width: 82%;
    background-image: url(../img/mulher.webp);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    transform: translate(30%, 0%);
}
#conecta-possivel .coluna-direita {
	margin-left: 160px;
}
#conecta-possivel .lista-funcionalidades {
	margin-left: 40px;
}
#conecta-possivel .lista-funcionalidades li {
    font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.08px;
    padding: 10px 0 10px 0px;
	position: relative;
}
#conecta-possivel .lista-funcionalidades li::after{
	content: "";
	position: absolute;
	width: calc(100% + 40px);
    bottom: 0;
    left: -40px;
    height: 1px;
	border-bottom: 1px solid var(--blue);
}
 #conecta-possivel .texto-conclusao {
    font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08px;
	margin-top: 40px;
}
@media (max-width:1144px){
	#conecta-possivel .coluna-esquerda::after{
		transform: translate(35%, 0%);
	}
	#conecta-possivel .coluna-direita {
    	margin-left: 140px;
	}
}
@media (max-width: 899px) {
	#conecta-possivel{
		padding-bottom: 50px;
	}
	#conecta-possivel .row{
		flex-wrap: wrap;
		row-gap: 40px;
	}
	#conecta-possivel .coluna-esquerda{
		max-width: 450px;
    	margin: auto;
	}
	#conecta-possivel .coluna-direita{
		margin-left: 0;
	}
}
@media (max-width: 369px) {
	#conecta-possivel .card-azul h2{
		padding-right: 110px;
	}
}

/*Porque*/
#porque {
     position: relative;
	 background: var(--black);
	 color: white;
}
#porque .row{
	gap: 20px;
}
#porque .img {
     position: relative;
     min-height: 25vw;
}
 #porque .img img {
     --w: calc( 25vw - 0px );
     width: var(--w);
     max-width: var(--w);
     height: 100%;
     position: absolute;
     object-fit: contain;
	 right: 0;
}
#porque .text{
	max-width: 662px;
	width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 20px;
	padding: 40px 0;
}
#porque .text h2{
	color: var(--green);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 1.44px;
}
#porque .text p{
	font-size: 16px;
	font-weight: 400;
	line-height: 142%;
	letter-spacing: 0.96px;
}
#porque .text a{
	display: none;
}
@media (max-width: 1032px) {
	#porque .text{
		max-width: 562px;
	}
}
@media (max-width: 899px) {
	#porque{
		padding: 40px 0;
	}
	#porque .row{
		row-gap: 40px;
	}
	#porque .img {
    	min-height: 45vw;
	}
	#porque .img img {
    	--w: calc(100vw - 0px);
	}
	#porque .text{
		text-align: center;
		margin: auto;
	}
	#porque .text a{
		display: block;
		max-width: 270px;
		padding: 8px 20px;
		border-radius: 20px;
		margin: auto;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0.1px;
		background: var(--green);
		color: #000;
	}
		#porque .text a:hover{
			scale: 1.05;
		}
}

/*Para quem*/

#para-quem {
     position: relative;
	 background: var(--blue);
}
#para-quem .img {
     position: relative;
     min-height: 33.33vw;
}
 #para-quem .img img {
     --w: calc( 50vw - 0px );
     width: var(--w);
     max-width: var(--w);
     height: 100%;
     position: absolute;
     object-fit: cover;
	 min-height: 350px;
	 right: 0;
}
#para-quem .text {
     padding: 60px 60px 60px 80px;
	 color: white;
     display: flex;
     flex-direction: column;
     justify-content: center;
	 gap: 30px;
}
#para-quem h2{
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.12px;
	position: relative;
	padding-top: 20px;
}
#para-quem h2::before{
	content: "";
	position: absolute;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='12' viewBox='0 0 41 12' fill='none'%3E%3Cpath d='M30.2418 11.0581C30.1237 11.0581 30.0594 10.9937 30.0594 10.8757L30.0594 1.03477C30.0594 0.905994 30.1237 0.852337 30.2418 0.852337L40.2651 0.852338L40.2651 11.0688L30.2418 11.0688L30.2418 11.0581ZM0.182495 11.0581C0.0644455 11.0581 5.7227e-05 10.9937 5.72373e-05 10.8757L5.80977e-05 1.03477C5.81089e-05 0.905991 0.0644464 0.852334 0.182496 0.852334L10.2058 0.852335L10.2058 11.0688L0.182495 11.0688L0.182495 11.0581Z' fill='%23C0F58B'/%3E%3C/svg%3E") no-repeat center / contain;
	width: 40px;
	height: 10px;
	top: 0;
	left: 0;
}
#para-quem .lista {
	margin-left: 40px;
	list-style: none;
}
#para-quem .lista li {
    font-size: 16px;
	letter-spacing: 0.08px;
    padding: 10px 0 10px 0px;
	position: relative;
}
#para-quem .lista li::after{
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: -40px;
	top: 50%;
	transform: translate(0%, -50%);
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M10 16.4688L6 12.4688L7.4 11.0688L10 13.6688L16.6 7.06885L18 8.46885L10 16.4688Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;

}
#para-quem .lista li::before{
	content: "";
	position: absolute;
	width: calc(100% + 40px);
    bottom: 0;
    left: -40px;
    height: 1px;
	border-bottom: 1px solid var(--green);
}


 @media (max-width: 899px) {
	 #para-quem .wrap {
		 padding: 0;
	}
	 #para-quem .text {
		 padding: 40px 20px;
	}
	 #para-quem .text h2 {
		 font-size: 1.5rem;
	}
	#para-quem .lista li {
		max-width: fit-content;
		padding-right: 60px;
	}
	 #para-quem .img {
		 min-height: 66.66vw;
	}
	 #para-quem .img img {
		 --w: 100%;
		 object-position: center;
		 position: relative;
	}
}

/*Diferencia*/
#diferencia{
	padding: 40px 0;
	background: var(--black);
	color: white;
	position: relative;
}
#diferencia::after{
	content: "";
	position: absolute;
	width: 100vw;
    height: 210px;
    background: url(../img/bg-diferencia.svg) repeat-x;
    bottom: 0;
    top: auto;
}
#diferencia .wrap{
	min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 40px;
}
#diferencia h2{
	color: var(--green);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 1.44px;
	text-align: center;
}
#diferencia .row{
	gap: 20px;
	justify-content: center;
}
#diferencia .row div{
	border: 2px solid var(--green);
	max-width: 266px;
	width: 100%;
	height: 180px;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#diferencia .row div p{
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.96px;
	padding: 20px 30px;
}

/*Contato*/
#contato{
	padding: 40px 0;
}
#contato h2{
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
}
#contato p{
	color: var(--black);
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	text-align: center;
	padding: 10px 0 20px;
}
#contato .btn {
	border-radius: 25px;
	background: #000;
	color: var(--black);
	text-transform: uppercase;
	padding: 10px 60px;
	text-align: center;
	display: inline-block;
	transition: all .5s ease-out;
}
#contato .field-wrap {
	position: relative;
}

/* #contato .field-wrap+.field-wrap {
	margin-top: 12px;
} */

#contato .field-wrap label {
	font-size: .875rem;
}

#contato .field-wrap label>abbr {
	text-decoration: none;
}

#contato .field-wrap .text {
	padding: 20px 16px;
	width: 100%;
	background: transparent;
}
#contato .field-wrap select.text{
	appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.547l4.484 4.547 4.484-4.547L16 9l-6 6-6-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}
#contato .field-wrap input::placeholder {
	color: var(--black);
	opacity: 0.5;
}

#contato .field-wrap.field-nome,
#contato .field-wrap.field-perfil,
#contato .field-wrap.field-e-mail {
	position: relative;
	border: 2px solid var(--black);
}

#contato .field-wrap.field-nome label,
#contato .field-wrap.field-perfil label,
#contato .field-wrap.field-e-mail label {
	text-transform: uppercase;
	background: white;
	padding: 0 6px;
	position: absolute;
	top: -10px;
	left: 12px;
	color: var(--black);
}

#contato .submit-btn {
	display: block;
	width: 100%;
	line-height: 16px;
	padding: 16px 20px;
	background: var(--green);
	border-radius: 24px;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	color: #000;
	opacity: 0.5;
	pointer-events: none;
}

#contato:has( input[name="pp"]:checked ) .submit-btn {
	opacity: 1;
	pointer-events: auto;
}

#contato .submit-btn.sending {
	pointer-events: none;
	color: transparent;
	background: var(--green) url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23000'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

#contato .field-pp a {
	color: var(--black);
	text-decoration: underline;
}

#contato .field-pp label {
	padding: 0;
}

#contato .field-pp input {
	display: none;
}

#contato .field-pp input+span {
	display: inline-block;
	position: relative;
	padding-left: 24px;
	color: var(--black);
}

#contato .field-pp input+span:before {
	content: '';
	width: 16px;
	height: 16px;
	border: 1px solid var(--black);
	position: absolute;
	top: 1px;
	left: 0;
}

#contato .field-pp input+span:after {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--black);
	position: absolute;
	top: 5px;
	left: 4px;
	opacity: 0;
	transition: all .3s ease-out;
}

#contato .field-pp label:hover span:after {
	opacity: .25;
}

#contato .field-pp input:checked+span:after {
	opacity: 1;
}

#contato .submit-btn:hover {
	scale: 1.02;
}

#contato #form-status:not(:empty) {
	margin-bottom: 20px;
	text-align: center;
	font-weight: 700;
	padding: 10.5px 20px;
	border-radius: 20px;
}

#contato #form-status.is-success {
	background: var(--green);
	color: #000;
}

#contato #form-status.is-error {
	background: #FFBABA;
	color: #D8000C;
}


/*Footer*/
footer{
	padding: 60px 0;
	background: var(--black);
	color: white;
	text-align: center;
}
footer .wrap{
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
footer a{
	color: white;
	text-decoration: underline;
}
footer p{
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.84px;
}
@media (max-width: 929px) {
	footer .wrap{
		justify-content: center;
	}
}