:root{
  --bg:#f5f5f7; --panel:#ffffff; --text:#0f172a; --muted:#6b7280; --border:#e7ecf7;
  /* Vermelho vinho */
  --r1:#8B1E2D; --r2:#6F0F1F; --r3:#4E0B15;
  --radius:16px; --gap:18px; --shadow:0 10px 24px rgba(0,0,0,.08);
}

/* ================= Base ================= */
*{ box-sizing:border-box }
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background:
    radial-gradient(900px 540px at -10% 120%, #fdeef0 0, transparent 60%),
    radial-gradient(1000px 520px at 110% -20%, #fde6ea 0, transparent 60%),
    #f7f8fc;
}
main{ margin-top:96px }

/* ================= Navbar (vinho) ================= */
.navbar{ min-height:80px }
.nav-gradient{
  background: linear-gradient(135deg, #C44A59, var(--r1) 40%, var(--r2) 90%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(78,11,21,.22);
}

/* Logo retangular */
.brand-logo{
  height:60px; /* CHG: fixo em 60px */
  width:auto; object-fit:contain;
  border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
@media (max-width:600px){ .brand-logo{ height:60px } } /* CHG: mantém 60px no mobile também */

/* Links principais */
.navbar .nav-link{
  color:#fff !important;
  font-size:1.05rem;
  font-weight:800;
  padding:0.5rem 1rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color:#ffe6e6 !important }

/* Busca / Clima / USD na barra */
.nav-search .form-control{ background:transparent; color:#fff }
.nav-search .form-control::placeholder{ color:rgba(255,255,255,.9) }
.nav-search .input-group-text{ color:#fff }
.nav-weather .bi{ font-size:22px; color:#fff }
.nav-usd{ color:#fff; font-weight:800 }

/* Dropdown (submenu) – fundo preto e acessível ao hover */
.dropdown-menu{
  background:#000 !important;
  border-radius:10px; border:1px solid rgba(255,255,255,.2);
  min-width:200px;
  margin-top:.25rem;
  z-index:1050;
}
.dropdown-item{ color:#fff !important; font-weight:600 }
.dropdown-item:hover,.dropdown-item:focus{
  background:linear-gradient(90deg, var(--r1), var(--r2));
  color:#fff !important;
}
@media (min-width: 992px){
  .dropdown-hover:hover > .dropdown-menu{ display:block }
  .dropdown:hover .dropdown-menu{ display:block }
}
.offcanvas .dropdown-menu{ border-radius:12px }

/* ================= Painéis e grid ================= */
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:12px;
}
.hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.kv{ font-size:13px; line-height:1.2 }
.kv .small{ color:var(--muted) }
.list-ico{ list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:13px }
.list-ico .bi{ width:18px }

.content-grid{ display:grid; grid-template-columns: 1fr 340px; gap:var(--gap) }
@media (max-width:1200px){ .content-grid{ grid-template-columns:1fr } }

/* ================= Hero (sem título/descrição) ================= */
.hero{
  background: linear-gradient(90deg, var(--r1), var(--r2));
  color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.hero-content{ flex:1 1 auto; min-width:0 }
.hero-cta{ flex:0 0 auto }
@media (max-width:700px){
  .hero{ flex-direction:column; align-items:stretch; gap:8px }
  .hero-cta{ align-self:flex-end }
}

/* ================= Marquee de notícias ================= */
.marquee{ border:0; overflow:hidden; padding:0 }
.marquee .marquee-wrap{
  --marquee-time: 30s; /* ajustado via JS */
  background: linear-gradient(90deg, var(--r1), var(--r2));
  color:#fff;
  height:60px; /* CHG: fixo em 60px */
  display:flex; align-items:center;
  border-radius:10px; position:relative; box-shadow: 0 6px 16px rgba(78,11,21,.18);
}
.marquee .marquee-track{
  display:flex; gap:28px; white-space:nowrap; will-change:transform;
  animation: marquee-left var(--marquee-time) linear infinite;
  padding:0 10px;
}
.marquee .marquee-wrap:hover .marquee-track{ animation-play-state: paused }
@keyframes marquee-left{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
.marq-item{
  display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none;
  font-weight:800; padding:0 4px;
}
.marq-item .tag{
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:13px; /* CHG: subiu pois o container ficou 60px */
  line-height:1; padding:8px 10px; border-radius:999px; font-weight:900;
}
.marq-item .title{ font-size:16px } /* CHG: subiu para equilibrar */
.marq-sep{ opacity:.5 }
@media (max-width:600px){
  .marq-item .title{ font-size:15px }
  .marq-item .tag{ font-size:12px; padding:7px 9px }
}

/* ================= Banner de publicidade (100% x 120px) ================= */
.ad-slider{
  height:120px; border-radius:14px; overflow:hidden; border:1px solid var(--border);
  box-shadow: 0 8px 20px rgba(78,11,21,.12), inset 0 2px 0 rgba(255,255,255,.25);
}
.ad-slider .carousel-item{ height:120px }
.ad-slider .carousel-item a,
.ad-slider .carousel-item img{ display:block; width:100%; height:100%; object-fit:cover }
.ad-slider .carousel-item .ad-fallback{
  display:grid; place-items:center; height:100%;
  background: linear-gradient(180deg, #8B1E2D, #6F0F1F 70%);
  color:#ff6d6d; font-weight:900; font-size:42px; letter-spacing:2px;
}

/* Sidebar sticky ad */
.sticky-ad{ position: sticky; top: 96px }
.ad-slider-side{
  height:240px; border-radius:12px; overflow:hidden; border:1px solid var(--border)
}
.ad-slider-side .carousel-item{ height:240px }
.ad-slider-side .carousel-item img{ width:100%; height:100%; object-fit:cover }

/* Controles dos carrosséis de ads */
.ad-slider .carousel-control-prev-icon,
.ad-slider .carousel-control-next-icon,
.ad-slider-side .carousel-control-prev-icon,
.ad-slider-side .carousel-control-next-icon{
  filter: invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* ================= Carrossel de fotos (galeria) ================= */
.carousel .carousel-item{ height:260px }
.carousel .carousel-item img{ width:100%; height:100%; object-fit:cover; border-radius:10px }

/* ================= Botões tema vinho ================= */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg: linear-gradient(135deg, var(--r1), var(--r2));
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: linear-gradient(135deg, #C44A59, var(--r1));
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: linear-gradient(135deg, var(--r2), var(--r3));
}
.btn-outline-primary{
  --bs-btn-color: var(--r1);
  --bs-btn-border-color: var(--r1);
  --bs-btn-hover-bg: var(--r1);
  --bs-btn-hover-border-color: var(--r1);
  --bs-btn-hover-color: #fff;
}

/* ================= Galeria ================= */
.pillbar{ display:flex; align-items:center; gap:8px }
.pillbar .btn{ padding:4px 10px; font-size:12px; border-radius:999px; font-weight:800 }
.galeria-grid{ display:grid; gap:10px; grid-template-columns:repeat(6, minmax(0,1fr)) }
@media (max-width:1400px){ .galeria-grid{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:1100px){ .galeria-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:900px){  .galeria-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:600px){  .galeria-grid{ grid-template-columns:repeat(2,1fr) } }
.thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:12px; border:1px solid var(--border); cursor:pointer; background:#fff1f3 }
.thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease }
.thumb:hover img{ transform:scale(1.04) }
.cap{
  position:absolute; left:8px; bottom:8px; right:8px;
  font-size:13px; /* CHG: estava 11px, subimos para melhorar leitura */
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55)
}

/* ================= Notícias (cards + lista) ================= */
.cat-title{
  font-weight:900; text-align:center; font-size:28px; color:var(--r1);
  margin:8px 0 12px;
}
.news-cards3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:18px }
@media (max-width:1100px){ .news-cards3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){  .news-cards3{ grid-template-columns:1fr } }
.card-big{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff }
.card-big img{ width:100%; height:160px; object-fit:cover }
.card-big .body{ padding:10px }
.card-big .title{ font-weight:900; color:#0b235a; font-size:14px }
.card-big .meta{ font-size:12px; color:var(--muted) }

.news-list2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:6px 0 12px }
@media (max-width:900px){ .news-list2{ grid-template-columns:1fr } }
.list-col{ display:grid; gap:8px }
.list-item{
  display:grid; grid-template-columns:68px 1fr; gap:10px; align-items:start;
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px
}
.list-item img{ width:68px; height:52px; border-radius:6px; object-fit:cover; background:#ffe3e6 }
.list-item .ltitle{ font-weight:800; font-size:13px; color:#b1051f }
.list-item .lmeta{ font-size:12px; color:var(--muted) }

/* ===== Veículos: grid + cards ===== */
.cars-toolbar{ display:flex; align-items:center; gap:10px }
.cars-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1100px){ .cars-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){  .cars-grid{ grid-template-columns:1fr } }

.car-card{
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.car-media{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#f4f4f6 }
.car-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease }
.car-card:hover .car-media img{ transform:scale(1.03) }

.car-body{ padding:10px; display:grid; gap:6px }
.car-top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.car-title{ font-weight:900; color:#0b235a; font-size:14px; line-height:1.2 }
.badge-type{ font-size:11px; border-radius:999px; padding:4px 8px; font-weight:900 }
.badge-type.novo{ background:linear-gradient(135deg, var(--r1), var(--r2)); color:#fff }
.badge-type.usado{ background:#111; color:#fff; border:1px solid #222 }

.car-meta{ font-size:12px; color:var(--muted) }
.car-price{ font-weight:900; font-size:18px; color:var(--r1) }

.car-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px }
.car-actions .btn{ padding:.35rem .6rem }

/* ========== DETALHES DO VEÍCULO ========== */
.v-hero{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px }
@media (max-width: 992px){ .v-hero{ grid-template-columns:1fr } }

.v-media{ border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff }
.v-media img{ width:100%; height:auto; display:block }

.v-thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:8px }
@media (max-width: 576px){ .v-thumbs{ grid-template-columns:repeat(5,1fr) } }
.v-thumb{
  aspect-ratio:1/1; border:1px solid var(--border); border-radius:8px; overflow:hidden; cursor:pointer;
  background:#f6f7f9;
}
.v-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .2s ease }
.v-thumb:hover img{ transform:scale(1.04) }
.v-thumb.active{ outline:2px solid var(--r1); outline-offset:2px }

.v-info h2{ font-weight:900; color:#0b235a; margin:0 0 4px; font-size: clamp(20px, 2.2vw, 28px); }
.v-price{ font-weight:900; font-size:28px; color:var(--r1); }
.v-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 }
.v-badge{ font-size:11px; border-radius:999px; padding:6px 10px; font-weight:900; border:1px solid var(--border); background:#fff; }
.v-badge.novo{ background:linear-gradient(135deg, var(--r1), var(--r2)); color:#fff; border-color:transparent }
.v-badge.usado{ background:#111; color:#fff; border-color:#222 }

.v-specs{ display:grid; gap:6px; font-size:14px }
.v-specs b{ color:#111 }
.v-specs .muted{ color:var(--muted) }

.v-safe{
  background: #fff7e6; border:1px solid #ffe2a8; color:#7a4b00;
  border-radius:10px; padding:10px; font-size:13px; display:flex; align-items:center; gap:8px;
}

.v-form label{ font-weight:700 }
.v-actions{ display:flex; gap:10px; flex-wrap:wrap }
.v-actions .btn{ padding:.55rem .9rem; font-weight:800 }

.btn-whats{
  --wh: #25D366;
  color:#fff;
  background: linear-gradient(135deg, var(--wh), #1b9e4a);
  border:0;
}
.btn-whats:hover{ color:#fff; filter: brightness(1.05); }

.v-seller{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px;
  display:flex; align-items:center; gap:10px;
}
.v-seller .avatar{
  width:48px; height:48px; border-radius:10px; object-fit:cover; background:#f3f4f6; border:1px solid var(--border);
}
.v-seller .name{ font-weight:900; color:#0b235a }
.v-seller .meta{ font-size:12px; color:var(--muted) }

@media (min-width: 993px){ .v-sticky{ position: sticky; top: 96px } }

.v-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin-top:6px;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.v-table th, .v-table td{ padding:10px 12px; vertical-align:top; background:#fff }
.v-table tr:not(:last-child) td, .v-table tr:not(:last-child) th{ border-bottom:1px solid var(--border) }
.v-table th{ width:32%; color:#0b235a; background:#f9f9fb; font-weight:800 }

.v-chips{ display:flex; flex-wrap:wrap; gap:8px }
.v-chip{ font-size:12px; padding:6px 10px; border-radius:999px; background:#f4f6fb; border:1px solid var(--border); font-weight:700 }

.hr-soft{ height:1px; background:var(--border); border:0; margin:10px 0; }

.v-hero a:focus, .v-hero button:focus, .v-hero input:focus, .v-hero textarea:focus{
  outline: 2px solid var(--r1); outline-offset:2px;
}

.skeleton{ background:linear-gradient(90deg,#f4f6f8 25%,#eceff3 37%,#f4f6f8 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite }
@keyframes skeleton{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ===== Lightbox / Zoom ===== */
.zoom-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:0;
  background:rgba(0,0,0,.55); color:#fff;
  display:grid; place-items:center; font-size:22px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.zoom-prev{ left:8px }
.zoom-next{ right:8px }
.zoom-nav:hover{ background:rgba(0,0,0,.75) }
#zoomModal .modal-content{ box-shadow:none }