/* ====================================================================== */
/* =========================== Default Screen =========================== */
/* ====================================================================== */

*,
*::after,
*::before {
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
}

html {
	height: 100%;
	font-family: 'Aeonik', sans-serif;
	background-color: var(--back-color);
	scroll-behavior: smooth;
	font-size: 0.6945vw;
	color: var(--font-color);
	overflow-y: scroll;
	font-weight: 400;
	cursor: default;
}
	
body {
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-size-adjust: none !important;
	font-smoothing: antialiased !important;	
	line-height: 0;
	padding: 0;
	margin: 0;
}

.setWrapper {
	width: calc(100% - 12.8rem);
	justify-content: space-between;
	margin: 12.8rem auto;
	align-items: center;
	position: relative;
	display: flex;
}

/* ---------------------------------------- */
/* ----- >>> Structure -------------------- */
/* ---------------------------------------- */

header,
footer,
section {
	width: 100%;
	position: relative;
	overflow: hidden;
}

header {
	transition: all 0.5s ease-in-out;
	z-index: 9999;
	left: 0;
	top: 0;
}

footer {
	background-color: var(--font-color);
	color: var(--main-color);
	overflow: hidden;
}

/* ---------------------------------------- */
/* ----- >>> Styles ----------------------- */
/* ---------------------------------------- */

h1			{ font: 400 6.4rem/1.10em 'Aeonik', sans-serif; margin-bottom: 6.4rem; }
h2			{ font: 400 2.8rem/1.25em 'Aeonik', sans-serif; margin-bottom: 6.4rem; }
p, dd 		{ font: 400 1.8rem/1.50em 'Aeonik', sans-serif; margin-bottom: 0.0rem; }
small 		{ font: 300 2.1rem/1.25em 'Aeonik', sans-serif; margin-bottom: 0.0rem; }
a 			{ text-decoration: none;}

/* ---------------------------------------- */
/* ----- >>> Navegation ------------------- */
/* ---------------------------------------- */

footer .setWrapper {
	margin: 3.2rem auto;
}

.isBND {
	width: 31.5rem;
	height: 5.4rem;
}

header .isBND {
	width:  38.0rem;
	height: 16.0rem;
	filter: drop-shadow(0rem 0.4rem 0.6rem rgb(0 0 0 / 0.2));
	transform: translate(-50%, -50%);
	position: fixed;
	overflow: hidden;
	margin: 0 auto;
	left: 50%;
	top: 40%;
}

header .isBND > svg {
	width:  105.0rem;
	height: 16.0rem;
	transition: all 0.25s ease-in-out;
}

header .isS01 { fill: var(--back-color); }
header .isS02 { fill: var(--main-color); }

footer .isS01 { fill: var(--main-color); }
footer .isS02 { fill: var(--main-color); }

footer small { margin-right: 5.4rem; }

/* ---------------------------------------- */

.setHide .isBND	{
	transition: top 0.5s ease-in-out !important;
	opacity: 0;
}

.onTop .isBND		{ animation: isScroll normal forwards 0.5s ease-in-out; }
.onTop .isBND svg	{ animation: isBrands normal forwards 0.5s ease-in-out; }
.onTop .isBND .isS01{ animation: isS01 normal forwards 0.5s ease-in-out; }
.onTop .isBND .isS02{ animation: isS02 normal forwards 0.5s ease-in-out; }

@keyframes isScroll {
	  0% { width: 38.0rem; height: 16.0rem; top: 45%; filter: drop-shadow(0rem 0.4rem 0.6rem rgb(0 0 0 / 0.25)); }
	 25% { width: 12.8rem; height: 05.4rem; top: 10%; }
	 75% { width: 12.8rem; height: 05.4rem; top: 10%; }
	100% { width: 35.4rem; height: 05.4rem; top: 10%; filter: drop-shadow(0rem 0.2rem 0.2rem rgb(0 0 0 / 0.25)); }
}

@keyframes isBrands {
	  0% { width: 105.0rem; height: 16.0rem; }
	 25% { width: 035.4rem; height: 05.4rem; }
	100% { width: 035.4rem; height: 05.4rem; }
}

@keyframes isS01 {
	  0% { fill: var(--back-color); }
	 25% { fill: var(--back-color); }
	 50% { fill: var(--back-color); }
	 75% { fill: var(--font-color); }
	100% { fill: var(--font-color); }
}

@keyframes isS02 {
	  0% { fill: var(--back-color); }
	 25% { fill: var(--back-color); }
	 50% { fill: var(--back-color); }
	 75% { fill: var(--back-color); }
	100% { fill: var(--back-color); }
}


/* ---------------------------------------- */
/* ----- >>> Section: Home ---------------- */
/* ---------------------------------------- */

.isIntro {
	position: relative;
	align-items: center;
	z-index: 1000;
	display: flex;
	gap: 9.6rem;
}

.isIntro > div:nth-child(1) { width: 60%; margin: 00% 00% 00% 05% }
.isIntro > div:nth-child(2) { width: 35%; margin: 00% 05% 00% 00% }

.isIntro > div:nth-child(1) > h2 {
	margin-left: 9.6rem;
	position: relative;
}

.isIntro > div:nth-child(1) > h2:before {
	transform: translate(-3.2rem, -0.2rem);
	display: inline-block;
	position: absolute;
	content: "→";
}

/* ---------------------------------------- */

.isSchema {
	margin: 0 auto;
	display: flex;
	gap: 6.4rem;
}

.isSchema > div {
	position: relative;
}

.isSchema > div:nth-child(1) { width: 75% }
.isSchema > div:nth-child(2) { width: 25% }

.isSchema > div:nth-child(2) > ol {
	flex-direction: column;
	margin-bottom: 6.4rem;
	display: flex;
	gap: 1.6rem;
}

.isSchema > div:nth-child(2) > ol > li {
	font: 400 1.6rem/1.25em 'Aeonik', sans-serif;
	list-style-type: upper-alpha;
	list-style-position: outside;
	padding-left: 1.6rem;
	margin-left: 1.6rem;
}

.isSchema > div:nth-child(2) > img {
	width: 30rem;
}

/* ---------------------------------------- */

.isMaps { 
	background: url(../assets/@0x/IMG_B00D.jpg) no-repeat center center / cover;
	color: var(--back-color);
}

.isMaps h1 {
	position: absolute;
	font-size: 4.8rem;
	bottom: 6.4rem;
	left: 6.4rem;
}

.isMaps h1 > i {
	width: 35.4rem;
	height: 5.4rem;
	background: url(../assets/SVG/SVG_BND.svg?101) no-repeat center center / cover;
	margin-top: 0.8rem;
	display: block;
}

/* ---------------------------------------- */

.isLogos {
	width: 100%;
	margin: 0 auto;
	display: flex;
	gap: 3.2rem;
}

.isLogos > li {
	width: 100%;
	flex-direction: column;
	align-items: center;
	text-align: center;
	display: flex;
	gap: 3.2rem;
}

.isLogos > li > p {
	line-height: 1.25em;
	min-height: 4.8rem;
	font-size: 1.6rem;
}

.isLogos > li > i {
	width:  16.0rem;
	display: inline-block;
	aspect-ratio: 3 / 2;
}

.isLogos > li:nth-child(3) > i,
.isLogos > li:nth-child(4) > i {
	width: 21rem;
}

/* ---------------------------------------- */
/* ----- >>> General ---------------------- */
/* ---------------------------------------- */

a:empty {
	width:  100%;
	height: 100%;
	display: block;
}

img {
	width: 100%;
	height: auto !important;
	display: block;
}

.setIMG {
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #EAEAEA;
	background-size: cover;
	aspect-ratio: 16 / 9;
	position: relative;
}

/* ---------------------------------------- */

.isHero {
	width: 100%;
	aspect-ratio: 16 / 9;
	align-items: center;
	display: flex;
}

.isBrush:before {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: url(../assets/@0x/IMG_B000.png) no-repeat center center / cover;
	transform: translateY(-60%);
	position: absolute;
	opacity: 0.5;
	content: "";
	z-index: 50;
	top: 50%;
}

/* ---------------------------------------- */

.setSwiper {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.setSwiper .setItems .setItem {
	width: 100%;
	height: 100vh;
	background-position: center bottom;
	margin-bottom: 0;
}

/* ---------------------------------------- */
/* ----- >>> Animations ------------------- */
/* ---------------------------------------- */

a,
button {
	transition: all 0.25s ease-in-out;
}

/* ---------------------------------------- */
/* ----- >>> Icon Sets -------------------- */
/* ---------------------------------------- */

.isL01 { background-image: url(../assets/SVG/SVG_L01.svg?10001); }
.isL02 { background-image: url(../assets/SVG/SVG_L02.svg?10001); }
.isL03 { background-image: url(../assets/SVG/SVG_L03.svg?10001); }
.isL04 { background-image: url(../assets/SVG/SVG_L04.svg?10001); }

.isPIN { 
	width:  6.4rem;
	height: 6.4rem;
	background: url(../assets/SVG/SVG_PIN.svg) no-repeat 000% 00% / 700% 100%; 
	transform: translateX(-50%);
	display: inline-block;
	position: absolute;
}

.isP01 { background-position: 000.0000% 100.0000%; top: 28.0%; left: 15.0% }
.isP02 { background-position: 000.0000% 100.0000%; top: 36.0%; left: 44.5% }
.isP03 { background-position: 016.6667% 100.0000%; top: 55.0%; left: 76.5% }
.isP04 { background-position: 033.3333% 100.0000%; top: 73.0%; left: 70.5% }
.isP05 { background-position: 050.0000% 100.0000%; top: 66.0%; left: 44.5% }
.isP06 { background-position: 066.6667% 100.0000%; top: 66.0%; left: 15.0% }
.isP07 { background-position: 083.3333% 100.0000%; top: 73.0%; left: 85.5% }
.isP08 { background-position: 100.0000% 100.0000%; top: 10.0%; left: 01.5% }
.isP09 { background-position: 100.0000% 100.0000%; top: 66.0%; left: 01.5% }

/* ---------------------------------------- */
/* ----- >>> WhatsApp --------------------- */
/* ---------------------------------------- */

.isWSP {
	width:  4.8rem;
	height: 4.8rem;
	background: url(../assets/SVG/SVG_WSP.svg?00010) no-repeat center center / 2.4rem 2.4rem #25D366;
	box-shadow: 0px 0.2rem 0.2rem 0px rgba(0,0,0,0.25);
	display: inline-block;
	border-radius: 50%;
	position: fixed;
	cursor: pointer;
	bottom: 3.2rem;
	right: 3.2rem;
	z-index: 9990;
	display: none;
}

.isWSP i {
	width:  2.0rem;
	height: 2.0rem;
	font: 700 1.0rem/2.0rem 'Aeonik', sans-serif;
	transform: translate(+10%, -50%);
	background-color: #F00;
	position: absolute;
	text-align: center;
	border-radius: 50%;
	color: #FFFFFF;
	right: 0;
	top: 0;
}

/* ---------------------------------------- */
/* ----- >>> Color Schema ----------------- */
/* ---------------------------------------- */

:root {
	--main-color: #8EA04D;
	--font-color: #3C4932;
	--back-color: #E3DDD2;
}

/* ---------------------------------------- */
/* ----- >>> CSS Hacks -------------------- */
/* ---------------------------------------- */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

* html .setClearfix{ 
	height: 1%;
}

.setClearfix{ 
	display: inline-block; 
}

.setClearfix:after {
	content: "\00A0";
	visibility: hidden;
	line-height: 0;
	display: block;
	clear: both;
	height: 0;
}

*:last-child:not(.setWrapper) {
	margin-bottom: 0;
}

/* ---------------------------------------- */
/* ----- >>> Dev Tools -------------------- */
/* ---------------------------------------- */

.isDev * {
	box-shadow: inset 0rem 0rem 0rem 0.05rem #FF1DFF;
}

.isDev .setWrapper {
	background-color: rgba(255, 0, 0, 0.1);
}

.isDev header:before,
.isDev header:after {
	height: 100vh;
	width: 0.1rem;
	position: fixed;
	background: #FF1DFF;
	z-index: 99999;
	content: "";
	top: 0;
}

.isDev header:before { left:  6.4rem; }
.isDev header:after	 { right: 6.4rem; }