* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.tradução {
    width: 100%;
    height: 10px;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 55 40px;
}

.logo h1 {
    font-size: 24px;
    color: #d4af37; /* dourado elegante */
}

.language-buttons {
    display: flex;
    gap: 12px;
}

.language-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

.language-buttons button:hover {
    transform: scale(1.15);
}

.language-buttons img {
    width: 32px;
    height: auto;
    border-radius: 4px;
}



/* ===============================
   RESPONSIVO MOBILE & TABLET
   =============================== */
   

@media (max-width: 1024px) {
  header {
    padding: 20px 30px;
  }

  .hero {
    padding: 80px 30px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero-img {
    height: 320px;
  }

  section {
    padding: 60px 30px;
  }
}

@media (max-width: 768px) {

  /* HEADER */
  header {
    flex-direction: column;
    gap: 15px;
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  nav a {
    margin: 0;
    font-size: 14px;
  }

  /* HERO */
  .hero {
    padding: 60px 20px;
  }

  .hero h1 {
    font-size: 32px;
  }

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

  .btn {
    padding: 14px 30px;
    font-size: 14px;
  }

  .hero-img {
    height: 260px;
  }

  /* TÍTULOS */
  .section-title {
    font-size: 28px;
  }

  /* CATEGORIAS */
  .categories {
    grid-template-columns: 1fr;
  }

  .category {
    padding: 30px 20px;
  }

  /* ESTOQUE */
  .inventory {
    grid-template-columns: 1fr;
  }

  .car img {
    height: 220px;
  }

  /* FOOTER */
  footer {
    padding: 40px 20px;
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .logo {
    font-size: 22px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .hero p {
    font-size: 15px;
  }

  .price {
    font-size: 18px;
  }
}





/* ===== Mobile Sidebar ===== */
.mobile-header{
  display:none;align-items:center;justify-content:space-between;
  padding:12px 16px;background:#000000;color:#fff;position:sticky;top:0;z-index:1002
}
.menu-btn{font-size:26px;background:none;border:none;color:#fff;cursor:pointer}
.logo-text{font-weight:700;font-size:15px}

.mobile-sidebar{
  position:fixed;top:0;left:-100%;width:82%;max-width:320px;height:100%;
  background:#020617;color:#352a2a;transition:.3s ease;z-index:1003;
  display:flex;flex-direction:column
}
.mobile-sidebar.active{left:0}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;border-bottom:1px solid #000000
}
.close-btn{background:none;border:none;color:#fff;font-size:22px;cursor:pointer}
.sidebar-nav a{
  padding:14px 16px;color:#fff;text-decoration:none;border-bottom:1px solid #1e293b
}
.sidebar-nav a:hover{background:#000000}

#overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;z-index:1002
}
#overlay.active{display:block}

@media (max-width:768px){
  .mobile-header{display:flex}
}

.app-header{
  display:none;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(135deg,#000000,#000000);
  color:#fff;position:sticky;top:0;z-index:3000
}
.app-menu-btn{font-size:26px;background:none;border:none;color:#fff}
.app-logo{font-weight:800}

.app-sidebar{
  position:fixed;top:0;left:-100%;
  width:85%;max-width:340px;height:100%;
  background:linear-gradient(180deg,#000000,#000000,#000000);
  color:#fff;z-index:3001;
  transition:.35s ease;
  border-radius:0 22px 22px 0;
  box-shadow:20px 0 50px rgba(0,0,0,.6);
  display:flex;flex-direction:column
}
.app-sidebar.active{left:0}

.app-sidebar-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px;border-bottom:1px solid #000000
}
.brand-name{font-size:18px;font-weight:800}
.brand-sub{font-size:12px;color:#94a3b8}

.app-close-btn{
  background:#000000;border:none;color:#959e44;
  width:36px;height:36px;border-radius:50%
}

.app-nav a{
  padding:16px 20px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;gap:10px
}
.app-nav a:hover{background:rgba(255,255,255,.06)}

.app-sidebar-footer{
  margin-top:auto;padding:16px 20px;
  font-size:11px;color:#94a3b8;
  border-top:1px solid #1e293b
}

#overlay{
  position:fixed;inset:0;background:rgba(122, 108, 46, 0.75);
  display:none;z-index:3000
}
#overlay.active{display:block}

@media(max-width:768px){.app-header{display:flex}}


/* MOBILE: move header menu options into sidebar (do not affect desktop) */
@media (max-width:768px){
  header nav, header .desktop-nav { display:none !important; }
}

/* Divider inside sidebar */
.app-nav-divider{
  height:1px;
  margin:10px 18px;
  background:rgba(255,255,255,.10);
  border-radius:999px;
}


/* Clickable brand (logo + name) */
.logo-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.logo-link:hover{
  opacity:0.9;
}