:root{
  --onyx:#0e0f11;
  --onyx-2:#17191c;
  --paper:#f2f3f5;
  --card:#ffffff;
  --chrome:#c7ccd1;
  --chrome-line:#e2e4e7;
  --graphite:#5b6068;
  --gold:#e3b23c;
  --gold-dark:#c89526;
  --gold-deep:#9c7a1d;
  --ink:#14161a;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
}
/* Site pensado prioritariamente para uso no celular: alvos de toque maiores
   e inputs com 16px no mobile (evita o zoom automático do Safari/iOS) */
.btn{ min-height:44px; }
@media (max-width:640px){
  html{ font-size:15.5px; }
  .field select, .field input,
  .form-row input, .form-row select, .form-row textarea{
    font-size:16px !important;
  }
}
h1,h2,h3, .display{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.mono{
  font-family:'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- TOPBAR ---------- */
.topbar{
  background:var(--ink);
  color:var(--chrome);
  font-size:13px;
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap:16px; flex-wrap:wrap;
}
.topbar a{color:var(--chrome); opacity:0.85;}
.topbar a:hover{opacity:1; color:#fff;}
.topbar .sep{opacity:0.35; margin:0 10px;}

/* ---------- HEADER ---------- */
header{
  background:var(--onyx);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid #000;
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:46px; width:auto;}
nav{display:flex; align-items:center; gap:28px;}
nav a{
  color:var(--chrome);
  font-family:'Oswald', sans-serif;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .15s, color .15s;
}
nav a:hover{color:#fff; border-color:var(--gold);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Oswald', sans-serif;
  text-transform:uppercase; letter-spacing:0.05em;
  font-size:13px; font-weight:600;
  padding:11px 20px;
  border-radius:3px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .1s ease, background .15s;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:var(--gold-dark);}
.btn-ghost{background:transparent; color:#fff; border-color:#3a3d42;}
.btn-ghost:hover{border-color:#6a6f76;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}

/* ---------- HERO ---------- */
.hero{
  background:var(--onyx);
  color:#fff;
  position:relative;
  padding:64px 0 96px;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; right:-10%; top:-20%;
  width:620px; height:620px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,40,40,0.16), transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:1; max-width:640px;}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  color:var(--gold);
  font-size:13px; letter-spacing:0.12em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); display:inline-block;}
.hero h1{
  font-size:52px; line-height:1.05; font-weight:700;
  margin-bottom:18px;
}
.hero h1 span{color:var(--gold);}
.hero p{
  color:var(--chrome);
  font-size:16px; max-width:480px; margin-bottom:32px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.hero-stats{
  display:flex; gap:0; margin-top:56px;
  border-top:1px solid #2a2d31;
  padding-top:24px;
  max-width:640px;
  position:relative; z-index:1;
}
.hero-stats div{flex:1; padding-right:24px;}
.hero-stats .num{
  font-family:'JetBrains Mono', monospace;
  font-size:26px; font-weight:600; color:#fff;
}
.hero-stats .lbl{font-size:12px; color:var(--graphite); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;}

/* ---------- FILTER BAR ---------- */
.filterbar{
  background:var(--card);
  border:1px solid var(--chrome-line);
  border-radius:6px;
  box-shadow:0 18px 40px -18px rgba(14,15,17,0.35);
  padding:20px;
  margin-top:-56px;
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr auto;
  gap:14px;
  align-items:end;
}
.field label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--graphite); margin-bottom:6px; font-weight:600;
}
.field select, .field input{
  width:100%; padding:10px 12px;
  border:1px solid var(--chrome-line);
  border-radius:4px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  background:#fff;
  color:var(--ink);
}
.field select:focus, .field input:focus{outline:2px solid var(--gold); outline-offset:1px;}

/* ---------- SECTION HEADERS ---------- */
.section{padding:80px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:36px; gap:20px; flex-wrap:wrap;
}
.section-head h2{font-size:32px; color:var(--ink);}
.section-head p{color:var(--graphite); font-size:14px; max-width:420px;}
.count-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:13px; color:var(--gold-deep);
  background:#faf1dc; padding:6px 12px; border-radius:20px;
  white-space:nowrap;
}

/* ---------- CATALOG GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.card{
  background:var(--card);
  border:1px solid var(--chrome-line);
  border-radius:8px;
  overflow:hidden;
  transition:box-shadow .15s, transform .15s;
  display:flex; flex-direction:column;
  cursor:pointer;
}
.card:hover{box-shadow:0 16px 32px -18px rgba(14,15,17,0.28); transform:translateY(-3px);}
.card-media{
  position:relative;
  background:linear-gradient(180deg,#eceef0,#dfe2e5);
  height:170px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--chrome-line);
  overflow:hidden;
}
.card-media svg{width:82%; height:auto;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.tag{
  position:absolute; top:12px; left:12px;
  background:var(--ink); color:#fff;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:600;
  padding:5px 9px 4px;
  border-radius:3px;
  display:flex; align-items:center; gap:6px;
  letter-spacing:0.03em;
  z-index:1;
}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block;}
.card-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px; flex:1;}
.card-title{font-size:17px; color:var(--ink); line-height:1.2;}
.card-sub{font-size:12.5px; color:var(--graphite); text-transform:uppercase; letter-spacing:0.03em;}
.specs{
  display:flex; border-top:1px solid var(--chrome-line); border-bottom:1px solid var(--chrome-line);
  padding:10px 0;
}
.specs div{
  flex:1; text-align:center;
  border-right:1px dashed var(--chrome-line);
  padding:0 4px;
}
.specs div:last-child{border-right:none;}
.specs .v{font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:var(--ink);}
.specs .k{font-size:10px; color:var(--graphite); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px;}
.card-footer{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.price{font-family:'JetBrains Mono', monospace; font-size:20px; font-weight:600; color:var(--gold-deep);}
.price small{display:block; font-family:'Inter',sans-serif; font-size:10px; color:var(--graphite); font-weight:400; text-transform:uppercase;}
.card-cta{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--onyx); color:#fff;
  font-size:16px;
}
.card:hover .card-cta{background:var(--gold); color:var(--ink);}
.empty-msg{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
  color:var(--graphite);
  font-size:14px;
  background:#fff;
  border:1px dashed var(--chrome-line);
  border-radius:8px;
}

/* ---------- WHY US ---------- */
.why{background:var(--onyx); color:#fff;}
.why .section-head h2, .why .section-head p{color:#fff;}
.why .section-head p{color:var(--chrome);}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2a2d31; border:1px solid #2a2d31; border-radius:8px; overflow:hidden;}
.why-item{background:var(--onyx-2); padding:28px 24px;}
.why-item .idx{font-family:'JetBrains Mono', monospace; color:var(--gold); font-size:13px; margin-bottom:14px;}
.why-item h3{font-size:17px; color:#fff; margin-bottom:8px; text-transform:none; letter-spacing:0;}
.why-item p{font-size:14px; color:var(--chrome);}

/* ---------- SIMULADOR DE FINANCIAMENTO ---------- */
.simulator-section{background:#fff; border-top:1px solid var(--chrome-line); border-bottom:1px solid var(--chrome-line);}
.simulator-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
.simulator-card{background:var(--paper); border:1px solid var(--chrome-line); border-radius:8px; padding:24px;}
.simulator-card .form-row:last-of-type{margin-bottom:20px;}
.simulator-result{
  background:var(--onyx); color:#fff; border-radius:8px; padding:24px;
  min-height:100%; display:flex; align-items:center; justify-content:center;
}
.sim-placeholder{color:var(--chrome); font-size:14px; text-align:center; padding:20px 10px;}
.sim-result-card{width:100%;}
.sim-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px dashed #2a2d31; font-size:13.5px; color:var(--chrome);
}
.sim-row strong{font-family:'JetBrains Mono', monospace; color:#fff; font-size:15px; font-weight:600;}
.sim-row.highlight{
  background:rgba(227,178,60,0.1); margin:6px -12px; padding:14px 12px; border-radius:6px; border-bottom:none;
}
.sim-row.highlight span{color:var(--gold);}
.sim-row.highlight strong{color:var(--gold); font-size:19px;}
.sim-cta{width:100%; justify-content:center; margin-top:18px;}
.sim-disclaimer{font-size:11.5px; color:var(--graphite); margin-top:18px; text-align:center; line-height:1.5;}

/* ---------- FORMAS DE PAGAMENTO ---------- */
.payment-methods{margin-top:32px;}
.payment-methods h3{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:14px; text-align:center;
}
.payment-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.payment-card{
  background:var(--card); border:1px solid var(--chrome-line); border-radius:8px;
  padding:18px 14px; text-align:center; transition:border-color .15s, transform .15s;
}
.payment-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.payment-card .picon{
  width:42px; height:42px; border-radius:50%; background:var(--onyx); color:var(--gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.payment-card .pname{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px;}
.payment-card .pdesc{font-size:11.5px; color:var(--graphite); line-height:1.4;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.contact-info .item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--chrome-line);}
.contact-info .item:first-child{padding-top:0;}
.icon-box{
  width:38px; height:38px; border-radius:6px; background:var(--onyx); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.contact-info h4{font-size:14px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;}
.contact-info p, .contact-info a{font-size:14px; color:var(--graphite);}
.contact-info a:hover{color:var(--gold-deep);}
.hours-table{width:100%; margin-top:20px; font-size:13px;}
.hours-table td{padding:6px 0; border-bottom:1px dashed var(--chrome-line); color:var(--graphite);}
.hours-table td:last-child{text-align:right; font-family:'JetBrains Mono', monospace; color:var(--ink);}

/* ---------- MAPA (CONTATO) ---------- */
.map-embed{
  margin-top:20px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--chrome-line);
  line-height:0;
}
.map-embed iframe{display:block; width:100%; filter:grayscale(0.15) contrast(1.02);}

/* ---------- BOTÃO FLUTUANTE WHATSAPP ---------- */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:58px;
  height:58px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
  z-index:999;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover{
  transform:scale(1.08);
  box-shadow:0 8px 22px rgba(0,0,0,0.34);
}
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,0.55);
  animation:whatsappPulse 2.2s infinite;
}
@keyframes whatsappPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55);}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
@media (max-width:640px){
  .whatsapp-float{right:14px; bottom:14px; width:52px; height:52px;}
}

.form-card{background:#fff; border:1px solid var(--chrome-line); border-radius:8px; padding:28px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--graphite); margin-bottom:6px; font-weight:600;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:11px 12px; border:1px solid var(--chrome-line); border-radius:4px;
  font-family:'Inter', sans-serif; font-size:14px; background:#fbfbfb;
}
.form-row textarea{resize:vertical; min-height:90px;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:2px solid var(--gold); outline-offset:1px; background:#fff;}
.form-note{font-size:12px; color:var(--graphite); margin-top:10px;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--graphite); padding:36px 0; font-size:13px;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer .brand-mini{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; font-size:14px;}
footer .brand-mini img{height:24px; width:auto;}

/* ---------- MODAL ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(14,15,17,0.72);
  z-index:100; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff; border-radius:10px; max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto;
}
.modal-media{background:linear-gradient(180deg,#eceef0,#dfe2e5); height:260px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.modal-media svg{width:70%;}
.modal-media img{width:100%; height:100%; object-fit:cover;}
.modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(14,15,17,0.85); color:#fff; border:none; font-size:18px; cursor:pointer;
  z-index:2;
}
.modal-thumbs{display:flex; gap:8px; padding:14px 26px 0;}
.modal-thumbs img{
  width:56px; height:44px; object-fit:cover; border-radius:4px; cursor:pointer;
  border:2px solid transparent; opacity:0.7;
}
.modal-thumbs img.active{border-color:var(--gold); opacity:1;}
.modal-body{padding:26px;}
.modal-body h3{font-size:22px; margin-bottom:4px;}
.modal-body .card-sub{margin-bottom:18px;}
.modal-specs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px;}
.modal-specs div{background:var(--paper); border-radius:6px; padding:10px 8px; text-align:center;}
.modal-specs .v{font-family:'JetBrains Mono', monospace; font-weight:600; font-size:13px;}
.modal-specs .k{font-size:10px; color:var(--graphite); text-transform:uppercase; margin-top:2px;}
.modal-desc{font-size:14px; color:var(--graphite); margin-bottom:22px;}
.modal-footer{display:flex; align-items:center; justify-content:space-between; gap:14px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .filterbar{grid-template-columns:1fr 1fr; margin-top:24px;}
  .hero{padding-bottom:56px;}
  .hero h1{font-size:38px;}
  .why-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .simulator-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  nav{
    position:fixed; top:65px; left:0; right:0; background:var(--onyx);
    flex-direction:column; align-items:flex-start; padding:20px 24px;
    border-top:1px solid #2a2d31; gap:4px; display:none;
    max-height:calc(100vh - 65px); overflow-y:auto;
  }
  nav.open{display:flex;}
  nav a{width:100%; padding:12px 2px; font-size:15px;}
  .menu-toggle{display:block; min-width:44px; min-height:44px;}
  header .btn-primary{display:none;}
  header .wrap{padding-top:11px; padding-bottom:11px;}
  .brand img{height:38px;}

  /* Topbar mais enxuta no celular: mantém só o essencial pro toque rápido */
  .topbar{font-size:12px;}
  .topbar .wrap{padding-top:7px; padding-bottom:7px; gap:8px;}
  #topHours{display:none;}
  .topbar .sep{margin:0 8px;}

  .wrap{padding:0 16px;}
  .section{padding:52px 0;}
  .section-head h2{font-size:26px;}
  .section-head{margin-bottom:24px;}

  .hero{padding:40px 0 44px;}
  .hero h1{font-size:29px;}
  .hero p{font-size:14.5px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%; justify-content:center;}
  .hero-stats{flex-wrap:wrap; gap:20px; margin-top:36px;}
  .hero-stats div{flex:1 1 40%; padding-right:0;}
  .hero-stats .num{font-size:22px;}

  .grid{grid-template-columns:1fr; gap:16px;}
  .card-media{height:200px;}
  .card:active{transform:scale(0.985);}
  .filterbar{grid-template-columns:1fr; padding:16px; gap:12px; margin-top:-28px;}
  .filterbar .btn{width:100%; justify-content:center;}

  .modal-overlay{padding:0; align-items:flex-end;}
  .modal{
    max-width:100%; width:100%;
    max-height:94vh; height:94vh;
    border-radius:16px 16px 0 0;
    display:flex; flex-direction:column;
  }
  .modal-media{height:44vh; flex-shrink:0;}
  .modal-body{overflow-y:auto; padding:20px;}
  .modal-specs{grid-template-columns:repeat(2,1fr);}
  .highlights-grid{grid-template-columns:1fr;}
  .modal-footer{flex-wrap:wrap;}
  .modal-footer .btn{width:100%; justify-content:center;}

  .contact-info .item{padding:13px 0;}
  .form-card{padding:20px;}

  .simulator-grid{grid-template-columns:1fr; gap:16px;}
  .payment-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:380px){
  .hero-stats div{flex:1 1 100%;}
  .payment-grid{grid-template-columns:1fr !important;}
}

.hero .wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.hero-inner {
  flex: 1 1 50%;
  max-width: 640px;
}

.hero-slider {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6);
  height: 340px;
  background: #1a1c1f;
}

.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  height: 100%;
  width: 100%;
}

/* Cada slide tem 2 camadas: fundo desfocado (preenche o espaço) + foto
   inteira por cima, sem cortar (resolve fotos verticais em banner largo) */
.hero-slide{
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.hero-slide-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(0.55) saturate(1.15);
  transform: scale(1.2);
}
.hero-slide-fg{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.slider-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: background .15s, transform .15s;
}
.slider-arrow:hover{ background: rgba(0,0,0,0.7); }
.slider-arrow.prev{ left: 12px; }
.slider-arrow.next{ right: 12px; }
@media (max-width:640px){
  .slider-arrow{ width: 32px; height: 32px; font-size: 16px; }
}

.slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.slider-dots .dot.active {
  background: var(--gold);
  transform: scale(1.2);
}

@media (max-width: 900px) {
  .hero .wrap {
    flex-direction: column;
  }
  .hero-inner {
    max-width: 100%;
  }
  .hero-slider {
    width: 100%;
    height: 220px;
  }
}

/* ===== NOVO ESTILO PARA AS SETAS DO MODAL ===== */

.modal-media {
  position: relative;
  background: linear-gradient(180deg, #eceef0, #dfe2e5);
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Botão de fechar (mantido) */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(14, 15, 17, 0.85);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  z-index: 6;
}

/* Contador de fotos (superior direito) */
.modal-photo-count {
  position: absolute;
  top: 16px;
  right: 60px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 6;
  backdrop-filter: blur(4px);
  display: none; /* será exibido via JS quando houver >1 foto */
}

/* Container das setas (inferior central) */
.modal-nav-bottom {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 18px;
  border-radius: 40px;
  backdrop-filter: blur(6px);
  z-index: 6;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.modal-nav-bottom.hidden {
  display: none;
}

.modal-nav-bottom button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
  font-weight: 300;
}

.modal-nav-bottom button:hover {
  transform: scale(1.25);
  color: var(--gold);
}

/* Ajuste da imagem principal dentro do modal */
.modal-media img.modal-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

/* Dica de "clique para ampliar" no canto da foto do modal */
.modal-zoom-hint{
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 5px 10px 5px 8px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events: none;
}

/* ---------- LIGHTBOX / ZOOM DE FOTOS ---------- */
.lightbox-overlay{
  display: none;
  position: fixed; inset: 0;
  background: rgba(6,7,8,0.95);
  z-index: 200;
  align-items: center; justify-content: center;
}
.lightbox-overlay.open{ display: flex; }
.lightbox-stage{
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lightbox-stage img{
  max-width: 90vw;
  max-height: 84vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-stage img.zoomed{
  cursor: grab;
  transition: none;
}
.lightbox-stage img.dragging{ cursor: grabbing; }
.lightbox-close{
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff; border: 1px solid rgba(255,255,255,0.2);
  font-size: 20px; cursor: pointer; z-index: 6;
  backdrop-filter: blur(6px);
}
.lightbox-close:hover{ background: rgba(255,255,255,0.2); }
.lightbox-hint{
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.65);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  padding: 6px 14px; border-radius: 20px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  white-space: nowrap;
}
.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  z-index: 6;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.2); }
.lightbox-nav.prev{ left: 18px; }
.lightbox-nav.next{ right: 18px; }
.lightbox-count{
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.1);
  padding: 5px 14px; border-radius: 20px;
  backdrop-filter: blur(6px);
  z-index: 6;
}
@media (max-width:640px){
  .lightbox-nav{ width: 38px; height: 38px; font-size: 20px; }
  .lightbox-nav.prev{ left: 8px; }
  .lightbox-nav.next{ right: 8px; }
  .lightbox-hint{ font-size: 10.5px; padding: 5px 10px; }
}

/* ---------- DESTAQUES DO VEÍCULO (modal) ---------- */
.modal-highlights{ margin-bottom: 20px; }
.modal-highlights h4, .modal-desc-wrap h4{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.modal-highlights h4::before, .modal-desc-wrap h4::before{
  content: ""; width: 16px; height: 2px; background: var(--gold); display: inline-block;
}
.highlights-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.highlight-chip{
  display: flex; align-items: center; gap: 8px;
  background: var(--paper);
  border: 1px solid var(--chrome-line);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  transition: border-color .15s, background .15s, transform .15s;
}
.highlight-chip:hover{ border-color: var(--gold); background: #fdf8ec; transform: translateY(-1px); }
.highlight-chip svg{
  flex-shrink: 0;
  width: 22px; height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--onyx);
  color: var(--gold);
}
.modal-desc-wrap{ margin-bottom: 22px; }
.modal-desc-wrap .modal-desc{ margin-bottom: 0; }
@media (max-width:480px){ .highlights-grid{ grid-template-columns: 1fr; } }

/* Responsivo: em telas pequenas, ajustar tamanho */
@media (max-width: 640px) {
  .modal-media {
    height: 200px;
  }
  .modal-nav-bottom {
    gap: 16px;
    padding: 4px 14px;
  }
  .modal-nav-bottom button {
    font-size: 20px;
  }
