.mapa                               {width: 100%; height: calc(100vh - 56px); align-content: flex-end; margin: 56px 0px 0px 0px;}


/* LISTADO */
.listado                            {position: fixed; z-index: 2; bottom: 20px; left: 20px; transition: .3s; background: rgba(0, 55, 26, 0.6); width: 300px; border: 2px solid var(--color-secundario); border-radius: 30px 30px 30px 0px; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); padding: 10px; max-height: 400px; overflow: auto; display: flex; flex-direction: column; gap: 16px;
    .campo1                         {position: sticky; top: 0px;}
    .campo1d                        {background: white; height: 50px; border-radius: 20px;}
    .btn2de                         {height: 50px; border-radius: 20px; width: 40px;}
    .itemList                           {color: white; padding: 0px 10px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3px; cursor: pointer; transition: .3s;
        &:hover                     {color: var(--color-secundario);}
    }
    .icoww1                         {font-size: 26px;}
    .itemInfo                       {width: 85%; margin: 6px 0px 0px;}
    .title                          {font-weight: 500; text-wrap: wrap;}
    .area                           {display: flex; font-size: 15px; text-transform: uppercase; margin: 7px 0px 0px;}
    .line                           {width: 100%; height: 1px; background: white; margin: 16px 0px 0px 0px;}
    #proyectosList                  {display: flex; flex-direction: column; gap: 16px;}
}
.listado::-webkit-scrollbar         {display: none;}
.popInfo::-webkit-scrollbar         {display: none;}

@media ( width <= 650px )           {
    .listado                        {width: calc(100% - 20px); left: 10px; border-radius: 28px; max-height: 270px;}
}



/* POP INFO */
.popInfo                            {position: fixed; z-index: 2; bottom: 20px; left: -50vh; background: rgba(255, 255, 255, 0.6); width: 300px; border: 2px solid var(--color-primario); border-radius: 30px 30px 30px 0px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 10px; max-height: 80vh; overflow: auto; display: flex; flex-direction: column;align-items: center; transition: .5s;   
    .imgWrap                        {width: 100%; height: 150px; overflow: hidden; border-radius: 20px;}
    .img-int                        {}
    .ubicacion                      {background: var(--color-primario); color: var(--color-secundario); text-align: center; width: fit-content; padding: 7px 12px 8px 12px; border-radius: 14px; border: 1px solid var(--color-secundario); margin: -17px auto 0px auto; font-size: 15px; font-weight: 500; z-index: 1; position: relative;}
    .title                          {text-align: center; font-size: 22px; font-weight: 700; color: var(--color-primario); margin: 10px 0px 20px 0px;}
    .line                           {width: 100%; height: 1px; background: var(--color-primario); margin: 20px 0px 20px 0px;}
    .itemVine                       {width: 100%; color: var(--color-primario); font-weight: 500; margin: 0px 0px 7px 0px;}
    .bld1                           {font-weight: 700;}
    .intervencion                   {width: 100%; background: var(--color-secundario); text-align: center; font-weight: 500; padding: 5px; border-radius: 10px; color: var(--color-primario); margin: 10px 0px 0px 0px;}
    .descripcion                    {margin: 20px 0px;}
    .titleDesc                      {text-transform: uppercase; font-weight: 600; font-size: 15px; margin: 0px 0px 5px 0px;}
    .wrapTxt                        {}
    .txt2                           {text-wrap: auto; font-weight: 400; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
    .btLink                         {background: white; width: 100%; margin: 10px 0px 0px 0px; padding: 14px; text-align: center; color: var(--color-primario); font-weight: 500; border: 1px solid var(--color-primario); border-radius: 21px 0px; cursor: pointer; transition: .3s; position: sticky; bottom: 0px; justify-content: center;
        &:hover                     {background: var(--color-secundario);}
    }
    .icoClose                       {background: var(--color-secundario); width: 40px; height: 40px; position: sticky; top: 0px; margin: -10px 0px -30px 236px; right: 0px; display: flex; align-items: center; justify-content: center; top: 0px; right: 0px; border-radius: 0px 18px 0px 18px; font-size: 28px; color: var(--color-primario); cursor: pointer; transition: .3s;}
    .txt2On                         {display: flex;}
    .verMas                         {font-size: 13px; font-weight: 500; color: var(--color-primario); cursor: pointer;}
    .txt2Off                        {display: none !important;}
}
.popInfoOn                          {left: 350px; transition: .5s;}


@media ( width <= 650px )           {
    .popInfo                        {bottom: 0px; border-radius: 30px 30px 0px 0px; width: 100%; left: 0px; bottom: -100vh; background: white;
        .icoClose                   {margin: -10px auto -30px auto; border-radius: 0px 0px 12px 12px;}
        .btLink                     {border-radius: 20px;}
    }
    .popInfoOn                      {left: 0px; bottom: 0px;}
}



/* POP GALLERY */
.imgSubidas                         {position: fixed; overflow: auto; padding: 120px 0px 120px 0px; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); display: flex; z-index: 10; top: 0px; left: 0px; opacity: 0; visibility: hidden; transition: .5s;
    .icoCloseGallery                {position: fixed; color: white; font-size: 40px; top: 20px; right: 20px; cursor: pointer;}
    .photosGallery                  {margin: auto; max-width: 690px; width: 90%; display: flex; flex-direction: column; gap: 50px;}
    img                             {border-radius: 40px;}
}
.imgSubidasOn                       {opacity: 1; visibility: visible; transition: .5s;}