/* ===== TOKENS ===== */
:root{
  --preto: #0A0A0A;
  --preto-card: #161616;
  --preto-card-2: #1E1E1E;
  --amarelo: #FFC300;
  --amarelo-escuro: #C99A00;
  --branco: #FFFFFF;
  --cinza-claro: #F4F4F1;
  --cinza-texto: #6B6B6B;
  --verde: #16A34A;
  --verde-fundo: #F0FDF4;
  --borda: #2A2A2A;

  --fonte-display: 'Archivo Black', 'Barlow Condensed', sans-serif;
  --fonte-condensed: 'Barlow Condensed', sans-serif;
  --fonte-texto: 'Inter', sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--fonte-texto);
  background: var(--cinza-claro);
  color: var(--preto);
  -webkit-font-smoothing: antialiased;
}
button{ font-family: inherit; cursor: pointer; }
input, select{ font-family: inherit; }
img{ max-width: 100%; display:block; }
:focus-visible{ outline: 3px solid var(--amarelo); outline-offset: 2px; }

/* ===== HEADER ===== */
.header{
  background: var(--preto);
  position: sticky; top:0; z-index: 200;
  border-bottom: 3px solid var(--amarelo);
}
.header-inner{
  max-width: 1280px; margin:0 auto; position: relative;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; gap: 16px;
}
.logo{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.logo-icone{ height: 38px; width:auto; flex-shrink:0; }
.logo-text{ color: var(--branco); font-family: var(--fonte-condensed); font-weight:700; font-size: 18px; letter-spacing: 0.5px; }
.logo-text em{ color: var(--amarelo); font-style: normal; display:block; font-size: 11px; letter-spacing: 2px; margin-top:-2px; }

.nav-links{ display:none; gap: 6px; }
.nav-links button{
  background: none; border: none; color: #C9C9C9;
  font-family: var(--fonte-condensed); font-weight:600; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; transition: 0.2s;
}
.nav-links button:hover{ color: var(--branco); }
.nav-links button.active{ background: var(--amarelo); color: var(--preto); }

/* Menu mobile: some por padrão, aparece como dropdown ao clicar no ☰ */
@media(max-width: 859px){
  .nav-links.aberto{
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background: var(--preto); padding: 14px 20px 18px;
    border-bottom: 3px solid var(--amarelo);
    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
    z-index: 250;
  }
  .nav-links.aberto button{ text-align:left; padding: 12px 14px; border-radius:8px; }
}

.btn-whatsapp-header{
  display:none; align-items:center; gap:9px;
  background: linear-gradient(135deg, #25D366, #1DA851);
  color:#fff; text-decoration:none;
  padding: 11px 22px; border-radius: 999px; font-weight:700; font-size: 14px;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(37,211,102,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-whatsapp-header:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,211,102,0.45); }
.menu-toggle{
  background:none; border:none; color:var(--branco); font-size: 24px;
}

@media(min-width: 860px){
  .nav-links{ display:flex; }
  .btn-whatsapp-header{ display:flex; }
  .menu-toggle{ display:none; }
}

/* ===== LAYOUT GERAL ===== */
main{ max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.section-view{ display:none; padding: 32px 0 60px; }
.section-view.active{ display:block; }

/* ===== HERO ===== */
.hero{ padding: 40px 0 28px; }
.hero-bg{
  position: relative;
  margin: 0 -20px;
  padding: 90px 20px 70px;
  background: linear-gradient(rgba(5,5,5,0.55), rgba(5,5,5,0.85)),
              url('assets/hero-loja.jpg') no-repeat center center;
  background-size: cover;
}
.hero-overlay{ max-width: 800px; }
.hero-titulo-claro{
  font-family: var(--fonte-display);
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.05; letter-spacing: -0.5px; color: #fff;
  margin-bottom: 14px; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.hero-sub-claro{ color: #E5E5E5; font-size: 15px; max-width: 640px; }
.hero-sub-claro strong, .hero-sub-claro #contador-estoque{ color: var(--amarelo); font-weight:700; }

.filtros-flutuante{
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  margin: -34px 20px 0; position: relative; z-index: 5;
  border: none;
}
@media(min-width: 860px){ .filtros-flutuante{ margin-left: auto; margin-right: auto; max-width: 900px; } }

.hero h1{
  font-family: var(--fonte-display);
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.hero-sub{ color: var(--cinza-texto); font-size: 15px; max-width: 640px; }
#contador-estoque{ color: var(--preto); font-weight:700; }

.filtros-bar{
  display:flex; flex-wrap:wrap; gap: 10px; margin-top: 24px;
}
.filtros-bar select, .btn-limpar-filtros{
  border: 2px solid var(--preto); background: var(--branco);
  padding: 10px 14px; border-radius: 8px; font-weight:600; font-size: 14px;
}
.btn-limpar-filtros{ background: transparent; border-style: dashed; }

/* Botão flutuante de WhatsApp (canto da tela, estilo balão) */
.whatsapp-flutuante{
  position: fixed; bottom: 22px; right: 22px; z-index: 400;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #1DA851);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 6px 20px rgba(37,211,102,0.5);
  transition: transform 0.2s;
  animation: pulsar 2.4s ease-in-out infinite;
}
.whatsapp-flutuante:hover{ transform: scale(1.08); }
@keyframes pulsar{
  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.5); }
  50% { box-shadow: 0 6px 26px rgba(37,211,102,0.8), 0 0 0 8px rgba(37,211,102,0.12); }
}
@media(max-width: 500px){ .whatsapp-flutuante{ width:50px; height:50px; bottom:16px; right:16px; } }

/* ===== VITRINE ===== */
.estado-vazio{
  text-align:center; padding: 60px 20px; color: var(--cinza-texto); font-size: 15px;
}
.estado-vazio button{
  display:block; margin: 14px auto 0; background: var(--preto); color: var(--amarelo);
  border:none; padding: 10px 20px; border-radius: 8px; font-weight:700;
}
.vitrine-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin-top: 24px;
}
.vitrine-card{
  background: var(--branco); border-radius: 10px; overflow:hidden;
  cursor:pointer; transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid #E5E5E0; position:relative;
}
.vitrine-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }
.vitrine-card-img-wrap{ position:relative; height: 170px; overflow:hidden; background:#eee; }
.vitrine-card-img-wrap img{ width:100%; height:100%; object-fit:cover; }

/* Elemento de assinatura: etiqueta de preço estilo showroom */
.tag-preco{
  position:absolute; top:10px; right:-6px;
  background: var(--amarelo); color: var(--preto);
  font-family: var(--fonte-condensed); font-weight:700; font-size: 13px;
  padding: 6px 12px 6px 10px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.tag-preco::after{
  content:''; position:absolute; left:5px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%; background: var(--preto);
}

.vitrine-card-body{ padding: 14px 16px 16px; }
.vitrine-card-title{ font-family: var(--fonte-condensed); font-weight:700; font-size: 18px; line-height:1.1; }
.vitrine-card-sub{ color: var(--cinza-texto); font-size: 13px; margin: 4px 0 10px; }
.vitrine-card-specs{ display:flex; gap:10px; font-size: 12px; color:#444; flex-wrap:wrap; }
.vitrine-card-specs span{ background: var(--cinza-claro); padding: 3px 8px; border-radius: 5px; }

/* ===== MODAL DETALHE ===== */
.modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(10,10,10,0.75);
  z-index: 300; align-items:flex-start; justify-content:center; overflow-y:auto; padding: 24px 14px;
}
.modal-overlay.aberto{ display:flex; }
.modal-box{
  background: var(--branco); border-radius: 14px; max-width: 960px; width:100%;
  position:relative; padding: 24px; margin-top: 20px;
}
.modal-fechar{
  position:absolute; top:14px; right:14px; background: var(--preto); color:var(--branco);
  border:none; width:34px; height:34px; border-radius:50%; font-size:16px; z-index:5;
}
.detalhe-grid{ display:grid; grid-template-columns: 1fr; gap: 24px; }
.detalhe-img-principal{ width:100%; height: 280px; object-fit:cover; border-radius: 10px; background:#eee; }
.detalhe-thumbs{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; }
.detalhe-thumbs img{ width: 70px; height:52px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; flex-shrink:0; }
.detalhe-thumbs img.ativo{ border-color: var(--amarelo); }

.badge-destaque{ display:inline-block; background: var(--preto); color: var(--amarelo); font-size:11px; font-weight:700; padding: 4px 10px; border-radius:4px; margin-bottom:10px; }
.detalhe-info h2{ font-family: var(--fonte-condensed); font-size: 26px; margin-bottom: 6px; }
.detalhe-specs{ color: var(--cinza-texto); font-size: 14px; margin-bottom: 16px; }
.preco-box{ background: var(--cinza-claro); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.preco-label{ font-size: 12px; color: var(--cinza-texto); display:block; }
.preco-valor{ font-family: var(--fonte-condensed); font-size: 26px; font-weight:700; }
.detalhe-descricao{ font-size: 14px; color:#333; margin-bottom: 18px; line-height:1.5; }
.detalhe-acoes{ display:flex; gap: 10px; flex-wrap:wrap; }

@media(min-width: 760px){
  .detalhe-grid{ grid-template-columns: 1.1fr 1fr; }
  .detalhe-img-principal{ height: 320px; }
}

/* ===== BOTÕES ===== */
.btn-primario{
  background: var(--amarelo); color: var(--preto); border:none;
  padding: 13px 20px; border-radius: 8px; font-weight:700; font-size:14px;
  transition: 0.2s;
}
.btn-primario:hover{ background: var(--amarelo-escuro); }
.btn-secundario{
  background: transparent; color: var(--preto); border: 2px solid var(--preto);
  padding: 11px 20px; border-radius: 8px; font-weight:700; font-size:14px;
}
.btn-action{
  background: var(--verde); color:#fff; border:none; width:100%;
  padding: 13px; border-radius: 8px; font-weight:700; font-size:15px; margin-top: 8px;
}
.btn-action:hover{ background:#128a3e; }
.btn-analise{
  background: var(--amarelo); color: var(--preto); border:none; width:100%;
  padding: 15px; border-radius: 8px; font-weight:800; font-size:15px; margin-top: 20px;
}
.btn-analise:hover{ background: var(--amarelo-escuro); }

/* ===== FORM INLINE (test drive dentro do modal) ===== */
.form-inline{ margin-top: 20px; padding-top:16px; border-top: 1px dashed #ccc; }
.form-inline h3{ font-size: 15px; margin-bottom: 12px; }
.input{
  width:100%; padding: 11px 12px; border: 1px solid #D8D8D8; border-radius: 7px;
  font-size: 14px; margin-bottom: 12px; background:#fff; color:#111;
}
.check-linha{ display:flex; align-items:flex-start; gap: 8px; font-size: 12px; color:#444; margin-bottom: 12px; line-height:1.4; }
.check-linha input{ margin-top: 3px; }
label{ display:block; font-size: 12px; font-weight:700; margin-bottom: 5px; color:#333; }

/* ===== SIMULADOR ===== */
.simulador-box{
  background: var(--preto); border-radius: 14px; padding: 28px 22px; color:#fff;
  max-width: 720px; margin: 0 auto;
}
.simulador-header{ text-align:center; margin-bottom: 22px; }
.simulador-header h2{ font-family: var(--fonte-condensed); font-size: 26px; }
.simulador-sub{ color: var(--amarelo); font-size: 12px; font-weight:600; margin-top:4px; }
.sim-financiado-resumo{
  background: var(--preto-card); border:1px solid var(--borda); border-radius:8px;
  padding: 12px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;
}
.sim-financiado-resumo span{ font-size:12px; color:#999; font-weight:700; }
.sim-financiado-resumo strong{ color: #4ADE80; font-size: 20px; }
.sim-inputs{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 6px; }
@media(min-width:560px){ .sim-inputs{ grid-template-columns: 1fr 1fr; } }
.sim-input-group label{ color:#999; }
.input-dark{ background: var(--preto-card-2); border: 1px solid var(--borda); color:#fff; }

.parcelas-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
@media(min-width:560px){ .parcelas-grid{ grid-template-columns: repeat(3, 1fr); } }
.parcela-card{
  background: var(--preto-card); border:1px solid var(--borda); border-radius:8px;
  padding: 14px; text-align:center; cursor:pointer; transition:0.15s;
}
.parcela-card:hover{ border-color:#555; }
.parcela-card.destaque{ border: 2px solid var(--amarelo); background: #241F0D; }
.p-meses{ display:block; font-size:12px; color:#999; margin-bottom:4px; }
.p-valor{ font-size: 16px; font-weight:700; }
.parcela-card.destaque .p-valor{ color: var(--amarelo); }

.dados-pessoais-box{
  background: var(--preto-card); border:1px solid var(--borda); border-radius:10px;
  padding: 20px; margin-top: 22px; display:none;
}
.dados-pessoais-box h3{ margin-bottom:14px; }
.dados-pessoais-box label{ color:#999; }
.dados-pessoais-box .check-linha{ color:#aaa; }
.disclaimer{ font-size: 11px; color:#777; margin-top:10px; line-height:1.5; }

.loading-analise{ text-align:center; padding: 36px 0; }
.spinner{ width:50px; height:50px; border:5px solid var(--borda); border-top-color: var(--amarelo); border-radius:50%; margin:0 auto 16px; animation: girar 1s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }

.resultado-analise{
  background: #0F2A1A; border:1px solid #1F5C3A; border-radius:10px; padding:20px; margin-top:20px;
}
.resultado-analise p{ margin-bottom: 14px; line-height:1.5; }
.acoes-resultado{ display:flex; gap:10px; flex-wrap:wrap; }
.acoes-resultado .btn-secundario{ color:#fff; border-color:#fff; }

/* ===== PAINEL (vender / contato) ===== */
.panel-box{
  background: var(--branco); border-radius: 14px; padding: 28px 22px;
  max-width: 620px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.panel-box h2{ font-family: var(--fonte-condensed); font-size: 24px; border-bottom: 3px solid var(--amarelo); padding-bottom:10px; margin-bottom: 6px; }
.panel-sub{ color: var(--cinza-texto); font-size: 13px; margin-bottom: 18px; }
.resultado-box{ background: var(--verde-fundo); border:1px solid #BBF7D0; border-radius:8px; padding:16px; margin-top:16px; color:#166534; font-size:14px; line-height:1.5; }
.valor-destaque{ display:block; font-size: 24px; font-weight:900; margin: 8px 0; }
.agendamento-box{ margin-top:14px; padding-top:14px; border-top:1px dashed #BBF7D0; }

.contato-linha{ font-size: 15px; margin-bottom: 10px; }

.contato-acoes{ display:flex; flex-direction:column; gap: 12px; margin-top: 20px; }
.btn-social{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  text-decoration:none; color:#fff; font-weight:700; font-size: 15px;
  padding: 15px; border-radius: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-social:hover{ transform: translateY(-2px); }
.btn-social-whatsapp{
  background: linear-gradient(135deg, #25D366, #1DA851);
  box-shadow: 0 4px 14px rgba(37,211,102,0.3);
}
.btn-social-whatsapp:hover{ box-shadow: 0 6px 20px rgba(37,211,102,0.4); }
.btn-social-instagram{
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  box-shadow: 0 4px 14px rgba(238,42,123,0.3);
}
.btn-social-instagram:hover{ box-shadow: 0 6px 20px rgba(238,42,123,0.4); }

/* ===== FOOTER ===== */
.footer{ text-align:center; padding: 24px; color:#999; font-size:12px; background:var(--preto); }
.footer-logo{ max-width: 160px; margin: 0 auto 10px; display:block; }