body {
    background: black;
}






/* FORM */
.formhome       {width: 300px; display: flex; position: fixed; top: 10%; left: 0; right: 0; margin: auto; z-index: 30; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(-90px); transition: .5s .1s;}
.formhome-wrap  {width: 300px;text-align: center; background: white; padding: 13px; border-radius: 15px; display: flex; flex-direction: column;}
.formhome-title {font-size: 19px; font-weight: 500; margin: 5px 0 14px 0; color: var(--color-primario);}
.formhome-form  {display: flex; flex-wrap: wrap; gap: 12px;}
.ico-dd9d8      {color: white; position: fixed; top: 35px; right: 35px; cursor: pointer; display: block; font-size: 40px; z-index: 999; opacity: 0; visibility: hidden; transition: .2s .2s;}

.formhome-form .campo1 {font-size: 16px; padding: 6px 6px 5px 6px; border: 1px solid black; color: var(--color-secundario);}
.formhome-form .campo1::placeholder {color: black;}
.formhome-form .campo1:focus {color: var(--color-secundario);border: 1px solid var(--color-secundario); } 
.formhome-form .campo1:focus::placeholder {color: var(--color-secundario); }

.formhome-send  {transition: .3s; cursor: pointer; display: flex;width: 100%; background: var(--color-secundario); border: 0; color: white; justify-content: center; font-size: 16px; border-radius: 7px; padding: 10px 0px; margin: 10px 0 0 0;}
.formhome-shadow {background: rgba(0,0,0,0.8);width: 100%; height: 100vh; position: fixed; top: 0; z-index: 20; cursor: pointer; opacity: 0; visibility: hidden; transition: .4s .3s;}


.formhome-send:hover {transform: scale(1.03);}


.formopen1       {opacity: 1; visibility: visible; transition: .2s .1s;}
.formopen2       {opacity: 1; visibility: visible; transition: .3s .3s;}
.formopen3       {opacity: 1; visibility: visible; transition: .5s .3s; transform: translateY(0);}
/* FORM */



/* HEADER */
.home-header    {position: fixed; left: 0; top: 0; z-index: 12; width: 100%;}
.home-nosotros  {position: fixed; left: 0; top: 0; z-index: 12; width: 100%;}
.header         {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 35px 35px 0px 35px; z-index: 10; transition: .5s .2s;}
.ico-dd09       {font-size: 40px; cursor: pointer; transition: var(--transition250);}

.roi            {width: 230px; margin: 9px 0px 0px 0px;}
.bghome         {width: 100%; height: 100dvh; overflow: hidden; position: absolute; top: 0; z-index: -1;}
.bghome-img     {width: 114%; position: absolute; top: 0; left: 50%; transform: translate(-50%, 15%) rotate(0deg); transition: var(--transition250);}
.bghome-degrade {width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; background: radial-gradient(at 50% 100%, rgba(0,0,0,0.4), rgba(0,0,0,1) 80%)}
.home           {width: 100%; height: 100%; position: absolute; top: 0; display: flex; justify-content: center; align-items: center; text-align: center;}
.home-wrap      {width: 805px; display: flex; flex-wrap: wrap; justify-content: center;}
.home-subtitle  {font-weight: 500; text-transform: uppercase; font-size: 40px; margin: 0px 0px -13px 0px;}
.home-title     {text-transform: uppercase; font-weight: 900; font-size: 85px; background: -webkit-linear-gradient(230deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition250);}
.home-line      {display: block; width: 80px; height: 1px; background: white; margin: 25px 0px;}
.home-txt       {font-size: 35px; width: 730px; font-weight: 500; color: white;}
.home-wrapbtn   {position: fixed; bottom: 40px; left: 0; right: 0; margin: auto; width: 315px; z-index: 3;}
.bglight        {width: 100%; height: 100px; position: fixed; bottom: 0; background-image: url(../images/light.png); background-position: top; background-size: cover; opacity: .7; z-index: 2;}

.home-header .itemoff   {visibility: hidden;} 
.home-wrapbtn .bt1  {background: rgba(0,0,0,0.5); padding: 9px 15px 9px 9px; font-size: 16px; border: 2px solid transparent; border-radius: 0px; border-image: linear-gradient(25deg, #B53F64,#9B3DB3,#8846D5,#7063F0) 0; position: relative;}
.home-wrapbtn .bt1:hover  {border: 2px solid transparent; border-image: linear-gradient(25deg, #B53F64,#9B3DB3,#8846D5,#7063F0) 1; box-shadow: 0px 0px 30px 0px var(--color-primario); transform: scale(1.03);}
.home-wrapbtn .bt1:active {transform: scale(.94);}
.ico-dd09:hover   {color: var(--color-primario);}
/* HEADER */








/* NOSOTROS */
.nosotros-wrap      {width: 720px; display: flex; flex-direction: column; align-items: flex-start; padding: 80px 0px 80px 0px;}
.nosotros-title     {text-transform: uppercase; font-size: 45px; font-weight: 800; line-height: 1;}
.txt-grad           {background: -webkit-linear-gradient(170deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.nosotros-subtitle  {font-weight: 300; font-size: 23px; margin: 20px 0px 40px 0px;}
.hacemos            {display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;}
.ico-dd43           {font-size: 90px; background: -webkit-linear-gradient(80deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hacemos-right      {}
.nosotros-line      {width: 100%; height: 1px; background: rgba(255,255,255,0.3); margin: 40px 0px;}
.hacemos-title      {font-weight: 500; margin: 13px 0px 0px 0px; font-size: 24px; background: -webkit-linear-gradient(30deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hacemos-subtitle   {}
.bgnosotros         {width: 100%; height: 100dvh; overflow: hidden; position: fixed; top: 0; z-index: -1;}
.bgnosotros-img     {opacity: .4; width: 900px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 20%) rotate(335deg); transition: var(--transition250); margin: 0px 0px 0px 575px;}


.home-nosotros .roi     {width: 180px; margin: 9px 0px 0px 0px;}
.home-nosotros .itemoff {visibility: hidden;} 
.home-nosotros .header  {justify-content: flex-end;gap: 30px;}
/* NOSOTROS */


 

/* SERVICIOS */
.servicios          {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 34px; position: relative; z-index: 2; margin: 50px 0px 0px 0px;}
.servicios-item     {width: 30%; height: 275px; display: flex; justify-content: flex-end; flex-direction: column; padding: 25px; border: 2px solid white; border-image: linear-gradient(25deg, white) 1; background: rgba(0,0,0,0.07); cursor: pointer; transition: .4s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);}
.ico-dd54           {font-size: 110px; transition: var(--transition250);}
.servicios-txt      {font-size: 19px; height: 75px; line-height: 1.3; display: flex; align-items: center; transition: var(--transition250);}
.bgserv1-img        {width: 900px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 27%) rotate(354deg); transition: var(--transition250); margin: 0px 0px 0px -771px; transition: 3s;}
.bgserv2-img        {width: 1130px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -43%) rotate(0deg); transition: var(--transition250); margin: 0px 0px 0px 650px; transition: 3s;}
.bgserv3-img        {width: 1130px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -43%) rotate(0deg); transition: var(--transition250); margin: 0px 0px 0px 650px; transition: 3s;}

.movimg1            {width: 1130px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -8%) rotate(50deg); transition: 2s; margin: 0px 0px 0px 650px;}
.movimg2            {width: 900px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -67%) rotate(108deg); transition: 2s; margin: 0px 0px 0px -771px;}

.tipoprod           {width: 300px;}
.pay-txt            {width: 100%;}
.pay-group          {margin: 40px 0px 0px 0px; display: flex; flex-direction: column;}

.btnoff             {opacity: 0; transition: .6s .2s; visibility: hidden; display: none;}


.servdetalle        {flex-direction: column; width: 100%; transform: translateY(90px) scale(0); opacity: 0; visibility: hidden; transition: .5s; width: 720px; position: absolute;}
.servdetalle-line   {width: 100%; height: 1px; background: rgba(255,255,255,0.3); margin: 45px 0px 30px 0px; display: block;}
.servdetalle-title  {display: flex; align-items: flex-end;}
.ico-d0d8           {font-size: 110px;}
.servdetalle-txt1   {font-size: 24px; margin: 0px 0px 16px 0px;}
.servdetalle-int    {border: 2px solid transparent; padding: 29px; border-image: linear-gradient(25deg, #B53F64,#9B3DB3,#8846D5,#7063F0) 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin: 20px 0px 0px 0px; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.ico-d298           {cursor: pointer; width: 45px; height: 45px; background: var(--color-complement1); display: flex; justify-content: center; align-items: center; font-size: 29px; border-radius: 100px; position: absolute; margin: -52px 0px 0px 665px; transition: var(--transition250);}
.servdetalle-img    {width: 42%; height: 340px;}
.img-int            {width: 100%; height: 100%; object-fit: cover; object-position: top;}
.servdetalle-txt2   {width: 53%; font-size: 16px; padding: 40px 0px;}

.serv1              {transform: translateY(0px) scale(1); opacity: 1; visibility: visible; transition: .5s .3s; position: relative;}


.ico-d298:hover {transform: scale(1.12);}
.ico-d298:active {transform: scale(.94);}
.servicios-item:hover     {border: 2px solid transparent; border-image: linear-gradient(25deg, #B53F64,#9B3DB3,#8846D5,#7063F0) 1; box-shadow: 0px 0px 42px -8px var(--color-primario); transform: scale(1.05);}
.servicios-item:active    {transform: scale(.94);}
.servicios-item:hover .ico-dd54 {color: var(--color-complement2);}
.servicios-item:hover .servicios-txt {color: var(--color-complement2);}
/* SERVICIOS */





/* TRABAJOS */
.trabajos           {margin: 40px 0px 0px 0px;}
.trabajos-filters   {display: flex; flex-wrap: wrap; gap: 18px;}
.trabajos-filter    {color: white; border: 1px solid white; font-size: 17px; padding: 8px 17px; transition: var(--transition150); cursor: pointer;}
.trabajos-items     {display: flex; flex-wrap: wrap; gap: 30px; margin: 25px 0px 0px 0px;}
.trabajos-item      {width: 45%; height: 180px; overflow: hidden; cursor: pointer; transition: var(--transition250);}


.trabajos-item:hover      {box-shadow: 0px 0px 50px -6px var(--color-secundario); transform: scale(1.03); filter: grayscale(0%);}
.trabajos-item:active   {transform: scale(.94);}
.trabajos-filter:hover    {color: var(--color-complement1); border: 1px solid var(--color-complement1);}
/* TRABAJOS */




/* CONTACTOS */
.contact-title  {text-transform: uppercase; font-weight: 900; font-size: 70px; background: -webkit-linear-gradient(230deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition250);}
.redes          {width: 100%; display: flex; justify-content: center; gap: 20px;}
.ico-dd23       {width: 60px; height: 60px; border: 1px solid white; display: flex; justify-content: center; align-items: center; font-size: 30px; color: white; transition: var(--transition150);}


.ico-dd23:hover {color: white; background: var(--color-secundario); border: solid 1px var(--color-secundario); transform: scale(1.03);}
.ico-dd23:active {transform: scale(.94);}
/* CONTACTOS */




/* NAVEGADOR */
.nav        {transform: translateX(-100%); transition: .3s .55s; width: 100%; height: 100vh; position: fixed; top: 0; background: rgba(12,0,34,0.8); z-index: 12; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; align-items: center;}
.nav-wrap   {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 0px 50px;}
.nav-btn    {font-weight: 300; font-size: 60px; transform: translateX(-500px); opacity: 0;}
.navbtn1   {transition: .4s .1s;}
.navbtn2   {transition: .4s .22s;}
.navbtn3   {transition: .4s .34s;}
.navbtn4   {transition: .4s .46s;}
.navbtn5   {transition: .4s .58s;}
.nav-btn_js {color: white; padding: 0px 20px 0px 0px; transition: var(--transition150);}
.ico-ss20   {font-size: 40px; position: fixed; top: 35px; right: 35px; color: white; cursor: pointer; transition: .5s .1s; opacity: 0; z-index: 20; visibility: hidden;}


.bgnav-on   {transform: translateX(0%); transition: .6s;}
.btn-on1    {transform: translateX(0px); opacity: 1; transition: .6s .1s;}
.btn-on2    {transform: translateX(0px); opacity: 1; transition: .6s .22s;}
.btn-on3    {transform: translateX(0px); opacity: 1; transition: .6s .34s;}
.btn-on4    {transform: translateX(0px); opacity: 1; transition: .6s .46s;}
.btn-on5    {transform: translateX(0px); opacity: 1; transition: .6s .58s;}

.on {opacity: 1; transition: .3s .1s; visibility: visible;}

.ico-ss20:hover {transform: scale(1.1); color: var(--color-complement1);}
.ico-ss20:active {transform: scale(.94);}
.nav-btn:hover .nav-btn_js {padding: 0px 0px 0px 20px; background: -webkit-linear-gradient(230deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
/* NAVEGADOR */






















@media screen and (max-width: 1140px) {
.nosotros-wrap {width: 74%; display: flex; flex-direction: column; align-items: flex-start; padding: 80px 0px 80px 0px;}


}








@media screen and (max-width: 1090px) {
.home-wrap      {width: 600px; display: flex; flex-wrap: wrap; justify-content: center;}
.home-subtitle  {font-weight: 500; text-transform: uppercase; font-size: 32px; margin: 0px 0px -5px 0px;}
.home-title     {text-transform: uppercase; font-weight: 900; font-size: 60px; background: -webkit-linear-gradient(230deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition250);}
.home-txt       {font-size: 28px; width: 100%; font-weight: 500; color: white;}
.trabajos-items {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; margin: 25px 0px 0px 0px;}

.contact-title  {text-transform: uppercase; font-weight: 900; font-size: 50px; background: -webkit-linear-gradient(230deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition250);}


.home-nosotros .header  {justify-content: flex-end; gap: 15px;}
.home-nosotros .roi     {width: 140px; margin: 9px 0px 0px 0px;}
.servicios              {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 30px; position: relative; z-index: 2; margin: 50px 0px 0px 0px;}
.bgserv1-img            {width: 900px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 27%) rotate(354deg); transition: var(--transition250); margin: 0px 0px 0px -620px; transition: 3s;}
.movimg2                {width: 900px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -67%) rotate(108deg); transition: 2s; margin: 0px 0px 0px -550px;}

.btnoff                 {opacity: 0; transition: .6s .2s; visibility: hidden; display: none;}

}






@media screen and (max-width: 880px) {
.servicios-item {width: 100%; height: auto; display: flex; justify-content: flex-end; flex-direction: column; padding: 25px; border: 2px solid white; border-image: linear-gradient(25deg, white) 1; background: rgba(0,0,0,0.07); cursor: pointer; transition: .4s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 1; visibility: visible;}
}








@media screen and (max-width: 690px) {


.nav-btn        {font-weight: 300; font-size: 50px; transform: translateX(-500px); opacity: 0;}
.bgserv2-img    {width: 730px; position: absolute; top: 0; left: 50%; transform: translate(-100%, -45%) rotate(0deg); transition: var(--transition250); margin: 0px 0px 0px 650px; transition: 3s;}
.bgserv3-img    {width: 730px; position: absolute; top: 0; left: 50%; transform: translate(-100%, -45%) rotate(0deg); transition: var(--transition250); margin: 0px 0px 0px 650px; transition: 3s;}
.home-wrap      {width: 300px; display: flex; flex-wrap: wrap; justify-content: center;}
.home-subtitle  {font-weight: 500; text-transform: uppercase; font-size: 30px; margin: 0px 0px 10px 0px;}
.home-title     {text-transform: uppercase; font-weight: 900; font-size: 44px; line-height: 1; background: -webkit-linear-gradient(230deg, #B53F64,#9B3DB3,#8846D5,#7063F0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition250);}
.home-txt       {font-size: 18px; width: 100%; font-weight: 500; color: white;}
.nosotros-wrap  {width: 74%; display: flex; flex-direction: column; align-items: flex-start; padding: 140px 0px 140px 0px;}
.bgnosotros-img {width: 900px; position: absolute; top: 0; left: 48%; transform: translate(-60%, 5%) rotate(409deg); transition: var(--transition250); margin: 0px 0px 0px 575px;}
.trabajos-item  {width: 100%; height: 180px; overflow: hidden; cursor: pointer; transition: var(--transition250);}
.hacemos        {display: flex; align-items: flex-start; gap: 0px; flex-direction: column;}


.servicios-txt  {font-size: 25px; height: auto; line-height: 1.3; display: flex; align-items: center; transition: var(--transition250);}
.trabajos-filter {color: white; border: 1px solid white; font-size: 17px; padding: 8px 17px; transition: var(--transition150); cursor: pointer; width: 100%;}

.servdetalle    {flex-direction: column; width: 100%; transform: translateY(90px) scale(0); opacity: 0; visibility: hidden; transition: .5s; width: 100%; position: absolute;}
.serv1          {transform: translateY(0px) scale(1); opacity: 1; visibility: visible; transition: .5s .3s; position: relative;}
.nosotros-title {text-transform: uppercase; font-size: 38px; font-weight: 800; line-height: 1;}
.ico-d298       {cursor: pointer; width: 45px; height: 45px; background: var(--color-complement1); display: flex; justify-content: center; align-items: center; font-size: 29px; border-radius: 100px; position: absolute; margin: -40px -22px 0px 0px; right: 0; transition: var(--transition250);}
.servdetalle-int {border: 2px solid transparent; padding: 15px; border-image: linear-gradient(25deg, #B53F64, #9B3DB3, #8846D5, #7063F0) 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin: 20px 0px 0px 0px; background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.servdetalle-img {width: 100%; height: 340px;}
.servdetalle-txt2 {width: 100%; font-size: 16px; padding: 0px 0px;}
.servdetalle-title {display: flex; align-items: flex-start; flex-direction: column;}
.sale690 {display: none;}


.home-header .roi   {width: 150px; margin: 9px 0px 0px 0px;}
.bghome-img         {width: 195%; position: absolute; top: inherit; bottom: 0; left: 50%; transform: translate(-50%, 40%) rotate(0deg); transition: var(--transition250);}
.home-nosotros .header {justify-content: flex-end; gap: 15px; background: rgba(0,0,0,0.01); padding: 12px 20px 12px 20px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);}

.servicios      {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; position: relative; z-index: 2; margin: 50px 0px 0px 0px; opacity: 1; visibility: visible;}

.bgnav-on   {transform: translateX(0%); transition: .6s;}
.btn-on1    {transform: translateX(0px); opacity: 1; transition: .6s .1s;}
.btn-on2    {transform: translateX(0px); opacity: 1; transition: .6s .22s;}
.btn-on3    {transform: translateX(0px); opacity: 1; transition: .6s .34s;}
.btn-on4    {transform: translateX(0px); opacity: 1; transition: .6s .46s;}
.btn-on5    {transform: translateX(0px); opacity: 1; transition: .6s .58s;}

.on {opacity: 1; transition: .3s .1s; visibility: visible;}

.movimg1        {width: 730px; position: absolute; top: 0; left: 50%; transform: translate(-100%, 25%) rotate(90deg); transition: 2s; margin: 0px 0px 0px 650px;}
.btnoff         {opacity: 0; transition: .6s .2s; visibility: hidden; display: none;}
.serv1          {transform: translateY(0px) scale(1); opacity: 1; visibility: visible; transition: .5s .3s; position: relative;}



}













@media screen and (max-width: 450px) {



}