:root {
  --laranja: #ff6a00;
  --roxo: #441f5d;
  --rosa: #f72d53;
  --creme: #ffeecc;
  --cinza: #555866;
  --cinza-2: #F7F6F8;
  --titulos: #23252f;
  --bg-1: #f7f5f8;
  --bg-2: #f8f6f5;
  --sombra: 4px 4px 20px 2px #56596759;
}

.loading {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: rgb(234, 234, 234);
  color: white;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Flama" !important;
  /* font-weight: 500 !important; */
}

p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ol ol,
ul ul,
ul ol,
ol ul {
  margin: 0.4em 0;
}

a:hover,
a:focus,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

a[href],
input[type="submit"],
input[type="image"],
label[for],
select,
button {
  cursor: pointer;
  text-decoration: none;
}

input[type="text"],
textarea {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0;
  font-family: "Flama";
}

div,
ul,
li,
a,
span,
label,
p {
  font-family: "Flama";
  font-weight: 500;
}

h2 {
  font-size: 40px;
}

section {
  margin-bottom: 72px;

  h2 {
    color: var(--laranja);
    font-weight: 600;
    font-size: 40px;
    line-height: 100%;
  }

  p {
    color: var(--cinza);
    font-size: 18px;
    line-height: 160%;
  }

  @media (max-width: 992px) {
    margin-bottom: 45px;

    h2 {
      font-size: 28px;
    }

    p {
      font-size: 16px;
    }
  }
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  @media (max-width: 992px) {
    padding-right: calc(var(--bs-gutter-x) * 1.6) !important;
    padding-left: calc(var(--bs-gutter-x) * 1.6) !important;
  }
}

bold {
  font-weight: 600;
  background: none;
}

header {
  position: fixed;
  top: auto;
  z-index: 40;
  box-shadow: 0px 4px 6px 3px #5659670f;

  a {
    color: #23252F;
    font-size: 16px;
    font-weight: 500;

    &.active {
      color: var(--laranja);
    }
  }

  a.cta {
    color: var(--laranja);
    outline: 1px solid var(--roxo);
    font-size: 16px;
    font-weight: 600;
  }

  #buscador {}

  #busca {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s;

    &.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    h4 {
      color: var(--titulos);
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .badge {
      font-size: 14px;
      font-weight: 500;
      font-family: "Flama";
      padding: 8px 26px;

      &:nth-child(1) {
        color: var(--laranja);
        background-color: #fef1e9;
      }

      &:nth-child(2) {
        color: var(--roxo);
        background-color: #f2ebfc;
      }

      &:nth-child(3) {
        color: var(--rosa);
        background-color: #ffeaee;
      }
    }

    .info {
      h5 {
        color: var(--roxo);
        font-size: 14px;
        font-weight: 600;
        line-height: 100%;
      }
    }
  }

  #menu {
    nav {
      ul {
        list-style: none;
        padding: 0;

        h5 {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 24px;
          color: var(--laranja);
        }

        li {
          a {
            color: var(--cinza);
            font-size: 16px;
            font-weight: 500;
            line-height: 200%;

            @media (max-width: 992px) {
              color: var(--creme);

              &.active {
                color: var(--laranja);
                border-bottom: 1.5px solid;
              }
            }
          }
        }
      }
    }
  }
}

#breadcrumb {
  ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    gap: 8px;
  }

  li {
    color: var(--cinza);
    font-size: 16px;
    font-weight: 600;

    a {
      color: var(--cinza);
      font-size: 16px;
      font-weight: 400;
      text-decoration: none !important;
    }

    &.underline {
      text-decoration: underline;
    }

    &.separator {
      font-weight: 400;
      text-decoration: none !important;
    }
  }
}

main {
  margin-top: 90px;

  @media (max-width: 992px) {
    margin-top: 58px;
  }
}

.hero {
  position: relative;
  padding-bottom: 72px;
  padding-top: 56px;
  margin-bottom: 0;

  &.cta {
    height: 64svh;
  }

  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #43235e, #ed6a1b);
    opacity: 0.6;
    /* mix-blend-mode: multiply; */
  }

  @media (max-width: 992px) {
    margin-top: 56px;
  }

  h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 140%;
    color: var(--laranja);
  }


  h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
  }

  h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 120%;
    max-width: 75%;
  }

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

  a {
    color: var(--roxo);
    font-weight: 500;
    font-size: 18px;
  }

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

    p {
      font-size: 16px;
    }
  }


  .swiper {
    height: -webkit-fill-available;
    margin: 0;

    .swiper-pagination {
      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        opacity: 1;
        background-color: #A9ABB2;

        &.swiper-pagination-bullet-active {
          background-color: #555866;
        }
      }
    }
  }
}

.swiper-container {
  position: relative;
}

.swiper-controls {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: space-between;
  top: 50%;

  .swiper-button-prev {
    left: -64px;
  }

  .swiper-button-next {
    right: -64px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: relative;
    height: 50px;
    width: 50px;
    color: #fff;

    &::after {
      padding: 20px;
      background-color: #c8ac78;
      border-radius: 40px;
      aspect-ratio: 1 / 1;
      font-size: 20px;
      line-height: 0;
      align-content: center;
    }
  }
}

.swiper-pagination {
  position: relative;
  bottom: 0 !important;
  margin-top: 48px;

  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    opacity: 1;
    background-color: #a9abb2;

    &.swiper-pagination-bullet-active {
      background-color: #555866;
    }
  }
}

a.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 8px;
  border-radius: 80px;
  font-weight: 600;
  background-color: var(--laranja);
  font-size: 16px;
  line-height: 100%;
  padding: 18px 36px;
  color: #fff;

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

button.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 8px;
  border-radius: 80px;
  font-weight: 600;
  background-color: var(--laranja);
  font-size: 16px;
  line-height: 100%;
  padding: 18px 36px;
  color: #fff;

  &.roxo {
    background-color: var(--roxo);
  }
}

.form-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--roxo);
}

.select-arrow {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6.23521%206.69486L10.8146%201.43148C10.9692%201.25256%2011.043%201.02263%2011.0198%200.792058C10.9967%200.561484%2010.8786%200.349053%2010.6913%200.201283C10.5041%200.053513%2010.2629%20-0.0175523%2010.0207%200.00364937C9.77848%200.024851%209.55492%200.136592%209.39898%200.314402L5.52342%204.76908L1.62235%200.336718C1.46562%200.159121%201.24124%200.0480522%200.998519%200.0279088C0.755795%200.00776544%200.514574%200.0801954%200.327843%200.229288C0.141112%200.37838%200.0241428%200.591942%200.00263107%200.82306C-0.0188806%201.05418%200.0568237%201.28395%200.213115%201.4619L4.82276%206.69892C4.90941%206.79711%205.01765%206.87599%205.13984%206.92998C5.26202%206.98397%205.39517%207.01175%205.52989%207.01136C5.6646%207.01098%205.79759%206.98243%205.91946%206.92774C6.04133%206.87305%206.14912%206.79356%206.23521%206.69486Z%22%20fill%3D%22%23FF6A00%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  outline: none;
}

.search {
  appearance: none;
  display: block;
  font-size: 1rem;
  font-weight: 500;
  font-family: 'Flama';
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  border: 1px solid #E1E3E8;

  placeholder {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cinza);
  }

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

.checkbox-custom {
  position: relative;
  display: inline-flex;
  align-items: center;

  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  label {
    width: 20px;
    height: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.2s ease;
    color: #fff;
  }

  svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    color: var(--laranja);
    fill: var(--laranja);
    transition: opacity 0.2s ease;
  }

  input:checked+label {
    background: #fff;
    border-color: #fff;
  }

  input:checked+label svg {
    opacity: 1;
  }
}

.card-blog {
  * {
    margin: 0;
  }

  h3 {
    font-weight: 500;
    font-size: 18px;
    line-height: 115%;
    color: #23252F;
  }

  p {
    font-size: 16px;
    line-height: 120%;
  }
}

.card-listagem {
  position: relative;

  .card-thumb {
    position: relative;
    z-index: 0;
    height: 250px;
    overflow: hidden;
  }

  .price {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px;
    transition: 300ms all ease-in-out;
  }

  .card-body {
    width: 100%;
    /* height: 50%; */
    padding: 24px;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 24px;

    box-shadow: 4px 4px 25px 2px #56596726;
    border-radius: 0 0 15px 15px;

    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .loc {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--cinza);
      }
    }

    h3 {
      color: #23252f;
      font-weight: 600;
      font-size: 24px;
      line-height: 135%;
    }

    .diferenciais {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 16px;

      .dif {
        flex: 1 1 calc(50% - 8px);
        padding: 22px;
        border-radius: 5px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;

        text-align: center;

        border: 1px solid var(--laranja);
        background-color: #ff6a001a;

        &.renda {
          flex: 2;
          flex-direction: row;
          gap: 16px;
          text-align: start;
          line-height: 110%;
        }
      }
    }
  }
}

.date {
  color: #555866;
  font-weight: 500;
  font-size: 15px;
}

.related {
  h4 {
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    color: #23252F;
  }
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swiper-next-custom,
.swiper-prev-custom {
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  background-color: var(--roxo);
  border-radius: 50px;
  position: absolute;
  top: calc(50% - 30px);
  background-position: center center;
  background-size: 15px;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 20;
}

.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");
  left: 5%;
}

.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");
  right: 5%;
}

section.newsletter {
  @media (max-width: 768px) {
    background: linear-gradient(to bottom,
        white 0%,
        white 33.3333%,
        var(--laranja) 33.3333%,
        var(--laranja) 66.6666%,
        white 66.6666%,
        white 100%);
  }
}

footer {
  background-color: var(--roxo);
  color: #fff;

  hr {
    margin-top: 64px !important;
  }

  nav {
    &>div {
      @media (max-width: 992px) {
        flex: 0 0 50%;

        &:nth-child(1) {
          flex: 1 1 auto;
        }
      }

      @media (max-width: 768px) {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
      }
    }

    ul {
      list-style: none;
      padding: 0;
      max-width: 375px;

      @media (max-width: 992px) {
        text-align: center;
      }

      h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 24px;
        color: var(--creme);
      }

      li {
        a {
          color: #fff;
          font-size: 16px;
          font-weight: 500;
          line-height: 200%;
        }
      }
    }
  }
}