/* Variables */

:root{

	--main-color: inherit;
	--accent-color: inherit;
	--complementary-color: inherit;
	--text-color: inherit;

}

/* Default Behavior */

body, html{margin: 0; font-family: "Anton", sans-serif;}

h3{font-size: 3rem; text-transform: uppercase; font-weight: 400; line-height: 1.3;}

a{text-decoration: none; color: inherit;}
b{color: #fe0000; font-style: initial;}

img,
svg{max-width: 100%; vertical-align: bottom;}

*{box-sizing: border-box; margin: 0; border: 0; background-color: initial;}

/* Helper Classes */

.content{width: 1300px; max-width: 90vw; margin: auto;}

.wpp{background-color: #53a643;}

.row,
.grid,
.column{display: flex; gap: inherit;}
.column{flex-direction: column;}
.grid{display: grid;}
.grid.layered *{grid-row: 1; grid-column: 1;}

/* Header */

header#mainHeader{padding: 30px 0; background-color: #242525;}
header#mainHeader .content{align-items: center; justify-content: space-between;}
header#mainHeader .content img{width: 400px; max-width: 100%;}
header#mainHeader .content .column{align-items: flex-start; z-index: 10; position: relative; pointer-events: none;}
header#mainHeader .content .column a{font-size: 2rem; color: #fff; font-weight: bold; position: relative; overflow: visible; height: 90px; display: flex; align-items: center; pointer-events: all; font-family: "Poppins", sans-serif; padding: 10px 30px; border-radius: 5px; gap: 10px;/*padding: 10px 50px 10px 30px; border-right: 30px solid #fff; clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 50px) 100%, calc(100% - 30px) 100%, calc(100% - 10px) 0, 100% 0, calc(100% - 20px) 100%, 0 100%);*/}
header#mainHeader .content .column a.phone{background-color: #fe0000;}
header#mainHeader .content .column a.wpp{font-size: 1.75rem; margin-top: 60px; margin-bottom: -150px;}
header#mainHeader .content .column a i.fi{display: flex;}

/* Footer */

footer#mainFooter a.wpp{padding: 20px 100px; font-size: 5rem; text-transform: uppercase; line-height: 1; color: #fff; border-radius: 10px; margin: -70px auto; display: block; width: fit-content; letter-spacing: 0.1em; position: relative;}
footer#mainFooter .column{align-items: center; padding: 150px 5vw 100px; background-color: #14212b; gap: 30px; text-align: center; color: #fff; font-family: "Poppins", sans-serif; font-size: 2rem;}
footer#mainFooter .column p.important{color: #fe0000;}
footer#mainFooter .footerBar{padding: 30px 5vw; text-align: right; font-family: Poppins; color: #14212b; font-weight: 600;}

/* Banner */

section#banner{grid-template-columns: 5vw 1fr;}
section#banner .sliderControls{justify-content: center; gap: 10px; grid-row: 1; grid-column: 1; z-index: 1; align-items: center;}
section#banner .sliderControls wm-slider-trigger{width: 15px; height: 15px; border: 1px solid #fff; border-radius: 50%; transition: all .5s ease;}
section#banner .sliderControls wm-slider-trigger[active]{background-color: #fff;}
section#banner wm-slider{ grid-row: 1;grid-column: 1 / span 2;}
section#banner wm-slider article{align-items: center;}
section#banner wm-slider article p{font-size: calc(68*100vw/1440); color: #fff; padding: 0 10vw; line-height: 1.2; text-transform: uppercase;}

/* Offers */

section#offers{padding: 50px 0 30px; background-color: #fe0000; color: #fff;}
section#offers .content{gap: 30px;}
section#offers .content > .grid{gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr));}
section#offers .content > .grid article{gap: 0; border-radius: 20px; overflow: hidden;}
section#offers .content > .grid article .img{background-color: #fff; justify-content: center; padding: 20px; grid-template-columns: 1fr;}
section#offers .content > .grid article .img .rating{justify-self: end;}
section#offers .content > .grid article .img .tire{margin-top: 25px; justify-self: center;}
section#offers .content > .grid article .column{padding: 40px 10px 30px; background-color: #1d1f1f; align-items: center; gap: 30px 0;}
section#offers .content > .grid article .column h5{font-size: 2.5rem; text-transform: uppercase; font-weight: 400;}
section#offers .content > .grid article .column .price{font-size: 11rem; align-items: center; line-height: 1;}
section#offers .content > .grid article .column .price:before{content: 'A partir \A de R$'; white-space: pre; font-size: .75rem; text-align: right;}
section#offers .content > .grid article .column a{padding: 5px 10px; font-size: 3rem; text-transform: uppercase; width: 80%; text-align: center; border-radius: 10px; position: relative; align-items: center; justify-content: center; gap: 20px;}
section#offers .content > .grid article .column a:after{content: ''; background: url(../assets/images/offers/shadow.jpg) no-repeat center / cover; aspect-ratio: 331 / 39; display: block; position: absolute; top: 100%; left: 10%; right: 10%; opacity: .5;}
section#offers .content > .grid article .column a.call{background-color: #b80707;}
section#offers .content p.promotion{width: fit-content; padding: 20px 30px 10px; font-size: 6rem; text-transform: uppercase; border: 3px solid; line-height: 1; margin: auto;}
section#offers .content > .grid article .column a i.fi{display: flex;}

/* Join Us */

section#joinUs{padding: 50px 0; background-color: #242525; color: #fff;}
section#joinUs .content{grid-template-columns: 1fr 2fr; align-items: center; gap: 20px 50px;}
section#joinUs .content .column{align-items: flex-start;}
section#joinUs .content .column *:is(p, a.wpp){font-family: "Poppins", sans-serif;}
section#joinUs .content .column a.wpp{padding: 10px 30px; text-transform: uppercase; font-weight: bold;}

/* Depositions */

section#depositions{padding: 50px 0 80px; background-color: #e7e9e9; color: #14212b;}
section#depositions .content{gap: 30px;}
section#depositions .content .grid{grid-template-columns: repeat(3, 1fr); color: #fff; gap: 60px;}
section#depositions .content .grid article{background-color: #14212b; padding: 100px 30px; font-family: "Poppins", sans-serif; position: relative;}
section#depositions .content .grid article header{position: absolute; bottom: -30px; background-color: #fd0000; gap: 5px; padding: 15px 40px 15px 30px; text-transform: uppercase; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%); right: -30px;}
section#depositions .content .grid article header h5{font-size: 1.5rem;}

/* Transparency */

section#transparency{padding: 50px 0 150px;}
section#transparency h3{color: #14212b;}
section#transparency .content{gap: 30px;}
section#transparency .content .grid{grid-template-columns: repeat(2, 1fr);}
section#transparency .content .grid article{align-items: center; font-family: "Poppins", sans-serif; gap: 10px 0; line-height: 1.2;}
section#transparency .content .grid article h5{color: #fd0000; font-size: 2rem; font-weight: 600;}
section#transparency .content .grid article p{color: #585858; font-weight: 500; font-size: 1.1rem;}

/* Responsive */

@media(max-width: 900px){

	h3{font-size: 1.8rem;}

	header#mainHeader .content{flex-direction: column; gap: 20px; align-items: flex-start;}
	header#mainHeader .content .column{gap: 10px;}
	header#mainHeader .content .column a{margin: initial !important; font-size: 1.2rem !important; height: auto;}

	section#banner .sliderControls{display: none;}
	section#banner wm-slider{scroll-snap-type: x mandatory;}
	section#banner wm-slider:before,
	section#banner wm-slider:after{display: none;}
	section#banner wm-slider > *{scroll-snap-align: center;}

	section#offers .content > .grid{grid-template-columns: minmax(0, 1fr);}
	section#offers .content > .grid article .img .tire{width: 200px;}
	section#offers .content > .grid article .column{gap: 10px; padding: 20px 10px; padding: 20px; line-height: 1;}
	section#offers .content > .grid article .column h5{font-size: 2rem; grid-column: 1 / span 2;}
	section#offers .content > .grid article .column .price{font-size: 7rem; grid-column: 1 / span 2;}
	section#offers .content > .grid article .column a{font-size: 2rem; width: fit-content; padding: 10px 20px;}
	section#offers .content p.promotion{font-size: 2rem; padding: 10px 30px;}

	section#joinUs .content{grid-template-columns: 1fr;}
	section#joinUs .content .column{align-items: center; text-align: center;}
	section#joinUs .content img{grid-row: 2;}

	section#depositions .content .grid{grid-template-columns: minmax(0, 1fr); padding: 0 30px;}

	section#transparency .content .grid{grid-template-columns: minmax(0, 1fr);}
	section#transparency .content .grid .grid:last-child img{transform: rotateY(180deg);}

	footer#mainFooter a.wpp{padding: 10px 30px; font-size: 3rem; margin: -35px auto;}
	footer#mainFooter .column{padding: 70px 5vw 30px; font-size: 1rem; gap: 20px;}

	footer#mainFooter .footerBar{text-align: center;}

}


/* Cookie Alert */

#cookies-alert{top: 0; left: 0; width: 100%; background-color: #FE0000; color: #fff; font-size: 14px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 50px; border-bottom: 1px solid #fff;}
#cookies-alert .buttons button{border: none; outline: unset; cursor: pointer; font-size: 14px; border-radius: 10px;}
#cookies-alert .buttons .btn-accept{position: relative; background-color: #fff; color: #FE0000; padding: 10px 20px; font-weight: 600; -webkit-transition: 0.3s; transition: 0.3s;}
#cookies-alert .buttons .btn-accept:hover{-webkit-transform: scale(1.05); transform: scale(1.05);}
#cookies-alert .buttons .btn-decline{background-color: #FE0000; color: #fff; padding: 9px 18px; border: 2px solid #fff;}

.hide-cookies-alert {
	display: none !important;
}

@media(max-width: 515px) {
	#cookies-alert {
		padding: 10px;
		flex-direction: column;
		gap: 10px;
	}
}

.city {
	color: white;
}

@media (min-width: 768px) {
	header#mainHeader .content .column {
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	header#mainHeader .content .column a.wpp {
		margin-top: 0;
		margin-bottom: 0;
	}
}