/* SCROLLBAR */
::-webkit-scrollbar                 {width: 12px; border-radius: ; transition: .2s; overflow: auto; background: var(--complement);}
::-webkit-scrollbar-track           {background: var(--primario); margin: 40px 0px; border-radius: 20px; transition: .2s; }
::-webkit-scrollbar-thumb           {transition: .2s; background: var(--secundario); border-radius: 20px; }

body 								{background: var(--gray1);}
.tono1 								{background: var(--tono1) !important; color: var(--complement) !important;}
.tono2 								{background: var(--tono2) !important; color: var(--primario) !important;}


.cl-normal 							{width: 1200px; margin: auto;}
@media ( width <= 1440px )          {
	.cl-normal 						{width: 900px; margin: auto;}
}
@media ( width <= 960px )          	{
	.cl-normal 						{width: 600px; margin: auto;}
}
@media ( width <= 650px )          	{
	.cl-normal 						{width: 88%; margin: auto;}
}




/* HEADER */
.header 							{position: fixed; top: 0px; z-index: 10; width: 100%; background: var(--white04); margin: auto; left: 0px; right: 0px; padding: 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid lightgray; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .6s;
	.logo 							{width: 110px; padding: 4px 0px 0px 0px;}
	.anpegar2 						{}
	.right 							{}
	.btn 							{background: var(--secundario); color: white; height: 32px; display: flex; align-items: center; font-size: 16px; padding: 0px 12px; font-weight: 500;}
}
.headerOn 							{opacity: 1; visibility: visible; transition: .6s;}

.icoBajar							{position: fixed; bottom: 70px; z-index: 10; background: var(--complement); color: var(--light2); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 36px; cursor: pointer; transition: 0.6s; right: 20px; visibility: hidden; opacity: 0;
	&:hover 						{background: var(--light2); color: var(--complement);}
	&:active 						{transform: scale(.9);}
}
.icoBajarOn 						{visibility: visible; opacity: 1; transition: .6s;}



/* HOME BANER */
.stick1 							{position: relative; z-index: 1;}

.homeBaner 							{width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; position: sticky; top: 0px;
	.logo 							{position: absolute; z-index: 2; background: var(--white07); width: 80%; max-width: 350px; padding: 30px 24px 20px 24px; margin: 0px auto; left: 0px; right: 0px; top: 0px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0px 32px 30px -20px rgba(0,0,0,0.8);}
	.anpegar 						{}
	.shadow 						{position: relative; z-index: 1; width: 100%; height: 70%; display: flex; align-items: flex-end; justify-content: space-between; padding: 70px; background: linear-gradient(0deg,rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100%);}
	h1								{font-size: 50px; width: 90%; max-width: 660px; line-height: 1.2;}
	.fondo 							{background: var(--primario); color: white; padding: 0px 18px 3px 18px;}
	.btn 							{background: var(--secundario); color: white; font-size: 23px; height: 60px; display: flex; align-items: center; justify-content: center; padding: 0px 20px; cursor: pointer; transition: .2s;
		&:hover 					{background: var(--complement);}
		&:active 					{transform: scale(.9);}
	}
	.video 							{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;
		.img-int 					{object-position: right;}
	}
}
@media ( width <= 1100px )          {
	.homeBaner 						{
		.logo						{max-width: 240px; padding: 30px 20px 20px 20px;}
		.shadow						{flex-direction: column; align-items: center; justify-content: flex-end; padding: 30px; gap: 30px;}
		h1 							{font-size: 30px; width: 410px; font-weight: 500;}
		.btn						{width: 410px; height: 40px; font-size: 20px;}
	}
}
@media ( width <= 650px )          	{
	.homeBaner						{
		h1 							{font-size: 24px; width: 320px;}
		.fondo						{padding: 0px 9px 3px 9px;}
		.btn						{width: 320px;}
	}
}




/* CONSTRUIMOS */ 
.shadowTap1 						{width: 100%; height: 80vh; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%); position: relative;}
.title1 							{font-size: 34px; color: var(--primario); width: 100%; max-width: 600px; margin: 0px 0px 20px 0px;}
.txt 								{color: var(--complement); margin: 10px 0px; font-weight: 300; font-size: 20px; width: 100%; max-width: 900px;}

@media ( width <= 960px )          	{
	.title1 						{font-size: 28px; font-weight: 500; padding: 0px 30px;}
	.txt							{font-weight: 500;}
}
@media ( width <= 650px )          	{
	.title1 						{font-size: 22px; font-weight: 500;}
}


.construimos 						{position: relative; width: 100%; height: 120vh; overflow: hidden;
	.top 							{position: absolute; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%;}
	.imgBg 							{width: 100%; height: 100%; position: relative;}
	.shadow 						{width: 100%; height: 100%; position: absolute; background: radial-gradient( circle at 50% 220%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 80%)}
	.video 							{width: 100%; height: 100%;}
}
@media ( width <= 650px )          	{
	.construimos 					{
		.txt						{font-size: 17px; font-weight: 500; padding: 0px 10px;}
	}
}



/* POR QUE NACE */
.vinetas 							{display: flex; gap: 3px; font-size: 32px; font-weight: 300; margin: 70px 0px 0px 0px;
	.icoVin 						{font-size: 26px; margin: 4px 0px 0px 0px;}
}
.nace 								{background: var(--complement); padding: 0px 0px 200px 0px;
	.naceWrap 						{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
	.left 							{width: 580px; color: var(--light1); position: sticky; top: 0px; padding: 0px 0px 20px 0px;}
	.right 							{width: 600px; color: var(--light2); padding: 400px 0px 0px 0px;}

	.manoPlanta 					{margin: -20px 0px -18px 0px; position: relative; filter: drop-shadow(0 30px 20px rgba(0, 0, 0, .7)); width: 80%;}
	.title2 						{font-size: 50px;}
	.enfrenta 						{color: white; font-size: 20px; margin: 30px 0px 20px 0px;}
	.flecha 						{background: white; width: 97%; height: 2px; position: relative;
		&::after					{content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; border-top: 3px solid white; border-right: 3px solid white; transform: translateY(-50%) rotate(45deg);}
	}
}
@media ( width <= 1440px )          {
	.nace 							{
		.left						{width: 350px;}
		.right						{padding: 290px 0px 0px 0px; width: 550px;}
	}
	.vinetas						{font-size: 30px;}
}
@media ( width <= 960px )          	{
	.nace 							{
		.naceWrap					{justify-content: center; text-align: center;}
		.left						{width: 100%; position: relative;}
		.manoPlanta					{margin: -20px 0px -10px 0px; width: 100%;}
		.title2						{font-size: 34px;}
		.flecha						{display: none;}
		.right						{padding: 0px 0px 0px 0px; width: 100%;}
	}
	.vinetas						{text-align: left; margin: 40px 0px 0px 0px;}
}
@media ( width <= 650px )          	{
	.vinetas						{font-size: 24px;
		.icoVin						{font-size: 20px; margin: 2px 0px 0px 0px;}
	}
}


/* QUIENES PUEDEN SER ASOCIADOS */
.puedenser 							{
	.wrapPueden 					{display: flex; flex-direction: column; align-items: center; text-align: center;}
	.manosCirc 						{width: 260px; border: 20px solid var(--gray1); margin: -130px 0px 0px 0px; border-radius: 250px; background: var(--secundario);}
	.title1 						{color: var(--complement);}
	.lineTitle 						{background: var(--complement); width: 60px; height: 2px;}
	.txt 							{max-width: 400px; font-weight: 400;}
	.barra 							{width: 100%; height: 200px; background: var(--complement);}
	.topPueden 						{display: flex; flex-direction: column; align-items: center; position: sticky; top: 190px;}
}
.quienes 							{width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
	.left 							{}
	.item 							{width: 230px; height: 230px; display: flex; justify-content: center; align-items: center; background: rgba(128, 128, 128, 0.41); margin: 0px 0px 30px 0px; box-shadow: 0px 20px 40px -20px rgba(0,0,0,0.5); font-weight: 800; font-size: 25px;}
	.right 							{}
}

.mov1								{transform: translateX(60px);}
.mov2								{transform: translateX(120px);}
.mov3								{transform: translateX(180px);}

.mof1								{transform: translateX(-60px);}
.mof2								{transform: translateX(-120px);}
.mof3								{transform: translateX(-180px);}

@media ( width <= 1440px )          {
	.quienes						{
		.item						{width: 180px; height: 180px; font-size: 22px;}
	}

	.mov1							{transform: translateX(30px);}
	.mov2							{transform: translateX(60px);}
	.mov3							{transform: translateX(90px);}

	.mof1							{transform: translateX(-30px);}
	.mof2							{transform: translateX(-60px);}
	.mof3							{transform: translateX(-90px);}
}

@media ( width <= 1440px )          {
	.puedenser						{
		.topPueden					{position: relative; top: 0px;}
	}
	.quienes						{margin: 20px 0px 0px 0px; gap: 22px; flex-wrap: wrap;
		.left 						{width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;}
		.right 						{width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;}
		.item						{width: 150px; height: 150px; font-size: 18px; margin: 0px;}
	}
	.mov1							{transform: translateX(0px);}
	.mov2							{transform: translateX(0px);}
	.mov3							{transform: translateX(0px);}

	.mof1							{transform: translateX(0px);}
	.mof2							{transform: translateX(0px);}
	.mof3							{transform: translateX(0px);}
}




/* SER ASOCIADOS */
.beneficios 						{text-align: center; margin: 120px 0px 0px 0px; position: relative; z-index: 1;
	.title1							{max-width: 100%;}
	.wrapSlider 					{overflow: hidden;}
	.sliderAdociado 				{display: flex; gap: 30px; user-select: none; cursor: grab; touch-action: pan-y;}
	.dragOn 						{cursor: grabbing;}
}

.itemCard							{width: 250px; flex-shrink: 0; overflow: hidden; background: var(--tono1); padding: 0px 0px 16px 0px;
	.wrapImg 						{width: 100%; height: 160px; overflow: hidden; border-radius: 0px 0px 20px 20px;
		.img-int 					{pointer-events: none;}
	}
	.title							{font-weight: 800; margin: 16px 0px 0px 0px; padding: 0px 8px;}
	.txt 							{font-weight: 500; padding: 0px 20px; box-sizing: border-box; font-size: 18px; color: inherit;}
}
.itemColor1 						{background: var(--secundario); color: var(--light2);}
.itemColor2 						{background: var(--complement); color: var(--light1);}



/* LO QUE HACEMOS */
.hacemos 							{overflow: hidden; position: relative; width: 100%; padding: 320px 0px 80px 0px; margin: -140px 0px 0px 0px;
	.video 							{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;}
	.wrapHacemos 					{position: relative; background: var(--white07); display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 16px; padding: 30px 0px 20px 0px;}
	.title1 						{max-width: 100%;}
}
.itemIcon 							{width: 180px; height: 180px; background: var(--white07); display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; box-shadow: 0px 19px 20px -17px rgba(0,0,0,0.5);
	.iconImg 						{width: 80px;}
	.txt 							{font-weight: 500; font-size: 16px; padding: 0px 12px;}
}

@media ( width <= 1440px )          {
	.itemIcon						{width: 130px; height: 180px;
		.txt						{font-size: 15px;}
	}
}
@media ( width <= 650px )          	{
	.itemIcon						{width: 44%;}
}


/* EJES */
.ejes 								{background: url(../images/ejes.webp); z-index: 1; background-repeat: no-repeat; width: 100%; height: 470px; overflow: hidden; display: flex; align-items: flex-end; position: relative; align-content: flex-end; background-position: bottom; background-size: cover;
	.wrapEjes 						{position: absolute; top: 0px; width: 100%; background: var(--white03);}
	.wrapInt 						{display: flex; align-items: center;}
	.title1 						{color: white; margin: 0px; width: 450px; max-width: 450px; text-align: center;}
	.img-int 						{}
}

.wrapItemEjes						{display: flex; align-items: center;
	.item 							{background: var(--white03); color: white; font-weight: 800; text-align: center; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 24px; padding: 0px 10px; width: 17%; box-shadow: -12px 0px 30px -14px rgba(0,0,0,0.3);}
}

@media ( width <= 1440px )          {
	.ejes 							{
		.title1						{font-size: 30px;}
	}
	.wrapItemEjes					{
		.item						{font-size: 20px;}
	}
}

@media ( width <= 1110px )          {
	.ejes 							{
		.title1						{width: 310px; max-width: 310px; text-wrap: nowrap;}
		.wrapEjes					{overflow: auto;}
		.wrapInt					{width: 1105px;}
	}
}



/* FOOTER */
.footer 							{width: 100%; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 12px; margin: 50px 0px 0px 0px; position: sticky; bottom: 0px;
	.txt 							{max-width: 100%; font-weight: 700; font-size: 13px;}
	.aliados 						{width: 130px; border: solid 1px lightgray;}
	.barra 							{background: var(--complement); width: 100%; color: var(--light2); height: 50px; display: flex; justify-content: center; align-items: center; margin: 20px 0px 0px 0px;}
}



/* AFILIATE */
.afiliate 							{width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;
	.wrap 							{position: relative; z-index: 1; width: 680px; display: flex; flex-direction: column; gap: 20px;}
	.dataInfo						{width: 100%; background: var(--white06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; justify-content: space-between; flex-wrap: wrap;}
}
@media ( width <= 850px )          	{
	.afiliate						{height: auto;
		.wrap						{width: 88%; margin: 240px 0px 190px 0px;}
	}
}



/* CONSTRUYAMOS */
.construyamos 						{width: calc(100% - 300px);
	.icoLeft 						{background: var(--light2); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--complement); cursor: pointer;}
	.construInt						{display: flex; flex-wrap: wrap;}
	.logoAfi 						{background: var(--primario); width: 130px; height: 36px; display: flex; padding: 9px;}
	.logoInt 						{}
	.titleAfi1 						{background: var(--secundario); color: white; height: 36px; display: flex; align-items: center; padding: 0px 10px; font-weight: 700;}
	.titleAfi2 						{font-weight: 600; font-size: 22px; padding: 0px 20px; margin: 12px 0px 0px 0px;}
	.txt 							{font-weight: 400; padding: 0px 20px; font-size: 18px;}
}
@media ( width <= 850px )          	{
	.construyamos					{width: 100%;}
}

/* CONSEJO  */
.consejoWrap 						{width: 100%; background: var(--white06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow: hidden;
	.wrapInt 						{display: flex; align-items: center; gap: 20px; padding: 10px 10px 0px 10px;}
	.marqueeOn 						{width: max-content; animation: marquee var(--duracion) linear infinite;}
	.item 							{display: flex; align-items: flex-end; flex-shrink: 0;}
	.imgConsejo 					{height: 80px; width: auto;}
	.descrip 						{font-size: 14px; font-weight: 500; padding: 0px 0px 6px 4px;}
	.name 							{}
	.cargo 							{font-size: 13px; margin: 0px 0px 5px 0px;}
	.empresa 						{font-size: 12px; text-transform: uppercase; font-weight: 700;}
}
@keyframes marquee 					{to {transform: translateX(var(--desplazamiento));}}

/* FORMULARIO */
.afiliateForm 						{background: var(--white07); width: 300px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
	.campo1 						{width: 100%; border: 1px solid var(--primario); font-size: 16px; padding: 6px 8px 4px 8px; background: var(--white);}
	.trampa 						{position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;}
	.avisoForm 						{display: none; font-size: 15px; font-weight: 500; padding: 8px 10px; background: var(--white); color: var(--primario);}
	.avisoOn 						{display: block;}
	.avisoError 					{color: var(--error);}
	.send 							{background: var(--primario); color: var(--light1); text-align: center; height: 36px; font-weight: 500; margin: 10px 0px 0px 0px;}
	.enviando 						{opacity: .6; pointer-events: none;}
}
@media ( width <= 850px )          	{
	.afiliateForm					{width: 100%; margin: 50px 0px 0px 0px;}
}

/* AFILIATE FONDO */
.bg 								{width: 100%; height: 100vh; position: fixed; top: 0px; left: 0px;
	.video 							{width: 100%; height: 100%;}
}