.vn-header {
     border: 1px solid red;
     height: 100dvh;
}

.vn-main {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 100;
     position: relative;

     h1 {
          color: #FFF;
          text-align: center;
          font-family: "DM Sans";
          font-size: 56px;
          font-style: normal;
          font-weight: 400;
          line-height: 110%;
          font-variant: all-small-caps;
          letter-spacing: 0.4px;
     }

     h2 {
          color: #FFF;
          text-align: center;
          font-family: "DM Sans";
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 160%;
          font-variant: all-small-caps;
          letter-spacing: 0.4px;
     }
}

.vn-container-collapse-bottom-header {
     z-index: 100;
     position: absolute;
     bottom: 0;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 46px;
}

.vn-card-collapse-bottom-header {
     position: relative;
     width: 20%;
     display: flex;
     justify-content: center;
     border-radius: 8px 8px 0 0;
     background:
          linear-gradient(0deg, rgba(226, 0, 122, 0.00) 50%, rgba(226, 0, 122, 0.80) 100%),
          linear-gradient(0deg, rgba(226, 0, 122, 0.50) 0%, rgba(226, 0, 122, 0.50) 100%);
     height: auto;
     overflow: hidden;
     transition: height .5s;
     transition-timing-function: linear;
     interpolate-size: allow-keywords;

     >div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 10px;

          h3 {
               color: #FFF;
               text-align: center;
               font-family: "DM Mono";
               font-size: 13px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               letter-spacing: 1.3px;
               text-transform: uppercase;
          }
     }
}

.vn-container-collapse-bottom-header .vn-card-collapse-bottom-header:hover {
     height: 160px;
}


.vn-section-padding {
     padding: 2% 5%;
}

.vn-button-primary {
     border-radius: 32px;
     background: #E2007A;
     backdrop-filter: blur(12px);
     color: #FFF;
     text-align: center;
     padding: 15px 30px;
     cursor: pointer;
     border: none;
     font-family: "DM Sans";
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 120%;
     letter-spacing: 0.48px;
     height: fit-content;
}

.vn-section-tabs {
     height: 90dvh;
     border: 1px solid
}

/* SECTION SERVICIOS */

.vn-tabs {
     /* max-width: 600px;
     margin: 20px auto; */
}

.vn-tab-list {
     display: flex;
     gap: 10px;
     list-style: none;
     padding: 0;
     margin: 0;

     li {
          width: calc(100% / 3);
     }
}

.vn-tab-button {
     position: relative;
     width: 100%;
     text-align: start;
     padding: 10px 20px 10px 0;
     cursor: pointer;
     background-color: transparent;
     border: none;
     border-bottom: 1px solid #BDBDBD;
     margin-right: -1px;
     transition: background-color 0.3s;
     color: #818181;
     font-family: "DM Sans";
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 140%;
}

.vn-tab-button:hover {
     border-bottom: 1px solid #E2007A;
     font-weight: bold;
     color: #E2007A;
}

.vn-tab-button[aria-selected="true"] {
     border-bottom: 1px solid #E2007A;
     font-weight: bold;
     color: #E2007A;
}

.vn-tab-panel {
     display: none;
     padding: 20px;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
}

.vn-tab-panel[aria-hidden="false"] {
     display: block;
     opacity: 1;
}

.vn-container-panel-us {
     display: flex;
     gap: 30px;

     .vn-panel-left {
          width: calc(100% / 3);

          p {
               color: #818181;
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               letter-spacing: 0.36px;
          }
     }

     .vn-panel-right {
          width: calc(100% - (100% / 3));

          h2 {
               color: #000;
               font-family: "DM Sans";
               font-size: 48px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               letter-spacing: -0.8px;
          }

          >p {
               color: #818181;
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               letter-spacing: 0.36px;
          }

          .vn-container-cards-panel-us {
               display: flex;
               justify-content: space-between;
               gap: 16px;

               >div {
                    display: flex;
                    padding: 26px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    flex: 1 0 0;
                    align-self: stretch;
                    border-radius: 8px;
                    background: #FFEEF7;
               }

               h3 {
                    color: #E2007A;
                    text-align: center;
                    font-family: "DM Sans";
                    font-size: 36px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 120%;
                    font-variant: all-small-caps;
                    letter-spacing: -0.72px;
                    margin: 0;
               }

               p {
                    margin: 0;
                    color: #000;
                    text-align: center;
                    font-family: "DM Sans";
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    font-variant: all-small-caps;
                    letter-spacing: -0.32px;
               }
          }

     }
}


.vn-container-panel-services {
     display: flex;
     gap: 32px;
     justify-content: space-between;

     article {
          display: flex;
          padding: 32px;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          flex: 1 0 0;
          align-self: stretch;
          grid-row: 1 / span 1;
          grid-column: 1 / span 1;
          border-radius: 8px;
          background: #FFEEF7;

          h3 {
               color: #E2007A;
               font-family: "DM Sans";
               font-size: 24px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
          }

          p {
               color: #E2007A;
               font-family: "DM Sans";
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               letter-spacing: 0.32px;
          }

          a {
               color: #E2007A;
               font-family: "DM Sans";
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 120%;
               letter-spacing: 0.8px;
               text-decoration: none;
               border-bottom: 1px solid #E2007A;
               padding-bottom: 10px;
          }

          a::after {
               position: relative;
               display: inline-block;
               content: "";
               background-image: url('./src/icons/vn-arrow-right.svg');
               background-repeat: no-repeat;
               background-size: 16px;
               width: 16px;
               height: 16px;
               margin-left: 20px;
               top: 4px;
          }
     }

}


.vn-container-panel-work {
     position: relative;
     display: flex;
     gap: 16px;

     .vn-panel-left-work {
          width: 60%;

          h2 {
               color: #000;
               font-family: "DM Sans";
               font-size: 48px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               letter-spacing: -0.96px;
          }

          p {
               color: #818181;
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               letter-spacing: 0.36px;
          }
     }

     .vn-panel-right-work {
          position: relative;
          width: 40%;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          grid-template-rows: repeat(4, 1fr);
          grid-column-gap: 16px;
          grid-row-gap: 16px;
     }

     .vn-panel-right-work>div {
          min-height: 100px;
          display: flex;
          padding: 10px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          border-radius: 8px;
          background: #FFEEF7;
          color: #E2007A;
          font-family: "DM Sans";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          letter-spacing: -0.32px;
     }

     .vn-panel-right-work>div:nth-child(1) {
          grid-area: 1 / 1 / 2 / 4;
     }

     .vn-panel-right-work>div:nth-child(2) {
          grid-area: 1 / 4 / 2 / 6;
     }

     .vn-panel-right-work>div:nth-child(3) {
          grid-area: 2 / 1 / 3 / 3;
     }

     .vn-panel-right-work>div:nth-child(4) {
          grid-area: 2 / 3 / 3 / 6;
     }

     .vn-panel-right-work>div:nth-child(5) {
          grid-area: 3 / 1 / 4 / 4;
     }

     .vn-panel-right-work>div:nth-child(6) {
          grid-area: 3 / 4 / 4 / 6;
     }

     .vn-panel-right-work>div:nth-child(7) {
          grid-area: 4 / 1 / 5 / 3;
     }

     .vn-panel-right-work>div:nth-child(8) {
          grid-area: 4 / 3 / 5 / 6;
     }
}

/* SECCION DE CARRUSEL */
.vn-logo-carousel {
     position: relative;
     width: 100%;
     overflow: hidden;
     background-color: transparent;
     padding: 30px 0;
}

.vn-logo-track {
     display: flex;
     width: max-content;
     animation: scroll 30s linear infinite;
}

.vn-logo-track img {
     height: 40px;
     margin: 0 40px;
}

@keyframes scroll {
     from {
          transform: translateX(0);
     }

     to {
          transform: translateX(-50%);
     }
}

/* SECCION SPONSORS */
.vn-section-sponsors {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: #FFF;
     box-shadow: 0 0 32px 0 rgba(226, 0, 122, 0.10) inset;
     padding: 96px 0;

     h2 {
          color: #000;
          text-align: center;
          font-family: "DM Sans";
          font-size: 40px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          letter-spacing: -0.8px;
     }

     p {
          color: #818181;
          text-align: center;
          font-family: "DM Sans";
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 160%;
          letter-spacing: 0.36px;
          padding: 0 15%;
     }
}

/* SECCION SOLUTIONS */
.vn-section-solutions {
     position: relative;

     .vn-header-section-solutions {
          display: flex;
          justify-content: space-between;

          h2 {
               color: #000;
               font-family: "DM Sans";
               font-size: 40px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               letter-spacing: -0.8px;
          }
     }

     .vn-container-panels-solutions {
          position: relative;
          display: flex;
          gap: 32px;

          .vn-panel-solution {
               height: 400px;
               min-width: 20%;
               width: 20%;
               overflow: hidden;
               transition: width 0.5s linear, filter 0.5s linear;
               border-radius: 8px;
               background: lightgray;
               position: relative;
               padding: 32px;
               display: flex;
               flex-direction: column;
               justify-content: flex-end;
               filter: grayscale(100%);

               h3 {
                    color: #FFF;
                    font-family: "DM Sans";
                    font-size: 32px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    letter-spacing: -0.32px;
                    margin: 0;
               }

               p {
                    margin-top: 0;
                    color: #FFF;
                    font-family: "DM Sans";
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 160%;
                    letter-spacing: 0.4px;
               }

               h3,
               p,
               a {
                    position: relative;
                    display: none;
                    /* Ocultos por defecto */
                    z-index: 2;
               }

               a {
                    backdrop-filter: blur(12px);
                    padding: 14px 28px;
                    width: fit-content;
                    border-radius: 32px;
                    border: 1px solid #FFF;
                    color: #FFF;
                    font-family: "DM Sans";
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    letter-spacing: 0.48px;
                    text-decoration: none;
               }

               .vn-bg-panel-solution {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    top: 0;
                    left: 0;
                    z-index: 0;
               }

               /* ESTADO ACTIVO: expandido al hacer click */
               &.active {
                    width: 40%;
                    filter: grayscale(0%);
                    /* Imagen a color */

                    h3,
                    p,
                    a {
                         display: block;
                    }

                    a::after {
                         position: relative;
                         display: inline-block;
                         content: "";
                         background-image: url(./src/icons/vn-arrow-right.svg);
                         background-repeat: no-repeat;
                         background-size: 16px;
                         width: 16px;
                         height: 16px;
                         margin-left: 20px;
                         top: 4px;
                    }
               }

               /* Gradiente con pseudo-elemento */
               &::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: transparent;
                    transition: background 0.5s linear;
                    z-index: 1;
                    border-radius: 8px;
               }

               &.active::before {
                    background: linear-gradient(180deg, rgba(226, 0, 122, 0) 0%, #E2007A 100%);
               }
          }
     }

}

.vn-section-testimonials {
     position: relative;
     padding: 10px 200px;
     overflow: hidden;

     .vn-header-testimonials {
          p {
               color: #000;
               text-align: center;
               font-family: "DM Mono";
               font-size: 13px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               letter-spacing: 1.3px;
               text-transform: uppercase;
          }

          h2 {
               color: #000;
               text-align: center;
               font-family: "DM Sans";
               font-size: 40px;
               font-style: normal;
               font-weight: 400;
               line-height: 130%;
               letter-spacing: -0.8px;
          }
     }

     .swiper-testimonials {
          position: relative;

          .swiper {
               width: 100%;
               height: 100%;
          }

          .swiper-slide {
               width: 100%;
               height: 100% !important;
               max-width: none !important;
          }

          .vn-card-testimonial {
               position: relative;
               display: flex;
               border-radius: 4px;
               background-color: #FFF;
               box-shadow: 0 0 48px 0 rgba(0, 0, 0, 0.10);

               .vn-content-card-testimonial {
                    position: relative;
                    padding: 80px 48px;
                    width: 60%;

                    img {}

                    h3 {
                         color: #000;
                         font-family: "DM Sans";
                         font-size: 32px;
                         font-style: normal;
                         font-weight: 400;
                         line-height: 130%;
                         letter-spacing: -0.64px;
                    }

                    h5 {
                         color: #000;
                         font-family: "DM Sans";
                         font-size: 18px;
                         font-style: normal;
                         font-weight: 400;
                         line-height: 130%;
                    }

                    hr {
                         background: #E6E6E6;
                         border-color: #E6E6E6;
                    }

                    p {
                         color: #818181;
                         font-family: "DM Sans";
                         font-size: 16px;
                         font-style: normal;
                         font-weight: 400;
                         line-height: 160%;
                         letter-spacing: 0.16px;
                    }
               }

               .vn-container-img-card-testimonial {
                    position: relative;
                    width: 40%;

                    img {
                         width: 100%;
                    }
               }
          }

          .vn-container-buttons-testimonials {
               position: absolute;
               top: 0;
               width: 100%;
               height: 100%;
               padding: 0 6.5%;
               display: flex;
               justify-content: space-between;
               align-items: center;
               z-index: 100;

               #vn-btn-next,
               #vn-btn-prev {
                    width: 48px;
                    height: 48px;
                    padding: 16px 4px;
                    border-radius: 50px;
                    background: #E2007A;
                    border: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
               }

               #vn-btn-prev {
                    transform: rotate(180deg);
               }
          }

     }

}



/* .swiper {
     width: 100%;
     height: 100%;
}

.swiper-wrapper {
     background-color: #E2007A;
} */


/* SECTION SEPARATOR */
.vn-section-separator {
     position: relative;
     background-color: #FFEEF7;
     display: flex;
     padding: 80px 130px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     gap: 32px;

     p {
          color: #000;
          text-align: center;
          font-family: "DM Mono";
          font-size: 13px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          letter-spacing: 1.3px;
          text-transform: uppercase;
          margin: 0;
     }

     h2 {
          color: #000;
          text-align: center;
          font-family: "DM Sans";
          font-size: 40px;
          font-style: normal;
          font-weight: 400;
          line-height: 130%;
          letter-spacing: -0.8px;
          margin: 0;
     }
}


.vn-section-form-contact {
     position: relative;

     .vn-container-form-contact {
          position: relative;
          display: flex;
          gap: 40px;
     }

     .vn-container-info-form-contact {
          position: relative;
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: self-start;

          span {
               border-radius: 30px;
               border: 0.5px dashed #818181;
               background: #FFF;
               padding: 10px 16px;
               color: #818181;
               text-align: center;
               font-family: "DM Mono";
               font-size: 12px;
               font-style: normal;
               font-weight: 300;
               line-height: 110%;
               letter-spacing: 1.68px;
               text-transform: uppercase;
          }

          h2 {
               color: #000;
               font-family: "DM Sans";
               font-size: 40px;
               font-style: normal;
               font-weight: 500;
               line-height: 120%;
               letter-spacing: -1.6px;
               margin: 21px 0 15px 0;
          }

          >p {
               color: #818181;
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 160%;
               letter-spacing: 0.36px;
               margin: 0;
          }
     }

     .vn-container-grid-info-form {
          margin-top: 50px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          /* 2 columnas */
          gap: 2rem;
          width: 90%;


          h5 {
               color: #1E1E1E;
               font-family: "DM Sans";
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: 140%;
               margin: 0;
          }

          p {
               color: #818181;
               font-family: "DM Sans";
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 140%;
               margin: 0;
          }
     }


     #vn-form-contact {
          position: relative;
          width: 50%;
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
          border-radius: 8px;
          background: #F5F5F5;
          padding: 48px 64px;

          h3 {
               color: #1E1E1E;
               font-family: "DM Sans";
               font-size: 24px;
               font-style: normal;
               font-weight: 400;
               line-height: 140%;
               letter-spacing: -0.48px;
               margin: 0;
          }

          p {
               color: #818181;
               font-family: "DM Sans";
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: 140%;
               margin: 0 0 20px 0;
          }

          button {
               background-image: url('src/icons/icon-less.svg');
               background-repeat: no-repeat;
               background-size: 10px;
               background-position-x: 90%;
               background-position-y: center;
               width: fit-content;
               padding-right: 50px;
          }
     }

     .container-input-nv {
          position: relative;
          width: 100%;
     }

     .container-input-nv input {
          box-sizing: border-box;
          padding: 15px 15px;
          width: 100%;
          outline: none;
          background: transparent;
          color: #818181;
          font-family: "DM Sans";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          font-variant: all-small-caps;
          border: none;
          border-bottom: 1px solid #BCBCBC;
     }

     .container-input-nv label {
          position: absolute;
          margin: 17px 0;
          padding: 0 4px;
          top: 0;
          left: 0px;
          transition: all 0.2s ease;
          transform-origin: 0% 0%;
          pointer-events: none;
          background: none;

          color: #818181;
          font-family: "DM Sans";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
     }

     .container-input-nv input:focus+label,
     .container-input-nv input:not(:placeholder-shown)+label {
          transform: scale(0.8) translateY(-30px);
          background: transparent;
          color: #000;
     }

     .container-input-nv input:focus {
          color: #000;
          border-color: #E2007A;
     }
}


.vn-footer {
     margin-top: 0;
     padding-top: 20px;
     background-color: #1E1E1E;

     &> :nth-child(3) {
          & address {
               p {
                    color: #FFF;
                    font-family: "DM Sans";
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 140%;
               }
          }
     }

     &> :nth-child(2) {

          a {
               color: #FFF;
               font-family: "DM Sans";
               font-size: 21px;
               font-style: normal;
               font-weight: 500;
               line-height: 140%;
          }
     }

     &> :nth-child(1) {
          p {
               color: #FFF;
               font-family: "DM Sans";
               font-size: 21px;
               font-style: normal;
               font-weight: 500;
               line-height: 140%;
          }
     }
}