:root {
  --txt: #86868B;
  --txt-black: #141414;
  --txt-white: #FFFFFF;
  --bg-gray: #F5F5F5;
  --glp-1-orange: #FD7335;
  --glp-1-green: #69A523;
  --glp-1-blue: #28BAF9;
  --glp-1-yellow: #F1B521;
}

body {
  span.nowrap {
    white-space: nowrap;
  }

  @media(min-width:768px) {
    .container {
      padding: 0;
      max-width: 1100px;
    }
  }
}

p.default {
  font-size: 17px;
  line-height: 20px;
  margin: 0;
  color: var(--txt);

  b {
    color: var(--txt-black);
  }

  a {
    color: var(--txt-black);
    text-decoration: underline;
  }
}

a.btn-link {
  display: block;
  width: 100%;
  max-width: 356px;
  height: 50px;
  background: var(--txt-black);
  color: var(--txt-white);
  border-radius: 24px;
  margin: 24px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

a.btn-link:hover {
  text-decoration: none;
  opacity: .9;
  color: var(--txt-white);
}

#glp-1-main {
  section.bloco-1 {
    position: relative;
    height: 621px;

    video.bg-video {
      position: absolute;
      height: 100%;
      object-fit: cover;
      object-position: top;
    }

    .container {
      position: relative;
      z-index: 1;
    }

    h1 {
      color: var(--txt-black);
      font-size: 60px;
      font-weight: bold;
      line-height: 55px;
      max-width: 520px;
      margin: 110px 0 24px;
    }

    p {
      max-width: 424px;
    }

    #initial-form {
      margin-top: 36px;

      .d-flex {
        justify-content: space-between;
      }

      input {
        background: #FFFFFF40;
        border-radius: 24px;
        border: 1px solid rgba(20, 20, 20, 0.25);
        backdrop-filter: blur(3.5px);
        padding-inline: 24px;
        height: 100%;

        &::placeholder {
          color: var(--txt);
        }
      }

      .input-width {
        width: 263px;
        position: relative;
        height: 50px;
      }

      input#btn-avancar {
        background: var(--txt-black);
        width: 263px;
        height: auto;
        color: var(--txt-white);
        border: none;
      }

      .optin-field {
        margin-block: 24px 16px;
        display: flex;
        max-width: 480px;

        input[type="checkbox"] {
          appearance: none;
          -webkit-appearance: none;
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
        }

        input[type="checkbox"]+label {
          padding-left: 28px;
          position: relative;
          cursor: pointer;
          font-size: 14px;
          line-height: 16px;
          color: var(--txt);

          a {
            color: var(--txt-black);
            text-decoration: underline;
          }
        }

        input[type="checkbox"]+label:before {
          content: "";
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 1px solid var(--txt-black);
          background: transparent;
          transition: background 0.1s ease;
        }

        input[type="checkbox"]:checked+label:before {
          background: var(--txt-black);
          box-shadow: inset 0 0 0 3px #E5E5E5;
        }
      }

      .field-error {
        display: none;
        margin-top: 4px;
        padding-left: 10px;
        font-size: 12px;
        line-height: 14px;
        color: #d32f2f;
      }

      .field-error.is-visible {
        display: block;
      }

      .validate-input.has-error input {
        border-color: #d32f2f;
      }

      input#btn-avancar:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
  }

  .line-color {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 16px;
    width: 100%;
    position: relative;
    z-index: 2;

    .orange {
      background-color: var(--glp-1-orange);
    }

    .green {
      background-color: var(--glp-1-green);
    }

    .blue {
      background-color: var(--glp-1-blue);
    }

    .yellow {
      background-color: var(--glp-1-yellow);
    }
  }

  section.bloco-1-form.is-hidden {
    display: none;
  }

  .question-6.is-hidden {
    display: none;
  }

  section.bloco-1-form {
    background: #F5F5F5;
    padding-top: 24px;

    p.default.caption {
      font-size: 14px;
      line-height: 17px;
      margin-left: 28px;
      max-width: 825px;
    }

    #continuation-form {
      padding: 10px;
      background: var(--txt-white);
      border-radius: 24px;
      margin-top: 24px;

      .content-form {
        padding: 36px 85px;
        display: flex;
        gap: 214px;
      }

      .content-form.gray {
        background-color: #D9D9D926;
      }

      .content-form.gray.pt-0 {
        border-radius: 0 0 16px 16px;
      }

      .question {
        width: 250px;
        font-size: 17px;
        font-weight: bold;
        line-height: 20px;
        color: var(--txt-black);
      }

      .options {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 382px;
      }

      input#data-nascimento,
      input#quais-produtos {
        border: none;
        border-bottom: 1px solid var(--txt);
        border-radius: 0;
        padding-inline: 0;
      }

      .option {
        display: flex;
        align-items: center;
        margin: 0;
        gap: 16px;
        min-height: 40px;
        padding: 10px 16px;
        border-radius: 20px;
        border: 1px solid rgba(134, 134, 139, 0.50);
        cursor: pointer;
        transition: border-color 0.1s ease, background 0.1s ease;

        input[type="radio"] {
          appearance: none;
          -webkit-appearance: none;
          margin: 0;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 1px solid var(--txt);
          background: transparent;
          flex: 0 0 auto;
          transition: border-color 0.1s ease;
        }

        input[type="radio"]:checked {
          border-color: var(--txt-black);
          box-shadow: inset 0 0 0 3px var(--txt-white);
          background: var(--txt-black);
        }

        .option-label {
          font-size: 17px;
          line-height: 20px;
          color: var(--txt);
        }
      }

      .option:has(input[type="radio"]:checked) {
        border: 1px solid rgba(134, 134, 139, 0.50);
        background: rgba(134, 134, 139, 0.10);

        .option-label {
          color: var(--txt-black);
          font-weight: 600;
        }
      }

      .field-wrapper {
        flex: 1;
        max-width: 382px;
      }

      .field-wrapper .options {
        max-width: 100%;
      }

      .field-error {
        display: none;
        margin-top: 8px;
        padding-left: 10px;
        font-size: 12px;
        line-height: 14px;
        color: #d32f2f;
      }

      .field-error.is-visible {
        display: block;
      }

      .field-wrapper.has-error .option {
        border-color: #d32f2f;
      }

      .field-wrapper.has-error .input-text {
        border-color: #d32f2f;
      }

      .field-wrapper.has-error input#data-nascimento,
      .field-wrapper.has-error input#quais-produtos {
        border-bottom-color: #d32f2f;
      }

      .content-button {
        width: 366px;
        margin-left: 465px;

        input#btn-enviar-resposta {
          background: var(--txt-black);
          border: none;
          width: 100%;
          max-width: 366px;
          height: 50px;
          background: var(--txt-black);
          color: var(--txt-white);
          border-radius: 24px;
          margin: 0 auto 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
        }

        p.default.caption-button {
          font-size: 14px;
          line-height: 17px;
        }
      }
    }
  }

  section.bloco-2 {
    background: #f5f5f5 url(https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/bg-section-02.png) no-repeat bottom / cover;
    height: 912px;
    padding-bottom: 16px;
    text-align: center;
    position: relative;

    .content {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 16px;

      img {
        display: block;
        width: 100%;
        max-width: 354px;
        margin: 0 auto 24px;
      }

      p.default {
        max-width: 438px;
      }
    }
  }

  section.bloco-3 {
    background: #F5F5F5;
    padding-block: 62px 80px;

    .container-slide {
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .slide {
      display: flex;
      gap: 16px;
      will-change: transform;
      backface-visibility: hidden;
    }

    .slide-item {
      flex: 0 0 auto;
      width: 263px;
      height: 363px;
      border-radius: 24px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }

    .slide-item.slide-1 {
      background-image: url("https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/slide-image-1.png");
    }

    .slide-item.slide-2 {
      background-image: url("https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/slide-image-2.png");
    }

    .slide-item.slide-3 {
      background-image: url("https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/slide-image-3.png");
    }

    .slide-item.slide-4 {
      background-image: url("https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/slide-image-4.png");
    }

    .slide-item.slide-5 {
      background-image: url("https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/slide-image-5.png");
    }

    .slide-item.slide-6 {
      background-image: url("https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/slide-image-6.png");
    }
  }

  section.bloco-4 {
    padding-block: 80px;

    h2 {
      color: #141414;
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      line-height: 48px;
    }

    .product-grid {
      margin-top: 48px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;

      img.product-img {
        width: 100%;
      }

      h3 {
        font-size: 17px;
        font-weight: bold;
        line-height: 20px;
        margin: 16px 0 0;

        a {
          color: var(--txt-black);
        }
      }

      h3 a:hover {
        text-decoration: none;
      }

      span.description {
        display: block;
        color: var(--txt);
        font-size: 14px;
        line-height: 17px;
        margin-top: 12px;
      }
    }

    a.btn-link {
      margin: 36px auto 0;
    }
  }
}

@media(max-width: 767px) {
  #glp-1-main {
    section.bloco-1 {
      height: auto;

      video.bg-video {
        height: 100%;
        object-fit: cover;
        object-position: top;
        width: 100%;
      }

      .container {
        padding: 0 24px;
      }

      h1 {
        font-size: 31px;
        line-height: 30px;
        max-width: 250px;
        margin: 53.5vw 0 16px;
        color: var(--txt-white);
      }

      p {
        max-width: 310px;
        color: var(--txt-white);

        b {
          color: var(--txt-white);
        }
      }

      #initial-form {
        margin-top: 36px;

        .d-flex {
          flex-direction: column;
          gap: 16px;
        }

        input {
          border: 1px solid rgba(255, 255, 255, 0.25);
          color: var(--txt-white);

          &::placeholder {
            color: var(--txt-white);
          }
        }

        .input-width {
          width: 100%;
        }

        input#btn-avancar {
          background: var(--txt-white);
          width: 100%;
          height: 50px;
          color: var(--txt-black);
        }

        .optin-field {
          margin-block: 36px 36px;
          max-width: 327px;

          input[type="checkbox"]+label {
            color: var(--txt-white);

            a {
              color: var(--txt-white);
              text-decoration: underline;
            }
          }

          input[type="checkbox"]+label:before {
            border: 1px solid var(--txt-white);
          }

          input[type="checkbox"]:checked+label:before {
            background: var(--txt-white);
            box-shadow: inset 0 0 0 3px #8C8C8C;
          }
        }

        .field-error {
          color: var(--txt-white);
          margin-top: 0;
          padding-left: 24px;
        }
      }
    }

    section.bloco-1-form {
      position: relative;
      z-index: 2;

      .container {
        padding: 0 16px;
      }

      p.default.caption {
        font-size: 14px;
        line-height: 16px;
        margin-left: 8px;
        max-width: 268px;
      }

      #continuation-form {
        padding: 8px;
        background: var(--txt-white);
        border-radius: 24px;
        margin-top: 24px;

        .content-form {
          flex-direction: column;
          padding: 24px 16px;
          gap: 16px;
        }

        .options {
          max-width: 100%;
        }

        .field-wrapper {
          max-width: 100%;
        }

        .content-button {
          width: 100%;
          margin-left: 0px;

        }
      }

      input#quais-produtos::placeholder {
        font-size: .8rem;
      }
    }

    section.bloco-2 {
      background: #f5f5f5 url(https://essentialnutrition-upload-files.s3.us-east-1.amazonaws.com/site-nutrition/glp-1/support-nutrition/bg-section-02-mobile.png) no-repeat top / contain;
      height: 100%;
      padding-bottom: 0;
      text-align: center;
      position: relative;
      margin-top: -16px;

      .content {
        position: relative;
        bottom: 0;
        left: 0;
        transform: translateX(0);
        margin-top: 94.4vw;


        img {
          max-width: 232px;
        }

        p.default {
          max-width: 326px;
          margin: 0 auto;
        }

        a.btn-link {
          max-width: 327px;
        }
      }
    }

    section.bloco-3 {
      padding-block: 48px;
    }

    section.bloco-4 {
      padding-block: 36px;

      .container {
        padding-inline: 0;
      }

      h2 {
        text-align: left;
        font-size: 29px;
        line-height: 30px;
        padding-left: 24px;
      }

      .product-grid {
        margin-top: 36px;
        display: flex;
        flex-direction: column;
        gap: 24px;

        .product-item {
          padding-right: 16px;
        }

        .slick-track {
          margin-left: -36px;
        }

        .slick-dots {
          padding: 0;
          height: 16px;
        }

        .slick-dots li {
          width: 16px;
          height: 16px;
          margin: 0 4px;
          vertical-align: baseline;
        }

        .slick-dots li button {
          border: 1px solid var(--txt);
          width: 16px;
          height: 16px;
        }

        .slick-dots li.slick-active button {
          outline: none;
          background-color: var(--txt-black);
          border: 1px solid var(--txt-black);
          box-shadow: inset 0 0 0 2px var(--txt-white);
        }
      }

      a.btn-link {
        max-width: 327px;
        margin: 24px auto 0;
      }
    }
  }

  .modal-popup.modal-slide .modal-inner-wrap[class] {
    width: 90%;
  }
}

@media(max-width:360px) {
  #glp-1-main section.bloco-1-form #continuation-form input#quais-produtos::placeholder {
    font-size: .68rem;
  }
}