/* NAVEGADOR */
.nav 							{background: black; border: 1px solid var(--color-primario-light); padding: 4px; border-radius: 18px; gap: 0px; display: flex; width: fit-content; position: fixed; bottom: 20px; z-index: 10; margin: auto; left: 0px; right: 0px; box-shadow: 0px 16px 20px -14px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
	.navInd 					{position: absolute; top: 4px; bottom: 4px; left: 0px; width: 0px; background: white; border-radius: 12px; opacity: 0; z-index: 0; pointer-events: none; transition: left .2s cubic-bezier(.5,.05,.2,1), width .35s cubic-bezier(.5,.05,.2,1), opacity .2s;}
	.btn 						{position: relative; z-index: 1; color: var(--color-primario-light); font-size: 18px; font-weight: 500; padding: 7px 10px 7px 10px; border-radius: 12px; cursor: pointer; transition: color .2s, transform .2s;
		&:hover 				{color: var(--color-primario);}
		&:active 				{transform: scale(.92);}
		&.btnOn 				{color: var(--color-primario);}
	}
}
@media ( width <= 580px )		{
	.nav 						{border-radius: 16px;
		.btn 					{padding: 4px 5px 5px 5px;}
	}
}





/* HEADER */
.header 						{position: fixed; transition: .6s .0s; top: 0px; z-index: 10; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; border-radius: 0px 0px 20px 20px; padding: 26px 24px 14px 24px; margin: auto; left: 0px; right: 0px;
	.logo 						{width: 120px; padding: 0px 0px 4px 4px;}
	.logoImg 					{filter: brightness(1) invert(1) sepia(1) hue-rotate(300deg) saturate(40%) brightness(1.1);}

	.right 						{display: flex; align-items: center; gap: 20px;}
	.item 						{display: flex; align-items: flex-start; gap: 5px; width: fit-content; font-size: 17px; color: var(--color-primario-light); font-weight: 500;
		.icoHeader 				{font-size: 20px;} 
		.txt 					{text-wrap: auto; line-height: 1.2;}
	}
	.icoHeaderClose 			{font-size: 26px; color: var(--color-primario-light); border-radius: 16px; border: 1px solid var(--color-primario-light); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s;
		&:hover 				{background: var(--color-primario-light); color: var(--color-primario-dark); transform: scale(1.2);}
		&:active 				{transform: scale(.96);}
	}
	.btnInfo 					{display: none;}
	.btnClos					{display: none;}
}
.headerActiv 					{background: rgba(255, 255, 255, 0.7); padding: 18px 10px 10px 10px; max-width: 1200px; transition: .6s .0s; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
	.logo 						{width: 90px;}
	.logoImg					{filter: none;}
	.right 						{gap: 10px;}
	.btnClos					{display: flex;}
	.item						{color: var(--color-secundario); font-size: 15px;}
	.icoHeaderClose				{color: var(--color-secundario); border: 1px solid var(--color-secundario); font-size: 20px; width: 36px; height: 36px; border-radius: 14px;}
}
@media ( width <= 720px )		{
	.header 					{
		.item 					{display: none;}
		.right 					{gap: 10px;}
		.btnInfo 				{display: flex;}
	}
}


/* BACKGROUND */
.background 					{position: fixed;  top: 0px; width: 100%; height: 100vh; left: 0px; overflow: hidden;
	.shadow 					{width: 100%; position: relative; z-index: 1; height: 100%; mix-blend-mode: multiply; background: linear-gradient(0deg,rgba(95, 19, 114, 1) 0%, rgba(95, 19, 114, 0.8) 20%, rgba(95, 19, 114, 0.55) 50%, rgba(95, 19, 114, 0.8) 80%, rgba(95, 19, 114, 1) 100%);}
	.wrap 						{width: 100%; height: 100%; position: absolute; top: 0px;}
}



/* HOME */
.home 							{position: fixed; transition: .6s .0s; z-index: 1; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; top: 0px;
	.wrap 						{width: 400px; text-align: center;}
	.imgWrap 					{padding: 0px 70px; position: relative;}
	.title 						{color: var(--color-primario); box-shadow: none; text-shadow: none; text-transform: uppercase; font-weight: 800; font-size: 19px; margin: 20px 0px 10px 0px; border: 1px solid var(--color-primario); padding: 12px 0px 10px 0px; border-radius: 16px;
								animation: titleLuces 5s infinite;
	}
	.subtitle 					{color: var(--color-primario-light); font-weight: 800; text-transform: uppercase;}
}
@keyframes titleLuces 			{
	0% 							{box-shadow: none; text-shadow: none;}
	10%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	12%							{box-shadow: none; text-shadow: none;}
	14%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	16%							{box-shadow: none; text-shadow: none;}
	18%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	
	80%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	81%							{box-shadow: none; text-shadow: none;}
	83%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	85%							{box-shadow: none; text-shadow: none;}
	87%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	88%							{box-shadow: none; text-shadow: none;}
	90%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}
	99%							{box-shadow: 0px 0px 10px 0px var(--color-primario), inset 0px 0px 10px 0px var(--color-primario); text-shadow: 0px 0px 20px var(--color-primario);}

	100%							{box-shadow: none; text-shadow: none;}
}
.homeActiv 						{align-items: flex-start; padding: 90px 0px 0px 0px; transition: .6s .0s;}

@media ( width <= 680px )		{
	.home 						{
		.wrap 					{width: 260px;}
		.imgWrap 				{padding: 0px 10px;}
	}
}


.seccion 						{position: relative; z-index: 1; background: rgba(255, 255, 255, 0.8); border: 1px solid white; border-radius: 24px; margin: 300px auto 100px auto; text-align: center; color: var(--color-secundario); display: flex; flex-wrap: wrap; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 1; transform: translateY(0px); transition: opacity .28s ease, transform .28s ease;}
.evento 						{display: none;}
.ubicacion 						{display: none;}
.expositor						{display: none;}
.visitante 						{display: none;}
.seccion.secOn 					{display: flex;}
.seccion.secIn, .seccion.secSale {opacity: 0; transform: translateY(40px);}

.marketing 						{font-size: 32px; text-transform: uppercase; width: 100%; padding: 40px 0px;
	.bold800 					{color: var(--color-primario);}
}
@media ( width <= 960px )		{
	.marketing					{font-size: 22px; font-weight: 500;}
}
@media ( width <= 650px )		{
	.marketing					{font-weight: 700;}
}

.videoEvento 					{width: 700px; height: 400px; overflow: hidden; border-radius: 30px; border: 10px solid var(--color-primario); overflow: hidden;}
@media ( width <= 960px )		{
	.videoEvento				{width: 90%; height: 280px; border: 4px solid var(--color-primario);}
}

.laExpo 						{font-size: 20px; font-weight: 500; padding: 0px 100px; margin: 40px 0px 0px 0px;}
@media ( width <= 960px )		{
	.laExpo						{padding: 0px 30px;}
}

.flexEvento 					{display: flex; flex-wrap: wrap; align-items: center; padding: 0px 50px; text-align: left; justify-content: space-between; margin: 40px 0px 0px 0px; font-size: 20px;
	.imgEvento 					{width: 50%; height: 600px; overflow: hidden; border-radius: 28px; border: 10px solid var(--color-primario);}
	.presenta 					{width: 48%;}
	.reune 						{}
	.presentaTitle 				{font-weight: 800; font-size: 30px; margin: 30px 0px 6px 0px;}
	.presentaSubtitle 			{text-transform: uppercase; font-weight: 800; font-size: 15px; color: var(--color-primario);}
	.actividades 				{margin: 0px 0px 40px 0px;}
	.simultaneo 				{display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0px 0px 0px;
		.ferias 				{width: 30%; background: rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 6px;}
	}
}
@media ( width <= 960px )		{
	.flexEvento					{text-align: center; justify-content: center; width: 90%; padding: 0px;
		.imgEvento				{width: 100%; border: 4px solid var(--color-primario);}
		.presenta				{width: 100%; margin: 30px 0px 0px 0px;}
		.simultaneo				{justify-content: center;}
	}
}
@media ( width <= 650px )		{
	.flexEvento					{
		.imgEvento				{height: 300px;}
		.simultaneo				{width: 100%; gap: 12px 0px; justify-content: space-between;
			.ferias 			{width: 48%;}
		}
	}
}

.tusClientes 					{font-weight: 800; font-size: 32px; width: 100%; text-transform: uppercase; margin: 30px 0px 0px 0px;
	.estan 						{}
	.feria 						{background: var(--color-secundario); color: var(--color-primario-light); width: 190px; padding: 10px 0px; border-radius: 20px; margin: 8px auto 0px auto; font-size: 28px;}
}
@media ( width <= 650px )		{
	.tusClientes 				{font-size: 26px;
		.estan 					{}
		.feria 					{font-size: 20px; width: fit-content; padding: 10px 20px; border-radius: 16px;}
	}	
}


.promedio 						{font-size: 20px; width: 100%; max-width: 500px; font-weight: 500; padding: 0px 30px; margin: 10px 0px 0px 0px;}
.atributos 						{width: 100%; margin: 30px 0px 32px 0px; display: flex; flex-wrap: wrap; gap: 20px; padding: 0px 30px;
	.item 						{background: white; overflow: hidden; width: 32%; display: flex; align-items: center; text-align: left; border-radius: 16px; font-size: 20px; border: 1px solid var(--color-secundario);}
	.line 						{background: var(--color-secundario); width: 7px; height: 100%;}
	.txt 						{padding: 20px 10px; width: calc(100% - 10px);}
}
@media ( width <= 1440px )		{
	.atributos					{
		.item					{width: 31%;}
	}
}
@media ( width <= 960px )		{
	.atributos					{gap: 20px 0px; justify-content: space-between;
		.item					{width: 48.5%;}
	}
}
@media ( width <= 650px )		{
	.promedio					{padding: 0px 10px;}
	.atributos					{
		.item					{width: 100%;}
	}
}

.baner 							{width: 100%; height: 400px; overflow: hidden; position: relative; border-radius: 24px; text-transform: uppercase;
	.shadow 					{position: absolute; font-size: 34px; background: rgba(0, 0, 0, .5); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; flex-direction: column; font-weight: 500;}
	.clPrimario 				{color: var(--color-primario-light); font-weight: 800;}
}
@media ( width <= 650px )		{
	.baner 						{height: 250px;
		.shadow 				{font-size: 24px;}
	}	
}


.map 							{background: white; width: 90%; max-width: 320px; padding: 12px 12px 18px 12px; border-radius: 20px; font-weight: 500; display: flex; flex-direction: column; align-items: center; position: relative; margin: -50px 0px 30px 0px;
	.icoUbi 					{background: var(--color-secundario); color: white; width: fit-content; font-size: 30px; width: 50px; height: 50px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: -36px 0px 10px 0px;}
}
@media ( width <= 650px )		{
	.map 						{width: 80%;}	
}

.plano							{border-radius: 20px; width: calc(100% - 20px); margin: 20px 0px 10px 0px;}


.rubrosWrap 					{display: flex; align-items: flex-start; justify-content: center; margin: 50px 0px 70px 0px; flex-wrap: wrap;
	.tusClientes 				{text-align: left; width: fit-content; text-wrap: auto; position: sticky; top: 90px;}
	.estan 						{}
	.rubros 					{width: 500px; text-align: left; display: flex; flex-direction: column; gap: 20px;}
	.item 						{display: flex; align-items: flex-start; gap: 3px; font-size: 28px; font-weight: 500;}
	.icoRubros 					{font-size: 22px; margin: 4px 0px 0px 0px;}
}
@media ( width <= 960px )		{
	.rubrosWrap					{
		.rubros					{width: 260px;}
	}
}
@media ( width <= 650px )		{
	.rubrosWrap					{margin: 20px 0px 70px 0px;
		.rubros					{width: 100%;}
		.tusClientes			{text-align: center; position: relative; top: auto; margin: 0px 0px 20px 0px;}
		.item					{font-size: 24px; padding: 0px 20px;}
	}
}

.btnAct 						{width: 100%; display: flex; justify-content: center;}


.imgOne							{width: calc(100% - 40px); border: 10px solid var(--color-primario); border-radius: 20px; margin: 30px 0px 18px 0px; overflow: hidden;}
@media ( width <= 650px )		{
	.imgOne 					{border: 4px solid var(--color-primario);}
}