/* Variables */

:root{

	--main-color: #145680;
	--accent-color: #418DBF;
	--secondary-color: #63CBDE;
	--light-color: #B0D5F0;

}

/* Fonts */

@font-face{

	src: url("../assets/fonts/IntroBook.otf");
	font-family: 'Intro';
	font-weight: 400;

}

@font-face{

	src: url("../assets/fonts/IntroBold.otf");
	font-family: 'Intro';
	font-weight: 700;

}

/* Default Behavior */

body, html{margin: 0; font-family: 'Intro', sans-serif; scroll-behavior: smooth;}

h3{font-size: 1.875rem; color: var(--main-color);}

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

p{font-family: 'Noto Sans', sans-serif; font-size: 1.25rem; opacity: 0.6; line-height: 1.375rem;}

label{font-family: 'Inter', sans-serif;}

input,
textarea{border-radius: 8px; border: 2px solid var(--White, #FFF); padding: 12px 16px; color: #fff; font-family: 'Inter';}
input::placeholder,
textarea::placeholder{color: rgba(255 255 255 / 70%);}

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

main{gap: 100px;}

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

/* Helper Classes */

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

.btn{padding: 12px 60px; background-color: #136CC7; border-radius: 12px; box-shadow: 12px 12px 20px 0px rgba(176, 213, 240, 0.12); font-size: 1.25rem; font-weight: 700; color: #fff; width: fit-content; cursor: pointer;}

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

.inputGroup{gap: 8px !important;}
.inputGroup label{opacity: 0.7;}

a#floatingWpp{width: 72px; aspect-ratio: 1; display: block; position: fixed; bottom: 40px; right: 40px;}

/* Header */

header#mainHeader .headerBar{padding: 12px 0; background-color: var(--accent-color); color: #fff;}
header#mainHeader .headerBar .content{gap: 24px; justify-content: flex-end;}
header#mainHeader .headerBar .content a{gap: 6px; align-items: center;}
header#mainHeader .headerBar .content a i{font-size: 18px;}
header#mainHeader .headerBar .content a span{font-size: 1rem;}
header#mainHeader .headerContent{padding: 12px 0; justify-content: space-between; align-items: center;}
header#mainHeader .headerContent nav #navMenu{gap: 60px; font-size: 1.25rem; font-style: italic; font-weight: 700; color: var(--main-color);}
#hamburger{display: none;}

/* Footer */

footer#mainFooter{background: radial-gradient(718.11% 141.42% at 100% 0%, #418DBF 0%, #145680 100%); color: #fff;}
footer#mainFooter h3{text-align: center; color: #fff;}
footer#mainFooter .content{padding: 60px 0; gap: 50px;}
footer#mainFooter .content .textSide.grid{grid-auto-flow: column; justify-content: space-between;}
footer#mainFooter .content .textSide.grid .column{gap: 32px 20px;}
footer#mainFooter .content .textSide.grid .column h4{text-align: center; font-size: 1.5rem;}
footer#mainFooter .content .textSide.grid .column .column{gap: 20px;}
footer#mainFooter .content .textSide.grid .column .column a{align-items: center;}
footer#mainFooter .content .textSide.grid .column .column a i{font-size: 26px;}
footer#mainFooter .content .textSide.grid .column iframe{aspect-ratio: 510/245;}

footer#mainFooter .content form.grid{grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 25px 20px;}
footer#mainFooter .content form.grid .inputGroup:last-of-type{grid-column: 1 / span 2;}
footer#mainFooter .content form.grid .inputGroup textarea{resize: none; height: 170px;}
footer#mainFooter .content form.grid button{grid-column: 2; background-color: #fff; color: var(--main-color); width: fit-content; padding: 12px 15px; justify-self: end; border-radius: 5px; font-size: 1rem;}

footer#mainFooter .copy{padding: 30px 0; text-align: center; color: var(--main-color); background: var(--light-color); font-size: 0.85rem; font-weight: 500; font-family: Inter;}

/* Home */

	/* Banner */

main#home div#banner section{aspect-ratio: 1440/480; background: var(--bg-img) no-repeat right bottom, radial-gradient(718.11% 141.42% at 100% 0%, var(--gradient-start, #63CBDE) 0%, var(--gradient-end, #136CC7) 100%); color: var(--color);}
main#home div#banner section .content{grid-template-columns: max-content;}
main#home div#banner section .content .column{align-items: center; gap: 18px 12px;}
main#home div#banner section .content .column h3{font-size: 2.813rem; color: var(--color);}
main#home div#banner section .content .column .row{font-size: 1.25rem;}
main#home div#banner .ctrls{gap: 10px; margin-bottom: 20px; z-index: 1; place-self: end center;}
main#home div#banner .ctrls wm-slider-trigger{width: 16px; border-radius: 50%; aspect-ratio: 1; background-color: #fff; transition: all .3s ease;}
main#home div#banner .ctrls wm-slider-trigger[active]{background-color: var(--main-color);}

/* Benefits */

main#home section#benefits .content{justify-content: center; gap: 24px; flex-wrap: wrap;}
main#home section#benefits .content .benefits-item{position: relative; background: #EDF2F5;
	; width: 270px; height: 168px; border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 48px 24px 24px 24px; margin-top: 32px; }
	main#home section#benefits .content .benefits-img{position: absolute;left: 50%;top: 0; transform: translate(-50%, -50%); background: #63CBDE; padding: 18px 21px 18px 21px; border-radius: 12px;}

	/* About */

main#home section#about .content{grid-template-columns: minmax(0, 1fr) max-content; gap: 40px; align-items: center;}
main#home section#about .content .column{align-items: center;}
main#home section#about .content .grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px;}
main#home section#about .content .grid .seil{gap: 7px; align-items: center; justify-content: center; border-radius: 50%; background-color: #EDF2F5; aspect-ratio: 1; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.20); width: 180px; text-align: center;}
main#home section#about .content .grid .seil strong{font-size: 2.5rem; color: var(--secondary-color);}

	/* Catalog */

main#home section#catalog .content{align-items: center; gap: 20px;}
main#home section#catalog .content p{text-align: center;}

main#home section#catalog .catalogWrapper{grid-template-columns: repeat(7, auto); border: 1px solid var(--main-color); gap: 0; border-radius: 12px;}

main#home section#catalog .catalogWrapper label{padding: 12px 20px; border: 1px solid var(--main-color); border-top: 0;color: var(--main-color); font-family: 'Intro'; font-weight: 700; cursor: pointer; width: fit-content; grid-row: 1;}
main#home section#catalog .catalogWrapper label:nth-child(2n){border-left: 0px; border-right: 0px;}
main#home section#catalog .catalogWrapper label:first-child{border-left: 0px;}
main#home section#catalog .catalogWrapper label:last-child{border-right: 0px;}

main#home section#catalog .catalogWrapper section{gap: 30px 72px; padding: 24px; line-height: 1em; transition: all .3s ease; grid-row: 2; grid-column: 1 / -1; grid-template-rows: repeat(7, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: max-content;}
main#home section#catalog .catalogWrapper section span{width: fit-content;}

main#home section#catalog .catalogWrapper input:checked + label{background-color: var(--main-color); color: #fff;}
main#home section#catalog .catalogWrapper input:not(:checked) + label + section{opacity: 0; pointer-events: none;}
main#home section#catalog .cotation{margin-top: 40px; display: flex; justify-content: center; align-items: center;}
main#home section#catalog .cotation .btn{display: flex ; justify-content: center; align-items: center; gap: 16px;}
main#home section#catalog .cotation .btn i{padding-top: 4px;}

	/* Suppliers */

main#home section#suppliers{gap: 20px; align-items: center; margin-bottom: 120px;}
main#home section#suppliers wm-slider{width: 1120px; --indexed-element-amount: 5; --element-sliding-amount: 5; --clip-unreacheable: true;}
main#home section#suppliers wm-slider img{place-self: center;}
main#home section#suppliers wm-slider-trigger{z-index: 1; width: 48px; aspect-ratio: 1; border-radius: 50%; background-color: var(--main-color); align-items: center; justify-content: center; display: flex; color: #fff;}
main#home section#suppliers wm-slider-trigger:first-child{place-self: center start;}
main#home section#suppliers wm-slider-trigger:last-child{place-self: center end;}

main#home section#suppliers .grid:has(img:first-child[active]) wm-slider-trigger:first-child,
main#home section#suppliers .grid:has(img:last-child[active], img:nth-last-child(2)[active], img:nth-last-child(3)[active], img:nth-last-child(4)[active], img:nth-last-child(5)[active]) wm-slider-trigger:last-child{opacity: 0.6; pointer-events: none;}

/* Produtos */

body:has(main#produtos) header#mainHeader{box-shadow: 0px 4px 30px 0px rgba(20, 86, 128, 0.15);}
main#produtos{padding: 80px 0;}

	/* Products */

main#produtos section#products h1{text-align: center; font-size: 2.25rem; color: var(--main-color);}
main#produtos section#products .content{gap: 60px;}
main#produtos section#products .content .grid{grid-template-columns: 370px minmax(0, 1fr); gap: 0;}
main#produtos section#products .content .grid .grid{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 38px;}
main#produtos section#products article{padding: 6px 19px 27px; border-radius: 5px; border: 1px solid #ddd; gap: 25px;}
main#produtos section#products article .column{gap: 13px;}
main#produtos section#products article .column .column{gap: 2px;}
main#produtos section#products article img{background-color: #D9D9D9; margin: auto;}
main#produtos section#products article strong{color: var(--main-color); font-weight: 700; font-family: 'Intro'; font-size: 1.25rem;}
main#produtos section#products article p{opacity: 1; color: #222; font-size: 1.125rem;}
main#produtos section#products article .availability{align-items: center; gap: 2px;}
main#produtos section#products article .availability span{font-size: 6px; border: 1px solid; color: var(--main-color); aspect-ratio: 1; border-radius: 50%; padding: 2px; font-weight: 900; user-select: none;}
main#produtos section#products article .availability p{font-size: 0.875rem; color: var(--main-color); opacity: 1;}

/* Cookies ===================================================== */
section#cookies{position: fixed; bottom: 20px; left: 50%; background: rgba(255, 255, 255, 0.95); border: 1px solid #F5F5F5; border-radius: 4px; padding: 18px 40px; color: #000; font-size: 0.75rem; font-weight: 500; align-items: center; gap: 16px; transform: translateX(-50%); z-index: 99999; border: 1px solid #005395; display: flex; justify-content: space-around; align-items: center; width: 96%;}
section#cookies p{color: #145680; font-weight: bold; font-size: 1rem; max-width: 538px;}
section#cookies i{flex: 0 0 44px; aspect-ratio: 1; background: url(../assets/images/Cookies.svg) no-repeat center / cover; width: 86px; height: 86px;}
section#cookies a{color: #63CBDE; transition: .3s ease;}
section#cookies button{color: #fff; border: 0; background-color: #005395; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: .3s ease; width: 74px; height: 40px;}
section#cookies button:hover,
section#cookies a{transform: scale(1.02); opacity: 0.9;}
section#cookies .cookies-section{display: flex; justify-content: center; align-items: center; gap: 20px;}

.form_load{vertical-align: middle; margin-left: 15px; margin-top: -2px; display: none}

@media(min-width: 2096px){
	main#home div#banner section {
		aspect-ratio: 1900/480;
	}
}

@media(max-width: 768px){

	/* Slider */
	main#home section#suppliers wm-slider{width: 700px; --indexed-element-amount: 2; --element-sliding-amount: 1; --clip-unreacheable: true;}

	/* Header */
	header#mainHeader .headerContent nav{flex-direction: column; text-align: end; align-items: end;}
	header#mainHeader .headerContent .logo{width: 120px;}
	header#mainHeader .headerContent nav #navMenu{display: flex; position: absolute;width: 100%; top: 154px; right: 0; background-color: #fff; z-index: 99;height: 0; flex-direction: column ; text-align: left; padding: 20px; gap: 30px; visibility: hidden;transition: .3s; overflow-y: hidden;}
	header#mainHeader .headerContent nav.active #navMenu{visibility: visible; height:calc(100vh - 154px); overflow-y: auto;}
	header#mainHeader .headerContent nav #navMenu a{border-bottom: 1px solid #B0D5F0; padding: 20px;}

	#hamburger{display:block; width: 30px; border-top: 2px solid #145680;}
	#hamburger::after, #hamburger::before{content: ''; display: block; width: 30px; height: 2px; background-color: currentColor; margin-top: 5px; transition: .3s; position: relative;}
	header#mainHeader .headerContent nav.active #hamburger{border-top-color: transparent;}
	header#mainHeader .headerContent nav.active #hamburger::before{transform: rotate(135deg);}
	header#mainHeader .headerContent nav.active #hamburger::after{transform: rotate(-135deg); top: -7px;}

	/* Catalog */
	main#home section#suppliers h3, main#home section#about .content h3,
	main#home section#catalog .content h3{text-align: center;}
	main#home section#about .content{display: flex; flex-direction: column;}
	main#home section#catalog .content #table{overflow-x: auto; max-width: 100%;}

/* Footer */
	footer#mainFooter .content .textSide.grid{grid-auto-flow: row; justify-content: center;}
}


@media(max-width: 530px){

	main {
		gap: 70px;
	}

	/* Cookies */
	section#cookies{z-index: 999999; width: 90%; padding: 10px; flex-wrap: wrap; justify-content: center; transform: translateX(-44%);}
	section#cookies .cookies-section{flex-direction: column; text-align: center;}
	section#cookies .cookies-section h3{font-size: 1rem;}
	section#cookies .cookies-section p,
	section#cookies button{font-size: 0.875rem;}
	section#cookies{left: 46%;}
	section#cookies i {width: 44px;}

	/* Header */
	header#mainHeader .headerBar .content{gap: 16px;}
	header#mainHeader .headerBar .content a span{font-size: 1rem;}
	header#mainHeader .headerBar .content{flex-direction: column;}
	header#mainHeader .headerContent nav #navMenu{top: 192px;}
	header#mainHeader .headerContent nav.active #navMenu{height: calc(100vh - 192px);}

	/* Banner */
	main#home div#banner section .content .column h3{font-size: 2rem;}
	main#home div#banner section .content .column{align-items: start; height: 280px; justify-content: center; max-width: 300px;background-color: rgba(255,255,255,0.4);}
	main#home div#banner section .content .column .row{display: none;}
	main#home div#banner section .content .column .btn{padding: 10px 20px; font-size: 1rem;}


/* Slider */
	main#home section#suppliers wm-slider{width: 400px; --indexed-element-amount: 1; --element-sliding-amount: 1; --clip-unreacheable: true;}
	main#home section#suppliers wm-slider{--active-element-align: center;}

}

@media(max-width: 375px){
	/* About */
	main#home section#about .content .grid{grid-template-columns: 1fr;}

	/* Suppliers */
	main#home section#suppliers wm-slider{width: 300px;}

	/* Btn */
	main#home section#catalog .cotation .btn{padding: 12px 32px;}

}