@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}





body #magicMouseCursor {
  z-index:10000000!important;
  position: fixed;
  width: 35px;
  height: 35px;
  border: 1px solid  var(--indigo);
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  left: 0;
  top: 0;
  transition: transform 0.07s, width 0.3s, height 0.3s;
  pointer-events: none; }
  body #magicMouseCursor.cursor-square {
  border-radius: 0; }
body #magicPointer {
  z-index:10000000!important;
  height: 5px;
  width: 5px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: var(--indigo)!important;
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s; }
  body #magicPointer.is-hover {
  background-color: var(--indigo); }
  body #magicPointer.pointer-blur {
  height: 50px;
  width: 50px;
  background: none;
  border: 1px solid var(--indigo);
  box-shadow: 0px 0px 15px -5px white; }
  body #magicPointer.pointer-overlay {
  height: 50px;
  width: 50px;
  mix-blend-mode: difference;
  box-shadow: 0px 0px 15px -5px white; }
body .magic-hover {
  transition: all 0.2s; }
  body .magic-hover:hover {
  cursor: none!important; }

.hs-button{
    display: none!important;

}



:root {


    --dark1: #0A001E;
    --dark2: #26164C;
    --indigo: #4A00FF;
    --lila: #7D7DFF;
    --gray: #F6F6F6;
    --white: #FFFFFF;
    --cyg: #FCB116;
    --furry: #7B4E97;
    --alpha: #B30000;
    --sweet: #A56A13;
    --eval:#353492;
    --trini:#A5A399;
    --soft: #C69FB0;
    --title-xl: 68px;
    --title-b: 52px;
    --title-m: 46px;
    --title-s: 36px;
    --title-xs: 28px;
    --subtitle-b: 24px;
    --subtitle-m: 20px;
    --body-b: 18px;
    --body-m: 16px;
    --body-s: 14px;
    --body-xs: 12px;
}

/*TOKENS*/

.title-1 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--title-xl);
    font-weight: 700;
    line-height: 70px;

}

.title-2 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--title-b);
    font-weight: 700;
    line-height: 56px;
    word-break: auto-phrase;
}

.title-3 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--title-m);
    line-height: 50px;

}

.title-4 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--title-s);
    font-weight: 600;

    line-height: 38px;
}

.title-5 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--title-xs);
    font-weight: 500;
    line-height: 30px;
}


.subtitle-1 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--subtitle-b);
    font-weight: 400;

}

.subtitle-2 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--subtitle-m);
    font-weight: 300;

}

.subtitle-3 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;

}

.body-1 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--body-b);
    font-weight: 300;
}

.body-2 {
    color: var(--dark1);
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--body-m);
    font-weight: 400;
    line-height: 1.6rem;
}

.body-3 {
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--body-s);
    font-weight: 400;
}


body {
    background-color: var(--indigo);
   

}




  

/*HEADER*/

header {
    align-items: center;
    display: inline-flex;
    height: 80px;
    justify-items: center;
    padding: 40px 30px 0;
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 9997;
}


.brand {
    margin-right: 20px;
    width: 50px;
    z-index: 9999;
    align-self: baseline;

}

.brand img {
    height: 40px;
    width: auto;

}

.menu {
    width: auto;
}

.menu.menu-open {
    transition: width .5s ease-in-out;
    width: 75%;

}


.menu .menu-nav .icon-menu {
    align-content: center;
    background-color: var(--indigo);
    border-radius: 50px;
    color: var(--white);
    display: grid;
    height: 40px;
    line-height: 35px;
    text-align: center;
    transition: .5s;
    width: 40px !important;


}

.menu .menu-nav .icon-menu:hover {
    background-color: var(--lila);
}

.menu .menu-open .icon-menu {
    background-color: var(--lila);
    position: absolute;
    transition: .3s;
}

.menu .icon-menu .line {
    background-color: var(--white);
    display: block;
    height: 1px;
    margin: 3px auto;

    width: 22px;

}




.menu .menu-nav {
    align-items: center;
    background-color: var(--lila);
    border-radius: 50px;
    display: inline-flex;
    height: 40px;
    margin: auto;
    transition: width .5s ease-in-out;
    width: 40px;

}



.menu .menu-nav nav {
    display: none;
    height: 40px;
    justify-content: center;
    line-height: 40px;
    width: 100%;


}

.menu .menu-nav nav ul {
    display: flex;
    list-style: none;

}


.menu .menu-nav nav ul .item-nav {
    animation: fadein 1s forwards !important;
    animation-delay: 2s;
    margin: 0 10px;
    opacity: 0;

}




.menu .menu-nav nav ul .item-nav {

    color: var(--dark2);
}

.nav-active {
    color: var(--indigo) !important;
    font-weight: 600 !important;

}



.menu .menu-nav nav .btn-close {
    display: none;
}


.menu .menu-open nav .btn-close {
    display: none;
}


@keyframes fadein {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



.menu .menu-nav nav .item-nav .link-nav {
    color: var(--white);
    font-family: "Reddit Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--body-m);
    font-weight: 300;
    text-decoration: none;
}



.request {
    position: absolute;
    right: 30px;
    text-align: right;
    width: 25%;
    z-index: 9999;
}


.btn-meet{
    background-color: transparent!important;
    border: solid 1px var(--white)!important;
    justify-self: end!important;
        padding: 8px 26px;
        border-radius:50px;
    }

.btn-meet:hover{
    background-color: var(--lila)!important;
    color:#fff!important;
       border: solid 1px var(--lila)!important;
    }



.btn-request {

    background-color: var(--lila);
    border-radius: 50px;
    color: var(--white);
    display: inline-block;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    transition: .5s;
    width: auto;
}


.btn-request:hover {
    background-color: var(--indigo);
}


/*END HEADER*/



main {
    opacity: 0;

    transition: opacity 2s ease-in-out, transform .7s ease-in-out, filter 1.5s ease-in-out;
    background-color: var(--white);
    border-radius: 20px;
    margin: -70px auto 0;
    padding-top: 5px;
    width: 98%;
  

    
}


main.fade-in-active {
    opacity: 1;
   
  
  }
  
  main.fade-out {
    opacity: 0;
  
   
  }



section {
    margin: auto 40px;
    min-height: 100vh;
    padding: 40px;
}

.col-1 {
    display: block;
}

.col-2 {
    align-items: baseline;
    display: flex;

}

/*PAGE HOME*/


.intro {
    align-items: end;
    background-attachment: fixed;
    background-color: var(--lila);
    background-image: url(img/pattern10-notch.webp);
    background-size: cover;
    border-radius: 20px 20px 5px 5px;
    display: grid;
    margin-bottom: 60px;
    margin-top: 70px;
    min-height: 80vh;
}


.image-intro {
    background-attachment: fixed;
    background-color: var(--lila);
    background-image: url('./img/abstrac1.webp');
    background-size: cover;
    border-radius: 20px;
    display: none;
    height: 50vh;
    margin: 30px 0 0;


}


.content-display {
    line-height: 6vw;
    width: 60%;
}


.content-display h1 {
    color: var(--white);
}


.txt-intro {
    color: var(--white);
    width: 40%;
        align-self: end;
}




.tlt{
      opacity: 0; 
        
}


.tl{
      opacity: 0; 
          transform: translateY(160px);
        
}


.in-down{
      opacity: 0; 
          transform: translateY(-30px);
        
}



.txt-intro .subtitle-1 {
    font-weight: 300 !important;
}

.btn-scroll {
    background-color: var(--lila);
    border: 1px solid var(--white);
    border-radius: 3px;
    float: right;
    height: 30px;
    width: 30px;

}

.btn-scroll img {
    transition: .5s;
    width: 60%;
}




.btn-scroll:hover img {
    
    margin: 6px;

}



.presentation {
    align-content: center;
    display: inline-grid;
    justify-content: center;
    margin: auto;
    text-align: center;

}



.presentation .content {
    margin: auto;
    width: 100%;
}

.presentation .content .logo-indigo {
    margin-bottom: 60px;
    width: 70px;
}

.presentation .content .body-2 {
    margin: 0 auto 100px;
    width: 60%;

}

.presentation .content .title-4 {
    color: var(--indigo);
    margin: 0 auto 60px;

}


.presentation .content .records {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

.presentation .content .records div {
    color: var(--indigo);
    margin: auto 60px;
    width: 30%;
}


.wedo {
    padding-top: 100px;
}


.wedo .content {
    min-height: 80vh;
    align-items: normal;

}

.wedo .copy {
    width: 45%;
}

.wedo .copy .title-3 {
    color: var(--dark1);
    margin-bottom: 20px;
}

.wedo .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}

.wedo .comerce {
    width: 65%;
    text-align: center;
}

.wedo .image img {
    width: 65%;
}

.wedo .cmss .copy {

    align-self: center;

}

.wedo .cms {
    width: 65%;
    text-align: center;
}


.wedo .cms img {
    width: 90%;
}



.wedo .cms-mob {
    display: none;
    width: 100%;
}

.scope {
    background-attachment: fixed;

    background-image: url(img/pattern10purple.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.scope .content {
    align-items: start;

}

.scope .content .copy .title-2 {
    color: var(--dark1);

}

.scope .content .copy .subtitle-1 {
    color: var(--indigo);

}



.grid {
    display: grid;
    gap: 20px;
    grid-template-areas:
        'item-grid1 item-grid2 item-grid3'
        'item-grid4 item-grid5 item-grid5'
        'item-grid6 item-grid6 item-grid7';
    margin: auto;
    padding-top: 140px;
    width: 65%;
}

.copy {
    width: 30%;
}


.item-grid {
    align-content: end;

    border-radius: 10px;
    height: 200px;
    padding: 30px;

}

.grid1 {
    background-color: var(--indigo);
    color: var(--white);
    grid-area: item-grid1;
}

.grid2 {
    background-color: var(--gray);
    color: var(--indigo);
    grid-area: item-grid2;
}

.grid3 {
    background-color: var(--dark2);
    color: var(--white);
    grid-area: item-grid3;
}

.grid4 {
    background-color: var(--gray);
    color: var(--indigo);
    grid-area: item-grid4;
}

.grid5 {
    background-color: var(--lila);
    color: var(--white);
    grid-area: item-grid5;
}

.grid6 {
    background-color: var(--dark2);
    color: var(--white);
    grid-area: item-grid6;
}

.grid7 {
    background-color: var(--indigo);
    color: var(--white);
    grid-area: item-grid7;
}

.item-grid {
    align-content: space-between;
    display: grid;

}


.item-grid .icon-grid {
    height: 40px;
    justify-self: end;

}



.item-grid .title-5 {

    font-weight: 400;
    font-size: 24px!important;
        line-height: 26px;

}



.scope .content .copy .title-3 {
    margin-bottom: 20px;
}


/*WE ARE*/

.weare-head {
    background-image: url('img/hero-nosotros.webp');
    background-position: bottom center;
 
    background-repeat: no-repeat;
    background-size: 90%;
    min-height: 100vh;
    padding-top: 100px;
  
}


.weare-head .content {
    height: 95vh;
    
}


.weare-head .content .copy {
    width: 50%;
}

.weare-head .content .copy .title-2 {
    font-size: var(--title-b);
    font-weight: 300;
    margin-bottom: 20px;
}



.weare-head .content .copy .title-2 .tag-line {
    margin-left: 10px;

}

.weare-head .content .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}


.weare {
    align-items: center;
    display: grid;
    margin-top: 100px;
    background-image: url(img/pattern10purple.png);
    background-attachment: fixed;
    background-size: cover;
    background-position-x: -700px;
    background-repeat: no-repeat;
}

.weare .content {}


.weare .content .copy {
    width: 35%;
}


.weare .content .copy .subtitle-1 {
    color: var(--indigo);
}


.weare .content .aboutus {
    align-self: end;
    padding: 100px;
    width: 65%;
}


.weare .content .aboutus .title-4 {
    color: var(--indigo);
    margin-bottom: 60px;
}


.weare .content .aboutus ul li {
    margin-bottom: 40px;
}


.sponsors {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.column {
    box-sizing: border-box;
    flex: 1;
    padding: 10px;
    text-align: center;
}

.column img {
    filter: grayscale(1);
    height: 70%;
    width: 60%;
}


.partners{
 
        min-height: 50vh;
        align-content: center;
}


.packs {
    justify-content: center;
    min-height: 100vh;
}

.packs .copy {
    margin: 100px auto 60px;
    text-align: center;
    width: 100%;
}

.packs .copy .title-3 {
    margin-bottom: 20px;
}

.packs .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}

.col-3 {
    display: flex;
    justify-content: center;
}

.card-product {
    align-self: stretch;
    background-image: url('img/pattern10-notch.webp'), linear-gradient(0deg, rgba(38, 22, 76, 1) 0%, rgba(74, 0, 255, 1) 49%, rgba(125, 125, 255, 1) 100%);
    background-size: cover;
    border-radius: 20px;
    color: var(--white);
    display: grid;
    gap: 5px;
    margin: 20px;
    padding: 60px 30px 30px;
    width: 32%;
    box-shadow: 0 5px 30px gray;

}

.card-product .title-product {
    display: flex;
    justify-content: space-between;
    align-items: center;

}


.card-product .title-product .title-4 {
    margin-bottom: 10px;
}

.card-product .tooltip {
    background-color: var(--white);
    border-radius: 50px;
    color: var(--indigo);
    font-size: var(--body-xs);
    padding: 2px 8px;
    transition: .5s;

    margin: 0 10px;

    text-align: center;

    position: relative;

}


.card-product .tooltip:hover {
    background-color: var(--dark2);
    color: var(--white);
}

.endtime {
    font-style: italic;
    font-weight: 300;
    margin-bottom: 20px;
    width: fit-content;
    display: table-column-group;
    height: 20px;
    background-color: var(--white);
    border-radius: 50px;
    padding: 0 15px;
    color: var(--indigo);
}





.card-product .tooltip .tooltip-content {
    display: none;
}

.card-product .tooltip:hover .tooltip-content {
    background-color: var(--white);
    color: var(--indigo);
    border-radius: 20px;
    display: block;
    margin: 20px auto;
    padding: 20px;
    position: absolute;
    right: -100%;
    width: 300px;
}

.card-product .tooltip:hover .tooltip-content .body-3 {
    line-height: normal;
    text-align: left;
}



.card-product ul {
    margin: auto;
    width: 80%;
}

.card-product ul .body-3 {
    font-size: var(--body-xs);

    margin-bottom: 10px;
}

.card-product .btn-sale {
    border: solid 1px var(--white);
    border-radius: 50px;
    background: transparent;
    display: block;
    padding: 8px;
    transition: .5s;
    color: var(--white);
    font-size: var(--body-m);
    text-decoration: none;
}

.card-product .btn-sale:hover {

    background-color: var(--lila);
    border: solid 1px var(--lila);
    color: var(--white);
}


.card-product .cta-sale {
    align-self: end;
    display: inline;
    justify-self: center;
    margin: 20px auto 40px;
    text-align: center;
    width: 100%;
}

.card-product .cta-sale .title-4 {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}



.banner-contact {
    align-content: center;
    background-image: url('img/pattern10-notch.webp'), linear-gradient(90deg, rgba(38, 22, 76, 1) 0%, rgba(74, 0, 255, 1) 49%, rgba(125, 125, 255, 1) 100%);
    background-position: center -30%, center;
    background-repeat: no-repeat;
    background-size: 100%, 100%;
    border-radius: 20px;
    color: var(--white);
    display: grid;
    gap: 40px;
    height: 350px;
    margin: 100px auto;
    padding: 60px;
    width: 95%;

}


.banner-contact .btn-request {
    background-color: transparent;
    border: solid 1px var(--white);
    justify-self: end;
}

.banner-contact .btn-request:hover {
    background-color: var(--indigo);
    border: solid 1px var(--indigo);
    justify-self: end;
}



/*proceso*/

.process {

    background-image: url('img/hero-process.webp');
    background-position: center  80px;
    background-repeat: no-repeat;
    background-size: 90%;
    display: grid;
    min-height: 110vh;
}

.process .content {
    align-items: end;
    height: 105%;
}

.process .content .copy {
    width: 50%;
}

.process .content .copy .title-2 {
    font-size: var(--title-b);
    font-weight: 300;
    margin-bottom: 20px;
}



.process .content .copy .title-2 .tag-line {
    margin-left: 10px;

}

.process .content .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}




.workflow {
    background-attachment: fixed;
    background-image: url(img/pattern10purple.png);
    background-position: 400% center;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    margin-top: 100px;

}

.workflow .content {
    align-items: normal;
    gap: 60px;

    padding:40px;
    border-radius:20px;
    transition:.8s;
}




.workflow .content:hover {
    background-color: var(--lila);
    box-shadow:0 2px 20px #AEAEAE;

}



.workflow .content:hover .deliveries .step-task .group-task .task{
   color:var(--white)!important;   
}

.workflow .content:hover .steps .step .body-2{
    color:var(--white)!important;   
   
}

.workflow .content:hover .deliveries .step-task .group-task {
    border-left: dashed 2px var(--white);
}

.workflow .content:hover .steps .step .title-1{
  -webkit-text-stroke: .5px #fff; /* Grosor y color del contorno */
  color:transparent;
}

.workflow .content:hover .steps .step .title-4{
    color:var(--white)!important;   
   
}



.workflow .content:hover .deliveries .icon-flow{
      animation: pulse 2s infinite;
    
}


@keyframes pulse {
  0% {
    transform: scale(1);
   
  }
  50% {
    transform: scale(1.5);
   
  }
  100% {
    transform: scale(1);
    
  }
}

.workflow .content .steps {
    width: 65%;

}



.workflow .content .steps .step {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;

}

.workflow .content .step div .title-4 {
    color: var(--indigo);
    margin-bottom: 20px;
        transition:.8s;

}

.workflow .content .steps .step .body-2{
    font-size:14px;
    color: #AEAEAE;
        transition:.8s;
}

.workflow .content .step span {
    color: var(--indigo);
    margin-bottom: 60px;
    width: 70px;
        transition:.8s;

}

.workflow .content .steps .step .subtitle-1 {
    color: var(--indigo);
        transition:.8s;
}


.workflow .content .deliveries {
    display: grid;
    justify-content: start;
    width: 35%;
}


.workflow .content .deliveries .icon-flow {
    background-color: var(--indigo);
    border-radius: 50px;
    height: 10px;
    margin-left: -4px;
    width: 10px;
}


.workflow .content .deliveries .step-task {

    list-style: none;
}

.workflow .content .deliveries .step-task .group-task {
    border-left: dashed 2px var(--indigo);
    height: 190px;
    padding: 50px;

}


.workflow .content .deliveries .step-task .group-task .task {
    color: var(--lila);
    list-style: none;
    margin: 10px;
}



/* BOOK*/

.book-head {

    padding-top: 100px;

}

.book-head .content {

    height: auto;

}

.book-head .content .copy {
    width: 60%;
}

.book-head .content .copy .title-2 {
    font-size: var(--title-b);
    font-weight: 300;
    margin-bottom: 20px;
}

.book-head .content .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}


.book-head .filter-book {
    margin: 60px 0;

}

.book-head .filter-book .btn-filter {
    background-color: transparent;
    border: 1px solid var(--indigo);
    border-radius: 50px;
    color: var(--indigo);
    margin: 0 20px 0 0;
    padding: 5px 10px;
    transition: .7s;

}



.book-head .filter-book .btn-filter:hover {
    background-color:var(--lila);
    color: var(--white);
    border: 1px solid var(--lila);

}

.btn-filter.filter-active {
    background-color: var(--indigo) !important;
    color: var(--white) !important;
}


.book-head ul {
    margin: 60px auto;
}


.book-head ul .item-project {
    list-style: none;
    margin: 50px auto 100px;
        transition:1s
    
}


.book-head ul .item-project .content{
    transition:1s
}

.book-head ul .item-project .content:hover{
   
     background-blend-mode: overlay!important;

    
}


.book-head ul .item-project .tag-product {
    background-color: var(--lila);
    border-radius: 50px;
    color: var(--white);
    display: inline-block;
    margin-bottom: 40px;
    padding: 5px 10px;
    text-align: center;
    width: max-content;
}



.btn-go-project {
    background-color: transparent;
    border: solid 1px var(--white);
    border-radius: 3px;
    height: 30px;
    width: 30px;
    float: left;

}

.btn-go-project:hover {
    background-color: var(--lila);
    border: solid 1px var(--lila);
}


.btn-go-project img {
    transition: .5s;
    width: 60%;
    margin: -14px 0;
}


.btn-go-project:hover img {
    margin: -9px 6px;
}



.book-head ul .item-project .cyg {
    background-attachment: fixed;
    background-color: var(--indigo);
    background-image: url('img/comeygana/cycbg.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;
   
}

.book-head ul .item-project .ff {
    background-attachment: fixed;
    background-color: var(--indigo);
    background-image: url('img/furryfriend/furry-hero.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;
}

.book-head ul .item-project .sh {
    background-attachment: fixed;

    background-color: var(--indigo);
    background-image: url('img/sweethoney/sw-hero.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;
}


.book-head ul .item-project .alpha {
    background-attachment: fixed;
    background-color: var(--indigo);
    background-image: url('img/alpha/alpha-hero.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;
}


.book-head ul .item-project .eval {
    background-attachment: fixed;
    background-color: var(--indigo);
    background-image: url('img/eval/eval-hero.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;

}


.book-head ul .item-project .trini {
    background-attachment: fixed;
    background-color: var(--indigo);
    background-image: url('img/trini/trini-hero.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;

}


.book-head ul .item-project .sc {
    background-attachment: fixed;
    background-color: var(--indigo);
    background-image: url('img/softclinic/sc.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    min-height: 450px;
    padding: 100px;

}



.book-head ul .item-project .content .copy {
    width: 40%;
}

.book-head ul .item-project .content .copy .title-3 {
    color: var(--white);
    font-weight: 500;
    margin-bottom: 20px;
}

.book-head ul .item-project .content .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}



/*PROJECTS*/


#cyg .project .hero-project{
    background-image: url(img/comeygana/cycbg.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;

}


#furry .project .hero-project{
    background-image: url(img/furryfriend/furry-hero.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}



#trini .project .hero-project{
    background-image: url(img/trini/trini-hero.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}


#alpha .project .hero-project{
    background-image: url(img/alpha/alpha-hero.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#sweet .project .hero-project{
    background-image: url(img/sweethoney/sw-hero.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#eval .project .hero-project{
    background-image: url(img/eval/eval-hero.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#soft .project .hero-project{
    background-image: url(img/softclinic/sc.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}





.project .hero-project{
    margin-top: 60px;
    min-height: 80vh;
    background-color: var(--lila);
    border-radius: 20px;
    margin-bottom: 40px;
}

.project .content {
    min-height: auto;
    gap: 60px;
    padding: 20px;
}

.project .content .copy {
    width: 65%;
}

.project .content .title-1{
    margin-bottom: 20px;
}

.project .content .subtitle-1 {
    margin-bottom: 20px;
}

.project .content .body-2 {
    margin-bottom: 20px;
    font-weight: 300;
}

.project .content .summary{
    width: 35%;
}


.project .content .summary  .subtitle-2{
    margin-bottom: 20px;
}

.project .content .summary .link-prod{
    display: flex;
    align-items: center;
    height: 40px;
}


.project .content .summary .link-prod .btn-go-project {
    background-color: transparent;
    border: solid 1px var(--dark2);
    border-radius: 3px;
    height: 26px;
    width: 26px;
    float: left;
    margin: 10px;
}

.project .content .summary .link-prod .btn-go-project img {
    transition: .5s;
    width: 60%;
    margin: -6px 0;
}


.project .content .summary .link-prod .btn-go-project:hover img {
    margin: -3px 5px;
}

.project .screens{
    width: 100%;
    margin: 100px auto;
}

.project .screens .content{
    width: 100%;
    text-align: center;
}

.project .screens .content img{
    width: 80%;
    margin: 50px auto;
    border-radius: 20px;
    box-shadow: 0 5px 20px darkgray;

}

.project .screens .content video{
    width: 80%;
    border-radius:20px;
    margin: 50px auto;
    box-shadow: 0 5px 20px darkgray;
}

.nav-projects{
    display: flex;
    min-height: 300px;
  
}


.nav-projects .nav-btns{
    width: 50%;
    align-items: center;
    margin-bottom: 120px;
    text-align: center;
}

.nav-projects .nav-btns a{
margin: auto;
text-decoration: none;
color: var(--lila);
}

.nav-projects .nav-btns a:hover{
   color: var(--indigo);
    }
    



.nav-projects .nav-btns .prev .title-4{

    opacity: .8;
    transition: .5s;

    
        }
    
 .nav-projects .nav-btns .next .title-4{
  
        opacity: .8;
        transition: .5s;
    
            }
            

.nav-projects .nav-btns .prev:hover .title-4{
    visibility: visible;
opacity: 1;

    }

.nav-projects .nav-btns .next:hover .title-4{
    visibility: visible;
    opacity: 1;
        }
        


/*FOOTER*/

footer {
    background-attachment: fixed;
    background-image: url('img/pattern10-notch.webp');
    background-size: cover;
    height: 500px;

}

footer .col-2 {
    align-items: center;
    height: 50%;
    justify-content: center;
}

.brand-w {
    width: 90%;
}

.brand-w .logo-w {
    width: 70px;

}

.suscription {
    width: 45%;
}

.suscription form {
    display: block;

}

.suscription form label {
    color: var(--white);
}

.suscription form input {
    border: none;
    border-radius: 50px;
    height: 40px;
    width: 60%;
}

.suscription form .btn-suscribe {
    background-color: transparent;
    border: solid 1px var(--white);
    border-radius: 50px;
    color: var(--white);
    padding: 8px 26px;
    transition: .5s;
    margin: auto 20px;
}

.suscription form .btn-suscribe:hover {
    background-color: var(--lila);
    border: solid 1px var(--lila);

}



.info {
    align-items: start !important;

}

.info div {
    list-style: none;
    width: 30%;

}

.info div .subtitle-1 {
    color: var(--white);
    display: block;
    margin-bottom: 20px;
}

.info div li {
    margin: 10px 0;
}

.info div .body-2 {
    color: var(--white);
    font-weight: 300;
    text-decoration: none;

}

.info div .body-2:hover {
    color: var(--lila);


}

footer .body-3 {
    color: var(--white);
    margin: -40px 50px 0;
}



/* PAGE FORM*/



.request-head {

    padding-top: 100px;

}


.request-head .copy {
    width: 60%;
}

.request-head .copy .title-2 {
    font-size: var(--title-b);
    font-weight: 300;
    margin-bottom: 20px;
}

.request-head .copy .subtitle-1 {
    color: var(--indigo);
    margin-bottom: 20px;
}


.request-head form {
    display: grid;
    gap: 20px;
    margin: 0 auto;
    max-width: 90%;
    padding: 20px;
}

.request-head form .section-contact {

    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    margin: auto;
    width: 95%;
}

.request-head form .title-4 {
    color: var(--indigo);
    margin: 20px 0;
}


.request-head form input,
select,
textarea {
    background-color: var(--gray);
    border: 1px solid var(--indigo);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--lila);
    margin: 20px auto 10px;
    margin-bottom: 20px;
    padding: 10px;
    width: 90%;
}


input::placeholder {
    color: var(--lila);

}

textarea::placeholder {
    color: var(--lila);

}


.request-head form input[type="text"] {}

/* Botón de enviar */
.request-head form button[type="submit"] {
    background-color: var(--indigo);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    height: 50px;
    justify-self: end;
    margin-right: 4%;
    transition: .5s;
    width: 50px;

}

button[type="submit"]:hover {
    background-color: var(--dark2);
}


.request-head form button[type="submit"] img {
    padding-top: 5px;
}

/* BIG SCREEN*/

@media screen and (min-width: 1800px) {
    section {
        margin: auto 120px;
    }

    .weare-head {
        background-position: center bottom;
        background-size: 95%;
    }


    .process {
        background-position: center;
        background-size: 95%;
    }
}

/*TABLET*/

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


    .menu .menu-open {
        width: 50px !important;
    }

    .menu .menu-nav {
        display: inline-grid;
    }

    .menu .menu-nav nav {
        display: none;
    }

    .menu .menu-open nav {
        background: blue;
        bottom: 0;
        display: table-column !important;
        height: 100vh;
        left: 0;
        line-height: 40px;
        list-style: none;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 9997;
    }

    .menu .menu-nav nav ul {
        align-content: center !important;
        display: block;
        height: 80%;
        list-style: none;
        margin: 100px 50px;
    }

    .menu .menu-nav nav .item-nav .link-nav {
        font-size: var(--title-xs) !important;
        font-weight: 700 !important;
    }

    .nav-active {
        color: var(--lila) !important;
    }


    .menu .menu-nav nav .btn-close {
        background-color: var(--white);
        border: 1px solid var(--dark2);
        border-radius: 3px;
        display: none;
        float: right;
        height: 30px;
        opacity: 0;
        width: 30px;
    }


    .menu .menu-open nav .btn-close {
        background-color: transparent;
        border: 1px solid var(--white);
        border-radius: 3px;
        bottom: 80px;
        display: block;
        height: 40px;
        opacity: 1;
        position: absolute;
        right: 60px;
        text-align: center;
        width: 40px;
        padding: 4px;
    }

    section {
        min-height: 100vh;
    }


    .request {
        text-align: right;
        width: 50%;

    }

    .intro {
        margin-bottom: 100px;
    }

    .scope .content {
        display: block;
        width: 100% !important;
    }

    .copy {
        width: 100%;
    }


    .grid {
        display: grid;
        gap: 20px;
        grid-template-areas:
            'item-grid1'
            'item-grid2'
            'item-grid3'
            'item-grid4'
            'item-grid5'
            'item-grid6'
            'item-grid7';
        margin: auto;
        padding-top: 140px;
        width: 100%;
    }

    .item-grid .icon-grid {
        height: 40px;
        justify-self: start;

    }


    .packs .copy {
        margin: 160px auto 40px;
        text-align: center;
        width: 100%;
    }


    .col-3 {
        display: block;
        justify-content: center;
    }

    .card-product {
        background-image: url('img/pattern10-notch.webp'), linear-gradient(0deg, rgba(38, 22, 76, 1) 0%, rgba(74, 0, 255, 1) 49%, rgba(125, 125, 255, 1) 100%);
        background-size: cover;
        margin: 60px auto;
        width: 100%;
      

    }


    .weare-head .content .copy {
        width: 100%;
    }



    .weare .content {
        display: block;
    }


    .weare .content .copy {
        width: 100%;
    }

    .weare .content .aboutus {
        padding: 40px;
        width: 100%;
    }




    .process {
        background-image: url(img/hero-process.webp);
        background-position: center 100px;
        background-repeat: no-repeat;
    }

    .process .content {

        align-content: end;

    }

    .process .content .copy {
        width: 100%;
    }



    .process .content .copy {
        margin-bottom: 100px;
        width: 100%;
    }


    .workflow .content {

        gap: 20px;
    }

    .workflow .content .deliveries .step-task .group-task {
        padding: 20px;
        width: auto;

    }


    .book-head .content {
        min-height: auto;
    }

    .book-head .content .copy {
        width: 100%;
    }

    .book-head ul .item-project .content {
        padding: 40px;
    }


    .request-head .copy {
        width: 100%;
    }



    .request-head form input,
    select {
        font-size: var(--body-m);

        height: 40px !important;
        margin: 20px auto 10px;
        padding: 10px;
        width: 90%;
    }





    .book-head ul .item-project .cyg {
        background-attachment: scroll;
        padding: 30px;
                background-blend-mode: overlay!important;
       
    }

    .book-head ul .item-project .ff {
        background-attachment: scroll;
        padding: 30px;
                -blend-mode: overlay;
    }

    .book-head ul .item-project .sh {
        background-attachment: scroll;
        padding: 30px;
    }


    .book-head ul .item-project .alpha {
        background-attachment: scroll;
        padding: 30px;
    }


    .book-head ul .item-project .eval {
        background-attachment: scroll;
        padding: 30px;

    }


    .book-head ul .item-project .trini {
        background-attachment: scroll;
        padding: 30px;

    }


    .book-head ul .item-project .sc {
        background-attachment: scroll;
        padding: 30px;

    }

    .book-head ul .item-project .content .copy .title-3 {

        width: fit-content;
    }


    .book-head .filter-book {
        margin: 60px auto;
        text-align: center;
    }

    .book-head .filter-book .btn-filter {

        margin: 20px;
    }








}

/*MOBILE*/

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



    section {
        margin: auto 10px;
        min-height: 100vh;
        padding: 10px;
    }

    .col-2 {
        display: block;


    }

    header {
        padding: 30px 10px 0;
    display: -webkit-inline-box;
    }

    .request {
        right: 10px;
        text-align: right;
        width: auto;

    }

    .btn-request {

        font-size: var(--body-s);
    }


    .weare-head {
        background-position: center bottom;
        background-size: 100%;
    }


    .process {
        background-position: center 15%;
        background-size: 100%;
    }




    .image-intro {
        background-attachment: fixed;
        background-color: var(--lila);
        background-image: url('./img/abstrac1.webp');
        background-size: cover;
        border-radius: 20px;
        height: 60vh;
        margin: 50px 0 10px;


    }


    .content-display {
        font-size: 5vw;
        line-height: 6vw;
        margin-bottom: 20px;
        width: 100%;
    }

    .txt-intro {
        width: 100%;
    }


    .presentation .content .body-2 {
        width: 90%;

    }

    .presentation .content .records {
        display: inline-block;

    }


    .presentation .content .records div {
        margin: 60px auto;
    }

    .wedo .content {
        align-items: center !important;
    }

    .wedo .copy {
        width: 100%;
    }

    .wedo .image {
        width: 100%;

    }


    .wedo .image img {
        margin: 120px auto;
        width: 100%;

    }


    .wedo .cms {
        display: none;
        width: 80%;
    }



    .wedo .cms-mob {
        display: block;
        width: 100%;
    }


    .wedo .cms-mob .cms {
        display: block !important;
        width: 85% !important;
    }

    .wedo .image .cms {
        display: none;
        width: 100%;
    }


    .sponsors {
        display: inline-grid;
        gap: 100px;
        margin: 100px auto 140px;
        width: 100%;
    }


    .card-product .title-4 .tooltip {}

    .banner-contact {
        align-content: center;
        background-image: url(img/pattern10-notch.webp), linear-gradient(90deg, rgba(38, 22, 76, 1) 0%, rgba(74, 0, 255, 1) 49%, rgba(125, 125, 255, 1) 100%);
        background-position: center -30%, center;
        background-repeat: no-repeat;
        background-size: 100%, 100%;
        border-radius: 20px;
        display: grid;
        gap: 40px;
        height: auto;
        min-height: 350px;
        padding: 30px;
        width: 100%;

    }


    .banner-contact .title-3 {
        font-family: "Reddit Sans", sans-serif;
        font-optical-sizing: auto;
        font-size: var(--title-s);
        line-height: 50px;
    }
    
    
.book-head ul .item-project .content{
   
     background-blend-mode: overlay!important;
    
}

    

    .workflow .content .steps {
        width: 95%;

    }

    .workflow .content .steps .step {
        display:block;
        gap: 20px;
    }

    .workflow .content .steps .step span {
        font-size: var(--title-m);
    }


    .workflow .content .deliveries {
        justify-content: center;
        margin-bottom: 100px;
        width: 100%;

    }





    .project .content .copy {
        width: 100%;
    }


    .project .content .summary {
        width: 100%;
    }


    .project .screens .content video {
        width: 100%;
        border-radius: 10px;
        margin: 50px auto;
        box-shadow: 0 5px 20px darkgray;
    }


    .project .screens .content img {
        width: 100%;
        border-radius: 10px;
        margin: 50px auto;
        box-shadow: 0 5px 20px darkgray;
    }


    .nav-projects {
        display: flex;
    }

    .nav-projects .nav-btns {
        width: 100%;
        margin-bottom: 120px;
        padding: 16px;
    }

    .nav-projects .nav-btns .prev .title-4 {
        visibility: visible;
        opacity: 1;
        padding: 0 10px;
        font-size: var(--title-xs);
    
    }

    .nav-projects .nav-btns .next .title-4 {
        visibility: visible;
        opacity: 1;
        padding: 0 10px;
        font-size: var(--title-xs);
    
    }





    .request-head form {
        display: grid;
        gap: 20px;
        margin: 0 auto;
        max-width: 100%;
        padding: 5px;
    }


    .request-head form .section-contact {

        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
    }


/*PROJECTS*/


#cyg .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;

}


#furry .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}



#furry .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}


#alpha .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

#sweet .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

#eval .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

#soft .project .hero-project{
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}







    footer {
        align-content: center;
        background-attachment: scroll;
        display: grid;
        height: auto;
        min-height: 100vh;
        padding-top: 100px;

    }


    .brand-w {
        text-align: center;
        width: 100%;
    }

    .brand-w .logo-w {
        margin: 0 auto 60px;
    }

    .suscription {
        text-align: center;
        width: 100%;
    }

    .suscription form {
        display: inline-block;

    }

    .suscription form input {
        margin-bottom: 20px;
    }

    .suscription form label {
        color: var(--white);
        display: block;
        margin: 10px auto;
    }

    .info div {
        margin-top: 60px;
        text-align: center;
        width: 100%;
    }

    footer .body-3 {
        color: var(--white);
        margin: 100px auto 10px;
    }

}