/* Variables */

:root{

	--main-color: #F9DD0A;
	--accent-color: #0434FB;
	--complementary-color: inherit;
	--text-color: inherit;

}

/* Fonts */

@import url("bradescoSans.css");

/* Default Behavior */

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

h3{font-size: 3rem; display: flex; align-items: center; gap: 20px; font-weight: 900; color: var(--accent-color)}
h3:before{content: ''; width: 35px; height: 50px; background-color: var(--accent-color); display: block; clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%, 0 40%, 100% 40%, 100% 60%, 0 60%, 0 80%, 100% 80%, 100% 100%, 0 100%);}

a{text-decoration: none; color: inherit;}

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: var(--accent-color);}
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: 3rem; font-weight: bold; padding: 10px 30px; position: relative; overflow: visible; height: 90px; display: flex; align-items: center; pointer-events: all; font-family: "Poppins", sans-serif;}
header#mainHeader .content .column a.phone{background-color: var(--main-color);}
header#mainHeader .content .column a.wpp{font-size: 1.75rem; margin-top: 60px; margin-bottom: -150px; color: #fff;}

/* Footer */

footer#mainFooter p span{color: var(--main-color); margin: 0 20px;}
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: var(--accent-color); gap: 30px; text-align: center; color: #fff; font-family: "Poppins", sans-serif; font-size: 2rem;}
footer#mainFooter .column p.important{color: var(--main-color); font-weight: 700;}
footer#mainFooter .footerBar{padding: 30px 5vw; text-align: right; font-family: Poppins; color: var(--accent-color); 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; 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 .img .tags{align-self: center; justify-self: end;}
section#offers .content > .grid article .column{padding: 40px 10px 30px; background-color: var(--accent-color); align-items: center; gap: 30px 0; flex: 1 0 auto; justify-content: center;}
section#offers .content > .grid article .column h5{font-size: 2.5rem; text-transform: uppercase; font-weight: 400; width: 100%; text-align: center; border: 1px solid; color: #9affff;}
section#offers .content > .grid article .column .price{font-size: 5rem; 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 .price p{font-weight: 900;}
section#offers .content > .grid article .column a{padding: 5px 10px; font-size: 3rem; text-transform: uppercase; width: 80%; text-align: center; border-radius: 5px; position: relative; font-weight: 900;}
/*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; font-size: 6rem; text-transform: uppercase; line-height: 1; margin: auto; font-weight: 900;}

/* Depositions */

section#depositions{padding: 50px 0 80px; color: var(--accent-color);}
section#depositions h3:before{background-color: var(--main-color);}
section#depositions .content{gap: 30px;}
section#depositions .content .grid{grid-template-columns: repeat(3, 1fr); color: #fff; gap: 120px;}
section#depositions .content .grid article{background-color: var(--accent-color); padding: 100px 30px; font-family: "Poppins", sans-serif; position: relative;}
section#depositions .content .grid article header{position: absolute; bottom: -30px; gap: 5px; text-transform: uppercase; line-height: 1; right: 0;}
section#depositions .content .grid article header h5{font-size: 1.5rem; padding: 10px 20px; background-color: var(--main-color);}
section#depositions .content .grid article header p{color: var(--main-color); font-weight: 900; padding-left: 20px;}

/* Transparency */

section#transparency{padding: 50px 0 150px; background-color: var(--main-color);}
section#transparency h3{color: var(--accent-color);}
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: var(--accent-color); font-size: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;}
section#transparency .content .grid article p{color: #000; font-weight: 500; font-size: 1.1rem;}

/* Responsive */

@media(max-width: 900px){

	h3{font-size: 1.8rem;}
	h3:before{display: none;}

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

	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; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; 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{grid-column: 1 / span 2;}
	section#offers .content > .grid article .column a{font-size: 1rem; width: 100%; padding: 10px 0;}
	section#offers .content p.promotion{font-size: 2rem; text-align: center;}

	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 p span{margin: 0;}
	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: var(--main-color); 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; 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: var(--main-color); 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;
	font-size: 0.6em;
}

@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;
	}
}