.main           {
    h1          {font-size: 80px; font-weight: 800; color: white; text-align: center; line-height: 1; text-shadow: 0px 7px 20px rgba(0,0,0,0.4); text-wrap: balance;
    }
    h2          {color: white; font-weight: 800; font-size: 60px; line-height: 1; text-wrap: balance;
    }
}


.header         {position: fixed; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 20px 20px 0px 30px; 

    .left       {
    }
    .ecoperu    {filter: drop-shadow(0px 8px 20px rgba(0,0,0,0.6)); width: 180px;
    }
    .nav        {display: flex; color: white; align-items: center; background: rgba(0,0,0,0.4); padding: 12px 20px; border-radius: 20px; border: 1px solid var(--color-gray4); gap: 14px; box-shadow: 0px 20px 30px -10px rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    }
    .link       {font-weight: 500; transition: .3s;
        &:hover {color: var(--color-aprobado-light); transform: scale(1.06);}
        &:active{transform: scale(.96);}
    }
    .ico1a      {font-size: 27px; margin: 0px 0px 0px 0px; cursor: pointer;
    }
    .ico1b      {font-size: 28px; cursor: pointer;
    }
    .ico1c      {font-size: 40px; cursor: pointer;
    }
    .line       {width: 1px; height: 30px; display: block; background: white; margin: 0px 3px;
    }
    .icod229    {transition: .3s;
        &:hover {transform: scale(1.1); color: var(--color-aprobado-light);}
        &:active{transform: scale(.95);}
    }
    .iconAnim   {animation: iconAnim 3s infinite; transform: rotate(0deg);
    }
    .saleMob   {display: none;}
}
@keyframes iconAnim {
    0%      {transform: rotate(0deg);}
    30%     {transform: rotate(80deg);}
    55%     {transform: rotate(20deg);}
    65%     {transform: rotate(20deg);}
    85%     {transform: rotate(80deg);}
    100%    {transform: rotate(0deg);}
}


.loading 		{
	width: 100%; height: 100dvh; background: var(--color-primario); position: fixed; top: 0; left: 0;
	animation: loading .5s forwards; opacity: 0; visibility: hidden; display: none; z-index: 40;
}
@keyframes loading {
	0% {opacity: 0; visibility: hidden;} 100% {opacity: 1; visibility: visible;}
}


.navMob         {position: fixed; top: 0; left: 0; z-index: 10;
                opacity: 0; visibility: hidden; transition: .3s .3s;

    .icod203    {position: fixed; z-index: 12; cursor: pointer; color: var(--color-primario); background: white; display: flex; width: 60px; height: 60px; border-radius: 100px; right: 32px; top: 24px; justify-content: center; align-items: center; font-size: 40px; transition: .2s;     
        &:hover {transform: scale(1.1); background: var(--color-primario); color: white;}
    }
    .left       {background: white; width: 300px; height: 100dvh; z-index: 35; overflow: auto; position: fixed; display: flex; flex-direction: column; justify-content: space-between; padding: 50px 20px 20px 20px; border-radius: 0px 30px 30px 0px; box-shadow: 20px 0px 50px -20px rgba(0,0,0,0.7);
                left: -350px; transition: .4s .0s;
    }
    .top        {display: flex; flex-direction: column; gap: 10px;
    }
    .link       {color: var(--color-primario); font-weight: 600; font-size: 30px; display: flex; align-items: flex-start; width: 100%;
    }
    .icod24     {font-size: 26px; margin: 3px 0px 0px 0px;
    }
    .middle     {display: flex; flex-direction: column; gap: 10px; margin: 40px 0px 60px 0px;
    }
    .infoNav    {display: flex; align-items: flex-start;
    }
    .icof4rr    {background: var(--color-secundario); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: white; border-radius: 12px; font-size: 22px;
    }
    .data       {color: var(--color-secundario); font-weight: 500; margin: 9px 0px 0px 8px;
    }
    .bottom     {display: flex; flex-direction: column; gap: 14px;
    }
    .bt1        {height: 48px; align-items: center; font-size: 21px; padding: 0px 15px 2px 15px; border-radius: 17px; font-weight: 500;
    }
    .ico2d3t    {
    }
    .shadow     {width: 100%; height: 100vh; background: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0;
    }
    .clbt1      {background: var(--color-complement);}
    .clbt2      {background: var(--color-secundario);}

    .leftOn     {left: 0px; transition: .5s .3s;}
}
.navOn          {opacity: 1; visibility: visible; transition: .3s .0s;}





.logos          {background: var(--color-gray1); display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; padding: 170px 0px 50px 0px; gap: 40px 20px;

    .item       {display: flex; flex-wrap: wrap; align-items: center; border: 1px solid var(--color-gray2); color: var(--color-gray3); padding: 20px 20px 10px 20px; flex-direction: column; border-radius: 20px;
    }
    .title      {font-weight: 500; margin: -31px 0px 8px 0px; background: var(--color-gray1); padding: 0px 10px;
    }
    .logosInt   {display: flex; align-items: center;
    }
    .logImg     {width: 120px;
    }
}
.footer         {background: var(--color-gray1); display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 0px 120px 30px 120px;

    .line       {width: 100%; height: 1px; background: var(--color-primario); margin: 0px 0px 20px 0px;
    }
    .left       {display: flex; align-items: center; gap: 10px;
    }
    .ecoperu2   {width: 90px;
    }
    .item       {display: flex; align-items: center; color: var(--color-primario); font-weight: 600; font-size: 17px; gap: 2px;
    }
    .icod2f4    {
    }
    .right      {display: flex; gap: 10px;
    }
    .icog3      {background: var(--color-primario); color: white; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 18px; font-size: 25px; cursor: pointer; transition: .3s;
    }
}



.cabecera       {
} 
.copy1          {width: 100%; height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: 140px 0px 0px; position: sticky; top: 0px; z-index: 5; 
}
.copy2          {width: 100%; height: 310px; display: flex; align-items: flex-start; justify-content: center; padding: 140px 0px 0px 0px; position: sticky; top: 0px; z-index: 5;
}
.baner1         {width: 100%; height: 100dvh; display: flex; align-items: flex-end; justify-content: center; position: sticky; top: 0px; margin: -100dvh 0px 0px 0px; z-index: -1;
}
.bn1            {background: url("../images/coca2.jpg") center center / cover;
}
.valor          {width: 90%; max-width: 910px; color: white; text-align: center; font-size: 35px; font-weight: 500; position: sticky; top: 350px;
}
.valorTxt       {
}

.btnsBaner      {display: flex; text-align: center; gap: 20px; position: sticky; z-index: 5; top: 0; width: 100%; height: 100dvh; margin: -100dvh 0px 0px 0px; align-items: flex-end; justify-content: center; padding: 0px 0px 30px 0px;
    
    .btnSlid1   {background: gray; cursor: pointer; font-size: 22px; font-weight: 600; width: 200px; height: 78px; color: white; display: flex; align-items: center; justify-content: center; border-radius: 23px; padding: 0px 0px 2px; border: 1px solid white; box-shadow: var(--shadow1); transition: .3s;
        &:hover {background: black; transform: scale(1.04); border: 1px solid black;}
        &:active{transform: scale(.95);}
    }
    .b1         {background: var(--color-complement);}
    .b2         {background: var(--color-secundario);}
}

.cabeShadow     {width: 100%; height: 150dvh; display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 2; padding: 50px 0px 0px 0px; 
                background: linear-gradient(rgba(62, 171, 54, 0) 1%, rgba(62, 171, 54, 0.48) 15%, rgba(62, 171, 54, 0.84) 40%, rgb(62, 171, 54) 66%, rgb(62, 171, 54) 90%);
}

.info           {display: flex; text-align: center; justify-content: center; align-items: center; gap: 20px; margin: 0px 0px 170px 0px; color: white; font-weight: 500; border: 1px solid var(--color-gray4); padding: 20px 30px; border-radius: 31px; box-shadow: var(--shadow2); position: sticky; top: 370px; background: var(--color-primario);

    .item       {display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 20px; text-wrap: auto; color: white; font-weight: 600;
    }
    .icod2dd    {background: white; display: flex; color: var(--color-primario); font-size: 24px; width: 40px; height: 40px; justify-content: center; align-items: center; border-radius: 13px; margin: -40px 0px 0px;
    }
    .line       {background: white; width: 2px; height: 44px; margin: 10px 0px 0px;
    }
	.brOn 		{display: none;}
}


.exposicion     {padding: 20% 120px 10% 120px; display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between;

    .left       {width: 630px; position: sticky; bottom: 70px;
    }
    .acopio     {font-size: 30px; margin: 30px 0px 0px 0px; color: white;
    }
    .right      {width: calc(100% - 650px); display: flex; flex-direction: column; gap: 70px; padding: 45% 0px 0px 0px;
    }
    .item       {width: 100%; border: 10px solid rgba(255,255,255,0.5); height: 500px; overflow: hidden; border-radius: 0px 60px;
    }
    .actLeft    {width: 90%; border: 10px solid rgba(255,255,255,0.5); overflow: hidden; height: 300px; border-radius: 0px 60px; margin: 30px 0px 0px 0px;
    }
    .itemAct    {position: relative; border: 10px solid rgba(255,255,255,0.5); width: 100%; height: 400px; overflow: hidden; border-radius: 60px 0px;
    }
    .shadow     {width: 100%; height: 100%; display: flex; align-items: flex-end; background: linear-gradient(360deg,rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%); color: white; font-size: 60px; font-weight: 800; line-height: 1; padding: 30px; position: absolute;
    }
    .imgAct     {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;
    }
    .item2       {font-weight: 600; display: flex; align-items: flex-start; font-size: 60px; gap: 3px; color: rgba(255,255,255,0.6); padding: 0px 30px;
    }
    .icof2      {font-size: 50px; margin: 9px 0px 0px 0px;
    }
}



.ventajas       {padding: 0px 0px 0px 0px; background: var(--color-primario);

    .space1     {width: 100%; height: 44dvh;
    }
    .wrap       {padding: 130px 120px 0px 120px; background: var(--color-primario); display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;
    }
    .left       {position: sticky; top: 200px;
    }
    h2          {color: white;
    }
    .right      {width: calc(100% - 500px); display: flex; flex-direction: column; gap: 30px; padding: 45% 0px 0px 0px;
    }
    .itemImg    {width: 100%; height: 500px; border: 10px solid rgba(255,255,255,0.5); overflow: hidden; border-radius: 60px 0px;
    }
    .item       {font-weight: 800; display: flex; align-items: flex-start; font-size: 40px; gap: 3px; color: rgba(255,255,255,0.6); padding: 0px 30px;
    }
    .subtitle   {padding: 0px 30px; font-size: 45px; color: white;
    }
    .icof2      {font-size: 30px; margin: 9px 0px 0px 0px;
    }
    h1          {width: 100%; background: var(--color-primario); padding: 160px 120px 120px 120px; font-size: 60px; text-shadow: none;
    }
    .busqueda   {width: 100%; background: var(--color-gray1); padding: 0px 120px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: sticky; bottom: 0px;
    }
    .txt2       {font-weight: 700; font-size: 40px; color: var(--color-primario);
    }
    .rapidos    {display: flex; gap: 20px;
    }
    .btnrapido  {background: white; transition: .3s; cursor: pointer; color: var(--color-secundario); font-weight: 600; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 200px; height: 150px; font-size: 22px; padding: 0px 0px 20px 0px;
        &:hover {background: var(--color-secundario); color: white; height: 180px; margin: -30px 0px 0px 0px;}
        &:active{background: var(--color-secundario); color: white; height: 150px; margin: 0px 0px 0px 0px;}
    }
    .icof2k8    {font-size: 44px; margin: 0px 0px 5px;
    }
    .txt        {
    }
}


.resumen        {background: var(--color-gray1); width: 100%; height: auto; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center;

    .top        {width: 100%; height: 400px; position: relative; overflow: hidden;
    }
    .shadow     {background: var(--color-primario); width: 100%; height: 100%; position: absolute; opacity: .7;
    }
    .elemento   {width: 100%; height: 100%;
    }
    .middle     {background: var(--color-gray1); text-align: center; margin: -200px 0px 0px 0px; color: var(--color-secundario); width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border-radius: 100px; flex-direction: column; font-size: 33px; padding: 0px 0px 68px 0px; font-weight: 500; line-height: 1; position: absolute;
    }
    .title      {font-weight: 800; font-size: 40px;
    }
    .subtitle   {
    }
    .fotos      {width: 100%; height: 600px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 20px;
    }
    .fotos1     {display: flex; width: fit-content; gap: 20px; height: 30%; position: relative;
    }
    .fotoItem   {width: 300px; height: 100%; border-radius: 40px 0px; overflow: hidden;
    }
    .fotos2     {display: flex; width: fit-content; gap: 20px; height: 30%; position: relative;
    }
	
	.fot1Anim 	{animation: fot1Anim 20s infinite linear; transform: translateX(0px)}
	.fot2Anim 	{animation: fot2Anim 20s infinite linear; transform: translateX(-1800px)}
}

@keyframes fot1Anim {
	0% {transform: translateX(0px)}
	50% {transform: translateX(-1800px)}
	100% {transform: translateX(0px);}
}
@keyframes fot2Anim {
	0% {transform: translateX(-1800px)}
	50% {transform: translateX(0px)}
	100% {transform: translateX(-1800px);}
}


.lugar          {background: var(--color-gray1);
    .baner      {width: 100%; height: 380px; overflow: hidden; position: relative;}
    .shadow     {background: var(--color-primario); width: 100%; height: 100%; opacity: .7; position: absolute; overflow: hidden;}
    .banerImg   {width: 100%; height: 100%;}
    .titleWrap  {width: 100%; display: flex; justify-content: center; font-weight: 800; font-size: 70px; color: white; margin: -120px 0px -60px -15px; position: relative; gap: 250px;}
    .villa      {width: 230px; height: 230px; border: 6px solid var(--color-secundario); border-radius: 140px; display: flex; align-items: center; justify-content: center; padding: 30px; background: white; margin: 0px auto 0px auto; position: relative; box-shadow: 0px 8px 60px -14px rgba(0,0,0,0.4);}
    .btnsLugar  {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; align-items: flex-start; gap: 40px; margin: 40px 0px 0px 0px;}
    .lugarBtn   {background: white; cursor: pointer; color: var(--color-secundario); border: 5px solid white; font-size: 30px; width: 250px; height: 170px; display: flex; flex-direction: column; justify-content: center; border-radius: 40px; gap: 10px; font-weight: 500; cursor: pointer; transition: .3s; 
        &:hover {border: 5px solid var(--color-secundario); box-shadow: 0px 21px 50px -20px rgba(0,0,0,0.3); transform: scale(1.03);}
        &:active{transform: scale(1);}
    }
    .icod2l0    {color: var(--color-gray3); font-size: 50px;}
    .topLugar   {margin: -50px 0px 0px 0px;}
    .fichaWrap  {width: 480px; background: white; margin: 60px auto 0px auto; padding: 32px 32px 200px 32px; border-radius: 40px; display: flex; flex-wrap: wrap; align-items: flex-start; color: var(--color-primario); justify-content: space-between; gap: 20px 0px; border: 1px solid var(--color-primario);}
    .fichaTitle {width: 100%; text-align: center; font-size: 30px; font-weight: 600; color: var(--color-primario); margin: 0px 0px 20px 0px;}
    .fichaItem  {width: 48%;}
    .subtitle   {display: flex; align-items: flex-start; font-weight: 700; font-size: 20px;}
    .icodk11    {font-size: 17px; margin: 3px 0px 0px 0px;}
    .fichaTxt   {padding: 7px 16px;}
    .stand      {width: 380px; margin: -190px auto 0px auto;}
    .standHome  {width: 440px; margin: -190px auto 0px auto;}
    .expoHome   {width: 420px; margin: auto; text-align: center;}
    h2          {width: 100%; text-align: center; color: var(--color-primario);}
    .standTxt   {font-size: 30px; font-weight: 500; margin: 20px 0px 40px 0px;}
    .bt1        {height: 50px; font-size: 23px; align-items: center; padding: 0px 18px; font-weight: 500; background: var(--color-secundario); border-radius: 18px;}
}



.org            {
    .video      {width: 100%; height: 100dvh; overflow: hidden; position: sticky; top: 0px; z-index: -1;}
    .valor      {font-size: 45px;}
}



.stand          {width: 100%; padding: 0px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; margin: 120px 0px 0px 0px;
    .standImg   {width: 390px; margin: 0px -160px 0px 0px; position: relative; z-index: 2;}
    .item       {background: white; padding: 30px 40px; border-radius: 40px; width: 500px; margin: 80% -200px 130px 0px; position: relative; border: var(--color-gray2); box-shadow: 0px 30px 50px -25px rgba(0,0,0,0.3); position: sticky; z-index: 1;}
    .title      {font-weight: 800; color: var(--color-primario); font-size: 40px; line-height: 1;}
    .vineta     {display: flex; margin: 12px 0px 0px 96px; align-items: flex-start; font-size: 22px;}
    .icodtf     {font-size: 18px; margin: 5px 0px 0px 0px;}
    .lateral    {width: 700px; height: 100dvh; position: sticky; bottom: 0px;}
    .bt1        {padding: 10px 16px 13px 100px; font-size: 22px; margin: 20px 0px 0px 0px; background: var(--color-secundario);}
}



.plano          {width: 100%; height: 400px; background: var(--color-gray1);
    .img2       {height: 100%; position: sticky; top: 0; border-radius: 0px 0px 70px 70px;}
    .title      {background: var(--color-primario); padding: 0px 20px; display: flex; color: white; position: sticky; bottom: 0px; width: fit-content; height: 90px; justify-content: center; align-items: center; font-size: 30px; font-weight: 700; z-index: 7; margin: 0px auto 0px auto;}
}



.modalidad      {width: 100%; padding: 50px 120px 80px 120px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
    h2          {width: 100%; text-align: center; margin: 0px 0px 80px 0px;}
    .item       {background: white; width: 23%; padding: 20px 20px 30px 20px; border-radius: 27px; box-shadow: var(--shadow2); display: flex; flex-direction: column; align-items: center; text-align: center;}
    .icod2d8    {background: white; color: var(--color-secundario); width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 10px 50px -20px rgba(0,0,0,0.5); border-radius: 100px; margin: -70px 0px 24px 0px; font-size: 50px;}
    .txt        {font-size: 25px;}
    .btnWrap    {width: 100%;}
    .bt1        {width: 260px; height: 55px; align-items: center; font-size: 25px; margin: 90px auto -103px auto; background: var(--color-secundario); font-weight: 600; border-radius: 20px;}
}


.mapa           {width: 100%; height: 70dvh; overflow: hidden; border-radius: 0px 0px 40px 40px; margin: 80px 0px 0px 0px;
}
.apps           {display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 50px 40px; padding: 0px 120px 80px 120px; border-radius: 0px 0px 50px 50px; margin: 0px 0px -50px 0px; position: relative; z-index: 2; background: var(--color-primario);
    .btMAp      {width: 100px; margin: -60px 0px 0px 0px; position: relative; transition: .3s;
		&:hover {transform: scale(1.1);}
		&:active{transform: scale(.97);}
    }
    h2          {width: 100%; text-align: center;
    }
}


.album          {width: 100%; min-height: 100dvh; background: var(--color-gray1); display: flex; align-items: flex-start; align-content: flex-start; justify-content: center; flex-wrap: wrap; padding: 40px; box-sizing: border-box; gap: 30px 30px;
    .item       {width: 340px; transition: .3s; height: 240px; overflow: hidden; border-radius: 30px; position: relative; cursor: pointer;
        &:hover {transform: scale(1.08);}
        &:active{transform: scale(.95);}
    }
    .shadow     {position: absolute; width: 100%; transition: .3s; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; padding: 25px; box-sizing: border-box; color: white; font-size: 30px; font-weight: 800;
    }
}


.albumPop       {background: rgba(255,255,255,0.9); padding: 50px 120px 100px 120px; z-index: 20; position: fixed; top: 0; left: 0; width: 100%; overflow: auto; height: 100dvh;
                scroll-snap-type: y mandatory;
    .galleryOn  {
    }
    .ico-dd02   {color: var(--color-primario); font-size: 60px; position: fixed; top: 20px; right: 20px;
    }
    .gallery-int{width: 100%; height: 86dvh; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 0px 70px; margin: 0px 0px 70px 0px;
                position: sticky; top: 10px; scroll-snap-align: start; 
    }
	.copy2 		{background: var(--color-primario); width: fit-content; position: fixed; left: 0; right: 0; top: 0; margin: auto; padding: 30px 20px 20px 20px; height: auto;
	}
	h1 			{font-size: 30px !important;
	}
}
.a2024 			{opacity: 0; visibility: hidden; transition: .3s .0s}
.a2024On 		{opacity: 1; visibility: visible; transition: .6s .0s}

.infoData 		{position: fixed; transition: .5s .2s; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100dvh; transform: translateY(-110dvh); padding: 40px; background: rgba(0,0,0,0.6); z-index: 30; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);

	.wrap 		{width: 800px; color: white; text-align: center; opacity: 0; margin: 90px 0px 0px 0px; transition: .2s .0s;}
	.ico23rd    {position: fixed; z-index: 32; cursor: pointer; color: var(--color-primario); background: white; display: flex; width: 60px; height: 60px; border-radius: 100px; right: 32px; top: 24px; justify-content: center; align-items: center; font-size: 40px; transition: .2s;     
        &:hover {transform: scale(1.1); background: var(--color-primario); color: white;}
    }
	.title 		{font-size: 30px; font-weight: 700; animation: title 2s infinite;}
	.txt 		{font-size: 55px; margin: 20px 0px 30px 0px; line-height: 1.2;}
	.btns 		{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
	.bt1 		{background: var(--color-secundario); font-weight: 500; align-items: center; height: 56px; border-radius: 16px; width: 30%; text-align: left;}
	strong 		{font-weight: 700;}
	
	.wrapOn 	{opacity: 1; margin: 0px 0px 0px 0px; transition: .3s .4s;}
}
.infoOn 		{transform: translateY(0dvh); transition: .5s .0s;}
@keyframes title{
	0% {transform: scale(1);} 50% {transform: scale(1.1); color: var(--color-secundario);} 100% {transform: scale(1);}
}


.iluxion 		{display: flex;  width: 100%; justify-content: center;  background: var(--color-primario);  padding: 14px 10px 20px 10px;  border-radius: 22px 22px 0px 0px;  margin: -15px 0px 0px 0px;   
	.link 		{display: flex;  align-items: center;  font-size: 18px;  gap: 6px;  color: white;
	&:hover 	{color: var(--color-aprobado-light);}
	} 
	.icogb33 	{}
}


/*FORMULARIO*/
.form     		{width: 85%;  max-width: 550px;  display: flex;  flex-wrap: wrap;  gap: 50px; margin: auto;
	.step 		{display: flex;  flex-wrap: wrap;  align-items: flex-start;  justify-content: space-between;  text-align: center;  width: 100%;  gap: 20px 0px;}
	.item1 		{cursor: pointer; border: 1px solid var(--color-gray4); transition: .3s;  width: 48.5%;  display: flex;  flex-direction: column;  gap: 10px;  height: 160px;  justify-content: center;  font-size: 22px;  text-transform: uppercase;  border-radius: 20px;  font-weight: 600;
        &:hover {transform: scale(1.03); background: var(--color-primario); color: white; box-shadow: var(--shadow1); border: 1px solid white;}
        &:active{transform: scale(.98);}
    }
	.icoff2 	{font-size: 40px;}
	.title 		{font-size: 20px;  width: 100%;  text-transform: uppercase;  font-weight: 700;}
	.medida 	{width: 31%;  border: 1px solid var(--color-gray4);  padding: 12px;  border-radius: 12px; font-weight: 500; transition: .3s; cursor: pointer;
        &:hover {transform: scale(1.03); background: var(--color-primario); color: white; box-shadow: var(--shadow1); border: 1px solid white;}
        &:active{transform: scale(.98);}
    }
    .viewPlano  {font-size: 15px; text-transform: uppercase; font-weight: 700; color: var(--color-secundario); cursor: pointer;}
	.bld 		{font-weight: 700; font-size: 26px;}
	.campo1 	{width: 48.5%; text-align: left;}
	.campoText 	{width: 100%; text-align: left;}
	.bt1 		{box-sizing: border-box;  height: 50px;  align-items: center;  font-size: 22px;  border-radius: 12px; text-align: left; position: sticky; bottom: 20px; background: var(--color-secundario);}  
	.ico2d3t 	{}

    .hovCont    {transform: scale(1.03); background: var(--color-primario); color: white; box-shadow: var(--shadow1); border: 1px solid white;}
}


.popPlano       {opacity: 0; visibility: hidden; transition: .3s 0s; position: fixed; width: 100%; top: 0px; left: 0px; background: rgba(255,255,255,0.8); z-index: 15; display: flex; justify-content: center; align-items: center; align-content: center; overflow: auto; height: 100dvh;
    .ico-dd02   {color: white; font-size: 40px; position: fixed; top: 20px; right: 20px; background: var(--color-primario); border-radius: 100px; padding: 8px; cursor: pointer;}
}
.planoOn   		{opacity: 1; visibility: visible; transition: .3s 0s;}
.ctro           {width: 100%; text-align: center;}





















@media ( width <= 1500px ) {
    .stand          {
        .lateral    {width: 610px;}
    }
    .main           {
        h2          {font-size: 45px;}
        h1          {font-size: 68px;}
    }
    .exposicion     {
        .left       {width: 420px;}
        .acopio     {font-size: 25px;}
        .right      {width: calc(100% - 470px);}
        .item       {height: 420px;}
        .actLeft    {width: 100%;}
    }
    .ventajas       {
        .right      {width: calc(100% - 350px);}
        .itemImg    {height: 350px;}

    }
}




@media ( width <= 1425px ) {
    .modalidad      {
        .txt        {font-size: 22px;}
    }
    .ventajas       {
        .txt2       {font-size: 30px; width: 180px;}
        .btnrapido  {width: 130px; height: 121px; font-size: 17px; padding: 0px 0px 13px 0px;
            &:hover {height: 150px;}
        }
        .icof2k8    {font-size: 36px;}

    }
}



@media ( width <= 1385px ) {
    .stand          {
        .item       {margin: 80% -390px 130px 0px;}
    }
    .exposicion     {
        .right      {gap: 40px;}
        .item2      {padding: 0px 0px; font-size: 45px;}
        .icof2      {font-size: 32px;}
    }
}


 

@media ( width <= 1300px ) {
    .modalidad      {
        h2          {margin: 0px 0px 0px 0px;}
        .item       {width: 48.5%; margin: 80px 0px 0px 0px;}
    }
    .sale1300       {display: none;}
    .ventajas       {
        h1          {font-size: 48px;}
        .busqueda   {padding: 0px 40px;}
        .wrap       {padding: 0px 40px;}
    }
    .apps           {
        .btMAp      {width: 70px; margin: -40px 0px 0px 0px;}
    }
    .plano          {
        .title      {width: 250px; height: 70px; font-size: 40px;}
    }
    .exposicion     {padding: 20% 40px 10% 40px;}
    .footer         {padding: 0px 40px 30px 40px;}
}






@media ( width <= 1090px ) {
    .main           {
        h1          {padding: 0px 40px; font-size: 60px;}
    }
    .valor          {top: 400px;}
    .footer         {
        .left       {margin: 0px 0px 30px 0px; width: 100%;}
        .right      {width: 100%; justify-content: space-between;}
        .icog3      {width: 49%;}
    }
    .ventajas       {
        h1          {padding: 160px 40px 120px 40px;}
        .space1     {height: 20dvh;}
        .left       {position: initial; top: initial; width: 100%; text-align: center;}
        .right      {width: 100%; padding: 40px 0px 0px 0px;}
    }
    .exposicion     {
        .left       {width: 100%; text-align: center; position: relative; bottom: initial;}
        .right      {width: 100%; padding: 50px 0px 0px 0px;}
    }
    .lugar          {
        .lugarBtn   {width: 190px; font-size: 24px;}
        .btnsLugar  {gap: 20px;}
    }
    .stand          {justify-content: center;
        .item       {margin: -150px 0px 0px 0px; order: 2; padding: 30px 30px 210px 30px; width: 90%; max-width: 500px;}
        .lateral    {width: 100%; order: 1; position: relative;}
        .standImg   {margin: -170px 40px 50px 40px; order: 3; width: 90%; max-width: 500px;}
        .vineta     {margin: 22px 0px 0px 30px;}
        .bt1        {padding: 10px 16px 13px 16px;}
    }
    .btnsBaner      {padding: 0px 40px 30px 40px;}

    .albumPop       {padding: 50px 20px 100px 20px;
        .ico-dd02 	{ font-size: 40px; top: 10px; right: 10px;}
        .copy2 		{ width: 140px; padding: 20px 0px 14px 0px;}
    }
    .header         {padding: 20px 30px 20px 30px; background: var(--color-primario); border-radius: 0px 0px 30px 30px; align-items: center; box-shadow: 0px 20px 50px -30px rgba(0,0,0,0.6);
        .ecoperu    {filter: none; width: 140px;}
        .nav        {background: none; padding: 0px; border: 0px; box-shadow: none;}
        .link       {display: none;}
        .ico1a      {font-size: 32px;}
        .ico1b      {font-size: 34px;}
        .ico1c      {font-size: 44px;}
        .nav        {gap: 10px;}
        .saleMob    {display: flex;}
    }
    .sale1090       {display: none !important;}
}







@media ( width <= 860px ) {
    .footer         {
        .left       {display: flex; flex-wrap: wrap;}
        .ecoperu2   {margin: 0px 0px 11px 0px;}
        .item       {width: 100%;}
    }
    .ventajas       {
        .btnrapido  {width: 75px; height: 110px; font-size: 14px; padding: 0px 0px 3px 0px; text-align: center;}
        .icof2k8    {font-size: 30px;}

    }
    .modalidad      {
        .item       {width: 400px; margin: 90px auto 0px auto;}
    }
    .album          {justify-content: space-between; padding: 40px; box-sizing: border-box; gap: 30px 0px;
        .item       {width: 48%; height: 240px;}
    }

    .infoData 		{
        .wrap 		{width: 550px;}	
        .txt 		{font-size: 35px;}
        .ico23rd    {width: 50px; height: 50px; right: 19px; font-size: 32px;}
    }
    .resumen 		{
        .fotoItem   {width: 220px;}
        .fotos 		{height: 500px;}
    }
}




@media ( width <= 660px ) {

    .main           {
        h2          {font-size: 36px;}
        h1          {font-size: 40px;}
    }
    .apps           {gap: 20px 40px; padding: 0px 40px 40px 40px;}
    .valor          {top: 370px; font-size: 26px; width: 85%;}
    .sale860        {display: none;}
    .modalidad      {padding: 50px 40px 80px 40px;
        .item       {width: 290px;}
    }
    .logos          {
        .item       {width: 80%;}
        .logosInt   {flex-wrap: wrap; justify-content: center;}
    }
    .exposicion     {
        .actLeft    {height: 220px; border-radius: 0px 30px;}
        .right      {gap: 30px;}
        .item2      {font-size: 28px;}
        .icof2      {font-size: 26px; margin: 4px 0px 0px 0px;}
        .item       {height: 230px; border-radius: 0px 40px;}
        .itemAct    {border-radius: 40px 0px;}
        .shadow     {font-size: 35px; padding: 20px;}
    }
    .org            {
        .valor      {font-size: 34px;}
    }
    .btnsBaner      {padding: 0px 20px 30px 20px; gap: 0px; justify-content: space-between;
        .btnSlid1   {font-size: 18px; width: 48%; height: 64px;}
    }
    .header         {
        .ecoperu    {width: 120px;}
        .ico1a      {font-size: 26px;}
        .line       {margin: 0px 1px;}
        .ico1b      {font-size: 30px;}
        .ico1c      {font-size: 40px;}
    }
    .info           {width: 90%; justify-content: space-between; gap: 0px; padding: 20px 10px; border-radius: 25px;
        .item       {font-size: 16px; width: 90px; font-size: 15px;}   
        .line 		{width: 1px;}
        .brOn 		{display: block;}
    }
    .ventajas       {
        .txt2       {display: none;}
        .busqueda   {padding: 0px 0px; justify-content: center;}
        .rapidos    {display: flex; gap: 0px; width: 100%; padding: 0px 10px; background: white;}
        .btnrapido  {width: 25%;}
        .itemImg    {height: 200px; border-radius: 30px 0px;}
        .subtitle   {padding: 0px 0px; font-size: 30px; font-weight: 500;}
        .item       {font-size: 30px; padding: 0px 0px;}
        .btnrapido  {
            &:hover {height: 140px;}
        }
    }
    .resumen        {
        .fotoItem   {width: 110px; border-radius: 30px 0px;}
        .fot1Anim 	{animation: fot1Anim 20s infinite linear; transform: translateX(0px)}
        .fot2Anim 	{animation: fot2Anim 20s infinite linear; transform: translateX(-1000px)}
        .middle     {margin: -120px}
    }

    @keyframes fot1Anim {
        0% {transform: translateX(0px)}
        50% {transform: translateX(-1000px)}
        100% {transform: translateX(0px);}
    }
    @keyframes fot2Anim {
        0% {transform: translateX(-1000px)}
        50% {transform: translateX(0px)}
        100% {transform: translateX(-1000px);}
    }
        

    .lugar          {
        .titleWrap  {font-size: 50px; margin: -200px 0px 30px -1px; gap: 20px;}
        .lugarBtn   {width: 290px;}
        .topLugar   {margin: 0px 0px 0px 0px;}
        .fichaWrap  {width: 90%; padding: 32px 12px 200px 22px;}
        .standHome  {width: 88%;}
        .expoHome   {width: 90%;}
        .villa      {width: 180px; height: 180px;}
    }
    .sale660        {display: none;}
    .stand          {
        .item       {width: 85%;}
        .title      {font-size: 34px;}
        .vineta     {margin: 22px 0px 0px 0px; font-size: 20px;}
        .icodtf     {font-size: 15px; margin: 4px 0px 0px 0px;}
    }

    .navMob         {
        .left       {width: 260px; padding: 25px 10px 13px 10px; border-radius: 0px 20px 20px 0px;}
        .link       {font-size: 26px;}
        .icod24     {font-size: 20px; margin: 4px 0px 0px 0px;}
        .icod203    {width: 50px; height: 50px; right: 19px; font-size: 32px;}
    }
    .album          {
        .item       {width: 100%; height: 240px;}
    }
    .infoData 		{padding: 30px 0px; 
        
        .wrap 		{width: 320px;}	
        .title 		{font-size: 25px;}
        .txt 		{font-size: 24px;}
        .btns 		{gap: 16px;}
        .bt1 		{width: 100%; height: 44px;}
    }
    .contactos 		{width: 100%;
        .item1 		{width: 100%;}
        .medida 	{width: 48.5%;}
        .campo1 	{width: 100%;}
    }
}



/*ANIMACIONES*/	
.copyAnim 		{
	animation: copyAnim 3s forwards; animation-delay: .5s;
	opacity: 0; transform: translateY(100px);
}

@keyframes copyAnim {
	0% {opacity: 0; transform: translateY(100px);} 
	25% {opacity: 1; transform: translateY(0px);} 
	85% {opacity: 1; transform: translateY(0px);} 
	100% {opacity: .5; transform: translateY(0px);}
}

.bnAnim 		{
	animation: bnAnim .6s forwards; animation-delay: 3s;
	opacity: 0;
}

@keyframes bnAnim {
	0% {opacity: 0;} 
	100% {opacity: 1;}
}