strong                                          {font-weight: 700;}

/* SCROLLBAR */
.riandeAeropuerto {
    --riandeUrban1: #9C8275;
    --riandeUrban2: #5D4C44;
    --riandeUrban3: #9C735F;
}

.riandeUrban                                    {background: black;
    .bt1                                        {border-radius: 0px;}
    .campo1a                                    {border-radius: 0px;}
    .buscar                                     {border-radius: 0px;}

    &::-webkit-scrollbar                        {width: 12px; transition: .2s; overflow: auto; background: initial;}
    &::-webkit-scrollbar-track                  {background: var(--riandeUrban2); margin: 80px 0px; border-radius: 20px; transition: .2s; }
    &::-webkit-scrollbar-thumb                  {transition: .2s; background: rgba(0, 0, 0, 0.5); border-radius: 20px; }
}

.riandeAeropuerto                               {background: black;
    .bt1                                        {border-radius: 0px;}
    .campo1a                                    {border-radius: 0px;}
    .buscar                                     {border-radius: 0px;}

    &::-webkit-scrollbar                        {width: 12px; transition: .2s; overflow: auto; background: initial;}
    &::-webkit-scrollbar-track                  {background: var(--riandeUrban2); margin: 80px 0px; border-radius: 20px; transition: .2s; }
    &::-webkit-scrollbar-thumb                  {transition: .2s; background: rgba(0, 0, 0, 0.5); border-radius: 20px; }
}

.title1                             {color: var(--riandeUrban3); font-size: 40px; font-weight: 700;}


/* MENU NAV */
.nav                                {background: rgba(0, 0, 0, 0.6); position: fixed; top: 0px; left: 0px; width: 100%; height: 0vh; transition: .6s 0s; display: flex; align-items: flex-start; overflow: auto; justify-content: center; z-index: 20; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    .icoClose                       {font-size: 40px; cursor: pointer; color: white; position: fixed; top: 20px; right: 20px;}

    .navInt                         {display: flex; flex-direction: column; opacity: 0; align-items: center; gap: 14px; padding: 70px 0px; transition: .7s .0s; margin: 100vh 0px 0px 0px;}
    .link                           {color: white; font-size: 24px; font-weight: 300; transition: .2s;
        &:hover                     {color: var(--riandeUrban3);}
    }
    .line                           {width: 50px; height: 1px; background: white;}
    .btns                           {display: flex; gap: 20px; margin: 30px 0px 0px 0px;}
    .btnsAct                        {color: white; display: flex; flex-direction: column; align-items: center; gap: 7px; transition: .2s;
        &:hover                     {color: var(--riandeUrban3);}
    }
    .icoHeader                      {font-size: 30px;}

    .navIntOn                       {margin: 0vh 0px 0px 0px; transition: .4s .2s; opacity: 1;}
}
.navOn                              {height: 100vh; transition: .4s;}


/* HEADER */
.header                             {display: flex; align-items: flex-start; z-index: 10; justify-content: space-between; position: fixed; top: 0px; width: 100%; left: 0px;
    .logo                           {width: 100px; transition: .3s; background: white; height: 120px; padding: 3px; border-radius: 0px 0px 20px 0px; box-shadow: 8px 12px 40px -18px rgba(0, 0, 0, 0.5);}
    .right                          {display: flex;} 
    .bt1                            {width: fit-content; font-size: 15px; gap: 4px; height: 50px; padding: 0px 16px 0px 16px;
        &:nth-of-type(1)            {background: white; color: var(--riandeUrban2); border-radius: 0px 0px 0px 18px;}
        &:nth-of-type(2)            {background: var(--riandeUrban3);}
        &:nth-of-type(3)            {background: var(--riandeUrban1);}
        &:nth-of-type(4)            {background: var(--riandeUrban2);}

        &:hover                     {background: black; color: white; transform: scale(1.08);}
        &:active                    {transform: scale(.98);}
    }
    .icoHeader                      {font-size: 16px;}
    .icoHeader2                     {font-size: 26px;}
    .txtHeader                      {padding: 2px 0px 0px 0px;}
    .logoDown                       {width: 60px !important; height: 70px !important; border-radius: 0px 0px 14px 0px; transition: .3s;}
}
@media ( width <= 650px )           {
    .header                         {
        .icoHeader                  {font-size: 24px;}
        .icoHeader2                 {font-size: 30px;}
        .saleHeader650              {display: none;}
        .logo                       {width: 80px; height: 90px;}
    }
}
@media ( width <= 380px )           {
    .header                         {
        .icoHeader                  {font-size: 18px;}
        .icoHeader2                 {font-size: 28px;}
        .bt1                        {height: 46px; padding: 0px 14px 0px 14px;}
    }
} 


/* BACKGROUND */
.bg                                 {width: 100%; height: 100vh; position: fixed; top: 0px; z-index: -2;
    .shadow                         {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute;}
    .shadow1                        {width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: flex-end; padding: 0px 0px 280px 0px; background: linear-gradient(0deg,rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.54) 40%, rgba(0, 0, 0, 0) 80%);}
    .wrap                           {display: flex; flex-direction: column; align-items: center; gap: 10px;}
    .label                          {background: black; color: white; text-transform: uppercase; font-size: 16px; padding: 7px 12px;}
    h1                              {font-weight: 800; font-size: 40px; color: white;}
}
.icoDown                        {color: white; font-size: 26px; position: absolute; bottom: 170px; margin: 0px 0px 20px 0px; animation: icoDown 1s infinite;}

@keyframes icoDown                  {
    0%                              {margin: 0px 0px 20px 0px;}    
    50%                              {margin: 0px 0px 0px 0px;}    
    100%                              {margin: 0px 0px 20px 0px;}    
}
.bgCopy                             {width: 100%; height: 100vh; padding: 0px 0px 150px 0px; display: flex; align-items: flex-end; justify-content: center;
    h1                              {color: white; font-size: 40px; width: 700px; text-align: center;}
}
@media ( width <= 750px )           {
    .bgCopy                         {padding: 0px 0px 210px 0px;
        h1                          {font-size: 30px; padding: 0px 30px;}
    }
}
@media ( width <= 650px )           {
    .bg                             {
        h1                          {font-size: 30px; padding: 0px 20px;}
        .label                      {font-size: 14px;}
    }
}
@media ( width <= 380px )           {
    .bgCopy                         {
        h1                          {font-size: 22px; padding: 0px 10px;}
    }
}



/* BUSCADOR HOME */
.reservaHome                        {background: var(--riandeUrban3); bottom: 20px; width: 520px; padding: 8px; position: fixed; display: flex; left: 0px; right: 0px; justify-content: center; flex-wrap: wrap; margin: 0px auto 0px auto; z-index: 5;
    .title                          {padding: 6px 10px 8px 10px; margin: -23px 0px 12px 0px; background: black; font-size: 16px; color: white; width: fit-content; }
    .reserva                        {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
    .item1                          {width: 160px; display: flex; flex-direction: column; gap: 5px;}
    .itemTxt                        {font-size: 14px; width: 100%; text-align: left; color: white; padding: 0px 0px 0px 3px;}
    .item2                          {width: 70px; display: flex; flex-direction: column; gap: 5px;}
    .btn                            {background: black; color: white; height: 40px; padding: 0px 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s;
        &:hover                     {box-shadow: 0px 14px 20px -3px rgba(0, 0, 0, 0.7); transform: scale(1.01);}
        &:active                    {transform: scale(.96);}
    }
}
@media ( width <= 750px )           {
    .reservaHome                    {width: 100%; bottom: 0px; padding: 8px 18px 20px 18px;
        .reserva                    {gap: 4px 0px;}
        .btn                        {height: 30px; width: 100%;}
        .item1                      {width: 40%;}
        .item2                      {width: 18%;}
    }
}
@media ( width <= 380px )           {
    .reservaHome                    {
        .campo1a                    {height: 30px;}
        .buscarWrap                 {height: 30px;}
        .buscar                     {height: 30px;}
        
        .itemTxt                    {font-size: 11px;}
    }
}





/* ACCESOS DIRECTOS */
.directos                           {padding: 0px 0px 120px 0px; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0) 110%);
    .wrapDirectos                   {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
    .titleWrap                      {width: 100%;  position: sticky; top: 0px;}
    h1                              {color: white; font-size: 40px; width: 700px; text-align: center; margin: 0px auto 0px auto; padding: calc(100vh - 320px) 0px 0px 0px;}
    .directosWrap                   {width: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%); z-index: 1; display: flex; justify-content: center; gap: 20px; align-items: flex-start; margin: 60vh 0px 0px 0px; padding: 50px 0px 140px 0px;}
    .item                           {width: 18%; height: 400px; display: flex; z-index: 1; flex-direction: column; color: white; text-align: center; gap: 8px; cursor: pointer; position: sticky; top: 50px; transition: .2s;
        &:nth-of-type(1)            {margin: 400px 0px 0px 0px;}
        &:nth-of-type(2)            {margin: 200px 0px 0px 0px;}
        &:nth-of-type(3)            {margin: }
        &:nth-of-type(4)            {margin: 200px 0px 0px 0px;}
        &:nth-of-type(5)            {margin: 400px 0px 0px 0px;}
        
        &:hover img                 {transform: scale(1.03);}
        &:active img                {transform: scale(.98);}
        &:hover .title              {background: linear-gradient(0deg,rgb(1, 57, 70) 18%, var(--riandeUrban2) 98%);}
    }
    .title                          {height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 18%, var(--riandeUrban2) 98%); transition: .2s;}
}
@media ( width <= 1400px )          {
    .directos                       {
        .item                       {height: 300px;}
        h1                          {width: 500px; font-size: 34px;}
    }
}
@media ( width <= 960px )           {
    .directos                       {
        .directosWrap               {flex-wrap: wrap; gap: 26px 0px;}
        .item                       {width: 48%;
            &:nth-of-type(1)        {margin: 0px 0px 0px 0px;}
            &:nth-of-type(2)        {margin: 100px 0px 0px 0px;}
            &:nth-of-type(3)        {margin: -100px 0px 0px 0px;}
            &:nth-of-type(4)        {margin: 0px 0px 0px 0px;}
            &:nth-of-type(5)        {margin: -100px 0px 0px 0px;}
        }
        .titleWrap                  {padding: 0px 0px 0px 0px;}
    }
}
@media ( width <= 750px )           {
    .directos                       {background: linear-gradient(0deg,rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 110%);
        .directosWrap               {gap: 70px 0px;}
        .img-int                    {height: calc(100% - 50px);}
        .item                       {width: 100%;
            &:nth-of-type(1)        {margin: 0px 0px 0px 0px;}
            &:nth-of-type(2)        {margin: 0px 0px 0px 0px;}
            &:nth-of-type(3)        {margin: 0px 0px 0px 0px;}
            &:nth-of-type(4)        {margin: 0px 0px 0px 0px;}
            &:nth-of-type(5)        {margin: 0px 0px 0px 0px;}
        }
        h1                          {font-size: 30px; padding: calc(100vh - 320px) 0px 0px 0px; width: 100%;}
    }
}
@media ( width <= 750px )           {
    .directos                       {
        h1                          {font-size: 27px;}
    }
}



/* HABITACIONES HOME */
.bg2                                {width: 100%; height: 100vh; background: black; position: absolute;}
.roomHome                           {width: 100%; height: 100vh; color: white; mask-image: linear-gradient(to bottom, transparent, black 40%, black 60%, transparent);
    .shadow                         {width: 100%; height: 100%; position: absolute; display: flex; justify-content: flex-end; flex-direction: column; align-items: center; padding: 0px 0px 180px 0px;}
    .title                          {font-weight: 800; font-size: 40px; width: 300px; text-align: center; position: sticky; bottom: 240px; margin: 0px 0px 10px 0px;}
    .bt1                            {width: fit-content; position: relative; z-index: 5;}
}
@media ( width <= 380px )           {
    .roomHome                       {
        .title                      {font-size: 30px;}
    }
}



/* TRABAJAR HOME */
.trabajar                           {width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: var(--riandeUrban1); mask-image: linear-gradient(to bottom, transparent, black 40%, black 70%, transparent);
    .txt                            {position: relative; z-index: 1; position: absolute; width: 1080px; font-weight: 300; max-width: 88%; text-align: center; font-size: 46px; line-height: 1.2;}
    .encantaTrab                    {text-align: center; width: 90%; max-width: 620px;}
    .txt1                           {font-weight: 800; font-size: 50px;}
    .line                           {display: block; width: 40px; height: 2px; background: var(--riandeUrban1); margin: 20px auto 20px auto;}
    .txt2                           {font-size: 30px; font-weight: 300;}

}
@media ( width <= 1100px )          {
    .trabajar                       {
        .txt                        {font-size: 32px;}
    }
}
@media ( width <= 650px )           {
    .trabajar                       {
        .txt                        {font-size: 26px;}
        .txt1                       {font-size: 28px; text-wrap: balance;}
        .txt2                       {font-size: 20px; text-wrap: balance;}
    }
}



/* CARRUSEL HOME */
.title1                             {background: black; text-align: center;}
.uxHome                             {background: black; padding: 0px 0px 40px 0px; display: flex; align-items: center; justify-content: center; overflow: auto;
    &::-webkit-scrollbar            {height: 14px;}
    &::-webkit-scrollbar-track      {background: var(--riandeUrban3); margin: 0px 300px; border-radius: 20px;}
    &::-webkit-scrollbar-thumb      {background: var(--black08); border: 2px solid var(--riandeUrban3); border-radius: 20px;}

    .cl-normal                      {display: flex; align-items: flex-start; justify-content: center; margin: 30px auto 0px auto; gap: 22px; width: fit-content; padding: 0px 80px;}
    .btn                            {width: 300px; height: 380px; overflow: hidden; position: relative; display: flex; justify-content: center;}
    .img-int                        {}
    .title                          {background: rgba(0, 0, 0, 0.5); color: white; position: absolute; bottom: 15px; width: calc(100% - 30px); text-align: center; padding: 10px 0px 12px 0px; font-weight: 700; font-size: 20px;}
}
@media ( width <= 380px )           {
    .uxHome                         {
        .btn                        {width: 250px;}
    }
}



/* NOSOTROS HOME */
.nosotrosHome                       {background: black; padding: 90px 0px 180px 0px;
    .cl-normal                      {display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: center; gap: 0px 30px;}
    .portada                        {overflow: hidden; width: 100%; height: 600px; position: relative;}
    .bt1                            {position: absolute; background: white; color: var(--riandeUrban3); right: 0px; bottom: 0px; width: fit-content; gap: 10px; padding: 2px 10px 0px 10px;}
    .descrip                        {background: var(--riandeUrban3); color: white; width: 400px; padding: 18px; font-weight: 300; line-height: 1.2; text-wrap: auto; margin: -230px 0px 0px 0px; position: relative;}
    .clampTxt                       {display: -webkit-box; -webkit-line-clamp: 12; line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden;}
    h2                              {color: var(--riandeUrban1); font-weight: 800; font-size: 40px;}
}
@media ( width <= 960px )           {
    .nosotrosHome                   {
        .portada                    {height: 500px;}
        .descrip                    {margin: 0px 0px 0px 0px; width: 100%; order: 3;}
        h2                          {margin: 20px 0px;}
    }
}
@media ( width <= 650px )           {
    .nosotrosHome                   {
        h2                          {font-size: 28px;}
        .portada                    {height: 400px;}
    }
}



/* ENCANTA HOME */
.encanta                            {width: 100%; height: 100vh; overflow: hidden; position: relative; display: flex; align-items: flex-end; justify-content: center; mask-image: linear-gradient(to bottom, transparent, black 40%, black 100%, transparent);
    .title                          {position: absolute; background: rgba(95, 155, 175, 0.6); color: white; width: 750px; line-height: 1.2; text-align: center; font-size: 32px; padding: 20px; margin: 0px 0px 180px 0px;
        .riandeAeropuerto &         {background: rgba(156, 115, 95, 0.6);}
    }
}
@media ( width <= 960px )           {
    .encanta                        {
        .title                      {font-size: 26px; width: 88%; text-wrap: auto;}
    }
}



/* GALLERY */
.gallery                            {width: 100%; position: relative; overflow-x: hidden; gap: 60px; display: flex; padding: 40px 0px 40px 0px; overflow: auto; justify-content: center; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 64%, rgba(0, 0, 0, 0.83) 82%, rgba(0, 0, 0, 0.36) 93%, rgba(0, 0, 0, 0) 100%); margin: -170px 0px 0px 0px;
    &::-webkit-scrollbar            {height: 14px;}
    &::-webkit-scrollbar-track      {background: var(--riandeUrban3); margin: 0px 300px; border-radius: 20px;}
    &::-webkit-scrollbar-thumb      {background: var(--black08); border: 2px solid var(--riandeUrban3); border-radius: 20px;}

    .galleryIntHome                 {display: flex; gap: 40px; width: fit-content; position: relative; z-index: 2; padding: 0px 50px; justify-content: center;}
    .item                           {width: 230px; height: 230px; overflow: hidden; border-radius: 40px 0px; border: 3px solid var(--riandeUrban3);}
    .bgGallery                      {display: flex; position: absolute; width: 100%; height: 220px; bottom: 0px; background: red; left: 0px;}
}
@keyframes gallery                  {
    0%                              {margin: 0px 0px 0px -910px;}
    50%                             {margin: 0px 0px 0px -20px;}
    100%                            {margin: 0px 0px 0px -910px;}
}

@media ( width <= 650px )           {
    .gallery                        {
        .item                       {width: 150px; height: 150px;}
        .bgGallery                  {display: flex; position: absolute; width: 100%; height: 180px; bottom: 0px; background: black;}
    }
}



/* FOOTER */
.footer                             {display: flex; flex-wrap: wrap; justify-content: center; padding: 70px 0px 20px 0px; background: black; position: relative; z-index: 5;
    .wrap                           {width: 80%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
    .line                           {width: 100%; height: 1px; background: var(--riandeUrban3); display: block; margin: 0px 0px 30px 0px;}
    .left                           {display: flex; align-items: flex-start; gap: 20px;}
    .riande2                        {width: 140px;
        .riandeUrban &              {filter: brightness(0) saturate(100%) invert(65%) sepia(25%) saturate(700%) hue-rotate(165deg) brightness(100%);}
        .riandeAeropuerto &         {filter: brightness(0) saturate(100%) invert(52%) sepia(30%) saturate(500%) hue-rotate(340deg) brightness(92%);}
    }
    .line2                          {width: 1px; height: 100px; background: var(--riandeUrban3);}
    .infoLinks                      {display: flex; flex-direction: column; margin: 25px 0px 0px 0px;}
    .title                          {text-transform: uppercase; color: var(--riandeUrban3); font-weight: 500; font-size: 15px; margin: 0px 0px 20px 0px;}
    .mapWrap                        {display: flex; gap: 18px;}
    .subInfo                        {display: flex; flex-direction: column; gap: 5px;}
    .btS                            {color: var(--riandeUrban3); display: flex; align-items: center; font-size: 15px; gap: 2px;}
    .icof2ld                        {}
    .line3                          {display: block; width: 1px; height: 40px; background: var(--riandeUrban3);}
    .right                          {margin: 25px 0px 0px 0px;}
    .subInfoImg                     {display: flex; gap: 10px; margin: -14px 0px 0px 0px;}
    .premioImg                      {width: 50px; height: 50px; border-radius: 15px; overflow: hidden;}
    
    .infoBottom                     {display: flex; color: var(--riandeUrban3); justify-content: space-between; width: 100%; margin: 60px 0px 0px 0px; flex-wrap: wrap; align-items: center;}
    .item                           {display: flex; align-items: flex-start; gap: 3px; font-size: 14px;}
    .rrss                           {display: flex; align-items: center; gap: 8px;}
    .rrssBtn                        {font-size: 24px;}
}
@media ( width <= 1400px )          {
    .footer                         {
        .wrap                       {width: 96%;}
    }
}
@media ( width <= 1120px )          {
    .footer                         {
        .wrap                       {width: 92%;}
        .sale1120                   {display: none;}
        .left                       {width: 100%; flex-wrap: wrap;}
        .line2                      {width: 100%; height: 1px;}
        .item                       {width: 100%; margin: 0px 0px 10px 0px;}
        .rrss                       {width: 100%; justify-content: flex-end; margin: -40px 0px 0px 0px;}
    }
}
@media ( width <= 650px )           {
    .footer                         {
        .mapWrap                    {flex-wrap: wrap; gap: 0px;}
        .line3                      {display: none;}
        .subInfo                    {width: 100%; gap: 0px;}
        .btS                        {margin: 4px 0px;}
    }
}





/* CONTENIDO LISTADO */
.wrapGeneral                        {margin: calc(100vh - 300px) 0px 0px 0px; padding: 0px 0px 160px 0px; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.54) 84%, rgba(0, 0, 0, 0) 100%);
    .cl-normal                      {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
    h1                              {color: white; font-size: 40px; width: 300px; position: sticky; top: calc(100vh - 300px); margin: 0px 0px 150px 0px; font-weight: 700;}
    .wrapContent                    {width: 800px; display: flex; flex-wrap: wrap; gap: 90px;}
    .sinContenido                   {color: white; width: 100%; text-align: center;}
}
.btnCategory                        {width: 100%; height: 400px; background: var(--riandeUrban3); color: white; overflow: hidden; position: sticky; top: 100px; border: 0px solid var(--riandeUrban3); cursor: pointer; transition: .2s;
    &:hover                         {border: 6px solid var(--riandeUrban3);}
    &:hover .img-int                {opacity: .4;}
    &:hover .icoHabit               {background: var(--riandeUrban3); color: white;}
    
    .shadow                         {width: 100%; height: 100%;  display: flex; align-items: flex-end; justify-content: space-between; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%); position: relative; z-index: 1;}
    .img-int                        {position: absolute; left: 0px; top: 0px; opacity: 1; border: 0px solid white; transition: .2s;}
    .title                          {position: relative; font-size: 42px; font-weight: 700; width: 270px; padding: 0px 0px 20px 30px; transition: .2s;}
    .icoHabit                       {position: relative; background: white; color: var(--riandeUrban3); font-size: 34px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; transition: .2s;}
}
@media ( width <= 1400px )          {
    .wrapGeneral                    {
        .wrapContent                {width: 610px;}
        h1                          {font-size: 36px; width: 250px;}
    }
}
@media ( width <= 960px )           {
    .wrapGeneral                    {
        .wrapContent                {width: 100%;}
        h1                          {width: 100%; text-align: center; position: relative; top: initial; margin: 0px 0px 50px 0px;}
    }
}
@media ( width <= 650px )           {
    .wrapGeneral                    {
        h1                          {font-size: 28px;}
    }
    .btnCategory                    {
        .title                      {font-size: 28px; width: 80%; padding: 0px 0px 14px 18px;}
    }
}




/* CATEGORIAS DETALLE */
.wrapGeneralInt                     {color: white; margin: 100vh 0px 0px 0px; padding: 0px 0px 0px 0px; 
    .shadow                         {width: 100%; height: 400px; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 95%);}
}
.wrapInfo                           {padding: 0px 0px 0px 0px; position: relative; z-index: 2;
                                    background: linear-gradient(to bottom, rgba(0,0,0,1), transparent 50%, transparent 70%, rgba(0,0,0,0.98)), url(/assets/images/bgtext.webp) center / cover no-repeat; background: black;
    .cl-normal                      {}
    .txt                            {font-weight: 300; width: 100%; max-width: 700px; margin: 0px auto 0px auto; text-align: center;}
}
.incluyeWrap                        {background: black; padding: 70px 0px 0px 0px;}
.detalles1                          {display: flex; flex-wrap: wrap; align-items: flex-end; margin: 30px auto 0px auto; text-align: center; border: 1px solid var(--riandeUrban1); width: fit-content; padding: 20px; color: var(--riandeUrban1);
    .item                           {display: flex; flex-direction: column; align-items: center;}
    .icoDet1                        {font-size: 30px;}
    .title                          {font-size: 15px; margin: 5px 0px 2px 0px;}
    .rpta                           {font-weight: 800; font-size: 20px;}
    .line                           {width: 1px; height: 46px; background: var(--riandeUrban1); margin: 0px 30px;}
}
@media ( width <= 960px )           {
    .detalles1                      {flex-direction: column; align-items: center; width: 100%;
        .line                       {width: 100%; height: 1px; margin: 20px 0px;}
    }
}
@media ( width <= 650px )           {
    .wrapInfo                       {
        .txt                        {text-align: left;}
    }
}


/* GALERIA */
.gallDetail                         {padding: 140px 0px 40px 0px !important;
    .galleryIntHome                 {padding: 120px 0px 0px 0px !important;}
    .item                           {width: 320px; height: 460px !important;}
}
.galleryInt                         {display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin: 100px 0px 0px 0px;
    .principal                      {width: 100%; height: 600px; overflow: hidden;}
    .img-int                        {}
    .miniaturas                     {width: 100%; overflow: auto; margin: 20px 0px 0px 0px;
        &::-webkit-scrollbar        {width: 12px; transition: .2s; overflow: auto; background: initial; height: 8px;}
        &::-webkit-scrollbar-track  {background: var(--riandeUrban2); margin: 0px 50px; border-radius: 20px; transition: .2s; }
        &::-webkit-scrollbar-thumb  {transition: .2s; background: rgba(0, 0, 0, 0.5); border-radius: 20px; }
    }
    .wrapMin                        {display: flex; gap: 0px 20px; width: fit-content; padding: 0px 0px 10px 0px;}
    .seccund                        {width: 96px; height: 70px; cursor: pointer; background: white; transition: .2s;
        &:hover                     {transform: scale(1.05);}
        &:active                    {transform: scale(.98); background: black;}
        &:hover .img-int            {opacity: .5;}
    }
}
@media ( width <= 960px )           {
    .galleryInt                     {
        .principal                  {height: 400px;}        
    }
}
@media ( width <= 650px )           {
    .galleryInt                     {
        .principal                  {height: 300px;}        
    }
}



/* INCLUYE */
.incluye                            {gap: 20px; padding: 20px; width: fit-content; border: 1px solid var(--riandeUrban3); display: flex; flex-wrap: wrap; justify-content: center; color: var(--riandeUrban3); margin: 0px auto 0px auto;
    .title                          {text-transform: uppercase;}
    .wrap                           {width: 100%; display: flex; align-items: flex-start; justify-content: center; gap: 18px 32px; flex-wrap: wrap;}
    .item                           {display: flex; align-items: flex-start; gap: 5px;}
    .icoInc                         {font-size: 30px;}
    .txtInc                         {margin: 6px 0px 0px 0px;}
}
@media ( width <= 960px )           {
    .incluye                        {
        .wrap                       {gap: 18px 0px; justify-content: space-between;}
        .item                       {width: 42%;}
    }
}
@media ( width <= 650px )           {
    .incluye                        {
        .item                       {width: 100%;}
    }
}



/* NOSOTROS */
.nosotrosWrap                       {flex-wrap: wrap; background: black !important; padding: 50px 0px 0px 0px !important;}
.nosotrosTxt                        {font-size: 20px; position: relative; color: white; text-align: center; width: 100%; margin: 0px 0px 50px 0px;}
.mision                             {width: 45%; text-align: center; color: var(--riandeUrban3); margin: 50px 0px 50px 0px;}
.nosotrosTitle                      {font-weight: 800; text-transform: uppercase; font-size: 50px; margin: 0px 0px -25px 0px; opacity: .4;}
.misionTxt                          {font-size: 24px;}
.nosotrosDirectos                   {padding: 0px; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 110%) !important;}
.nosotrosAtribWrap                  {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0px 0px 170px 0px;}
.nosotrosNext                       {background: black;}
.nosotrosTxt2                       {font-size: 16px; position: relative; color: white; text-align: center; width: 100%; margin: 50px 0px 50px 0px;}
.nosotrosImg                        {height: 500px !important;}
.nosotrosAtrib                      {color: white; width: 49%; display: flex; align-items: flex-start; gap: 6px; margin: 30px 0px; padding: 0px 50px;
    .icoAtrib                       {color: var(--riandeUrban3); font-size: 40px;}
    .nosotrosInfo                   {margin: 10px 0px 0px 0px;}
    .titleInfo                      {color: var(--riandeUrban3); font-weight: 600;}
    .titleTxt                       {font-size: 16px; margin: 6px 0px 0px 0px;}
}

@media ( width <= 960px )           {
    .mision                         {width: 100%;}
    .nosotrosAtrib                  {width: 100%;}
}
@media ( width <= 960px )           {
    .misionTxt                      {font-size: 18px;}
    .nosotrosImg                    {height: 300px !important;}
    .nosotrosAtrib                  {flex-wrap: wrap;}
    .nosotrosInfo                   {width: 100%;}
}




/* CONTACTOS */
.contactos                          {color: white; width: 100%; height: 100vh; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 700px;
    .left                           {width: 48%; padding: 0px 50px; display: flex; flex-direction: column; gap: 40px; align-items: center;}
    .item                           {display: flex; flex-wrap: wrap; width: 360px;}
    .title                          {font-size: 38px; font-weight: 700;}
    .infoItem                       {display: flex; font-size: 15px; width: 100%; margin: 10px 0px 0px 0px;}
    .icoInfo                        {margin: 1px 3px 0px 0px;}
    .line                           {width: 100%; max-width: 350px; height: 1px; background: white; margin: 20px 0px;}
    .rrss                           {display: flex; gap: 5px; width: 100%;}
    .icoRRSS                        {font-size: 26px;}
    .infoIcon                       {width: 100%; display: flex; gap: 0px 60px; align-items: center;}
    .titleIcon                      {}
    .rrssWrap                       {display: flex; gap: 10px;
        a                           {width: 60px;}
    }
    .imgRRSS                        {border-radius: 16px;}
    .mapa                           {width: 50%; height: 100%; overflow: hidden; border-radius: 40px 0px 0px 40px;}
}

@media ( width <= 960px )           {
    .contactos                      {height: auto;
        .item                       {width: 100%;}
        .mapa                       {width: 100%; order: 1; height: 60vh;}
        .left                       {order: 2; width: 100%; padding: 50px 20px 100px 20px; width: 100%; max-width: 350px; margin: auto;}
    }
}





/* GALLERY */
.gallery-modal                      {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 9999; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease;}
.gallery-modal.active               {display: flex; opacity: 1;}
.gallery-modal-content              {position: relative; width: 90%; height: 90%; max-width: 1200px; max-height: 800px; display: flex; justify-content: center; align-items: center;}
.modal-image                        {max-width: 100%; max-height: 100%; object-fit: contain; animation: slideIn 0.5s ease-out;}
.modal-image.slide-left             {animation: slideLeft 0.5s ease-out forwards;}
.modal-image.slide-right            {animation: slideRight 0.5s ease-out forwards;}

@keyframes slideIn                  {
    from                            {opacity: 0; transform: scale(0.95);}
    to                              {opacity: 1; transform: scale(1);}
}

@keyframes slideLeft                {
    from                            {opacity: 1; transform: translateX(0);}
    to                              {opacity: 0; transform: translateX(-100px);}
}

@keyframes slideRight               {
    from                            {opacity: 1; transform: translateX(0);}
    to                              {opacity: 0; transform: translateX(100px);}
}

.gallery-controls                   {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 10001;}
.gallery-btn                        {background: rgba(255, 255, 255, 0.3); border: none; color: white; font-size: 40px; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: auto; margin: 0 20px;}
.gallery-btn:hover                  {background: rgba(255, 255, 255, 0.6);transform: scale(1.1);}
.gallery-btn:active                 {transform: scale(0.95);}
.close-btn                          {position: absolute; top: 30px; right: 30px; background: rgba(255, 255, 255, 0.3); border: none; color: white; font-size: 40px; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10001; padding: 0; line-height: 1;}
.close-btn:hover                    {background: rgba(255, 255, 255, 0.6); transform: scale(1.1);}
.gallery-counter                    {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.3); color: white; padding: 12px 24px; border-radius: 25px; font-size: 14px; font-weight: 600; z-index: 10001;}

.gallery .item                      {cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.gallery .item:hover                {transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}

@media (max-width: 768px)           {
    .gallery-btn                    {width: 50px; height: 50px; font-size: 28px; margin: 0 10px;}
    .close-btn                      {width: 50px; height: 50px; font-size: 32px; top: 20px; right: 20px;}
    .gallery-counter                {font-size: 12px; padding: 10px 20px; bottom: 20px;}
}



/* HOME */
.mainHome                           {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; height: 100vh;
    .btItem                         {width: calc(50% - 2px); height: 100%; overflow: hidden; position: relative; transition: .2s;
        &:hover .shadow             {background: rgba(0, 0, 0, 0.1);}
        &:hover .Logo               {width: 300px; background: rgba(0, 0, 0, 0.6);} 
    }
    .img-int                        {}
    .shadow                         {position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1; top: 0px; display: flex; align-items: center; justify-content: center; transition: .2s;} 
    .Logo                           {width: 230px; transition: .2s;}
}


/* POP */
.popTime                            {background: rgba(0, 0, 0, 0.9); position: fixed; top: 0px; left: 0px; z-index: 99; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh;
    .icoClose                       {color: white; position: fixed; font-size: 38px; top: 30px; right: 30px; cursor: pointer;
        &:hover                     {color: var(--color-aprobado);}
    }
    .imgPop                         {width: 90%; max-width: 500px; overflow: hidden; border-radius: 30px;}
}


.gallInt                            {background: black;}