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

body{
	font-family:"Barlow",sans-serif;
}

img{
	max-width:100%;
}

.app-banner{
	background:#00562f url('../../assets/images/aplicativo/app-banner/bg-pattern.jpg') center ;
	position:relative;
	overflow:hidden;
	padding:90px 0;
}

.app-banner::before{
	content:"";
	position:absolute;
	inset:0;
	background:url(../../assets/images/aplicativo/app-banner/bg-pattern.jpg) center center;
	opacity:.08;
}

/*.app-banner .container{

	width:min(1280px,92%);
	margin:auto;
	} */
	.app-banner .container{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:0;
		position:relative;
		z-index:2;

	}

	.app-banner .app-banner-image{
		flex:1;
		display:flex;
		justify-content:center;
	}

	.app-banner .app-banner-image img{
		width:100%;
		max-width:460px;
	}

	.app-banner .app-banner-content{
		flex:1;
		max-width:600px;
		color:#fff;
		text-align:right;
	}

	.app-banner h2{
		font-size:80px;
		line-height:1.25	;
		font-weight:900;
		text-transform:uppercase;
		margin-bottom:30px;
	}

	.app-banner h2 span{
		color:#18f577;
	}

	.app-banner p{
		font-size:32px;
		line-height:1.2;
		margin-bottom:45px;
	}

	.btn-download{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		gap:15px;
		background:#c0a05a;
		color:#fff!important;
		padding:15px 35px;
		border-radius:18px;
		text-decoration:none;
		font-size:34px;
		font-weight:700;
		border:4px solid #fff;
		transition:.3s;

	}

	.btn-download:hover{
		transform:translateY(-5px);
	}

	.app-banner .stores{
		display:flex;
		justify-content:flex-end;
		gap:25px;
		margin-top:45px;
		flex-wrap:wrap;
	}

	.app-banner .stores img{
		height:70px;
		transition:.3s;
	}

	.app-banner .stores img:hover{
		transform:scale(1.05);
	}



	.section-acompanhe-aovivo{
		position:relative;
		overflow:hidden;
		background:#005b35;
		padding:40px 0 0;
	}

	.section-acompanhe-aovivo::before{
		content:"";
		position:absolute;
		inset:0;
		background:url("../../assets/images/aplicativo/acompanhe-aovivo/bg-estadio.jpg") center center no-repeat;
		background-size:cover;
	}

	.section-acompanhe-aovivo .container{
		position:relative;
		z-index:2;
		max-width:1200px;
		margin:auto;
		display:flex;
		align-items:center;
		justify-content:center;
		gap:80px;
		padding:0 30px;
	}

	.section-acompanhe-aovivo .phone {
		width:350px;
		flex-shrink:0;
	}

	.section-acompanhe-aovivo .phone img{
		width:100%;
		max-width:490px;
		display:block;
	}

	.section-acompanhe-aovivo .content{
		color:#fff;
		max-width:550px;
	}

	.section-acompanhe-aovivo .content h2{
		font-size:55px;
		line-height:1;
		font-weight:800;
		text-transform:uppercase;
		margin-bottom:35px;
	}

	.section-acompanhe-aovivo .content h2 span{
		display:block;
		color:#22f27c;
		margin-top:8px;
	}

	.section-acompanhe-aovivo .timeline{
		list-style:none;
		position:relative;
		padding-left:0;
	}

	.section-acompanhe-aovivo .timeline::before{
		content:"";
		position:absolute;
		left:15px;
		top:0;
		bottom:0;
		width:3px;
		background:#18ef73;
	}

	.section-acompanhe-aovivo .timeline li{
		position:relative;
		padding-left:55px;
		margin-bottom:18px;
		font-size:25px;
		font-weight:500;
		line-height:1.4;
	}

	.section-acompanhe-aovivo .timeline li:last-child{
		margin-bottom:0;
	}

	.section-acompanhe-aovivo .timeline li::before{
		content:"";
		position:absolute;
		left:6px;
		top:7px;
		width:20px;
		height:20px;
		border:4px solid #18ef73;
		background:#005b35;
		/*border-radius:50%;*/
	}

	.section-acompanhe-aovivo .timeline li:first-child::before{
		top:4px;
	}

	.section-acompanhe-aovivo .timeline li:last-child::before{
		top:auto;
		bottom:4px;
	}
	/**/

		/* ===================================
        ATIVAR NOTIFICAÇÕES
        =================================== */

        .section-ative-notificacao{
        	background:#00562f url('../../assets/images/aplicativo/app-banner/bg-pattern.jpg') center center;
        	overflow:hidden;
        	position:relative;
        }

        .section-ative-notificacao .container{

        	position: relative;
        	z-index: 2;
        	max-width: 1200px;
        	margin: auto;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	gap: 80px;
        	padding: 40px 0 0 0;       
        }


        .section-ative-notificacao-content{
        	flex:1;
        	max-width:560px;
        	/*padding-bottom:90px;*/
        	color:#fff;
        }

        .section-ative-notificacao h2{
        	font-size:65px;
        	font-weight:900;
        	line-height:.95;
        	text-transform:uppercase;
        	margin-bottom:20px;

        }

        .section-ative-notificacao h2 span{
        	display:block;
        	color:#18c15b;
        }

        .section-ative-notificacao p{
        	font-size:32px;
        	line-height:1.4;
        	margin-bottom:20px;
        }

        .section-ative-notificacao-phone{
        	flex:1;
        	display:flex;
        	justify-content:center;
        	align-items:flex-end;
        	position: relative;
        }

        .section-ative-notificacao-phone .cnt-notificacoes {
        	position: absolute;
        	left: 125px;
        	top: 100px;
        }
        .section-ative-notificacao .phone{
        	width:100%;
        	max-width:560px;
        }
        /**/


        .advantages{
        	position:relative;
        	overflow:hidden;
        	background-image:url('../../assets/images/aplicativo/advantages/bg-vantagens.jpg');
        	background-size:cover;
        	background-position:center;
        	padding: 30px 0;
        }

        .advantages .container{
        	width:min(1280px,92%);
        	margin:auto;
        	position:relative;
        	z-index:2;
        }

        .advantages .logo{
        	display:block;
        	margin:0 auto 40px;
        	max-width:240px;
        }

        .advantages h2{
        	text-align:center;
        	color:#FFF;
        	font-size:37px;
        	font-weight:900;
        	text-transform:uppercase;
        	margin-bottom:25px;
        }

        .advantages h2 span{
        	color:#25ef79;
        }

        .advantages .description{
        	max-width:600px;
        	margin:0 0 30px 390px;
        	color:#FFF;
        	text-align:left;
        	font-size:28px;
        	line-height:1.4;
        }

        .advantages .content{
        	display:flex;
        	align-items:flex-end;
        	gap:50px;
        }

        .advantages .mascot{
        	position:absolute;
        	top:160px;
        }

        .advantages .mascot img{
        	width:430px;
        }

        .advantages .benefits{
        	flex:1;
        	background:#044d28;
        	border-radius:30px;
        	margin-left:100px;
        	padding:30px 50px 30px 380px;
        }

        .advantages .benefit{
        	display:flex;
        	gap:25px;
        	margin-bottom:20px;
        	align-items:flex-start;
        }

        .advantages .benefit:last-child{
        	margin-bottom:0;
        }

        .advantages .icon{
        	width:90px;
        	min-width:90px;
        	/*height:90px;*/
        	display:flex;
        	justify-content:center;
        	align-items:center;
        }

        .advantages .benefit h3{
        	color:#c9a65b;
        	font-size:20px;
        	padding-top: 8px;
        }

        .advantages .benefit span{
        	color:#FFF;
        	font-size:20px;
        }

        .advantages .btn-download{
        	display:flex;
        	justify-content:center;
        	align-items:center;
        	width:fit-content;
        	margin:30px auto 0 430px;
        	padding:18px 45px;
        	background:#c4a157;
        	color:#FFF;
        	border-radius:18px;
        	border:4px solid #FFF;
        	font-size:30px;
        	font-weight:700;
        	text-decoration:none;
        	transition:.3s;
        }

        /**/


        .section-acesso{
        	background:#00562f url('../../assets/images/aplicativo/app-banner/bg-pattern.jpg') center ;
        	padding:70px 0;
        	overflow:hidden;
        }

        .section-acesso .container{
        	/*width:min(1280px,92%);*/
        	max-width: 1280px;
        	margin:0 auto ;

        }

        .section-acesso h2{
        	color:#fff;
        	font-size:64px;
        	font-weight:900;
        	text-transform:uppercase;
        }

        .section-acesso .access-card{
        	background:#006a36;
        	border-radius:18px;
        	height:185px;
        	display:flex;
        	flex-direction:column;
        	justify-content:center;
        	align-items:center;
        	text-decoration:none;
        	transition:.3s;
        	padding:20px;
        }

        .section-acesso .access-card:hover{
        	transform:translateY(-6px);
        }

        .section-acesso .access-card img{
        	width:80px!important;
        	margin-bottom:10px;
        }

        .section-acesso .access-card span{
        	color:#ae9a58;
        	font-size:24px;
        	font-weight:700;
        	text-align:center;
        	line-height:1.15;
        }

        /* Owl */

        .section-acesso .access-carousel .owl-stage{
        	display:flex;
        	padding-top: 50px;
        }

        .section-acesso .access-carousel .owl-item{
        	/*width:180px !important;*/
        }

        .section-acesso .access-carousel .owl-nav{
        	margin-top:35px;
        	text-align:center;
        }

        .section-acesso .access-carousel .owl-prev,
        .section-acesso .access-carousel .owl-next{
        	width:54px;
        	height:54px;
        	border-radius:50%!important;
        	background:#c9a458!important;
        	color:#005b30!important;
        	font-size:34px!important;
        	margin:0 10px;
        	transition:.3s;
        }

        .section-acesso .access-carousel .owl-prev:hover,
        .section-acesso .access-carousel .owl-next:hover{
        	background:#fff!important;
        }

        .section-acesso .access-carousel .owl-dots{
        	display:none;
        }


/* =======================================
TABLET
======================================= */

@media (max-width:991px){

	.app-banner{
		padding:70px 0;
	}

	.app-banner .container{
		gap:50px;
	}

	.app-banner h2{
		font-size:48px;
	}

	.app-banner p{
		font-size:18px;
	}

	.btn-download{
		font-size:28px;
		padding:18px 35px;
	}

	.app-banner .stores img{
		height:60px;
	}

	/**/

	.section-acompanhe-aovivo{
		padding:60px 0 0;
	}

	.section-acompanhe-aovivo .container{
		flex-direction:column-reverse;
		text-align:center;
		gap:40px;
	}

	.content{
		max-width:100%;
	}

	.content h2{
		font-size:50px;
		margin-bottom:30px;
	}

	.timeline{
		display:inline-block;
		text-align:left;
	}

	.timeline li{
		font-size:22px;
	}

	.phone{
		width:300px;
	}
	/**/

	.section-ative-notificacao .container{
		flex-direction:column;
		text-align:center;
		gap:50px;
		padding:70px 0;
	}

	.section-ative-notificacao .section-ative-notificacao-content{
		max-width:100%;
		padding-bottom:0;
	}

	.section-ative-notificacao h2{
		font-size:50px;
		margin-bottom:25px;
	}

	.section-ative-notificacao p{
		font-size:24px;
		margin-bottom:20px;
	}

	.section-ative-notificacao .phone{
		max-width:420px;
	}

	.advantages .description{
		margin:0 auto 40px;
		text-align:center;
		font-size:24px;
	}

	.advantages .content{
		flex-direction:column;
		align-items:center;
	}

	.advantages .mascot{
		position:relative;
		top:auto;
	}

	.advantages .mascot img{
		width:320px;
	}

	.advantages .benefits{
		margin-left:0;
		padding:40px;
	}

	.advantages .advantages h2{
		font-size:42px;
	}

	.advantages .benefit h3{
		font-size:22px;
	}

	.advantages .benefit span{
		font-size:21px;
	}

	.advantages .icon{
		width:70px;
		min-width:70px;
		height:70px;
		font-size:55px;
	}

	.section-acesso{
		padding:60px 0;
	}

	.section-acesso h2{
		font-size:46px;
		text-align:center;
	}

	.section-acesso .access-card{
		height:165px;
	}

	.section-acesso .access-card img{
		width:48px;
	}
}


/* =======================================
MOBILE
======================================= */

@media (max-width:768px){

	.app-banner{
		padding:60px 0;
	}

	.app-banner .container{
		flex-direction:column;
		text-align:center;
		gap:45px;
	}

	.app-banner-image{
		order:1;
	}

	.app-banner .app-banner-image img{
		width: auto;
		max-width:160px;
		position: absolute;
		top: -40px;
		left: 0;
	}

	.app-banner-content{
		order:2;
		max-width:100%;
		text-align:center;
	}

	.app-banner h2 {
		font-size:42px;
		margin-bottom:22px;
		line-height: 1.4;
	}

	.app-banner p{
		display: block;
		font-size:20px;
		margin-bottom:20px;
		/*padding-top: 40px;*/
		text-align: center;

	}

	.btn-download{
		width:100%;
		max-width:340px;
		padding:18px 20px;
		font-size:24px;

	}

	.app-banner .stores{
		display: block;
		justify-content:initial;
		/*gap:15px;*/
		margin-top:30px;
		width: 100%;
		text-align: center;
	}
	.app-banner .stores a {
		display: inline-block;
	}

	.app-banner .stores img{
		height:45px;
	}

	.section-acompanhe-aovivo{
		padding:40px 0 0;
	}

	.section-acompanhe-aovivo .container{
		padding:0 20px;
		gap:30px;
	}

	.content h2{
		font-size:38px;
		line-height:.95;
		margin-bottom:25px;
	}

	.timeline{
		width:100%;
	}

	.timeline::before{
		left:10px;
	}

	.timeline li {
		font-size:18px;
		padding-left:38px;
		margin-bottom:16px;
		line-height:1.5;
	}

	.timeline li::before{
		width:12px;
		height:12px;
		border-width:3px;
		left:5px;
		top:6px;
	}

	.section-acompanhe-aovivo .content h2 {
	    font-size: 35px;
	    line-height: 1.1;
	}

	.section-acompanhe-aovivo .timeline li:first-child::before{
		top:0;
	}

	.section-acompanhe-aovivo .timeline li:last-child::before{
		top:auto;
		bottom:0;
	}

	.phone{
		width:230px;
	}
	/**/

	.section-ative-notificacao .container{
		gap:40px;
		padding:60px 0;
	}

	.section-ative-notificacao h2{
		font-size:42px;
		line-height:1.5;
	}

	.section-ative-notificacao p{
		font-size:20px;
		line-height:1.5;
	}

	.section-ative-notificacao-phone{
		justify-content:center;
		position: relative;
	}

	.section-ative-notificacao-phone .cnt-notificacoes {
		position: absolute;
		left: 50px;
		top: 45px;
		width:130px;
	}

	.section-ative-notificacao .phone{
		max-width:320px;
	}      
	/**/

	.advantages{
		padding:60px 0 0 0;
	}

	.advantages .content {
		gap: initial;		
	}	

	.advantages .logo{
		max-width:180px;
		margin-bottom:30px;
	}

	.advantages h2{
		font-size:35px;
		line-height:1.4;
	}

	.advantages .description{
		font-size:20px;
		max-width:100%;
	}

	.advantages .mascot img{
		width:240px;
	}

	.advantages .benefits{
		padding:30px 25px;
		border-radius:20px;
	}

	.advantages .benefit{
		gap:15px;
		margin-bottom:28px;
	}

	.advantages .icon{
		width:50px;
		min-width:50px;
		height:50px;
		font-size:38px;
	}

	.advantages .benefit h3{
		font-size:18px;
	}

	.advantages .benefit span{
		font-size:16px;
	}

    .advantages .btn-download{
    	font-size:20px;
    	margin:30px auto 30px auto;
    }

	/**/

		.section-ative-notificacao h2{
			font-size:35px;
			line-height:1.4;
		}

		.section-ative-notificacao p{
			font-size:20px;
			margin-bottom:20px;
			padding: 0 15px; 
		}

		.section-ative-notificacao .phone{
			max-width:240px;
		}

/**/
	.section-acesso{
		padding:45px 0;
	}

	.section-acesso h2{
		font-size:34px;
	}

	.section-acesso .access-card{
		height:150px;
		border-radius:15px;
	}

	.section-acesso .access-card img{
		width:42px;
		margin-bottom:15px;
	}

	.section-acesso .access-card span{
		font-size:16px;
	}

	.section-acesso .access-carousel .owl-prev,
	.section-acesso .access-carousel .owl-next{
		width:46px;
		height:46px;
		font-size:28px!important;
	}


}


/* =======================================
CELULARES PEQUENOS
======================================= */

@media (max-width:480px){

	.app-banner{
		padding:45px 0;
	}

		.app-banner h2{
			font-size:34px;
		}

		.app-banner p{
			font-size:16px;
		}


		.stores{
			flex-direction:column;
			align-items:center;
			gap:12px;
		}

		.stores img{
			height:50px;
		}
		/**/

		.section-ative-notificacao{
			padding-bottom:30px;
		}

		.section-ative-notificacao .container{
			gap:30px;
			padding:45px 0 0;
		}

		/**/

		.advantages .logo {
			max-width:150px;
		}

		.advantages .advantages h2{
			font-size:27px;
		}

		.advantages .description {
			font-size:16px;
		}

		.advantages .mascot img{
			width:190px;
		}

		.advantages .benefits{
			padding:22px 18px;
		}

		.advantages .benefit{
			flex-direction:column;
			align-items:center;
			text-align:center;
		}

		.advantages .icon{
			margin-bottom:10px;
		}

		.advantages .benefit h3{
			font-size:17px;
		}

		.advantages .benefit span{
			font-size:15px;
		}

		.btn-download{
			font-size:20px;
			border-radius:14px;
			padding:10px 20px;
		}


	}