/* Vargues Multimarcas · Nova Mutum-MT
   Direção "showroom de vidro": painel carvão da fachada, letreiro champanhe,
   vidraças com caixilho de alumínio e piso de concreto polido que reflete.
   Urbanist (títulos) + Karla (texto). Sem dependências externas. */

@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/karla-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/karla-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --carvao: #1a1a1b;
  --carvao-2: #242426;
  --carvao-3: #2f2f32;
  --champanhe: #dec8a2;
  --champanhe-claro: #efe2c9;
  --bronze: #7a6038;          /* champanhe escurecido para texto sobre concreto (AA) */
  --concreto: #d9d8d3;
  --concreto-claro: #ebeae6;
  --aluminio: #f6f6f4;
  --tinta: #1a1a1b;
  --tinta-2: #4a4a4d;
  --zap: #1f9d55;
  --zap-hover: #188448;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-sai: cubic-bezier(.16, 1, .3, 1);
  --menu-h: 76px;
  --lado: clamp(16px, 4.5vw, 64px);
  --max: 1280px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--concreto-claro); color: var(--tinta);
  font: 400 17px/1.6 "Karla", system-ui, sans-serif; overflow-x: hidden;
}
body.trava { overflow: hidden; }
img, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: "Urbanist", system-ui, sans-serif; line-height: 1.04; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--champanhe); outline-offset: 3px; border-radius: 4px; }
.secao--clara :focus-visible, .pagina-clara :focus-visible { outline-color: var(--bronze); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--champanhe); color: var(--carvao); padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }

/* Barra de rolagem: só a guia, sem trilho (Chrome/Edge/Safari pelo webkit; Firefox no @supports) */
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #b39466; border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #8e7550; background-clip: padding-box; border: 2px solid transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #b39466 transparent; scrollbar-width: thin; }
}

.ico { width: 20px; height: 20px; flex: none; }
.rotulo {
  display: inline-flex; align-items: center; gap: 12px; font: 600 13px/1 "Urbanist", sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze);
}
.rotulo::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.rotulo--claro { color: var(--champanhe); }

/* ---------- Botões ---------- */
.bt {
  --bg: var(--carvao); --fg: var(--aluminio);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg); color: var(--fg); text-decoration: none; font: 700 16px/1 "Karla", sans-serif;
  overflow: hidden; isolation: isolate; transition: transform .25s var(--ease-sai), background-color .25s;
}
/* reflexo de vidro que atravessa o botão no hover */
.bt::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-sai);
}
.bt:hover::after { left: 120%; }
.bt:hover { transform: translateY(-2px); }
.bt:active { transform: translateY(0) scale(.98); }
.bt--champanhe { --bg: var(--champanhe); --fg: var(--carvao); }
.bt--champanhe:hover { --bg: var(--champanhe-claro); }
.bt--contorno { --bg: transparent; --fg: var(--aluminio); box-shadow: inset 0 0 0 1.5px rgba(246,246,244,.7); }
.bt--contorno-escuro { --bg: transparent; --fg: var(--carvao); box-shadow: inset 0 0 0 1.5px var(--carvao); }
.bt--zap { --bg: var(--zap); --fg: #fff; }
.bt--zap:hover { --bg: var(--zap-hover); }
.bt--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* ---------- Menu ---------- */
.menu {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--menu-h);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--lado);
  color: var(--aluminio); transition: background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
/* vidro fosco sobre a foto; carvão sólido quando a foto sai de baixo */
.menu.is-vidro { background: rgba(26,26,27,.28); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 -1px 0 rgba(246,246,244,.14); }
.menu.is-solido { background: rgba(26,26,27,.97); box-shadow: 0 1px 0 rgba(222,200,162,.18); }
.menu__logo { display: block; width: 150px; flex: none; }
.menu__logo img { width: 100%; height: auto; }
.menu__links { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.menu__links a {
  position: relative; display: block; padding: 10px 14px; text-decoration: none;
  font: 600 15px/1 "Urbanist", sans-serif; letter-spacing: .04em;
}
.menu__links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--champanhe);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-sai);
}
.menu__links a:hover::after, .menu__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu__acoes { display: flex; align-items: center; gap: 10px; }
.menu-bt { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(246,246,244,.1); cursor: pointer; position: relative; }
.menu-bt span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--aluminio); transition: transform .3s var(--ease-sai), opacity .2s; }
.menu-bt span:nth-child(1) { top: 16px; } .menu-bt span:nth-child(2) { top: 22px; right: 18px; } .menu-bt span:nth-child(3) { top: 28px; }
.menu.is-aberto .menu-bt span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu.is-aberto .menu-bt span:nth-child(2) { opacity: 0; }
.menu.is-aberto .menu-bt span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  :root { --menu-h: 66px; }
  .menu__logo { width: 120px; }
  .menu-bt { display: block; }
  .menu__links {
    position: fixed; inset: var(--menu-h) 0 auto; flex-direction: column; gap: 0; margin: 0;
    padding: 12px var(--lado) 28px; background: rgba(26,26,27,.98);
    border-top: 1px solid rgba(222,200,162,.2);
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .45s var(--ease), visibility 0s .45s;
  }
  .menu.is-aberto .menu__links { clip-path: inset(0); visibility: visible; transition: clip-path .45s var(--ease); }
  .menu.is-aberto { background: rgba(26,26,27,.98); }
  .menu__links a { padding: 16px 0; font-size: 22px; border-bottom: 1px solid rgba(246,246,244,.08); }
  .menu__links a::after { left: 0; right: auto; width: 40px; }
  .menu__acoes { margin-left: auto; }
}
@media (max-width: 400px) { .rotulo { letter-spacing: .14em; gap: 10px; } .rotulo::before { width: 20px; } }
@media (max-width: 380px) { .menu__logo { width: 104px; } .bt--simular span { display: none; } .bt--simular { padding: 0 13px; } }

/* ---------- Topo (fachada) ---------- */
.topo {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--carvao); color: var(--aluminio); overflow: hidden; isolation: isolate;
}
.topo__foto {
  position: absolute; inset: 0; z-index: -2;
  background: #2a2a2b url("../img/fachada-900.webp?v=db625e77a2") center 24% / cover no-repeat;
  transform: scale(var(--zoom, 1.06)); transform-origin: 50% 24%;
}
/* Celular: a foto vertical inteira na largura; o título pousa no piso de concreto da própria foto */
@media (max-width: 640px) {
  .topo.topo { min-height: 0; background: #151516; padding-top: calc(100vw * 1.03); }
  .topo .topo__foto { background-image: url("../img/fachada-600.webp?v=ebc05bfa0b"); background-size: 100% auto; background-position: center top; bottom: auto; height: calc(100vw * 1.778); }
  .topo.topo::before { background: linear-gradient(180deg, rgba(26,26,27,.5) 0, rgba(26,26,27,0) calc(100vw * .2), rgba(21,21,22,0) calc(100vw * .9), rgba(21,21,22,.82) calc(100vw * 1.22), #151516 calc(100vw * 1.72)); }
}
.topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,26,27,.55) 0, rgba(26,26,27,0) 22%),
    linear-gradient(0deg, rgba(20,20,21,.94) 0, rgba(20,20,21,.72) 34%, rgba(20,20,21,.12) 64%, rgba(20,20,21,0) 80%);
}
@media (min-width: 901px) {
  .topo::before { background:
    linear-gradient(180deg, rgba(26,26,27,.5) 0, rgba(26,26,27,0) 20%),
    linear-gradient(0deg, rgba(20,20,21,.95) 0, rgba(20,20,21,.75) 30%, rgba(20,20,21,.2) 58%, rgba(20,20,21,0) 72%); }
}
.topo__grade { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--lado) clamp(28px, 6vh, 64px); }
.topo__titulo { font-size: clamp(42px, 5.4vw, 80px); font-weight: 650; max-width: 17ch; position: relative; }
.topo__titulo em { font-style: italic; font-weight: 300; color: var(--champanhe); }
/* reflexo no piso polido: cópia invertida, esmaecida, que assenta junto com o título */
.reflexo { display: block; position: relative; }
.reflexo__copia {
  display: block; height: .55em; overflow: hidden; pointer-events: none; user-select: none;
  transform: scaleY(-1); opacity: .2; filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(0deg, #000 0, transparent 85%); mask-image: linear-gradient(0deg, #000 0, transparent 85%);
}
.reflexo__copia > span { display: block; transform: translateY(calc(-100% + .55em)); }
.topo__base { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end; margin-top: 4px; }
.topo__texto { max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); color: rgba(246,246,244,.86); }
.topo__bts { display: flex; flex-wrap: wrap; gap: 12px; }
.topo__faixa {
  display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(24px, 4vh, 40px); padding-top: 18px;
  border-top: 1px solid rgba(222,200,162,.28); font: 600 14px/1.3 "Urbanist", sans-serif; letter-spacing: .08em; color: rgba(246,246,244,.75);
}
.topo__faixa a { text-decoration: none; }
.topo__faixa a:hover { color: var(--champanhe); }
@media (max-width: 900px) {
  .topo__base { grid-template-columns: 1fr; }
  .topo__titulo { font-size: clamp(40px, 11.5vw, 64px); }
  .topo__faixa { font-size: 13px; }
}

/* entrada do topo */
[data-entra] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-sai) var(--d, 0s), transform 1.1s var(--ease-sai) var(--d, 0s); }
.is-pronto [data-entra] { opacity: 1; transform: none; }
.is-pronto .reflexo__copia { animation: piso 1.6s var(--ease-sai) .5s both; }
@keyframes piso { from { opacity: 0; filter: blur(8px); } to { opacity: .2; filter: blur(1.2px); } }

/* ---------- Seções ---------- */
.secao { position: relative; overflow-x: clip; padding: clamp(72px, 11vw, 140px) 0; }
.secao--carvao { background: var(--carvao); color: var(--aluminio); }
.secao--concreto {
  background-color: var(--concreto);
  /* textura leve de concreto polido (sem imagem) */
  background-image:
    radial-gradient(1200px 300px at 20% 0, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(900px 260px at 85% 100%, rgba(0,0,0,.05), transparent 70%);
}
.secao--clara { background: var(--concreto-claro); }
.miolo { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--lado); }
.cabeca { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.cabeca h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 650; max-width: 18ch; }
.cabeca h2 em { font-style: italic; font-weight: 300; color: var(--bronze); }
.secao--carvao .cabeca h2 em { color: var(--champanhe); }
.cabeca p { max-width: 58ch; color: var(--tinta-2); font-size: 18px; }
.secao--carvao .cabeca p { color: rgba(246,246,244,.78); }
.cabeca--linha { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 760px) { .cabeca--linha { grid-template-columns: 1fr; } }

/* Assinatura: VIDRAÇA DE CORRER.
   Um painel de vidro fosco com caixilho de alumínio cobre o bloco e corre para o lado
   quando ele entra na tela, como as portas da loja. */
[data-vidro] { position: relative; isolation: isolate; overflow: clip; overflow-clip-margin: 16px; }
[data-vidro]::after {
  content: ""; position: absolute; inset: -10px -14px; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, rgba(246,246,244,.42), rgba(246,246,244,.16) 45%, rgba(246,246,244,.34));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-left: 6px solid var(--aluminio); box-shadow: inset 6px 0 0 rgba(0,0,0,.06);
  transform: translateX(0); transition: transform 1.15s var(--ease), opacity .3s 1s;
}
.secao--carvao [data-vidro]::after { background: linear-gradient(105deg, rgba(60,60,64,.75), rgba(40,40,44,.45) 45%, rgba(60,60,64,.7)); border-left-color: #cfcfcb; }
[data-vidro] > * { transition: opacity .9s var(--ease-sai) .25s, transform 1.1s var(--ease-sai) .2s; }
html.js [data-vidro]:not(.is-visto) > * { opacity: .35; transform: translateX(-14px); }
[data-vidro].is-visto::after { transform: translateX(104%); opacity: 0; }
html:not(.js) [data-vidro]::after { display: none; }

/* ---------- Estoque (vitrine) ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 28px; }
.filtros__grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros__grupo[hidden] { display: none; }
.chip {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(26,26,27,.22); background: transparent;
  font: 600 15px/1 "Urbanist", sans-serif; letter-spacing: .03em; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.chip:hover { border-color: var(--carvao); }
.chip[aria-pressed="true"] { background: var(--carvao); color: var(--champanhe); border-color: var(--carvao); }
.filtros__sep { width: 1px; height: 28px; background: rgba(26,26,27,.18); }
.vitrine__topo { display: flex; gap: 12px; align-items: center; }
.seta { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(26,26,27,.3); background: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.seta:hover { background: var(--carvao); color: var(--champanhe); }
.seta svg { width: 18px; height: 18px; }
.link-seta { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 "Urbanist", sans-serif; text-decoration: none; padding: 12px 4px; }
.link-seta svg { width: 18px; height: 18px; transition: transform .3s var(--ease-sai); }
.link-seta:hover svg { transform: translateX(4px); }

.trilho { overflow: hidden; padding: 6px 0 40px; }
.trilho__faixa { display: flex; gap: 22px; transition: transform .8s var(--ease); }
.trilho .carro { flex: 0 0 calc((100% - 66px) / 4); }
@media (max-width: 1180px) { .trilho .carro { flex-basis: calc((100% - 44px) / 3); } }
@media (max-width: 860px) { .trilho .carro { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .trilho .carro { flex-basis: 86%; } }

.carro { display: flex; flex-direction: column; min-width: 0; }
/* foto sobre o piso polido: reflexo embaixo (onde o navegador suporta) */
.carro__foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--carvao-2);
  -webkit-box-reflect: below 2px linear-gradient(transparent 82%, rgba(0,0,0,.16));
}
.carro__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-sai); }
.carro:hover .carro__foto img { transform: scale(1.04); }
.carro__vazio { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; color: rgba(222,200,162,.75); font: 600 13px/1 "Urbanist", sans-serif; letter-spacing: .2em; text-transform: uppercase;
  background: radial-gradient(120% 90% at 50% 110%, #3a3a3d 0, var(--carvao-2) 60%); }
.carro__vazio img { width: 62%; max-width: 220px; height: auto; margin: 0 auto; opacity: .7; }
.carro__selo { position: absolute; left: 10px; top: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(26,26,27,.82); color: var(--champanhe); font: 600 12px/1 "Urbanist", sans-serif; letter-spacing: .08em; }
.carro__corpo { padding: 26px 2px 0; display: grid; gap: 6px; flex: 1; align-content: start; }
.carro__nome { font-size: 22px; font-weight: 700; }
.carro__versao { color: var(--tinta-2); font-size: 15px; }
.carro__dados { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font: 600 14px/1.3 "Urbanist", sans-serif; letter-spacing: .03em; color: var(--tinta-2); }
.carro__preco { margin-top: 8px; font: 700 21px/1.1 "Urbanist", sans-serif; }
.carro__preco--consulta { font-size: 16px; font-weight: 600; color: var(--bronze); }
.carro__bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.carro__bts .bt { flex: 1 1 auto; }

/* entrada: o carro "encosta" vindo da direita e o reflexo acende */
html.js .carro.is-chega { animation: encosta .9s var(--ease-sai) both; animation-delay: var(--i, 0s); }
@keyframes encosta { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }

.aviso-exemplo { margin: -8px 0 22px; font-size: 14px; color: var(--tinta-2); }
.aviso-exemplo b { color: var(--tinta); }
.vazio-filtro { padding: 40px 0; color: var(--tinta-2); }

/* ---------- Procura específica ---------- */
.procura {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center;
  margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 4vw, 44px); border-radius: 6px;
  background: var(--carvao); color: var(--aluminio); overflow: hidden;
}
.procura::before { /* caixilho de alumínio da vitrine */
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(246,246,244,.16); border-radius: 3px; pointer-events: none;
}
.procura h2, .procura h3 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 650; }
.procura h2 em, .procura h3 em { font-style: italic; font-weight: 300; color: var(--champanhe); }
.procura p { margin-top: 10px; color: rgba(246,246,244,.8); max-width: 52ch; }
@media (max-width: 760px) { .procura { grid-template-columns: 1fr; } }

/* ---------- Do site ao showroom (vidraças) ---------- */
.vidracas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 6px solid var(--aluminio); border-radius: 4px; background: var(--aluminio); }
.vidraca {
  position: relative; min-height: 360px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  background: linear-gradient(160deg, #2c2c2f 0, #1d1d1f 70%); color: var(--aluminio); overflow: hidden;
}
.vidraca + .vidraca { border-left: 6px solid var(--aluminio); }
.vidraca::before { /* reflexo diagonal fixo do vidro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 38%, transparent 46%, transparent 58%, rgba(255,255,255,.05) 62%, transparent 68%);
}
.vidraca__n { font: 300 clamp(64px, 7vw, 96px)/1 "Urbanist", sans-serif; color: var(--champanhe); }
.vidraca h3 { font-size: clamp(24px, 2.3vw, 30px); font-weight: 650; }
.vidraca p { color: rgba(246,246,244,.78); }
.vidraca .bt { align-self: flex-start; margin-top: 8px; }
/* as vidraças correm em sequência, cada uma para um lado */
.vidraca__porta {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(110deg, rgba(246,246,244,.5), rgba(246,246,244,.22) 50%, rgba(246,246,244,.42));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 5px solid #cfcfcb; transition: transform 1.2s var(--ease) var(--d, 0s);
}
.vidraca:nth-child(2) .vidraca__porta { border-right: 0; border-left: 5px solid #cfcfcb; }
.vidracas.is-visto .vidraca__porta { transform: translateX(-101%); }
.vidracas.is-visto .vidraca:nth-child(2) .vidraca__porta { transform: translateX(101%); }
html:not(.js) .vidraca__porta { display: none; }
@media (max-width: 860px) {
  .vidracas { grid-template-columns: 1fr; }
  .vidraca { min-height: 0; }
  .vidraca + .vidraca { border-left: 0; border-top: 6px solid var(--aluminio); }
}

/* ---------- Avaliações ---------- */
.avaliacoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.avaliacoes__convite { display: grid; gap: 18px; align-content: start; justify-items: start; }
.avaliacoes__nota { font: 300 clamp(56px, 6vw, 84px)/1 "Urbanist", sans-serif; color: var(--champanhe); }
.avaliacoes__lista { display: grid; gap: 18px; }
.avaliacao { position: relative; padding: 26px 28px; border-radius: 4px; background: var(--carvao-2); border-left: 3px solid var(--champanhe); }
.avaliacao__estrelas { color: var(--champanhe); letter-spacing: .15em; font-size: 15px; }
.avaliacao__texto { margin-top: 10px; color: rgba(246,246,244,.9); }
.avaliacao__autor { margin-top: 14px; font: 600 14px/1 "Urbanist", sans-serif; letter-spacing: .08em; color: rgba(246,246,244,.65); }
.avaliacoes__vazio { padding: 30px; border: 1px dashed rgba(222,200,162,.4); border-radius: 4px; color: rgba(246,246,244,.8); }
@media (max-width: 860px) { .avaliacoes { grid-template-columns: 1fr; } }

/* ---------- Localização ---------- */
.local { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
.local__info { display: grid; gap: 22px; align-content: center; }
.local__end { font: 600 clamp(24px, 2.6vw, 32px)/1.2 "Urbanist", sans-serif; }
.local__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--tinta-2); }
.local__lista a { text-decoration: none; font-weight: 700; color: var(--tinta); }
.local__lista a:hover { text-decoration: underline; }
.local__bts { display: flex; flex-wrap: wrap; gap: 10px; }
.mapa { position: relative; min-height: 400px; border: 6px solid var(--aluminio); border-radius: 4px; overflow: hidden; background: var(--concreto); box-shadow: 0 30px 60px -40px rgba(0,0,0,.5); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
@media (max-width: 860px) { .local { grid-template-columns: 1fr; } .mapa { min-height: 320px; } }

/* ---------- Rodapé ---------- */
.rodape { background: #121213; color: rgba(246,246,244,.78); padding: clamp(56px, 8vw, 96px) 0 32px; font-size: 16px; }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.rodape__logo { width: 220px; }
.rodape h2 { font: 600 13px/1 "Urbanist", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--champanhe); margin-bottom: 16px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--champanhe); }
.rodape__base { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(246,246,244,.1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; color: rgba(246,246,244,.55); }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ---------- Voltar ao topo ---------- */
.subir {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--carvao); color: var(--champanhe); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(222,200,162,.45);
  display: grid; place-items: center; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease-sai);
}
.subir.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.subir svg { width: 20px; height: 20px; }

/* ---------- Simular (gaveta) ---------- */
.simular { padding: 0; border: 0; margin: 0 0 0 auto; width: min(480px, 100%); height: 100%; max-height: none; max-width: none; background: transparent; color: var(--tinta); overflow: visible; }
.simular::backdrop { background: rgba(10,10,11,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.simular.is-aberto::backdrop { opacity: 1; }
.simular__corpo { height: 100%; display: flex; flex-direction: column; background: var(--concreto-claro); transform: translateX(102%); transition: transform .45s var(--ease); border-left: 6px solid var(--aluminio); }
.simular.is-aberto .simular__corpo { transform: none; }
.simular__topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--carvao); color: var(--champanhe); font: 600 13px/1 "Urbanist", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.simular__fechar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(246,246,244,.1); color: var(--aluminio); cursor: pointer; display: grid; place-items: center; }
.simular__fechar svg { width: 20px; height: 20px; }
.simular__miolo { flex: 1; overflow-y: auto; padding: 26px 24px 32px; display: grid; gap: 16px; align-content: start; }
.simular__titulo { font-size: 30px; font-weight: 650; }
.simular__titulo em { font-style: italic; font-weight: 300; color: var(--bronze); }
.simular__nota { font-size: 15px; color: var(--tinta-2); }
.campo { display: grid; gap: 6px; font: 600 14px/1.2 "Urbanist", sans-serif; letter-spacing: .03em; }
.campo select, .campo input { width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 1.5px solid rgba(26,26,27,.25); border-radius: 6px; background: #fff; font: 400 17px "Karla", sans-serif; letter-spacing: 0; }
.campo select:focus, .campo input:focus { outline: 3px solid var(--bronze); outline-offset: 1px; }
.moeda { position: relative; }
.moeda i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--tinta-2); font: 400 17px "Karla", sans-serif; }
.moeda input { width: 100%; padding-left: 44px; }
.simular__erro { color: #a3241c; font-weight: 700; font-size: 15px; }
.simular .bt--zap { width: 100%; margin-top: 4px; }
@media (max-width: 640px) {
  .simular { inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: 92vh; margin: auto 0 0; }
  .simular__corpo { max-height: 92vh; transform: translateY(102%); border-left: 0; border-top: 6px solid var(--aluminio); border-radius: 14px 14px 0 0; overflow: hidden; }
}

/* ---------- Página de estoque / contato ---------- */
.pagina-topo { background: var(--carvao); color: var(--aluminio); padding: calc(var(--menu-h) + clamp(48px, 8vw, 96px)) 0 clamp(40px, 6vw, 72px); }
.pagina-topo h1 { font-size: clamp(42px, 7vw, 92px); font-weight: 650; }
.pagina-topo h1 em { font-style: italic; font-weight: 300; color: var(--champanhe); }
.pagina-topo p { margin-top: 16px; max-width: 56ch; color: rgba(246,246,244,.8); font-size: 18px; }
.busca { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 18px; }
.busca input, .busca select { min-height: 50px; padding: 0 16px; border: 1.5px solid rgba(26,26,27,.25); border-radius: 999px; background: #fff; font: 400 17px "Karla", sans-serif; width: 100%; }
@media (max-width: 560px) { .busca { grid-template-columns: 1fr; } }
.grade-carros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 26px; }
@media (max-width: 1000px) { .grade-carros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grade-carros { grid-template-columns: 1fr; } }
.contagem { margin: 0 0 22px; color: var(--tinta-2); font-size: 15px; }
.canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 6px solid var(--aluminio); border-radius: 4px; background: var(--aluminio); margin-bottom: clamp(48px, 7vw, 88px); }
.canal { display: grid; gap: 8px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--carvao); color: var(--aluminio); text-decoration: none; transition: background-color .3s; }
.canal:nth-child(even) { border-left: 6px solid var(--aluminio); }
.canal:nth-child(n+3) { border-top: 6px solid var(--aluminio); }
.canal:hover { background: var(--carvao-3); }
.canal span { font: 600 13px/1 "Urbanist", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--champanhe); }
.canal strong { font: 650 clamp(22px, 2.4vw, 30px)/1.2 "Urbanist", sans-serif; }
.canal small { color: rgba(246,246,244,.7); font-size: 15px; }
@media (max-width: 700px) { .canais { grid-template-columns: 1fr; } .canal:nth-child(even) { border-left: 0; } .canal:nth-child(n+2) { border-top: 6px solid var(--aluminio); } }

/* ---------- Movimento reduzido: sem deslocamentos; a vidraça só esmaece ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-entra], [data-vidro] > *, html.js [data-vidro]:not(.is-visto) > * { transform: none !important; }
  [data-vidro]::after { transition: opacity .6s; transform: none !important; }
  [data-vidro].is-visto::after { opacity: 0; }
  .vidraca__porta { transition: opacity .8s var(--d, 0s); transform: none !important; }
  .vidracas.is-visto .vidraca__porta { opacity: 0; }
  html.js .carro.is-chega { animation-name: aparece; }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  .trilho__faixa { transition-duration: .01s; }
  .topo__foto { transform: none; }
  .bt::after { display: none; }
}