@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&display=swap');

/* ==============================================================
   valordocarro.com.br
   Tinta naval + tijolo. O tijolo e a cor da marca E a cor da perda:
   como o site inteiro fala de desvalorizacao, as duas coisas sao a
   mesma coisa, e a paleta fica coerente em vez de decorada.
   ============================================================== */

:root {
  --tinta:        #14202e;
  --tinta-suave:  #46586b;
  --tinta-fraca:  #7d8b99;

  --papel:        #f2f4f6;
  --branco:       #ffffff;
  --linha:        #dde3e8;
  --linha-forte:  #c3ccd4;

  --tijolo:       #a83a2b;
  --tijolo-claro: #f7ebe8;
  --musgo:        #2c6a4f;
  --musgo-claro:  #e9f2ed;
  --ouro:         #b08414;

  --medida: 46rem;
  --raio:   6px;
  --raio-g: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:        #e8edf2;
    --tinta-suave:  #a3b1bf;
    --tinta-fraca:  #75838f;
    --papel:        #0e1620;
    --branco:       #172231;
    --linha:        #263445;
    --linha-forte:  #36485c;
    --tijolo:       #e07a68;
    --tijolo-claro: #35201c;
    --musgo:        #6fc79c;
    --musgo-claro:  #14291f;
    --ouro:         #d4a63a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

.numero { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

a { color: var(--tijolo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--tijolo);
  outline-offset: 2px;
  border-radius: 3px;
}

.pular {
  position: absolute; left: -9999px;
}
.pular:focus {
  left: 1rem; top: 1rem; z-index: 50;
  background: var(--branco); padding: .6rem 1rem; border-radius: var(--raio);
}

/* ---------- estrutura ---------- */

.faixa { width: 100%; }
.dentro {
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.dentro--largo { max-width: 64rem; }

/* ---------- topo ---------- */

.topo {
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
}
.topo .dentro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px;
}
.marca {
  display: inline-flex; align-items: baseline; gap: .1rem;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em;
  color: var(--tinta);
}
.marca:hover { text-decoration: none; }
.marca b { color: var(--tijolo); font-weight: 600; }

.menu { display: flex; gap: 1.25rem; font-size: .875rem; }
.menu a { color: var(--tinta-suave); }
@media (max-width: 34rem) { .menu { display: none; } }

/* ---------- capa ---------- */

.capa {
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding-block: 3rem 2.5rem;
}
.capa h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 5vw, 2.35rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.025em;
  max-width: 22ch;
}
.capa p { margin: 0; color: var(--tinta-suave); max-width: 52ch; }

/* ---------- busca ---------- */

.busca {
  display: grid; gap: .5rem; margin-top: 1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
@media (max-width: 40rem) {
  .busca { grid-template-columns: 1fr 1fr; }
  .busca select:first-child { grid-column: 1 / -1; }
  .busca button { grid-column: 1 / -1; }
}

select, input[type="search"] {
  width: 100%; height: 46px; padding: 0 .75rem;
  font: inherit; font-size: .9375rem;
  color: var(--tinta); background: var(--branco);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%237d8b99' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: 16px;
  padding-right: 2rem;
}
select:hover { border-color: var(--tinta-fraca); }

.btn {
  height: 46px; padding: 0 1.4rem;
  font: inherit; font-size: .9375rem; font-weight: 500;
  color: #fff; background: var(--tijolo);
  border: 1px solid var(--tijolo); border-radius: var(--raio);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(.92); }

.dica { margin: .7rem 0 0; font-size: .8125rem; color: var(--tinta-fraca); }
.dica code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .95em; background: var(--papel); padding: .1rem .35rem; border-radius: 3px;
}

/* ---------- secoes ---------- */

.secao { padding-block: 2.25rem; }
.secao + .secao { border-top: 1px solid var(--linha); }
.secao > h2 {
  margin: 0 0 1.1rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
}

/* ---------- cartoes de ranking ---------- */

.rankings { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.rank {
  display: block; padding: 1rem 1.1rem;
  background: var(--branco); border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
}
.rank:hover { border-color: var(--linha-forte); text-decoration: none; }
.rank--bom   { border-left-color: var(--musgo); }
.rank--ruim  { border-left-color: var(--tijolo); }
.rank--alta  { border-left-color: var(--ouro); }

.rank .titulo { display: block; font-size: .8125rem; color: var(--tinta-suave); }
.rank .carro  { display: block; margin-top: .15rem; font-weight: 500; color: var(--tinta); }
.rank .cifra  { display: block; margin-top: .35rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.rank .cifra small { font-size: .75rem; font-weight: 400; color: var(--tinta-suave); letter-spacing: 0; }

.sobe { color: var(--musgo); }
.desce { color: var(--tijolo); }

/* ---------- grade de veiculos ---------- */

.grade { display: grid; gap: .625rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

.veiculo {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .85rem 1rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
}
.veiculo:hover { border-color: var(--tinta-fraca); text-decoration: none; }
.veiculo .nome { font-size: .9375rem; font-weight: 500; color: var(--tinta); }
.veiculo .par { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.veiculo .preco { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.veiculo .delta { font-size: .8125rem; }

/* ---------- nuvem de links ---------- */

.pilhas { display: flex; flex-wrap: wrap; gap: .4rem; }
.pilha {
  padding: .35rem .8rem; font-size: .875rem;
  color: var(--tinta-suave); background: var(--branco);
  border: 1px solid var(--linha); border-radius: 999px;
}
.pilha:hover { border-color: var(--tinta-fraca); color: var(--tinta); text-decoration: none; }
.pilha[aria-current="page"] {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel);
}

/* ==============================================================
   PAGINA DO VEICULO
   ============================================================== */

.trilha { font-size: .8125rem; color: var(--tinta-fraca); padding-block: .9rem; }
.trilha a { color: var(--tinta-fraca); }
.trilha span { padding-inline: .35rem; }

.ficha-topo { background: var(--branco); border-bottom: 1px solid var(--linha); padding-bottom: 2rem; }
.ficha-topo h1 {
  margin: 0; font-size: clamp(1.35rem, 4.2vw, 1.9rem);
  font-weight: 600; line-height: 1.22; letter-spacing: -0.025em;
}

/* Meta como lista de definicao, nao como string de pontinhos */
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: .75rem 0 0; font-size: .8125rem; }
.meta div { display: flex; gap: .4rem; }
.meta dt { color: var(--tinta-fraca); margin: 0; }
.meta dd { margin: 0; color: var(--tinta-suave); }
.meta dd code { font-family: ui-monospace, Menlo, monospace; }

.agora { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.agora .valor { font-size: clamp(2.1rem, 7vw, 2.9rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.selo {
  font-size: .8125rem; font-weight: 500; padding: .25rem .6rem; border-radius: var(--raio);
}
.selo--desce { background: var(--tijolo-claro); color: var(--tijolo); }
.selo--sobe  { background: var(--musgo-claro); color: var(--musgo); }

/* --------------------------------------------------------------
   Barra de desgaste: o heroi da pagina.
   Mostra o valor de lancamento corrigido como trilho cheio e o que
   sobrou como trecho pintado. O vao e literalmente o dinheiro que
   evaporou -- a informacao vira a forma.
   -------------------------------------------------------------- */

.desgaste { margin-top: 1.75rem; }
.desgaste .trilho {
  position: relative; height: 44px;
  background: var(--tijolo-claro); border-radius: var(--raio);
  overflow: hidden;
}
.desgaste .restou {
  position: absolute; inset: 0 auto 0 0;
  background: var(--tinta);
  display: flex; align-items: center; padding-left: .85rem;
  color: var(--papel); font-size: .8125rem; font-weight: 500;
  border-radius: var(--raio) 0 0 var(--raio);
}
.desgaste .sumiu {
  position: absolute; inset: 0 .85rem 0 auto;
  display: flex; align-items: center;
  color: var(--tijolo); font-size: .8125rem; font-weight: 500;
}
.desgaste .legenda {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .5rem; font-size: .75rem; color: var(--tinta-fraca);
}

/* ---------- indicadores ---------- */

.indicadores {
  display: grid; gap: .625rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.ind { padding: .85rem 1rem; background: var(--papel); border-radius: var(--raio); }
.ind dt { margin: 0 0 .2rem; font-size: .75rem; color: var(--tinta-suave); }
.ind dd { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
.ind .rodape { display: block; margin-top: .1rem; font-size: .75rem; font-weight: 400; color: var(--tinta-fraca); letter-spacing: 0; }

/* ---------- grafico ---------- */

.grafico { margin-top: .75rem; }
.grafico svg { width: 100%; height: auto; display: block; }
.serie-nominal   { stroke: var(--tinta);  stroke-width: 2; fill: none; }
.serie-corrigida { stroke: var(--ouro);   stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.eixo   { stroke: var(--linha); stroke-width: 1; }
.rotulo { fill: var(--tinta-fraca); font-size: 11px; }

.chaves { display: flex; gap: 1.1rem; font-size: .8125rem; color: var(--tinta-suave); }
.chave { display: inline-flex; align-items: center; gap: .4rem; }
.chave i { width: 18px; height: 2px; background: var(--tinta); display: inline-block; }
.chave.corrigida i { background: var(--ouro); }

/* ---------- tabela ano a ano ---------- */

.tabela-envelope { overflow-x: auto; }
table.anos { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.anos th, table.anos td { padding: .6rem .5rem; text-align: right; white-space: nowrap; }
table.anos th:first-child, table.anos td:first-child { text-align: left; padding-left: 0; }
table.anos th:last-child, table.anos td:last-child { padding-right: 0; }
table.anos thead th {
  font-size: .75rem; font-weight: 500; color: var(--tinta-suave);
  border-bottom: 1px solid var(--linha-forte);
}
table.anos tbody tr { border-bottom: 1px solid var(--linha); }
table.anos tbody tr:last-child { border-bottom: 0; font-weight: 500; }
table.anos .corrigido { color: var(--tinta-suave); }

/* ---------- leitura ---------- */

.leitura {
  margin-top: 1.25rem; padding: 1rem 1.15rem;
  background: var(--branco); border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro); border-radius: 0 var(--raio-g) var(--raio-g) 0;
  font-size: .9375rem; line-height: 1.7;
}
.leitura strong { font-weight: 600; }

/* ---------- ficha tecnica ---------- */

.tecnica {
  display: grid; gap: .9rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin: 0;
}
.tecnica dt { font-size: .75rem; color: var(--tinta-fraca); }
.tecnica dd { margin: .1rem 0 0; font-size: .9375rem; }

/* ---------- rodape ---------- */

.rodape {
  background: var(--branco); border-top: 1px solid var(--linha);
  padding-block: 2rem; margin-top: 2rem;
  font-size: .8125rem; color: var(--tinta-fraca); line-height: 1.7;
}
.rodape a { color: var(--tinta-suave); }

/* ---------- utilidades ---------- */

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .topo, .menu, .rodape, .busca { display: none; }
  body { background: #fff; }
}