/* Estilo automático para a página: sobre */
section.hero {
  &.interna {
    .hero-content {
      h2 {
        font-size: 32px;
      }
    }

    nav {
      height: max-content;
    }
  }
}

section.conheca {
  h3 {
    font-size: 24px;
    color: #441f5d;
    margin-top: 36px;
  }

  .line {
    width: 1px;
    height: 100%;
    background-color: #e1e3e8;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

section.manifesto {
  background-color: var(--roxo);
  padding: 65px 0 96px 0;

  p {
    color: #ffffff;
  }

  h2 {
    font-size: 72px;

    @media (max-width: 992px) {
      font-size: 28px;
    }
  }

  h3 {
    font-size: 40px;
    line-height: 120%;
    color: #ffffff;
  }

  span {
    color: var(--laranja);
    font-size: 20px;
    font-weight: 500;
  }

  .line {
    width: 1px;
    height: 100%;
    background-color: #e1e3e8;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .thumb {
    img {
      filter: brightness(0.75);
    }

    svg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      pointer-events: click;
    }
  }
}

:root {
  --secondary: #7a4a9c;
}

.swiper-container-wrapper--timeline {
  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #fff;
    border-radius: 10px;

    .title {
      font-size: 18px;
      opacity: 0;
      transition: 0.5s ease 0.5s;
    }

    &.swiper-slide-active {
      .title {
        opacity: 1;
      }
    }
  }

  /* progress bar */

  .swiper-pagination-progressbar.swiper-pagination-horizontal {
    position: relative;
    margin-bottom: 70px;
    background: transparent;
    height: 4px;
    border-bottom: 1px solid var(--secondary);
    width: 75%;
    z-index: 9;

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

    .swiper-pagination-progressbar-fill {
      background: var(--laranja);
      height: 3px;
      top: 2px;
    }

    &::before {
      position: absolute;
      top: 2px;
      left: -100%;
      width: 100%;
      height: 3px;
      background: var(--laranja);
      content: "";
    }

    &::after {
      position: absolute;
      top: 3px;
      right: -100%;
      width: 100%;
      height: 1px;
      background: var(--secondary);
      content: "";
    }
  }

  /* timeline */

  .swiper-pagination-custom {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    width: 75%;
    line-height: 1.6;
    position: relative;
    bottom: -30px;
    z-index: 10;

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

  .swiper-pagination-switch {
    position: relative;
    width: 100%;
    height: 30px;

    .switch-title {
      position: absolute;
      right: 0;
      transform: translateX(50%);
      cursor: pointer;
      transition: 0.2s;
      z-index: 1;

      &::after {
        content: "";
        position: absolute;
        top: calc(100% + 19px);
        right: 50%;
        transform: translateX(50%) translateY(-50%);
        width: 12px;
        height: 12px;
        background: var(--laranja);
        border-radius: 50%;
        transition: 0.2s;
        z-index: 1;
      }

      &::before {
        content: "";
        position: absolute;
        top: calc(100% + 19px);
        right: 50%;
        transform: translateX(50%) translateY(-50%);
        width: 24px;
        height: 24px;
        background: var(--roxo);
        border-radius: 50%;
        transition: 0.2s;
        z-index: 0;
      }
    }

    &.active {
      .switch-title::after {
        width: 25px;
        height: 25px;
      }

      ~.swiper-pagination-switch {
        .switch-title {
          color: var(--secondary);
        }

        .switch-title::after {
          background: var(--secondary);
        }
      }
    }
  }

  .swiper-next-custom,
  .swiper-prev-custom {
    width: 56px;
    height: 56px;
    aspect-ratio: 1/1;
    background-color: #ffffffb2;
    border-radius: 50px;
    position: relative;
    background-position: center center;
    background-size: 15px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .swiper-prev-custom {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='12' height='19' viewBox='0 0 12 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.515754 8.19373L9.25968 0.365549C9.55695 0.101373 9.94193 -0.028217 10.3303 0.00515745C10.7187 0.0385319 11.0788 0.232151 11.3318 0.543615C11.5849 0.855078 11.7101 1.259 11.6803 1.66693C11.6504 2.07487 11.4677 2.45356 11.1724 2.72008L3.77192 9.34505L11.3202 15.8011C11.6227 16.0605 11.8149 16.4352 11.8545 16.843C11.8942 17.2508 11.7781 17.6582 11.5318 17.9759C11.2855 18.2935 10.9291 18.4954 10.5408 18.537C10.1526 18.5787 9.7643 18.4569 9.46126 18.1982L0.54261 10.5696C0.375374 10.4262 0.240119 10.246 0.146397 10.0418C0.0526758 9.83753 0.00277209 9.61423 0.000210741 9.38764C-0.0023506 9.16104 0.0424929 8.93667 0.131574 8.73037C0.220655 8.52408 0.351803 8.34089 0.515754 8.19373Z' fill='%23FF6A00'/%3E%3C/svg%3E%0A");
  }

  .swiper-next-custom {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='12' height='19' viewBox='0 0 12 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3466 8.19373L2.60262 0.365549C2.30535 0.101373 1.92037 -0.028217 1.53199 0.00515745C1.14361 0.0385319 0.783482 0.232151 0.530466 0.543615C0.277449 0.855078 0.152167 1.259 0.182054 1.66693C0.211941 2.07487 0.394561 2.45356 0.689923 2.72008L8.09039 9.34505L0.542062 15.8011C0.239605 16.0605 0.0474352 16.4352 0.00776706 16.843C-0.0319011 17.2508 0.0841766 17.6582 0.330501 17.9759C0.576825 18.2935 0.933251 18.4954 1.32148 18.537C1.70971 18.5787 2.098 18.4569 2.40105 18.1982L11.3197 10.5696C11.4869 10.4262 11.6222 10.246 11.7159 10.0418C11.8096 9.83753 11.8595 9.61423 11.8621 9.38764C11.8647 9.16104 11.8198 8.93667 11.7307 8.73037C11.6416 8.52408 11.5105 8.34089 11.3466 8.19373Z' fill='%23FF6A00'/%3E%3C/svg%3E%0A");
  }
}

section.mvv {
  h3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    color: #fff;

    span {
      font-weight: 600;
      color: var(--laranja);
    }
  }

  p {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    line-height: 135%;
  }
}

section.principios {
  .swiper-slide:nth-child(odd) .holder {
    background: var(--laranja);
  }

  .swiper-slide:nth-child(even) .holder {
    background: var(--roxo);
  }

  h2 {
    margin-bottom: 30px;
  }

  p {
    margin: 0;
    color: #fff;
  }

  .card-p {
    h3 {
      font-weight: 500;
      font-size: 16px;
      line-height: 140%;
      margin-bottom: 0;
      margin-top: 5px;
      text-transform: uppercase;
      color: var(--roxo);

      span {
        color: var(--laranja);
      }
    }

    p {
      font-size: 16px;
      color: var(--cinza);
      font-weight: 500;
      line-height: 140%;
      margin: 0;
    }
  }
}

section.conecte {
  h2 {
    font-weight: 600;
    font-size: 40px;
    line-height: 100%;
    margin-bottom: 32px;
    color: var(--laranja);
  }

  p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: var(--cinza);
  }

  a {
    text-decoration: none;
  }

  span {
    font-weight: 500;
    font-size: 15px;
    line-height: 140%;
    color: var(--cinza);
  }
}