ul {
  padding-left: 21px;

  li {
    list-style-type: square;
  }

  li:not(:last-child) {
    margin-bottom: 10px;
  }
}

.logo-section {
  display: flex;
  flex-direction: column;
  gap: 3px;

  @media (min-width: 1120px) {
    gap: 8px;
  }
}

.logo-marquee {
  overflow: hidden;
  position: relative;
}

.logo-strip {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: logoMarquee 25s linear infinite;

  @media (min-width: 768px) {
    gap: 48px;
  }

  div {
    height: 40px;
    display: block;
    opacity: 0.85;
    object-fit: contain;
    transition: opacity var(--dur-fast) var(--ease-standard);

    &.conalep {
      width: 35px;
      height: 35px;

      background-repeat: no-repeat;
      background-size: contain;
      background-position: center 40%;

      &.black {
        background-image: url("../public/logos/conalep-black.svg");

        &:hover {
          background-image: url("../public/logos/conalep.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/conalep-white.svg");
      }

      @media (min-width: 1120px) {
        width: 45px;
        height: 45px;
      }
    }

    &.spaghetto {
      width: 63px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/spaghetto-black.svg");

        &:hover {
          background-image: url("../public/logos/spaghetto.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/spaghetto-white.svg");
      }

      @media (min-width: 1120px) {
        width: 95px;
        height: 30px;
      }
    }

    &.ebc {
      width: 40px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/ebc-black.svg");

        &:hover {
          background-image: url("../public/logos/ebc.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/ebc-white.svg");
      }

      @media (min-width: 1120px) {
        width: 70px;
        height: 35px;
      }
    }

    &.fundacion-donde {
      width: 89px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/fundacion-donde-black.svg");

        &:hover {
          background-image: url("../public/logos/fundacion-donde.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/fundacion-donde-white.svg");
      }

      @media (min-width: 1120px) {
        width: 133px;
        height: 30px;
      }
    }

    &.icb {
      width: 28px;
      height: 35px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/icb-black.svg");

        &:hover {
          background-image: url("../public/logos/icb.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/icb-white.svg");
      }

      @media (min-width: 1120px) {
        width: 36px;
        height: 45px;
      }
    }

    &.megamedia {
      width: 83px;
      height: 25px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/megamedia-black.svg");

        &:hover {
          background-image: url("../public/logos/megamedia.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/megamedia-white.svg");
      }

      @media (min-width: 1120px) {
        width: 117px;
        height: 35px;
      }
    }

    &.unid {
      width: 48px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/unid-black.svg");

        &:hover {
          background-image: url("../public/logos/unid.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/unid-white.svg");
      }

      @media (min-width: 1120px) {
        width: 73px;
        height: 30px;
      }
    }

    &.vive-xux {
      width: 60px;
      height: 25px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/vive-xux-black.svg");

        &:hover {
          background-image: url("../public/logos/vive-xux.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/vive-xux-white.svg");
      }

      @media (min-width: 1120px) {
        width: 85px;
        height: 35px;
      }
    }

    &.carfer {
      width: 49px;
      height: 30px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/carfer-black.svg");

        &:hover {
          background-image: url("../public/logos/carfer.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/carfer-white.svg");
      }

      @media (min-width: 1120px) {
        width: 66px;
        height: 40px;
      }
    }

    &.patron {
      width: 23px;
      height: 30px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;

      &.black {
        background-image: url("../public/logos/patron-black.svg");

        &:hover {
          background-image: url("../public/logos/patron.svg");
        }
      }

      &.white {
        background-image: url("../public/logos/patron-white.svg");
      }

      @media (min-width: 1120px) {
        width: 31px;
        height: 40px;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip,
  .logo-strip-2 {
    animation: none;
    transform: none;
  }
}

.hero-section {
  display: flex;
  flex-direction: column;
  padding-top: 78px;
  padding-bottom: 26px;
  gap: 24px;

  background-color: var(--color-beige);
  background-repeat: no-repeat;

  @media (min-width: 1120px) {
    padding-top: 115px;
    padding-bottom: 22px;
    gap: 30px;
  }

  .container {
    position: relative;
    width: 100%;
    column-gap: 0px;

    @media (min-width: 1120px) {
      column-gap: 16px;
    }
  }

  .hero-copy {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    @media (min-width: 1120px) {
      margin-top: 40px;
      grid-column: 1 / span 6;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    h1 {
      width: 100%;
      height: 100%;
      max-width: 280px;
      max-height: 45px;
      grid-column: span 12;
      text-align: center;
      font-size: var(--heading-h2-size);
      line-height: var(--heading-h2-line);
      justify-self: center;
      margin-bottom: 14px;

      @media (min-width: 1120px) {
        font-size: var(--heading-h1-size);
        line-height: var(--heading-h1-line);
        text-align: left;
        grid-column: span 6;
        max-width: max-content;
        max-height: max-content;
        margin-bottom: 0px;
      }
    }

    p {
      font-size: var(--body-m-size);
      line-height: var(--body-m-line);
      text-align: center;
      grid-column: span 12;
      margin: 0;

      &:nth-of-type(1) {
        margin-bottom: 22px;
      }

      &:nth-of-type(2) {
        margin-bottom: 17px;
      }

      @media (min-width: 1120px) {
        font-size: var(--body-l-size);
        line-height: var(--body-l-line);
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
        grid-column: span 5;

        &:nth-of-type(1) {
          margin-bottom: 0px;
        }

        &:nth-of-type(2) {
          margin-bottom: 0px;
        }
      }
    }

    .first-subcopy,
    .second-subcopy {
      @media (min-width: 1120px) {
        margin: 0;
        line-height: var(--body-m-line);
        max-width: 453px;
      }
    }

    .second-subcopy {
      @media (min-width: 1120px) {
        margin-top: var(--space-2);
      }
    }

    .stack {
      grid-column: span 12;
      margin: auto;
      width: 100%;
      max-width: 176px;

      @media (min-width: 1120px) {
        margin: 0;
        grid-column: 1 / span 6;
        max-width: 196px;
      }

      .btn {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        width: 100%;

        @media (min-width: 1120px) {
          font-size: var(--body-m-size);
          line-height: var(--body-m-line);
          margin-top: var(--space-2);
        }
      }
    }
  }

  .hero-media {
    grid-column: span 12;
    margin-bottom: 18px;

    @media (min-width: 1120px) {
      grid-column: 7 / span 6;
      grid-row: 1 / span 2;
      margin-bottom: 0;
    }

    .hero {
      display: flex;
      justify-content: center;

      .hero-composition {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;

        @media (min-width: 1120px) {
          max-width: 680px;
          aspect-ratio: 5 / 4;
        }

        .layer {
          position: relative;
          flex-shrink: 0;
          height: auto;

          @media (min-width: 1120px) {
            position: absolute;
            height: auto;
            object-fit: contain;
            user-select: none;
            pointer-events: none;
          }
        }

        .photo {
          width: 48%;
          object-fit: contain;
        }

        .photo--top {
          top: 0.75%;
          width: 100%;
          max-width: 52.7%;
          min-width: 178px;
          min-height: 130px;

          @media (min-width: 1120px) {
            top: 0;
            left: 16.6%;
            max-width: 269px;
            max-height: 190px;
          }
        }

        .photo--bottom {
          width: 100%;
          max-width: 54.5%;
          min-width: 189px;
          min-height: 142px;
          align-self: flex-end;
          object-fit: fill;

          @media (min-width: 1120px) {
            bottom: 2%;
            right: 0;
            max-width: 264px;
            max-height: 176px;
            object-fit: contain;
          }
        }

        .badge {
          position: absolute;
          width: 30%;
        }

        .badge--vacantes {
          top: 2.6%;
          right: 21.52%;
          width: 100%;
          max-width: 27.2%;
          min-width: 96px;
          min-height: 58px;

          @media (min-width: 1120px) {
            top: 17%;
            left: 0;
            max-width: 132px;
            max-height: 80px;
          }
        }

        .badge--perfil {
          top: 28.5%;
          right: 11.05%;
          width: 100%;
          max-width: 42.5%;
          min-width: 153px;
          min-height: 22px;

          @media (min-width: 1120px) {
            top: 21.5%;
            left: 54%;
            max-width: 220px;
            max-height: 32px;
          }
        }

        .badge--employeed {
          display: none;
          width: 100%;
          height: 100%;

          @media (min-width: 1120px) {
            display: block;
            bottom: 17.6%;
            right: 42%;
            width: 100%;
            height: auto;
            max-width: 134.64px;
            max-height: 63px;
          }
        }

        .badge--follow-up {
          bottom: 1.5%;
          left: 12.61%;
          width: 100%;
          max-width: 42.5%;
          min-width: 153px;
          min-height: 22px;

          @media (min-width: 1120px) {
            bottom: 4.5%;
            left: auto;
            right: 40.6%;
            max-width: 244px;
            max-height: 35px;
          }
        }

        .bubble {
          position: absolute;
          width: 20%;
          object-fit: cover;
        }

        .bubble--chat-1 {
          bottom: 35.13%;
          left: 11.8%;
          width: 100%;
          max-width: 36.28%;
          min-width: 130.61px;
          min-height: 65px;

          @media (min-width: 1120px) {
            top: 40%;
            left: auto;
            right: 40.5%;
            max-width: 212px;
            max-height: 105.5px;
          }
        }

        .bubble--chat-2 {
          bottom: 15.1%;
          left: 35.5%;
          width: 100%;
          max-width: 22.5%;
          min-width: 81px;
          min-height: 37px;

          @media (min-width: 1120px) {
            top: 37%;
            left: auto;
            right: 14.8%;
            max-width: 149px;
            max-height: 68px;
          }
        }
      }
    }
  }

  .features {
    position: relative;
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    gap: 6px;

    @media (min-width: 1120px) {
      position: absolute;
      bottom: 54%;
      align-self: start;
      display: flex;
      gap: 21px;
      margin-top: -40px;
      width: 100%;
      max-width: 582px;
      max-height: 51px;
      grid-column: 1 / span 7;
      grid-row: 2;
    }

    .feature {
      display: block;
      font-size: var(--body-m-size);
      line-height: var(--body-m-line);

      @media (min-width: 1120px) {
        display: inherit;
        width: 100%;
        max-width: 170px;
        font-size: var(--body-l-size);
        line-height: var(--body-l-line);
      }

      &:nth-of-type(1) {
        @media (max-width: 1120px) {
          padding-right: 6px;
        }
      }

      &:nth-of-type(2) {
        @media (max-width: 1120px) {
          padding-right: 6px;
        }
      }

      &:last-child {
        @media (max-width: 1120px) {
          padding-right: 6px;
        }
        @media (min-width: 1120px) {
          max-width: 200px;
        }
      }

      &:not(:last-child) {
        border-right: 1px solid #110e3d;
      }
    }
  }
}

.bridge-section {
  padding-top: 35px;
  padding-bottom: 14px;
  row-gap: 0px;

  @media (min-width: 1120px) {
    padding-top: 90px;
    padding-bottom: 0px;
  }

  .title {
    grid-column: span 6;

    @media (min-width: 1120px) {
      grid-column: span 12;
    }

    h1 {
      font-size: var(--heading-h2-size);
      line-height: var(--heading-h2-line);
      margin-top: 0px;

      @media (min-width: 1120px) {
        font-size: var(--heading-h1-size);
        line-height: var(--heading-h1-line);
        margin-bottom: 2px;
      }
    }

    p {
      font-size: var(--body-s-size);
      line-height: var(--body-s-line);
      width: 100%;

      @media (min-width: 1120px) {
        font-size: var(--body-xl-size);
        line-height: var(--body-xl-line);
        width: 100%;
        max-width: 740px;
        max-height: 36px;
      }
    }
  }

  .bridge-diagram {
    @media (max-width: 1120px) {
      width: 100%;
      margin: 0 auto;
    }

    @media (min-width: 1120px) {
      margin-top: 88px;
    }

    .bridge-strip {
      position: relative;
      display: flex;
      flex-direction: column;

      @media (min-width: 1120px) {
        display: block;
        height: 322px;
      }

      .bridge-item {
        position: relative;
        display: flex;
        width: 100%;

        img {
          width: 100%;
          height: 100%;
        }

        /* Initial Animation State */
        img,
        span,
        .text {
          opacity: 0;
        }

        span {
          position: absolute;
          width: 100%;
          height: 100%;
          padding: 0px 16px;
          font-size: var(--body-s-size);
          line-height: var(--body-s-line);
          background-color: var(--color-yellow);
          border-radius: 24px;
        }

        &:nth-child(1) {
          width: 100%;
          height: 100%;
          order: 2;
          gap: 12px;
          align-items: end;
          margin-bottom: 40px;
          max-width: 376px;

          img {
            aspect-ratio: 136 / 126;
            max-width: 136px;
            max-height: 126px;
          }

          span {
            top: 17%;
            left: 32%;
            bottom: auto;
            font-size: var(--body-xs-size);
            max-width: 85px;
            max-height: 22px;
          }

          .text {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin-bottom: 20px;
            max-width: 150px;

            @media (min-width: 1120px) {
              display: none;
            }
          }

          @media (min-width: 1120px) {
            position: absolute;
            top: 9.6%;
            max-width: 135px;
            max-height: 136px;
            margin-bottom: 0px;

            img {
              max-width: 135px;
              max-height: 136px;
            }

            span {
              top: auto;
              bottom: 8%;
              left: 11%;
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);
              max-width: 102px;
              max-height: 20px;
            }

            p {
              display: none;
            }
          }
        }

        &:nth-child(2) {
          display: none;
          width: 100%;
          height: 100%;

          @media (min-width: 1120px) {
            display: block;
            position: absolute;
            top: 23.9%;
            left: 13.85%;
            max-width: 29px;
            max-height: 29px;
            z-index: 1;
          }
        }

        &:nth-child(3) {
          order: 2;
          width: 100%;
          height: 100%;
          gap: 12px;
          align-items: end;
          margin-bottom: 38px;
          max-width: 376px;
          margin-left: auto;

          img {
            aspect-ratio: 184 / 122;
            max-width: 184px;
            max-height: 122px;
            order: 2;
          }

          span {
            top: 13%;
            left: 18%;
            bottom: auto;
            font-size: var(--body-xs-size);
            max-width: 141px;
            max-height: 22px;
            z-index: 1;
          }

          .text {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin-bottom: 16px;
            max-width: 150px;

            @media (min-width: 1120px) {
              display: none;
            }
          }

          @media (min-width: 1120px) {
            position: absolute;
            top: 0%;
            left: 18.12%;
            max-width: 233px;
            max-height: 167px;
            align-self: auto;
            margin-bottom: 0px;

            img {
              order: inherit;
              max-width: 233px;
              max-height: 167px;
            }

            span {
              top: 20px;
              left: 16px;
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);
              max-width: 177px;
              max-height: 20px;
            }
          }
        }

        &:nth-child(4) {
          order: 1;
          width: 100%;
          height: 100%;
          max-width: 79px;
          max-height: 79px;
          align-self: center;
          margin-bottom: 43px;

          @media (min-width: 1120px) {
            position: absolute;
            top: 8%;
            right: 36.2%;
            max-width: 120px;
            max-height: 120px;
            margin-bottom: 0px;
          }
        }

        &:nth-child(5) {
          order: 3;
          width: 100%;
          height: 100%;
          gap: 12px;
          align-items: end;
          margin-bottom: 44px;
          max-width: 376px;

          img {
            aspect-ratio: 184 / 122;
            max-width: 184px;
            max-height: 122px;
          }

          span {
            top: 17%;
            left: 44%;
            bottom: auto;
            font-size: var(--body-xs-size);
            max-width: 76px;
            max-height: 22px;
          }

          .text {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin-bottom: 28px;
            max-width: 150px;

            @media (min-width: 1120px) {
              display: none;
            }
          }

          @media (min-width: 1120px) {
            position: absolute;
            top: 0%;
            right: 0%;
            max-width: 233px;
            max-height: 167px;
            align-items: auto;
            margin-bottom: 0px;

            img {
              max-width: 233px;
              max-height: 167px;
            }

            span {
              top: 15px;
              left: 12px;
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);
              max-width: 90px;
              max-height: 20px;
            }
          }
        }

        &:nth-child(6) {
          display: none;
          order: 5;
          width: 100%;
          height: 100%;
          max-width: 174px;
          max-height: 122px;

          @media (min-width: 1120px) {
            display: block;
            position: absolute;
            bottom: 25.6%;
            left: 9.1%;
            max-width: 174px;
            max-height: fit-content;
          }
        }

        &:nth-child(7) {
          display: none;
          order: 6;
          width: 100%;
          height: 100%;
          max-width: 136px;
          max-height: 126px;

          @media (min-width: 1120px) {
            display: block;
            position: absolute;
            top: -11%;
            left: 40%;
            max-width: fit-content;
            max-height: fit-content;
          }
        }

        &:nth-child(8) {
          display: none;
          order: 7;

          @media (min-width: 1120px) {
            display: block;
            position: absolute;
            top: -11%;
            left: 64.6%;
            width: auto;
          }
        }

        &:nth-child(9) {
          display: none;
          order: 8;

          @media (min-width: 1120px) {
            display: block;
            position: absolute;
            bottom: 19.5%;
            left: 37.1%;
            width: auto;
            max-width: 170px;
            max-height: fit-content;
          }
        }

        &:nth-child(10) {
          display: none;
          order: 9;

          @media (min-width: 1120px) {
            display: block;
            position: absolute;
            bottom: 25.5%;
            right: 19.4%;
            width: auto;
            max-width: 170px;
            max-height: fit-content;
          }
        }

        &:nth-child(11) {
          order: 4;
          width: 100%;
          height: 100%;
          align-items: end;

          .white-space {
            width: 100%;
            height: 100%;
            max-width: 27%;
          }

          img {
            aspect-ratio: 136 / 126;
            max-width: 136px;
            max-height: 126px;
          }

          .text {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin-bottom: 32px;
            max-width: 100px;
            margin-left: 4px;

            @media (min-width: 1120px) {
              display: none;
            }
          }

          @media (min-width: 1120px) {
            display: none;
          }
        }
      }
    }
  }
}

.beneficios-section {
  padding-top: 32px;
  padding-bottom: 48px;
  background:
    linear-gradient(to bottom, transparent 80%, var(--color-black) 100%),
    radial-gradient(
      circle at top left,
      rgba(164, 118, 255, 0.4) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at right,
      rgba(164, 118, 255, 0.4) 0%,
      transparent 50%
    ),
    var(--color-black);

  @media (min-width: 1120px) {
    padding-top: 80px;
    padding-bottom: 142.5px;
  }

  .container {
    column-gap: 0px;
    row-gap: 0px;

    @media (min-width: 1120px) {
      row-gap: 0px;
    }
  }

  .title {
    grid-column: span 6;
    margin-bottom: 12px;

    @media (min-width: 1120px) {
      grid-column: span 12;
      margin-bottom: 14px;
    }

    h1 {
      font-size: var(--heading-h2-size);
      line-height: var(--heading-h2-line);
      margin: 0;

      @media (min-width: 1120px) {
        font-size: var(--heading-h1-size);
        line-height: var(--heading-h1-line);
        margin-bottom: 2px;
      }
    }

    p {
      font-size: var(--body-s-size);
      line-height: var(--body-s-line);

      @media (min-width: 1120px) {
        font-size: var(--body-xl-size);
        line-height: var(--body-xl-line);
      }
    }
  }

  .beneficios-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    @media (min-width: 1120px) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: center;
      margin-top: 20px;
    }

    .beneficios-media,
    .beneficios-copy {
      grid-column: span 6;
    }

    .beneficios-media {
      position: relative;
      order: 2;
      height: 100%;

      @media (min-width: 1120px) {
        order: inherit;
      }

      img {
        position: absolute;

        &:nth-child(1) {
          position: relative;
          min-width: 252px;
          min-height: 161px;
          max-width: 73.5%;

          @media (min-width: 1120px) {
            width: 100%;
            height: auto;
            display: block;
            max-width: 453px;
            max-height: 297px;
            aspect-ratio: 453 / 297;
          }
        }

        &:nth-child(2) {
          bottom: -18%;
          left: 10.6%;
          max-width: 112px;
          max-height: 54px;
          aspect-ratio: 112 / 54;

          @media (min-width: 1120px) {
            bottom: -21%;
            right: 10.2%;
            left: auto;
            width: 100%;
            height: auto;
            display: block;
            max-width: 174px;
            max-height: 84px;
            aspect-ratio: 174 / 84;
          }
        }

        &:nth-child(3) {
          display: none;

          @media (min-width: 1120px) {
            top: 4.4%;
            right: 7.5%;
            width: 100%;
            height: auto;
            display: block;
            max-width: 245px;
            max-height: 35px;
          }
        }

        &:nth-child(4) {
          bottom: -8%;
          left: 56%;
          max-width: 159px;
          max-height: 28px;
          aspect-ratio: 159 / 28;

          @media (min-width: 1120px) {
            bottom: -8.8%;
            right: auto;
            left: 8.2%;
            width: 100%;
            height: auto;
            display: block;
            max-width: 241px;
            max-height: 42px;
            aspect-ratio: 241 / 42;
          }
        }

        &:nth-child(5) {
          top: 13%;
          left: 72%;
          max-width: 93px;
          max-height: 64px;
          aspect-ratio: 93 / 64;

          @media (min-width: 1120px) {
            top: 36%;
            right: 0%;
            width: 100%;
            height: auto;
            display: block;
            max-width: 146px;
            max-height: 99px;
          }
        }
      }
    }

    .beneficios-copy {
      order: 1;
      height: 100%;
      margin-bottom: 15px;

      @media (min-width: 1120px) {
        order: inherit;
        margin-bottom: 0px;
      }

      .beneficios-point {
        display: flex;
        flex-direction: column;
        gap: 1px;

        &:nth-child(1) {
          margin-bottom: 10px;

          @media (min-width: 1120px) {
            margin-top: 12%;
            margin-bottom: 0px;
          }

          h3 {
            font-size: var(--heading-h4-size);
            line-height: var(--heading-h4-line);

            @media (min-width: 1120px) {
              font-size: var(--heading-h3-size);
              line-height: var(--heading-h3-line);
            }
          }

          p {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin: 0;

            @media (min-width: 1120px) {
              font-size: var(--body-l-size);
              line-height: var(--body-l-line);
              max-width: 472px;
            }
          }
        }

        &:nth-child(2) {
          margin-bottom: 10px;

          @media (min-width: 1120px) {
            margin-top: 5%;
            margin-bottom: 0px;
          }

          h3 {
            font-size: var(--heading-h4-size);
            line-height: var(--heading-h4-line);

            @media (min-width: 1120px) {
              font-size: var(--heading-h3-size);
              line-height: var(--heading-h3-line);
            }
          }

          p {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin: 0;

            @media (min-width: 1120px) {
              font-size: var(--body-l-size);
              line-height: var(--body-l-line);
              max-width: 300px;
            }
          }
        }

        &:nth-child(3) {
          @media (min-width: 1120px) {
            margin-top: 5%;
          }

          h3 {
            font-size: var(--heading-h4-size);
            line-height: var(--heading-h4-line);

            @media (min-width: 1120px) {
              font-size: var(--heading-h3-size);
              line-height: var(--heading-h3-line);
            }
          }

          p {
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);
            margin: 0;

            @media (min-width: 1120px) {
              font-size: var(--body-l-size);
              line-height: var(--body-l-line);
              max-width: 434px;
            }
          }
        }
      }
    }
  }
}

.tabs-section {
  padding-top: 36px;
  padding-bottom: 40px;
  background-color: var(--color-beige);
  position: relative;
  overflow: hidden; /* Restore layout containment without the blur effects */

  @media (max-width: 1023px) {
    overflow: visible;
  }

  @media (min-width: 1120px) {
    padding: 80px 0;
  }

  .container {
    row-gap: 0px;
    column-gap: 0px;

    @media (min-width: 1120px) {
      row-gap: 24px;
      column-gap: 16px;
    }

    .title {
      grid-column: span 6;
      margin-bottom: 0px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-bottom: 34px;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 342px;

        @media (min-width: 1120px) {
          font-size: var(--body-xl-size);
          line-height: var(--body-xl-line);
          max-width: 100%;
        }
      }
    }

    .tabs-wrapper {
      .tabs-nav {
        @media (max-width: 1023px) {
          display: none;
        }
      }

      .tabs-content-wrapper {
        @media (max-width: 1023px) {
          display: flex;
          flex-direction: column;
          gap: 20px;
          overflow: visible;
        }

        @media (min-width: 1120px) {
          padding: 0px;
          min-height: auto;
        }

        .tab-pane {
          padding: 28px 16px;
          margin-top: 38px;

          @media (max-width: 1023px) {
            display: block !important;
            position: sticky;
            top: 80px; /* Adjust based on header height */
            background-color: var(--color-dark);
            padding-bottom: 40px;
            margin-top: 0 !important;
            min-height: 60vh;
          }

          @media (min-width: 1120px) {
            padding: 24px 34px;
            padding-top: 34px;
            padding-bottom: 18px;
            margin-top: 0px;
          }

          .tab-grid {
            display: grid;
            grid-template-areas:
              "title"
              "image"
              "list"
              "button";
            gap: 0;

            @media (min-width: 1120px) {
              grid-template-areas:
                "title image"
                "list image"
                "button image";
              grid-template-columns: 52.5% 1fr;
              column-gap: 24px;
              row-gap: 0;
            }

            .tab-info {
              display: block;
              grid-area: title;
              font-size: var(--heading-h3-size);
              line-height: var(--heading-h3-line);
              margin-bottom: 18px;

              @media (min-width: 1120px) {
                font-size: var(--heading-h2-size);
                line-height: var(--heading-h2-line);
                max-width: 330px;
                margin-bottom: 0px;
              }
            }

            .tab-media {
              grid-area: image;
              position: relative;
              width: 100%;
              height: 100%;

              @media (min-width: 1120px) {
                top: -7px;
                max-width: 444px;
                max-height: 213px;
                aspect-ratio: 444 / 213;
                margin-bottom: 0px;
              }
            }

            .tab-list {
              grid-area: list;
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);
              margin: 0;
              margin-top: 18px;
              margin-bottom: 8px;

              @media (min-width: 1120px) {
                font-size: var(--body-m-size);
                line-height: var(--body-m-line);
                margin-top: 0px;
                margin-bottom: 0px;
              }

              li {
                margin-bottom: 0;
              }
            }

            .btn {
              text-decoration: none;
              grid-area: button;
              max-width: 196px;
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);
              padding-inline: 0px;

              @media (min-width: 1120px) {
                max-width: 218px;
                font-size: var(--body-m-size);
                line-height: var(--body-m-line);
              }
            }
          }

          &#empresas {
            margin-top: 45px;

            @media (max-width: 1023px) {
              z-index: 10;
            }

            @media (min-width: 1120px) {
              margin-top: 0px;
            }
          }

          &#instituciones {
            @media (max-width: 1023px) {
              z-index: 20;
            }
            .tab-info {
              @media (min-width: 1120px) {
                max-width: 376px;
              }
            }

            .btn {
              max-width: 214px;
            }
          }

          &#estudiantes {
            @media (max-width: 1023px) {
              z-index: 30;
            }
            .tab-info {
              max-width: 250px;
              @media (min-width: 1120px) {
                max-width: 450px;
              }
            }

            .btn {
              max-width: 244px;

              @media (min-width: 1120px) {
                max-width: 275px;
              }
            }
          }

          /* &#empresas {
            .tab-grid {
              .tab-info {
                order: 1;
                display: block;
                font-size: var(--heading-h3-size);
                line-height: var(--heading-h3-line);
                margin-bottom: 18px;

                @media (min-width: 1120px) {
                  font-size: var(--heading-h2-size);
                  line-height: var(--heading-h2-line);
                }
              }

              .tab-media {
                order: 2;
                width: 100%;
                height: 100%;
                max-width: 307px;
                max-height: 156px;
                aspect-ratio: 307 / 156;
                margin-bottom: 18px;
              }

              .tab-list {
                order: 3;
                font-size: var(--body-s-size);
                line-height: var(--body-s-line);
                margin: 0;
                margin-bottom: 18px;

                @media (min-width: 1120px) {
                  font-size: var(--body-m-size);
                  line-height: var(--body-m-line);
                }

                li {
                  margin-bottom: 0px;
                }
              }

              .btn {
                order: 3;
              }
            }
          }

          &#instituciones {
            margin-top: 0px;
            margin-bottom: 32px;
            padding-inline: 16px;

            @media (min-width: 1120px) {
              margin-top: 24px;
              padding: 24px;
            }

            .tab-grid {
              .tab-info {
                order: 1;
                display: block;
                font-size: var(--heading-h3-size);
                line-height: var(--heading-h3-line);
                margin-bottom: 18px;

                @media (min-width: 1120px) {
                  font-size: var(--heading-h2-size);
                  line-height: var(--heading-h2-line);
                }
              }

              .tab-media {
                order: 2;
                width: 100%;
                height: 100%;
                max-width: 307px;
                max-height: 156px;
                aspect-ratio: 307 / 156;
                margin-bottom: 18px;
              }

              .tab-list {
                order: 3;
                font-size: var(--body-s-size);
                line-height: var(--body-s-line);
                margin: 0;
                margin-bottom: 18px;

                @media (min-width: 1120px) {
                  font-size: var(--body-m-size);
                  line-height: var(--body-m-line);
                }

                li {
                  margin-bottom: 0px;
                }
              }

              .btn {
                order: 3;
              }
            }
          }

          &#estudiantes {
            margin-top: 0px;
            margin-bottom: 32px;
            padding-inline: 16px;

            @media (min-width: 1120px) {
              margin-top: 24px;
              padding: 24px;
            }

            .tab-info {
              grid-area: title;
              display: block;
              font-size: var(--heading-h3-size);
              line-height: var(--heading-h3-line);
              margin-bottom: 18px;

              @media (min-width: 1120px) {
                font-size: var(--heading-h2-size);
                line-height: var(--heading-h2-line);
              }
            }

            .tab-media {
              grid-area: image;
              width: 100%;
              height: 100%;
              max-width: 307px;
              max-height: 156px;
              aspect-ratio: 307 / 156;
              margin-bottom: 18px;
            }

            .tab-list {
              grid-area: list;
              font-size: var(--body-s-size);
              line-height: var(--body-s-line);
              margin: 0;
              margin-bottom: 18px;

              @media (min-width: 1120px) {
                font-size: var(--body-m-size);
                line-height: var(--body-m-line);
              }

              li {
                margin-bottom: 0px;
              }
            }

            .btn {
              grid-area: button;
            }
          } */
        }
      }
    }
  }
}

.title {
  margin-bottom: 14px;

  h1 {
    font-size: var(--heading-h1-size);
    line-height: var(--heading-h1-line);
    margin-bottom: 2px;
  }

  p {
    font-size: var(--body-xl-size);
    line-height: var(--body-xl-line);
    max-width: 718px;
  }
}

.tabs-wrapper {
  grid-column: 1 / span 12;
}

.tabs-nav {
  display: flex;
  align-items: flex-end;
  grid-column: 1 / span 12;
}

.tab-btn {
  height: 36px;
  max-height: 36px;
  padding: 0 24px;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--body-xl-size);
  line-height: var(--body-xl-line);
  font-weight: var(--weight-medium);
  cursor: pointer;
  border-radius: 16px 16px 0 0;
  transition: all 0.3s ease;
  /* Slight overlap or tight spacing */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.tab-btn:hover {
  z-index: 2;
  filter: brightness(1.1);
}

.tab-btn.is-active {
  z-index: 10;
  /* margin-bottom: -4px; */
}

/* Tab Colors */
.tab-btn[data-theme="dark"] {
  background-color: var(--color-black);
  color: var(--color-white);
}

.tab-btn[data-theme="purple"] {
  background-color: rgba(164, 118, 255, 0.3);
  /* Lighter purple for inactive */
  color: var(--color-black);
  /* Or purple text? */
}

.tab-btn.is-active[data-theme="purple"] {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.tab-btn[data-theme="beige"] {
  background-color: var(--color-beige);
  color: var(--color-black);
  background-image:
    radial-gradient(
      circle at 8% 100%,
      rgba(241, 234, 136, 0.35) 0%,
      transparent 100%
    ),
    radial-gradient(
      circle at 182% 100%,
      rgba(14, 202, 221, 0.25) 0%,
      transparent 106%
    );
}

.tab-btn.is-active[data-theme="beige"] {
  background-color: var(--color-beige);
  color: var(--color-black);
  background-image:
    radial-gradient(
      circle at 8% 100%,
      rgba(241, 234, 136, 0.35) 0%,
      transparent 100%
    ),
    radial-gradient(
      circle at 182% 100%,
      rgba(14, 202, 221, 0.25) 0%,
      transparent 106%
    );
}

/* Adjust beige active state to match content background */
/* If content is beige, tab is beige. */

/* Explicit overrides based on screenshot colors */
.tab-btn[data-theme="purple"] {
  background-color: #d2bbff;
  color: rgba(17, 14, 61, 0.95);
}

.tab-btn.is-active[data-theme="purple"] {
  background-color: #d2bbff;
  color: rgba(17, 14, 61, 0.95);
}

.tab-btn[data-theme="beige"] {
  background-color: #f0f2e4;
  /* Light beige/greenish from screenshot? looks standard beige */
  color: var(--color-neutral-800);
}

/* If active, it matches the beige content */

.tabs-content-wrapper {
  padding: 36px 32px;
  padding-bottom: 16px;
  border-radius: 0 16px 16px 16px;
  position: relative;
  z-index: 5;
  transition: background-color 0.3s ease;
  min-height: 269px;
  overflow: hidden;
  grid-column: 1 / span 12;
}

/* Refined Dark Theme (Empresas) */
.tabs-content-wrapper.is-dark {
  background-color: #110e3d; /* "Dark purple almost black" */
  background-image:
      /* Purple - Bottom Left */
    radial-gradient(
      circle at 0% 274%,
      rgba(164, 118, 255, 0.45) 0%,
      transparent 60%
    ),
    /* Purple - Top Right */
    radial-gradient(
        circle at 100% 0%,
        rgba(164, 118, 255, 0.45) 0%,
        transparent 60%
      );
}

.tab-btn[data-theme="dark"] {
  background-color: #0d0b2e;
  color: var(--color-white);
}

.tab-btn.is-active[data-theme="dark"] {
  background-color: #110e3d;
  color: var(--color-white);
  /* Purple wash connection */
}

.tabs-content-wrapper.is-purple {
  background-color: var(--color-beige);
  background-image:
    radial-gradient(circle at left, var(--color-purple) 0%, transparent 25%),
    radial-gradient(circle at 130% 100%, var(--color-purple), transparent);
}

/* Refined Beige Theme with Blobs (Yellow/Blue/Purple Focus) */
.tabs-content-wrapper.is-beige {
  background-color: #ffffff; /* User: "No es beige" */
  background-image:
    radial-gradient(
      circle at 0% 50%,
      rgba(241, 234, 136, 0.35) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 34% 50%,
      rgba(14, 202, 221, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 130% 50%,
      rgba(164, 118, 255, 0.5) 0%,
      transparent 50%
    );
}

/* Ensure the active tab "connects" by having a matching background or transparency */
.tab-btn[data-theme="beige"] {
  background-color: #f7f7f7; /* Light gray for inactive to contrast with white */
  color: var(--color-black);
}

.tab-btn.is-active[data-theme="beige"] {
  background-color: #ffffff;
  color: var(--color-black);
  background-image:
    radial-gradient(
      circle at 8% 100%,
      rgba(241, 234, 136, 0.35) 0%,
      transparent 100%
    ),
    radial-gradient(
      circle at 182% 100%,
      rgba(14, 202, 221, 0.25) 0%,
      transparent 106%
    );
}

.tab-pane {
  display: none;
  animation: fadeIn 0.5s ease;
  /* height: 269px; */
}

.tab-pane.is-active {
  display: block;
}

.tab-grid {
  display: flex;
  gap: 24px;

  button {
    align-self: start;
  }
}

#empresas {
  .tab-info {
    h2 {
      max-width: 318px;
    }
  }

  .tab-info ul {
    list-style: none;
    margin-top: 15px;
    padding-left: 14px;
    max-width: 552px;
  }

  .tab-info li {
    position: relative;
    margin-bottom: 0;
    padding-left: 8px;
    font-size: var(--body-m-size);
    line-height: 20px;
  }

  .tab-info li::marker {
    content: "•";
    position: absolute;
    left: 0;
    color: currentColor;
  }

  .tab-info .btn {
    width: 100%;
    max-width: 218px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
  }

  .tab-media {
    position: relative;

    img {
      width: 100%;

      &:nth-child(1) {
        min-width: 179px;
        max-width: 58%;
      }
      &:nth-child(2) {
        position: absolute;
        top: 10%;
        left: 44%;
        min-width: 149px;
        min-height: 30px;
        max-width: 48%;
      }
      &:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 42%;
        min-width: 179px;
        max-width: 58%;
      }
    }
  }
}

#estudiantes {
  .tab-info ul {
    list-style: none;
    margin-top: 12px;
    margin-bottom: 18px;
    padding-left: 14px;
    max-width: 528px;
  }

  .tab-info li {
    position: relative;
    margin-bottom: 0;
    padding-left: 8px;
    font-size: var(--body-m-size);
    line-height: 20px;

    &:nth-child(1) {
      max-width: 454px;
    }
  }

  .tab-info li::marker {
    content: "•";
    position: absolute;
    left: 0;
    color: currentColor;
  }

  .tab-info .btn {
    width: 100%;
    max-width: 275px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
  }

  .tab-media {
    position: relative;

    img {
      width: 100%;

      &:nth-child(1) {
        position: relative;
        left: 41%;
        min-width: 179px;
        max-width: 58%;

        @media (min-width: 1024px) {
          left: 42%;
        }
      }
      &:nth-child(2) {
        position: absolute;
        top: 10%;
        left: 6%;
        min-width: 149px;
        min-height: 30px;
        max-width: 48%;

        @media (min-width: 1024px) {
          top: 16%;
          left: 8%;
        }
      }
      &:nth-child(3) {
        position: absolute;
        bottom: 20%;
        left: 6%;
        min-width: 179px;
        max-width: 58%;

        @media (min-width: 1024px) {
          left: 8%;
          bottom: 16%;
        }
      }
    }
  }
}

#instituciones {
  .tab-info ul {
    list-style: none;
    margin-top: 12px;
    margin-bottom: 20px;
    padding-left: 14px;
    max-width: 536px;
  }

  .tab-info li {
    position: relative;
    margin-bottom: 0;
    padding-left: 8px;
    font-size: var(--body-m-size);
    line-height: 20px;
  }

  .tab-info li::marker {
    content: "•";
    position: absolute;
    left: 0;
    color: currentColor;
  }

  .tab-info .btn {
    width: 100%;
    max-width: 218px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
  }

  .tab-media {
    position: relative;

    img {
      width: 100%;

      &:nth-child(1) {
        min-width: 179px;
        max-width: 58%;

        @media (min-width: 1024px) {
          position: relative;
          left: 20%;
        }
      }
      &:nth-child(2) {
        position: absolute;
        top: 6%;
        left: 44%;
        min-width: 151px;
        min-height: 30px;
        max-width: 48%;

        @media (min-width: 1024px) {
          top: 18%;
          left: 0%;
          max-width: 166.32px;
        }
      }
      &:nth-child(3) {
        position: absolute;
        top: 45%;
        left: 42%;
        min-width: 152px;
        max-width: 58%;

        @media (min-width: 1024px) {
          top: 52%;
          left: 0%;
          max-width: 168.92px;
        }
      }
      &:nth-child(4) {
        position: absolute;
        top: 64%;
        left: 42%;
        min-width: 152px;
        max-width: 58%;

        @media (min-width: 1024px) {
          top: 68%;
          left: 0%;
          max-width: 167px;
        }
      }
      &:nth-child(5) {
        display: none;
        position: absolute;
        top: 28%;
        right: 8%;
        width: 100%;
        max-width: 84px;

        @media (min-width: 1024px) {
          display: block;
        }
      }
      &:nth-child(6) {
        display: none;
        position: absolute;
        top: 11%;
        right: 0%;
        width: 100%;
        max-width: 138px;

        @media (min-width: 1024px) {
          display: block;
        }
      }
    }
  }
}

.tabs-section.is-inview .tab-pane.is-active .tab-media img {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .tab-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .tab-info {
    display: contents;
  }

  .tab-info h2 {
    order: 1;
    width: 100%;
  }

  .tab-media {
    order: 2;
    width: 100%;
  }

  .tab-media img {
    width: 100%;
    height: auto;
  }

  .tab-info ul {
    order: 3;
  }

  .tab-info button {
    order: 4;
    width: auto;
  }

  .tabs-content-wrapper {
    padding: 32px;
    border-radius: 24px;
    border-top-left-radius: 0;
  }

  /* Mobile Stacked Tabs */
  .tabs-nav {
    display: none !important;
  }

  .tabs-content-wrapper {
    background: transparent !important;
    background-image: none !important;
    padding-top: 40px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .tab-pane {
    display: block !important;
    border-radius: 24px;
    border-top-left-radius: 0;
    padding: 24px;
    margin-bottom: 32px;
    position: relative;
    margin-top: 48px;
    overflow: visible;
  }

  .tab-pane::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    height: 26px;
    padding: 0 24px;
    border-radius: 12px 12px 0 0;
    font-family: var(--font-sans);
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    display: flex;
    align-items: center;
    width: fit-content;

    @media (min-width: 1120px) {
      top: -36px;
      font-family: var(--font-sans);
      font-size: var(--body-xl-size);
      line-height: var(--body-xl-line);
      height: 36px;
    }
  }

  /* Empresas Card */
  #empresas {
    background-color: var(--color-black);
    background-image:
      radial-gradient(
        circle at bottom left,
        var(--color-purple),
        transparent 60%
      ),
      radial-gradient(circle at top right, var(--color-purple), transparent 60%);
    color: var(--color-white);
  }
  #empresas::before {
    content: "Para empresas";
    background: radial-gradient(
      circle at bottom left,
      var(--color-black) 6%,
      transparent 215%
    );
    background-color: var(--color-purple);
    color: var(--color-white);

    @media (min-width: 1024px) {
      background: transparent;
    }
  }
  #empresas h2,
  #empresas .tab-list {
    color: var(--color-white);
  }
  #empresas .tab-list li::before {
    color: var(--color-white);
  }

  /* Instituciones Card */
  #instituciones {
    background-color: var(--color-beige);
    background-image:
      radial-gradient(circle at left, var(--color-purple) 0%, transparent 25%),
      radial-gradient(circle at top right, var(--color-purple), transparent);
    color: var(--color-black);

    @media (max-width: 1024px) {
      background-image:
        radial-gradient(
          circle at top left,
          var(--color-purple) -20%,
          transparent 50%
        ),
        radial-gradient(
          circle at bottom right,
          var(--color-purple) -30%,
          transparent 70%
        );
    }
  }
  #instituciones::before {
    content: "Para Instituciones educativas";
    background: radial-gradient(
      circle at bottom left,
      var(--color-purple) -33%,
      transparent 115%
    );
    background-color: var(--color-beige);
    color: var(--color-black);

    @media (min-width: 1024px) {
      background: transparent;
    }
  }

  /* Estudiantes Card */
  #estudiantes {
    background-color: #f0f4f8;
    background-image: radial-gradient(
      circle at left,
      var(--color-beige),
      var(--color-blue)
    );
    color: var(--color-black);

    @media (max-width: 1024px) {
      background-image:
        radial-gradient(
          circle at bottom right,
          var(--color-purple) -20%,
          transparent 50%
        ),
        radial-gradient(
          circle at top left,
          var(--color-yellow) -30%,
          transparent 70%
        ),
        radial-gradient(
          circle at top right,
          var(--color-blue) -30%,
          transparent 70%
        );
    }
  }
  #estudiantes::before {
    content: "Para estudiantes";
    background:
      radial-gradient(
        circle at top left,
        var(--color-yellow) 0% transparent 50%
      ),
      radial-gradient(circle at top right, var(--color-blue) 0% transparent 70%);
    background-color: var(--color-yellow);
    color: var(--color-black);

    @media (min-width: 1024px) {
      background: radial-gradient(
        circle at bottom left,
        var(--color-yellow) -15%,
        transparent 1035%
      );
    }
  }

  .tab-media img {
    opacity: 1;
    animation: none;
  }
}

.hiw-section {
  padding-top: 8px;
  padding-bottom: 40px;
  background:
    radial-gradient(
      760px circle at 85% 65%,
      rgba(164, 118, 255, 0.28) 0%,
      transparent 60%
    ),
    var(--color-beige);

  @media (min-width: 1024px) {
    padding-top: 80px;
    padding-bottom: 52px;
    background:
      radial-gradient(
        760px circle at 85% 65%,
        rgba(164, 118, 255, 0.28) 0%,
        transparent 60%
      ),
      var(--color-beige);
  }

  .container {
    row-gap: 0px;

    @media (min-width: 1024px) {
      row-gap: 24px;
    }

    .title {
      grid-column: span 6;
      margin-bottom: 42px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-bottom: 0px;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 710px;

        @media (min-width: 1120px) {
          font-size: var(--body-xl-size);
          line-height: var(--body-xl-line);
          max-width: 100%;
        }
      }
    }

    .hiw-flow {
      grid-column: span 6;
      display: grid;
      grid-template-areas:
        "hiw-label-1 hiw-label-2"
        "match-1 match-4"
        "match-2 match-5"
        "match-3 match-6"
        "match-7 match-7";
      grid-template-columns: 1fr 1fr;
      row-gap: 5px;
      column-gap: 15px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        grid-template-areas:
          "hiw-label-1 hiw-label-1 hiw-label-1 hiw-label-1"
          "match-1 match-2 match-3 match-7"
          "match-4 match-5 match-6 match-7"
          "hiw-label-2 hiw-label-2 hiw-label-2 hiw-label-2";
        grid-template-columns: repeat(4, 285px);
        row-gap: 0px;
        column-gap: 0px;
      }

      .hiw-item {
        display: flex;
        flex-direction: column;

        @media (min-width: 1024px) {
          opacity: 0;
          transition: opacity 0.6s ease-out;
          gap: 16px;
        }

        .hiw-title {
          display: flex;
          align-items: start;

          @media (min-width: 1120px) {
            min-height: 48px;
          }
        }

        &:nth-of-type(1) {
          grid-area: match-1;

          h3 {
            max-width: 138px;
          }

          p {
            max-width: 265px;
          }
        }

        &:nth-of-type(2) {
          grid-area: match-2;

          h3 {
            max-width: 140px;
          }

          p {
            max-width: 220px;
          }
        }

        &:nth-of-type(3) {
          grid-area: match-3;

          p {
            max-width: 256px;
          }
        }

        &:nth-of-type(4) {
          grid-area: match-4;
        }

        &:nth-of-type(5) {
          grid-area: match-5;

          h3 {
            max-width: 206px;
          }

          p {
            max-width: 260px;
          }
        }

        &:nth-of-type(6) {
          grid-area: match-6;

          p {
            max-width: 260px;
          }
        }

        &:nth-of-type(7) {
          grid-area: match-7;
          display: grid;
          grid-template-areas:
            "icon"
            "title"
            "text";
          align-self: center;
          row-gap: 0px;
          column-gap: 14px;
          margin-bottom: 0;
          text-align: center;

          @media (min-width: 1120px) {
            grid-template-areas:
              "icon title"
              "icon text";
            margin-bottom: 46px;
            text-align: left;
          }

          .hiw-icon {
            grid-area: icon;
          }

          img {
            justify-self: center;

            @media (min-width: 1120px) {
              justify-self: start;
            }
          }

          h3 {
            grid-area: title;
            margin: 0;

            @media (min-width: 1120px) {
            }
          }

          p {
            grid-area: text;
            margin: 0;

            @media (min-width: 1120px) {
            }
          }
        }

        &:nth-of-type(4),
        &:nth-of-type(5),
        &:nth-of-type(6) {
          margin-top: 0;

          @media (min-width: 1120px) {
            margin-top: 42px !important;
          }

          h3,
          h4 {
            /* margin-bottom: 8px; */

            @media (max-width: 1120px) {
              margin-bottom: 0px;
            }
          }
        }

        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(5),
        &:nth-of-type(6),
        &:nth-of-type(7) {
          @media (max-width: 1120px) {
            margin-top: 26px;
          }
        }

        img {
          width: 100%;
          height: 100%;
          max-width: 32px;
          max-height: 32px;
          margin-bottom: 6px;

          @media (min-width: 1120px) {
            max-width: 40px;
            max-height: 40px;
            margin-bottom: 0;
          }
        }

        h3,
        h4 {
          margin-bottom: 0px;

          @media (max-width: 1120px) {
            font-size: var(--heading-h4-size);
            line-height: var(--heading-h4-line);
            margin-bottom: 4px;
          }
        }

        p {
          margin: 0;
          font-size: var(--body-s-size);
          line-height: var(--body-s-line);

          @media (min-width: 1120px) {
            font-size: var(--body-m-size);
            line-height: var(--body-m-line);
          }
        }
      }

      .hiw-label {
        &:first-of-type {
          grid-area: hiw-label-1;
          margin-bottom: 13px;
        }

        &:last-of-type {
          grid-area: hiw-label-2;
        }
      }
    }

    /* Animation Trigger */
    &.is-inview {
      .hiw-item {
        @media (min-width: 1024px) {
          opacity: 1;
        }

        /* Always Visible: 1-1, 2-1 */
        &:nth-of-type(1),
        &:nth-of-type(4) {
          transition-delay: 0s;
          opacity: 1; /* Ensure they stay visible if logic overrides */
        }

        /* Step 1: 1-2, 2-2 */
        &:nth-of-type(2),
        &:nth-of-type(5) {
          transition-delay: 0.1s;
        }

        /* Step 2: 1-3, 2-3 */
        &:nth-of-type(3),
        &:nth-of-type(6) {
          transition-delay: 0.3s;
        }

        /* Step 3: 3-1 */
        &:nth-of-type(7) {
          transition-delay: 0.5s;
        }
      }
    }

    .hiw-cta {
      grid-column: span 6;
      display: flex;
      justify-content: center;
      margin-top: 39px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-top: 0;
      }

      button {
        width: 100%;
        max-width: 196px;
      }
    }
  }
}

.trust-section {
  padding-top: 38px;
  background:
    linear-gradient(to bottom, transparent 80%, var(--color-black) 100%),
    radial-gradient(
      circle at top left,
      rgba(164, 118, 255, 0.4) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at right,
      rgba(164, 118, 255, 0.4) 0%,
      transparent 50%
    ),
    var(--color-black);
  overflow: hidden;

  @media (min-width: 1120px) {
    padding-top: 80px;
  }

  .container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;

    @media (min-width: 1120px) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .title {
      grid-column: span 6;
      margin-bottom: 0px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-bottom: 36px;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;
        margin-bottom: 8px;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 710px;

        @media (min-width: 1120px) {
          font-size: var(--body-xl-size);
          line-height: var(--body-xl-line);
          max-width: 100%;
        }
      }
    }

    .logo-section {
      grid-column: span 6;
      padding-top: 28px;
      padding-bottom: 10px;
      margin-bottom: 8px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 16px;
      }

      img {
        height: 40px;
        display: block;
        opacity: 0.85;
        object-fit: contain;
        transition: opacity var(--dur-fast) var(--ease-standard);

        &.conalep {
          width: 35px;
          height: 35px;

          @media (min-width: 1120px) {
            width: 45px;
            height: 45px;
          }
        }

        &.spaghetto {
          width: 63px;
          height: 20px;

          @media (min-width: 1120px) {
            width: 95px;
            height: 30px;
          }
        }

        &.ebc {
          width: 40px;
          height: 20px;

          @media (min-width: 1120px) {
            width: 70px;
            height: 35px;
          }
        }

        &.fundacion-donde {
          width: 89px;
          height: 20px;

          @media (min-width: 1120px) {
            width: 133px;
            height: 30px;
          }
        }

        &.icb {
          width: 28px;
          height: 35px;

          @media (min-width: 1120px) {
            width: 36px;
            height: 45px;
          }
        }

        &.megamedia {
          width: 83px;
          height: 25px;

          @media (min-width: 1120px) {
            width: 117px;
            height: 35px;
          }
        }

        &.unid {
          width: 48px;
          height: 20px;

          @media (min-width: 1120px) {
            width: 73px;
            height: 30px;
          }
        }

        &.vive-xux {
          width: 60px;
          height: 25px;

          @media (min-width: 1120px) {
            width: 85px;
            height: 35px;
          }
        }

        &.carfer {
          width: 49px;
          height: 30px;

          @media (min-width: 1120px) {
            width: 66px;
            height: 40px;
          }
        }

        &.patron {
          width: 23px;
          height: 30px;

          @media (min-width: 1120px) {
            width: 31px;
            height: 40px;
          }
        }
      }
    }

    .trust-carousel {
      grid-column: 1 / -1; /* Ocupar todo el ancho disponible */
      display: flex;
      flex-direction: column;
      gap: 0px;
      width: 100%;

      @media (min-width: 1120px) {
        grid-column: span 12;
        gap: 40px;
        overflow: visible;
      }
    }

    .trust-cards {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      padding: 0px 20px; /* Padding lateral para que la primera card no pegue al borde */
      margin: 0 -20px; /* Margen negativo para compensar el padding del container padre si es necesario, o ajustar según grid */
      width: calc(100% + 40px); /* Compensar margin negativo */

      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
      }

      @media (min-width: 1120px) {
        gap: 20px;
        padding: 0;
        margin: 0;
        width: 100%;
        overflow-x: auto;
      }
    }

    .trust-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      z-index: 10;
      width: 100%;
      margin-top: 12px;
      margin-bottom: 12px;

      .trust-pagination-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 1); /* Más visible */
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;

        &.is-active {
          width: 32px;
          height: 6px;
          background: var(--color-purple);
          border-radius: 100px;
          opacity: 1;
        }
      }
    }

    .trust-cards .trust-card {
      flex: 0 0 343px; /* Ancho fijo como en Figma */
      max-width: 76vw; /* Fallback para pantallas muy pequeñas */
      scroll-snap-align: center;
      height: auto; /* Permitir que crezca */

      @media (min-width: 1120px) {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
        min-height: auto;
      }
    }

    .trust-card {
      background: rgba(243, 243, 232, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: 0px 4px 4px 0px rgb(0, 0, 0, 25%);
      padding: 16px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: transform var(--dur-normal) var(--ease-standard);

      @media (min-width: 1120px) {
        gap: 20px;
      }

      > img {
        width: 100%;
        height: 100%;
        max-width: 24px;
        max-height: 24px;

        @media (min-width: 1120px) {
          max-width: 32px;
          max-height: 32px;
        }
      }

      .trust-quote {
        margin-bottom: 0px;

        @media (min-width: 1120px) {
          margin-bottom: 0px;
        }
      }

      .trust-author {
        margin-top: auto;
      }
    }

    .trust-quote {
      margin: 0;
    }

    .trust-author {
      display: flex;
      align-items: center;
      gap: 7px;

      @media (min-width: 1120px) {
        margin-top: auto;
      }
    }

    .trust-avatar {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-weight: var(--weight-semibold);
      font-size: 12px;
      letter-spacing: 0.02em;
      color: var(--color-white);
      background: rgba(164, 118, 255, 0.9);
      box-shadow: 0 10px 20px rgba(17, 14, 61, 0.18);
    }

    .trust-avatar--alt {
      background: rgba(17, 14, 61, 0.88);
    }

    .trust-avatar--warm {
      background: rgba(255, 174, 0, 0.92);
      color: rgba(17, 14, 61, 0.95);
    }

    .trust-author-name {
      font-size: var(--body-s-size);
      line-height: 1.2;
      font-weight: var(--weight-semibold);
      color: rgba(17, 14, 61, 0.92);
    }

    .trust-author-role {
      color: rgba(17, 14, 61, 0.62);
    }

    .trust-cta {
      grid-column: span 6;
      display: grid;
      justify-items: center;
      padding-top: 10px;

      @media (min-width: 1120px) {
        grid-column: 5 / span 4;
        padding-top: 20px;
      }

      button {
        width: 100%;
        max-width: 202px;
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);

        @media (min-width: 1120px) {
          max-width: 226px;
          font-size: var(--body-m-size);
          line-height: var(--body-m-line);
        }
      }
    }
  }

  .press-container {
    padding-top: 76px;
    padding-bottom: 26px;
    margin-bottom: 18px;

    @media (min-width: 1120px) {
      padding-top: 160px;
      padding-bottom: 80px;
      margin-bottom: 0;
    }

    .container {
      gap: 40px;
    }

    .title {
      margin-bottom: 18px;

      @media (min-width: 1120px) {
        margin-bottom: 40px;
      }
    }

    .press-carousel {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .press-viewport {
      display: flex;
      gap: 24px;
      align-items: stretch;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 0px 20px;
      margin: 0 -20px;
      width: calc(100% + 40px);

      @media (min-width: 1120px) {
        padding: 0;
        margin: 0;
        width: 100%;
      }
    }

    .press-viewport::-webkit-scrollbar {
      display: none;
    }

    .press-card {
      flex: 0 0 auto;
      /* width: clamp(240px, 30vw, 340px); */
      width: 265px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      scroll-snap-align: center;
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
      transform: translateZ(0);
    }

    .press-card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .press-card-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 14px 14px 12px;
    }

    .press-card-arrow {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: var(--color-white);
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      transition: background 0.3s ease;
    }

    .press-card:hover .press-card-arrow {
      background: rgba(255, 255, 255, 0.4);
    }

    /* Mobile Pagination (Dots) for Press */
    .press-pagination-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      z-index: 10;
      width: 100%;

      @media (min-width: 1120px) {
        display: none;
      }

      .press-pagination-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 1);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;

        &.is-active {
          width: 32px;
          height: 6px;
          background: var(--color-purple);
          border-radius: 100px;
          opacity: 1;
        }
      }
    }

    .press-controls {
      display: none; /* Hide on mobile */

      @media (min-width: 1120px) {
        display: flex; /* Restore flex for desktop controls */
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 6px;
      }

      .press-pagination {
        font-size: var(--body-m-size);
        line-height: var(--body-m-line);
      }
    }

    .press-pagination {
      min-width: 44px;
      text-align: center;
      opacity: 0.9;
    }

    .press-nav {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 0;
      background: rgba(255, 255, 255, 0.95);
      color: rgba(17, 14, 61, 0.95);
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    .press-nav:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    @media (min-width: 769px) {
      .press-viewport {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 11 * 20px) / 12);
        gap: 20px;
        padding-right: 0;
        padding-left: 0;
      }

      .press-card {
        width: auto;
        grid-column: span 3;
      }
    }
  }
}

.future-section {
  padding-top: 38px;
  padding-bottom: 40px;
  background:
    radial-gradient(
      900px circle at 92% 14%,
      rgba(164, 118, 255, 0.35) 0%,
      rgba(164, 118, 255, 0) 55%
    ),
    radial-gradient(
      820px circle at 86% 55%,
      rgba(14, 202, 221, 0.26) 0%,
      rgba(14, 202, 221, 0) 60%
    ),
    var(--color-beige);

  @media (min-width: 1120px) {
    padding-top: 80px;
    padding-bottom: 106px;
  }

  .container {
    row-gap: 0px;
    column-gap: 0px;

    @media (min-width: 1120px) {
      row-gap: 24px;
      column-gap: 16px;
    }

    .title {
      grid-column: span 6;
      margin-bottom: 10px;

      @media (min-width: 1120px) {
        grid-column: span 12;
        margin-bottom: 6px;
      }

      h1 {
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin: 0;
        margin-bottom: 4px;

        @media (min-width: 1120px) {
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 2px;
        }
      }

      p {
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        max-width: 710px;

        @media (min-width: 1120px) {
          font-size: var(--body-xl-size);
          line-height: var(--body-xl-line);
          max-width: 100%;
        }
      }
    }

    .future-grid {
      grid-column: span 12;
      display: grid;
      grid-template-areas:
        "future-list"
        "future-button"
        "future-media";
      row-gap: 6px;

      @media (min-width: 1024px) {
        grid-template-areas:
          "future-list future-media"
          "future-button future-media";
        grid-template-columns: minmax(0, 548px) 1fr;
        column-gap: 24px;
        row-gap: 0px;
      }

      .future-points {
        grid-area: future-list;
        display: flex;
        flex-direction: column;
        gap: 14px;

        @media (min-width: 1120px) {
          gap: 11px;
        }

        .future-point {
          &:nth-child(1) {
            grid-column: span 6;
          }

          &:nth-child(2) {
            grid-column: span 5;
          }

          &:nth-child(3) {
            grid-column: span 6;
          }

          .future-point-title {
            color: var(--color-purple);
            font-size: var(--heading-h4-size);
            line-height: var(--heading-h4-line);
            margin: 0;

            @media (min-width: 1120px) {
              font-size: var(--heading-h3-size);
              line-height: var(--heading-h3-line);
              margin-bottom: 2px;
            }
          }

          p {
            margin: 0;
            font-size: var(--body-s-size);
            line-height: var(--body-s-line);

            @media (min-width: 1120px) {
              font-size: var(--body-l-size);
              line-height: var(--body-l-line);
            }
          }
        }
      }

      .btn {
        grid-area: future-button;
        font-size: var(--body-s-size);
        line-height: var(--body-s-line);
        margin-top: 4px;
        max-width: 248px;

        @media (min-width: 1120px) {
          font-size: var(--body-m-size);
          line-height: var(--body-m-line);
          margin-top: 12px;
          max-width: 280px;
        }
      }

      .future-media {
        grid-area: future-media;
        display: flex;
        position: relative;
        height: 100%;
        justify-content: end;
        padding-top: 24px;

        @media (min-width: 1024px) {
          padding-top: 8px;
        }

        img {
          width: 76.83%;
          display: block;
          margin: 0 auto;
        }

        .future-image {
          width: 100%;
          margin: inherit;
          max-width: 62%;
          min-width: 206px;
          min-height: 186px;

          @media (min-width: 1120px) {
            max-width: 421px;
            max-height: 307px;
            aspect-ratio: 421 / 307;
            margin-right: 63px;
          }
        }

        .future-image-1 {
          position: absolute;
          top: 9%;
          left: 25%;
          bottom: auto;
          width: 100%;
          max-width: 34.8%;
          min-width: 125.64px;
          min-height: 18.23px;

          @media (min-width: 1120px) {
            top: auto;
            bottom: 36%;
            left: 0;
            max-width: 188.95px;
            max-height: 27.43px;
            aspect-ratio: 188.95 / 27.43;
          }
        }

        .future-image-2 {
          position: absolute;
          top: 23%;
          left: 5.5%;
          bottom: auto;
          right: auto;
          width: 100%;
          max-width: 146px;
          max-height: 88px;
          aspect-ratio: 146 / 88;

          @media (min-width: 1120px) {
            top: auto;
            left: auto;
            bottom: -9.6%;
            right: 0;
            max-width: 190px;
            max-height: 114px;
            aspect-ratio: 190 / 114;
          }
        }

        .future-image-3 {
          position: absolute;
          bottom: 3%;
          left: 21%;
          width: 100%;
          max-width: 92px;
          max-height: 54px;
          aspect-ratio: 92 / 54;

          @media (min-width: 1120px) {
            bottom: -10%;
            left: 19.6%;
            max-width: 138px;
            max-height: 81px;
            aspect-ratio: 138 / 81;
          }
        }

        .future-image-4 {
          position: absolute;
          top: auto;
          bottom: 7%;
          right: 17px;
          width: 100%;
          max-width: 77px;
          max-height: 21px;
          aspect-ratio: 77 / 21;

          @media (min-width: 1120px) {
            top: 8%;
            right: 0;
            max-width: 143px;
            max-height: 38.93px;
            aspect-ratio: 143 / 38.93;
          }
        }

        .future-badges {
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }
}

.contact-section {
  padding-top: 60px;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
  background:
    /* Left Ellipse: Matches Figma 30:872 */
    radial-gradient(
      ellipse 337px 215px at 0% 58%,
      rgba(164, 118, 255, 0.45) 0%,
      transparent 70%
    ),
    /* Right Circle: Matches Figma 26:821 */
    radial-gradient(
        circle 173px at 94% 86%,
        rgba(164, 118, 255, 0.45) 0%,
        transparent 70%
      ),
    var(--color-beige);

  @media (min-width: 1120px) {
    padding-top: 80px;
    padding-bottom: 52px;
  }

  .container {
    row-gap: 0px;
    column-gap: 0px;

    @media (min-width: 1120px) {
      row-gap: 24px;
      column-gap: 16px;
    }

    .contact-grid {
      grid-column: span 12;
      display: grid;
      gap: 20px;
      grid-template-areas: "title" "form";
      grid-template-columns: 1fr;
      column-gap: 24px;
      row-gap: 0px;

      @media (min-width: 1120px) {
        grid-template-areas: "title form" "media form";
        grid-template-columns: minmax(0, 548px) 1fr;
        column-gap: 5vw;
      }

      h1 {
        grid-area: title;
        font-size: var(--heading-h2-size);
        line-height: var(--heading-h2-line);
        margin-bottom: 25px;

        @media (min-width: 1120px) {
          max-width: 400px;
          font-size: var(--heading-h1-size);
          line-height: var(--heading-h1-line);
          margin-bottom: 0px;
        }
      }

      .contact-visual {
        grid-area: media;
        display: none;

        @media (min-width: 1120px) {
          display: flex;
          align-items: flex-end;
        }

        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }

      form {
        grid-area: form;
        display: flex;
        flex-direction: column;
        gap: 24px;

        @media (min-width: 1120px) {
        }

        .form-row {
          &.is-2 {
            display: flex;
            gap: 20px;
            width: 100%;
            flex-direction: column;

            @media (min-width: 1120px) {
              flex-direction: row;
            }

            div {
              flex: 1;
            }
          }

          .form-field {
            label {
              line-height: 1;
            }
            input {
              margin: 0;
              padding: 0;
            }
          }
        }

        .contact-actions {
          .btn {
            font-family: var(--font-sans);
          }
        }
      }
    }
  }

  .contact-form .form-label,
  .contact-form .form-label--desktop,
  .contact-form .form-label--mobile {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    font-weight: var(--weight-medium);
    color: var(--color-black);
    display: block;
  }

  .form-label--mobile {
    /* margin-bottom: 20px; */
  }

  .contact-form .form-label--desktop {
    display: none;
  }

  .contact-form input,
  .contact-form button,
  .contact-form textarea,
  .contact-form select {
    font-family: inherit;
  }

  @media (min-width: 768px) {
    .contact-form .form-label--desktop {
      display: block;
    }

    .contact-form .form-label--mobile {
      display: none;
    }
  }

  .contact-form .form-control {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--color-black);
    background: transparent;
    box-shadow: none;
    width: 100%;
    color: var(--color-dark);
    height: 24px;
    transition:
      border-color var(--dur-normal) var(--ease-standard),
      color var(--dur-normal) var(--ease-standard);
  }

  .contact-form .form-control:focus {
    outline: none;
    border: 0;
    border-bottom: 1px solid var(--color-black);
    box-shadow: none;
  }

  .contact-form .form-control::placeholder {
    color: #888888;
  }

  .contact-form .form-field.is-active .form-control,
  .contact-form .form-field.is-typing .form-control {
    border-bottom-color: var(--color-purple);
  }

  .contact-form .form-field.is-error .form-label {
    color: var(--color-error);
  }

  .contact-form .form-field.is-error .form-control,
  .contact-form .form-control[aria-invalid="true"] {
    border-bottom-color: #e20038;
    color: #e20038;
  }

  .contact-form .form-field.is-error .form-error {
    display: block;
  }

  .form-error {
    display: none;
    color: #e20038;
    font-family: var(--body-s-family);
    font-size: 12px;
    line-height: 1.2;
    margin-top: 4px;
  }

  .select-wrapper {
    position: relative;
    display: block;
  }

  .contact-form select.form-control.form-control--select {
    height: 40px;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right center;
  }

  .contact-form select.form-control.form-control--select.is-placeholder {
    color: #888888;
  }

  .contact-form .custom-select {
    color: var(--color-dark);
  }

  .contact-form .custom-select__trigger {
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-black);
    height: 24px;
    padding: 0;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
  }

  .contact-form .custom-select__trigger span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    display: block;
    padding-right: 8px;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
  }

  .contact-form .custom-select__trigger.is-placeholder {
    color: #888888;
  }

  .contact-form .form-field.is-active .custom-select__trigger,
  .contact-form .form-field.is-typing .custom-select__trigger,
  .contact-form .custom-select.open .custom-select__trigger {
    border-bottom-color: var(--color-purple);
  }

  .contact-form .form-field.is-error .custom-select__trigger {
    border-bottom-color: #e20038;
    color: #e20038;
  }

  .contact-form .custom-select__trigger svg,
  .contact-form .custom-select__trigger i {
    color: rgba(17, 14, 61, 0.7);
  }

  .select-icon {
    position: absolute;
    right: 18px;
    top: 54%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(17, 14, 61, 0.7);
    pointer-events: none;
  }

  .form-field--radio {
    height: 57px;
    display: flex;
    flex-direction: column;
  }

  .form-radio-label {
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    color: rgba(17, 14, 61, 0.8);
  }

  .form-field--radio .form-radio-group {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media (min-width: 1120px) {
      gap: 78px;
    }
  }

  .form-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body-s-family);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
    color: rgba(17, 14, 61, 0.8);
    cursor: pointer;
    user-select: none;
  }

  .form-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(164, 118, 255, 0.8);
    background: transparent;
    margin: 0;
    display: grid;
    place-items: center;
    transition:
      border-color var(--dur-normal) var(--ease-standard),
      background-color var(--dur-normal) var(--ease-standard);
  }

  .form-radio input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-purple);
    transform: scale(0);
    transition: transform var(--dur-normal) var(--ease-standard);
  }

  .form-radio input[type="radio"]:checked {
    border-color: var(--color-purple);
  }

  .form-radio input[type="radio"]:checked::before {
    transform: scale(1);
  }

  .form-field--textarea {
    height: 60px;
    display: flex;
    flex-direction: column;
  }

  .form-field--textarea textarea.form-control {
    flex: 1;
    resize: none;
    overflow: hidden;
  }

  .form-radio--alt {
    color: var(--color-white);
  }

  .form-radio--alt input[type="radio"] {
    border-color: var(--color-white);
  }

  .form-radio--alt input[type="radio"]::before {
    background: var(--color-white);
  }

  .contact-actions {
    grid-column: span 3;

    .btn {
      width: 100%;
      max-width: 196px;
    }
  }

  .contact-profile-fields {
    grid-column: span 6;
    display: none;
  }

  .contact-profile-fields.has-content {
    display: block;
  }

  .contact-profile-fields {
    .form-control--select {
      height: auto !important;
    }

    .form-control--select.is-placeholder {
      color: #888888;
    }
  }

  @media (max-width: 768px) {
    .contact-left {
      grid-column: span 6;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));

      h1 {
        grid-column: span 5;
      }

      img {
        display: none;
      }
    }

    .contact-right {
      grid-column: span 6;

      .is-2 .form-field {
        grid-column: span 6 !important;
      }
    }

    .form-field--radio {
      height: auto;
    }
  }
}

@media (min-width: 1024px) {
  .contact-section .form-field--radio .form-radio-group {
    flex-direction: row;
  }
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer,
footer {
  /* mobile: natural height */
  background: var(--color-black);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .site-footer,
  footer {
    height: var(--footer-height-desktop);
  }
}

/* Footer padding: mobile and desktop */
.site-footer .container {
  padding: 40px 16px;
}

@media (min-width: 1024px) {
  .site-footer .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 0px;
    height: 100%;
  }
}

/* Footer Grid & Links */
.footer-grid {
  display: grid;
  flex-grow: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
  }
}

.footer-divider {
  grid-column: 4 / span 9;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.footer-logo {
  flex: 1;
}

.footer-links {
  flex: 1;
}

.footer-contact {
  flex: 1;
  margin-left: 10px;
}

.footer-legal {
  flex: 1;
  text-align: left;
}

@media (min-width: 1024px) {
  .footer-logo {
    grid-column: 1 / span 3;
  }

  .footer-links {
    grid-column: 4 / span 3;
  }

  .footer-contact {
    grid-column: 7 / span 3;
  }

  .footer-legal {
    grid-column: 10 / span 3;
  }
}

/* Footer logo sizes */
.footer-logo img {
  height: 55px;
}

@media (min-width: 1024px) {
  .footer-logo img {
    height: 70px;
    margin-top: 6px;
  }
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links a,
.footer-contact a,
.footer-legal a {
  color: var(--color-white);
  text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
  color: var(--color-purple);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
}

/* Social icons */
.social-icons {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.social-icons img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mobile Footer Updates */
@media (max-width: 1024px) {
  .site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .footer-grid,
  .footer-divider,
  .footer-bottom {
    display: contents;
  }

  .footer-logo {
    order: 1;
    width: 100%;
  }

  .footer-links {
    order: 2;
    gap: 24px;
    width: 100%;
  }

  .footer-contact {
    order: 3;
    gap: 24px;
    width: 100%;
    margin-left: 0;
  }

  .social-icons {
    order: 4;
    width: 100%;
    gap: 24px;
  }

  .footer-legal {
    order: 5;
    width: 100%;
    text-align: left;
  }

  .footer-bottom > .body-s {
    order: 6;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    margin-top: -16px;
    /* Closer to legal */
  }

  .footer-logo img {
    height: 48px;
    /* Slightly smaller for mobile */
  }
}

/* =====================================================================
   Header
   ===================================================================== */
.site-header,
header {
  height: var(--header-height-mobile);
  background: var(--color-bg);
  box-shadow: 0px 4px 4px 0px #00000040;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.site-header.is-transparent {
  background: transparent;
  box-shadow: none;
}

.site-header.is-transparent.is-scrolled {
  background: var(--color-white);
  box-shadow: 0px 4px 4px 0px #00000040;
}

.site-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.site-header.is-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
}

.site-header.is-overlay + .site-main {
  padding-top: var(--header-height-mobile);
}

@media (min-width: 1120px) {
  .site-header.is-overlay + .site-main {
    padding-top: var(--header-height-desktop);
  }
}

.site-header.is-overlay + .site-main.no-offset {
  padding-top: 0;
}

@media (min-width: 1120px) {
  .site-header.is-overlay + .site-main.no-offset {
    padding-top: 0;
  }
}

@media (min-width: 1120px) {
  .site-header,
  header {
    height: var(--header-height-desktop);
  }
}

/* Header layout */
.site-header .container {
  height: 100%;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 15px;
}

/* Header — brand, nav, actions */
.header-brand {
  grid-column: span 2;
}

.header-brand img {
  width: 100%;
  height: 100%;
  max-width: 81px;
  max-height: 20px;

  @media (min-width: 1120px) {
    max-width: 101px;
    max-height: 25px;
  }
}

.header-nav {
  grid-column: 3 / span 5;
  display: none;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 5px;

  @media (min-width: 1120px) {
    display: flex;
  }
}

.header-actions {
  grid-column: 9 / span 4;
  display: none;
  justify-content: space-between;
  gap: 20px;

  @media (min-width: 1120px) {
    display: flex;
    margin-bottom: 5px;
  }

  .btn {
    flex-grow: 1;

    @media (min-width: 1120px) {
      font-size: var(--body-m-size);
      line-height: var(--body-m-line);
      max-width: 170px;
    }
  }
}

.header-nav a {
  text-decoration: none;
  color: var(--color-black);
  font-weight: var(--weight-medium);
}

.header-nav a:hover {
  color: var(--color-purple);
}

.mobile-controls {
  display: flex;
  align-items: center;
  gap: 36px;

  .btn {
    width: 100%;
    height: 100%;
    max-width: 103px;
    max-height: 24px;
    padding: 8px 24px !important;
    font-family: var(--font-sans);
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
  }
}

.mobile-menu-toggle {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
}

.mobile-menu-toggle .icon-close {
  display: none;
}

.site-header.is-menu-open .mobile-menu-toggle .icon-menu {
  display: none;
}

.site-header.is-menu-open .mobile-menu-toggle .icon-close {
  display: block;
}

.site-header.is-menu-open {
  background: var(--color-white);
}

.mobile-menu-overlay {
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: var(--z-modal);
  padding: 24px 20px;
  padding-bottom: 10px;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  height: fit-content;
  width: 100vw;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.site-header.is-menu-open .mobile-menu-overlay {
  display: flex;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  padding-bottom: 18px;
}

.mobile-nav-link {
  font-family: var(--font-sans);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  color: var(--color-black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.mobile-nav-link i {
  color: var(--color-purple);
  width: 20px;
  height: 20px;
}

.mobile-nav-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 23px;
}

.mobile-nav-contact {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.mobile-nav-contact a {
  position: relative;
  color: var(--color-black);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  text-decoration: underline;
}

.mobile-menu-footer {
  text-align: right;
  width: 100%;
}

.mobile-menu-footer .separator-line {
  height: 0.5px;
  background: var(--color-black);
  width: 100%;
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  header {
    width: 100vw;
  }

  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
  }
}

@media (min-width: 768px) {
  .header-nav {
    display: inline-flex;
  }

  .header-actions {
    display: inline-flex;
  }

  .mobile-controls {
    display: none;
  }

  .mobile-menu-overlay {
    display: none !important;
    /* Force hide on desktop even if class is active */
  }
}

/* =====================================================================
   Separator Block
   ===================================================================== */
.beneficios-section + .separator-block {
  gap: 6px;
  padding-top: 62px;
  padding-bottom: 34px;

  @media (min-width: 1120px) {
    padding-top: 52px;
    padding-bottom: 52px;
    gap: 16px;
  }

  h1 {
    font-size: var(--heading-h3-size);
    line-height: var(--heading-h3-line);

    @media (min-width: 1120px) {
      font-size: var(--heading-h1-size);
      line-height: var(--heading-h1-line);
    }
  }
}

/* =====================================================================
   Future Block
   ===================================================================== */
.future-section + .separator-block {
  gap: 6px;
  padding-top: 44px;
  padding-bottom: 55px;

  @media (min-width: 1120px) {
    padding-top: 38px;
    padding-bottom: 38px;
    gap: 16px;
  }

  h1 {
    font-size: var(--heading-h3-size);
    line-height: var(--heading-h3-line);
    max-width: 80%;

    @media (min-width: 1120px) {
      font-size: var(--heading-h1-size);
      line-height: var(--heading-h1-line);
      max-width: 1129px;
    }
  }
}

/* =====================================================================
   Shared Components
   ===================================================================== */
.title p {
  font-size: clamp(var(--body-m-size), 1.1vw, var(--body-l-size));
}

p {
  font-size: clamp(var(--body-m-size), 1.1vw, var(--body-l-size));
}

span {
  font-size: clamp(var(--body-m-size), 1.1vw, var(--body-l-size));
}

@keyframes h1-enter-left {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  h1 {
    animation: none;
  }
}

.is-inview .logo-strip,
.is-inview .logo-strip-2 {
  animation-play-state: running;
}

@keyframes logoMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip,
  .logo-strip-2 {
    animation: none;
    transform: none;
  }
}

.hero-media img,
.beneficios-media img {
  opacity: 0;
  transform: translateY(12px) scale(0.975);
  filter: blur(8px) saturate(0.9);
  transition:
    opacity var(--dur-slow) var(--ease-emphasized),
    transform var(--dur-slow) var(--ease-emphasized),
    filter 700ms var(--ease-decelerate);
  will-change: opacity, transform, filter;
}

.hero-media img.is-visible,
.beneficios-media img.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
  /* animation: heroFloat 6s var(--ease-decelerate) 0.8s infinite; */
}

@keyframes heroFloat {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.003);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.hero-section .container.is-inview .feature {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hero-section .container.is-inview .feature:nth-child(1) {
  animation-delay: 0.1s;
}

.hero-section .container.is-inview .feature:nth-child(2) {
  animation-delay: 0.2s;
}

.hero-section .container.is-inview .feature:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.future-point {
  opacity: 0;
}

.future-section .container.is-inview .future-point {
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.future-section .container.is-inview .future-point:nth-child(1) {
  animation-delay: 0.1s;
}

.future-section .container.is-inview .future-point:nth-child(2) {
  animation-delay: 0.2s;
}

.future-section .container.is-inview .future-point:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.future-media img {
  opacity: 0;
  transform: translateY(12px) scale(0.975);
  filter: blur(8px) saturate(0.9);
  transition:
    opacity var(--dur-slow) var(--ease-emphasized),
    transform var(--dur-slow) var(--ease-emphasized),
    filter 700ms var(--ease-decelerate);
  will-change: opacity, transform, filter;
}

.future-media img.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
}

.tabs-section.is-inview .tab-pane.is-active .tab-media img {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.contact-section .container.is-inview .contact-visual {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.bridge-section .container.is-inview .bridge-item {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.beneficios-section .container.is-inview .ecosys-img {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.beneficios-section .container.is-inview .beneficios-copy {
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.trust-section .container.is-inview .trust-cards .trust-card {
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: auto;
  height: auto;
  z-index: var(--z-sticky);
  transition:
    transform var(--dur-quick) var(--ease-standard),
    filter var(--dur-quick) var(--ease-standard);
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
}

.floating-whatsapp svg {
  width: 60px;
  height: 60px;
  display: block;
}

@media (min-width: 768px) {
  .floating-whatsapp {
    bottom: 40px;
    right: 40px;
  }
}

.btn {
  font-family: var(--font-sans);
}

/* Update for HIW CTA per Figma Node 336:3062 */
/* Button Animations (Replicated from Empresas page) */
.btn-primary-default {
  position: relative;
  overflow: hidden;
  z-index: 0;
  color: #ffffff;
  background: transparent;
  border: 1px solid #110e3d;
  border-radius: 30px;
  padding: 8px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 450ms ease;

  &.purple {
    color: var(--color-white);
    border-color: var(--color-purple);
  }
}

/* Initial Background (Dark Blue) */
.btn-primary-default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #110e3d;
  transform: scaleX(1);
  transform-origin: center;
}

/* Hover Background (Purple Swipe) */
.btn-primary-default::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-purple);
  transform: scaleX(0); /* Hidden initially */
  transform-origin: right; /* Exit to right */
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .btn-primary-default:hover::before {
    transform: scaleX(1);
    transform-origin: left; /* Enter from left */
  }

  .btn-primary-default:hover {
    border-color: var(--color-purple);
    opacity: 1; /* Override basic opacity hover if it was set */
  }
}

/* Secondary Button (Outline -> Purple Fill) */
.btn-secondary-default {
  position: relative;
  overflow: hidden;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  transition: none;
  background-color: transparent;
  z-index: 1;

  &.white {
    color: var(--color-white);
    border-color: var(--color-white);
  }
}

.btn-secondary-default::before,
.btn-secondary-default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Base Layer (Before) */
.btn-secondary-default::before {
  background-color: transparent;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Layer (After - Purple Swipe) */
.btn-secondary-default::after {
  background-color: var(--color-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .btn-secondary-default:hover::before {
    transform-origin: right;
  }

  .btn-secondary-default:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .btn-secondary-default:not(:hover)::after {
    transform: scaleX(0);
    transform-origin: right;
  }

  .btn-secondary-default:hover {
    color: var(--color-white);
    border-color: var(--color-purple);
    background: transparent;
  }
}

/* Secondary Dark Button (White Outline -> Purple Fill) */
.btn-secondary-dark {
  position: relative;
  overflow: hidden;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  transition: none;
  background-color: transparent;
  z-index: 1;
}

.btn-secondary-dark::before,
.btn-secondary-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Base Layer (Before) */
.btn-secondary-dark::before {
  background-color: transparent;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Layer (After - Purple Swipe) */
.btn-secondary-dark::after {
  background-color: var(--color-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fix for sticky hover on touch devices (overriding base.css) */
@media (hover: none) {
  .btn-primary-dark:hover {
    background: var(--color-purple);
    color: var(--color-white);
  }
}

.btn-secondary-dark:hover::before {
  transform-origin: right;
}

.btn-secondary-dark:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-secondary-dark:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

.btn-secondary-dark:hover {
  color: var(--color-white);
  border-color: var(--color-purple);
  background: transparent;
}

/* Tertiary Button (Purple Fill) */
.btn-tertiary-default {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  border: 1px solid var(--color-purple);
  transition: none;
  background-color: transparent;
  z-index: 1;
}

.btn-tertiary-default::before,
.btn-tertiary-default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Base Layer (Before) */
.btn-tertiary-default::before {
  background-color: var(--color-purple);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Layer (After - Purple Swipe) */
.btn-tertiary-default::after {
  background-color: transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-tertiary-default:hover::before {
  transform-origin: right;
}

.btn-tertiary-default:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-tertiary-default:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

.btn-tertiary-default:hover {
  color: var(--color-white);
  border-color: var(--color-purple);
  background: transparent;
}

.form-control.is-invalid {
  border-color: #ff4444 !important;
  /* background-color: rgba(255, 68, 68, 0.05); Removed per user request ("only the line") */
}

.form-error-text {
  color: #ff4444;
  font-size: 12px;
  margin-top: 4px;
  min-height: 18px; /* Prevent jumpiness */
  display: none; /* Hidden by default */
}

/* Background Blur Spheres */
.background-blur-circle-container {
  position: relative;
  overflow: hidden;
}

.background-blur-circle-container::before,
.background-blur-circle-container::after {
  content: "";
  position: absolute;
  width: 127.78%; /* 100% + 13.89% * 2 to match Figma inset */
  height: 119.56%; /* 100% + 9.78% * 2 to match Figma inset */
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(164, 118, 255, 0.4) 0%,
    rgba(164, 118, 255, 0.2) 40%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.background-blur-circle-container::before {
  top: -9.78%;
  right: -13.89%;
  animation: ellipseFloat 10s ease-in-out infinite;
}

.background-blur-circle-container::after {
  bottom: -9.78%;
  left: -13.89%;
  animation: ellipseFloat 10s ease-in-out infinite reverse;
}

@keyframes ellipseFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(25%, -15%) scale(1.3);
  }
  50% {
    transform: translate(40%, 25%) scale(1.5);
  }
  75% {
    transform: translate(-20%, 35%) scale(1.3);
  }
}

/* Ensure content sits above background */
.background-blur-circle-container > * {
  position: relative;
  z-index: 1;
}

/* Success Message Styles */
.contact-success-view {
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  animation: fadeIn 0.5s ease;
}

.success-title {
  font-family: "Mozilla Text", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #110e3d;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.success-description {
  font-family: "Mozilla Text", sans-serif;
  font-size: 1.125rem;
  color: #110e3d;
  max-width: 600px;
  line-height: 1.6;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Success View */
@media (max-width: 768px) {
  .contact-success-view {
    min-height: 300px;
    padding: 3rem 1.5rem;
  }
  .success-description {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 100%;
  }
}

/* Bridge Animation Keyframes & Trigger */
@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Corrected selector: bridge-section AND container are classes on the same element */
.bridge-section.container.is-inview .bridge-item img,
.bridge-section.container.is-inview .bridge-item span,
.bridge-section.container.is-inview .bridge-item .text {
  animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}