/* Definir a fonte Poppins */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

/* -------- ESTRUTURA BASE -------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F7F7F7;
}

/* Conteúdo principal */
.section {
  margin: auto;
  text-align: center;
}

.destaques-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #161616;
  padding-top: 15px;
}

.destaques-container {
  width: 1318px;
  height: 774px;
  background-color: #FFFFFF;
  border-radius: 14px;
}

#destaques.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0px 40px 35px 40px;
}

#seminovoshome.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.btn-details {
    font-weight: 700;
    font-weight: bold;
    color: var(--primary-red);
    border: 1px solid var(--primary-red);
    background-color: #FFFFFF;
}

.btn-buy {
  font-weight: 700;
  font-weight: bold;
  color: #00A80B;
  border: 1px solid #00A80B;
  background-color: #FFFFFF;
}

.btn-view-all {
  width: 314px;
  height: 47px;
  border: none;
  border-radius: 3px;
  background: #FFFFFF;
  color: #161616;
  box-shadow: 0px 4px 4px 0px #00000040;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -0.9px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: block;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.btn-view-all:hover {
  background: #f8f8f8;
  transform: translateY(-1px);
  box-shadow: 0px 6px 6px 0px #00000040;
}

.btn-view-all:active {
  transform: translateY(0px);
  box-shadow: 0px 2px 2px 0px #00000040;
}

/* =========================
   SESSÃO 2: Seminovos
========================= */
.seminovos-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /*  margin: 80px 0;*/
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.seminovos-content {
  width: 100%;
  max-width: 1246px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.seminovos-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -0.9px;
  color: #161616;
  text-align: left;
  width: 130px;
  height: 36px;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.seminovos-container {
  width: 100%;
/*  min-height: 1118px;
*/  opacity: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  box-sizing: border-box;
}

#footer {
  flex-shrink: 0;
}

/* -------- HEADER -------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-top {
    background: var(--header-top-bg);
    padding: 10px 0;
}

.header-top .logo img {
  max-height: 60px;
}

.header-top .whatsapp a {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 30px;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #4BAE4F;
}

.header-top .whatsapp img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.header-banner {
  width: 100%;
  height: auto;
  overflow: hidden;
}

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

/*.header-menu {
  background: #F1F1F1;
}*/

/*.header-menu ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-menu ul li {
  margin: 0 20px;
}

.header-menu ul li a {
  color: #161616;
  text-decoration: none;
  padding: 15px 0;
  display: block;
  transition: opacity .3s;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.header-menu ul li a:hover {
  opacity: 0.8;
}*/

.header-info {
    background: var(--header-info-bg-default);
}

.header-info ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.header-info ul li {
  margin: 0 30px;
  color: #FFFFFF;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* -------- FOOTER -------- */
.footer-brands {
  background: #FFFFFF;
  padding: 80px 150px;
  text-align: center;
}

.footer-brands h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: -0.9px;
  margin-bottom: 48px;
  color: #000000;
}

/* Carousel */
.brands-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brands-track-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.brands-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease-in-out;
}

.brands-track img {
  width: 137px;
  height: 65px;
  flex-shrink: 0;
  object-fit: contain;
}

.carousel-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
}





/* ============================
   MODO MOBILE - HOME PAGE
   ============================ */
@media (max-width: 768px) {

  /* ===== CONFIGURAÇÃO GERAL ===== */
  html,
  body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  main {
    width: 100%;
  }

  #header,
  #footer {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {

  /* === 1️⃣ HEADER SUPERIOR === */
  .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .container .logo {
    margin: 10px auto;
    text-align: center;
  }

  .container .whatsapp {
    display: none !important;
  }

  /* === 2️⃣ HEADER BANNER === */
  .header-banner {
    height: auto;
  }

  .header-banner img {
    height: auto;
    object-fit: contain;
  }

  .header-menu,
  .header-info {
    display: none !important;
  }

  /* === 3️⃣ DESTAQUES (SCROLL HORIZONTAL) === */
  .destaques-container {
    width: 390px;
    height: 100%;
    margin: 0 auto;
    white-space: nowrap;
    border-radius: 8px;
  }

  .destaques-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #161616;
    padding: 20px 0;
    margin: 0;
  }

    #destaques.cards-container {
        display: flex;
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-top: 20px;
    }

  /* Esconde scrollbar no Webkit (Chrome, Edge, Safari) */
  #destaques.cards-container::-webkit-scrollbar {
    display: none;
  }

  #destaques.cards-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  #destaques.cards-container::-webkit-scrollbar-track {
    background: transparent;
  }

  #destaques .card {
    padding: 0;
    flex: 0 0 auto;
    width: 156px;
    height: auto;
    display: inline-block;
  }

    #destaques .card-price {
        float: none;
    }

    .btn-view-all {
        width: 235px;
        height: 47px;
        border: none;
        border-radius: 3px;
        background: #FFFFFF;
        color: #161616;
        box-shadow: 0px 4px 4px 0px #00000040;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: -0.9px;
        text-align: center;
        cursor: pointer;
        padding: 0;
        display: block;
        margin: 18px auto;
        transition: all 0.3s ease;
    }

  /* === 4️⃣ SEMINOVOS (CARDS EM LINHA VERTICAL) === */
      .seminovos-section {
    margin: 80px 0;
  }

    .seminovos-container {
        min-height: 0px;
        display: flex;
    }

    .seminovos-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
        color: var(--primary-red);
        border-bottom: 4px solid var(--primary-red);
        width: 100%;
    }

  /* ===== Ajuste fix para SEMINOVOS ===== */
    #seminovoshome.cards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 10px 0;
        width: 100%;
    }

  #seminovoshome .card {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 8px;
    padding: 0px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-sizing: border-box;
  }

  #seminovoshome .card-img {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 96px !important;
/*    height: 96px !important;
*/    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin: 0;
    flex-shrink: 0;
  }

    #seminovoshome .card-title {
        font-family: 'Poppins', sans-serif;
        grid-column: 2 / 2;
        grid-row: 1 / 1;
        margin: 0;
        font-size: 15px;
        font-weight: 900;
        color: #1B1B1B;
        line-height: 22px;
        /* align-self: end;*/
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        min-height: 30px;
        padding-right: 5px;
    }

    #seminovoshome .card-mid {
        align-content: center;
        height: auto;
    }

    #seminovoshome .card-price {
        font-family: 'Plus Jakarta Sans', sans-serif;
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        color: #1B1B1B;
        /*    align-self: start;
*/ padding-top: 0px;
        margin-top: 0px;
        text-align: right;
        padding-right: 10px;
        margin-bottom: 0px;
        padding-bottom: 5px;
        padding-right: 5px;
        float: right;
    }

    #seminovoshome .card-info {
        display: flex;
        grid-column: 2 / 2;
        grid-row: 1 / 3;
    }

    #destaques .card-info, #destaques .card-old-price,
    #destaques .btn-details,
    #destaques .btn-buy,
    #destaques .card-divider {
        display: none !important;
    }

  #seminovoshome .card-old-price,
  #seminovoshome .btn-details,
  #seminovoshome .btn-buy,
  #seminovoshome .card-divider {
    display: none !important;
  }

  /* === 5️⃣ FOOTER BRANDS COM SCROLL HORIZONTAL === */
  .footer-brands {
    margin-top: 20px;
    padding: 10px 0;
    overflow: hidden;
  }

  .footer-brands h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 100%;
    margin-bottom: 8px;
    text-align: center;
    color: #434343;
  }

  .carousel-btn {
    display: none;
  }

  .brands-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 0 12px;
    align-items: center;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .brands-track::-webkit-scrollbar {
    display: none;
  }

  .brands-track img {
    flex: 0 0 auto;
    object-fit: contain;
  }

  .brands-carousel {
    transform-origin: center;
    height: 65px;
  }

  brands-track-wrapper {
    width: 100% !important;
  }
}