* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: "opensansbold";
  src: url("text/OpenSans-ExtraBold.ttf");
}

@font-face {
  font-family: "opensans";
  src: url("text/OpenSans-Light.ttf");
}
@font-face {
  font-family: "opensans_italic";
  src: url("text/OpenSans-Italic.ttf");
}
@font-face {
  font-family: "opensans_italic2";
  src: url("text/OpenSans-Italic.ttf");
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
  background-color: #11143d;
  color: white;
  overflow-x: hidden;
  font-family: "opensansbold", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}

.cactos1 {
  width: 100vw;
  height: 50vh;
  position: absolute;
  left: 82%;
  top: 65%;

  z-index: 5;

  /* background-color: green; */

  img {
    width: 25%;
    transform: rotate(-30deg);
  }
}
.cactos2 {
  width: 100vw;
  height: 50vh;
  position: absolute;
  left: -7%;
  top: 65%;

  z-index: 2;

  /* background-color: green; */

  img {
    width: 25%;
    transform: rotate(35deg);
  }
}

.sombraheader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  top: -30%;
  left: 0;

  width: 100%;

  img {
    width: 100%;
  }
}

header {
  width: 100%;

  /* background-color: green; */
  padding: 2vw 10vh;
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 5;
  .menu-lateral {
    display: none;
  }

  ul {
    /* flex: 1; */
    /* background-color: blue; */
    position: relative;
    width: auto;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15%;

    li {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: normal;
      font-size: 1vw;
      list-style-type: none;
      cursor: pointer;

      position: relative;

      width: fit-content; /* Faz o li ter exatamente a largura do texto */
      display: inline-block; /* Garante que ele se comporte como um bloco de texto */
      padding-bottom: 4px;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0; /* Começa com largura zero */
        height: 2px; /* Espessura da linha */
        background-color: #fff; /* Cor da linha (ajuste se necessário) */
        transition: width 0.3s ease; /* A mágica da animação */
      }

      &:hover::after {
        width: 100%; /* A linha expande até preencher o li */
      }
    }
  }

  img {
    width: 60px;
  }

  .oco {
    width: 85px;
    /* background-color: blue; */
  }
}

.hero {
  width: 100vw;
  height: 100vh;
  padding: 2vw;
  overflow: hidden;

  /* background-color: green; */

  display: flex;
  align-items: center;

  .cactos-hero {
    display: none;
  }

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0%;
    left: 0%;
    object-fit: cover;
    /* scale: 80%; */
  }

  .conteudo {
    /* background-color: blue; */
    width: 100%;
    height: 100%;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .esquerda {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;

      /* margin-top: 5%; */

      /*  background-color: blue; */

      img {
        width: 400px;
      }
      h2 {
        /* font-family: "opensans", sans-serif;
        font-size: 2.2vw;
        font-weight: 100; */

        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: italic;
        font-size: 1.5vw;
      }

      button {
        width: 30%;
        height: 6%;
        /* background-color: rgb(248, 101, 4); */
        background: linear-gradient(90deg, #f6e27a 0%, #f2b94b 100%);
        color: #010142;
        border: none;
        cursor: pointer;
        margin-top: 1px;
        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;

        margin-top: 6%;

        font-size: 1vw;

        font-family: "opensans_italic2";
        font-weight: 600;
        font-style: italic;
        transition: transform 0.3s ease;

        img {
          width: 15px;
        }
      }

      button:hover {
        transform: scale(1.1);
      }

      .condicoes-hero {
        margin-top: 25px;

        img {
          width: 30vw;
        }
      }
    }
    /* .linha {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 22%;
      scale: 200%;
    } */

    .direita {
      /* background-color: green; */
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .caba {
        position: absolute;
        top: -38%;
        left: -25%;
        img {
          width: 70vw;
        }
      }
      .carro-hero {
        position: absolute;
        z-index: 5;
        top: 35%;
        left: -10%;
        img {
          width: 50vw;
        }
      }
    }
  }
}

.sec2 {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  background-image: url(Materiais/bg-sec2.webp);
  background-position: 50% center;
  background-size: cover;
  background-repeat: no-repeat;

  .forma::before {
    content: "";
    width: 100vw;
    height: 20vh;
    background-image: linear-gradient(to bottom, #0b1038 0%, transparent 100%);
    position: absolute;
    top: 0%;
    left: 0%;
  }
  .linha::before {
    content: "";
    width: 0.2vw;
    height: 50vh;

    position: absolute;
    background-color: white;
    top: 25%;
    left: 50%;
  }

  .conteudo-sec2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50vw;
    height: 50vh;
    z-index: 3;

    /* background-color: green; */

    .titulo {
      position: absolute;
      top: 15%;
      left: 35%;
      font-size: 1.6vw;
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: italic;
    }

    .esquerda {
      width: 100%;
      height: 100%;

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

      img {
        width: 60%;
      }

      button {
        width: 50%;
        height: 12%;
        /* background-color: rgb(248, 101, 4); */
        background: linear-gradient(90deg, #f6e27a 0%, #f2b94b 100%);
        color: rgb(1, 14, 76);
        border: none;
        cursor: pointer;
        margin-top: 8px;
        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;

        margin-top: 6%;

        font-size: 0.8vw;
        font-family: "opensans_italic2";
        transition: transform 0.3s ease;

        img {
          width: 15px;
        }
      }

      button:hover {
        transform: scale(1.1);
      }
    }
    .direita {
      width: 100%;
      height: 100%;

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

      img {
        width: 60%;
      }

      button {
        width: 50%;
        height: 12%;
        /* background-color: rgb(248, 101, 4); */
        background: linear-gradient(90deg, #f6e27a 0%, #f2b94b 100%);
        color: rgb(1, 14, 76);
        border: none;
        cursor: pointer;
        margin-top: 8px;
        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;

        margin-top: 6%;

        font-size: 0.8vw;
        font-family: "opensans_italic2";
        transition: transform 0.3s ease;

        img {
          width: 15px;
        }
      }

      button:hover {
        transform: scale(1.1);
      }
    }
  }

  .carros {
    position: absolute;
    object-fit: cover;

    left: 3%;
    top: 45%;

    img {
      width: 85%;
    }
  }

  .casa img {
    position: absolute;
    object-fit: cover;
    z-index: 1;

    left: 70%;
    top: 22%;

    width: 45%;
  }
}

.sec3 {
  width: 100vw;
  height: 100vh;
  padding: 7vw;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-around;

  background-image: url(Materiais/bg-sec3.webp);
  background-position: 80% 90%;
  background-size: cover;
  background-repeat: no-repeat;

  .imagem-meramente {
    margin-left: 9vw;
    margin-top: 5vw;
    font-family: "opensans_italic2";
    text-align: center;
    font-size: 0.9vw;
    position: absolute;
    top: 75%;
    left: 58%;
  }

  .quadro {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 2;
    /* background-color: green; */

    height: 100vh;

    .escolha {
      /* font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: italic; */
      font-family: "opensans_italic2", sans-serif;
    }

    h2 {
      font-size: 200%;
      font-family: "opensans";
      /* margin-bottom: 35%; */
    }

    .simulador {
      width: 100%;
      display: grid;
      place-items: center;
      /* background-color: green; */

      margin-top: 5%;

      img {
        width: 80%;
      }

      .credito {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1%;
        /* background-color: green; */
        width: 20vw;
        height: 10vh;

        h2 {
          font-family: "opensansbold";
          font-size: 7vw;
        }

        h3 {
          font-size: 3vw;
        }
        transform: translateY(-150%);
      }

      .parcela-real {
        margin-bottom: 1vw;
      }
      .parcela-desconto {
        margin-top: 8vw;

        h2 {
          font-family: "opensansbold";
          font-size: 5vw;
          /* 1. Aplique o degradê como background */
          background: linear-gradient(
            to bottom,
            #ffe082 0%,
            #ffc107 50%,
            #ffa000 100%
          );

          /* 2. Recorte o background para preencher apenas o texto */
          -webkit-background-clip: text;
          background-clip: text;

          /* 3. Deixe a cor original do texto transparente para revelar o fundo */
          -webkit-text-fill-color: transparent;
          color: transparent; /* Fallback */
        }
      }

      .slider-parcela-desconto {
        width: 20vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 20vw;
        z-index: 3;

        .slider {
          -webkit-appearance: none;
          width: 120%;
          height: 8px;
          background: white; /* Cor do trilho */
          outline: none;
          border-radius: 2px;
        }

        /*Chave(bolinha)*/
        .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 25px;
          height: 25px;
          background: #fcc434; /* Cor dourada da sua imagem */
          background-image: url(Materiais/listras-sec3.svg);
          background-position: center;
          background-size: 50%;
          background-repeat: no-repeat;
          cursor: pointer;
          border-radius: 4px; /* Levemente arredondado */
          border: none;
        }

        .slider-valores {
          width: 24vw;
          display: flex;
          justify-content: space-between;
          margin-top: 5%;
          gap: 10vw;
          /* background-color: green; */
        }
      }
      .linha::before {
        content: "";
        display: block;
        width: 460px;
        height: 1px;
        background-color: #5edfff;
        transform: translateY(-3vw);
      }
      .linha-parcela::before {
        content: "";
        display: block;
        width: 150px;
        height: 1.8px;
        background-color: #ffdc18;
        transform: translateY(-0.3vw);
        margin-left: 11vw;
      }
    }

    .simulador > * {
      grid-area: 1 / 1;
    }
  }
  .cacto-sec3 {
    position: absolute;
    object-fit: cover;
    top: 45%;
    left: 88vw;
  }

  button {
    width: 30%;
    height: 7%;
    /* background-color: rgb(248, 101, 4); */
    background: linear-gradient(90deg, #f6e27a 0%, #f2b94b 100%);
    color: rgb(1, 14, 76);
    border: none;
    cursor: pointer;
    margin-top: 8px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    margin-top: 6%;

    font-size: 0.6vw;
    font-family: "opensans_italic2";
    transition: transform 0.3s ease;

    img {
      width: 15px;
    }
  }
  button:hover {
    transform: scale(1.1);
  }

  .carro {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 5%;

    /* background-color: green; */
    img {
      width: 90%;
    }
  }
}

.sec4 {
  width: 100vw;
  height: 100vh;
  padding: 7vw;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-around;

  background-image: url(Materiais/bg-sec4.webp);
  background-position: center;
  background-size: 150%;
  background-repeat: no-repeat;

  .quadro-sec4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    /* background-color: green; */

    height: 100vh;

    h2 {
      font-size: 200%;
      font-family: "opensans";
      /* margin-bottom: 35%; */
    }

    .simulador {
      width: 100%;
      display: grid;
      place-items: center;
      /* background-color: green; */

      margin-top: 5%;

      img {
        width: 80%;
      }

      .credito {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1%;
        /* background-color: green; */
        width: 20vw;
        height: 10vh;

        h2 {
          font-family: "opensansbold";
          font-size: 7vw;
        }

        h3 {
          font-size: 3vw;
        }
        transform: translateY(-150%);
      }

      .parcela-real {
        margin-bottom: 1vw;
      }
      .parcela-desconto {
        margin-top: 8vw;

        h2 {
          font-family: "opensansbold";
          font-size: 5vw;
          /* 1. Aplique o degradê como background */
          background: linear-gradient(
            to bottom,
            #ffe082 0%,
            #ffc107 50%,
            #ffa000 100%
          );

          /* 2. Recorte o background para preencher apenas o texto */
          -webkit-background-clip: text;
          background-clip: text;

          /* 3. Deixe a cor original do texto transparente para revelar o fundo */
          -webkit-text-fill-color: transparent;
          color: transparent; /* Fallback */
        }
      }

      .slider-parcela-desconto {
        width: 20vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 20vw;
        z-index: 3;

        .slider {
          -webkit-appearance: none;
          width: 120%;
          height: 8px;
          background: white; /* Cor do trilho */
          outline: none;
          border-radius: 2px;
        }

        /*Chave(bolinha)*/
        .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 25px;
          height: 25px;
          background: #fcc434; /* Cor dourada da sua imagem */
          background-image: url(Materiais/listras-sec3.svg);
          background-position: center;
          background-size: 50%;
          background-repeat: no-repeat;
          cursor: pointer;
          border-radius: 4px; /* Levemente arredondado */
          border: none;
        }

        .slider-valores {
          width: 24vw;
          display: flex;
          justify-content: space-between;
          margin-top: 5%;
          gap: 8vw;
        }
      }
      .linha::before {
        content: "";
        display: block;
        width: 460px;
        height: 1px;
        background-color: #eccb0f;
        transform: translateY(-3vw);
      }
      .linha-parcela::before {
        content: "";
        display: block;
        width: 150px;
        height: 1.8px;
        background-color: #ffdc18;
        transform: translateY(-0.3vw);
        margin-left: 11vw;
      }
    }

    .simulador > * {
      grid-area: 1 / 1;
    }
  }

  .quadro-sec4 .escolha {
    font-family: "opensans_italic2";
  }

  .texto {
    width: 50%;
    height: 100vh;
    padding: 10%;
    padding-right: 5%;

    display: flex;
    justify-content: center;
    align-items: end;
    h2 {
      font-size: 1vw;
      font-family: "opensans_italic2";
    }
  }

  button {
    width: 30%;
    height: 7%;
    /* background-color: rgb(248, 101, 4); */
    background: linear-gradient(90deg, #f6e27a 0%, #f2b94b 100%);
    color: rgb(1, 14, 76);
    border: none;
    cursor: pointer;
    margin-top: 8px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    margin-top: 6%;

    font-size: 0.6vw;
    font-family: "opensans_italic2";
    transition: transform 0.3s ease;

    img {
      width: 15px;
    }
  }
  button:hover {
    transform: scale(1.1);
  }

  #cacto {
    position: absolute;
    object-fit: cover;

    top: 45%;
    left: 88%;
  }
}

.sec5 {
  width: 100vw;
  height: 80vh;
  position: relative;

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

  gap: 10%;

  background-image: url(Materiais/bg-sec5.webp);
  background-position: center;
  background-size: 130%;
  background-repeat: no-repeat;

  h2 {
    font-family: "opensans_italic2";
  }

  .swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 380px;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #elemento1 {
    position: absolute;
    object-fit: cover;
    width: 40%;
    top: 0;
    left: -20%;
  }
  #elemento2 {
    position: absolute;
    object-fit: cover;
    width: 40%;
    top: 0;
    left: 81%;
  }

  #chavebaixo {
    position: absolute;
    object-fit: cover;
    z-index: 2;
    width: 20%;
    top: 65%;
    left: 0%;
  }
  #chavecima {
    position: absolute;
    object-fit: cover;
    width: 20%;
    top: -20%;
    left: 81%;
  }
}

.sec6 {
  width: 100vw;
  height: 100vh;

  /* z-index: 1; */

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  background-image: url(Materiais/bg-sec6.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .cacto-sec6-1 {
    position: absolute;
    object-fit: cover;
    top: 55%;
    left: 88vw;
  }
  .cacto-sec6-2 {
    position: absolute;
    object-fit: cover;
    top: 20%;
    left: -10vw;
    transform: rotate(30deg);
  }
  .esquerda {
    width: 30vw;
    height: 70vh;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    padding-top: 4%;
    position: relative;

    /* background-color: green; */

    img {
      width: 18vw;
    }

    .info {
      width: 450px;
      height: 200px;
      background-color: #30a5f3;
      margin-top: 11%;

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

      h2 {
        font-family: "opensans", sans-serif;
        font-weight: 300;
        margin-bottom: 6%;
      }

      p {
        font-family: "opensans", sans-serif;
        font-size: 0.8vw;
        text-align: center;
      }
    }

    button {
      width: 30%;
      height: 7%;

      position: absolute;
      top: 74%;
      left: 34%;
      /* background-color: rgb(248, 101, 4); */
      background: linear-gradient(90deg, #f6e27a 0%, #f2b94b 100%);
      color: rgb(1, 14, 76);
      border: none;
      cursor: pointer;
      margin-top: 8px;
      z-index: 5;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;

      margin-top: 6%;

      font-size: 0.6vw;
      font-family: "opensans_italic2";
      font-weight: 300;
      transition: transform 0.3s ease;
    }

    button:hover {
      transform: scale(1.1);
    }
  }

  .direita {
    width: 50vw;
    height: 70vh;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;

    /* background-color: green; */

    .faq-container {
      width: 100%;
      max-width: 700px;
      display: flex;
      flex-direction: column;
      gap: 16px; /* Espaçamento entre os cards */
    }

    /* Estilização padrão de cada item do FAQ */
    .faq-item {
      background-color: #031544; /* Azul levemente mais claro para os blocos */
      border: 2px solid transparent; /* Reserva o espaço da borda para evitar pulos visuais */
      /*  border-radius: 4px; */
      overflow: hidden;
      transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    }

    /* Estilo quando o item estiver ATIVO (aberto) */
    .faq-item.active {
      border-color: #ff8c00; /* Borda laranja/ouro */
      background-color: #031544;
    }
    .faq-item:not(.active):hover {
      background-color: #ff8c00;
    }

    /* Cabeçalho do FAQ (Botão clicável) */
    .faq-header {
      width: 100%;
      padding: 35px;
      background: none;
      border: none;
      outline: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      color: #ffffff;
      text-align: left;
      font-size: 1.15rem;
      font-style: italic; /* Texto em itálico como na imagem */
      font-weight: 500;
      transition: border-color 0.3s ease;
    }
    .faq-header:hover {
      border-color: #ff8c00; /* Borda laranja/ouro */
    }

    /* Ícone da seta (Chevron) */
    .faq-icon {
      width: 20px;
      height: 20px;
      color: #ff8c00; /* Cor da seta laranja */
      transition: transform 0.3s ease;
    }

    /* Rotaciona a seta para cima quando ativo */
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }

    /* Corpo do FAQ (Onde fica a resposta) */
    .faq-body {
      max-height: 0; /* Começa escondido */
      overflow: hidden;
      transition: max-height 0.3s ease-out; /* Transição suave de abertura */
    }

    /* Conteúdo interno do texto da resposta */
    .faq-body p {
      padding: 0 24px 24px 24px;
      margin: 0;
      color: #a0aec0; /* Cor do texto cinza claro */
      font-size: 0.95rem;
      font-style: italic;
      line-height: 1.6;
    }

    /* Exibe o conteúdo se o item estiver ativo */
    .faq-item.active .faq-body {
      max-height: 200px; /* Define uma altura máxima segura para a animação */
    }
  }
}

.sec7 {
  width: 100vw;
  height: 80vh;
  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url(Materiais/bg-footer.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  #rodapefooter {
    display: none;
  }

  > img {
    width: 50vw;
    /* z-index: 2; */
    position: absolute;
    top: 40%;
    left: 25%;
  }

  .cima {
    width: 100%;
    height: 15%;
    margin-bottom: 5%;

    padding: 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .infos {
      display: flex;
      justify-content: center;
      align-items: center;

      gap: 15%;

      .icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15%;
      }

      .icons img {
        width: 2vw;
      }
    }

    img {
      width: 8vw;
    }
  }
  .baixo {
    width: 100%;
    height: 30%;
    /* background-color: green; */

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 5%;
    padding-top: 8%;
    img {
      width: 60vw;
    }
  }
}

@media (max-width: 460px) {
  /*  * {
    outline: 1px solid red !important;
  } */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
  }

  .cactos2,
  .cactos1 {
    display: none;
  }

  header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Garante alinhamento vertical no topo */
    padding: 7dvw;
    width: 100dvw;
    height: auto;
    position: absolute; /* Importante para o controle do z-index */

    .oco {
      display: none;
    }

    .menu-lateral {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 32px;
      height: 22px;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 100; /* Fica acima do menu lateral quando aberto */
    }

    /* Linhas do ícone hambúrguer */
    .menu-lateral span {
      width: 100%;
      height: 2px;
      background-color: #fff;
      border-radius: 2px;
      transition: all 0.3s ease-in-out;
    }

    /* Efeito Premium no Hambúrguer quando ativo (vira um 'X') */
    &.menu-aberto {
      .menu-lateral span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .menu-lateral span:nth-child(2) {
        opacity: 0;
      }
      .menu-lateral span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }
    }

    /* 2. Menu Lateral Estilo Premium (Drawer) */
    .menu-nav {
      display: flex; /* Mudamos para flex para controlar melhor o alinhamento */
      justify-content: center;
      align-items: center;

      position: fixed;
      top: 0;
      right: 0; /* Abre do lado direito */
      width: 75%; /* Não ocupa a tela toda, deixando o fundo semi-transparente visível */
      max-width: 320px;
      height: 100vh;

      /* Fundo premium: Escuro com leve transparência e desfoque (Glassmorphism) */
      background: rgba(15, 15, 15, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      padding: 80px 40px;
      box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.5);
      z-index: 90;

      /* Efeito de deslizar */
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Quando ativo, desliza para dentro da tela */
    .menu-nav.active {
      transform: translateX(0);
    }

    /* Estilizando a lista vertical */
    .menu-nav ul {
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* Alinhado à esquerda fica mais premium */
      gap: 35px; /* Mais espaço entre os botões */
      padding: 0;
      margin: 0;
      list-style: none;
      width: 100%;
    }

    /* Botões maiores e elegantes */
    .menu-nav ul li a {
      font-size: 1.5rem; /* Tamanho fixo e imponente para mobile */
      font-weight: 300;
      color: #ffffff;
      text-decoration: none;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition:
        color 0.3s,
        padding-left 0.3s;
      display: block;
      width: 100%;
    }

    /* Feedback visual moderno ao tocar/passar o mouse */
    .menu-nav ul li a:active,
    .menu-nav ul li a:hover {
      color: #d4af37; /* Um tom dourado/premium (opcional, mude se preferir) */
      padding-left: 10px; /* Leve deslize para a direita */
    }

    .logo img {
      width: 100%;
      max-width: 120px; /* Evita que a logo suma ou mude de proporção drasticamente */
    }
  }

  .hero {
    background-image: url(Materiais/bg-hero-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;

    .cactos-hero {
      display: block; /* OBRIGATÓRIO: Cancela o 'display: none' do desktop */

      width: 100dvw; /* Cuidado com o 100vw para não gerar barra de rolagem lateral! */
      height: 50dvh;
      position: absolute;
      left: 70%;
      top: 12%;
      z-index: 5;

      img {
        width: 50dvw;
        transform: rotate(-30deg);
      }
    }

    .conteudo {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .esquerda {
        margin-top: 15%;
        img {
          width: 60dvw;
        }
        h2 {
          font-size: 4dvw;
        }
        button {
          width: 75%;
          height: 10%;
          font-size: 2.2dvw;
        }
      }
      .direita .caba {
        top: -80%;
        left: -20%;
        img {
          width: 120dvw;
        }
      }
      .direita .carro-hero {
        top: 5%;
        left: -60%;
        img {
          width: 120dvw;
        }
      }
    }
  }
  .sec2 {
    background-image: url(Materiais/bg-sec2-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10dvw;

    .carros,
    .casa,
    .linha {
      display: none;
    }

    .conteudo-sec2 {
      width: 100%;
      height: 100%;
      flex-direction: column;

      .titulo {
        top: 5%;
        left: 22%;

        font-size: 3dvw;
      }
      .esquerda {
        margin-left: 50%;
        margin-top: 5%;
        height: 50dvh;
        /* margin-bottom: 10%; */
        button {
          width: 200px;
          height: 30px;
          font-size: 1.52dvw;
        }
      }
      .direita {
        margin-right: 50%;
        margin-top: 15%;
        button {
          width: 200px;
          height: 30px;
          font-size: 1.52vw;
        }
      }
    }
  }

  .sec3 {
    flex-direction: column;
    background-image: url(Materiais/bg-sec3-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .quadro {
      height: auto; /* Deixe o conteúdo ditar a altura no mobile */
      padding: 20px 0;
      flex: none;
      width: 100%;
      margin-top: 15px;

      h2 {
        font-size: 150%; /* Ajusta o título principal "Escolha sua carta..." */
        text-align: center;
      }

      .simulador {
        margin-top: 2%;
        width: 100%;

        img {
          width: 90%; /* Aumenta a moldura azul de fundo no mobile */
        }

        /* Ajustando o valor do Crédito (Ex: 54 MIL) */
        .credito {
          width: 80vw; /* De 20vw para 80vw para dar espaço ao texto */
          height: auto;
          transform: translateY(
            -50%
          ); /* Ajuste fino para encaixar no topo da moldura */
          gap: 5px;

          h2 {
            font-size: 25vw; /* Aumenta o "54" para ficar bem visível */
          }

          h3 {
            font-size: 5vw; /* Ajusta o "MIL" */
          }
        }

        /* Bloco das parcelas */
        .parcela-real {
          transform: translateY(
            0vw
          ); /* Centraliza o texto "PARCELAS DE R..." */
          text-align: center;
          width: 80%;
          font-size: 60%;
        }

        .parcela-desconto {
          margin-top: 15vw; /* Empurra o valor grande amarelo para baixo da linha */

          h2 {
            font-size: 12vw; /* Aumenta drasticamente o preço amarelo (Ex: 691,15) */
          }
        }

        /* Ajustando o Slider e o Trilho */
        .slider-parcela-desconto {
          width: 60vw; /* De 20vw para 70vw para o slider ficar largo no celular */
          margin-top: 40vw; /* Empurra o slider para a base da moldura azul */

          .slider {
            width: 100%;
          }

          /* Mantém o visual da bolinha dourada */
          .slider::-webkit-slider-thumb {
            width: 22px;
            height: 22px;
            background-size: 60%;
          }

          /* Centraliza e afasta os valores mínimos/máximos (R$ 54.000 / R$ 300.000) */
          .slider-valores {
            width: 100%; /* Ocupa toda a largura do slider */
            gap: 0; /* Remove o gap fixo */
            margin-top: 2%;
            font-size: 3.5vw; /* Tamanho legível para os números pequenos */
          }
        }

        /* --- AJUSTE DAS LINHAS DECORATIVAS --- */

        /* Linha Azul do Meio */
        .linha::before {
          width: 60vw; /* Em vez de px, usamos vw para se adaptar a qualquer celular */
          transform: translateY(-5vw);
        }

        /* Linha Amarela de desconto rasurado */
        .linha-parcela::before {
          width: 20vw; /* Aumenta a linha para cobrir o preço rasurado no mobile */
          height: 2px;
          transform: translateY(
            0vw
          ); /* Move a linha para cima do número correto */
          transform: translateX(-5vw);
          margin-left: 36vw; /* Centraliza em cima do preço antigo */
        }
      }
    }

    button {
      width: 45vw;
      height: 5vh;
      font-size: 2vw;
      z-index: 1;
    }
    .imagem-meramente {
      top: 90%;
      left: 28%;
      font-size: 2dvw;
    }
  }

  .sec4 {
    background-image: url(Materiais/bg-sec4-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    #cacto {
      top: 40%;
      left: 70%;
    }

    .quadro-sec4 {
      height: auto; /* Deixe o conteúdo ditar a altura no mobile */
      padding: 20px 0;
      flex: none;
      width: 100%;
      margin-bottom: 50%;

      h2 {
        font-size: 150%; /* Ajusta o título principal "Escolha sua carta..." */
        text-align: center;
      }

      .simulador {
        margin-top: 2%;
        width: 100%;

        img {
          width: 90%; /* Aumenta a moldura azul de fundo no mobile */
        }

        /* Ajustando o valor do Crédito (Ex: 54 MIL) */
        .credito {
          width: 80vw; /* De 20vw para 80vw para dar espaço ao texto */
          height: auto;
          transform: translateY(
            -50%
          ); /* Ajuste fino para encaixar no topo da moldura */
          gap: 5px;

          h2 {
            font-size: 25vw; /* Aumenta o "54" para ficar bem visível */
          }

          h3 {
            font-size: 5vw; /* Ajusta o "MIL" */
          }
        }

        /* Bloco das parcelas */
        .parcela-real {
          transform: translateY(
            0vw
          ); /* Centraliza o texto "PARCELAS DE R..." */
          text-align: center;
          width: 80%;
          font-size: 60%;
        }

        .parcela-desconto {
          margin-top: 15vw; /* Empurra o valor grande amarelo para baixo da linha */

          h2 {
            font-size: 12vw; /* Aumenta drasticamente o preço amarelo (Ex: 691,15) */
          }
        }

        /* Ajustando o Slider e o Trilho */
        .slider-parcela-desconto {
          width: 60vw; /* De 20vw para 70vw para o slider ficar largo no celular */
          margin-top: 40vw; /* Empurra o slider para a base da moldura azul */

          .slider {
            width: 100%;
          }

          /* Mantém o visual da bolinha dourada */
          .slider::-webkit-slider-thumb {
            width: 22px;
            height: 22px;
            background-size: 60%;
          }

          /* Centraliza e afasta os valores mínimos/máximos (R$ 54.000 / R$ 300.000) */
          .slider-valores {
            width: 100%; /* Ocupa toda a largura do slider */
            gap: 0; /* Remove o gap fixo */
            margin-top: 2%;
            font-size: 3.5vw; /* Tamanho legível para os números pequenos */
          }
        }

        /* --- AJUSTE DAS LINHAS DECORATIVAS --- */

        /* Linha Azul do Meio */
        .linha::before {
          width: 60vw; /* Em vez de px, usamos vw para se adaptar a qualquer celular */
          transform: translateY(-5vw);
        }

        /* Linha Amarela de desconto rasurado */
        .linha-parcela::before {
          width: 20vw; /* Aumenta a linha para cobrir o preço rasurado no mobile */
          height: 2px;
          transform: translateY(
            0vw
          ); /* Move a linha para cima do número correto */
          transform: translateX(-5vw);
          margin-left: 36vw; /* Centraliza em cima do preço antigo */
        }
      }
    }

    button {
      width: 45vw;
      height: 5vh;
      font-size: 2vw;
      z-index: 1;
    }
    .texto {
      position: absolute;

      display: flex;
      justify-content: center;
      align-items: end;
      top: 0%;
      left: 0%;
      h2 {
        font-size: 2vw;
        font-family: "opensans_italic2";
      }
    }
  }

  .sec5 {
    background-image: url(Materiais/bg-sec5-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    h2 {
      margin-top: 10%;
    }
    #chavebaixo {
      top: 80%;
      left: -20%;
      width: 50vw;
      transform: rotate(80deg);
    }
    #chavecima {
      top: -15%;
      left: 50%;
      width: 50vw;
      transform: rotate(30deg);
    }
    .swiper {
      transform: translateY(-15%);
    }
  }
  .sec6 {
    flex-direction: column;

    background-image: url(Materiais/bg-sec6-mobile.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .cacto-sec6-2,
    .cacto-sec6-2 {
      display: none;
      top: -50vw;
    }

    .esquerda {
      width: 100dvw;
      height: 70dvh;

      img {
        /* margin-top: 20%; */
        width: 30dvw;
        transform: translateY(60%);
      }

      .info {
        width: 280px;
        height: 160px;
        transform: translateY(15%);

        p {
          font-size: 3vw;
        }
      }

      button {
        width: 40%;
        height: 10%;
        font-size: 2.2vw;
        top: 95%;
        left: 30%;
        z-index: 2;
      }
    }

    .direita {
      padding-top: 0%;
      width: 100vw;
      transform: scale(70%);

      .faq-container {
        width: 100%; /* Faz o FAQ se esticar por todo o espaço disponível */
        max-width: 100%; /* Garante que não haverá travas de tamanho */
        gap: 12px; /* Reduz levemente o espaço entre os cards para poupar tela vertical */
      }

      /* Ajuste de respiro interno dos blocos do FAQ */
      .faq-header {
        padding: 20px; /* Reduz de 35px para 20px para sobrar mais espaço para o texto */
        font-size: 1rem; /* Ajusta o tamanho da fonte para não quebrar muitas linhas */
      }

      /* Ajuste do texto da resposta quando aberto */
      .faq-body p {
        padding: 0 20px 20px 20px;
        font-size: 0.9rem;
      }

      /* Cancela o efeito de hover que trava colorido no mobile */
      .faq-item:not(.active):hover {
        background-color: #031544; /* Mantém a cor azul padrão ao invés de virar laranja no toque */
      }
    }
  }

  .sec7 {
    background-image: url(Materiais/bg-footer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;

    position: relative;

    #carrosfooter {
      width: 100vw;
      left: 0%;
      top: 50%;
    }
    .cima {
      position: absolute;

      /* background-color: green; */
      width: 30dvw;
      height: 10vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      top: 20%;
      left: 35%;
      gap: 50%;
      img {
        transform: scale(50%);
      }
      .infos {
        transform: scale(80%);
        position: absolute;
        top: 180%;
        left: -130%;

        width: 100dvw;
        height: 30%;
        /* background-color: green; */
        display: flex;

        img {
          width: 50dvw;
        }

        .icons {
          img {
            width: 8vw;
          }
        }
      }
    }
    .baixo {
      img {
        width: 90%;
        position: absolute;
        top: 90%;
      }
    }
  }
}