.Landing-page {
  &.popup-lp {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    background-color: #00000099;

    .content {
      position: relative;
      border-radius: 8px;
      width: 90%;
      max-width: 643px;
      background: #fff;
      padding: 48px 80px;
    }

    .btn-close {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      width: 32px;
      height: 32px;
      justify-content: center;
      align-items: center;
      border: none;
      border-radius: 23px;
      background: #e5e4f1;
      cursor: pointer;
      opacity: 1;

      span {
        width: 18px;
        height: 18px;
        line-height: normal;
        opacity: 1;
        font-size: 18px;
      }
    }

    .choices {
      gap: 14px;
      padding: 40px 0 32px;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-radius: 4px;
        border: 1px solid #d7dee4;
        background: #f9fafb;
        cursor: pointer;

        div {
          display: flex;
          align-items: center;
          gap: 16px;
        }

        .checkbox-text {
          color: #272647;
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
        }

        .checkbox-input {
          position: relative;
          display: block;
          width: fit-content;
          padding: 8px;
        }

        input[type="radio"] {
          display: grid;
          place-content: center;
          width: 20px;
          height: 20px;
          margin: 0;
          border: 2.5px solid #b6bbc4;
          border-radius: 100%;
          background: transparent;
          font-family: inherit;
          cursor: pointer;
          appearance: none;
          outline: none;

          &:focus {
            border-color: #2596ff;
          }

          &:hover {
            border-color: #2596ff;
          }

          &:checked {
            border: 5px solid #2596ff;
          }
        }

        &._selected {
          border-color: #2596ff;
          background: #f6faff;
        }
      }
    }

    .Button {
      width: 100%;

      &:disabled {
        background: #e5f4ec;
        border-color: #e5f4ec;
        color: #acabbb;
      }
    }
  }

  &._cabecalho {
    position: relative;
    padding-bottom: 80px;

    ._bg {
      display: block;
      width: 100%;
      height: 18.23vw;
      max-width: 1920px;
      max-height: 350px;
      object-fit: cover;
      object-position: center;
      margin: 0 auto;

      &._mb {
        display: none;
      }
    }

    .logo {
      border: 4px solid #fff;
      width: 170px;
      height: 170px;
      transform: translateY(-50%);
      margin-bottom: -80px;
      filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.16));

      img {
        max-width: 140px;
      }
    }
  }

  &._tabs {
    .menu-itens {
      padding-top: 24px;
      background: #fff;

      ul {
        position: relative;
        display: flex;
        align-items: center;
        gap: 24px;
        max-width: 930px;
        margin: 0 auto;

        .underline {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 115px;
          height: 3px;
          background: #4147d5;
          transition:
            left 0.3s ease,
            width 0.3s ease;
        }

        li {
          color: #666;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          margin-bottom: 24px;
          cursor: pointer;

          &._active {
            color: #110f35;
          }
        }
      }
    }

    .content-tabs {
      padding: 40px 0 80px;
      background: #f2f4f8;
      box-shadow: inset 0 -2px 37px -8px rgba(33, 30, 30, 0.2);
    }

    .section-tab {
      display: none;
      padding: 40px;
      width: 90%;
      max-width: 930px;
      margin: 0 auto;
      border-radius: 7px;
      border: 1px solid #cbd6e0;
      background: #fff;

      &._open {
        display: block;
      }
    }

    .header-tab {
      display: none;
    }

    .primeiros-passos {
      .cabecalho {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .passos {
        padding-bottom: 80px;

        .number {
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 57px;
          height: 57px;
          margin-bottom: 12px;
          border-radius: 100px;
          border: 2px solid #42cf7b;
          background-color: #fff;
          text-align: center;
          font-size: 28px;
          font-style: normal;
          font-weight: 700;
          line-height: 150%;
          color: #272647;
        }

        .item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 12px;
          padding-top: 24px;

          .Title {
            font-size: 16px;
          }

          .Body {
            max-width: 203px;
            letter-spacing: 0.28px;
          }

          &:before {
            content: "";
            position: absolute;
            top: 52.5px;
            left: 50%;
            z-index: 0;
            height: 2px;
            background-image: url("../../assets/images/lp/line.svg");
            width: 100%;
          }

          &._3 {
            &:before {
              display: none;
            }
          }
        }
      }

      .video {
        aspect-ratio: 850/455;
      }
    }

    .relatorios {
      display: flex;
      flex-direction: column;
      gap: 40px;

      ul {
        gap: 8px;
        width: calc(50% - 6px);

        &._full {
          width: 100%;
        }

        li {
          position: relative;
          color: #4a4a4a;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          letter-spacing: 0.32px;
          padding-left: 40px;

          &::after {
            content: "";
            position: absolute;
            top: calc(50% - 10px);
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
            background-color: #fff;
            background-image: url("../images/lp/CheckCircle.svg");
          }
        }
      }
    }

    .acesso {
      .col-6 {
        position: relative;
        justify-content: space-between;
        gap: 40px;
        border-radius: 4px;
        overflow: hidden;

        .content {
          position: relative;
          z-index: 1;
          padding: 40px 32px 0;
        }

        .Body {
          padding: 12px 0 40px;
        }

        .image {
          display: block;
          width: 100%;
        }

        .links {
          gap: 20px;

          img {
            display: block;
            width: 100%;
            max-width: 176px;
          }
        }

        &._dark {
          background: linear-gradient(112deg, #110f35 0%, #2a2c89 96.6%);

          .Title {
            color: #fff;
          }

          .Body {
            color: $text-light;
          }
        }

        &._white {
          background: #f1f1ff;
        }
      }
    }
  }

  @media (min-width: 1024px) {
    &._tabs {
      .content-tab {
        padding-top: 0 !important;
        max-height: none !important;
      }
    }
  }

  @media (max-width: $lg) {
    &._cabecalho {
      .Title {
        font-size: 20px;
      }
    }

    &._tabs {
      .content-tabs {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .section-tab {
        display: block;
        padding: 20px 16px 0;

        &._open {
          padding-bottom: 40px;

          .content-tab {
            visibility: visible;
          }
        }
      }

      .header-tab {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        cursor: pointer;

        p {
          color: #110f35;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }

        i {
          width: 24px;
          height: 24px;
          font-size: 24px;
          color: #110f35;
          transition: all 0.3s ease;

          &:before {
            display: block;
          }
        }
      }

      .content-tab {
        display: block;
        position: relative;
        overflow: hidden;
        max-height: 0;
        visibility: hidden;
        border-top: 1px solid #cbd6e0;
        transition: all 0.7s;

        &._extraHeigth {
          max-height: none !important;
        }
      }

      .primeiros-passos {
        background-color: #fff;

        .Row {
          flex-direction: column;
          align-items: center;
        }

        .col-4 {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;

          .number {
            margin: 53px 0 32px;
          }

          &:before {
            content: "";
            position: absolute;
            top: 65px;
            z-index: 0;
            height: 2px;
            background-image: url("../../assets/images/lp/line.svg");
            background-repeat: no-repeat;
            width: 152px;
            transform: rotate(90deg);
          }

          &:first-of-type {
            .number {
              margin-top: 0;
              margin-bottom: 53px;
            }

            &::before {
              top: 82px;
              width: 57px;
            }
          }

          img {
            position: relative;
            z-index: 1;
          }
        }

        .number {
          display: flex !important;
        }

        .item {
          z-index: 1;
          gap: 16px;
          padding-top: 16px;
          background-color: #fff;

          .number {
            display: none !important;
          }

          &:before {
            display: none;
            transform: rotate(90deg);
          }
        }
      }

      .relatorios {
        .content-tab {
          padding-top: 40px;
        }
        .Lista-expansivel {
          .lista-expansivel-box {
            padding: 24px 0;
            &:first-child {
              padding-top: 24px;
            }
          }
        }
      }
    }
  }

  @media (max-width: $md) {
    &.popup-lp {
      .content {
        padding: 24px;
      }
    }
    &._cabecalho {
      position: relative;
      padding-bottom: 80px;

      ._bg {
        display: none;

        &._mb {
          display: block;
          height: 76vw;
          max-height: none;
        }
      }

      .buttons {
        flex-direction: column;

        .Button {
          width: 100%;
        }
      }
    }

    &._tabs {
      .relatorios {
        .block-relatorios {
          flex-direction: column;
          gap: 8px;

          ul {
            width: 100%;
          }
        }
      }
    }
  }
}