/* reset.css — reset / opinionated base
   - box-sizing border-box
   - remove margin/padding defaults
   - make images, SVGs and media behave
   - basic focus outlines for accessibility
*/

/* 1) box-sizing: facilita layout */
*,
*::before,
*::after {
	box-sizing: border-box;
}



/* 2) limpar margens/paddings globais e definir fonte base */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
menu,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}

/* 3) root font-size / line-height base — ajusta conforme preferes */
/* 5) lists */
ul,
ol {
	list-style: none;
}

/* 6) links */
a {
	color: inherit;
	text-decoration: none;
	background-color: transparent;
}

/* 4) body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: inherit;
	background-color: #222;
	font-family: "Sofia Sans", sans-serif;
	font-optical-sizing: auto;

	font-style: normal;
}

button,
input,
select,
textarea {
	font: inherit; /* herda fonte do corpo */
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


main{
	width: 100%;
	max-width: 1600px;
	overflow: hidden;
	margin: auto;
	background: #C00C0F;

	background-image: url("img/pattern.png");

}

.hero{
	width: 100%;
	aspect-ratio: 16/9;
	position: relative;
}

.hero-bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
}

.headline{
position: absolute;
	width: 500px;
	margin: auto;
	left: 0; right: 0;
	bottom: 50px;
	text-align: center;
}

.headline img{
	width: 100%;
	margin-bottom: 10px;

}

.hero-bg-mob{
	display: none;
}

@media (max-width: 768px) {
	.hero-bg{
		display: none;
	}
	.headline img{
		display: none;
	}
	.hero-bg-mob{
		display: block;
		width: 100%;
	}
	.hero{
		width: 100%;
		aspect-ratio: auto;
		position: relative;
	}


	.headline{
		position: absolute;
		width:100%;
		margin: auto;
		left: 0; right: 0;
		bottom: 30px;
		text-align: center;
	}

}

.btn-cta {
	position: relative;

	padding: 0.8rem 2rem;
	border-radius: 9999px; /* forma cápsula */
	background: #E20613;
	color: #fff;

	font-weight: 600;
	border: none;
	cursor: pointer;
	overflow: hidden; /* <-- ESSENCIAL: oculta texto fora da área */
	transition: transform 0.2s ease;
	font-size: 20px;
	text-transform: uppercase;
	margin: auto;
}

@media (max-width: 768px) {
	.btn-cta {
		font-size: 18px;
	}

}

.btn-cta:hover {
	transform: scale(1.05);
}

/* ===== TEXTO CONTAINER ===== */
.btn-cta .text {
	position: relative;
	display: block;
	height: 1.2em; /* altura do texto, ajusta conforme necessário */
	overflow: hidden;
}

/* Texto normal e de hover empilhados verticalmente */
.btn-cta .text span {
	display: block;
	transition: transform 0.4s ease;
}

/* O segundo texto (de hover) começa abaixo */
.btn-cta .text span:nth-child(2) {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
}

/* ===== EFEITO HOVER ===== */
.btn-cta:hover .text span:nth-child(1) {
	transform: translateY(-100%);
}

.btn-cta:hover .text span:nth-child(2) {
	transform: translateY(-100%);
}



.container{
	width: 1200px;
	max-width: calc(100vw - 40px);
	margin: auto;
}

.how{
	padding-top: 100px;
	padding-bottom: 100px;
	color: #FFF;
}


.how .container{
	display: flex;
	justify-content: space-between;
}

.how-col1{
	width: 57%;
}
.how-col2{
	width: 40%;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 768px) {
	.how{
		padding-top: 80px;
		padding-bottom: 70px;
	}
	.how .container{
		display: block;
	}

	.how-col1{
		width: 100%;
	}
	.how-col2{
		width: 100%;
		display: block;

	}
}

.how h1{
	color: #FFF;
	font-size: 80px;
	font-style: normal;
	font-weight: 900;
	line-height: 88%; /* 95.164px */
	text-transform: uppercase;
}

.how p{
	color: #FFF;
	font-size: 28px;
	font-style: normal;
	font-weight: 600;
	line-height: 110%; /* 35.2px */
	margin-top: 20px;
}

@media (max-width: 768px) {
	.how h1{
		font-size: 16vw;
	}
	.how p{
		font-size: 6vw;
	}

}

.how li{
	margin-bottom: 20px;
	display: flex;
}

.how li div:nth-child(1){
	color: #FFF;
	font-size: 60px;
	font-style: normal;
	font-weight: 400;
	line-height: 96%;
	margin-right: 10px;
}

.how li div:nth-child(2){

	color: #FFF;


	font-size: 24px;
	font-style: normal;
	font-weight: 900;
	line-height:100%; /* 25.926px */
	text-transform: uppercase;
}

@media (max-width: 768px) {

	.how li div:nth-child(1){
		font-size: 14vw;
	}
	.how li div:nth-child(2){
		font-size: 5.7vw;
	}
}

.how span{
	background: #800002;
	padding-left: 3px;
	padding-right: 8px;
}


.sec-form{
	width: 100%;
	position: relative;

}

.form-img{
	width: 100%;

}

#form{
	background: #800002;
	width: 1200px;
	max-width: calc(100vw - 40px);
	margin: auto;


	margin-top: -50px;
	color: #FFF;
	padding-bottom: 30px;

}
@media (max-width: 768px) {
	#form{

		margin-top: -6px;
		max-width: 100%;
	}

}

#form .btn-cta {

	background: #fff;
	color: #E20613;
	opacity: 0.5;
	pointer-events: none;

}
#form .btn-cta.active {
	opacity: 1;
	pointer-events: auto;
}

.row-form{
	display: flex;
	justify-content: space-between;
	width: calc(100% - 40px);
	margin: auto;

	padding-top: 20px;
}

.col-form{
	 width: calc(50% - 10px);
}

@media (max-width: 768px) {
	.row-form{
		display: block;
		padding-top: 0px;
	}
	.col-form{
		width: 100%;
		padding-top: 14px;
	}
}

label{
	color: #FEE;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;

	display: block;
	width: 100%;

}

@media (max-width: 768px) {
	label{
		font-size: 22px;
	}
}

input{
	display: block;

	color: #D61018;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	width: 100%;
	padding: 12px 10px;
	background: #FFF;
	border: 1px solid #D61018;;
}

@media (max-width: 768px) {
	label{
		font-size: 22px;
	}

	input{
		display: block;

		color: #D61018;
		font-size: 18px;

		padding: 10px 10px;

	}
}


input::placeholder{
	color: #D61018;
	font-weight: 300;
}



._chk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 18px;
	color: #FFF;
	user-select: none;
	font-weight: 300;
	margin-bottom: 20px;

}

._chk span{

	width: calc(100% - 25px);
}

.disclamer{
	font-size: 16px;
	display: block;

	opacity: 0.6;
}
@media (max-width: 768px) {
	.chk {
		margin-bottom: 20px;
	}
	.disclamer{
		font-size: 14px;
		display: block;
		margin-top: 20px;
		opacity: 0.6;
	}
}


/* pequeno indicador visual */
._chk::before {
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 0;
	border: 1px solid  #FFF;
	display: inline-block;
	box-sizing: border-box;
	transition: background 0.2s ease;
}

/* quando está ativo */
._chk.active::before {
	background:  transparent;
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
}


.row-form._btn{
	text-align: center;
}

.reg-cta .btn-cta{
	background: #FF313D;
	display: inline-block;
}

.reg-cta{
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;

}

@media (max-width: 768px) {
	.reg-cta{

		margin-top:30px;
		margin-bottom: 30px;

	}

}

footer{
	background: #D61018;
	padding-bottom: 20px;
	padding-top: 20px;
}


footer .container{
	display: flex;
	justify-content: space-between;
	align-items: center;


}
@media (max-width: 768px) {
	footer .container{
		display: block;
	}

}

footer img{
	height: 40px;
	width: auto;
}

footer a{
	color: #FFF;



	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	margin-left: 20px;

}

@media (max-width: 768px) {
	footer img{
		height: 11vw;
		width: auto;
		margin-top: 10px;
		margin-bottom: 30px;
	}
	footer a{
		display: block;
		margin-left: 0px;
		margin-bottom: 10px;
		font-size: 6vw;
	}
}
@media (max-width: 768px) {
	.desk{display: none;}
}




/* === POPUP === */
.popup-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition: opacity 0.3s ease; }
.popup-overlay.active { opacity:1; pointer-events:all; }
.popup-box { background:#fff; border-radius:1rem; max-width:420px; width:90%; padding:2rem; text-align:center; box-shadow:0 0 30px rgba(0,0,0,0.25); transform: scale(0.9); transition: transform 0.3s ease; }
.popup-overlay.active .popup-box { transform: scale(1); }
.popup-box h3 { margin-top:0; font-weight:700; color:#d82028; }
.popup-box p { color:#222; margin:1rem 0; line-height:1.4; }
.popup-box ul { text-align:left; margin:0 0 1.5rem; padding-left:1.2rem; color:#333; }
.popup-box ul li { margin-bottom:0.5rem; list-style-type: disc; }
.popup-close { background:#d82028; color:#fff; border:none; padding:0.75rem 1.5rem; font-size:1rem; border-radius:2rem; cursor:pointer; transition: background 0.3s; }
.popup-close:hover { background:#b01820; }

/* === COOKIE BAR === */
.cookie-bar { position:fixed; bottom:0; left:0; width:100%; background:#222; color:#fff; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:1rem 2rem; z-index:999; font-size:0.95rem; line-height:1.4; box-shadow:0 -4px 10px rgba(0,0,0,0.2); transform:translateY(100%); opacity:0; transition:all 0.4s ease; }
.cookie-bar.active { transform:translateY(0); opacity:1; }
.cookie-bar p { margin:0; flex:1 1 70%; }
.cookie-bar a { color:#fff; text-decoration:underline; }
.cookie-btns { display:flex; gap:0.75rem; flex:1 1 25%; justify-content:flex-end; }
.cookie-btn { background:#d82028; border:none; color:#fff; padding:0.6rem 1.5rem; border-radius:2rem; cursor:pointer; font-weight:600; transition:background 0.3s; }
.cookie-btn:hover { background:#b01820; }
.cookie-btn._2 { background:#fff; color:#d82028; }

/* upload */
.upload-area { border:2px dashed #FFF; border-radius:10px; padding:1rem; text-align:center; cursor:pointer; transition: background .15s, border-color .15s; background:transparent; margin:1rem 0; min-height: 150px;

	display: flex;
	align-items: center;
	justify-content: center;
}
.upload-area.dragover { background:transparent; border-color:#FFF; }
.preview-thumb { margin-top:0.75rem; max-width:160px; border-radius:8px; display:block; }



.tit-form{
	color: #FFF;
	font-size: 24px;
	font-style: normal;
	font-weight: 900;
	line-height: 100%;
	text-transform: uppercase;

	width: calc(100% - 40px);
	margin: auto;
	padding-top: 30px;
	margin-bottom: -10px;

}