/* =========================================================
   Dossiê Veículos
   Papel de segurança do documento + pasta de dossiê.
   Mobile-first: a base é o celular; min-width amplia.
   ========================================================= */
:root {
  --papel: #E6ECE5;
  --papel-2: #DBE3DA;
  --folha: #F9FAF6;
  --tinta: #121614;
  --tinta-2: #46514A;
  --linha: #C3CDC4;
  --guilhoche: #8FA897;
  --vermelho: #E5010E; /* vermelho da logo; branco sobre ele 4,84:1 */
  --vermelho-escuro: #B3000B;
  --sem: #2B6746;
  --pequena: #2F5680;
  --media: #845409;

  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --raio: 4px;
  --sombra: 0 1px 0 rgb(18 22 20 / .06), 0 10px 28px -18px rgb(18 22 20 / .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.55 var(--texto);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ficticio { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); vertical-align: middle; }

:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }

.envelope { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.125rem; }

.pular {
  position: absolute; left: .75rem; top: -3rem; z-index: 50;
  background: var(--tinta); color: var(--folha); padding: .6rem .9rem; border-radius: var(--raio);
}
.pular:focus { top: .75rem; }

/* ---------- texto utilitário ---------- */
.rotulo {
  font: 500 .75rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.pendente {
  font: 500 .8125rem/1.3 var(--mono);
  color: var(--tinta-2);
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgb(70 81 74 / .12) 5px 7px);
  padding: .05rem .35rem;
  border: 1px dashed var(--linha);
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.25rem;
  background: var(--vermelho); color: #fff;
  border: 2px solid var(--vermelho); border-radius: var(--raio);
  font: 700 .9375rem/1.1 var(--texto); font-stretch: 110%;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.botao:hover { background: var(--vermelho-escuro); border-color: var(--vermelho-escuro); }
.botao--linha { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); border-color: var(--tinta); color: var(--folha); }
.botao--pequeno { min-height: 2.5rem; padding: .45rem .9rem; font-size: .875rem; }

/* ---------- tarja e topo ---------- */
.tarja { background: var(--tinta); color: #D5DDD6; }
.tarja__linha {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .4rem; font: 500 .6875rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.tarja__linha span:last-child { display: none; }

.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgb(230 236 229 / .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo__linha { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; min-height: 3.75rem; padding-top: .45rem; }
.marca { display: inline-flex; align-items: center; margin-right: auto; padding-block: .3rem; }
.marca img { display: block; width: auto; height: 2.125rem; }
@media (min-width: 820px) { .marca img { height: 2.5rem; } }

/* ---------- tela de carregamento ----------
   Fundo preto da própria logo. Some por JS quando o estoque chega;
   se o JS falhar, a animação carregando-sai esconde sozinha em 6 s. */
.carregando {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 1.75rem;
  background: #000;
  transition: opacity .45s ease, visibility .45s;
  animation: carregando-sai .4s ease 6s forwards;
}
.carregando.is-pronto { opacity: 0; visibility: hidden; pointer-events: none; }
.carregando__logo { display: grid; justify-items: center; gap: 1.25rem; }
.carregando__d { width: clamp(7rem, 30vw, 10rem); height: auto; animation: carregando-d .75s cubic-bezier(.2, .8, .2, 1) both; }
.carregando__palavra { width: clamp(11.5rem, 48vw, 16.5rem); height: auto; animation: carregando-palavra .6s .3s cubic-bezier(.2, .8, .2, 1) both; }
.carregando__barra { width: clamp(9rem, 38vw, 13rem); height: 3px; border-radius: 2px; background: #262626; overflow: hidden; }
.carregando__barra span { display: block; width: 40%; height: 100%; background: var(--vermelho); animation: carregando-barra 1.1s ease-in-out infinite; }
.carregando__texto { font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9FA8A1; }
@keyframes carregando-d {
  from { opacity: 0; transform: translateX(-1.25rem); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes carregando-palavra { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
@keyframes carregando-barra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes carregando-sai { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .carregando { transition: none; }
  .carregando__d, .carregando__palavra { animation: none; }
  .carregando__barra span { width: 100%; animation: none; opacity: .6; }
}

.dossie__marca { display: inline-block; width: auto; height: 1.05rem; margin-right: .55rem; vertical-align: -.2rem; }
.rodape__logo { display: block; width: auto; height: 2.75rem; margin-bottom: .7rem; }
.topo__nav { display: flex; order: 3; width: 100%; gap: 1.25rem; overflow-x: auto; }
.topo__nav a { text-decoration: none; font-weight: 600; font-size: .875rem; padding-block: .45rem; white-space: nowrap; }
.topo__nav a:hover { text-decoration: underline; text-decoration-color: var(--vermelho); text-underline-offset: .3em; text-decoration-thickness: 2px; }

/* ---------- abertura ---------- */
.abertura { position: relative; overflow: hidden; border-bottom: 1px solid var(--linha); }
.abertura::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke='%238FA897' stroke-width='.7'%3E%3Cpath d='M0 32C30 4 90 60 120 32S210 4 240 32'/%3E%3Cpath d='M0 40C30 12 90 68 120 40S210 12 240 40'/%3E%3Cpath d='M0 24C30-4 90 52 120 24S210-4 240 24'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.abertura__grade { position: relative; display: grid; gap: 2.5rem; padding-block: 2.25rem 3rem; }
.abertura h1 {
  margin-top: .9rem;
  font: 800 clamp(2.5rem, 11.5vw, 5.4rem)/.94 var(--display);
  font-stretch: 118%;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.abertura h1 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--vermelho);
  text-decoration-thickness: .09em;
  text-underline-offset: .1em;
  text-decoration-skip-ink: none;
}
.abertura__lead { margin-top: 1.25rem; max-width: 36rem; font-size: 1.0625rem; color: var(--tinta-2); }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.abertura__acoes .botao { flex: 1 1 12rem; }

.indice {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 2rem; max-width: 34rem;
  border-top: 1px solid var(--tinta);
}
.indice div { display: flex; gap: .45rem; align-items: baseline; padding: .55rem .5rem .55rem 0; border-bottom: 1px solid var(--linha); }
.indice dt { font: 500 .6875rem/1 var(--mono); color: var(--tinta-2); }
.indice dd { font: 600 .875rem/1.2 var(--texto); }

/* ---------- pasta (card de carro) ---------- */
.pasta {
  --c: var(--tinta-2);
  position: relative;
  margin-top: 1.9rem;
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: 0 var(--raio) var(--raio) var(--raio);
  box-shadow: var(--sombra);
  isolation: isolate;
}
.pasta[data-classe="sem-sinistro"] { --c: var(--sem); }
.pasta[data-classe="pequena-monta"] { --c: var(--pequena); }
.pasta[data-classe="media-monta"] { --c: var(--media); }
.pasta::before { /* folha de baixo, deslocada */
  content: ''; position: absolute; inset: 6px -6px -6px 6px; z-index: -1;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio);
}
.pasta__aba {
  position: absolute; left: -1px; bottom: 100%;
  display: flex; align-items: center; gap: .5rem;
  height: 1.9rem; padding: 0 1.1rem 0 .75rem;
  background: var(--folha);
  border: 1px solid var(--linha); border-bottom: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 100%, 0 100%);
  font: 600 .75rem/1 var(--mono); letter-spacing: .04em;
}
.pasta__aba span { color: var(--tinta-2); font-weight: 500; }
.pasta__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel-2); border-bottom: 1px solid var(--linha); }
.pasta__foto img { width: 100%; height: 100%; object-fit: cover; }
.pasta__selo {
  position: absolute; left: .6rem; top: .6rem;
  font: 600 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--tinta); color: var(--folha); padding: .35rem .5rem; border-radius: 2px;
}
.pasta__selo--vendido { background: var(--folha); color: var(--tinta); }
.pasta__corpo { display: grid; gap: .9rem; padding: 1rem 1rem 1.1rem; }

.carimbo {
  display: inline-flex; align-items: center; justify-self: start;
  padding: .3rem .55rem;
  border: 2px solid var(--c); border-radius: 3px;
  color: var(--c);
  font: 600 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-3deg);
  background: color-mix(in srgb, var(--folha) 88%, var(--c));
}
.carimbo--pendente { --c: var(--tinta-2); border-style: dashed; }

.etiqueta { display: grid; gap: .5rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--linha); }
.etiqueta__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.etiqueta__origem { font: 500 .8125rem/1.3 var(--mono); }
.etiqueta__origem b { font-weight: 600; }

.regua { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.regua__passo {
  --cp: var(--linha);
  height: .55rem; border: 1px solid var(--linha); border-radius: 1px; background: transparent;
}
.regua__passo:nth-child(1) { --cp: var(--sem); }
.regua__passo:nth-child(2) { --cp: var(--pequena); }
.regua__passo:nth-child(3) { --cp: var(--media); }
.regua__passo.is-ativo {
  border-color: var(--cp);
  background: repeating-linear-gradient(135deg, var(--cp) 0 2px, transparent 2px 5px);
}
.regua__nomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; font: 500 .625rem/1.2 var(--mono); letter-spacing: .02em; color: var(--tinta-2); text-transform: uppercase; }
.regua__nomes span.is-ativo { color: var(--tinta); font-weight: 600; }

.pasta__titulo { font: 800 1.35rem/1.1 var(--display); font-stretch: 112%; letter-spacing: -.015em; }
.pasta__titulo a { text-decoration: none; }
.pasta__titulo a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pasta__specs { margin-top: .3rem; font: 500 .8125rem/1.4 var(--mono); color: var(--tinta-2); }
.pasta__rodape { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
.pasta__preco { font: 800 1.5rem/1 var(--display); font-stretch: 105%; }
.pasta__preco small { display: block; margin-bottom: .25rem; font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.pasta__abrir { font: 600 .875rem/1 var(--texto); white-space: nowrap; }
.pasta__abrir::after { content: ' →'; }
.pasta:hover .pasta__abrir { text-decoration: underline; text-decoration-color: var(--vermelho); text-underline-offset: .25em; }
.pasta:has(.pasta__titulo a:focus-visible) { outline: 3px solid var(--vermelho); outline-offset: 4px; }
.pasta__titulo a:focus-visible { outline: none; }

.pasta--vazia { background: transparent; box-shadow: none; border-style: dashed; }
.pasta--vazia::before { display: none; }
.pasta--vazia .pasta__aba { background: var(--papel); border-style: dashed; color: var(--tinta-2); }
.pasta--vazia .pasta__foto { display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 9px, rgb(70 81 74 / .07) 9px 11px); }
.pasta--vazia .pasta__foto svg { width: 4.5rem; fill: none; stroke: var(--guilhoche); stroke-width: 1.5; }
.pasta--vazia p { color: var(--tinta-2); font-size: .9375rem; }
@media (max-width: 559.98px) {
  .vitrine .is-vaga ~ .is-vaga { display: none; }
  .vitrine .pasta--vazia .pasta__foto { aspect-ratio: 16 / 7; }
}

/* pasta de destaque na abertura */
.abertura__pasta .pasta { max-width: 30rem; margin-inline: auto 0; }
.ficha-curta { display: grid; }
.ficha-curta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--linha); font-size: .9375rem; }
.ficha-curta div:last-child { border-bottom: 0; }
.ficha-curta dt { font: 500 .6875rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-curta dd { font-weight: 600; }
.ficha-curta .is-preco dd { font: 800 1.25rem/1.2 var(--display); }
.abertura__pasta .pasta__abrir { position: relative; z-index: 2; }

/* ---------- aviso de demonstração ---------- */
.aviso-demo { background: var(--tinta); color: #E8EDE7; }
.aviso-demo__linha { display: grid; gap: .2rem; padding-block: .9rem; font-size: .9375rem; }
.aviso-demo strong { font: 600 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #F4B4AE; }

/* ---------- seções ---------- */
.secao { padding-block: 3.5rem; }
.secao__topo { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.secao h2 { margin-top: .5rem; font: 800 clamp(2rem, 8vw, 3.4rem)/.98 var(--display); font-stretch: 115%; letter-spacing: -.03em; text-wrap: balance; }
.secao__lead { max-width: 38rem; color: var(--tinta-2); font-size: 1.0625rem; }
.estoque__conta { font: 500 .8125rem/1.4 var(--mono); color: var(--tinta-2); align-self: end; }

.controles { display: grid; gap: .9rem; margin-bottom: 1rem; }
.filtros { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.filtro {
  --c: var(--tinta);
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.5rem; padding: .4rem .8rem;
  background: var(--folha); border: 1px solid var(--linha); border-radius: 999px;
  font: 600 .875rem/1 var(--texto); cursor: pointer;
}
.filtro[data-classe="sem-sinistro"] { --c: var(--sem); }
.filtro[data-classe="pequena-monta"] { --c: var(--pequena); }
.filtro[data-classe="media-monta"] { --c: var(--media); }
.filtro__marca { width: .7rem; height: .7rem; border: 1px solid var(--c); background: repeating-linear-gradient(135deg, var(--c) 0 1.5px, transparent 1.5px 3.5px); }
.filtro b { font: 500 .75rem/1 var(--mono); color: var(--tinta-2); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--folha); }
.filtro[aria-pressed="true"] b { color: #C9D2CA; }
.filtro[aria-pressed="true"] .filtro__marca { border-color: var(--folha); background: repeating-linear-gradient(135deg, var(--folha) 0 1.5px, transparent 1.5px 3.5px); }

.ordenar { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; font: 500 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.ordenar select { min-height: 2.5rem; padding: .35rem 2rem .35rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--folha); font: 500 .9375rem/1 var(--texto); letter-spacing: 0; text-transform: none; color: var(--tinta); }

.vitrine { display: grid; gap: 1.5rem 1.25rem; }
.vitrine__carregando, .vitrine__vazio { padding: 2rem 1rem; text-align: center; border: 1px dashed var(--linha); border-radius: var(--raio); color: var(--tinta-2); }
.vitrine__vazio button { margin-top: .75rem; }

/* ---------- como ler ---------- */
.secao--ler { background: var(--folha); border-block: 1px solid var(--linha); }
.ler { display: grid; gap: 1rem; }
.ler__bloco { padding: 1.25rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.ler__bloco h3 { font: 800 1.3rem/1.15 var(--display); font-stretch: 110%; letter-spacing: -.01em; margin-bottom: .6rem; }
.ler__bloco > p { color: var(--tinta-2); }
.montas { display: grid; gap: .9rem; margin-top: 1.1rem; }
.monta { --c: var(--tinta-2); display: grid; grid-template-columns: .55rem 1fr; column-gap: .9rem; }
.monta[data-classe="sem-sinistro"] { --c: var(--sem); }
.monta[data-classe="pequena-monta"] { --c: var(--pequena); }
.monta[data-classe="media-monta"] { --c: var(--media); }
.monta__barra { grid-row: span 2; border: 1px solid var(--c); background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); }
.monta strong { font: 600 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.monta p { font-size: .9375rem; }
.ler__nota { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--linha); font-size: .9375rem; }

.ler__bloco--anotacao { background: var(--tinta); color: var(--folha); border-color: var(--tinta); }
.citacao blockquote p {
  font: 600 clamp(1.15rem, 4.6vw, 1.55rem)/1.3 var(--display); font-stretch: 100%;
  text-wrap: pretty;
}
.citacao figcaption { margin-top: .9rem; font: 400 .75rem/1.5 var(--mono); color: #B9C4BB; }
.ler__traducao { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #3A443E; color: #DCE3DD !important; }
.ler__traducao strong { color: #F4B4AE; }

.papeis { display: grid; gap: 1rem; }
.papeis dt { font: 600 .8125rem/1.4 var(--mono); letter-spacing: .02em; }
.papeis dd { margin-top: .2rem; font-size: .9375rem; color: var(--tinta-2); }

.checklist { display: grid; gap: .8rem; }
.checklist li { position: relative; padding-left: 1.9rem; font-size: .9375rem; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--tinta); border-radius: 2px;
}
.fontes { margin-top: 1.5rem; font: 400 .75rem/1.6 var(--mono); color: var(--tinta-2); }
.fontes a { color: var(--tinta); text-underline-offset: .2em; }

/* ---------- troca ---------- */
.troca { display: grid; gap: 1.75rem; }
.troca__texto p:last-child { margin-top: .9rem; color: var(--tinta-2); font-size: 1.0625rem; max-width: 30rem; }
.troca__form { display: grid; gap: 1rem; padding: 1.25rem; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: .9375rem; }
.campo label span { font: 400 .75rem/1 var(--mono); color: var(--tinta-2); margin-left: .35rem; }
.campo input, .campo select {
  width: 100%; min-height: 3rem; padding: .6rem .8rem;
  background: #fff; border: 1px solid #78857C; border-radius: var(--raio);
  font-size: 1rem;
}
.campo input::placeholder { color: #6B766F; }
.campo input[aria-invalid="true"] { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }
.campo__erro { font-size: .875rem; color: var(--vermelho-escuro); font-weight: 600; }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: #CAD3CC; padding-block: 2.5rem 1.5rem; font-size: .9375rem; }
.rodape__grade { display: grid; gap: 1.5rem; }
.rodape a { color: var(--folha); text-underline-offset: .2em; }
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid #333D37; font: 400 .75rem/1.5 var(--mono); }

/* =========================================================
   DOSSIÊ (dialog)
   ========================================================= */
.dossie {
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--papel); color: var(--tinta);
}
.dossie[open] { display: flex; flex-direction: column; }
.dossie::backdrop { background: rgb(18 22 20 / .62); }
.dossie__cabeca {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .55rem .55rem 1.125rem; background: var(--tinta); color: var(--folha);
}
.dossie__cabeca p { font: 500 .75rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.dossie__fechar {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .8rem;
  background: transparent; border: 1px solid #4B5650; border-radius: var(--raio); color: var(--folha);
  font: 600 .875rem/1 var(--texto); cursor: pointer;
}
.dossie__fechar:hover { background: #262D29; }
.dossie__rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.dossie__miolo { display: grid; gap: 2rem; padding: 1.25rem 1.125rem 2.5rem; max-width: 1080px; margin-inline: auto; }

.dossie__rosto { display: grid; gap: .6rem; }
.dossie__rosto h2 { font: 800 clamp(1.9rem, 8vw, 3rem)/1 var(--display); font-stretch: 115%; letter-spacing: -.03em; }
.dossie__specs { font: 500 .875rem/1.5 var(--mono); color: var(--tinta-2); }
.dossie__exemplo { padding: .7rem .85rem; border: 1px dashed var(--tinta-2); border-radius: var(--raio); font-size: .9375rem; background: var(--folha); }
.dossie__exemplo strong { font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-right: .35rem; }
.dossie .carimbo { font-size: .8125rem; padding: .4rem .65rem; }
.dossie [data-classe="sem-sinistro"] { --c: var(--sem); }
.dossie [data-classe="pequena-monta"] { --c: var(--pequena); }
.dossie [data-classe="media-monta"] { --c: var(--media); }

/* galeria: rolagem nativa com snap, sem arrasto por JS */
.galeria { display: grid; gap: .6rem; }
.galeria__palco { position: relative; }
.galeria__trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--raio); background: var(--tinta); scrollbar-width: none;
}
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__trilho figure { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
.galeria__trilho img { width: 100%; height: 100%; object-fit: cover; }
.galeria__seta {
  position: absolute; top: 50%; translate: 0 -50%;
  display: none; place-items: center; width: 2.75rem; height: 2.75rem;
  background: rgb(249 250 246 / .92); border: 1px solid var(--linha); border-radius: 50%;
  font: 600 1.1rem/1 var(--texto); cursor: pointer;
}
.galeria__seta--ant { left: .6rem; }
.galeria__seta--prox { right: .6rem; }
.galeria__seta:disabled { opacity: .35; cursor: default; }
.galeria__legenda { display: flex; justify-content: space-between; gap: 1rem; font: 500 .8125rem/1.4 var(--mono); color: var(--tinta-2); }
.galeria__legenda b { color: var(--tinta); font-weight: 600; white-space: nowrap; }
.galeria__tira { position: relative; display: flex; gap: .4rem; overflow-x: auto; padding: .2rem .1rem .4rem; scrollbar-width: thin; }
.galeria__mini { flex: 0 0 4.5rem; padding: 0; border: 2px solid transparent; border-radius: 3px; background: none; cursor: pointer; opacity: .7; }
.galeria__mini img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1px; }
.galeria__mini[aria-current="true"] { border-color: var(--vermelho); opacity: 1; }

.folha {
  background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 1.1rem;
}
.folha__titulo { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--tinta); }
.folha__titulo span { font: 500 .75rem/1 var(--mono); color: var(--tinta-2); }
.folha__titulo h3 { font: 800 1.2rem/1.1 var(--display); font-stretch: 110%; }

.painel { display: grid; gap: 1rem; }
.dados { display: grid; }
.dados > div { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.dados > div:last-child { border-bottom: 0; }
.dados dt { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.dados dd { font-weight: 600; }
.dados dd small { display: block; font-weight: 400; font-size: .875rem; color: var(--tinta-2); }
.dados .regua-bloco { max-width: 20rem; margin-top: .45rem; }

.preco__valor { font: 800 2.4rem/1 var(--display); font-stretch: 108%; letter-spacing: -.02em; }
.preco__rotulo { font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: .35rem; }
.fipe { display: grid; gap: .45rem; margin-top: 1rem; }
.fipe__linha { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: .6rem; font: 500 .8125rem/1.2 var(--mono); }
.fipe__barra { height: .6rem; background: var(--papel-2); border-radius: 1px; overflow: hidden; }
.fipe__barra i { display: block; height: 100%; background: var(--tinta); }
.fipe__linha--fipe .fipe__barra i { background: repeating-linear-gradient(90deg, var(--tinta-2) 0 4px, transparent 4px 7px); }
.fipe__dif { margin-top: .2rem; font-weight: 600; }
.fatores { display: grid; gap: .4rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--linha); }
.fatores li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; font-size: .9375rem; }
.fatores .seta { font: 600 1rem/1.35 var(--mono); }
.fatores .desce .seta { color: var(--vermelho-escuro); }
.fatores .sobe .seta { color: var(--sem); }
.nota { margin-top: .9rem; font-size: .8125rem; color: var(--tinta-2); }

.contato-carro { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 2px solid var(--tinta); }
.contato-carro .botao { width: 100%; }
.contato-carro__vendido { font: 600 .875rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.limite { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem 1rem; border-left: 4px solid var(--tinta); background: var(--papel-2); font-size: .9375rem; }
.limite b { font: 600 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.reparo { display: grid; gap: 1.25rem; }

/* croqui 3D: duas vistas em SVG (assets/croqui), zonas hachuradas pela classificação */
.croqui { margin: 0; color: var(--c, var(--tinta-2)); }
.croqui__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.croqui__vistas { display: grid; gap: .75rem; }
.croqui__vista { margin: 0; padding: .5rem .5rem .6rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.croqui__desenho { position: relative; }
.croqui__desenho img { display: block; width: 100%; height: auto; }
.croqui__zonas { position: absolute; inset: 0; width: 100%; height: 100%; }
.croqui__desenho:empty { aspect-ratio: 8 / 5; }
/* área sem reparo fica invisível: o desenho do carro aparece inteiro */
.croqui .zona { fill: none; stroke: none; transition: fill .2s; }
.croqui .zona.is-ativa { fill: url(#croqui-hachura); stroke: currentColor; stroke-width: 2.5; stroke-opacity: .8; stroke-linejoin: round; }
.croqui__vista figcaption { margin-top: .35rem; font: 500 .6875rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); text-align: center; }
.croqui__extra { margin-top: .6rem; font-size: .875rem; color: var(--tinta-2); }
.croqui__marcador { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -.1rem; border: 1px solid currentColor; background: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 4px); }
@media (min-width: 420px) { .croqui__vistas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .dossie .reparo--croqui { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; } }
.carro-planta { width: 100%; max-width: 12rem; margin-inline: auto; color: var(--c, var(--tinta-2)); }
.carro-planta .corpo { fill: var(--folha); stroke: var(--tinta); stroke-width: 2; }
.carro-planta .zona { fill: none; stroke: var(--linha); stroke-width: 1; stroke-dasharray: 3 3; }
.carro-planta .zona.is-ativa { fill: url(#hachura); stroke: currentColor; stroke-dasharray: none; stroke-width: 1.5; }
.carro-planta .vidro { fill: none; stroke: var(--tinta-2); stroke-width: 1.2; }
.carro-planta .roda { fill: var(--tinta); }
.carro-planta text { font: 600 9px var(--mono); fill: var(--tinta-2); letter-spacing: .08em; }
.lista-reparos { display: grid; }
.lista-reparos li { display: grid; grid-template-columns: 5.2rem 1fr; gap: .2rem .75rem; padding: .65rem 0; border-bottom: 1px solid var(--linha); }
.lista-reparos li:last-child { border-bottom: 0; }
.lista-reparos .servico { font: 600 .6875rem/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lista-reparos .area { grid-column: 2; font: 400 .75rem/1.3 var(--mono); color: var(--tinta-2); }
.lista-reparos .nf { color: var(--sem); }
.lista-reparos .sem-nf { color: var(--vermelho-escuro); }
.vazio-texto { color: var(--tinta-2); font-size: .9375rem; }

.checagens { display: grid; }
.checagens li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .15rem .7rem; padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.checagens li:last-child { border-bottom: 0; }
.checagens .marca-estado { grid-row: span 3; width: 1.35rem; height: 1.35rem; margin-top: .1rem; display: grid; place-items: center; border: 2px solid var(--tinta-2); border-radius: 2px; font: 700 .8rem/1 var(--mono); }
.checagens .sem-registro .marca-estado { border-color: var(--sem); color: var(--sem); }
.checagens .com-registro .marca-estado { border-color: var(--media); color: var(--media); background: repeating-linear-gradient(135deg, rgb(132 84 9 / .18) 0 2px, transparent 2px 5px); }
.checagens .item { font-weight: 600; }
.checagens .estado { font: 500 .75rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.checagens .detalhe { font-size: .9375rem; }
.checagens .fonte { grid-column: 2; font: 400 .75rem/1.4 var(--mono); color: var(--tinta-2); }

.linha-tempo { display: grid; }
.linha-tempo li { position: relative; display: grid; gap: .15rem; padding: 0 0 1.1rem 1.5rem; }
.linha-tempo li::before { content: ''; position: absolute; left: .3rem; top: .45rem; bottom: -.2rem; width: 1px; background: var(--linha); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo li::after { content: ''; position: absolute; left: 0; top: .3rem; width: .65rem; height: .65rem; border: 2px solid var(--tinta); background: var(--folha); border-radius: 50%; }
.linha-tempo time { font: 600 .75rem/1.4 var(--mono); }
.linha-tempo .evento { font-size: .9375rem; }
.linha-tempo .fonte { font: 400 .75rem/1.4 var(--mono); color: var(--tinta-2); }

.ficha-tecnica { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.ficha-tecnica div { padding: .6rem 0; border-bottom: 1px solid var(--linha); }
.ficha-tecnica dt { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-tecnica dd { font-weight: 600; }
.opcionais { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.opcionais li { padding: .3rem .6rem; border: 1px solid var(--linha); border-radius: 999px; font-size: .875rem; background: var(--papel); }

.dossie__barra {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem 1.125rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--folha); border-top: 1px solid var(--linha);
}
.dossie__barra p { font: 800 1.2rem/1.1 var(--display); }
.dossie__barra small { display: block; font: 500 .625rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.dossie__barra .botao { min-height: 2.75rem; padding-inline: 1rem; }

/* =========================================================
   Telas maiores
   ========================================================= */
@media (min-width: 560px) {
  .envelope { padding-inline: 1.5rem; }
  .tarja__linha span:last-child { display: inline; }
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indice { grid-template-columns: repeat(6, 1fr); }
  .indice div { flex-direction: column; gap: .2rem; }
  .abertura__acoes .botao { flex: 0 0 auto; }
  .controles { grid-template-columns: 1fr auto; align-items: center; }
  .ordenar { justify-self: end; }
  .aviso-demo__linha { grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; }
  .ficha-tecnica { grid-template-columns: repeat(3, 1fr); }
  .dossie__miolo { padding-inline: 1.5rem; }
  .galeria__seta { display: grid; }
  .galeria__mini { flex-basis: 5.5rem; }
}

@media (min-width: 820px) {
  html { scroll-padding-top: 4.5rem; }
  .topo__linha { flex-wrap: nowrap; padding-top: 0; }
  .topo__nav { order: 0; width: auto; gap: 1.5rem; overflow: visible; }
  .topo__nav a { font-size: .9375rem; padding-block: .5rem; }
  .topo__nav + .botao { margin-left: .5rem; }
  .galeria__trilho figure { aspect-ratio: auto; height: min(54dvh, 600px); }
  .abertura__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; padding-block: 3.5rem 4.5rem; }
  .secao { padding-block: 5rem; }
  .secao__topo { grid-template-columns: 1fr minmax(0, 26rem); align-items: end; gap: 2rem; }
  .ler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ler__bloco { padding: 1.6rem; }
  .ler__bloco--monta { grid-row: span 2; }
  .troca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__fim { grid-column: 1 / -1; }
  .painel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
  .painel .folha--preco { position: sticky; top: 1rem; }
  .reparo { grid-template-columns: 11rem 1fr; align-items: start; }
  .dossie__secoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .dossie__secoes .folha--larga { grid-column: 1 / -1; }
  .dossie__barra { display: none; }
}

@media (min-width: 900px) {
  .dossie { width: min(1120px, calc(100% - 3rem)); height: calc(100% - 3rem); margin: auto; border-radius: 6px; overflow: hidden; }
  .dossie__miolo { padding: 1.75rem 2rem 3rem; }
}

@media (min-width: 1080px) {
  .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 819.98px) {
  .dossie__secoes { display: grid; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html, .galeria__trilho { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}