.tp-hero {
  width: 100%;

  .tp-wrapper--full-width {
    padding: 0;
    margin: 0;

    .swiper {
      width: 100%;

      .swiper-wrapper {

        .swiper-slide {
          height: auto;

          .tp-slide {
            position: relative;
            width: 100%;
            display: block;

            img, video {
              width: 100%;
              display: block;
            }

            .image--mobile, .video--mobile {
              display: block;

              @media screen and (min-width: 768px) {
                display: none;
              }
            }

            .image--desktop, .video--desktop {
              display: none;

              @media screen and (min-width: 768px) {
                display: block;
              }
            }

            /* link do slide inteiro */
            .tp-slide__link {
              position: absolute;
              inset: 0;
              z-index: 2;
              display: block;
            }

            .tp-slide__overlay {
              position: absolute;
              inset: 0;
              z-index: 1;
              pointer-events: none;
              background: rgba(0, 0, 0, var(--tp-overlay, 0));
            }

            .tp-slide__content {
              /* valores mobile por padrao; o media query troca para os de desktop */
              --tp-title-size: var(--tp-title-size-mobile, 28px);
              --tp-desc-size: var(--tp-desc-size-mobile, 15px);
              --tp-btn-size: var(--tp-btn-size-mobile, 15px);
              --tp-btn-height: var(--tp-btn-height-mobile, 52px);
              --tp-btn-width: var(--tp-btn-width-mobile, 100%);

              position: absolute;
              inset: 0;
              z-index: 3;
              display: flex;
              flex-direction: column;
              align-items: center;
              text-align: center;
              gap: 20px;
              padding: 32px 20px 64px;
              color: var(--tp-text-color, #fff);
              /* deixa o clique passar para o link do slide, exceto nos links internos */
              pointer-events: none;

              a {
                pointer-events: auto;
              }

              .tp-slide__text {
                display: flex;
                flex-direction: column;
                gap: 12px;
                max-width: var(--tp-content-width, 520px);
              }

              .tp-slide__title {
                margin: 0;
                font-size: var(--tp-title-size);
                line-height: var(--tp-title-leading, 1.05);
                letter-spacing: -0.02em;
                font-weight: 700;
                text-transform: uppercase;
                color: inherit;
              }

              .tp-slide__description {
                margin: 0;
                font-size: var(--tp-desc-size);
                line-height: var(--tp-desc-leading, 1.5);
                color: inherit;
              }

              .tp-slide__actions {
                display: flex;
                width: 100%;
                justify-content: center;
              }

              .tp-slide__button {
                box-sizing: border-box;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: var(--tp-btn-width);
                max-width: 100%;
                height: var(--tp-btn-height);
                padding-inline: var(--tp-btn-padding-x, 40px);
                background: var(--tp-btn-bg, #101010);
                color: var(--tp-btn-color, #fff);
                font-size: var(--tp-btn-size);
                font-weight: 500;
                line-height: 1;
                text-align: center;
                text-decoration: none;
                border-radius: var(--tp-btn-radius, 2px);
                transition: opacity 0.2s ease;

                &:hover {
                  opacity: 0.88;
                }

                &:focus-visible {
                  outline: 2px solid currentColor;
                  outline-offset: 3px;
                }
              }
            }

            /* ---------- mobile ---------- */
            .tp-slide__content--m-split {
              justify-content: space-between;
            }

            .tp-slide__content--m-center {
              justify-content: center;
            }

            /* ---------- desktop ---------- */
            @media screen and (min-width: 768px) {
              .tp-slide__content {
                --tp-title-size: var(--tp-title-size-desktop, 52px);
                --tp-desc-size: var(--tp-desc-size-desktop, 17px);
                --tp-btn-size: var(--tp-btn-size-desktop, 16px);
                --tp-btn-height: var(--tp-btn-height-desktop, 56px);
                --tp-btn-width: var(--tp-btn-width-desktop, auto);

                gap: 28px;
                padding: 48px clamp(32px, 6vw, 96px);

                .tp-slide__text {
                  gap: 16px;
                }

                .tp-slide__actions {
                  width: var(--tp-content-width, 520px);
                  max-width: 100%;
                }
              }

              .tp-slide__content--left {
                align-items: flex-start;
                text-align: left;

                .tp-slide__actions {
                  justify-content: flex-start;
                }
              }

              .tp-slide__content--center {
                align-items: center;
                text-align: center;

                .tp-slide__actions {
                  justify-content: center;
                }
              }

              .tp-slide__content--right {
                align-items: flex-end;
                text-align: right;

                .tp-slide__actions {
                  justify-content: flex-end;
                }
              }

              .tp-slide__content--v-start {
                justify-content: flex-start;
              }

              .tp-slide__content--v-center {
                justify-content: center;
              }

              .tp-slide__content--v-end {
                justify-content: flex-end;
              }
            }
          }
        }
      }

      .swiper-pagination {
        z-index: 4;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-hero .tp-slide__button {
    transition: none;
  }
}